redefine styles

macx · Oct 18, 2022 · e6c4189 · e6c4189
1 parent 2bdd31b
commit e6c4189
Show file tree

Hide file tree

Showing 13 changed files with 67 additions and 21 deletions.
diff --git a/assets/styles/base/fonts.scss b/assets/styles/base/fonts.scss
@@ -1,9 +1,9 @@
 @font-face {
   font-family: 'Rubik';
   font-style: normal;
-  font-weight: 400;
-  src: local(''), url('/fonts/rubik-v18-latin-400.woff2') format('woff2'),
-    url('/fonts/rubik-v18-latin-400.woff') format('woff');
+  font-weight: 300;
+  src: local(''), url('/fonts/rubik-v18-latin-300.woff2') format('woff2'),
+    url('/fonts/rubik-v18-latin-300.woff') format('woff');
   font-display: swap;
 }
 

diff --git a/assets/styles/base/layout.scss b/assets/styles/base/layout.scss
@@ -69,10 +69,15 @@ h4 {
 h1 {
   font-size: 2rem;
   margin-top: 0;
+  transition: font-size var(--transition);
 
   + h2 {
     margin-top: 0;
   }
+
+  @include respond('large') {
+    font-size: 2.5rem;
+  }
 }
 
 h2 {

diff --git a/assets/styles/base/mixins.scss b/assets/styles/base/mixins.scss
@@ -3,6 +3,7 @@
     small: 480px,
     medium: 600px,
     large: 1000px,
+    xlarge: 1300px,
   );
 
   @if $type == 'from' {

diff --git a/assets/styles/base/variables.scss b/assets/styles/base/variables.scss
@@ -6,6 +6,7 @@
 
   --header-height: 3.75rem;
   --navigation-width: 15rem;
+  --toc-width: 14rem;
   --content-spacing: var(--spacing);
   --content-max-width: 45rem;
   --border-radius: 0.2rem;
@@ -34,7 +35,7 @@
 
   --font-family: 'Rubik', sans-serif;
   --font-family--heading: 'Playfair Display', serif;
-  --font-weight: 400;
+  --font-weight: 300;
   --font-weight--bold: 500;
   --font-weight--heading: 400;
 
@@ -64,17 +65,17 @@
   }
 
   &[data-mode='dark'] {
-    --clr-background: #171717;
+    --clr-background: #000;
     --clr-text: #d9d9d9;
     --clr-text--light: rgba(217, 217, 217, 0.7);
     --clr-text--dark: #fff;
     --clr-line: rgba(255, 255, 255, 0.2);
     --clr-header: rgba(20, 35, 45, 0.8);
-    --clr-inverse: #000;
+    --clr-inverse: rgb(255 255 255 / 0.1);
 
-    --nav-border: #000;
+    --nav-border: rgb(255 255 255 / 0.3);
 
-    --footer-line: rgba(0, 0, 0, 0);
+    --footer-line: rgb(255 255 255 / 0.3);
     --footer-bg: linear-gradient(
       to bottom,
       rgba(0, 0, 0, 0.2) 1px,

diff --git a/assets/styles/modules/content.scss b/assets/styles/modules/content.scss
@@ -2,8 +2,9 @@
   min-height: calc(100vh - 3.75rem);
   max-width: var(--content-max-width);
   margin: 0 auto;
+  padding-inline: var(--content-spacing);
   padding: 0 var(--content-spacing);
-  transition: padding var(--transition);
+  transition: padding-inline var(--transition);
 
   &__meta {
     font-size: var(--font-size--small);
@@ -38,7 +39,8 @@
   }
 
   &--full {
-    padding: var(--spacing--large) var(--content-spacing);
+    padding-block: var(--spacing--large);
+    padding-inline: var(--content-spacing);
   }
 
   h2 {
@@ -101,6 +103,10 @@
     animation: highlight 3s ease;
     text-shadow: 0 0 1px transparent;
   }
+
+  @include respond('large', 'between', 'xlarge') {
+    margin: 0 auto 0 calc(var(--toc-width) + var(--content-spacing));
+  }
 }
 
 picture {

diff --git a/assets/styles/modules/header.scss b/assets/styles/modules/header.scss
@@ -126,5 +126,22 @@
         display: none !important;
       }
     }
+
+    &::after {
+      display: block;
+      position: fixed;
+      top: var(--header-height);
+      left: 0;
+      width: 100%;
+      height: var(--spacing--large);
+      content: '';
+      z-index: 19;
+      pointer-events: none;
+      background-image: linear-gradient(
+        180deg,
+        var(--clr-background),
+        transparent
+      );
+    }
   }
 }
diff --git a/assets/styles/modules/reflist.scss b/assets/styles/modules/reflist.scss
@@ -11,7 +11,7 @@
     font-size: 0.8125rem;
     color: var(--clr-text--light);
 
