503 lines
7.4 KiB
CSS
503 lines
7.4 KiB
CSS
/* Global styles
|
|
/* ---------------------------------------------------------- */
|
|
|
|
|
|
/* Variables
|
|
/* ---------------------------------------------------------- */
|
|
|
|
:root {
|
|
/* Colours */
|
|
--darkgrey: #343f44;
|
|
--midgrey: #738a94;
|
|
--lightgrey: #e5eff5;
|
|
--blue: #3eb0ef;
|
|
--red: #f05230;
|
|
--orange: #fecd35;
|
|
--green: #a4d037;
|
|
/* Style values */
|
|
--border-radius: 4px;
|
|
--font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
|
|
--font-family-mono: Consolas, "Liberation Mono", Menlo, Courier, monospace;
|
|
}
|
|
|
|
/* Colour classes
|
|
/* ---------------------------------------------------------- */
|
|
|
|
.darkgrey {
|
|
color: var(--darkgrey);
|
|
}
|
|
|
|
.midgrey {
|
|
color: var(--midgrey);
|
|
}
|
|
|
|
.lightgrey {
|
|
color: var(--lightgrey);
|
|
}
|
|
|
|
.blue {
|
|
color: var(--blue);
|
|
}
|
|
|
|
.red {
|
|
color: var(--red);
|
|
}
|
|
|
|
.orange {
|
|
color: var(--orange);
|
|
}
|
|
|
|
.green {
|
|
color: var(--green);
|
|
}
|
|
|
|
|
|
/* Colour classes (hover)
|
|
/* ---------------------------------------------------------- */
|
|
|
|
.darkgrey-hover:hover {
|
|
color: var(--darkgrey);
|
|
}
|
|
|
|
.midgrey-hover:hover {
|
|
color: var(--midgrey);
|
|
}
|
|
|
|
.lightgrey-hover:hover {
|
|
color: var(--lightgrey);
|
|
}
|
|
|
|
.blue-hover:hover {
|
|
color: var(--blue);
|
|
}
|
|
|
|
.red-hover:hover {
|
|
color: var(--red);
|
|
}
|
|
|
|
.orange-hover:hover {
|
|
color: var(--orange);
|
|
}
|
|
|
|
.green-hover:hover {
|
|
color: var(--green);
|
|
}
|
|
|
|
|
|
|
|
/* Layout
|
|
/* ---------------------------------------------------------- */
|
|
|
|
*,
|
|
*:before,
|
|
*:after {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html {
|
|
overflow: hidden;
|
|
width: 100%;
|
|
/* Prevent elastic scrolling on the whole page */
|
|
height: 100%;
|
|
font-family: var(--font-family);
|
|
font-size: 62.5%;
|
|
line-height: 1.65;
|
|
|
|
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
|
}
|
|
|
|
body {
|
|
overflow: auto;
|
|
overflow-x: hidden;
|
|
width: 100%;
|
|
/* Prevent elastic scrolling on the whole page */
|
|
height: 100%;
|
|
color: color(var(--darkgrey) lightness(+10%));
|
|
font-size: 1.4rem;
|
|
}
|
|
|
|
::selection {
|
|
background: color(var(--blue) lightness(+20%));
|
|
}
|
|
|
|
|
|
/* Text
|
|
/* ---------------------------------------------------------- */
|
|
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
h5,
|
|
h6 {
|
|
margin: 0 0 0.3em 0;
|
|
color: var(--darkgrey);
|
|
line-height: 1.15em;
|
|
text-rendering: optimizeLegibility;
|
|
}
|
|
|
|
h1 {
|
|
text-indent: -1px;
|
|
font-size: 2.9rem;
|
|
}
|
|
@media (max-width: 500px) {
|
|
h1 {
|
|
font-size: 2.4rem;
|
|
}
|
|
}
|
|
|
|
h2 {
|
|
text-indent: -1px;
|
|
font-size: 2.2rem;
|
|
}
|
|
@media (max-width: 500px) {
|
|
h2 {
|
|
font-size: 1.9rem;
|
|
}
|
|
}
|
|
|
|
h3 {
|
|
font-size: 1.9rem;
|
|
}
|
|
@media (max-width: 500px) {
|
|
h3 {
|
|
font-size: 1.7rem;
|
|
}
|
|
}
|
|
|
|
h4 {
|
|
font-size: 1.7rem;
|
|
}
|
|
|
|
h5 {
|
|
font-size: 1.5rem;
|
|
}
|
|
|
|
h6 {
|
|
font-size: 1.5rem;
|
|
}
|
|
|
|
p,
|
|
ul,
|
|
ol,
|
|
dl {
|
|
margin: 0 0 1.7em 0;
|
|
font-size: 1.6rem;
|
|
}
|
|
|
|
ol,
|
|
ul {
|
|
padding-left: 1.2em;
|
|
}
|
|
|
|
li {
|
|
margin-bottom: 10px;
|
|
line-height: 1.4em;
|
|
}
|
|
|
|
ol ol,
|
|
ul ul,
|
|
ul ol,
|
|
ol ul {
|
|
margin: 0 0 0.4em 0;
|
|
padding-left: 2em;
|
|
font-size: 0.9em;
|
|
}
|
|
|
|
mark {
|
|
background-color: #fdffb6;
|
|
}
|
|
|
|
a {
|
|
color: var(--blue);
|
|
text-decoration: none;
|
|
transition: background 0.3s, color 0.3s;
|
|
}
|
|
|
|
a:hover {
|
|
text-decoration: none;
|
|
transition: background 0.1s, color 0.1s;
|
|
}
|
|
|
|
a.highlight {
|
|
color: var(--orange);
|
|
font-weight: bold;
|
|
}
|
|
|
|
hr {
|
|
display: block;
|
|
margin: 3.2em 0;
|
|
padding: 0;
|
|
height: 1px;
|
|
border: 0;
|
|
border-top: 1px solid #dfe1e3;
|
|
}
|
|
|
|
dl {
|
|
margin: 1.6em 0;
|
|
}
|
|
|
|
dl dt {
|
|
float: left;
|
|
clear: left;
|
|
overflow: hidden;
|
|
margin-bottom: 1em;
|
|
width: 180px;
|
|
text-align: right;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
font-weight: bold;
|
|
}
|
|
|
|
dl dd {
|
|
margin-bottom: 1em;
|
|
margin-left: 200px;
|
|
}
|
|
|
|
blockquote {
|
|
margin: 1.6em 0;
|
|
padding: 0 1.6em 0 1.6em;
|
|
border-left: #dfe1e3 0.6em solid;;
|
|
}
|
|
|
|
blockquote p {
|
|
margin: 0.8em 0;
|
|
font-size: 1.2em;
|
|
font-weight: 300;
|
|
}
|
|
|
|
blockquote small {
|
|
display: inline-block;
|
|
margin: 0.8em 0 0.8em 1.5em;
|
|
color: var(--midgrey);
|
|
font-size: 0.9em;
|
|
}
|
|
/* Quotation marks */
|
|
blockquote small:before {
|
|
content: "\2014 \00A0";
|
|
}
|
|
|
|
blockquote cite {
|
|
font-weight: bold;
|
|
}
|
|
blockquote cite a {
|
|
font-weight: normal;
|
|
}
|
|
|
|
.markdown,
|
|
pre,
|
|
code,
|
|
tt {
|
|
font-family: var(--font-family-mono);
|
|
}
|
|
|
|
code,
|
|
tt {
|
|
padding: 0.2rem 0.3rem 0.1rem;
|
|
border: color(#f5f7f8 lightness(-10%)) 1px solid;
|
|
background: #f5f7f8;
|
|
border-radius: 2px;
|
|
color: #c25;
|
|
vertical-align: middle;
|
|
white-space: pre-wrap;
|
|
font-size: 0.8em;
|
|
line-height: 1em;
|
|
}
|
|
|
|
pre {
|
|
overflow: auto;
|
|
margin: 1.6em 0;
|
|
padding: 10px;
|
|
width: 100%;
|
|
border: color(#f5f7f8 lightness(-10%)) 1px solid;
|
|
background: #f5f7f8;
|
|
border-radius: 3px;
|
|
white-space: pre;
|
|
font-family: var(--font-family-mono);
|
|
font-size: 0.9em;;
|
|
}
|
|
|
|
pre code,
|
|
pre tt {
|
|
padding: 0;
|
|
border: none;
|
|
background: transparent;
|
|
color: inherit;
|
|
white-space: pre-wrap;
|
|
font-size: inherit;
|
|
}
|
|
|
|
kbd {
|
|
display: inline-block;
|
|
margin-bottom: 0.4em;
|
|
padding: 1px 8px;
|
|
border: #ccc 1px solid;
|
|
background: #f4f4f4;
|
|
border-radius: 4px;
|
|
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2),
|
|
0 1px 0 0 #fff inset;
|
|
color: var(--darkgrey);
|
|
text-shadow: #fff 0 1px 0;
|
|
font-size: 0.9em;
|
|
font-weight: bold;
|
|
}
|
|
|
|
button {
|
|
padding: 0;
|
|
outline: none;
|
|
border: none;
|
|
background: transparent;
|
|
box-shadow: none;
|
|
}
|
|
|
|
i {
|
|
display: block;
|
|
}
|
|
|
|
img {
|
|
max-width: 100%;
|
|
}
|
|
|
|
|
|
/* Utilities
|
|
/* ---------------------------------------------------------- */
|
|
|
|
.clearfix,
|
|
.clearfix:after {
|
|
content: "";
|
|
display: table;
|
|
clear: both;
|
|
}
|
|
|
|
.wrapper {
|
|
position: relative;
|
|
}
|
|
|
|
.show {
|
|
display: block !important;
|
|
}
|
|
|
|
.hidden {
|
|
visibility: hidden !important;
|
|
display: none !important;
|
|
}
|
|
|
|
.invisible {
|
|
visibility: hidden;
|
|
}
|
|
|
|
.sr-only {
|
|
position: absolute;
|
|
overflow: hidden;
|
|
clip: rect(0, 0, 0, 0);
|
|
margin: -1px;
|
|
padding: 0;
|
|
width: 1px;
|
|
height: 1px;
|
|
border: 0;
|
|
}
|
|
|
|
.sr-only-focusable:focus {
|
|
z-index: 900;
|
|
overflow: visible;
|
|
clip: auto;
|
|
margin: 0;
|
|
padding: 0 10px;
|
|
width: auto;
|
|
height: auto;
|
|
background-color: #f5f5f5;
|
|
color: #333;
|
|
text-decoration: none;
|
|
line-height: 49px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.right {
|
|
float: right;
|
|
}
|
|
|
|
.left {
|
|
float: left;
|
|
}
|
|
|
|
.vertical {
|
|
display: table-cell;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.flex {
|
|
display: flex;
|
|
}
|
|
|
|
|
|
/* Animations
|
|
/* ---------------------------------------------------------- */
|
|
|
|
@keyframes fade-in {
|
|
from {
|
|
opacity: 0;
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@keyframes fade-in-snap {
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@keyframes fade-in-scale {
|
|
from {
|
|
opacity: 0;
|
|
transform: scale(0.95);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
|
|
@keyframes fade-out {
|
|
from {
|
|
opacity: 1;
|
|
}
|
|
to {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
@keyframes keyboard-focus-style-fade-out {
|
|
from {
|
|
box-shadow: inset 0 0 30px 1px color(var(--midgrey) lightness(+20%));
|
|
}
|
|
to {
|
|
box-shadow: none;
|
|
}
|
|
}
|
|
|
|
@keyframes spin {
|
|
from {
|
|
transform: rotate(0deg);
|
|
}
|
|
to {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
.fade-in {
|
|
animation: fade-in 0.2s;
|
|
animation-fill-mode: forwards;
|
|
}
|
|
|
|
.fade-in-scale {
|
|
animation: fade-in-scale 0.2s;
|
|
animation-fill-mode: forwards;
|
|
}
|
|
|
|
.fade-out {
|
|
animation: fade-out 0.5s;
|
|
animation-fill-mode: forwards;
|
|
}
|