📝
bliss.town pastebin
diff --git a/public/style/main.css b/public/style/main.css
index fb8cc7b..fb50a61 100644
--- a/public/style/main.css
+++ b/public/style/main.css
@@ -16,10 +16,31 @@
}
}
+body {
+ margin: 0;
+ padding: 0;
+
+ font-family: "Lora", serif;
+ font-size: 20px;
+
+ color: var(--foreground);
+ background-color: var(--background);
+
+ transition: color .2s linear, background-color .2s linear;
+}
+
header {
+ position: fixed;
+ top: 1em;
+ left: 50%;
+ transform: translateX(-50%);
width: min(900px, calc(100vw - 4rem));
margin: 0 auto;
+ padding: .5em 0;
+ border-radius: 2em;
text-align: center;
+ backdrop-filter: blur(1em);
+ z-index: 100;
}
header nav {
@@ -31,31 +52,10 @@ header nav span {
color: var(--primary-fg);
}
-body {
- position: absolute;
- top: 0;
- left: 0;
- width: 100vw;
- min-height: 100vh;
- margin: 0;
- padding: 0;
-
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
-
- font-family: "Lora", serif;
- font-size: 1.5rem;
-
- color: var(--foreground);
- background-color: var(--background);
-
- transition: color .2s linear, background-color .2s linear;
-}
-
main {
width: min(720px, calc(100vw - 4rem));
+ min-height: calc(100vh - 8.3em);
+ margin: 3em auto 0 auto;
text-align: center;
}
@@ -84,8 +84,16 @@ main {
}
}
+.center-content {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+}
+
hr {
- margin: 2rem 0;
+ width: 100%;
+ margin: 1em 0;
border-width: 1px 0 0 0;
}
hr::after {
@@ -133,6 +141,7 @@ button:active {
footer {
width: min(900px, calc(100vw - 4rem));
margin: 0 auto;
+ padding: 1em 0;
text-align: center;
opacity: .5;
transition: opacity .1s ease-out;