neon443/neon443.github.io
1
0
Fork 0
mirror of https://github.com/neon443/neon443.github.io.git synced 2026-03-11 07:09:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

made topbar better

Browse Source 
no just need to figure out a use for it lol
This commit is contained in:
Nihaal Sharma
2023-05-27 19:35:02 +01:00
parent fabbca32fd
commit d496618f98
3 changed files with 56 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
index.html
View File

@@ -11,8 +11,9 @@
</head> </head>
<script type="text/javascript" src="./script.js"></script> <script type="text/javascript" src="./script.js"></script>
<body> <body>
<div id=topbar> <div class=topbar>
<h1 id="topbarTitle">neon443</h1> <h1>neon443</h1>
<a href="" onclick="showAlert();">dont click</a>
</div> </div>
<div class="contentPush"></div><br> <div class="contentPush"></div><br>
<p> <p>

3
script.js
View File

@@ -0,0 +1,3 @@
function showAlert() {
alert("Hey! this is under development. i told u not to click.");
}

59
style.css
View File

@@ -11,11 +11,11 @@ a {
color: #007AFF color: #007AFF
} }
#topbar { .topbar {
position: fixed;
top: 0px;
width: 100%; width: 100%;
overflow: hidden;
position: fixed;
-webkit-backdrop-filter: blur(2.5px); -webkit-backdrop-filter: blur(2.5px);
-moz-backdrop-filter: blur(2.5px); -moz-backdrop-filter: blur(2.5px);
backdrop-filter: blur(2.5px); backdrop-filter: blur(2.5px);
@@ -25,8 +25,8 @@ a {
box-shadow: 0px 0px 10px 10px rgba(0, 0, 0, 0.25); box-shadow: 0px 0px 10px 10px rgba(0, 0, 0, 0.25);
} }
#topbarTitle { .topbar * {
width: auto; display: inline
} }
.contentPush{ .contentPush{
@@ -37,7 +37,6 @@ body {
background-color: #f2f2f2; background-color: #f2f2f2;
color: #222222; color: #222222;
font-family: system-ui; font-family: system-ui;
height: 100%;
} }
p { p {
@@ -79,7 +78,7 @@ h3 {
color: #f2f2f2; color: #f2f2f2;
} }
#topbar { .topbar {
-webkit-box-shadow: 0px 0px 10px 10px rgba(255, 255, 255, 0.25); -webkit-box-shadow: 0px 0px 10px 10px rgba(255, 255, 255, 0.25);
-moz-box-shadow: 0px 0px 10px 10px rgba(255, 255, 255, 0.25); -moz-box-shadow: 0px 0px 10px 10px rgba(255, 255, 255, 0.25);
box-shadow: 0px 0px 10px 10px rgba(255, 255, 255, 0.25); box-shadow: 0px 0px 10px 10px rgba(255, 255, 255, 0.25);
@@ -94,7 +93,49 @@ h3 {
} }
} }
@media screen and (max-width: 600px) { @media screen and (max-width: 600px) {
* { .contentPush {
height: 53px;
}
body {
width: 100%; width: 100%;
} }
img {
width: 100%;
}
p {
width: 100%;
padding-left: 10px;
padding-right: 10px;
}
h1 {
width: 100%;
font-size: 40px;
font-weight: 750;
padding-top: 0px;
padding-bottom: 0px;
padding-left: 10px;
padding-right: 10px;
}
h2 {
width: 100%;
font-size: 30px;
font-weight: 300;
padding-top: 0px;
padding-bottom: 0px;
padding-left: 10px;
padding-right: 10px;
}
h3 {
width: 100%;
font-size: 25px;
font-weight: 200;
padding-top: 0px;
padding-bottom: 0px;
padding-left: 10px;
padding-right: 10px;
}
} }