🛠 Podcast and Team pages

src/css/base/elements.css

@@ -38,46 +38,55 @@ h4,
 h5,
 h6 {
   font-family: var(--font-family-head);
+  letter-spacing: 0.04em;
   line-height: 1.05;
 
   & a {
-    color: currentColor;
+    color: inherit;
     text-decoration: none !important;
   }
 }
 
 h1 {
-  font-size: var(--font-size-xxxl);
-}
-
-h2 {
   font-size: var(--font-size-xxl);
 }
 
-h3 {
+h2 {
   font-size: var(--font-size-xl);
 }
 
+h3 {
+  font-size: var(--font-size-l);
+}
+
 h4, h5, h6 {
   font-size: var(--font-size-m);
 }
 
 a {
   outline: 0;
-  color: inherit;
-  text-decoration: underline;
-  transition-property: background, color;
+  color: var(--color-accent);
+  text-decoration: none;
+  transition-property: color;
   transition-duration: var(--transition-duration-fast);
 
+  &.plain {
+    color: inherit;
+  }
+
   &:hover {
     @media not all and (hover: none) {
-      color: var(--color-accent);
-      text-decoration: underline;
+      color: var(--color-accent-highlight);
+      text-decoration: none;
+
+      &.plain {
+        color: var(--color-accent);
+      }
     }
   }
 
   & svg {
-    transition-property: background, color;
+    transition-property: color;
     transition-duration: var(--transition-duration-fast);
   }
 }
@@ -87,7 +96,7 @@ p {
 }
 
 ul {
-  margin-left: var(--space-m);
+  margin-left: 1rem;
   margin-bottom: var(--space-l);
 }
 
@@ -112,3 +121,21 @@ img:-moz-loading {
 [aria-hidden="true"] {
   display: none;
 }
+
+.button {
+  display: inline-block;
+  text-align: center;
+  padding: var(--space-m) var(--space-l);
+  color: var(--color-neutral-0);
+  background-color: var(--color-accent);
+  text-decoration: none;
+  border-radius: var(--space-m);
+
+  &:hover {
+    @media not all and (hover: none) {
+      color: var(--color-neutral-0);
+      background-color: var(--color-accent-highlight);
+      text-decoration: none;
+    }
+  }
+}

src/css/base/footer.css

@@ -1,4 +1,5 @@
 .footer {
   text-align: center;
   font-size: var(--font-size-xs);
+  color: var(--color-secondary);
 }

src/css/base/header.css

@@ -26,6 +26,17 @@
     transition-duration: var(--transition-duration-fast);
   }
 
+  & a {
+    color: var(--color-body-text);
+
+    &:hover {
+      @media not all and (hover: none) {
+        color: var(--color-accent);
+        text-decoration: none;
+      }
+    }
+  }
+
   & .wrap {
     @media (--L_and_up) {
       display: flex;

src/css/base/layout.css

@@ -21,4 +21,14 @@
   flex: 1;
   padding-top: var(--space-xl);
   padding-bottom: var(--space-xl);
+
+  & h1,
+  & h2 {
+    margin-bottom: var(--space-l);
+    color: var(--color-secondary);
+  }
+
+  & .lead {
+    margin-bottom: var(--space-xxl);
+  }
 }

src/css/base/variables.css

@@ -6,14 +6,19 @@
 
 :root {
   --color-neutral-0: #fff;
-  --color-neutral-10: #ddd;
+  --color-neutral-10: #f6f6f6;
+  --color-neutral-50: #888;
   --color-neutral-90: #222;
+  --color-neutral-95: #1B1B1B;
 
   --color-body-text: var(--color-neutral-90);
   --color-body-bg: var(--color-neutral-0);
+  --color-card-bg: var(--color-neutral-10);
   --color-accent: #f7931a;
+  --color-accent-highlight: #dd7901;
   --color-derweg: #00B4CF;
   --color-interview: #151515;
+  --color-secondary: var(--color-neutral-50);
 
   --space-xs: .125rem;
   --space-s: .25rem;
@@ -26,16 +31,12 @@
   --transition-duration-medium: 0.75s;
   --transition-duration-slow: 1.5s;
 
-  --border-radius: 16px;
-  --opacity-text: 0.7;
-
   --font-family-base: sans-serif;
   --font-family-head: 'The Bold Font', var(--font-family-base);
 
   --font-weight-light: 300;
   --font-weight-normal: 400;
   --font-weight-medium: 500;
-  --font-weight-semibold: 600;
   --font-weight-bold: 700;
 
   --font-size-base: 18px;
@@ -43,7 +44,7 @@
   --font-size-s: .85rem;
   --font-size-m: 1rem;
   --font-size-l: 1.25rem;
-  --font-size-xl: 1.5rem;
+  --font-size-xl: 1.75rem;
   --font-size-xxl: 2.5rem;
   --font-size-xxxl: 4rem;
 }
@@ -51,11 +52,13 @@
 :root[data-theme="dark"] {
   --color-body-text: var(--color-neutral-0);
   --color-body-bg: var(--color-neutral-90);
+  --color-card-bg: var(--color-neutral-95);
 }
 
 @media (prefers-color-scheme: dark) {
   :root:not([data-theme="light"]) {
     --color-body-text: var(--color-neutral-0);
     --color-body-bg: var(--color-neutral-90);
+    --color-card-bg: var(--color-neutral-95);
   }
 }