diff --git a/assets/scripts/main.js b/assets/scripts/main.js
index 5c282b4..58e3521 100644
--- a/assets/scripts/main.js
+++ b/assets/scripts/main.js
@@ -106,7 +106,7 @@ const externalLinks = document.querySelectorAll('main a[href^="http"]');
const linkedHeadlines = document.querySelectorAll(['h1[id], h2[id]']);
const linkedSections = document.querySelectorAll(['.stage__item[id]']);
-const stageNavigation = document.querySelector('.stage__navigation');
+const stageNavigation = document.querySelector('#TableOfContents');
function headlinesObserverCallback(entries) {
const stageNavigationLinks = stageNavigation.querySelectorAll('a');
@@ -114,7 +114,7 @@ function headlinesObserverCallback(entries) {
entries.forEach((entry) => {
if (entry.isIntersecting) {
const navItem = stageNavigation.querySelector(
- 'a[href="#' + entry.target.id + '"]'
+ `a[href="#${entry.target.id}"]`
);
if (navItem) {
diff --git a/assets/styles/base/layout.scss b/assets/styles/base/layout.scss
index 8aa235e..8a31742 100644
--- a/assets/styles/base/layout.scss
+++ b/assets/styles/base/layout.scss
@@ -164,32 +164,6 @@ a {
text-transform: uppercase;
letter-spacing: 0.1rem;
}
-
- ul {
- all: unset;
- }
-
- li {
- list-style: none;
- margin: 0 0 0.5em;
- }
-
- a {
- display: block;
- padding: 0.2em 0;
- color: var(--clr-text--light);
-
- &:hover,
- &:focus {
- color: var(--clr-primary);
- text-decoration: none;
- }
-
- &.is-active {
- font-weight: var(--font-weight--bold);
- color: var(--clr-primary);
- }
- }
}
}
}
diff --git a/assets/styles/base/mixins.scss b/assets/styles/base/mixins.scss
index dd66d2d..51e4d0c 100644
--- a/assets/styles/base/mixins.scss
+++ b/assets/styles/base/mixins.scss
@@ -1,4 +1,4 @@
-@mixin respond($breakpoint, $type: 'from') {
+@mixin respond($bp, $type: 'from', $bp2: '') {
$layout-breakpoints: (
small: 480px,
medium: 600px,
@@ -6,11 +6,15 @@
);
@if $type == 'from' {
- @media screen and (min-width: map-get($layout-breakpoints, $breakpoint)) {
+ @media screen and (min-width: map-get($layout-breakpoints, $bp)) {
+ @content;
+ }
+ } @else if $type == 'between' {
+ @media screen and (min-width: map-get($layout-breakpoints, $bp)) and (max-width: map-get($layout-breakpoints, $bp2)) {
@content;
}
} @else if $type == 'to' {
- @media screen and (max-width: map-get($layout-breakpoints, $breakpoint)-1) {
+ @media screen and (max-width: map-get($layout-breakpoints, $bp)-1) {
@content;
}
}
diff --git a/assets/styles/base/variables.scss b/assets/styles/base/variables.scss
index c7ee255..0c5b9e0 100644
--- a/assets/styles/base/variables.scss
+++ b/assets/styles/base/variables.scss
@@ -6,6 +6,7 @@
--header-height: 3.75rem;
--navigation-width: 15rem;
+ --content-spacing: var(--spacing);
--content-max-width: 45rem;
--border-radius: 0.2rem;
@@ -44,6 +45,7 @@
--font-size: 1rem;
--font-size--small: 0.875rem;
+ --font-size--xsmall: 0.75rem;
--font-size--large: 1.25rem;
--line-height: 1.4;
@@ -62,7 +64,7 @@
--image-shadow: 0 0.25rem 0.75rem -0.5rem rgb(10 52 120 / 30%);
@media (min-width: 600px) {
- --spacing: 2.5rem;
+ --content-spacing: 2.5rem;
--spacing--large: 4rem;
}
@@ -73,6 +75,7 @@
--clr-text--dark: #fff;
--clr-line: rgba(255, 255, 255, 0.2);
--clr-header: rgba(20, 35, 45, 0.8);
+ --clr-inverse: rgb(38, 50, 56);
--clr-play-1: hsla(206, 99%, 69%, 0.1);
--clr-play-2: hsla(123, 46%, 66%, 0.1);
diff --git a/assets/styles/main.scss b/assets/styles/main.scss
index 1d518c7..a3d0977 100644
--- a/assets/styles/main.scss
+++ b/assets/styles/main.scss
@@ -19,5 +19,8 @@
'modules/mode-switch',
'modules/button',
'modules/content',
+ 'modules/reflist',
+ 'modules/hint',
+ 'modules/toc',
'modules/footer',
'syntax/chroma';
diff --git a/assets/styles/modules/content.scss b/assets/styles/modules/content.scss
index 0a167bb..335c6f8 100644
--- a/assets/styles/modules/content.scss
+++ b/assets/styles/modules/content.scss
@@ -2,13 +2,12 @@
min-height: calc(100vh - 3.75rem);
max-width: var(--content-max-width);
margin: 0 auto;
- padding: 0 var(--spacing);
+ padding: 0 var(--content-spacing);
transition: padding var(--transition);
a:not([class]),
abbr {
- color: inherit;
- margin: 0;
+ color: var(--clr-text);
border-bottom: 2px solid;
border-radius: 0.2em;
font-weight: var(--font-weight--bold);
@@ -22,7 +21,8 @@
color: var(--clr-inverse);
border-color: var(--clr-text--light);
padding: 0 0.3em;
- margin: 0 -0.3em;
+ margin-left: -0.3em;
+ margin-right: -0.3em;
}
}
@@ -33,7 +33,7 @@
}
&--full {
- padding: var(--spacing--large) var(--spacing);
+ padding: var(--spacing--large) var(--content-spacing);
}
h2 {
@@ -87,30 +87,6 @@
}
}
- ul:not([class]) {
- margin: 1.5em 0 1em;
- padding: 0;
-
- li {
- @include list-item();
-
- margin: 0 0 1.2em;
- font-size: 0.8125rem;
- color: var(--clr-text--light);
-
- a {
- display: inline-block;
- font-size: 1rem;
- margin-bottom: 0.2em;
-
- &:hover,
- &:focus-visible {
- margin-bottom: 0.2em;
- }
- }
- }
- }
-
code {
color: var(--clr-text--code);
// background-color: var(--clr-code);
@@ -124,7 +100,7 @@
picture {
display: block;
- margin: 0 0 var(--spacing);
+ margin: 0 0 var(--content-spacing);
img {
display: block;
@@ -134,9 +110,9 @@ picture {
}
figure {
- margin-left: calc(var(--spacing) * -1);
- margin-right: calc(var(--spacing) * -1);
- margin-bottom: var(--spacing);
+ margin-left: calc(var(--content-spacing) * -1);
+ margin-right: calc(var(--content-spacing) * -1);
+ margin-bottom: var(--content-spacing);
transition: all var(--transition--theme);
picture {
@@ -150,7 +126,7 @@ figure {
figcaption {
font-size: var(--font-size--small);
- padding: 0 var(--spacing);
+ padding: 0 var(--content-spacing);
color: var(--clr-text--light);
span:nth-child(2) {
@@ -182,7 +158,7 @@ figure {
/*
┌──────────────────────────────────┐
-FOOTNOTES
+ FOOTNOTES
└──────────────────────────────────┘
*/
diff --git a/assets/styles/modules/footer.scss b/assets/styles/modules/footer.scss
index 924c51b..8469a79 100644
--- a/assets/styles/modules/footer.scss
+++ b/assets/styles/modules/footer.scss
@@ -5,7 +5,7 @@
.footer {
position: relative;
z-index: 5;
- padding: var(--spacing);
+ padding: var(--spacing) var(--content-spacing);
font-size: 0.8rem;
border-top: 1px solid var(--footer-line);
color: var(--clr-text--light);
diff --git a/assets/styles/modules/hint.scss b/assets/styles/modules/hint.scss
new file mode 100644
index 0000000..c888b67
--- /dev/null
+++ b/assets/styles/modules/hint.scss
@@ -0,0 +1,48 @@
+[data-hint] {
+ position: relative;
+ z-index: 500;
+ cursor: pointer;
+
+ &::before,
+ &::after {
+ position: absolute;
+ left: 50%;
+ bottom: 100%;
+ transform: translate(-50%, 100%);
+ transition: opacity 0.2s, transform 0.2s;
+
+ opacity: 0;
+ pointer-events: none;
+ }
+
+ &:hover {
+ &::before,
+ &::after {
+ opacity: 1;
+ transform: translate(-50%, 0);
+ }
+ }
+
+ &::before {
+ margin: 0 0 10px;
+ padding: 0.4em 0.7em 0.4em;
+ border-radius: 3px;
+ background: var(--clr-text);
+ color: var(--clr-inverse);
+ content: attr(data-hint);
+
+ font-size: var(--font-size--xsmall);
+ line-height: 1;
+ white-space: nowrap;
+ text-align: center;
+ }
+
+ &::after {
+ width: 0;
+ border: 5px solid transparent;
+ border-top-color: var(--clr-text);
+ content: '';
+ font-size: 0;
+ line-height: 0;
+ }
+}
diff --git a/assets/styles/modules/reflist.scss b/assets/styles/modules/reflist.scss
new file mode 100644
index 0000000..3854829
--- /dev/null
+++ b/assets/styles/modules/reflist.scss
@@ -0,0 +1,39 @@
+.reflist {
+ ul {
+ margin: 1.5em 0 1em;
+ padding: 0;
+ }
+
+ li {
+ @include list-item();
+
+ margin: 0 0 1.3em;
+ font-size: 0.8125rem;
+ color: var(--clr-text--light);
+
+ a:not([class]) {
+ display: inline-block;
+ font-size: 1rem;
+ margin-bottom: 0.5em;
+ }
+ }
+
+ &__item {
+ svg {
+ width: 1rem;
+ height: 1rem;
+ fill: var(--clr-text--light);
+ }
+ }
+
+ &__item-header {
+ display: flex;
+ justify-content: space-between;
+ align-items: end;
+ margin-bottom: 0.5em;
+
+ a {
+ margin-bottom: 0 !important;
+ }
+ }
+}
diff --git a/assets/styles/modules/toc.scss b/assets/styles/modules/toc.scss
new file mode 100644
index 0000000..5782dd4
--- /dev/null
+++ b/assets/styles/modules/toc.scss
@@ -0,0 +1,80 @@
+/*
+┌──────────────────────────────────┐
+TOC
+└──────────────────────────────────┘
+*/
+
+.toc {
+ font-size: var(--font-size--small);
+ line-height: var(--line-height--small);
+ background-color: var(--clr-inverse);
+ padding: var(--spacing) var(--content-spacing);
+ margin: var(--content-spacing) calc(var(--content-spacing) * -1);
+ box-shadow: var(--image-shadow);
+
+ header {
+ margin: 0 0 1em;
+
+ h2 {
+ font-size: var(--font-size--small);
+ text-transform: uppercase;
+ letter-spacing: 0.1rem;
+ border: 0;
+ margin: 0;
+
+ &::after {
+ display: none;
+ }
+ }
+ }
+
+ ul {
+ all: unset;
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
+ }
+
+ li {
+ list-style: none;
+ }
+
+ #TableOfContents {
+ a {
+ display: block;
+ padding: 0.3em 0;
+ margin: 0;
+ color: var(--clr-text--light);
+ border: 0;
+ text-decoration: none;
+ font-weight: inherit;
+
+ &:hover,
+ &:focus {
+ color: var(--clr-primary);
+ text-decoration: none;
+ background-color: transparent;
+ padding: 0.3em 0;
+ margin: 0;
+ }
+
+ &.is-active {
+ font-weight: var(--font-weight--bold);
+ color: var(--clr-primary);
+ }
+ }
+ }
+
+ @include respond('large') {
+ display: block;
+ position: fixed;
+ top: calc(var(--header-height) + var(--spacing--large));
+ left: 0;
+ max-width: 15rem;
+ z-index: 2;
+ padding-right: var(--spacing);
+
+ font-size: var(--font-size--small);
+ line-height: var(--line-height--small);
+ margin: 0;
+ }
+}
diff --git a/content/datenschutz.md b/content/datenschutz.md
index 557e2a9..8d597db 100644
--- a/content/datenschutz.md
+++ b/content/datenschutz.md
@@ -2,11 +2,13 @@
title: 'Datenschutz'
date: 2021-12-27T11:11:48+01:00
draft: true
-notoc: true
+notoc: false
---
# Datenschutzerklärung
+{{< toc >}}
+
## 1. Datenschutz auf einen Blick
### Allgemeine Hinweise
diff --git a/content/links/index.md b/content/links/index.md
index 85ce52f..6d9bd3c 100644
--- a/content/links/index.md
+++ b/content/links/index.md
@@ -3,7 +3,7 @@ title: 'Links'
date: 2021-12-29T14:10:36+01:00
draft: false
content: 'full'
-notoc: true
+notoc: false
---
# Essentielle Links
@@ -11,6 +11,10 @@ notoc: true
Regelmäßig treten Fragen auf, welche Resourcen ich empfehlen kann. Deshalb habe ich hier für dich die Nützlichsten zusammengestellt, damit du das Seminar meistern kannst.
{.lead}
+{{< toc >}}
+
+
+
## Inhalte
### Text
@@ -26,6 +30,11 @@ Regelmäßig treten Fragen auf, welche Resourcen ich empfehlen kann. Deshalb hab
- [Tailwind Color Palette](https://tailwindcolor.com/)\
Schöne Farbpalette. Ein Klick auf eine Farbe kopiert euch den Farbwert in die Zwischenablage.
+- [Color Designer](https://colordesigner.io/)\
+ Farbpaletten, Farbwähler und Komplementärfarben.
+- [Materials Colors ](https://github.com/romannurik/MaterialColorsApp#material-colors-for-mac)\
+ Farbwähler als natives macOS-Tool.
+ {.links}
### Fonts
@@ -50,9 +59,9 @@ Regelmäßig treten Fragen auf, welche Resourcen ich empfehlen kann. Deshalb hab
- [Unsplash](https://unsplash.com/)\
Hochauflösende Bilder zur freien Verwendung auf deiner Website.
-## Assets optimieren
+## Optimieren
-Bilder unbearbeitet auf die Besucher seiner Website loszulassen ist fahrlässig. Diese Web Apps helfen bei der Optimierung.
+Autohersteller nutzen Licht zur Qualitätskontrolle des Lackes, Tischler helfen beim Schrank mit feinem Schleifpapier nach. Was nutzt du für deine Website?
- [Squoosh](https://squoosh.app/)\
Besser als Photoshop und Co optimiert Squoosh alle arten von Bildern und gibt sie auch in neuen Bildformaten aus.
@@ -60,6 +69,8 @@ Bilder unbearbeitet auf die Besucher seiner Website loszulassen ist fahrlässig.
Jedes SVG muss hier durch: Optimiere deine Bilder mit dieser Web-App.
- [SVGWIZ](https://svgwiz.com/)\
Konvertiert SVG-Icons in CSS-Data-URI, um diese als Hintergrundgrafik verwenden zu können.
+- [Colour Contrast Checker](https://colourcontrast.cc/)\
+ Prüft Vorder- und Hintergrundfarben, ob sie genügend Kontrast aufweisen, um gut gelesen werden zu können.
## Nützliche Helfer
@@ -81,25 +92,22 @@ Mit diesen Werkzeugen kannst du deine Website entwickeln.
### Plugins für VSC
-Ich empfehle ich folgende Plugins:
+Ich empfehle folgende Plugins für Visual Studio Code:
- [Live Preview](https://marketplace.visualstudio.com/items?itemName=ms-vscode.live-server)\
Erstellt einen lokalen Server für deine Website zur Ansicht in der IDE.
- [Compile Hero Pro](https://marketplace.visualstudio.com/items?itemName=Wscats.eno)\
Erstellt aus .scss-Dateien .css-Dateien.
- [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)\
- Formatiert euren Code zur besseren Übersicht.
+ Strukturiert und formatiert deinen Code. Nicht nur, damit er besser aussieht.
- [Cobalt2](https://marketplace.visualstudio.com/items?itemName=wesbos.theme-cobalt2)\
Sehr angenehmes und gut lesbares Dark-Theme für VSC.
-
-## Apps und Tools
-
-Wenn du deine Website lokal in deinem Browser oder öffentlich zur Verfügung stellen möchtest.
-
-- [Laravel Valet ](https://laravel.com/docs/8.x/valet)\
- Entwicklungsumgebung für macOS-Minimalisten. Valet macht aus einem Verzeichnis einen virtuellen Host unter der \*.test-Domäne.
-- [Materials Colors ](https://github.com/romannurik/MaterialColorsApp)\
- Farbwähler als natives macOS-Tool.
+- [IntelliSense CSS](https://marketplace.visualstudio.com/items?itemName=Zignd.html-css-class-completion)\
+ Autovervollständigung von CSS-Klassen in HTML.
+- [Project Mananger](https://marketplace.visualstudio.com/items?itemName=alefragnani.project-manager)\
+ Schnelle Möglichkeit, Projekte zu öffnen.
+- [px to rem](https://marketplace.visualstudio.com/items?itemName=cipchk.cssrem)\
+ Konvertiert zwischen Pixel- und rem-Werten.
## Demos
@@ -126,9 +134,40 @@ Du brauchst Code-Beispiele? Gern, hier sind die, die ich gebaut habe. Die sind a
Dokumentation aller HTML-Elemente.
- [CSS-Referenz](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference)\
Dokumentation aller CSS-Eigenschaften (Properties).
+- [CSS-Spezifität](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity)
+ Mit der Spezifität bestimmt der Browser, welche Eigenschaften am relevantesten für ein Element zur Darstellung ist.
+- [JavaScript-Bascis](https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/JavaScript_basics)\
+ Kurze Einführung in die Scriptsprache.
- [Progressive web apps (PWAs)](https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps)\
Einführung in PWA, sowie Leitfaden zur Entwicklung.
- [Accessibility](https://developer.mozilla.org/en-US/docs/Web/Accessibility)\
Einführung und Dokumentation der `aria`-Rollen.
+### Schnell gelernt
+
+- [Flexbox Froggy](https://flexboxfroggy.com/#de)\
+ Spielend das CSS-Layout Flexbox lernen.
+- [Grid Garden](https://cssgridgarden.com/#de)\
+ Spielend das CSS-Layout Grid lernen.
+- [A Complete Guide to Grid](https://css-tricks.com/snippets/css/complete-guide-grid/)\
+ Übersicht über das CSS Grid.
+- [Emmet Cheat Sheet](https://docs.emmet.io/cheat-sheet/)\
+ Schreibe HTML und CSS in Sekundenschnelle. Auch in Visual Studio Code.
+
+## Frameworks
+
+Statische HTML-Dateien reichen dir nicht und WordPress ist dir zu aufgebläht? Dann teste die folgende Alternativen.
+
+- [Hugo](https://gohugo.io/)
+ Ein in Go geschriebener Seitengenerator für statische Seiten. Diese Seite verwendet Hugo.
+- [Kirby](https://gohugo.io/)
+ Das wohl beste CMS auf PHP-Basis, Kibry, ist für kleine als auch große Websites bestenes geeignet.
+- {{< reflist-item
+ title="Laravel Valet"
+ href="https://laravel.com/docs/8.x/valet"
+ descr="Entwicklungsumgebung für macOS-Minimalisten. Valet macht aus einem Verzeichnis einen virtuellen Host unter der *.test-Domäne."
+ platform="mac" >}}
+
+
+
[^1]: Zur Registierung und Login benötigst du einen kostenlosen Account von [GitHub](https://github.com/).
diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index 3081e73..342c383 100644
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -5,7 +5,7 @@
{{ define "main" }}
{{ if .Params.notoc }}
-