diff --git a/src/components/Figure.astro b/src/components/Figure.astro index 623ae52..632df3e 100644 --- a/src/components/Figure.astro +++ b/src/components/Figure.astro @@ -67,8 +67,12 @@ if (imagePath !== undefined && !images[imagePath]) { padding-block-end: var(--sp) 0; } - > :is(img, .astro-code) + :where(.astro-code, .snippet) { - margin-block-start: var(--sp); + > :is(.astro-code) { + border: 0; + + &:where(.astro-code, .snippet):not(:first-child) { + margin-block-start: var(--sp); + } } } diff --git a/src/components/Tags.astro b/src/components/Tags.astro index 2643e96..a1c0a0d 100644 --- a/src/components/Tags.astro +++ b/src/components/Tags.astro @@ -1,14 +1,15 @@ --- export interface Props { - tags: string[] + tags?: string[] + preSorted?: { name: string; number: number }[] divider?: boolean } -const { tags, divider } = Astro.props +const { tags, preSorted, divider } = Astro.props const pathname = new URL(Astro.request.url).pathname const currentPath = pathname.split('/').slice(3).join('').trim() -const sortedTags = tags.sort((a, b) => +const sortedTags = tags?.sort((a, b) => a.localeCompare(b, 'de', { sensitivity: 'base' }) ) --- @@ -28,6 +29,23 @@ const sortedTags = tags.sort((a, b) => ) } +{ + preSorted && preSorted.length > 0 && ( + + ) +} + + diff --git a/src/content/snippets/typografie/snippet-relative-font-size.astro b/src/content/snippets/typografie/snippet-relative-font-size.astro index 93043ba..7e12236 100644 --- a/src/content/snippets/typografie/snippet-relative-font-size.astro +++ b/src/content/snippets/typografie/snippet-relative-font-size.astro @@ -1,31 +1,5 @@ --- import Snippet from '@components/Snippet.astro' -import { codeToHtml } from 'shiki' - -const code = await codeToHtml('foo\bar', { - lang: 'js', - theme: 'vitesse-light', - transformers: [ - { - code(node) { - this.addClassToHast(node, 'language-js') - }, - line(node, line) { - node.properties['data-line'] = line - if ([1, 3, 4].includes(line)) this.addClassToHast(node, 'highlight') - }, - span(node, line, col) { - node.properties['data-token'] = `token:${line}:${col}` - } - } - ] -}) - -// const codeBlock = document.querySelector('#code') - -// if (codeBlock) { -// codeBlock.innerHTML = code -// } --- diff --git a/src/content/tutorials/absolute-und-relative-einheiten.mdx b/src/content/tutorials/absolute-und-relative-einheiten.mdx new file mode 100644 index 0000000..d867d5b --- /dev/null +++ b/src/content/tutorials/absolute-und-relative-einheiten.mdx @@ -0,0 +1,157 @@ +--- +title: 'Längenmaße: Absolute und relative Einheiten in CSS' +description: 'Die Größe von Elementen kann in absoluten oder relativen Einheiten angegeben werden. Hier erfährst du, welche Einheiten es gibt und wann du welche verwenden solltest.' +isDraft: false +pubDate: 2024-10-17T15:40:00+00:00 +author: david-maciejewski +cover: + path: '/src/images/tutorials/jahrmarkt-aepfel.png' + alt: 'Zwei Stundeniernde blicken fragend in Richtung Kamera.' + caption: 'Wie viele Äpfel kaufst du auf dem Markt? 12 oder 50 Prozent aus der Box?' +tags: ['css'] +--- + +import Figure from '@components/Figure.astro' +import Table from '@components/Table.astro' + +import SnippetNestedBoxes from '@snippets/relative-units/snippet-nested-boxes.astro' + +## Unterschiede + +Jede CSS-Deklaration enthält ein Paar aus Eigenschaft und Wert. Bei Längen- oder Größenangaben von HTML-Elementen werden numerische Werte verwendet, entweder als ganze Zahl oder als Dezimalzahl: + +
+```css +.box { + width: 512px; + font-size: 1.5em; +} +``` +
+ +Wenn du dem Verkäufer auf dem Jahrmarkt bittest, dir 12 Äpfel zu verkaufen, dann ist das ein absoluter Wert. Wenn du dir hingegen die Hälfte der Äpfel aus der Kiste nimmst, dann ist das ein relativer Wert, abhängig von der Gesamtanzahl. + +Auch in CSS gibt es absolute und relative Werte. Ein Beispiel: Der Bildschirm des Apple-Tablets iPad hat Pixelmaße von 1024x768. Möchtest du jetzt zwei Boxen nebeneinander darstellen und verwendest dabei fixe Werte wie `width: 512px`, dann wird dir das auf dem Smartphone um die Ohren fliegen. Zum einen sind die Dimensionen des Smartphones kleiner, zum anderen wird die Box auf dem iPad nicht nebeneinander dargestellt, weil der Platz nicht ausreicht. + +Wenn du hingegen relative Einheiten wie Prozente (z.B. `width: 50%`) verwendest, dann passt sich die Box immer an die Größe des Elternelements[^1] an. Und das wiederum passt sich an die Größe des eigenen Elternelements an. Das geht so lang weiter bis zum obersten Element, dem Root-Elements[^2] `html`. Das ist im Übrigen 100 % des Viewport[^3] breit, also der Breite des Bildschirms. Das folende responsive Beispiel illustriert das: + +
+ +
+ +## Relative Einheiten + +Die relativen Einheiten unterteilen sich in verschiedene Kategorien, abhängig von dem, woran du dich orientieren möchtest. Die gebräuchlichste Kategorie ist die der [relativen Schriftlängen](#relative-schriftlängen). Hierbei beziehen sich die Einheiten auf die Schriftgröße des Elternelements. + +### Relative Schriftlängen + +Neben der Angabe in Prozent, die du bereits schon kenngelernt hast, gibt es auch noch folgende Einheiten: + + +| Einheit | Relativ zu | +|---------|--------------| +| `em` | Schriftgröße des Elternelements | +| `cap` | Höhe der Großbuchstaben | +| `ch` | Breite des Zeichens `0` | +| `ex` | Höhe des Buchstabens `x` | +| `lh` | Zeilenhöhe eines Elements | +
+ +`em` ist dabei die gebräuchliste Einheit. Sie bezieht sich auf die Schriftgröße des Elternelements. `1em` entspricht 100 %, 150 % wären dann `1.5em`. Schauen wir uns exemplarisch das folgende Beispiel an. + +In der Box soll der Fließtext 18 Pixel groß sein, also etwas größer als der Fließtext der anderen Elemente auf der Website. Die Überschrift soll 150 % der Schriftgröße unserer Box betragen. + +
+ ```html +
+

Bekanntmachung

+ + Wir treffen uns Freitags in Haus E, Raum 08 (HIWEE08). +
+ ``` + ```css + .announcement { font-size: 18px; } + .announcement h2 { font-size: 1.5em; } + ``` +
+ +Die Überschrift entspräche umgerechnet `27px`. Die Formel dazu lautet: `18px * 1,5 = 27px`. + +### Relativ zum Root-Element + +Wenn du die 18 Pixel der Announcement-Box vom Beispiel oben ebenfalls relativ angeben möchtest, und das solltest du, dann kannst du das auch mit `em` tun. Der Haken an der Sache: Wenn du in die Announcement-Box eine weitere Announcement-Box einfügst, dann orientiert sich die zweite an der ersten Box. Desto mehr Boxen du ineinander verschachtelst, desto größer wird jeweils die Schrift. Während `1.5em` in der ersten Box 27 Pixel entsprechen, entsprechen `1.5em` in der zweiten Box 40.5 Pixel. + +Klingt kompliziert und ist es auch. Besser wäre es, die Einheit `rem` zu verwenden. Das **r** in `rem` steht für **root** und bezieht sich dabei auf das Root-Element. Der Browser gibt vor, dass die Standardgröße für Fließtext **16 Pixel** groß ist, kann aber auch vom User in den Einstellungen verändert werden. + +Noch einmal zusammengefasst: + +em +: Die relative Einheit `em` bezieht sich auf die Schriftgröße des Elternelements. `1em` entsprechen 100 %, 150 % wären dann `1.5em`. + +rem +: Die relative Einheit `rem` bezieht sich auf die Schriftgröße des `html`- oder `body`-Elements, das sind in der Regel `16px`. Das **r** in `rem` steht für **root**. + +Der angepasste Code sieht dann so aus: + +
+ ```css + .announcement { font-size: 1.125rem; } + .announcement h2 { font-size: 1.688rem; } + ``` +
+ +Hier einmal eine Gegenüberstellung unserer Announcement-Box, bei der wir (umgerechneet) 18 statt 16 Pixel verwenden: + + +| Faktor | `em` entsprechen | `rem` entsprechen | +|------|------|------| +| 0.5 | `9px` | `8px` | +| 1 | `18px` | `16px` | +| 1.25 | `22.5px` | `20px` | +| 2 | `36px` | `32px` | +| 3.75 | `67.5px` | `60px` | +
+ +Übrigens gibt auch von `cap`, `ch`, `ex` und `lh` eine Variante, die sich auf das Root-Element bezieht. Diese haben dann ein `r` vorangestellt, also `rch` statt `ch`. + +> Unter [Assets](/assets#typografie) habe ich dir ein paar Links zu Tools interlegt, mit denen du die Größen berechnen kannst. + +### Relativ zum Viewport + +Der Vollständigkeit halber möchte ich noch die Einheiten erwähnen, die sich auf den Viewport und auf den Container beziehen. Das ist für dich am Anfang noch nicht sonderlich relevant, du wirst aber früher oder später in komplexeren Layouts darüber stolpern. + + +| Einheit | Relativ zu | +|---------|--------------| +| `vh` | 1 % der Höhe des Viewports | +| `dvh` | 1 % der dynamischen[^4] Höhe des Viewports | +| `vw` | 1 % der Breite des Viewports | +| `dvw` | 1 % der dynamischen[^4] Breite des Viewports | +| `vmin` | 1 % des kleineren Wertes des Viewports (Breite oder Höhe) | +| `vmax` | 1 % des größeren Wertes des Viewports (Breite oder Höhe) | +
+ +### Relativ zum Container + +Längen, die sich auf einen Query-Container[^5] beziehen, sind: + + +| Einheit | Relativ zu | +|---------|--------------| +| `cqb` | 1 % der Block-Größe des Query-Containers | +| `cqh` | 1 % der Höhe des Query-Containers | +| `cqi` | 1 % der Inline-Größe des Query-Containers | +| `cqw` | 1 % der Breite des Query-Containers | +| `cqmin` | 1 % des kleineren Wertes des Query-Containers (Breite oder Höhe) | +| `cqmax` | 1 % des größeren Wertes des Query-Containers (Breite oder Höhe) | +
+ +## Aufgabe + +Um die relative Einheiten besser zu verstehen, probiere doch einmal, die Announcement-Box mit den oberen CSS nachzubauen. Verwende erst `px` und `em` und teste das Ergebnis im Browser durch Verkleinern und Vergrößern des Fensters. Anschließend ersetze die Einheiten durch `rem` und beobachte den Unterschied. + +[^1]: Das Elternelement ist das übergeordnete Element, in dem ein anderes Element eingebettet ist. Es kann auch als Container bezeichnet werden. +[^2]: Das Root-Element ist das oberste Element in der Hierarchie des DOM-Baums, also das ``-Element. +[^3]: Der Viewport ist der sichtbare Bereich einer Website im Browserfenster. Er kann sich je nach Gerät und Bildschirmauflösung unterscheiden. +[^4]: Die dynamische Höhe und Breite des Viewports beziehen sich stets auf die aktuelle Größe des Viewports, also die Größe, die der Viewport gerade hat. Diese verändert sich zum Beispiel durch Scrollbalken oder die Adressleiste des Browsers. +[^5]: Container-Queries erlauben es, die Größe von Elementen an die Größe ihres Containers anzupassen und nicht an die des Viewports. \ No newline at end of file diff --git a/src/content/tutorials/schriften-abstaende-ligaturen-und-layout.mdx b/src/content/tutorials/schriften-abstaende-ligaturen-und-layout.mdx index 925591d..ded495b 100644 --- a/src/content/tutorials/schriften-abstaende-ligaturen-und-layout.mdx +++ b/src/content/tutorials/schriften-abstaende-ligaturen-und-layout.mdx @@ -1,8 +1,8 @@ --- -title: 'Typografie im Web: Schriften, Abstände, Ligaturen und Layout' +title: 'Typografie im Web: Schriften, Abstände, Ligaturen im Layout' description: 'Kleine Details in der Typografie und Layout können den Unterschied machen. Hier lernst du, wie du deine Website mit Text gestalten kannst.' isDraft: true -pubDate: 2024-10-15T15:08:00+01:00 +pubDate: 2024-12-08T15:12:00+01:00 author: david-maciejewski cover: path: '/src/images/tutorials/airport-terminal-sign.jpg' @@ -21,7 +21,7 @@ import SnippetLigatures from '@snippets/typografie/snippet-ligatures.astro' ## Mit Texten gestalten -Im [ersten Teil](/tutorials/grundlagen-der-mikrotypografie) der Serie „Typografie im Web“ haben wir einen Blick in die Historie der Typografie geworfen, den Begriff der Maktrotypografie erörtert und gelernt, wie man Texte korrekt formatiert. Da die Grundlagen damit gelegt sind, widmen wir uns in diesem Tutorial um die Gestaltung dieser Texte im Layout deiner Website. +Im [ersten Teil](/tutorials/grundlagen-der-mikrotypografie) der Serie „Typografie im Web“ haben wir einen Blick in die Historie der Typografie geworfen, den Begriff der Maktrotypografie erörtert und gelernt, wie man Texte korrekt formatiert. Da die Grundlagen damit gelegt sind, können wir uns in diesem Tutorial nun um die Gestaltung dieser Texte im Layout deiner Website kümmern. > **Hinweis:** Falls du das Tutorial [Grundlagen der Mikrotypografie](/tutorials/grundlagen-der-mikrotypografie) noch nicht gelesen hast, empfehle ich dir, dies nachzuholen. @@ -33,14 +33,14 @@ Unter dem Schriftbild versteht man die Gesamtheit der optischen Erscheinung eine Heute erhalten Fließtext und Überschriften oft unterschiedliche Schriftarten. Beispielsweise könntest du für den Fließtext eine serifenlose Schriftart (Sans Serif) wie „Open Sans“ im Schriftschnitt 400 und für Überschriften eine serifenbetonte Schriftart wie „Merriweather“ (Serif) im Schriftschnitt 500 verwenden. Das sähe dann so aus: -
+
```css body { font-family: 'Open Sans', sans-serif; font-weight: 400; } - :where(h1, h2, h3, h4) { + :is(h1, h2, h3, h4) { font-family: 'Merriweather', serif; font-weight: 500; } @@ -48,39 +48,43 @@ Heute erhalten Fließtext und Überschriften oft unterschiedliche Schriftarten.
-> **Tipp:** Ich zeige dir im Tutorial [So bindest du Schriftarten in deine Website ein](/tutorials/webfonts-schriften-einbinden) Schritt für Schritt, wie du Webfonts technisch einbindest. +> **Tipp:** Im Tutorial [So bindest du Schriftarten in deine Website ein](/tutorials/webfonts-schriften-einbinden) zeige ich dir Schritt für Schritt, wie du Webfonts einbinden kannst, um sie dann wie oben deklareiren zu können. ### Schriftgröße -Die Standardgröße für Fließtext im Browser ist vorgegeben und beträgt `16px` (Pixel). Dieser Wert kann von den Usern in den Einstellungen überschrieben werden. Das tun sie nicht böswillig, um dein fein austariertes Design zu ruinieren, sondern um die Lesbarkeit der Texte zu erhöhen. Vielleicht haben die Besucher schlechte Augen, sitzen in einem Büro, auf dem die Sonne direkt auf den Monitor scheint, oder sie bevorzugen einfach eine größere Schrift. +Die Standardgröße für Fließtext im Browser ist vorgegeben und beträgt `16px` (Pixel) beim `html`-Element. Dieser Wert kann von den Usern in den Einstellungen überschrieben werden. -Lass deine Website nicht „in Schönheit sterben“, entscheide dich im Zweifelsfall lieber für eine größere statt kleinere Schriftgröße. Daher empfehle ich dir, die 16 Pixel nicht zu unterschreiten, da der Text sonst zu klein und schwer lesbar ist. Für mobile Geräte empfehle ich sogar 18 Pixel, für Tablets und Desktop-Monitore 20 oder gar 22 Pixel, da hier der Abstand vom Auge zum Bildschirm größer ist. +Wenn du die Schriftgröße in fixen Pixeln festlegst, wirkt sich das allerdings negativ auf die Skalierbarkeit und damit auf die Zugänglichkeit der Website aus. Damit sich die Schriftgröße an äußere Bedingenungen anpassen kann, solltest du relative Einheiten wie `em` oder `rem` verwenden. #### Relative Schriftgrößen -Wenn du die Schriftgröße in Pixeln festlegst, wirkt sich das negativ auf die Skalierbarkeit und damit auf die Zugaänglichkeit der Website aus. Damit sich die Schriftgröße an äußere Bedingenungen anpassen kann, solltest du relative Einheiten wie `em` oder `rem` verwenden. `em` bezieht sich auf die Schriftgröße des Elternelements, während `rem` sich auf die Schriftgröße des `html`-Elements bezieht, also den voreingestellten Wert von `16px`. +em +: Die relative Einheit `em` bezieht sich auf die Schriftgröße des Elternelements. `1em` entsprechen 100 %, 150 % wären dann `1.5em`. -Sofern nicht anders festgelegt, entspricht `1em` im Fließtext `16px`, während `1em` bei einer `h1`-Überschrift `24px` entspricht. Anders sieht es bei `rem` aus: Hier entspricht `1rem` immer `16px`, es sei denn, du änderst auch das. Hier ein Beispiel: +rem +: Die relative Einheit `rem` bezieht sich auf die Schriftgröße des `html`- oder `body`-Elements, also den voreingestellten Wert von `16px`. Das **r** in `rem` steht für **root**. -| Gerätekategorie | Empfohlene Schriftgröße | Relativ zu `16px` | -|--------------|--------------|----| -| Mobile | `18px` | `1.125rem` | -| Tablet | `20px` | `1.25rem` | -| Desktop | `22px` | `1.375rem` | +Schauen wir uns exemplarisch folgendes Beispiel an. In der Box soll der Fließtext 18 Pixel groß sein, also etwas größer als der Fließtext der anderen Elemente auf der Website. Die Überschrift soll 150 % der Schriftgröße unserer Box betragen. -Wenn du möchtest, dass sich die Überschrift relativ zum Fließtext verhält, solltest du `em` verwenden. Vergrößerst du die Schriftgröße des Fließtextes, vergrößert sich auch die Schriftgröße der Überschrift. Hier eine interaktive Demo: +
+ ```html +
+

Bekanntmachung

-
+ Wir treffen uns Freitags in Haus E, Raum 08 (HIWEE08). +
+ ``` ```css - html { font-size: 16px; } - body { font-size: 1rem; } - - .headline { font-size: 2em; } + .announcement { font-size: 18px; } + .announcement h2 { font-size: 1.5em; } ``` - -
+Die Überschrift entspräche umgerechnet `27px`. Die Formel dazu lautet: `18px * 150 / 100 = 27px`. + +Wenn wir allerdings möchten, dass alle Überschriften, unabhängig davon, wo sie sich befinden, die gleiche Schriftgröße haben, sollten wir die Einheit `rem` verwenden: `1.5rem` wären dann `24px`. Die Formel: `16px * 150 / 100 = 24px`. + +> Unter [Assets](/assets#typografie) habe ich dir ein paar Links zu Tools interlegt, mit denen du die Größen berechnen kannst. #### Dynamische Schriftgrößen @@ -96,6 +100,18 @@ body { Die Berechnung der Schriftgröße erfolgt wie folgt: `1rem` (16px) ist die Mindestgröße, `1vw + 0.7rem` ist die dynamische Größe und `1.25rem` (20px) ist die Maximalgröße. Die Schriftgröße passt sich also zwischen 1rem und 1.25rem an die Bildschirmgröße an. Auf der Seite [Assets](/assets#typografie) habe ich dir ein paar Links zu Tools interlegt, mit denen du die Größen berechnen kannst. Das konkrete Beispiel hier habe ich [hier](https://modern-fluid-typography.vercel.app?rootFontSize=16&minSize=16&fluidSize=1&relativeSize=0.7&maxSize=20) berechnet. +#### Empfehlung + +Wie oben erwähnt, können Nutzer die Standard-Schriftgröße in den Einstellungen ihres Browsers anpassen. Das tun sie nicht böswillig, um dein fein austariertes Design zu ruinieren, sondern um die Lesbarkeit der Texte zu erhöhen, aus welchen legitimen Gründen auch immer. + +Lass deine Website nicht „in Schönheit sterben“, entscheide dich im Zweifelsfall lieber für eine größere statt kleinere Schriftgröße. Daher empfehle ich dir, die 16 Pixel nicht zu unterschreiten, da der Text sonst zu klein und schwer lesbar ist. Für mobile Geräte empfehle ich sogar 18 Pixel, für Tablets und Desktop-Monitore 20 oder gar 22 Pixel, da hier der Abstand vom Auge zum Bildschirm größer ist. + +| Gerätekategorie | Empfohlene Schriftgröße | Relativ zu `16px` | +|--------------|--------------|----| +| Mobile | `18px` | `1.125rem` | +| Tablet | `20px` | `1.25rem` | +| Desktop | `22px` | `1.375rem` | + ### Textrendering Die Schriftqualität kann durch das Textrendering beeinflusst werden. Mit dem CSS-Attribut `text-rendering` kannst du festlegen, wie der Text gerendert werden soll. Die möglichen Werte sind: `auto`, `optimizeSpeed`, `optimizeLegibility` und `geometricPrecision`. Diese Eigenschaft ist eigentlich eine für SVG-Elemente, allerdings sind die Browser auch so tolerant, dass du sie auch bei Text anwenden kannst. diff --git a/src/images/tutorials/jahrmarkt-aepfel.png b/src/images/tutorials/jahrmarkt-aepfel.png new file mode 100644 index 0000000..b1d1aed Binary files /dev/null and b/src/images/tutorials/jahrmarkt-aepfel.png differ diff --git a/src/images/tutorials/students-sitting-in-front-of-a-monitor.png b/src/images/tutorials/students-sitting-in-front-of-a-monitor.png new file mode 100644 index 0000000..235fd8f Binary files /dev/null and b/src/images/tutorials/students-sitting-in-front-of-a-monitor.png differ diff --git a/src/images/tutorials/woman-grabbing-apples.png b/src/images/tutorials/woman-grabbing-apples.png new file mode 100644 index 0000000..e16a7ba Binary files /dev/null and b/src/images/tutorials/woman-grabbing-apples.png differ diff --git a/src/pages/assets.mdx b/src/pages/assets.mdx index 4fde0e0..9af31a2 100644 --- a/src/pages/assets.mdx +++ b/src/pages/assets.mdx @@ -127,11 +127,11 @@ Assets solltest du immer optimieren, bevor du diese in deiner Website verwendest [SVGWIZ](https://svgwiz.com/) : Konvertiert SVG in CSS-Data-URIs, um diese als Hintergrundgrafik verwenden zu können. +### Typografie + [PX to REM Converter](https://nekocalc.com/px-to-rem-converter) : Du möchtest `rem` statt `px` verwenden? Dann ist dieser Converter genau richtig für dein Design. -### Typografie - [Fluid Type Scale Calculator](https://www.fluid-type-scale.com/) : Generiert `font-size`-Variablen für die Verwendung von CSS `clamp()`. diff --git a/src/pages/tutorials/[...page].astro b/src/pages/tutorials/[...page].astro index b23ba9f..e51229b 100644 --- a/src/pages/tutorials/[...page].astro +++ b/src/pages/tutorials/[...page].astro @@ -2,11 +2,9 @@ import { getCollection } from 'astro:content' import type { CollectionEntry } from 'astro:content' import BaseLayout from '@layouts/BaseLayout.astro' -import { widont } from '@plugins/remark-widont.mjs' import { formatTitle } from '@plugins/remark-widont.mjs' import ArticleCard from '@components/ArticleCard.astro' import Pagination from '@components/Pagination.astro' -import Lead from '@components/Lead.astro' import Button from '@components/Button.astro' const { page } = Astro.props @@ -47,11 +45,8 @@ export async function getStaticPaths({ paginate }: any) {
-

- Die Tutorials sind nach Veröffentlichungsdatum sortiert. -

- Siehe dir die Lernpfade an. Dort bauen die Tutorials - aufeinander auf. + Die Tutorials sind nach Veröffentlichungsdatum sortiert. In den{' '} + Lernpfaden bauen die Tutorials aufeinander auf.
diff --git a/src/pages/tutorials/lernpfade/[...slug].astro b/src/pages/tutorials/lernpfade/[...slug].astro index ed09673..e07c50d 100644 --- a/src/pages/tutorials/lernpfade/[...slug].astro +++ b/src/pages/tutorials/lernpfade/[...slug].astro @@ -36,7 +36,7 @@ const collection = (related ?? []).map((slug: string) => {
Lernpfade sind kuratierte Tutorials in einer aufeinander aufbauenden Reihenfolge. Nach Datum sortierenListe aller Tutorials
diff --git a/src/pages/tutorials/tags/index.astro b/src/pages/tutorials/tags/index.astro index 43e552d..28fa855 100644 --- a/src/pages/tutorials/tags/index.astro +++ b/src/pages/tutorials/tags/index.astro @@ -25,5 +25,5 @@ export const layout = 'wide' - + diff --git a/src/styles/base/_typo.scss b/src/styles/base/_typo.scss index ca961b5..ffcf1ce 100644 --- a/src/styles/base/_typo.scss +++ b/src/styles/base/_typo.scss @@ -137,7 +137,8 @@ small { └──────────────────────────────────┘ */ -code { +code, +.code { display: inline-block; font-family: var(--ff-code); font-size: 0.95em; @@ -153,6 +154,7 @@ code { padding-inline: var(--sp); border-radius: var(--radius); overflow: hidden !important; + border: 1px solid var(--clr-line); code { display: block; diff --git a/src/styles/base/_variables.scss b/src/styles/base/_variables.scss index 0797148..b8986f4 100644 --- a/src/styles/base/_variables.scss +++ b/src/styles/base/_variables.scss @@ -46,7 +46,7 @@ --clr-shade: #cfd8dc; --clr-text: rgb(15, 23, 42); --clr-text-light: rgba(15, 23, 42, 0.7); - --clr-text--code: #1976d2; + --clr-text-code: #1976d2; --clr-inverse: hsl(0, 0%, 100%); --clr-section: hsl(0 0% 100% / 0.5); --clr-header: rgba(6, 13, 18, 0.8);