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:
parent
1e8d4b0b2f
commit
dff0fb08e2
@ -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;
|
||||
}
|
||||
|
Loading…
x
Reference in New Issue
Block a user