New Links

Author: macx

assets/styles/base/layout.scss

@@ -174,6 +174,20 @@ HELPER
 └──────────────────────────────────┘
 */
 
+.new {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  background-color: var(--clr-text);
+  color: var(--clr-inverse);
+  font-size: var(--font-size--xsmall);
+  margin-left: 0.5em;
+  padding: 0.2em 0.5em 0;
+  border-radius: var(--border-radius);
+  cursor: default;
+  user-select: none;
+}
+
 @for $i from 1 through 4 {
   .bgs-#{$i} {
     background-color: var(--clr-play-#{$i});

content/links/index.md

@@ -142,6 +142,10 @@ Du brauchst Code-Beispiele? Gern, hier sind die, die ich gebaut habe. Die sind a
   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.
+- [Variable Fonts](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide){{< new >}}\
+  Font-Spezifikation, um statt mehrere Schriftschnitte nur einen (variablen) Font zu verwenden.
+- [Can I use](https://caniuse.com/){{< new >}}\
+  Zeigt den Unterstützung von Front-end-Technologien bei den Browsern.
 
 ### Schnell gelernt
 

layouts/shortcodes/new.html

@@ -0,0 +1 @@
+<span class="new">NEU</span>