mirror of
https://github.com/neon443/neon443.github.io.git
synced 2026-03-11 07:09:12 +00:00
Nihaal Sharma
769a5a9726
topbar: bg color + blur bg shadow - white shadow in dark mode pushes content down below bar NICELY SPACED THINGS!!!!!! tweaked colors aswell added lorem impsum waffle to test topbar bg blur
71 lines
1.0 KiB
CSS
71 lines
1.0 KiB
CSS
*{
|
|
box-sizing: border-box;
|
|
margin: 0px;
|
|
}
|
|
b{
|
|
color: #007AFF
|
|
}
|
|
.topbar{
|
|
position: fixed;
|
|
top: 0px;
|
|
background-color: rgba(0, 0, 0, 0.25);
|
|
backdrop-filter: blur(5px);
|
|
width: 100%;
|
|
box-shadow:
|
|
}
|
|
body{
|
|
background-color: #f2f2f2;
|
|
color: #222222;
|
|
font-family: system-ui;
|
|
height: 100%;
|
|
}
|
|
p{
|
|
font-size: 20px;
|
|
padding-left: 20px;
|
|
padding-right: 20px;
|
|
}
|
|
h1{
|
|
font-size: 45px;
|
|
font-weight: 750;
|
|
padding-top: 0px;
|
|
padding-bottom: 0px;
|
|
padding-left: 20px;
|
|
padding-right: 20px;
|
|
position: fixed;
|
|
}
|
|
h2{
|
|
font-size: 35px;
|
|
font-weight: 300;
|
|
padding-top: 0px;
|
|
padding-bottom: 0px;
|
|
padding-left: 20px;
|
|
padding-right: 20px;
|
|
}
|
|
h3{
|
|
font-size: 25px;
|
|
font-weight: 200;
|
|
padding-top: 0px;
|
|
padding-bottom: 0px;
|
|
padding-left: 20px;
|
|
padding-right: 20px;
|
|
}
|
|
@media (prefers-color-scheme: dark) {
|
|
body {
|
|
background-color: #1C1C1E;
|
|
color: #f1f1f1;
|
|
}
|
|
#transaction {
|
|
background-color: #191919;
|
|
}
|
|
p{
|
|
color: #e6e6e6;
|
|
}
|
|
.topbar{
|
|
background-color: rgba(1, 1, 1, 0.25);
|
|
}
|
|
}
|
|
@media screen and (max-width: 600px) {
|
|
*{
|
|
width: 100%;
|
|
}
|
|
} |