🛠 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);
   }
 }

src/css/sections/podcast.css

@@ -1,104 +1,78 @@
-#updates {
-  position: relative;
-  padding-top: 120px;
+#podcast {
+}
 
-  @media (--M_and_up) {
-    padding-bottom: 180px;
+.episodes {
+  display: grid;
+  grid-gap: var(--space-xl);
+  grid-template-columns: 1fr;
+  margin: 0;
+  list-style: none;
+
+  @media (--up_to_L) {
+    grid-template-columns: 1fr;
   }
-
-  & h3 {
-    @media (--up_to_M) {
-      font-size: 36px;
-      margin-bottom: var(--space-l);
-    }
-    @media (--M_and_up) {
-      font-size: 48px;
-      margin-bottom: var(--space-xl);
-    }
-  }
-
-  & .update + .update {
-    margin-top: var(--space-xxl);
-  }
-
-  &:after {
-    display: inline-block;
-    content: '';
-    position: absolute;
-    left: -65px;
-    bottom: -80px;
-    z-index: -1;
-    background-image: url(../img/bg/updates.svg);
-    background-repeat: no-repeat;
-    background-position: 0 100%;
-    background-size: contain;
-    max-width: 55%;
-    width: 369px;
-    height: 344px;
-
-    @media (--up_to_M) {
-      display: none;
-    }
+  @media (--L_and_up) {
+    grid-template-columns: 1fr 1fr;
   }
 }
 
-.update {
-  display: block;
-  text-decoration: none !important;
+.episodeItem {
+  margin: 0;
+  background-color: var(--color-card-bg);
+  border-radius: var(--space-l);
 
+  @media (--up_to_M) {
+    padding: var(--space-l);
+  }
   @media (--M_and_up) {
-    display: flex;
-    align-items: center;
-    max-width: 53em;
-    transition-property: background, border, transform;
-    transition-duration: var(--transition-duration-fast);
+    padding: var(--space-xl);
   }
 
-  & .image {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background-color: var(--color-neutral-90);
-    box-shadow: 0px 100px 80px rgba(12, 11, 24, 0.15), 0px 41.7776px 33.4221px rgba(12, 11, 24, 0.107828), 0px 22.3363px 17.869px rgba(12, 11, 24, 0.0894161), 0px 12.5216px 10.0172px rgba(12, 11, 24, 0.075), 0px 6.6501px 5.32008px rgba(12, 11, 24, 0.0605839), 0px 2.76726px 2.21381px rgba(12, 11, 24, 0.0421718);
-    border: 3px solid var(--color-neutral-90);
-    border-radius: var(--space-l);
 
+  & a {
+    display: flex;
+  }
+
+  & .media {
+    margin-right: var(--space-l);
+
+    & a,
     & img {
-      max-width: 80%;
-      max-height: 80%;
-    }
+      display: block;
+      border-radius: var(--space-s);
 
-    @media (--up_to_M) {
-      width: 100%;
-      height: 195px;
-      margin-bottom: 25px;
-    }
-    @media (--M_and_up) {
-      flex: 1 0 42.5%;
-      height: 275px;
-      margin-right: 25px;
-    }
-  }
-
-  & h4 {
-    margin-bottom: 15px;
-
-    @media (--up_to_M) {
-      font-size: var(--font-size-xl);
-    }
-  }
-
-  & p {
-    opacity: var(--opacity-text);
-    color: var(--color-body-text) !important;
-  }
-
-  &:hover {
-    & .image {
-      @media not all and (hover: none) {
-        border-color: var(--color-accent);
-        background-image: linear-gradient(45deg, #1A136E 29.26%, #0D0AB7 92.45%);
+      @media (--up_to_M) {
+        height: 60px;
+        width: 60px;
+      }
+      @media (--M_and_up) {
+        height: 100px;
+        width: 100px;
       }
     }
   }
+
+  & .meta {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    font-family: var(--font-family-head);
+    /* color: var(--color-secondary); */
+  }
+
+  & .content {
+    flex: 1;
+
+    & > *:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  & h3 {
+    margin-top: var(--space-s);
+    font-family: var(--font-family-base);
+    font-weight: var(--font-weight-medium);
+    font-size: var(--font-size-m);
+    line-height: 1.2;
+  }
 }

src/css/sections/team.css

@@ -1,7 +1,7 @@
 #team {
   & .members {
     display: grid;
-    grid-gap: var(--space-xxl);
+    grid-gap: var(--space-xl);
     margin: 0;
     list-style: none;
 
@@ -18,37 +18,26 @@
 
   & .member {
     margin: 0;
+    text-align: center;
+    background-color: var(--color-card-bg);
+    border-radius: var(--space-l);
+    padding: var(--space-xl);
 
     & img {
-      display: block;
+      display: inline-block;
       border-radius: 50%;
-
-      @media (--up_to_L) {
-        height: 87px;
-        width: 87px;
-      }
-      @media (--L_and_up) {
-        height: 112px;
-        width: 112px;
-      }
+      height: 100px;
+      width: 100px;
     }
 
-    & h4 {
-      margin-top: var(--space-m);
-      font-size: 21px;
-    }
-
-    & a {
-      font-size: var(--font-size-xs);
-      text-decoration: none;
-      text-transform: uppercase;
+    & h2 {
+      margin-top: var(--space-l);
+      margin-bottom: var(--space-m);
+      font-size: var(--font-size-xl);
     }
 
     & p {
-      margin: var(--space-s) 0 var(--space-l);
-      font-size: var(--font-size-s);
-      opacity: var(--opacity-text);
-      max-width: 30em;
+      margin-bottom: var(--space-l);
       overflow-wrap: anywhere;
     }