kogakure/website-11ty-hamburg.stefanimhoff.de
1
0
Fork 0
mirror of https://github.com/kogakure/website-11ty-hamburg.stefanimhoff.de.git synced 2026-02-03 20:25:30 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor: convert files from spaces to tabs

Browse Source
This commit is contained in:
Stefan Imhoff
2022-08-24 10:15:43 +02:00
parent 1685aa561f
commit d555778570
69 changed files with 39605 additions and 39600 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/assets/scripts/embedded/register-serviceworker.js
View File

@@ -1,5 +1,5 @@
window.addEventListener('load', () => {
navigator.serviceWorker.register('/sw.js').catch((registrationError) => {
console.error('SW registration failed: ', registrationError);
});
navigator.serviceWorker.register('/sw.js').catch((registrationError) => {
console.error('SW registration failed: ', registrationError);
});
});

64
src/assets/scripts/embedded/theme-switcher.js
View File

@@ -1,42 +1,42 @@
(function () {
const root = document.getElementsByTagName('html')[0];
const root = document.getElementsByTagName('html')[0];
function setTheme(newTheme) {
window.__theme = newTheme;
preferredTheme = newTheme;
const currentTheme = newTheme === 'light' ? 'dark' : 'light';
root.classList.add(newTheme);
root.classList.remove(currentTheme);
}
function setTheme(newTheme) {
window.__theme = newTheme;
preferredTheme = newTheme;
const currentTheme = newTheme === 'light' ? 'dark' : 'light';
root.classList.add(newTheme);
root.classList.remove(currentTheme);
}
let preferredTheme;
let preferredTheme;
try {
preferredTheme = localStorage.getItem('theme');
} catch (err) {
console.error(err);
}
try {
preferredTheme = localStorage.getItem('theme');
} catch (err) {
console.error(err);
}
window.__setPreferredTheme = function (newTheme) {
setTheme(newTheme);
try {
localStorage.setItem('theme', newTheme);
} catch (err) {
console.error(err);
}
};
window.__setPreferredTheme = function (newTheme) {
setTheme(newTheme);
try {
localStorage.setItem('theme', newTheme);
} catch (err) {
console.error(err);
}
};
window.__toggleTheme = function () {
const currentTheme = window.__theme;
const newTheme = currentTheme === 'light' ? 'dark' : 'light';
window.__setPreferredTheme(newTheme);
};
window.__toggleTheme = function () {
const currentTheme = window.__theme;
const newTheme = currentTheme === 'light' ? 'dark' : 'light';
window.__setPreferredTheme(newTheme);
};
const darkQuery = window.matchMedia('(prefers-color-scheme: dark)');
const darkQuery = window.matchMedia('(prefers-color-scheme: dark)');
darkQuery.addEventListener('change', function (e) {
window.__setPreferredTheme(e.matches ? 'dark' : 'light');
});
darkQuery.addEventListener('change', function (e) {
window.__setPreferredTheme(e.matches ? 'dark' : 'light');
});
setTheme(preferredTheme || (darkQuery.matches ? 'dark' : 'light'));
setTheme(preferredTheme || (darkQuery.matches ? 'dark' : 'light'));
})();

92
src/assets/scripts/main.js
View File

