🛠 Layout and content updates

src/css/base/elements.css

@@ -15,7 +15,7 @@
 
 html {
   height: 100%;
-  line-height: 1.5;
+  line-height: 1.45;
   font-family: var(--font-family-base);
   font-size: var(--font-size-base);
   scroll-behavior: smooth;
@@ -29,6 +29,8 @@ body {
   height: 100%;
   color: var(--color-body-text);
   background-color: var(--color-body-bg);
+  transition-property: color, background;
+  transition-duration: var(--transition-duration-fast);
 }
 
 h1,
@@ -37,9 +39,8 @@ h3,
 h4,
 h5,
 h6 {
-  font-family: var(--font-family-head);
-  letter-spacing: -0.04em;
-  line-height: 1.05;
+  line-height: 1;
+  color: var(--color-secondary);
 
   & a {
     color: inherit;
@@ -114,10 +115,28 @@ ul {
   }
 }
 
+pre,
+button {
+  font-family: inherit;
+  font-size: inherit;
+}
+
 img:-moz-loading {
   visibility: hidden;
 }
 
+::-webkit-progress-value {
+  background-color: var(--color-accent);
+}
+
+::-ms-fill {
+  background-color: var(--color-accent);
+}
+
+::-moz-progress-bar {
+  background-color: var(--color-accent);
+}
+
 [aria-hidden="true"] {
   display: none;
 }

src/css/base/fonts.css

@@ -1,19 +1,16 @@
+/* https://google-webfonts-helper.herokuapp.com/fonts/inconsolata?subsets=latin */
 @font-face {
-  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-family: 'Inconsolata';
   font-style: normal;
   font-weight: 400;
-  src: url('../fonts/noto-sans-400.woff2') format('woff2');
+  font-stretch: 100%;
+  src: url('../fonts/inconsolata-400.woff2') format('woff2');
 }
 
 @font-face {
-  font-family: 'Noto Sans';
+  font-family: 'Inconsolata';
   font-style: normal;
   font-weight: 700;
-  src: url('../fonts/noto-sans-700.woff2') format('woff2');
+  font-stretch: 100%;
+  src: url('../fonts/inconsolata-700.woff2') format('woff2');
 }

src/css/base/footer.css

@@ -2,4 +2,20 @@
   text-align: center;
   font-size: var(--font-size-xs);
   color: var(--color-secondary);
+  background-color: var(--color-card-bg);
+  transition-property: background-color;
+  transition-duration: var(--transition-duration-fast);
+  padding: var(--space-m) 0;
+
+  & .wrap {
+    @media (--M_and_up) {
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: space-between;
+    }
+  }
+
+  & p {
+    margin-bottom: 0;
+  }
 }

src/css/base/header.css

@@ -1,29 +1,32 @@
 .header {
-  /* position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  z-index: 10; */
   color: var(--color-body-text);
   background-color: var(--color-body-bg);
+  transition-property: color, background-color, box-shadow;
+  transition-duration: var(--transition-duration-fast);
 
-  @media (--up_to_L) {
+  @media (--up_to_M) {
+    padding-top: var(--space-l);
+    padding-bottom: var(--space-m);
+  }
+  @media (--M_to_L) {
     padding-top: var(--space-l);
     padding-bottom: var(--space-l);
   }
   @media (--L_and_up) {
     padding-top: var(--space-xl);
-    padding-bottom: var(--space-xl);
+    padding-bottom: var(--space-l);
   }
 
-  @nest body.topbar & {
-    box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.1);
-  }
+  @media (--up_to_L) {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    z-index: 10;
 
-  @nest body.topbar.topbar--appear & {
-    opacity: 1;
-    transition-property: opacity;
-    transition-duration: var(--transition-duration-fast);
+    @nest body.topbar & {
+      box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.1);
+    }
   }
 
   & a {
@@ -38,93 +41,94 @@
   }
 
   & .wrap {
-    @media (--L_and_up) {
-      display: flex;
-      flex-wrap: wrap;
-      align-items: flex-end;
-    }
-  }
-
-  & .brand {
-    display: inline-block;
-    margin-right: var(--space-xl);
+    flex-direction: column;
+    align-items: center;
   }
 
   & .logo {
     display: block;
-
-    @media (--up_to_M) {
-      height: 27px;
-      width: 300px;
-    }
-    @media (--M_to_L) {
-      height: 45px;
-      width: 500px;
-    }
-    @media (--L_and_up) {
-      height: 63px;
-      width: 700px;
-    }
+    width: 100%;
+    height: var(--logo-height);
+    max-width: 840px;
+    max-height: 76px;
   }
 
   & .nav {
-    position: relative;
-    top: 3px;
-    left: -1px;
     display: flex;
-    flex: 1;
+    align-self: flex-start;
+    align-items: center;
+    justify-content: space-between;
+    padding-right: 5.75%;
+    line-height: 1;
 
-    @media (--up_to_L) {
+    @media (--up_to_M) {
       margin-top: var(--space-m);
+      font-size: var(--font-size-l);
+    }
+    @media (--M_to_L) {
+      margin-top: var(--space-m);
+      font-size: var(--font-size-xl);
     }
     @media (--L_and_up) {
       margin-top: var(--space-l);
+      font-size: var(--font-size-xxl);
     }
 
-    & a {
-      text-decoration: none;
-
-      &.navItem {
-        text-transform: uppercase;
-        letter-spacing: -0.04em;
-        font-weight: var(--font-weight-bold);
-        margin-right: var(--space-l);
-        line-height: 1;
-
-        @media (--up_to_L) {
-          font-size: var(--font-size-l);
-        }
-        @media (--L_and_up) {
-          font-size: var(--font-size-xl);
-        }
-      }
-    }
-
-    & .social {
+    & nav {
       display: flex;
       align-items: center;
 
-      @media (--L_and_up) {
-        margin-left: auto;
+      & a {
+        text-transform: uppercase;
+        font-weight: var(--font-weight-bold);
+        cursor: pointer;
+
+        &.current {
+          color: var(--color-accent);
+        }
       }
 
+      & > a + a {
+        margin-left: var(--space-l);
+      }
+    }
+
+    & .more {
+      display: flex;
+      align-items: center;
+      margin-left: auto;
+
       & a,
-      & svg {
+      & button{
         display: inline-block;
 
-        @media (--up_to_L) {
-          height: calc(var(--font-size-l) - 0.2rem);
-          width: calc(var(--font-size-l) - 0.2rem);
-        }
-        @media (--L_and_up) {
-          height: calc(var(--font-size-xl) - 0.2rem);
-          width: calc(var(--font-size-xl) - 0.2rem);
+        & svg {
+          height: .8em;
+          width: .8em;
+          display: block;
         }
       }
 
-      & a + a {
+      & > * + * {
         margin-left: var(--space-l);
       }
     }
   }
 }
+
+.theme {
+  display: inline-block;
+  align-items: center;
+  justify-content: center;
+  color: inherit;
+  background: none;
+  cursor: pointer;
+  border: 0;
+  outline: 0;
+
+  &:hover {
+    @media not all and (hover: none) {
+      color: var(--color-accent);
+    }
+  }
+}

src/css/base/layout.css

@@ -1,41 +1,31 @@
 .wrap {
-  max-width: 1440px;
   margin-left: auto;
   margin-right: auto;
-
-  @media (--up_to_M) {
-    padding-left: var(--space-l);
-    padding-right: var(--space-l);
-  }
-  @media (--M_to_L) {
-    padding-left: var(--space-xl);
-    padding-right: var(--space-xl);
-  }
-  @media (--L_and_up) {
-    padding-left: var(--space-xxl);
-    padding-right: var(--space-xxl);
-  }
+  padding-left: var(--wrap-padding-horizontal);
+  padding-right: var(--wrap-padding-horizontal);
+  max-width: calc(840px + var(--wrap-padding-horizontal) * 2);
 }
 
 .main {
   flex: 1;
-  padding-top: var(--space-xxl);
   padding-bottom: var(--space-xxl);
 
-  & h1,
+  @media (--up_to_L) {
+    padding-top: calc(var(--logo-height) + var(--space-xxl) * 1.75);
+  }
+  @media (--L_and_up) {
+    padding-top: var(--space-xl);
+  }
+
+  & h1 {
+    display: none;
+  }
+
   & h2 {
     margin-bottom: var(--space-l);
-    color: var(--color-secondary);
-    max-width: 20em;
   }
 
-  & .centered {
-    text-align: center;
-    margin-left: auto;
-    margin-right: auto;
-  }
-
-  & .lead {
+  & section {
     margin-bottom: var(--space-xxl);
   }
 }

src/css/base/variables.css

@@ -6,7 +6,7 @@
 
 :root {
   --color-neutral-0: #fff;
-  --color-neutral-10: #f6f6f6;
+  --color-neutral-10: #f9f9f9;
   --color-neutral-50: #888;
   --color-neutral-90: #222;
   --color-neutral-95: #1B1B1B;
@@ -24,15 +24,14 @@
   --space-s: .25rem;
   --space-m: .5rem;
   --space-l: 1rem;
-  --space-xl: 2rem;
+  --space-xl: 1.75rem;
   --space-xxl: 3rem;
 
   --transition-duration-fast: 0.25s;
   --transition-duration-medium: 0.75s;
   --transition-duration-slow: 1.5s;
 
-  --font-family-base: 'Noto Sans', sans-serif;
-  --font-family-head: var(--font-family-base);
+  --font-family-base: 'Inconsolata', monospace;
 
   --font-weight-normal: 400;
   --font-weight-bold: 700;
@@ -45,6 +44,18 @@
   --font-size-xl: 1.75rem;
   --font-size-xxl: 2.5rem;
   --font-size-xxxl: 4rem;
+
+  @media (--up_to_M) {
+    --wrap-padding-horizontal: var(--space-l);
+  }
+  @media (--M_to_L) {
+    --wrap-padding-horizontal: var(--space-xl);
+  }
+  @media (--L_and_up) {
+    --wrap-padding-horizontal: var(--space-xxl);
+  }
+
+  --logo-height: calc((100vw - var(--wrap-padding-horizontal) * 2) / 134 * 12);
 }
 
 :root[data-theme="dark"] {

src/css/main.css

@@ -7,5 +7,6 @@
 @import 'base/footer.css';
 
 /* Sections */
+@import 'sections/home.css';
 @import 'sections/podcast.css';
 @import 'sections/team.css';

src/css/sections/home.css

@@ -0,0 +1,33 @@
+@keyframes marquee {
+  0% { transform: translateX(0); }
+  100% { transform: translateX(-100%); }
+}
+
+.ticker {
+  overflow: hidden;
+  background: var(--color-card-bg);
+  transition-property: background-color;
+  transition-duration: var(--transition-duration-fast);
+  margin: -15px 0 var(--space-xl);
+  padding: var(--space-m) 0;
+
+  & .inner {
+    display: flex;
+    align-items: center;
+    flex-wrap: nowrap;
+    animation-name: marquee;
+    animation-timing-function: linear;
+    animation-iteration-count: infinite;
+    font-size: var(--font-size-s);
+
+    @media (--up_to_M) {
+      animation-duration: 10s;
+    }
+    @media (--M_to_L) {
+      animation-duration: 20s;
+    }
+    @media (--L_and_up) {
+      animation-duration: 30s;
+    }
+  }
+}

src/css/sections/podcast.css

@@ -3,7 +3,7 @@
     display: inline-flex;
     flex-wrap: wrap;
     list-style: none;
-    margin: 0 0 var(--space-xxl) 0;
+    margin: 0;
 
     & li {
       margin: 0 var(--space-m) var(--space-m) 0;
@@ -13,7 +13,7 @@
       display: inline-block;
       text-align: center;
       padding: var(--space-s) var(--space-l);
-      color: var(--color-secondary);
+      color: var(--color-body-text);
       text-decoration: none;
       border-radius: var(--space-xl);
       border: 1px solid var(--color-secondary);
@@ -54,8 +54,10 @@
 
 .episodeItem {
   margin: 0;
-  background-color: var(--color-card-bg);
   border-radius: var(--space-l);
+  background-color: var(--color-card-bg);
+  transition-property: background-color;
+  transition-duration: var(--transition-duration-fast);
 
   @media (--up_to_M) {
     padding: var(--space-l);
@@ -66,6 +68,12 @@
 
   & a {
     display: flex;
+
+    &:hover .meta {
+      @media not all and (hover: none) {
+        color: inherit;
+      }
+    }
   }
 
   & .media {
@@ -91,8 +99,7 @@
     display: flex;
     flex-wrap: wrap;
     justify-content: space-between;
-    font-family: var(--font-family-head);
-    /* color: var(--color-secondary); */
+    color: var(--color-secondary);
   }
 
   & .content {
@@ -102,90 +109,105 @@
       margin-bottom: 0;
     }
   }
-
-  & h3 {
-    margin-top: var(--space-s);
-    font-family: var(--font-family-base);
-    font-weight: var(--font-weight-bold);
-    font-size: var(--font-size-m);
-    line-height: 1.2;
-  }
 }
 
 .player {
+  display: flex;
   border-radius: var(--space-m);
   overflow: hidden;
-  min-width: 300px;
-  max-width: 480px;
+
+  @media (--up_to_M) {
+    flex-direction: column;
+    min-width: 300px;
+    max-width: 400px;
+  }
+  @media (--M_and_up) {
+  }
 }
 
-.player__cover{
-  display:block;
-  width:100%
+.player__cover {
+  display: block;
+
+  @media (--up_to_M) {
+    width: 100%;
+  }
+  @media (--M_and_up) {
+    width: 25%;
+  }
 }
+
 .player__bottom {
+  flex: 1;
   color: var(--color-body-text);
   background-color: var(--color-card-bg);
-  padding-bottom: var(--space-l);
+  transition-property: color, background-color;
+  transition-duration: var(--transition-duration-fast);
 }
-.player__progress{
+
+.player__progress {
   display: block;
-  background-color: rgba(255,255,255,.25);
+  background-color: var(--color-secondary);
   appearance:none;
   width: 100%;
   height: var(--space-m);
-  margin-bottom: var(--space-m);
   cursor:pointer;
   border:none
 }
-.player__progress[value] {
-    -webkit-appearance: none;
-}
-.player__progress::-webkit-progress-bar{
-  background-color: var(--color-secondary);
-}
-.player__progress::-moz-progress-bar,
-.player__progress::-webkit-progress-value {
-  background-color: var(--color-accent);
-}
-.player__time{
-  display:flex;
-  justify-content:space-between;
-  margin:.5em 0 .75em;
-  padding:0 .5em;
-  opacity:.5;
+
+.player__time {
+  display: flex;
+  justify-content: space-between;
+  padding: var(--space-m) var(--space-l);
+  color: var(--color-secondary);
   font-size: var(--font-size-s);
 }
-.player__current-time{
-  margin-left:var(--space-m);
-}
-.player__duration{
-  margin-right:var(--space-m);
-}
-.player__controls{
-  display:flex;
+
+.player__controls {
+  display: flex;
   align-items: center;
-  margin-top: var(--space-m);
-  padding: 0 var(--space-l);
+  padding: var(--space-m) var(--space-l) var(--space-l);
 }
-.player__button{
-  width:70px;
-  height:70px;
-  margin-right:var(--space-l);
-  background-size:cover;
-  background-repeat:no-repeat;
-  cursor:pointer
+
+.player__button {
+  width: 70px;
+  height: 70px;
+  margin-right: var(--space-l);
+  cursor: pointer;
 }
-.player__button.amplitude-paused{
-  background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNzUiIGhlaWdodD0iNzUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMSAxKSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48Y2lyY2xlIHN0cm9rZT0iIzQyNDM1RiIgY3g9IjM2LjUiIGN5PSIzNi41IiByPSIzNi41Ii8+PHBhdGggZD0iTTQ3LjYzIDM1LjhMMjcuNjQgMjMuNDNjLTEuNDYtLjk2LTIuNjUtLjI2LTIuNjUgMS41NlY0OWMwIDEuODEgMS4xOSAyLjUyIDIuNjUgMS41Nkw0Ny42MyAzOC4ycy43LS41LjctMS4yLS43LTEuMi0uNy0xLjJ6IiBmaWxsPSIjRkZGIiBmaWxsLXJ1bGU9Im5vbnplcm8iLz48L2c+PC9zdmc+)
+
+.player__button svg {
+  width: 100%;
+  height: 100%;
 }
-.player__button.amplitude-playing{
-  background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNzUiIGhlaWdodD0iNzUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMSAxKSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48Y2lyY2xlIHN0cm9rZT0iIzQyNDM1RiIgY3g9IjM2LjUiIGN5PSIzNi41IiByPSIzNi41Ii8+PHBhdGggZD0iTTMwLjUyIDIzSDI2LjJBMi4yIDIuMiAwIDAgMCAyNCAyNS4ydjIzLjZjMCAxLjIxLjk4IDIuMiAyLjIgMi4yaDQuMzJhMi4yIDIuMiAwIDAgMCAyLjE5LTIuMlYyNS4yYTIuMiAyLjIgMCAwIDAtMi4xOS0yLjJ6TTQ2LjkgMjNoLTQuMzJhMi4yIDIuMiAwIDAgMC0yLjE5IDIuMnYyMy42YzAgMS4yMS45OCAyLjIgMi4xOSAyLjJoNC4zM2EyLjIgMi4yIDAgMCAwIDIuMTktMi4yVjI1LjJjMC0xLjIxLS45OC0yLjItMi4yLTIuMnoiIGZpbGw9IiNGRkYiIGZpbGwtcnVsZT0ibm9uemVybyIvPjwvZz48L3N2Zz4=)
+
+.player__button__icon--play,
+.player__button__icon--pause {
+  display: none;
+  color: var(--color-secondary);
+
+  &:hover {
+    @media not all and (hover: none) {
+      color: var(--color-accent);
+    }
+  }
 }
-.player__info{
-  flex:1;
+
+.player__button.amplitude-paused .player__button__icon--pause,
+.player__button.amplitude-playing .player__button__icon--play {
+  display: block;
+}
+
+.player__info {
+  flex: 1;
   text-align: left;
+
+  & a:hover .player__album {
+    @media not all and (hover: none) {
+      color: inherit;
+    }
+  }
 }
-.player__album{
-  color:var(--color-secondary);
+
+.player__album {
+  color: var(--color-secondary);
 }

src/css/sections/team.css

@@ -8,20 +8,18 @@
     @media (--up_to_M) {
       grid-template-columns: 1fr;
     }
-    @media (--M_to_L) {
+    @media (--M_and_up) {
       grid-template-columns: 1fr 1fr;
     }
-    @media (--L_and_up) {
-      grid-template-columns: 1fr 1fr 1fr;
-    }
   }
 
   & .member {
     margin: 0;
-    text-align: center;
-    background-color: var(--color-card-bg);
-    border-radius: var(--space-l);
     padding: var(--space-xl);
+    border-radius: var(--space-l);
+    background-color: var(--color-card-bg);
+    transition-property: background-color;
+    transition-duration: var(--transition-duration-fast);
 
     & img {
       display: inline-block;
@@ -30,23 +28,41 @@
       width: 100px;
     }
 
-    & h2 {
+    & header {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      justify-content: space-between;
       margin-top: var(--space-l);
-      margin-bottom: var(--space-m);
+    }
+
+    & h2 {
       font-size: var(--font-size-xl);
+      margin: 0 var(--space-l) var(--space-l) 0;
     }
 
     & p {
-      margin-bottom: var(--space-l);
-      overflow-wrap: anywhere;
+      margin-bottom: 0;
     }
 
     & .links {
-      & a,
+      display: flex;
+      margin-bottom: var(--space-l);
+
+      & a {
+        color: var(--color-secondary);
+
+        &:hover {
+          @media not all and (hover: none) {
+            color: var(--color-accent);
+          }
+        }
+      }
+
       & svg {
-        display: inline-block;
-        height: 28px;
-        width: 28px;
+        display: block;
+        height: var(--font-size-l);
+        width: var(--font-size-l);
       }
 
       & a + a {