chore: Fine tune styles, update Tutorial

src/components/Metadata.astro

@@ -21,7 +21,7 @@ interface Props {
 const { title, description, type = 'website', pubDate, redirect } = Astro.props
 
 const canonicalUrl = removeTrailingSlash(
-  new URL(Astro.url.pathname, Astro.site).toString()
+  new URL(Astro.url.pathname, Astro.site).toString().toLowerCase()
 )
 
 const openGraphImage = Astro.url.pathname.startsWith('/tutorials')

src/content/tutorials/website-mit-visual-studio-code.mdx

@@ -89,7 +89,7 @@ Die Startseite einer Website sollte in der Regel immer `index.html` genannt werd
 
 Füge jetzt noch im Body ein paar HTML-Elemente ein, um die Website zu füllen. Zum Beispiel eine Überschrift und einen Textabschnitt.
 
-> **Tipp:** Wenn du dich mit HTML und CSS noch nicht auskennst, empfehle ich dir, die Tutorials [Einstieg in HTML](/tutorials/einstieg-in-html/) und [Einstieg in CSS](/tutorials/einstieg-in-css) zu lesen.
+> **Tipp:** Wenn du dich mit HTML und CSS noch nicht auskennst, empfehle ich dir, die Tutorials [Einstieg in HTML](/tutorials/einstieg-in-html) und [Einstieg in CSS](/tutorials/einstieg-in-css) zu lesen.
 
 ### CSS-Styles hinzufügen
 
@@ -133,5 +133,5 @@ Wenn das Egebnis wie folgt aussieht, hat das auch bei dir auch funktioniert.
 
 Herzlichen Glückwunsch zu deiner ersten Website! War gar nicht so schwer, oder? Wenn du möchtest, kannst du jetzt noch weitere Elemente hinzufügen und die Website weiter gestalten.
 
-Uur unserer Überraschung ist deine Website jetzt schon responiv und Mobile first. Damit das aber auch so bleibt, solltest du dich mit den Grundlagen moderner Websites beschäftigen. Schaue dir dazu weitere Tutorials an, oder melde dich zum Seminar an.
+Zu unserer Überraschung ist deine Website jetzt schon responiv und Mobile first. Damit das aber auch so bleibt, solltest du dich mit den Grundlagen moderner Websites beschäftigen. Schaue dir dazu weitere [Tutorials](/tutorials) an, oder melde dich zum Seminar an.
 

src/layouts/BlogPostLayout.astro

@@ -36,10 +36,10 @@ const toc = true
   pubDate={pubDate}
   ogType='article'
 >
+  {isDraft && <div class='draft-banner' />}
+
   <article>
     <header>
-      {isDraft && <div class='draft-banner' />}
-
       <h1>{title}</h1>
 
       <Lead text={description} />
@@ -71,6 +71,10 @@ const toc = true
 <style lang='scss'>
   @use '../styles/base/mixins';
 
+  article {
+    container: article / inline-size;
+  }
+
   .draft-banner {
     position: fixed;
     inset: var(--header-height) 0 auto auto;
@@ -79,14 +83,15 @@ const toc = true
     background-color: var(--clr-warning);
     color: var(--clr-inverse);
     pointer-events: none;
+    inline-size: max-content;
 
     box-shadow: 0 0.3em 0.5em -0.3em rgb(0 0 0 / 0.6);
 
     &::after {
       display: block;
       text-align: center;
       padding-block: 0.8em 0.6em;
-      padding-inline: var(--sp-content);
+      padding-inline: var(--sp);
       line-height: 1;
 
       font-size: var(--fs-xs);

src/styles/base/_typo.scss

@@ -317,3 +317,18 @@ blockquote {
     }
   }
 }
+
+/*
+┌──────────────────────────────────┐
+  MISC
+└──────────────────────────────────┘
+*/
+
+.nowrap {
+  white-space: nowrap;
+}
+
+.st {
+  text-decoration: line-through;
+  color: var(--clr-warning);
+}

src/styles/base/_variables.scss

@@ -24,11 +24,20 @@
 
   --clr-bg: hsl(204, 15%, 94%);
   --clr-bg-card: hsl(0, 0%, 100%);
+  --clr-bg-table-odd: hsl(0, 0%, 98%);
+  --clr-bg-table-odd: rgb(0 0 0 / 0.03);
+  --clr-bg-table-placeholder: hsl(124 47% 63% / 0.3);
+
   --clr-line: color-mix(
     in oklab,
     var(--clr-bg) 15%,
     var(--clr-mix-modifier) 15%
   );
+  --clr-table-line: color-mix(
+    in oklab,
+    var(--clr-bg) 15%,
+    var(--clr-mix-modifier) 15%
+  );
 
   --clr-bg-nav: var(--clr-bg-card);
 
@@ -123,7 +132,14 @@
       var(--clr-bg),
       var(--clr-mix-modifier) 10%
     );
+    --clr-bg-table-odd: rgb(0 0 0 / 0.08);
+
     --clr-line: color-mix(in oklab, var(--clr-bg), var(--clr-mix-modifier) 22%);
+    --clr-table-line: color-mix(
+      in oklab,
+      var(--clr-bg),
+      var(--clr-mix-modifier) 16%
+    );
 
     --clr-text: #d9d9d9;
     --clr-text-light: rgba(217, 217, 217, 0.7);

src/styles/components/_content.scss

@@ -73,7 +73,7 @@
         font-weight: var(--fw-bold);
         float: left;
         margin-inline-start: calc(var(--padding-inline) * -1);
-        width: 3ch;
+        inline-size: 3ch;
         text-align: right;
       }
     }