@@ -3,61 +3,57 @@ import { btnHandler } from './modules/btn-handler';
import { scrollHandler } from './modules/scroll-handler';
import { sourceCodeInfo } from './modules/source-code-info';
if (
'querySelector' in document &&
'localStorage' in window &&
'addEventListener' in window
) {
/* Initialize scroll reveal */
sal({
threshold: 0.1,
});
if ('querySelector' in document && 'localStorage' in window && 'addEventListener' in window) {
/* Initialize scroll reveal */
sal({
threshold: 0.1,
});
/* Show link to source code in console */
sourceCodeInfo();
/* Show link to source code in console */
sourceCodeInfo();
/* Scrolling up or down? */
scrollHandler();
/* Scrolling up or down? */
scrollHandler();
/* Toggle the theme */
btnHandler('#theme-toggle', function () {
window.__toggleTheme();
});
/* Toggle the theme */
btnHandler('#theme-toggle', function () {
window.__toggleTheme();
});
/* Smooth scrolling to the top */
btnHandler('#up-link', function () {
window.scroll({
top: 0,
left: 0,
behavior: 'smooth',
});
});
/* Smooth scrolling to the top */
btnHandler('#up-link', function () {
window.scroll({
top: 0,
left: 0,
behavior: 'smooth',
});
});
btnHandler('.spoiler', function (event) {
event.target.classList.toggle('spoiler-visible');
});
btnHandler('.spoiler', function (event) {
event.target.classList.toggle('spoiler-visible');
});
/* Deobfuscate the email */
btnHandler(
'#email',
function (event) {
if (event.target.classList.contains('objuscated')) {
const link = event.target;
const lock = link.parentNode.querySelector('#lock-box');
/* Deobfuscate the email */
btnHandler(
'#email',
function (event) {
if (event.target.classList.contains('objuscated')) {
const link = event.target;
const lock = link.parentNode.querySelector('#lock-box');
event.preventDefault();
event.preventDefault();
link.classList.remove('objuscated');
link.text = 'hey@imhoff.name';
link.href = 'mailto:hey@imhoff.name';
link.classList.remove('objuscated');
link.text = 'hey@imhoff.name';
link.href = 'mailto:hey@imhoff.name';
if (lock) {
lock.classList.remove('hidden');
}
} else {
return;
}
},
false
);
if (lock) {
lock.classList.remove('hidden');
}
} else {
return;
}
},
false
);
}

24
src/assets/scripts/modules/btn-handler.js
View File

@@ -1,15 +1,15 @@
export function btnHandler(selector, callback, prevent = true) {
const btn = document.querySelector(selector);
if (!btn) return;
const btn = document.querySelector(selector);
if (!btn) return;
btn.addEventListener(
'click',
function (event) {
if (prevent) {
event.preventDefault();
}
callback(event);
},
false
);
btn.addEventListener(
'click',
function (event) {
if (prevent) {
event.preventDefault();
}
callback(event);
},
false
);
}

41
src/assets/scripts/modules/scroll-handler.js
View File

@@ -1,27 +1,24 @@
export function scrollHandler() {
const body = document.body;
const scrollUp = 'scroll-up';
const scrollDown = 'scroll-down';
let lastScroll = 0;
const body = document.body;
const scrollUp = 'scroll-up';
const scrollDown = 'scroll-down';
let lastScroll = 0;
window.addEventListener('scroll', () => {
const currentScroll = window.pageYOffset;
window.addEventListener('scroll', () => {
const currentScroll = window.pageYOffset;
if (currentScroll <= 0) {
body.classList.remove(scrollUp);
return;
}
if (currentScroll <= 0) {
body.classList.remove(scrollUp);
return;
}
if (currentScroll > lastScroll && !body.classList.contains(scrollDown)) {
body.classList.remove(scrollUp);
body.classList.add(scrollDown);
} else if (
currentScroll < lastScroll &&
body.classList.contains(scrollDown)
) {
body.classList.remove(scrollDown);
body.classList.add(scrollUp);
}
lastScroll = currentScroll;
});
if (currentScroll > lastScroll && !body.classList.contains(scrollDown)) {
body.classList.remove(scrollUp);
body.classList.add(scrollDown);
} else if (currentScroll < lastScroll && body.classList.contains(scrollDown)) {
body.classList.remove(scrollDown);
body.classList.add(scrollUp);
}
lastScroll = currentScroll;
});
}

6
src/assets/scripts/modules/source-code-info.js
View File

@@ -1,6 +1,6 @@
export function sourceCodeInfo() {
const sourceCodeInfo =
'👋 I see you’re interested in the source code of this site? You can find it here: https://github.com/kogakure/website-11ty-hamburg.stefanimhoff.de';
const sourceCodeInfo =
'👋 I see you’re interested in the source code of this site? You can find it here: https://github.com/kogakure/website-11ty-hamburg.stefanimhoff.de';
console.info(sourceCodeInfo);
console.info(sourceCodeInfo);
}

66
src/assets/styles/base/colors.css
View File

@@ -1,43 +1,43 @@
/* Colors */
:root {
--color-accent: #2d5da3;
--color-bg-code: #282c34;
--color-fg-code: #abb2bf;
--color-accent: #2d5da3;
--color-bg-code: #282c34;
--color-fg-code: #abb2bf;
}
:root,
.light {
--color-bg-full: #ffffff;
--color-bg: hsl(40, 7%, 90%);
--color-bg-dark: hsl(40, 7%, 80%);
--color-border: rgb(185, 184, 182);
--color-fg-feather-inverse: rgba(255, 255, 255, 0.05);
--color-fg-feather: rgba(0, 0, 0, 0.05);
--color-fg-full-inverse: #ffffff;
--color-fg-full: #000000;
--color-fg-soft-inverse: rgba(255, 255, 255, 0.2);
--color-fg-soft: rgba(0, 0, 0, 0.2);
--color-fg-strong-inverse: rgba(255, 255, 255, 0.8);
--color-fg-strong: rgba(0, 0, 0, 0.8);
--color-fg: hsl(40, 7%, 5%);
--opacity-dark: 1;
--opacity-light: 0;
--color-bg-full: #ffffff;
--color-bg: hsl(40, 7%, 90%);
--color-bg-dark: hsl(40, 7%, 80%);
--color-border: rgb(185, 184, 182);
--color-fg-feather-inverse: rgba(255, 255, 255, 0.05);
--color-fg-feather: rgba(0, 0, 0, 0.05);
--color-fg-full-inverse: #ffffff;
--color-fg-full: #000000;
--color-fg-soft-inverse: rgba(255, 255, 255, 0.2);
--color-fg-soft: rgba(0, 0, 0, 0.2);
--color-fg-strong-inverse: rgba(255, 255, 255, 0.8);
--color-fg-strong: rgba(0, 0, 0, 0.8);
--color-fg: hsl(40, 7%, 5%);
--opacity-dark: 1;
--opacity-light: 0;
}
.dark {
--color-bg-full: #000000;
--color-bg: hsl(40, 7%, 10%);
--color-bg-dark: hsl(40, 7%, 5%);
--color-border: rgb(73, 72, 70);
--color-fg-feather-inverse: rgba(0, 0, 0, 0.05);
--color-fg-feather: rgba(255, 255, 255, 0.05);
--color-fg-full-inverse: #000000;
--color-fg-full: #ffffff;
--color-fg-soft-inverse: rgba(0, 0, 0, 0.2);
--color-fg-soft: rgba(255, 255, 255, 0.2);
--color-fg-strong-inverse: rgba(0, 0, 0, 0.8);
--color-fg-strong: rgba(255, 255, 255, 0.8);
--color-fg: hsla(40, 7%, 90%, 0.87);
--opacity-dark: 0;
--opacity-light: 1;
--color-bg-full: #000000;
--color-bg: hsl(40, 7%, 10%);
--color-bg-dark: hsl(40, 7%, 5%);
--color-border: rgb(73, 72, 70);
--color-fg-feather-inverse: rgba(0, 0, 0, 0.05);
--color-fg-feather: rgba(255, 255, 255, 0.05);
--color-fg-full-inverse: #000000;
--color-fg-full: #ffffff;
--color-fg-soft-inverse: rgba(0, 0, 0, 0.2);
--color-fg-soft: rgba(255, 255, 255, 0.2);
--color-fg-strong-inverse: rgba(0, 0, 0, 0.8);
--color-fg-strong: rgba(255, 255, 255, 0.8);
--color-fg: hsla(40, 7%, 90%, 0.87);
--opacity-dark: 0;
--opacity-light: 1;
}

24
src/assets/styles/base/fonts.css
View File

@@ -1,17 +1,17 @@
@font-face {
font-display: swap;
font-family: 'SecuelaVariable';
font-style: normal;
font-weight: 1 999;
src: url('/assets/fonts/secuela-regular-vf.woff2') format('woff2'),
url('/assets/fonts/secuela-regular-vf.woff') format('woff');
font-display: swap;
font-family: 'SecuelaVariable';
font-style: normal;
font-weight: 1 999;
src: url('/assets/fonts/secuela-regular-vf.woff2') format('woff2'),
url('/assets/fonts/secuela-regular-vf.woff') format('woff');
}
@font-face {
font-display: swap;
font-family: 'SecuelaVariable';
font-style: italic;
font-weight: 1 999;
src: url('/assets/fonts/secuela-italic-vf.woff2') format('woff2'),
url('/assets/fonts/secuela-italic-vf.woff') format('woff');
font-display: swap;
font-family: 'SecuelaVariable';
font-style: italic;
font-weight: 1 999;
src: url('/assets/fonts/secuela-italic-vf.woff2') format('woff2'),
url('/assets/fonts/secuela-italic-vf.woff') format('woff');
}

76
src/assets/styles/base/images.css
View File

@@ -1,53 +1,53 @@
/** Image */
img {
background-color: var(--color-fg-feather);
border-color: var(--color-fg-feather);
border-radius: var(--radius-1);
border-style: solid;
border-width: 1px;
box-shadow: 0 2px 3px var(--color-fg-feather);
display: block;
font-size: 0;
height: auto;
width: 100%;
background-color: var(--color-fg-feather);
border-color: var(--color-fg-feather);
border-radius: var(--radius-1);
border-style: solid;
border-width: 1px;
box-shadow: 0 2px 3px var(--color-fg-feather);
display: block;
font-size: 0;
height: auto;
width: 100%;
}
.dark img {
opacity: 0.87;
opacity: 0.87;
}
img[src$='.svg'] {
background: transparent;
border: 0;
background: transparent;
border: 0;
}
.image-shadow {
position: relative;
transition-duration: 500ms;
transition-property: transform;
transition-timing-function: ease-in-out;
position: relative;
transition-duration: 500ms;
transition-property: transform;
transition-timing-function: ease-in-out;
&::after {
box-shadow: var(--shadow-subtle-shade);
content: '';
height: 100%;
left: 0;
opacity: 0;
position: absolute;
top: 0;
transition-duration: 500ms;
transition-property: opacity;
transition-timing-function: ease-in-out;
width: 100%;
z-index: -1;
}
&::after {
box-shadow: var(--shadow-subtle-shade);
content: '';
height: 100%;
left: 0;
opacity: 0;
position: absolute;
top: 0;
transition-duration: 500ms;
transition-property: opacity;
transition-timing-function: ease-in-out;
width: 100%;
z-index: -1;
}
&:hover,
&:focus {
transform: scale(1.03);
&:hover,
&:focus {
transform: scale(1.03);
&::after {
opacity: 1;
}
}
&::after {
opacity: 1;
}
}
}

118
src/assets/styles/base/normalize.css vendored
View File

@@ -9,8 +9,8 @@
*/
html {
line-height: 1.15; /* 1 */
-webkit-text-size-adjust: 100%; /* 2 */
line-height: 1.15; /* 1 */
-webkit-text-size-adjust: 100%; /* 2 */
}
/* Sections
@@ -21,7 +21,7 @@ html {
*/
body {
margin: 0;
margin: 0;
}
/**
@@ -29,7 +29,7 @@ body {
*/
main {
display: block;
display: block;
}
/**
@@ -38,8 +38,8 @@ main {
*/
h1 {
font-size: 2em;
margin: 0.67em 0;
font-size: 2em;
margin: 0.67em 0;
}
/* Grouping content
@@ -51,9 +51,9 @@ h1 {
*/
hr {
box-sizing: content-box; /* 1 */
height: 0; /* 1 */
overflow: visible; /* 2 */
box-sizing: content-box; /* 1 */
height: 0; /* 1 */
overflow: visible; /* 2 */
}
/**
@@ -62,8 +62,8 @@ hr {
*/
pre {
font-family: monospace, monospace; /* 1 */
font-size: 1em; /* 2 */
font-family: monospace, monospace; /* 1 */
font-size: 1em; /* 2 */
}
/* Text-level semantics
@@ -74,7 +74,7 @@ pre {
*/
a {
background-color: transparent;
background-color: transparent;
}
/**
@@ -83,9 +83,9 @@ a {
*/
abbr[title] {
border-bottom: none; /* 1 */
text-decoration: underline; /* 2 */
text-decoration: underline dotted; /* 2 */
border-bottom: none; /* 1 */
text-decoration: underline; /* 2 */
text-decoration: underline dotted; /* 2 */
}
/**
@@ -94,7 +94,7 @@ abbr[title] {
b,
strong {
font-weight: bolder;
font-weight: bolder;
}
/**
@@ -105,8 +105,8 @@ strong {
code,
kbd,
samp {
font-family: monospace, monospace; /* 1 */
font-size: 1em; /* 2 */
font-family: monospace, monospace; /* 1 */
font-size: 1em; /* 2 */
}
/**
@@ -114,7 +114,7 @@ samp {
*/
small {
font-size: 80%;
font-size: 80%;
}
/**
@@ -124,18 +124,18 @@ small {
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
bottom: -0.25em;
}
sup {
top: -0.5em;
top: -0.5em;
}
/* Embedded content
@@ -146,7 +146,7 @@ sup {
*/
img {
border-style: none;
border-style: none;
}
/* Forms
@@ -162,10 +162,10 @@ input,
optgroup,
select,
textarea {
font-family: inherit; /* 1 */
font-size: 100%; /* 1 */
line-height: 1.15; /* 1 */
margin: 0; /* 2 */
font-family: inherit; /* 1 */
font-size: 100%; /* 1 */
line-height: 1.15; /* 1 */
margin: 0; /* 2 */
}
/**
@@ -175,8 +175,8 @@ textarea {
button,
input {
/* 1 */
overflow: visible;
/* 1 */
overflow: visible;
}
/**
@@ -186,8 +186,8 @@ input {
button,
select {
/* 1 */
text-transform: none;
/* 1 */
text-transform: none;
}
/**
@@ -198,7 +198,7 @@ button,
[type='button'],
[type='reset'],
[type='submit'] {
-webkit-appearance: button;
-webkit-appearance: button;
}
/**
@@ -209,8 +209,8 @@ button::-moz-focus-inner,
[type='button']::-moz-focus-inner,
[type='reset']::-moz-focus-inner,
[type='submit']::-moz-focus-inner {
border-style: none;
padding: 0;
border-style: none;
padding: 0;
}
/**
@@ -221,7 +221,7 @@ button:-moz-focusring,
[type='button']:-moz-focusring,
[type='reset']:-moz-focusring,
[type='submit']:-moz-focusring {
outline: 1px dotted ButtonText;
outline: 1px dotted ButtonText;
}
/**
@@ -229,7 +229,7 @@ button:-moz-focusring,
*/
fieldset {
padding: 0.35em 0.75em 0.625em;
padding: 0.35em 0.75em 0.625em;
}
/**
@@ -240,12 +240,12 @@ fieldset {
*/
legend {
box-sizing: border-box; /* 1 */
color: inherit; /* 2 */
display: table; /* 1 */
max-width: 100%; /* 1 */
padding: 0; /* 3 */
white-space: normal; /* 1 */
box-sizing: border-box; /* 1 */
color: inherit; /* 2 */
display: table; /* 1 */
max-width: 100%; /* 1 */
padding: 0; /* 3 */
white-space: normal; /* 1 */
}
/**
@@ -253,7 +253,7 @@ legend {
*/
progress {
vertical-align: baseline;
vertical-align: baseline;
}
/**
@@ -261,7 +261,7 @@ progress {
*/
textarea {
overflow: auto;
overflow: auto;
}
/**
@@ -271,8 +271,8 @@ textarea {
[type='checkbox'],
[type='radio'] {
box-sizing: border-box; /* 1 */
padding: 0; /* 2 */
box-sizing: border-box; /* 1 */
padding: 0; /* 2 */
}
/**
@@ -281,7 +281,7 @@ textarea {
[type='number']::-webkit-inner-spin-button,
[type='number']::-webkit-outer-spin-button {
height: auto;
height: auto;
}
/**
@@ -290,8 +290,8 @@ textarea {
*/
[type='search'] {
-webkit-appearance: textfield; /* 1 */
outline-offset: -2px; /* 2 */
-webkit-appearance: textfield; /* 1 */
outline-offset: -2px; /* 2 */
}
/**
@@ -299,7 +299,7 @@ textarea {
*/
[type='search']::-webkit-search-decoration {
-webkit-appearance: none;
-webkit-appearance: none;
}
/**
@@ -308,8 +308,8 @@ textarea {
*/
::-webkit-file-upload-button {
-webkit-appearance: button; /* 1 */
font: inherit; /* 2 */
-webkit-appearance: button; /* 1 */
font: inherit; /* 2 */
}
/* Interactive
@@ -320,7 +320,7 @@ textarea {
*/
details {
display: block;
display: block;
}
/*
@@ -328,7 +328,7 @@ details {
*/
summary {
display: list-item;
display: list-item;
}
/* Misc
@@ -339,7 +339,7 @@ summary {
*/
template {
display: none;
display: none;
}
/**
@@ -347,5 +347,5 @@ template {
*/
[hidden] {
display: none;
display: none;
}

