noice - top bar finished - just needs content lol

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
This commit is contained in:
2023-05-21 12:05:13 +01:00
parent 9762f93b2b
commit 769a5a9726
2 changed files with 30 additions and 16 deletions

View File

@@ -1,29 +1,34 @@
*{
box-sizing: border-box;
margin: 0;
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: #262626;
color: #222222;
font-family: system-ui;
height: 100%;
}
p{
font-size: 20px;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 20px;
padding-right: 20px;
}
h1{
font-size: 45px;
font-weight: 750;
padding: 0px;
padding-top: 5px;
padding-bottom: 5px;
padding-top: 0px;
padding-bottom: 0px;
padding-left: 20px;
padding-right: 20px;
position: fixed;
@@ -31,16 +36,16 @@ h1{
h2{
font-size: 35px;
font-weight: 300;
padding-top: 5px;
padding-bottom: 5px;
padding-top: 0px;
padding-bottom: 0px;
padding-left: 20px;
padding-right: 20px;
}
h3{
font-size: 25px;
font-weight: 200;
padding-top: 5px;
padding-bottom: 5px;
padding-top: 0px;
padding-bottom: 0px;
padding-left: 20px;
padding-right: 20px;
}
@@ -55,6 +60,9 @@ h3{
p{
color: #e6e6e6;
}
.topbar{
background-color: rgba(1, 1, 1, 0.25);
}
}
@media screen and (max-width: 600px) {
*{