🛠 Update font, fix light mode

src/css/base/elements.css

@@ -38,7 +38,7 @@ h4,
 h5,
 h6 {
   font-family: var(--font-family-head);
-  letter-spacing: 0.04em;
+  letter-spacing: -0.04em;
   line-height: 1.05;
 
   & a {
@@ -67,7 +67,7 @@ a {
   outline: 0;
   color: var(--color-accent);
   text-decoration: none;
-  transition-property: color;
+  transition-property: color, background;
   transition-duration: var(--transition-duration-fast);
 
   &.plain {
@@ -130,6 +130,8 @@ img:-moz-loading {
   background-color: var(--color-accent);
   text-decoration: none;
   border-radius: var(--space-m);
+  transition-property: color, background;
+  transition-duration: var(--transition-duration-fast);
 
   &:hover {
     @media not all and (hover: none) {

src/css/base/fonts.css

@@ -2,3 +2,18 @@
   font-family: 'The Bold Font';
   src: url('../fonts/theboldfont.woff2') format('woff2');
 }
+
+/* https://google-webfonts-helper.herokuapp.com/fonts/noto-sans?subsets=cyrillic,cyrillic-ext,latin */
+@font-face {
+  font-family: 'Noto Sans';
+  font-style: normal;
+  font-weight: 400;
+  src: url('../fonts/noto-sans-400.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: 'Noto Sans';
+  font-style: normal;
+  font-weight: 700;
+  src: url('../fonts/noto-sans-700.woff2') format('woff2');
+}

src/css/base/variables.css

@@ -31,12 +31,10 @@
   --transition-duration-medium: 0.75s;
   --transition-duration-slow: 1.5s;
 
-  --font-family-base: sans-serif;
-  --font-family-head: 'The Bold Font', var(--font-family-base);
+  --font-family-base: 'Noto Sans', sans-serif;
+  --font-family-head: var(--font-family-base);
 
-  --font-weight-light: 300;
   --font-weight-normal: 400;
-  --font-weight-medium: 500;
   --font-weight-bold: 700;
 
   --font-size-base: 18px;

src/css/sections/podcast.css

@@ -13,7 +13,7 @@
       display: inline-block;
       text-align: center;
       padding: var(--space-s) var(--space-l);
-      color: var(--color-neutral-0);
+      color: var(--color-secondary);
       text-decoration: none;
       border-radius: var(--space-xl);
       border: 1px solid var(--color-secondary);
@@ -106,7 +106,7 @@
   & h3 {
     margin-top: var(--space-s);
     font-family: var(--font-family-base);
-    font-weight: var(--font-weight-medium);
+    font-weight: var(--font-weight-bold);
     font-size: var(--font-size-m);
     line-height: 1.2;
   }

src/includes/template.pug

@@ -31,7 +31,8 @@ html(lang="en")
     meta(property="twitter:image" content=assetUrl(pageCard))
     meta(name="msapplication-TileColor" content=themeColor)
     meta(name="theme-color" content=themeColor)
-    link(rel="preload" as="font" crossorigin href=assetPath("/fonts/theboldfont.woff2"))
+    link(rel="preload" as="font" crossorigin href=assetPath("/fonts/noto-sans-400.woff2"))
+    link(rel="preload" as="font" crossorigin href=assetPath("/fonts/noto-sans-700.woff2"))
     link(rel="apple-touch-icon" href=assetPath("/img/einundzwanzig-square.svg"))
     link(rel="icon" href=assetPath("/img/einundzwanzig-square.svg"))
     link(rel="manifest" href="/site.webmanifest")

src/index.pug

@@ -2,8 +2,7 @@ extends /template.pug
 
 block main
   section
+    .lead.centered
     :markdown-it(html linkify typographer)
-      # Start
-      Content
-
       - [Shoutouts](https://tallyco.in/s/zfxqtu/)
+    a.button(href="https://t.me/einundzwanzigpodcast") Komm in die Gruppe!