161 lines
4.3 KiB
CSS
161 lines
4.3 KiB
CSS
:root {
|
|
--primary-colour: #ff1b1b;
|
|
--primary-colour-soft: hsla(0, 93%, 68%, 0.58);
|
|
|
|
--background-colour-a: hsla(3, 100%, 70%, 0.3);
|
|
--background-colour-b: hsla(3, 100%, 80%, 0.3);
|
|
--background-colour-light: hsla(0, 100%, 100%, 0.5);
|
|
--background-size: 5em;
|
|
}
|
|
|
|
html, body { font-size: 100%; }
|
|
body {
|
|
display: grid;
|
|
grid-template-columns: minmax(25%, 15em) auto;
|
|
grid-template-rows: auto auto;
|
|
grid-template-areas: "navigation content"
|
|
"navigation footer";
|
|
|
|
margin: 0; padding: 0;
|
|
|
|
font-family: sans-serif;
|
|
|
|
background: repeating-linear-gradient(-55deg,
|
|
var(--background-colour-a), var(--background-colour-a) var(--background-size),
|
|
var(--background-colour-b) var(--background-size), var(--background-colour-b) calc(var(--background-size) * 2));
|
|
}
|
|
|
|
main {
|
|
grid-area: content; min-height: 75vh;
|
|
padding: 0.5em 10% 0.5em 10%;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
p, li, tr { line-height: 1.65em; }
|
|
|
|
/* Blockquote */
|
|
blockquote {
|
|
border-left: 0.25em solid var(--primary-colour-soft);
|
|
margin-left: 1em; padding-left: 0.5em;
|
|
}
|
|
|
|
/* Headings */
|
|
h1 {
|
|
padding-bottom: 0.25em;
|
|
border-bottom: 0.1em solid var(--primary-colour);
|
|
text-align: center;
|
|
}
|
|
h2 {
|
|
padding-bottom: 0.1em;
|
|
border-bottom: 0.08em solid var(--primary-colour);
|
|
}
|
|
h3 {
|
|
font-size: 1.5em;
|
|
}
|
|
|
|
/* Inline elements */
|
|
.logo-small {
|
|
max-width: 1.25em; max-height: 1.25em;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
|
|
/* Responsive media */
|
|
audio, video, img { max-width: 100%; }
|
|
|
|
|
|
/* Code Blocks */
|
|
pre {
|
|
padding: 0.25em;
|
|
|
|
background: hsla(0, 100%, 100%, 0.5);
|
|
border: 0.2em dashed var(--primary-colour-soft);
|
|
|
|
white-space: pre-wrap;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
pre, :not(pre) > code {
|
|
background: hsla(0, 100%, 100%, 0.6);
|
|
border-radius: 0.25em;
|
|
padding: 0.25em;
|
|
font-size: 1.25em;
|
|
}
|
|
|
|
|
|
/*
|
|
███ ██ █████ ██ ██ ██ ██████ ████████ ██ ██████ ███ ██
|
|
████ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ████ ██
|
|
██ ██ ██ ███████ ██ ██ ██ ██ ███ ██ ██ ██ ██ ██ ██ ██
|
|
██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██
|
|
██ ████ ██ ██ ████ ██ ██████ ██ ██ ██████ ██ ████
|
|
*/
|
|
|
|
nav {
|
|
grid-area: navigation;
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
padding: 0.5em;
|
|
background-color: var(--background-colour-light);
|
|
}
|
|
|
|
.logo {
|
|
align-self: center;
|
|
text-align: center;
|
|
max-width: 90%; height: 10em;
|
|
box-sizing: border-box;
|
|
|
|
padding: 0 0.5em 0.5em 0.5em;
|
|
|
|
}
|
|
/* nav h1 { margin-top: 0; } */
|
|
nav ul {
|
|
list-style-type: none;
|
|
margin: 0 1.25em; padding: 0;
|
|
}
|
|
nav ul li {
|
|
padding: 0;
|
|
}
|
|
a, a:visited {
|
|
color: hsla(5, 87%, 53%, 0.8);
|
|
transition: color 0.25s;
|
|
}
|
|
a:hover { color: hsla(5, 87%, 53%, 0.9); }
|
|
a:active { color: hsl(5, 87%, 53%); }
|
|
|
|
|
|
/*
|
|
███████ ██████ ██████ ████████ ███████ ██████
|
|
██ ██ ██ ██ ██ ██ ██ ██ ██
|
|
█████ ██ ██ ██ ██ ██ █████ ██████
|
|
██ ██ ██ ██ ██ ██ ██ ██ ██
|
|
██ ██████ ██████ ██ ███████ ██ ██
|
|
*/
|
|
|
|
footer {
|
|
grid-area: footer;
|
|
margin: 1em 1em 0.5em 1em;
|
|
/* border: 0; */
|
|
border-top: 0.25em solid var(--background-colour-light);
|
|
/* background: linear-gradient(to bottom, transparent, white); */
|
|
}
|
|
|
|
|
|
/*
|
|
███ ███ ██████ ██████ ██ ██ ███████
|
|
████ ████ ██ ██ ██ ██ ██ ██ ██
|
|
██ ████ ██ ██ ██ ██████ ██ ██ █████
|
|
██ ██ ██ ██ ██ ██ ██ ██ ██ ██
|
|
██ ██ ██████ ██████ ██ ███████ ███████
|
|
*/
|
|
|
|
@media (max-width: 500px) {
|
|
body {
|
|
grid-template-columns: auto;
|
|
grid-template-rows: auto auto auto;
|
|
grid-template-areas: "navigation"
|
|
"content"
|
|
"footer";
|
|
}
|
|
}
|