added popup styling; cleaned up basic layout

this is super janky tbh but it's not like there'll be many styled pages I guess
This commit is contained in:
MarshDeer 2024-08-30 19:48:19 -04:00
parent 1e8d4b0b2f
commit dff0fb08e2

View File

@ -30,6 +30,11 @@ body {
color: var(--fg);
display: grid;
grid-template-rows: auto auto 1fr auto;
grid-template-areas:
"bannertop"
"header"
"main"
"bannerbot";
font-family: "Roboto", sans-serif;
}
@ -40,6 +45,7 @@ header {
justify-content: center;
align-items: center;
background: var(--bg);
grid-area: header;
}
header svg {
@ -61,6 +67,7 @@ main {
max-width: 80ch;
padding: 0 2ch;
margin: 0 auto;
grid-area: main;
}
label :has(input) {
@ -103,6 +110,7 @@ input[type=checkbox] {
border: 2px solid var(--gray);
border-radius: 5px;
background: var(--bg);
transition: .2s all;
}
input[type=checkbox]+svg {
@ -127,6 +135,52 @@ input[type=checkbox]:checked+svg {
display: block;
}
/* Popup */
main:has(.popup) {
justify-content: center;
}
.popup {
display: flex;
flex-direction: column;
justify-content: space-between;
height: calc(100% - 4em);
max-height: 400px;
padding: 2em 0;
}
.popup h1 {
text-align: center;
margin: 0;
}
.popup .buttoncontainer {
width: 100%;
display: flex;
flex-direction: column;
align-content: center;
}
.popup button {
background: var(--accent);
color: var(--fg);
width: 60%;
height: 3em;
border-radius: 1.5em;
border: none;
cursor: pointer;
margin: 1em auto;
font-size: larger;
font-weight: bold;
font-family: 'Roboto', sans-serif;
transition: .2s all;
}
.popup button:where(:hover, :focus) {
background: var(--fg);
color: var(--bg);
}
/* "Not a phishing site" warning tape */
aside {
background: repeating-linear-gradient(
@ -140,3 +194,11 @@ aside em {
background: var(--bg);
color: var(--accent);
}
aside.top {
grid-area: bannertop;
}
aside.bottom {
grid-area: bannerbot;
}