You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
503 lines
7.8 KiB
CSS
503 lines
7.8 KiB
CSS
@import 'https://fonts.googleapis.com/css?family=Fira+Mono|Noto+Serif|Noto+Sans:300,400,500';
|
|
|
|
:root {
|
|
--font-header: "Noto Sans", "Arial", "Helvetica", sans-serif;
|
|
--font-main: "Noto Serif", "Arial", "Helvetica", sans-serif;
|
|
--font-mono: "Menlo", "Fira Mono", monospace;
|
|
|
|
--font-size: 16px;
|
|
|
|
/* Primary ysed for hero gradient and links */
|
|
--colorscheme-accent-one: #6FC0AA;
|
|
--colorscheme-accent-two: #4A73A1;
|
|
|
|
/* Background color and the general colors of borders
|
|
* or hovered elements */
|
|
--colorscheme-bg-light: #FDFDFD;
|
|
--colorscheme-bg-dark: #E6E6E6;
|
|
|
|
/* Normal text vs Header text vs Pre */
|
|
--colorscheme-fg-dark: #132A44;
|
|
--colorscheme-fg-light: #475F7B;
|
|
--colorscheme-fg-code: #666666;
|
|
|
|
--hero-gradient: radial-gradient(circle, var(--colorscheme-accent-one), var(--colorscheme-accent-two));
|
|
--hero-height: 84vh;
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html {
|
|
font-family: var(--font-main);
|
|
font-size: var(--font-size);
|
|
}
|
|
|
|
body {
|
|
background-color: var(--colorscheme-bg-light);
|
|
color: var(--colorscheme-fg-light);
|
|
margin: 0 auto;
|
|
max-width: 800px;
|
|
line-height: 2;
|
|
padding: 4em;
|
|
}
|
|
|
|
/* Header theme */
|
|
body > header {
|
|
min-height: var(--hero-height);
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
width: 100%;
|
|
max-width: none;
|
|
top: 0;
|
|
left: 0;
|
|
position: absolute;
|
|
line-height: 1.5;
|
|
background: var(--hero-gradient);
|
|
border-bottom: 1px solid var(--background-color-darkest);
|
|
padding: 4em 1em;
|
|
}
|
|
|
|
body > header > * {
|
|
z-index: 1;
|
|
}
|
|
|
|
body > header > img {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
pointer-events: none;
|
|
object-fit: cover;
|
|
opacity: 0.75;
|
|
transform: translate3d(0, 0, 0);
|
|
z-index: 0;
|
|
}
|
|
|
|
body > header > h1,
|
|
body > header > h2 {
|
|
text-align: center;
|
|
}
|
|
|
|
body > header > h1 {
|
|
position: relative;
|
|
font-size: 4em;
|
|
}
|
|
|
|
body > header > h2 {
|
|
margin: 0;
|
|
position: relative;
|
|
font-size: 2.5em;
|
|
}
|
|
|
|
body > header > nav {
|
|
position: absolute;
|
|
top: 2rem;
|
|
right: 2.5rem;
|
|
}
|
|
|
|
body > header > nav a {
|
|
color: var(--colorscheme-fg-dark);
|
|
margin: 0 0.5rem;
|
|
}
|
|
|
|
body > header + * {
|
|
margin-top: var(--hero-height);
|
|
}
|
|
|
|
body > header + nav:before {
|
|
content: "Navigation: ";
|
|
padding-right: 1em;
|
|
}
|
|
|
|
body > header + nav {
|
|
margin-top: calc(var(--hero-height) - 1em);
|
|
margin-bottom: 2em;
|
|
}
|
|
|
|
body > header + nav a {
|
|
padding: 0.25em;
|
|
margin: 0 0.5em;
|
|
}
|
|
|
|
/* Generic styling */
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
h5,
|
|
h6,
|
|
th,
|
|
caption,
|
|
strong {
|
|
color: var(--colorscheme-fg-dark);
|
|
}
|
|
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
h5,
|
|
h6,
|
|
th,
|
|
caption {
|
|
margin: 1rem 0 0.5rem 0;
|
|
font-family: var(--font-header);
|
|
font-weight: 600;
|
|
letter-spacing: 0.025em
|
|
}
|
|
|
|
h1 {
|
|
font-size: 2.2rem;
|
|
}
|
|
|
|
h2 {
|
|
font-size: 1.75rem;
|
|
}
|
|
|
|
h3 {
|
|
font-size: 1.5rem;
|
|
}
|
|
|
|
h4 {
|
|
font-size: 1.25rem;
|
|
}
|
|
|
|
h5 {
|
|
font-size: 1.15rem;
|
|
}
|
|
|
|
h6,
|
|
caption,
|
|
th {
|
|
font-size: 1rem;
|
|
}
|
|
|
|
h1 + h1,
|
|
h1 + h2,
|
|
h1 + h3,
|
|
h1 + h4,
|
|
h1 + h5,
|
|
h1 + h6,
|
|
h2 + h1,
|
|
h2 + h2,
|
|
h2 + h3,
|
|
h2 + h4,
|
|
h2 + h5,
|
|
h2 + h6,
|
|
h3 + h1,
|
|
h3 + h2,
|
|
h3 + h3,
|
|
h3 + h4,
|
|
h3 + h5,
|
|
h3 + h6,
|
|
h4 + h1,
|
|
h4 + h2,
|
|
h4 + h3,
|
|
h4 + h4,
|
|
h4 + h5,
|
|
h4 + h6,
|
|
h5 + h1,
|
|
h5 + h2,
|
|
h5 + h3,
|
|
h5 + h4,
|
|
h5 + h5,
|
|
h5 + h6,
|
|
h6 + h1,
|
|
h6 + h2,
|
|
h6 + h3,
|
|
h6 + h4,
|
|
h6 + h5,
|
|
h6 + h6 {
|
|
margin-top: -0.5rem;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
b, strong {
|
|
font-weight: bold;
|
|
}
|
|
|
|
em, i {
|
|
font-style: oblique;
|
|
}
|
|
|
|
p {
|
|
margin: 0.75em 0;
|
|
}
|
|
|
|
code,
|
|
pre {
|
|
font-family: "Fira Mono", monospace;
|
|
color: var(--colorscheme-fg-code);
|
|
background-color: var(--colorscheme-bg-dark);
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
pre {
|
|
padding: 1em;
|
|
margin: 0.5em 0;
|
|
font-family: monospace;
|
|
}
|
|
|
|
code {
|
|
padding: 0.15em 0.25em;
|
|
vertical-align: baseline;
|
|
}
|
|
|
|
hr {
|
|
border: 0;
|
|
height: 1px;
|
|
background: var(--colorscheme-bg-dark);
|
|
margin: 1rem 0;
|
|
}
|
|
|
|
a {
|
|
color: var(--colorscheme-accent-one);
|
|
text-decoration: none;
|
|
padding: 0 0.1em;
|
|
height: 1.25em;
|
|
display: inline-block;
|
|
}
|
|
|
|
a:hover {
|
|
color: var(--colorscheme-accent-two);
|
|
text-decoration: underline;
|
|
}
|
|
|
|
table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
text-align: justify;
|
|
margin: 2rem 0 2rem 0;
|
|
}
|
|
|
|
tr {
|
|
border-bottom: 1px solid var(--colorscheme-bg-dark);
|
|
}
|
|
|
|
tr:hover {
|
|
background-color: var(--colorscheme-bg-dark);
|
|
}
|
|
|
|
td, th {
|
|
padding: 1rem;
|
|
}
|
|
|
|
th {
|
|
text-transform: uppercase;
|
|
text-align: left;
|
|
}
|
|
|
|
ol,
|
|
ul {
|
|
margin: 1rem;
|
|
}
|
|
|
|
ul {
|
|
list-style: square;
|
|
}
|
|
|
|
ul > ul,
|
|
ol > ol,
|
|
ul > ol,
|
|
ol > ul {
|
|
margin-top: 0;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
ol {
|
|
list-style: plain;
|
|
}
|
|
|
|
li {
|
|
padding-left: 0.5em;
|
|
margin-bottom: 0.5em;
|
|
}
|
|
|
|
small,
|
|
sub,
|
|
sup {
|
|
font-size: 0.75em;
|
|
}
|
|
|
|
img {
|
|
max-width: 100%;
|
|
}
|
|
|
|
blockquote {
|
|
font-style: italic;
|
|
margin: 0.5em 1.5em 0.75em 1.5em;
|
|
padding-left: 0.75em;
|
|
padding-bottom: 0.25em;
|
|
border-left: 0.25em solid var(--colorscheme-fg-dark);
|
|
}
|
|
|
|
/* Form Element stuff */
|
|
fieldset {
|
|
border: 1px solid var(--colorscheme-bg-dark);
|
|
padding: 0.5rem 1.5rem;
|
|
}
|
|
|
|
label {
|
|
position: relative;
|
|
}
|
|
|
|
input, select, button {
|
|
font-family: var(--font-main);
|
|
font-size: 1em;
|
|
margin: 0 0 1rem 0;
|
|
padding: 0.25rem;
|
|
color: var(--colorscheme-fg-light);
|
|
}
|
|
|
|
input[type="text"],
|
|
input[type="url"],
|
|
input[type="tel"],
|
|
input[type="number"],
|
|
input[type="color"],
|
|
input[type="email"],
|
|
input[type="password"],
|
|
input[type="search"] {
|
|
display: block;
|
|
background-color: inherit;
|
|
border: none;
|
|
border-bottom: 1px solid var(--colorscheme-bg-dark);
|
|
transition: 0.5s ease-in-out border-bottom;
|
|
}
|
|
|
|
input[type="text"]:focus,
|
|
input[type="url"]:focus,
|
|
input[type="tel"]:focus,
|
|
input[type="number"]:focus,
|
|
input[type="color"]:focus,
|
|
input[type="email"]:focus,
|
|
input[type="password"]:focus,
|
|
input[type="search"]:focus {
|
|
border-bottom: 1px solid var(--colorscheme-fg-light);
|
|
}
|
|
|
|
input[type="submit"],
|
|
input[type="button"],
|
|
input[type="reset"],
|
|
button {
|
|
display: inline-block;
|
|
padding: 0.5rem;
|
|
margin: 0.25rem;
|
|
border: 1px solid var(--colorscheme-bg-dark);
|
|
background-color: var(--colorscheme-bg-light);
|
|
cursor: pointer;
|
|
transition: 0.5s ease-in-out border-color;
|
|
}
|
|
|
|
input[type="submit"]:hover,
|
|
input[type="button"]:hover,
|
|
input[type="reset"]:hover,
|
|
button:hover {
|
|
border: 1px solid var(--colorscheme-fg-dark);
|
|
}
|
|
|
|
select {
|
|
display: block;
|
|
border: 1px solid var(--colorscheme-bg-dark);
|
|
padding: 0.25rem 0.5rem;
|
|
background-color: var(--colorscheme-bg-light);
|
|
transition: 0.5s ease-in-out border-color;
|
|
}
|
|
|
|
select:hover {
|
|
border: 1px solid var(--colorscheme-fg-dark);
|
|
}
|
|
|
|
input[type="checkbox"],
|
|
input[type="radio"] {
|
|
margin-left: 0.5rem;
|
|
margin-right: 0.5rem;
|
|
}
|
|
|
|
textarea {
|
|
font-family: var(--font-main);
|
|
border: 1px solid var(--colorscheme-bg-dark);
|
|
padding: 0.5rem;
|
|
min-height: 1rem;
|
|
width: 100%;
|
|
}
|
|
|
|
textarea[disabled],
|
|
select[disabled],
|
|
input[disabled],
|
|
button[disabled],
|
|
input[disabled]::placeholder,
|
|
textarea[disabled]::placeholder {
|
|
color: #AAAAAA;
|
|
cursor: not-allowed;
|
|
opacity: 0.5;
|
|
text-decoration: line-through;
|
|
}
|
|
|
|
/* Media Queries */
|
|
@media (max-width: 50em) {
|
|
:root {
|
|
--hero-height: 90vh;
|
|
--font-size: 12px;
|
|
}
|
|
|
|
body {
|
|
padding: 1.5em;
|
|
}
|
|
|
|
body > header + nav {
|
|
margin-top: calc(var(--hero-height));
|
|
}
|
|
|
|
body > header + nav:before {
|
|
display: none;
|
|
}
|
|
|
|
table, table * {
|
|
display: block;
|
|
}
|
|
|
|
tr {
|
|
border: none;
|
|
}
|
|
|
|
tr:hover {
|
|
background-color: initial;
|
|
}
|
|
|
|
th {
|
|
display: none;
|
|
}
|
|
|
|
td {
|
|
border-bottom: 1px solid var(--colorscheme-bg-dark);
|
|
}
|
|
|
|
td:hover {
|
|
background-color: var(--colorscheme-bg-dark);
|
|
}
|
|
|
|
td[data-label] {
|
|
text-align: right;
|
|
}
|
|
|
|
td[data-label]:before {
|
|
content: attr(data-label);
|
|
float: left;
|
|
text-transform: uppercase;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|