131 lines
2.2 KiB
CSS
131 lines
2.2 KiB
CSS
:root {
|
|
--pattern: hsl(280, 63%, 81%);
|
|
--links: hsl(280, 50%, 57%);
|
|
--background: hsl(280, 20%, 88%);
|
|
--border: 1px solid hsl(0, 0%, 20%);
|
|
--foreground: hsl(0, 0%, 0%);
|
|
}
|
|
|
|
body {
|
|
background-image: url("/images/background.svg");
|
|
background-color: var(--pattern);
|
|
background-size: 150px;
|
|
margin: 0;
|
|
font-family: "Gill Sans", sans-serif;
|
|
}
|
|
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
p,
|
|
ul,
|
|
ol {
|
|
margin: 0;
|
|
}
|
|
|
|
a {
|
|
color: var(--links);
|
|
text-decoration: underline dotted;
|
|
}
|
|
|
|
a:hover {
|
|
opacity: 80%;
|
|
text-decoration: underline solid;
|
|
}
|
|
|
|
a.button,
|
|
a.button:hover {
|
|
text-decoration: none;
|
|
}
|
|
|
|
a.button:hover img {
|
|
opacity: 80%;
|
|
}
|
|
|
|
img.pixel {
|
|
image-rendering: pixelated;
|
|
}
|
|
|
|
div.page-container {
|
|
color: var(--foreground);
|
|
height: calc(100vh - 20px);
|
|
width: calc(100vw - 20px);
|
|
display: grid;
|
|
grid-template-columns: minmax(auto, 400px) minmax(50vw, auto);
|
|
grid-template-rows: 1fr;
|
|
grid-column-gap: 1vw;
|
|
grid-row-gap: 0px;
|
|
}
|
|
|
|
div.page-container > div:first-child > div:first-child {
|
|
margin-top: 0;
|
|
}
|
|
|
|
div.page-container > div:first-child > div:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
div.page-container {
|
|
margin: 10px;
|
|
}
|
|
div.page-container > div:first-child > div {
|
|
margin: 10px 0;
|
|
}
|
|
|
|
div.page-container > div:nth-child(2),
|
|
div.page-container > div:first-child > div,
|
|
div.page-container > div:last-child {
|
|
padding: 10px;
|
|
height: auto;
|
|
background-color: var(--background);
|
|
border: var(--border);
|
|
}
|
|
|
|
div.page-container > div:first-child {
|
|
height: fit-content;
|
|
height: auto;
|
|
}
|
|
|
|
div.page-container > div:first-child,
|
|
div.page-container > div:nth-child(2) {
|
|
overflow: scroll;
|
|
}
|
|
|
|
div.page-container > div.footer {
|
|
grid-area: 2 / 1 / 3 / 3;
|
|
margin-top: 10px;
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
grid-template-rows: 1fr;
|
|
grid-column-gap: 0;
|
|
grid-row-gap: 0;
|
|
}
|
|
|
|
div.footer > div:first-child {
|
|
margin-left: 5px;
|
|
}
|
|
|
|
div.footer > div:last-child {
|
|
text-align: right;
|
|
}
|
|
|
|
div.footer > div {
|
|
vertical-align: middle;
|
|
height: fit-content;
|
|
width: 100%;
|
|
margin: auto;
|
|
}
|
|
|
|
div.pa .navlinks {
|
|
padding-left: 10px;
|
|
}
|
|
|
|
.navbar-icon {
|
|
margin-right: 0.25em;
|
|
}
|
|
|
|
.online-status {
|
|
display: inline;
|
|
}
|