www-home/style.css

136 lines
2.0 KiB
CSS
Raw Normal View History

2021-06-29 16:00:59 +00:00
/*
consider one of these?
https://meyerweb.com/eric/tools/css/reset/
https://ageek.dev/normalize-css
https://github.com/h5bp/html5-boilerplate
2020-02-07 13:10:06 +00:00
*/
:root {
2021-06-29 16:00:59 +00:00
--content-width: 650px;
--footer-height: 22px;
2020-02-07 13:10:06 +00:00
/* 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 {
2021-06-29 16:00:59 +00:00
font-family: 'Quicksand', sans-serif;
font-weight: 500;
font-size: 16px;
2020-02-07 13:10:06 +00:00
background: var(--color-navy);
color: var(--color-white);
2021-06-29 16:00:59 +00:00
margin: 0;
2020-02-07 13:10:06 +00:00
}
h2 {
2021-06-30 20:21:05 +00:00
padding-top: 24px;
}
2021-06-29 16:00:59 +00:00
#page-container {
position: relative;
min-height: 100vh;
2020-02-07 13:10:06 +00:00
}
2021-06-29 16:00:59 +00:00
#content-wrap {
padding-bottom: var(--footer-height);
2020-02-07 13:10:06 +00:00
}
a {
color: var(--color-light-orange);
2021-06-29 16:00:59 +00:00
font-weight: 700;
2020-02-07 13:10:06 +00:00
}
2021-06-29 16:00:59 +00:00
a.undecorated {
color: inherit;
2020-02-07 13:10:06 +00:00
text-decoration: none;
2021-06-29 16:00:59 +00:00
font-weight: inherit;
2020-02-07 13:10:06 +00:00
}
2021-06-29 16:00:59 +00:00
img {
2020-02-07 13:10:06 +00:00
max-width: 100%;
2021-06-29 16:00:59 +00:00
margin-right: 8px;
vertical-align: middle;
2020-02-07 13:10:06 +00:00
}
2021-06-29 16:00:59 +00:00
code {
font-family: 'Fira Mono', monospace;
2020-02-07 13:10:06 +00:00
color: var(--color-light-green);
2021-06-29 16:00:59 +00:00
font-size: 13px;
2020-02-07 13:10:06 +00:00
}
2021-06-29 16:00:59 +00:00
pre {
overflow: auto;
font-family: 'Fira Mono', monospace;
padding: .8em;
font-size: 13px;
2020-02-07 13:10:06 +00:00
}
2021-06-29 16:00:59 +00:00
strong {
color: var(--color-yellow);
2020-02-07 13:10:06 +00:00
}
2021-06-29 19:27:36 +00:00
blockquote {
background: #272822;
border-radius: 8px;
padding-left: 16px;
padding-right: 16px;
padding-top: 1px;
padding-bottom: 1px;
margin-left: 8px;
margin-right: 8px;
}
2021-06-29 16:00:59 +00:00
div.codehilite {
border-radius: 8px;
2020-02-07 13:10:06 +00:00
}
2021-06-29 16:00:59 +00:00
#header {
background: var(--color-red);
font-size: 24px;
font-weight: 700;
2020-02-07 13:10:06 +00:00
}
2021-06-29 16:00:59 +00:00
#header img {
vertical-align: baseline;
width: 20px;
height: 20px;
2021-07-01 16:13:45 +00:00
margin-left: 4px;
2020-02-07 13:10:06 +00:00
}
2021-06-29 16:00:59 +00:00
#footer {
background: var(--color-purple);
2020-02-07 13:10:06 +00:00
position: absolute;
2021-06-29 16:00:59 +00:00
bottom: 0;
width: 100%;
height: var(--footer-height);
2020-02-07 13:10:06 +00:00
}
2021-06-29 16:00:59 +00:00
div.content {
max-width: var(--content-width);
margin: auto;
padding-left: 2px;
padding-right: 2px;
2020-02-07 13:10:06 +00:00
}
2021-06-29 16:00:59 +00:00
@media (min-width: var(--content-width)) {
div.content {
width: var(--content-width);
2020-02-07 13:10:06 +00:00
}
}