better htmx, better css
This commit is contained in:
parent
6260715057
commit
f7f6254016
4 changed files with 55 additions and 32 deletions
|
@ -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;
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue