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

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

124
style.css
View File

@@ -1,3 +1,4 @@
/*regular text (body, p, b, h*, ) styles*/
* { * {
box-sizing: border-box; box-sizing: border-box;
margin: 0px; margin: 0px;
@@ -8,59 +9,6 @@ b {
a { a {
color: #007AFF color: #007AFF
} }
.bar {
width: 100%;
position: fixed;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
-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{
height: 65px;
}
body { body {
background-color: #f2f2f2; background-color: #f2f2f2;
color: #222; color: #222;
@@ -95,6 +43,55 @@ h3 {
padding-left: 20px; padding-left: 20px;
padding-right: 20px; padding-right: 20px;
} }
/* regular text (body, p, b, h*, ) styles*/
.contentPush{
height: 65px;
}
/* Bar styling*/
.bar {
width: 100%;
position: fixed;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
-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;
text-align: center;
}
.barItem h1 {
font-size: 20px;
padding: 9px;
}
.barItem * {
color: #ddd;
text-decoration: none;
display:block;
transition: all 0.2s;
font-size: 16px;
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%;
}
} }