-    a:not([class]) {
+    a:not([class]):first-child {
       display: inline-block;
       font-size: 1rem;
       margin-bottom: 0.5em;

diff --git a/assets/styles/modules/toc.scss b/assets/styles/modules/toc.scss
@@ -33,6 +33,10 @@ TOC
     all: unset;
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
+
+    ul {
+      display: none;
+    }
   }
 
   li {
@@ -70,12 +74,22 @@ TOC
     position: fixed;
     top: calc(var(--header-height) + var(--spacing--large));
     left: 0;
-    max-width: 15rem;
+    width: var(--toc-width);
+    max-height: calc(100% - var(--header-height) - var(--spacing--large));
+    overflow-y: auto;
     z-index: 2;
     padding-right: var(--spacing);
 
     font-size: var(--font-size--small);
     line-height: var(--line-height--small);
     margin: 0;
+
+    ul {
+      ul {
+        display: block;
+        margin-left: var(--spacing--small);
+        margin-bottom: 0.5rem;
+      }
+    }
   }
 }
diff --git a/config.yml b/config.yml
@@ -45,15 +45,15 @@ markup:
       hardWraps: true
       unsafe: true
   tableOfContents:
-    endLevel: 2
+    endLevel: 3
   highlight:
     noClasses: false
 
 menu:
   nav:
-    - identifier: 'das-seminar'
-      name: 'Das Seminar'
-      url: '/das-seminar/'
+    - identifier: 'seminar'
+      name: 'Seminar'
+      url: '/seminar/'
       params:
         class: ''
       weight: 1

diff --git a/content/_index.md b/content/_index.md
@@ -12,10 +12,10 @@ Im Seminar GT 1191 der HAWK Hochschule für angewandte Wissenschaft und Kunst in
 
 Du lernst die Grundlagen von <abbr title="Hypertext Markup Language">HTML</abbr>, <abbr title="Cascading Stylesheets">CSS</abbr> und JavaScript, sowie fortgeschrittene Techniken zur Bild- und Ladezeitoptimierung der Assets. Dich erwarten Best-Practise-Beispiele aus Großprojekten, wie die Gestaltung von Komponenten aus Sicht des User Centered Designs. Du darfst dich kreativ austoben, musst dir zunächst aber die Struktur erarbeiten und am Ball bleiben. Dich erwartet eine herausfordernde Zeit.
 
-Auf dieser Website findest du alle Informationen zum [Seminar]({{< relref "/das-seminar" >}}), Tutorials und hilfreiche [Links]({{< relref "/links" >}}). Und wenn du magst, kannst du sie auch selbst [mitgestalten](https://github.com/macx/hawk-gt1191), denn sie ist im Rahmen dieses Seminars entstanden.
+Auf dieser Website findest du alle Informationen zum [Seminar]({{< relref "/seminar" >}}), Tutorials und hilfreiche [Links]({{< relref "/links" >}}). Und wenn du magst, kannst du sie auch selbst [mitgestalten](https://github.com/macx/hawk-gt1191), denn sie ist im Rahmen dieses Seminars entstanden.
 
 <div class="button-group">
-  <a href="{{< relref "/das-seminar" >}}" class="button">
+  <a href="{{< relref "/seminar" >}}" class="button">
     <span>Alle Infos</span>
   </a>
 </div>
diff --git a/content/links/index.md b/content/links/index.md
@@ -40,6 +40,8 @@ Blindtexte, Farben, Fonts und Icons bekommst du hier. So kannst du deine Idee sc
   Übersichtliche Farbpalette. Ein Klick kopiert den Farbwert in die Zwischenablage.
 - [Color Designer](https://colordesigner.io/)\
   Farbpaletten, Farbwähler und Komplementärfarben.
+- [Alphredo – Alpha colors generator](https://alphredo.app/){{< new >}}\
+  Tool, um transparente Farben so aussehen zu lassen, wie ihre undurchsichtigen.
 - [Monk Skin Tones](https://skintone.google/get-started)\
   Farbtöne der Haut nach dem Monk-Schema (Open Source von Google)
 
@@ -54,14 +56,14 @@ Blindtexte, Farben, Fonts und Icons bekommst du hier. So kannst du deine Idee sc
 
 ### Icons
 
+- [Lucide Icons](https://lucide.dev/) {{< new >}}\
+  Stark erweiteter Clon der Feather-Icons. Simpel und sauber. [Zur Einbindung](https://lucide.dev/docs/lucide).
 - [Material Symbols](https://fonts.google.com/icons?icon.set=Material+Symbols)\
   Icons und variabler Icon-Font von Google, verwendet in Android und den Google-Apps.
 - [Material Design Icons](https://materialdesignicons.com/)\
   Community-Edition der Google-Icons mit größerer Auswahl und Varianten. Auch als Webfont nutzbar.
 - [Simple Icons](https://simpleicons.org/)\
   Brand-Icons und Farben bekannter Markern wie Facebook und Instagram.
-- [Feather Icons](https://feathericons.com/)\
-  Simpel und sauber gestaltet, export als SVG.
 
 ### Fotos
 

diff --git a/content/das-seminar/hawk-aussen.jpg → content/seminar/hawk-aussen.jpg b/content/das-seminar/hawk-aussen.jpg → content/seminar/hawk-aussen.jpg
diff --git a/content/das-seminar/index.md → content/seminar/index.md b/content/das-seminar/index.md → content/seminar/index.md
@@ -1,5 +1,5 @@
 ---
-title: 'Das Seminar'
+title: 'Seminar'
 date: 2021-12-29T14:10:36+01:00
 draft: false
 content: 'full'