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

removed bold + larger text on hover bc of wiggle :(

Browse Source
This commit is contained in:
Nihaal Sharma
2023-06-02 19:20:33 +01:00
parent ac9a002d48
commit 072a08dbe1
1 changed files with 95 additions and 109 deletions
Download Patch File Download Diff File Expand all files Collapse all files

204
style.css
View File

@@ -1,100 +1,97 @@
* { /*regular text (body, p, b, h*, ) styles*/
box-sizing: border-box; * {
margin: 0px; box-sizing: border-box;
} margin: 0px;
b { }
color: #ff6200 b {
} color: #ff6200
a { }
color: #007AFF a {
} color: #007AFF
.bar { }
width: 100%; body {
position: fixed; background-color: #f2f2f2;
list-style-type: none; color: #222;
margin: 0; font-family: system-ui;
padding: 0; }
overflow: hidden; p {
font-size: 20px;
padding-left: 20px;
padding-right: 20px;
}
h1 {
font-size: 40px;
font-weight: 750;
padding-top: 0px;
padding-bottom: 0px;
padding-left: 20px;
padding-right: 20px;
}
h2 {
font-size: 30px;
font-weight: 400;
padding-top: 0px;
padding-bottom: 0px;
padding-left: 20px;
padding-right: 20px;
}
h3 {
font-size: 25px;
font-weight: 400;
padding-top: 0px;
padding-bottom: 0px;
padding-left: 20px;
padding-right: 20px;
}
/* regular text (body, p, b, h*, ) styles*/
-webkit-backdrop-filter: blur(2.5px);
-moz-backdrop-filter: blur(2.5px);
backdrop-filter: blur(2.5px);
-webkit-box-shadow: 0px 0px 10px 10px rgba(0, 0, 0, 0.25);
-moz-box-shadow: 0px 0px 10px 10px rgba(0, 0, 0, 0.25);
box-shadow: 0px 0px 10px 10px rgba(0, 0, 0, 0.25);
}
.barItem {
float: left;
}
.barItem h1 {
font-size: 20px;
padding: 9px;
}
.barItem p {
font-size: 16px;
padding: 12px;
}
.barItem a {
display: block;
color: #222;
text-align: center;
padding: 12px;
text-decoration: none;
transition: all 0.2s;
}
.barItem a:hover {
background-color: #222;
color: #ddd;
font-weight: 600;
font-size: 20px;
padding: 9px;
-webkit-box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.5);
box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.5);
}
.contentPush{ .contentPush{
height: 65px; height: 65px;
} }
body {
background-color: #f2f2f2; /* Bar styling*/
color: #222; .bar {
font-family: system-ui; width: 100%;
} position: fixed;
p { list-style-type: none;
font-size: 20px; margin: 0;
padding-left: 20px; padding: 0;
padding-right: 20px; overflow: hidden;
}
h1 { -webkit-backdrop-filter: blur(2.5px);
font-size: 40px; -moz-backdrop-filter: blur(2.5px);
font-weight: 750; backdrop-filter: blur(2.5px);
padding-top: 0px;
padding-bottom: 0px; -webkit-box-shadow: 0px 0px 10px 10px rgba(0, 0, 0, 0.25);
padding-left: 20px; -moz-box-shadow: 0px 0px 10px 10px rgba(0, 0, 0, 0.25);
padding-right: 20px; box-shadow: 0px 0px 10px 10px rgba(0, 0, 0, 0.25);
} }
h2 { .barItem {
font-size: 30px; float: left;
font-weight: 400; text-align: center;
padding-top: 0px; }
padding-bottom: 0px; .barItem h1 {
padding-left: 20px; font-size: 20px;
padding-right: 20px; padding: 9px;
} }
h3 { .barItem * {
font-size: 25px; color: #ddd;
font-weight: 400; text-decoration: none;
padding-top: 0px; display:block;
padding-bottom: 0px; transition: all 0.2s;
padding-left: 20px; font-size: 16px;
padding-right: 20px; padding: 12px;
} }
.barItem *:hover {
background-color: #222;
color: #ddd;
-webkit-box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.5);
box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.5);
}
/* Bar styling*/
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
body { body {
background-color: #222; background-color: #222;
@@ -105,34 +102,23 @@ h3 {
-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);
} }
.barItem a { .barItem *:hover {
color: #ddd;
}
.barItem a:hover {
background-color: #ddd; background-color: #ddd;
color: #222; color: #222;
-webkit-box-shadow: 0px 0px 5px 5px rgba(255, 255, 255, 0.5);
-moz-box-shadow: 0px 0px 5px 5px rgba(255, 255, 255, 0.5);
box-shadow: 0px 0px 5px 5px rgba(255, 255, 255, 0.5);
} }
#transaction { #transaction {
background-color: #222; background-color: #222;
} }
} }
@media screen and (max-width: 600px) { @media screen and (max-width: 600px) {
body {
width: 100%;
}
img { img {
width: 100%; width: 100%;
} }
p { p {
width: 100%; width: 100%;
} }
h1 {
width: 100%;
}
h2 {
width: 100%;
}
h3 {
width: 100%;
}
} }