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

prefected changes in last commit

Browse Source 
toast slill lags when animation is done, dunno how to fix
added shadow and bg blur to make the toast fit in

cleaned up code aswell
This commit is contained in:
Nihaal Sharma
2023-06-04 18:17:17 +01:00
parent 157ba749c0
commit 98f5fe3d38
2 changed files with 57 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
script.js
View File

@@ -7,7 +7,6 @@ function notLink() {
notLinkToast.className = "show"; notLinkToast.className = "show";
setTimeout( setTimeout(
function() { function() {
x.className = x.className.replace("show", ""); notLinkToast.className = notLinkToast.className.replace("show", "");
} }, 3000);
, 3000);
} }

103
style.css
View File

@@ -3,6 +3,8 @@
margin: 0px; margin: 0px;
font-family: system-ui; font-family: system-ui;
transition: 0.2s; transition: 0.2s;
color: #222;
} }
b { b {
color: #ff6200 color: #ff6200
@@ -12,7 +14,6 @@
} }
body { body {
background-color: #ddd; background-color: #ddd;
color: #222;
} }
p { p {
font-size: 20px; font-size: 20px;
@@ -23,7 +24,7 @@
font-size: 40px; font-size: 40px;
font-weight: 750; font-weight: 750;
padding-top: 0px; padding-top: 0px;
padding-bottom: 0px; padding-top: 0px;
padding-left: 20px; padding-left: 20px;
padding-right: 20px; padding-right: 20px;
} }
@@ -31,7 +32,7 @@
font-size: 30px; font-size: 30px;
font-weight: 400; font-weight: 400;
padding-top: 0px; padding-top: 0px;
padding-bottom: 0px; padding-top: 0px;
padding-left: 20px; padding-left: 20px;
padding-right: 20px; padding-right: 20px;
} }
@@ -39,7 +40,7 @@
font-size: 25px; font-size: 25px;
font-weight: 400; font-weight: 400;
padding-top: 0px; padding-top: 0px;
padding-bottom: 0px; padding-top: 0px;
padding-left: 20px; padding-left: 20px;
padding-right: 20px; padding-right: 20px;
} }
@@ -63,15 +64,12 @@
display: flex; display: flex;
padding: 0; padding: 0;
overflow: hidden; overflow: hidden;
z-index: 2;
background-color: rgba(255, 255, 255, 0.25); background-color: rgba(255, 255, 255, 0.25);
-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);
-webkit-box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.25);
-moz-box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.25);
box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.25);
} }
.barItem { .barItem {
float: left; float: left;
@@ -83,16 +81,19 @@
color: #222; color: #222;
text-decoration: none; text-decoration: none;
font-size: 20px; font-size: 20px;
padding: 9.20px 12px; padding: 9.2px 12px;
} }
.barItem h1 { .barItem h1 {
font-size: 30px; font-size: 30px;
padding-top: 2.5px; padding-top: 2.5px;
padding-bottom: 2.5px; padding-bottom: 2.5px;
border-right-style: solid;
border-width: 1.5px;
border-color: #222;
} }
.barItem:hover { .barItem:hover {
flex: 1.5; flex: 1.5;
background-color: #eee; background-color: #fff;
} }
.barItem *:hover { .barItem *:hover {
font-size: 30px; font-size: 30px;
@@ -104,76 +105,76 @@
background-color: #111; background-color: #111;
color: #eee; color: #eee;
animation-name: NAME;
animation-delay: 0.2s;
animation-duration: 4s;
animation-iteration-count: infinite;
-webkit-box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.25); -webkit-box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.25);
-moz-box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.25); -moz-box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.25);
box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.25); box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.25);
} }
html:has(.barItem a:hover) .notLink { html:has(.barItem a:hover) . {}
font-size: 16px;
}
/* not Link toast*/ /* not Link toast*/
#notLinkToast { #notLinkToast {
visibility: hidden; visibility: hidden;
min-width: 250px; min-width: 250px;
margin-left: -125px; margin-left: -125px;
background-color: #333; background-color: rgba(255, 255, 255, 0.25);
color: #fff;
text-align: center; text-align: center;
border-radius: 2px; border-radius: 0px 0px 10px 10px;
padding: 16px; padding: 16px;
position: fixed; position: fixed;
z-index: 1; z-index: 1;
left: 50%; left: 50%;
top: 30px; top: 45px;
font-size: 17px; font-size: 20px;
}
-webkit-box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.25);
-moz-box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.25);
box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.25);
-webkit-backdrop-filter: blur(2.5px);
-moz-backdrop-filter: blur(2.5px);
backdrop-filter: blur(2.5px);
}
#notLinkToast.show { #notLinkToast.show {
visibility: visible; visibility: visible;
-webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s; -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s forwards;
animation: fadein 0.5s, fadeout 0.5s 2.5s; animation: fadein 0.5s, fadeout 0.5s 2.5s forwards;
}
@-webkit-keyframes fadein {
from {top: 0; opacity: 0;}
to {top: 30px; opacity: 1;}
}
@keyframes fadein {
from {top: 0; opacity: 0;}
to {top: 30px; opacity: 1;}
}
@-webkit-keyframes fadeout {
from {top: 30px; opacity: 1;}
to {top: 0; opacity: 0;}
}
@keyframes fadeout {
from {top: 30px; opacity: 1;}
to {top: 0; opacity: 0;}
} }
@-webkit-keyframes fadein {
from {top: 0; opacity: 0;}
to {top: 45px; opacity: 1;}
}
@keyframes fadein {
from {top: 0; opacity: 0;}
to {top: 45px; opacity: 1;}
}
@-webkit-keyframes fadeout {
from {top: 45px; opacity: 1;}
to {top: 0; opacity: 0;}
}
@keyframes fadeout {
from {top: 45px; opacity: 1;}
to {top: 0; opacity: 0;}
}
/* not Link toast */ /* not Link toast */
/* Bar styling */ /* Bar styling */
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
* {
color: #ddd;
}
body { body {
background-color: #222; background-color: #222;
color: #ddd; color: #ddd;
} }
.bar { .bar {
background-color: rgba(0, 0, 0, 0.25); background-color: rgba(0, 0, 0, 0.25);
-webkit-box-shadow: 0px 0px 5px 5px rgba(255, 255, 255, 0.25);
-moz-box-shadow: 0px 0px 5px 5px rgba(255, 255, 255, 0.25);
box-shadow: 0px 0px 5px 5px rgba(255, 255, 255, 0.25);
} }
.barItem * { .barItem * {
color: #ddd; color: #ddd;
} }
.barItem h1 {
border-color: #ddd;
}
.barItem:hover { .barItem:hover {
background-color: #555; background-color: #555;
} }
@@ -185,6 +186,12 @@
-moz-box-shadow: 0px 0px 5px 5px rgba(255, 255, 255, 0.25); -moz-box-shadow: 0px 0px 5px 5px rgba(255, 255, 255, 0.25);
box-shadow: 0px 0px 5px 5px rgba(255, 255, 255, 0.25); box-shadow: 0px 0px 5px 5px rgba(255, 255, 255, 0.25);
} }
#notLinkToast {
background-color: rgba(0, 0, 0, 0.25);
-webkit-box-shadow: 0px 0px 5px 5px rgba(255, 255, 255, 0.25);
-moz-box-shadow: 0px 0px 5px 5px rgba(255, 255, 255, 0.25);
box-shadow: 0px 0px 5px 5px rgba(255, 255, 255, 0.25);
}
} }
@media screen and (max-width: 600px) { @media screen and (max-width: 600px) {
img { img {