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

New topbar with slick animations

Browse Source 
New topbar!
+ contact, githhub and dont-click buttons
+ animation + bg color change + shadow on hover
+ uselsess "Text" thing in topbar
+ topbar is much thinner - better for phones
FYI - topbar is NOT responsive yet
fixed colors in dark mode
rm Tips
added development paused anoucment
This commit is contained in:
Nihaal Sharma
2023-06-02 16:08:49 +01:00
parent 29525a466b
commit f7879ead05
2 changed files with 67 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
style.css
View File

@@ -8,10 +8,13 @@ b {
a {
color: #007AFF
}
.topbar {
.bar {
width: 100%;
overflow: hidden;
position: fixed;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
-webkit-backdrop-filter: blur(2.5px);
-moz-backdrop-filter: blur(2.5px);
@@ -21,15 +24,46 @@ a {
-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);
}
.topbar * {
display: inline;
.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: 74px;
height: 65px;
}
body {
background-color: #f2f2f2;
color: #222222;
color: #222;
font-family: system-ui;
}
p {
@@ -47,7 +81,7 @@ h1 {
}
h2 {
font-size: 30px;
font-weight: 300;
font-weight: 400;
padding-top: 0px;
padding-bottom: 0px;
padding-left: 20px;
@@ -55,7 +89,7 @@ h2 {
}
h3 {
font-size: 25px;
font-weight: 200;
font-weight: 400;
padding-top: 0px;
padding-bottom: 0px;
padding-left: 20px;
@@ -63,19 +97,23 @@ h3 {
}
@media (prefers-color-scheme: dark) {
body {
background-color: #1C1C1E;
color: #f2f2f2;
background-color: #222;
color: #ddd;
}
.topbar {
.bar {
-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);
#transaction {
background-color: #222222;
}
p {
color: #e6e6e6;
.barItem a {
color: #ddd;
}
.barItem a:hover {
background-color: #ddd;
color: #222;
}
#transaction {
background-color: #222;
}
}
@media screen and (max-width: 600px) {