feat: New Tutorial and Snippets

macx · May 6, 2024 · c7b631a · c7b631a
1 parent a48b1fa
commit c7b631a
Show file tree

Hide file tree

Showing 11 changed files with 674 additions and 1 deletion.
diff --git a/src/components/Figure.astro b/src/components/Figure.astro
@@ -67,7 +67,7 @@ if (imagePath !== undefined && !images[imagePath]) {
       padding-block-end: var(--sp) 0;
     }
 
-    > :is(img, .astro-code) + .astro-code {
+    > :is(img, .astro-code) + :where(.astro-code, .snippet) {
       margin-block-start: var(--sp);
     }
   }

diff --git a/src/components/Snippet.astro b/src/components/Snippet.astro
@@ -0,0 +1,81 @@
+---
+interface Props {
+  title?: string
+}
+
+const { title = 'Ergebnis' } = Astro.props
+---
+
+<section class='snippet'>
+  <div class='sn-title'># {title}</div>
+
+  <slot name='settings' />
+
+  <slot />
+</section>
+
+<style>
+  @scope (.snippet) {
+    :scope {
+      --sn-clr-bg: #24292e;
+      --sn-clr-text: #e1e4e8;
+
+      display: block;
+      background-color: var(--sn-clr-bg);
+      color: var(--sn-clr-text);
+      border-radius: var(--radius);
+      padding-block: var(--sp-s);
+      padding-inline: var(--sp);
+      font-size: var(--fs);
+
+      .sn-title {
+        display: block;
+        font-family: var(--ff-code);
+        font-size: var(--fs-xs);
+        color: var(--clr-code-title);
+        line-height: 1;
+        margin-block: 3em var(--sp-s);
+        text-transform: uppercase;
+
+        &:first-child {
+          margin-block-start: 0;
+        }
+      }
+
+      .sn-element {
+        background-color: var(--clr-primary);
+        color: var(--clr-inverse);
+        border: 1px solid rgb(255 255 255 / 0.3);
+        border-radius: var(--radius);
+        padding: 0.3em 0.6em;
+
+        &:has(.sn-element) & {
+          background-color: rgb(0 0 0 / 0.2);
+        }
+      }
+
+      .sn-image {
+        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400' preserveAspectRatio='none'%3E%3Cpath d='m0 0 400 400M400 0 0 400' stroke='%23fff' stroke-width='2px' stroke-opacity='0.5'/%3E%3C/svg%3E");
+        background-repeat: no-repeat;
+        background-size: 100% 100%;
+      }
+
+      .sn-settings {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        margin-block-end: var(--sp);
+
+        .sn-value {
+          display: flex;
+          align-items: center;
+          gap: 1ch;
+        }
+      }
+
+      html[data-theme='dark'] & {
+        background-color: rgba(0, 0, 0, 0.5);
+      }
+    }
+  }
+</style>
diff --git a/src/content/snippets/layout-in-css/snippet-columns.astro b/src/content/snippets/layout-in-css/snippet-columns.astro
@@ -0,0 +1,50 @@
+---
+import Snippet from '@components/Snippet.astro'
+---
+
+<Snippet>
+  <div class='demo-columns sn-element'>
+    <div class='sn-element title'>Mehrspaltiges Layout</div>
+
+    <p class='sn-element'>
+      Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora ratione,
+      officia natus consectetur illo distinctio. Aperiam nisi, dolor nobis,
+      expedita.
+    </p>
+
+    <p class='sn-element'>
+      Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora ratione,
+      officia natus consectetur illo distinctio. Aperiam nisi, dolor nobis,
+      expedita natus.
+    </p>
+
+    <p class='sn-element'>
+      Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora ratione,
+      officia natus consectetur illo distinctio. Aperiam nisi, dolor nobis,
+      expedita illo et earum beatae repudiandae modi inventore ullam dolorem
+      sint.
+    </p>
+  </div>
+</Snippet>
+
+<style>
+  @scope (.demo-columns) {
+    :scope {
+      column-width: 20ch;
+
+      .title {
+        font-size: 1.25em;
+        font-weight: bold;
+        margin-block-end: 1rem;
+      }
+
+      p {
+        text-wrap: pretty;
+
+        &:last-child {
+          margin-block-end: 0;
+        }
+      }
+    }
+  }
+</style>
diff --git a/src/content/snippets/layout-in-css/snippet-flexbox.astro b/src/content/snippets/layout-in-css/snippet-flexbox.astro
@@ -0,0 +1,21 @@
+---
+import Snippet from '@components/Snippet.astro'
+---
+
+<Snippet>
+  <div class='demo-header sn-element'>
+    <div class='sn-element'>Logo</div>
+    <div class='sn-element'>Navigation</div>
+  </div>
+</Snippet>
+
+<style>
+  @scope (.demo-header) {
+    :scope {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 0;
+    }
+  }
+</style>
diff --git a/src/content/snippets/layout-in-css/snippet-float.astro b/src/content/snippets/layout-in-css/snippet-float.astro
@@ -0,0 +1,41 @@
+---
+import Snippet from '@components/Snippet.astro'
+---
+
+<Snippet>
+  <div class='demo-float sn-element'>
+    <div class='sn-element sn-image image'>Bild</div>
+
+    <p class='sn-element'>
+      Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora ratione,
+      officia natus consectetur illo distinctio. Aperiam nisi, dolor nobis,
+      expedita.
+    </p>
+    <p class='sn-element'>
+      Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora ratione,
+      officia natus consectetur illo distinctio. Aperiam nisi, dolor nobis,
+      expedita illo et earum beatae repudiandae modi inventore ullam dolorem
+      sint.
+    </p>
+  </div>
+</Snippet>
+
+<style>
+  @scope (.demo-float) {
+    :scope {
+      .image {
+        float: left;
+        display: grid;
+        place-items: center;
+        block-size: 100px;
+        aspect-ratio: 1 / 1;
+        margin-inline-end: 1rem;
+        border-radius: 50%;
+      }
+
+      p:last-child {
+        margin-block-end: 0;
+      }
+    }
+  }
+</style>
diff --git a/src/content/snippets/layout-in-css/snippet-flow.astro b/src/content/snippets/layout-in-css/snippet-flow.astro
@@ -0,0 +1,31 @@
+---
+import Snippet from '@components/Snippet.astro'
+
+interface Props {
+  title?: string
+}
+
+const { title } = Astro.props
+---
+
+<Snippet title={title}>
+  <div class='blocks'>
+    Text davor
+    <div class='sn-element'><code set:html='<div>' /> #1</div>
+    Text danach
+    <div class='sn-element'><code set:html='<div>' /> #2</div>
+    <div class='sn-element'><code set:html='<div>' /> #3</div>
+    <div class='sn-element'><code set:html='<div>' /> #4</div>
+  </div>
+
+  <div class='sn-title'># Inline-Elemente</div>
+
+  <div class='inlines'>
+    Text davor
+    <span class='sn-element'><code set:html='<span>' /> #1</span>
+    Text danach
+    <span class='sn-element'><code set:html='<span>' /> #2</span>
+    <span class='sn-element'><code set:html='<span>' /> #3</span>
+    <span class='sn-element'><code set:html='<span>' /> #4</span>
+  </div>
+</Snippet>
diff --git a/src/content/snippets/layout-in-css/snippet-grid-flex.astro b/src/content/snippets/layout-in-css/snippet-grid-flex.astro
@@ -0,0 +1,77 @@
+---
+import Snippet from '@components/Snippet.astro'
+---
+
+<Snippet title='Interaktive Demo'>
+  <Fragment slot='settings'>
+    <div class='sn-settings'>
+      <div class='sn-value'>
+        <label for='el-size-input'>Mindestbreite:</label>
+        <input
+          type='range'
+          name='size'
+          id='el-size-input'
+          min='100'
+          max='350'
+          step='50'
+          value='200'
+          list='el-size-markers'
+        />
+        <span>
+          <output id='el-size-output'>200</output>px
+        </span>
+
+        <datalist id='el-size-markers'>
+          <option value='100'></option>
+          <option value='150'></option>
+          <option value='200'></option>
+          <option value='250'></option>
+          <option value='300'></option>
+          <option value='350'></option>
+        </datalist>
+      </div>
+    </div>
+  </Fragment>
+
+  <Fragment>
+    <div class='demo-grid-flex sn-element' style='--min: 200px'>
+      <div class='sn-element'>#1</div>
+      <div class='sn-element'>#2</div>
+      <div class='sn-element'>#3</div>
+      <div class='sn-element'>#4</div>
+      <div class='sn-element'>#5</div>
+      <div class='sn-element'>#6</div>
+    </div>
+  </Fragment>
+</Snippet>
+
+<style>
+  @scope (.demo-grid-flex) {
+    :scope {
+      --min: var(--min, 200px);
+
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(var(--min), 1fr));
+      gap: 0.6em;
+
+      input {
+        cursor: pointer;
+      }
+    }
+  }
+</style>
+
+<script is:inline>
+  ;(function () {
+    const snGridFlexInput = document.querySelector('#el-size-input')
+    const snGridFlexOnput = document.querySelector('#el-size-output')
+    const flexContainer = document.querySelector('.demo-grid-flex')
+
+    snGridFlexOnput.textContent = snGridFlexInput.value
+
+    snGridFlexInput.addEventListener('input', (event) => {
+      snGridFlexOnput.textContent = event.target.value
+      flexContainer.style.setProperty('--min', `${event.target.value}px`)
+    })
+  })()
+</script>
diff --git a/src/content/snippets/layout-in-css/snippet-grid-layout.astro b/src/content/snippets/layout-in-css/snippet-grid-layout.astro
@@ -0,0 +1,28 @@
+---
+import Snippet from '@components/Snippet.astro'
+---
+
+<Snippet>
+  <div class='demo-grid sn-element'>
+    <div class='sn-element'>#1</div>
+    <div class='sn-element'>#2</div>
+    <div class='sn-element'>#3</div>
+    <div class='sn-element'>#4</div>
+    <div class='sn-element wide'>#5</div>
+  </div>
+</Snippet>
+
+<style>
+  @scope (.demo-grid) {
+    :scope {
+      display: grid;
+      grid-template-columns: 1fr 1fr 1fr;
+      grid-template-rows: 1fr 100px;
+      gap: 0.6em;
+
+      .wide {
+        grid-column: span 2;
+      }
+    }
+  }
+</style>