22
src/assets/styles/base/scroll-reveal.css
View File

@@ -2,17 +2,17 @@
/** Reset styles for Sal.js, if no JavaScript is available */
.no-js {
[data-sal|='fade'] {
opacity: 1;
}
[data-sal|='fade'] {
opacity: 1;
}
[data-sal|='slide'],
[data-sal|='zoom'] {
opacity: 1;
transform: none;
}
[data-sal|='slide'],
[data-sal|='zoom'] {
opacity: 1;
transform: none;
}
[data-sal|='flip'] {
transform: none;
}
[data-sal|='flip'] {
transform: none;
}
}

186
src/assets/styles/base/typography.css
View File

@@ -1,28 +1,28 @@
/** Base */
html {
box-sizing: border-box;
font-size: 100%;
scroll-behavior: smooth;
box-sizing: border-box;
font-size: 100%;
scroll-behavior: smooth;
}
*,
*:before,
*:after {
box-sizing: inherit;
box-sizing: inherit;
}
::selection {
background-color: #a3b387;
color: #ffffff;
background-color: #a3b387;
color: #ffffff;
}
body {
background-color: var(--color-bg);
color: var(--color-fg);
font-family: var(--font-family-base);
font-weight: var(--font-weight-normal);
height: 100vh;
line-height: 1.6;
background-color: var(--color-bg);
color: var(--color-fg);
font-family: var(--font-family-base);
font-weight: var(--font-weight-normal);
height: 100vh;
line-height: 1.6;
}
/** Headlines */
@@ -35,24 +35,24 @@ h6,
.page-title,
.headline,
.subheadline {
font-weight: var(--font-weight-black);
letter-spacing: -0.02em;
line-height: var(--line-height-1);
margin-block-start: 0;
position: relative;
font-weight: var(--font-weight-black);
letter-spacing: -0.02em;
line-height: var(--line-height-1);
margin-block-start: 0;
position: relative;
}
h1,
.page-title {
font-size: var(--font-size-7);
margin-block-end: var(--space-13);
font-size: var(--font-size-7);
margin-block-end: var(--space-13);
}
h2,
.headline {
font-size: var(--font-size-5);
margin-block-end: var(--space-10);
margin-block-start: var(--space-16);
font-size: var(--font-size-5);
margin-block-end: var(--space-10);
margin-block-start: var(--space-16);
}
h3,
@@ -60,9 +60,9 @@ h4,
h5,
h6,
.subheadline {
font-size: var(--font-size-4);
margin-block-end: var(--space-8);
margin-block-start: var(--space-14);
font-size: var(--font-size-4);
margin-block-end: var(--space-8);
margin-block-start: var(--space-14);
}
h2:first-of-type,
@@ -70,7 +70,7 @@ h3:first-of-type,
h4:first-of-type,
h5:first-of-type,
h6:first-of-type {
margin-block-start: 0;
margin-block-start: 0;
}
.dark h1,
@@ -82,133 +82,133 @@ h6:first-of-type {
.dark .title,
.dark .headline,
.dark .subheadline {
font-weight: var(--font-weight-extra-bold);
font-weight: var(--font-weight-extra-bold);
}
/** Paragraph */
p,
.paragraph {
font-size: var(--font-size-3);
font-weight: var(--font-weight-normal);
letter-spacing: normal;
line-height: var(--line-height-2);
margin-block-end: var(--space-10);
margin-block-start: 0;
font-size: var(--font-size-3);
font-weight: var(--font-weight-normal);
letter-spacing: normal;
line-height: var(--line-height-2);
margin-block-end: var(--space-10);
margin-block-start: 0;
}
p:last-of-type {
margin-block-end: 0;
margin-block-end: 0;
}
.dark p,
.dark .paragraph {
font-weight: var(--font-weight-light);
font-weight: var(--font-weight-light);
}
/** Lists */
ul {
font-size: var(--font-size-3);
list-style-type: square;
margin-block-end: var(--space-12);
margin-block-start: 0;
padding-inline-start: 1.2em;
font-size: var(--font-size-3);
list-style-type: square;
margin-block-end: var(--space-12);
margin-block-start: 0;
padding-inline-start: 1.2em;
li {
margin-block-end: var(--space-5);
}
li {
margin-block-end: var(--space-5);
}
li & {
margin-block-end: 0;
padding-inline-start: 2rem;
}
li & {
margin-block-end: 0;
padding-inline-start: 2rem;
}
}
@media (--tablet) {
ul {
padding-inline-start: 0;
}
ul {
padding-inline-start: 0;
}
}
ol {
font-size: var(--font-size-3);
margin-block-end: var(--space-12);
padding-inline-start: 1.2em;
font-size: var(--font-size-3);
margin-block-end: var(--space-12);
padding-inline-start: 1.2em;
li {
margin-block-end: var(--space-2);
}
li {
margin-block-end: var(--space-2);
}
li & {
margin-block-end: 0;
padding-inline-start: 2rem;
}
li & {
margin-block-end: 0;
padding-inline-start: 2rem;
}
}
@media (--tablet) {
ol {
padding-inline-start: 0;
}
ol {
padding-inline-start: 0;
}
}
/** Critic Markup */
del {
text-decoration-thickness: 0.15em;
text-decoration-thickness: 0.15em;
}
ins {
text-decoration-style: solid;
text-decoration-thickness: 0.15em;
text-decoration-style: solid;
text-decoration-thickness: 0.15em;
}
mark {
background-color: rgba(230, 240, 40, 0.7);
border-color: rgba(0, 0, 0, 0.1);
border-radius: 0.25em;
box-shadow: var(--shadow-dark-inset);
color: rgba(0, 0, 0, 0.75);
padding-block-end: 0.4em;
padding-block-start: 0.4em;
padding-inline-end: 0.3em;
padding-inline-start: 0.3em;
background-color: rgba(230, 240, 40, 0.7);
border-color: rgba(0, 0, 0, 0.1);
border-radius: 0.25em;
box-shadow: var(--shadow-dark-inset);
color: rgba(0, 0, 0, 0.75);
padding-block-end: 0.4em;
padding-block-start: 0.4em;
padding-inline-end: 0.3em;
padding-inline-start: 0.3em;
}
/** Code, Sample, Abbreviation, Keyboard Shortcuts etc. */
pre {
white-space: pre;
white-space: pre;
}
abbr {
font-variant: small-caps;
font-variant: small-caps;
}
:is(abbr, dfn) {
cursor: help;
cursor: help;
}
/** Links */
a {
color: var(--color-fg);
font-weight: var(--font-weight-semi-bold);
text-decoration: underline;
text-decoration-color: var(--color-fg-soft);
text-decoration-thickness: 0.2em;
text-underline-offset: auto;
color: var(--color-fg);
font-weight: var(--font-weight-semi-bold);
text-decoration: underline;
text-decoration-color: var(--color-fg-soft);
text-decoration-thickness: 0.2em;
text-underline-offset: auto;
&:hover,
&:focus {
text-decoration-color: var(--color-accent);
}
&:hover,
&:focus {
text-decoration-color: var(--color-accent);
}
sup.footnote-ref & {
text-decoration: none;
}
sup.footnote-ref & {
text-decoration: none;
}
}
/** Helper */
.no-margin {
margin: 0 !important;
margin: 0 !important;
}
.hidden {
display: none !important;
display: none !important;
}

140
src/assets/styles/base/variables.css
View File

@@ -1,81 +1,81 @@
:root {
/** Grids */
--grid-fullsize: repeat(18, 1fr);
--grid-row: clamp(3rem, var(--space-55), 9rem);
/** Grids */
--grid-fullsize: repeat(18, 1fr);
--grid-row: clamp(3rem, var(--space-55), 9rem);
/** Border Widths */
--border-width-1: 1px;
--border-width-10: 0.1em;
--border-width-15: 0.15em;
/** Border Widths */
--border-width-1: 1px;
--border-width-10: 0.1em;
--border-width-15: 0.15em;
/** Font Families */
--font-family-base: SecuelaVariable, Arial, sans-serif;
--font-family-mono: Fira Code, Operator, Hasklig, Monoid, monospace;
/** Font Families */
--font-family-base: SecuelaVariable, Arial, sans-serif;
--font-family-mono: Fira Code, Operator, Hasklig, Monoid, monospace;
/** Font Sizes */
--font-size-1: 0.65em;
--font-size-2: clamp(0.65rem, 0.8vw, 0.75rem);
--font-size-3: clamp(1rem, 1.1vw, 1.25rem);
--font-size-4: clamp(1.25rem, 1.8vw, 2rem);
--font-size-5: clamp(1.5rem, 2.9vw, 3.25rem);
--font-size-6: clamp(2.25rem, 4.7vw, 5.3rem);
--font-size-7: clamp(3.3rem, 7.3vw, 8.5rem);
--font-size-8: clamp(4.5rem, 12.2vw, 13.87rem);
--font-size-9: clamp(5.5rem, 28.7vw, 22.43rem);
/** Font Sizes */
--font-size-1: 0.65em;
--font-size-2: clamp(0.65rem, 0.8vw, 0.75rem);
--font-size-3: clamp(1rem, 1.1vw, 1.25rem);
--font-size-4: clamp(1.25rem, 1.8vw, 2rem);
--font-size-5: clamp(1.5rem, 2.9vw, 3.25rem);
--font-size-6: clamp(2.25rem, 4.7vw, 5.3rem);
--font-size-7: clamp(3.3rem, 7.3vw, 8.5rem);
--font-size-8: clamp(4.5rem, 12.2vw, 13.87rem);
--font-size-9: clamp(5.5rem, 28.7vw, 22.43rem);
/** Font Weights */
--font-weight-thin: 100;
--font-weight-extra-light: 200;
--font-weight-light: 300;
--font-weight-normal: 400;
--font-weight-medium: 500;
--font-weight-semi-bold: 600;
--font-weight-bold: 700;
--font-weight-extra-bold: 800;
--font-weight-black: 900;
/** Font Weights */
--font-weight-thin: 100;
--font-weight-extra-light: 200;
--font-weight-light: 300;
--font-weight-normal: 400;
--font-weight-medium: 500;
--font-weight-semi-bold: 600;
--font-weight-bold: 700;
--font-weight-extra-bold: 800;
--font-weight-black: 900;
/** Line Heights */
--line-height-1: 1;
--line-height-2: 1.6;
/** Line Heights */
--line-height-1: 1;
--line-height-2: 1.6;
/** Radii */
--radius-1: 2px;
--radius-2: 5px;
--radius-4: 8px;
--radius-25: 25px;
--radius-50: 50%;
/** Radii */
--radius-1: 2px;
--radius-2: 5px;
--radius-4: 8px;
--radius-25: 25px;
--radius-50: 50%;
/** Shadows */
--shadow-subtle-shade: 0 0 50px rgba(0, 0, 0, 0.2);
--shadow-beveled-keyboard: 0 1px 0 rgba(0, 0, 0, 0.2), inset 0 0 0 2px #ffffff;
--shadow-white-outline: 0 1px 0 #ffffff;
--shadow-dark-inset: inset 0 0 5px rgba(0, 0, 0, 0.15);
/** Shadows */
--shadow-subtle-shade: 0 0 50px rgba(0, 0, 0, 0.2);
--shadow-beveled-keyboard: 0 1px 0 rgba(0, 0, 0, 0.2), inset 0 0 0 2px #ffffff;
--shadow-white-outline: 0 1px 0 #ffffff;
--shadow-dark-inset: inset 0 0 5px rgba(0, 0, 0, 0.15);
/** Space */
--space-1: 0.335rem;
--space-2: clamp(0.335rem, 0.72vw, 0.402rem);
--space-3: clamp(0.402rem, 0.86vw, 0.482rem);
--space-4: clamp(0.482rem, 1.03vw, 0.579rem);
--space-5: clamp(0.579rem, 1.24vw, 0.694rem);
--space-6: clamp(0.694rem, 1.49vw, 0.833rem);
--space-7: clamp(0.833rem, 1.78vw, 1rem);
--space-8: clamp(1rem, 2.14vw, 1.2rem);
--space-9: clamp(1.2rem, 2.57vw, 1.44rem);
--space-10: clamp(1.44rem, 3.7vw, 1.728rem);
--space-11: clamp(1.728rem, 3.7vw, 2.074rem);
--space-12: clamp(2.074rem, 4.44vw, 2.488rem);
--space-13: clamp(2.488rem, 5.32vw, 2.986rem);
--space-14: clamp(2.986rem, 6.39vw, 3.583rem);
--space-15: clamp(3.583rem, 7.67vw, 4.3rem);
--space-16: clamp(4.3rem, 9.2vw, 5.16rem);
--space-17: clamp(5.16rem, 11.04vw, 6.192rem);
--space-18: clamp(6.192rem, 13.25vw, 7.43rem);
--space-19: clamp(7.43rem, 15.9vw, 8.916rem);
--space-20: clamp(8.916rem, 19.08vw, 10.699rem);
--space-55: 5.55vw;
/** Space */
--space-1: 0.335rem;
--space-2: clamp(0.335rem, 0.72vw, 0.402rem);
--space-3: clamp(0.402rem, 0.86vw, 0.482rem);
--space-4: clamp(0.482rem, 1.03vw, 0.579rem);
--space-5: clamp(0.579rem, 1.24vw, 0.694rem);
--space-6: clamp(0.694rem, 1.49vw, 0.833rem);
--space-7: clamp(0.833rem, 1.78vw, 1rem);
--space-8: clamp(1rem, 2.14vw, 1.2rem);
--space-9: clamp(1.2rem, 2.57vw, 1.44rem);
--space-10: clamp(1.44rem, 3.7vw, 1.728rem);
--space-11: clamp(1.728rem, 3.7vw, 2.074rem);
--space-12: clamp(2.074rem, 4.44vw, 2.488rem);
--space-13: clamp(2.488rem, 5.32vw, 2.986rem);
--space-14: clamp(2.986rem, 6.39vw, 3.583rem);
--space-15: clamp(3.583rem, 7.67vw, 4.3rem);
--space-16: clamp(4.3rem, 9.2vw, 5.16rem);
--space-17: clamp(5.16rem, 11.04vw, 6.192rem);
--space-18: clamp(6.192rem, 13.25vw, 7.43rem);
--space-19: clamp(7.43rem, 15.9vw, 8.916rem);
--space-20: clamp(8.916rem, 19.08vw, 10.699rem);
--space-55: 5.55vw;
/** Transitions */
--transition-duration-1: 100ms;
--transition-duration-2: 200ms;
--transition-duration-5: 500ms;
/** Transitions */
--transition-duration-1: 100ms;
--transition-duration-2: 200ms;
--transition-duration-5: 500ms;
}

16
src/assets/styles/base/videos.css
View File

@@ -1,14 +1,14 @@
/** Video */
.video-wrapper {
margin-block-end: var(--space-10);
padding-block-end: 56.25%;
position: relative;
margin-block-end: var(--space-10);
padding-block-end: 56.25%;
position: relative;
}
.video-wrapper iframe {
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}

18
src/assets/styles/components/divider.css
View File

@@ -1,13 +1,13 @@
/** Divider */
hr,
.divider {
border-block-end-width: var(--border-width-1);
border-block-start-width: 0;
border-color: var(--color-fg-feather);
border-inline-end-width: 0;
border-inline-start-width: 0;
border-style: solid;
margin-block-end: var(--space-14);
margin-block-start: var(--space-14);
width: 100%;
border-block-end-width: var(--border-width-1);
border-block-start-width: 0;
border-color: var(--color-fg-feather);
border-inline-end-width: 0;
border-inline-start-width: 0;
border-style: solid;
margin-block-end: var(--space-14);
margin-block-start: var(--space-14);
width: 100%;
}

24
src/assets/styles/components/email.css
View File

@@ -3,19 +3,19 @@
/** Email */
.lock-box {
align-items: center;
background: transparent;
border: 0;
cursor: pointer;
display: inline-flex;
height: 20px;
justify-content: center;
position: relative;
top: 0.2em;
width: 25px;
align-items: center;
background: transparent;
border: 0;
cursor: pointer;
display: inline-flex;
height: 20px;
justify-content: center;
position: relative;
top: 0.2em;
width: 25px;
}
.lock-icon {
fill: var(--color-fg);
font-size: 1.2em;
fill: var(--color-fg);
font-size: 1.2em;
}

60
src/assets/styles/components/pagination.css
View File

@@ -1,48 +1,48 @@
/** Pagination */
.pagination {
border-radius: 50%;
position: fixed;
top: calc(50% - 20px);
border-radius: 50%;
position: fixed;
top: calc(50% - 20px);
}
.pagination-start {
left: 1rem;
left: 1rem;
}
.pagination-end {
right: 1rem;
right: 1rem;
}
.pagination-container {
align-items: center;
background-color: var(--color-fg-feather);
border-radius: 50%;
border-width: 0;
cursor: pointer;
display: flex;
font-size: 16px;
height: 40px;
justify-content: center;
outline: none;
transition-duration: 500ms;
transition-property: opacity;
transition-timing-function: ease-in-out;
width: 40px;
align-items: center;
background-color: var(--color-fg-feather);
border-radius: 50%;
border-width: 0;
cursor: pointer;
display: flex;
font-size: 16px;
height: 40px;
justify-content: center;
outline: none;
transition-duration: 500ms;
transition-property: opacity;
transition-timing-function: ease-in-out;
width: 40px;
a:hover &,
a:focus & {
background-color: var(--color-fg-soft);
}
a:hover &,
a:focus & {
background-color: var(--color-fg-soft);
}
.scroll-up & {
opacity: 1;
}
.scroll-up & {
opacity: 1;
}
.scroll-down & {
opacity: 0;
}
.scroll-down & {
opacity: 0;
}
}
.pagination-icon {
fill: var(--color-fg);
fill: var(--color-fg);
}

72
src/assets/styles/critical/district.css
View File

@@ -2,63 +2,63 @@
/** District Hero */
.district-hero-container {
grid-column: 5 / -1;
grid-row: 1 / 3;
height: 100vh;
object-fit: cover;
grid-column: 5 / -1;
grid-row: 1 / 3;
height: 100vh;
object-fit: cover;
}
@media (--tablet) {
.district-hero-container {
grid-column: 6 / -1;
}
.district-hero-container {
grid-column: 6 / -1;
}
}
.district-hero {
border: 0;
height: 100vh;
object-fit: cover;
border: 0;
height: 100vh;
object-fit: cover;
}
/** District Title */
.district-title {
display: flex;
flex-direction: column;
grid-column: 3 / 5;
grid-row: 1 / 3;
justify-content: center;
padding-inline-start: calc(var(--space-55) / 2);
transform: rotate(180deg);
writing-mode: vertical-lr;
display: flex;
flex-direction: column;
grid-column: 3 / 5;
grid-row: 1 / 3;
justify-content: center;
padding-inline-start: calc(var(--space-55) / 2);
transform: rotate(180deg);
writing-mode: vertical-lr;
& h2 {
font-size: var(--font-size-4);
margin-block: 0;
}
& h2 {
font-size: var(--font-size-4);
margin-block: 0;
}
}
@media (--tablet) {
.district-title {
grid-column: 5 / 6;
}
.district-title {
grid-column: 5 / 6;
}
}
/** District Content */
.district-content {
grid-column: 2 / -2;
grid-row: 3;
grid-column: 2 / -2;
grid-row: 3;
& img {
margin-block-end: var(--space-12);
}
& img {
margin-block-end: var(--space-12);
}
& iframe {
width: 100%;
}
& iframe {
width: 100%;
}
}
@media (--tablet) {
.district-content {
grid-column: 6 / -6;
}
.district-content {
grid-column: 6 / -6;
}
}

106
src/assets/styles/critical/homepage.css
View File

@@ -2,120 +2,120 @@
/** Homepage Hero */
.homepage-hero-container {
grid-column: 4 / -1;
grid-row: 1 / 3;
height: 100vh;
object-fit: cover;
grid-column: 4 / -1;
grid-row: 1 / 3;
height: 100vh;
object-fit: cover;
}
@media (--tablet) {
.homepage-hero-container {
grid-column: 6 / -1;
}
.homepage-hero-container {
grid-column: 6 / -1;
}
}
.homepage-hero {
border: 0;
height: 100vh;
object-fit: cover;
border: 0;
height: 100vh;
object-fit: cover;
}
/** Homepage Introduction */
.homepage-introduction {
grid-column: 4 / -2;
grid-row: 3;
grid-column: 4 / -2;
grid-row: 3;
}
@media (--tablet) {
.homepage-introduction {
grid-column: 6 / span 6;
}
.homepage-introduction {
grid-column: 6 / span 6;
}
}
/** Homepage Statistics */
.homepage-statistics {
display: flex;
flex-direction: column;
grid-column: 2 / -2;
justify-content: center;
display: flex;
flex-direction: column;
grid-column: 2 / -2;
justify-content: center;
}
@media (--tablet) {
.homepage-statistics {
grid-column: 12 / -2;
grid-row: 4;
}
.homepage-statistics {
grid-column: 12 / -2;
grid-row: 4;
}
}
.homepage-statistics-image-container {
grid-column: 1 / -1;
grid-column: 1 / -1;
}
@media (--tablet) {
.homepage-statistics-image-container {
grid-column: 2 / 11;
grid-row: 4;
}
.homepage-statistics-image-container {
grid-column: 2 / 11;
grid-row: 4;
}
}
.homepage-statistics-image {
object-fit: cover;
object-fit: cover;
}
.homepage-statistics-container {
display: flex;
justify-content: space-between;
display: flex;
justify-content: space-between;
}
.homepage-statistics-item {
display: flex;
flex-direction: column;
display: flex;
flex-direction: column;
}
.homepage-statistics-key {
order: -1;
order: -1;
}
.homepage-statistics-value {
font-size: var(--font-size-5);
font-weight: var(--font-weight-black);
font-size: var(--font-size-5);
font-weight: var(--font-weight-black);
}
/** Homepage Districts */
.homepage-districts {
grid-column: 2 / -2;
grid-row: 6;
grid-column: 2 / -2;
grid-row: 6;
}
@media (--tablet) {
.homepage-districts {
grid-row: 5;
}
.homepage-districts {
grid-row: 5;
}
}
.homepage-districts-grid {
display: grid;
grid-gap: calc(var(--space-55) / 4);
grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-gap: calc(var(--space-55) / 4);
grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
list-style: none;
margin: 0;
padding: 0;
}
.homepage-districts-item {
margin-block-end: 0;
margin-block-end: 0;
}
.homepage-districts-item-link {
text-decoration: none;
text-decoration: none;
}
.homepage-districts-item-headline {
font-size: var(--font-size-3);
font-weight: var(--font-weight-normal);
margin-block-end: 0;
font-size: var(--font-size-3);
font-weight: var(--font-weight-normal);
margin-block-end: 0;
}
.homepage-districts-item-image {
margin-block-end: var(--space-3);
margin-block-end: var(--space-3);
}

78
src/assets/styles/layout/base.css
View File

@@ -1,67 +1,67 @@
/** Base */
.page-grid {
display: grid;
grid-template-columns: var(--grid-fullsize);
grid-template-rows: var(--grid-row) auto var(--grid-row);
min-height: 100vh;
display: grid;
grid-template-columns: var(--grid-fullsize);
grid-template-rows: var(--grid-row) auto var(--grid-row);
min-height: 100vh;
}
.page-content {
display: grid;
grid-auto-rows: auto;
grid-column: 1 / -1;
grid-row: 1 / -1;
grid-template-columns: var(--grid-fullsize);
grid-template-rows: var(--grid-row);
margin-block-end: var(--grid-row);
row-gap: clamp(1.5rem, var(--space-55), 6rem);
display: grid;
grid-auto-rows: auto;
grid-column: 1 / -1;
grid-row: 1 / -1;
grid-template-columns: var(--grid-fullsize);
grid-template-rows: var(--grid-row);
margin-block-end: var(--grid-row);
row-gap: clamp(1.5rem, var(--space-55), 6rem);
}
.page-title {
align-items: center;
display: flex;
font-size: var(--font-size-4);
grid-column: 1 / 3;
grid-row: 1 / 3;
justify-content: flex-end;
margin: 0;
padding-inline-end: calc(var(--space-55) / 2);
transform: rotate(180deg);
writing-mode: vertical-lr;
align-items: center;
display: flex;
font-size: var(--font-size-4);
grid-column: 1 / 3;
grid-row: 1 / 3;
justify-content: flex-end;
margin: 0;
padding-inline-end: calc(var(--space-55) / 2);
transform: rotate(180deg);
writing-mode: vertical-lr;
}
@media (--tablet) {
.page-title {
grid-column: 1;
}
.page-title {
grid-column: 1;
}
}
.page-title-link {
font-weight: var(--font-weight-black);
text-decoration: none;
font-weight: var(--font-weight-black);
text-decoration: none;
}
.svg-icons {
left: -9999px;
position: absolute;
top: -9999px;
left: -9999px;
position: absolute;
top: -9999px;
}
/** Narrow */
.layout-narrow {
grid-column: 3 / -3;
grid-row: 1 / 3;
padding-block-start: calc(var(--space-55) / 2);
grid-column: 3 / -3;
grid-row: 1 / 3;
padding-block-start: calc(var(--space-55) / 2);
}
@media (--tablet) {
.layout-narrow {
grid-column: 6 / -6;
}
.layout-narrow {
grid-column: 6 / -6;
}
}
@media (--desktop) {
.layout-narrow {
grid-column: 7 / -7;
}
.layout-narrow {
grid-column: 7 / -7;
}
}

44
src/assets/styles/layout/footnotes.css
View File

@@ -1,43 +1,43 @@
/** Footnotes */
.footnote-ref a {
color: var(--color-accent);
font-weight: var(--font-weight-light);
color: var(--color-accent);
font-weight: var(--font-weight-light);
}
.footnote-bracket {
display: none;
display: none;
}
.footnote-backref {
color: var(--color-accent);
font-weight: var(--font-weight-light);
text-decoration: none;
color: var(--color-accent);
font-weight: var(--font-weight-light);
text-decoration: none;
}
.footnotes {
padding-left: 2rem;
position: relative;
padding-left: 2rem;
position: relative;
}
.footnotes :target {
background-color: var(--color-fg-feather);
padding: var(--space-5);
background-color: var(--color-fg-feather);
padding: var(--space-5);
}
.footnotes-list {
counter-reset: item;
list-style: none;
margin: 0;
padding: 0;
counter-reset: item;
list-style: none;
margin: 0;
padding: 0;
}
.footnote-item::before {
content: counter(item);
counter-increment: item;
font-size: smaller;
font-weight: var(--font-weight-black);
left: 0;
padding-top: 0.15rem;
position: absolute;
vertical-align: super;
content: counter(item);
counter-increment: item;
font-size: smaller;
font-weight: var(--font-weight-black);
left: 0;
padding-top: 0.15rem;
position: absolute;
vertical-align: super;
}

44
src/assets/styles/layout/legal.css
View File

@@ -1,38 +1,38 @@
/** Legal Links */
.legal {
align-items: center;
display: flex;
font-size: 12px;
grid-column: 1 / -3;
padding-inline-start: clamp(15px, 2.4vw, 50px);
align-items: center;
display: flex;
font-size: 12px;
grid-column: 1 / -3;
padding-inline-start: clamp(15px, 2.4vw, 50px);
}
.legal-copyright {
font-size: 14px;
margin-inline-end: 0.25em;
position: relative;
top: 1px;
font-size: 14px;
margin-inline-end: 0.25em;
position: relative;
top: 1px;
}
.legal-author {
letter-spacing: 0.05em;
text-transform: uppercase;
letter-spacing: 0.05em;
text-transform: uppercase;
}
.legal-author-link {
color: var(--color-fg);
text-decoration: none;
color: var(--color-fg);
text-decoration: none;
&:hover,
&:focus {
text-decoration: underline;
text-decoration-color: var(--color-accent);
text-decoration-thickness: 0.15em;
text-underline-offset: 0.1em;
}
&:hover,
&:focus {
text-decoration: underline;
text-decoration-color: var(--color-accent);
text-decoration-thickness: 0.15em;
text-underline-offset: 0.1em;
}
}
.legal-bullet {
margin-inline-end: 0.25em;
margin-inline-start: 0.25em;
margin-inline-end: 0.25em;
margin-inline-start: 0.25em;
}

12
src/assets/styles/layout/page-footer.css
View File

@@ -1,9 +1,9 @@
/** Page Footer */
.page-footer {
display: grid;
grid-column: 1 / -1;
grid-row: 3;
grid-template-columns: var(--grid-fullsize);
grid-template-rows: clamp(3rem, var(--space-55), 9rem);
margin-block-start: clamp(1.5rem, var(--space-55), 4.5rem);
display: grid;
grid-column: 1 / -1;
grid-row: 3;
grid-template-columns: var(--grid-fullsize);
grid-template-rows: clamp(3rem, var(--space-55), 9rem);
margin-block-start: clamp(1.5rem, var(--space-55), 4.5rem);
}

14
src/assets/styles/layout/page-header.css
View File

@@ -1,12 +1,12 @@
/** Page Header */
.page-header {
/* margin-block-end: clamp(1.5rem, var(--space-55), 4.5rem); */
display: grid;
grid-column: 1 / -1;
grid-row: 1;
grid-template-columns: var(--grid-fullsize);
grid-template-rows: clamp(3rem, var(--space-55), 9rem);
z-index: 1;
/* margin-block-end: clamp(1.5rem, var(--space-55), 4.5rem); */
display: grid;
grid-column: 1 / -1;
grid-row: 1;
grid-template-columns: var(--grid-fullsize);
grid-template-rows: clamp(3rem, var(--space-55), 9rem);
z-index: 1;
}
/* .minimal-page-header { */

50
src/assets/styles/layout/theme-toggle.css
View File

@@ -1,35 +1,35 @@
/** Theme Toggle */
.no-js .theme-toggle {
display: none;
display: none;
}
.theme-toggle {
align-items: center;
align-self: center;
background: transparent;
border: 0;
cursor: pointer;
display: flex;
font-size: 0;
grid-column: -2;
height: 40px;
justify-content: center;
justify-self: center;
outline: 0;
width: 40px;
align-items: center;
align-self: center;
background: transparent;
border: 0;
cursor: pointer;
display: flex;
font-size: 0;
grid-column: -2;
height: 40px;
justify-content: center;
justify-self: center;
outline: 0;
width: 40px;
}
.theme-toggle-icon {
fill: var(--color-fg);
font-size: 12px;
height: 12px;
transition-duration: var(--transition-duration-5);
transition-property: transform;
transition-timing-function: ease-in-out;
width: 12px;
fill: var(--color-fg);
font-size: 12px;
height: 12px;
transition-duration: var(--transition-duration-5);
transition-property: transform;
transition-timing-function: ease-in-out;
width: 12px;
.theme-toggle:hover &,
.theme-toggle:focus & {
transform: scale(1.25);
}
.theme-toggle:hover &,
.theme-toggle:focus & {
transform: scale(1.25);
}
}

46
src/assets/styles/layout/up-link.css
View File

@@ -1,33 +1,33 @@
/** Up Link */
.up-link {
align-self: center;
grid-column: -2;
justify-self: center;
transition-duration: var(--transition-duration-5);
transition-property: transform;
transition-timing-function: ease-in-out;
align-self: center;
grid-column: -2;
justify-self: center;
transition-duration: var(--transition-duration-5);
transition-property: transform;
transition-timing-function: ease-in-out;
&:hover,
&:focus {
transform: translate3D(0, -0.25rem, 0);
}
&:hover,
&:focus {
transform: translate3D(0, -0.25rem, 0);
}
}
.up-link-button {
align-items: center;
background: transparent;
border: 0;
cursor: pointer;
display: flex;
font-size: 0;
height: 40px;
justify-content: center;
width: 40px;
align-items: center;
background: transparent;
border: 0;
cursor: pointer;
display: flex;
font-size: 0;
height: 40px;
justify-content: center;
width: 40px;
}
.up-link-icon {
fill: var(--color-fg);
font-size: 20px;
height: 20px;
width: 20px;
fill: var(--color-fg);
font-size: 20px;
height: 20px;
width: 20px;
}

30
src/assets/styles/print.css
View File

@@ -1,20 +1,20 @@
@page {
margin: 1cm 0cm;
margin: 1cm 0cm;
}
/* Show all content immediatly */
[data-sal|='fade'] {
opacity: 1;
opacity: 1;
}
[data-sal|='slide'],
[data-sal|='zoom'] {
opacity: 1;
transform: none;
opacity: 1;
transform: none;
}
[data-sal|='flip'] {
transform: none;
transform: none;
}
/* Hide content from printing */
@@ -22,36 +22,36 @@
.page-footer,
.theme-toggle,
.pagination {
display: none;
display: none;
}
/* Images */
img {
border: 0;
max-width: 1200px;
border: 0;
max-width: 1200px;
}
/* Links */
a {
color: #000000;
word-wrap: break-word;
color: #000000;
word-wrap: break-word;
}
a::after {
content: ' (https://hamburg.stefanimhoff.de' attr(href) ')';
font-size: 80%;
content: ' (https://hamburg.stefanimhoff.de' attr(href) ')';
font-size: 80%;
}
a[href^='mailto:']::after {
content: ' (' attr(href) ')';
content: ' (' attr(href) ')';
}
a[href^='http://']::after,
a[href^='https://']::after
{
content: ' (' attr(href) ')';
content: ' (' attr(href) ')';
}
a[href^='#']::after {
display: none;
display: none;
}