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>
<script type="text/javascript" src="./script.js"></script>
<body>
<div id=topbar>
<h1 id="topbarTitle">neon443</h1>
<div class=topbar>
<h1>neon443</h1>
<a href="" onclick="showAlert();">dont click</a>
</div>
<div class="contentPush"></div><br>
<p>

3
script.js
View File

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

57
style.css
View File

@@ -11,10 +11,10 @@ a {
color: #007AFF
}
#topbar {
position: fixed;
top: 0px;
.topbar {
width: 100%;
overflow: hidden;
position: fixed;
-webkit-backdrop-filter: blur(2.5px);
-moz-backdrop-filter: blur(2.5px);
@@ -25,8 +25,8 @@ a {
box-shadow: 0px 0px 10px 10px rgba(0, 0, 0, 0.25);
}
#topbarTitle {
width: auto;
.topbar * {
display: inline
}
.contentPush{
@@ -37,7 +37,6 @@ body {
background-color: #f2f2f2;
color: #222222;
font-family: system-ui;
height: 100%;
}
p {
@@ -79,7 +78,7 @@ h3 {
color: #f2f2f2;
}
#topbar {
.topbar {
-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);
box-shadow: 0px 0px 10px 10px rgba(255, 255, 255, 0.25);
@@ -94,7 +93,49 @@ h3 {
}
}
@media screen and (max-width: 600px) {
* {
.contentPush {
height: 53px;
}
body {
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;
}
}