www-builder/static/style.css

120 lines
1.8 KiB
CSS

/*
consider one of these?
https://meyerweb.com/eric/tools/css/reset/
https://ageek.dev/normalize-css
https://github.com/h5bp/html5-boilerplate
*/
:root {
--content-width: 650px;
--footer-height: 22px;
/* Base colors */
--color-black: black;
--color-white: white;
--color-navy: #1F2E4C;
/* Primary colors */
--color-gray: #707372;
--color-red: #EB5757;
--color-purple: #90489C;
/* Accent colors */
--color-yellow: #F2C94C;
--color-light-orange: #F7E6CA;
--color-light-green: #98E0B0;
}
* {
box-sizing: border-box;
}
body {
font-family: 'Quicksand', sans-serif;
font-weight: 500;
font-size: 16px;
background: var(--color-navy);
color: var(--color-white);
margin: 0;
}
#page-container {
position: relative;
min-height: 100vh;
}
#content-wrap {
padding-bottom: var(--footer-height);
}
a {
color: var(--color-light-orange);
font-weight: 700;
}
a.undecorated {
color: inherit;
text-decoration: none;
font-weight: inherit;
}
img {
max-width: 100%;
margin-right: 8px;
vertical-align: middle;
}
code {
font-family: 'Fira Mono', monospace;
color: var(--color-light-green);
font-size: 13px;
}
pre {
overflow: auto;
font-family: 'Fira Mono', monospace;
padding: .8em;
font-size: 13px;
}
strong {
color: var(--color-yellow);
}
div.codehilite {
border-radius: 8px;
}
#header {
background: var(--color-red);
font-size: 24px;
font-weight: 700;
}
#header img {
vertical-align: baseline;
width: 20px;
height: 20px;
}
#footer {
background: var(--color-purple);
position: absolute;
bottom: 0;
width: 100%;
height: var(--footer-height);
}
div.content {
max-width: var(--content-width);
margin: auto;
padding-left: 2px;
padding-right: 2px;
}
@media (min-width: var(--content-width)) {
div.content {
width: var(--content-width);
}
}