171 lines
2.5 KiB
CSS
171 lines
2.5 KiB
CSS
/*
|
|
* GENERAL
|
|
*/
|
|
:root {
|
|
--s0: 1px;
|
|
--s1: 2px;
|
|
--s2: 4px;
|
|
--s3: 8px;
|
|
--s4: 16px;
|
|
}
|
|
html {
|
|
font-family: monospace;
|
|
font-size: 16px;
|
|
line-height: calc(1em + var(--spacing-2));
|
|
}
|
|
body {
|
|
min-height: 100vh;
|
|
max-width: 100%;
|
|
background-color: black;
|
|
color: #eceff4;
|
|
margin: 0;
|
|
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
gap: 1rem;
|
|
}
|
|
|
|
main {
|
|
border: 1px solid white;
|
|
padding: var(--s3);
|
|
max-width: calc(100% - 2*var(--s3) - 2*var(--s0));
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--s4);
|
|
|
|
}
|
|
|
|
.watermark {
|
|
position: fixed;
|
|
right: 0.25rem;
|
|
bottom: 0.25rem;
|
|
filter: invert();
|
|
height: 1em;
|
|
color: white;
|
|
}
|
|
.watermark img {
|
|
height: 100%;
|
|
}
|
|
|
|
/*
|
|
* LAYOUT
|
|
*/
|
|
.container {
|
|
width: 100%;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
@media (min-width: 576px) {
|
|
.container {
|
|
max-width: 540px;
|
|
}
|
|
}
|
|
@media (min-width: 768px) {
|
|
.container {
|
|
max-width: 720px;
|
|
}
|
|
}
|
|
@media (min-width: 992px) {
|
|
.container {
|
|
max-width: 960px;
|
|
}
|
|
}
|
|
@media (min-width: 1200px) {
|
|
.container {
|
|
max-width: 1140px;
|
|
}
|
|
}
|
|
|
|
.centered {
|
|
text-align: center;
|
|
}
|
|
|
|
/*
|
|
* TYPOGRAPHY
|
|
*/
|
|
h1,h2,h3,h4,h5,h6,p {
|
|
margin: 0;
|
|
}
|
|
h1 {
|
|
font-size: 1.6rem;
|
|
}
|
|
h2 {
|
|
font-size: 1.5rem;
|
|
}
|
|
h3 {
|
|
font-size: 1.4rem;
|
|
}
|
|
h4 {
|
|
font-size: 1.3rem;
|
|
}
|
|
h5 {
|
|
font-size: 1.2rem;
|
|
}
|
|
h6 {
|
|
font-size: 1.1rem;
|
|
}
|
|
small {
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
/*
|
|
* COMPONENTS
|
|
*/
|
|
pre {
|
|
border-width: var(--s0) var(--s0) var(--s0) var(--s2);
|
|
border-color: #e5e9f0;
|
|
border-style: solid;
|
|
padding-left: var(--s1);
|
|
font-size: 0.8rem;
|
|
overflow-x: auto;
|
|
margin: 0px;
|
|
}
|
|
|
|
article {
|
|
border: var(--s0) solid #e5e9f0;
|
|
padding: var(--s3);
|
|
}
|
|
|
|
button {
|
|
background-color: white;
|
|
color: black;
|
|
border: 1px solid white;
|
|
font-weight: bold;
|
|
padding: 0.5em;
|
|
font-size: 1.1em;
|
|
cursor: pointer;
|
|
display: block;
|
|
width: 100%;
|
|
}
|
|
button:active, input[type="file"]::file-selector-button:active {
|
|
background-color: black;
|
|
color: white;
|
|
}
|
|
|
|
/*
|
|
* Form
|
|
*/
|
|
form{
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--s3);
|
|
}
|
|
|
|
input[type="file"] {
|
|
display: block;
|
|
border: 1px solid white;
|
|
font-weight: bold;
|
|
width: calc(100% - 2px);
|
|
cursor: pointer;
|
|
}
|
|
input[type="file"]::file-selector-button {
|
|
background-color: white;
|
|
color: black;
|
|
font-weight: bold;
|
|
border: none;
|
|
padding: 0.5em;
|
|
cursor: pointer;
|
|
}
|
|
|