js + responsive tweaks

assets/scss/core.scss

@@ -14,22 +14,6 @@ body {
 
 
 
-.home-layout {
-  padding-top: 128px;
-  background-color: #fff;
-}
-
-
-.article-layout {
-  padding-top: 128px;
-  background-color: #1D1D1D;
-}
-
-.topic-layout {
-  padding-top: 0;
-  background-color: white;
-}
-
 
 
 .topic-intro {
@@ -107,32 +91,6 @@ a.cta {
   }
 }
 
-.breadcrumbs {
-  position: sticky;
-  z-index: 1;
-  top: 108px;
-  left: 0;
-
-
-  ul {
-    padding: 4px 8px;
-    background-color: #f2f2f2;
-    border-radius: 32px;
-
-    display: inline-flex;
-    flex-direction: row-reverse;
-    list-style: none;
-
-    li {
-      font-size: 0.8em;
-      padding-right: 8px;
-
-      &:first-of-type {
-        color: red;
-      }
-    }
-  }
-}
 
 
 .partner-card {
@@ -163,30 +121,6 @@ a.cta {
   grid-gap: 32px;
 }
 
-.newsroom {
-
-
-
-  .newsroom-article-list {
-    display: grid;
-    grid-gap: 32px;
-    grid-template-columns: 1fr 1fr;
-    grid-template-rows: repeat(4, 400px); 
-  }
-
-
-  .highlight {
-    grid-row: 1 / 3;
-
-    background-color: green;
-  }
-
-  .article {
-    background-color: gray;
-  }
-}
-
-
 
 button, .button {
   background-color: black;
@@ -221,6 +155,11 @@ button, .button {
     }
   }
 
+  &.secondary {
+    background-color: #333333;
+    color: #fff;
+  }
+
 
   svg {
     width: 15px;
@@ -247,4 +186,17 @@ ol {
       }
     }
   }
+}
+
+.image-header {
+  margin: -33px -33px 32px -33px;
+  height: 600px;
+  overflow: hidden;
+  position: relative;
+  img {
+    position: absolute;
+    top: -50%;
+    width: 100%;
+
+  }
 }

assets/scss/pages/newsroom.scss

@@ -0,0 +1,46 @@
+
+.newsroom {
+  .newsroom-article-list {
+    display: grid;
+    grid-gap: 32px;
+    grid-template-columns: 1fr 1fr;
+    grid-template-rows: repeat(4, 320px); 
+  }
+
+
+  .highlight {
+    grid-row: 1 / 3;
+
+    background-color: #1D1D1D;
+    border-radius: 20px;
+
+    color: #fff;
+
+    figure {
+
+      border-radius: 20px 20px 0 0;
+      margin-bottom: 16px;
+      position: relative;
+      width: 100%;
+      height: 300px;
+      overflow: hidden;
+
+      img {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        max-width: 100%;
+      }
+    }
+
+    section {
+      padding: 0 16px;
+    }
+  }
+
+  .article {
+    background-color: gray;
+  }
+}
+

assets/scss/screen.scss

@@ -13,3 +13,4 @@
 @import "ui/stats.scss";
 
 @import "pages/volunteers.scss";
+@import "pages/newsroom.scss";

assets/scss/typography.scss

@@ -48,6 +48,33 @@ p {
   margin-bottom: 16px;
 }
 
+@media (max-width: 700px) {
+  h1 {
+    font-size: 3em;
+  }
+
+  h2 {
+    font-size: 1.8em;
+  }
+
+  h3 {
+    font-size: 1.2em;
+  }
+
+  h6 {
+    font-size: 0.8em;
+  }
+
+  p.opener {
+    font-size: 1.6em;
+  }
+
+  p {
+    font-size: 1em;
+  }
+
+}
+
 
 
 .reverse {

assets/scss/ui/carousel.scss

@@ -49,6 +49,15 @@
       margin-left: 16px;
     }
   }
+
+  @media(max-width: 700px) {
+
+    .slides {
+      > * {
+        width: calc(100vw - 32px);
+      }
+    }
+  }
 }
 
 

assets/scss/ui/layout.scss

@@ -68,7 +68,7 @@
 
   &.ps-article {
     .ps-container {
-      background-color: white;
+
     }
   }
 
@@ -86,7 +86,7 @@
 
   .pl-content {
     flex: 0 0 var(--cw);
-    padding: 0 32px;
+    padding: 0;
 
     &.pl-extend {
       flex: 0 0 calc(var(--cw) + var(--rest));
@@ -138,6 +138,76 @@
       padding-bottom: 32px;
       border-top-left-radius: 20px;
       border-top-right-radius: 300px;
+      overflow: hidden;
+    }
+
+    &.pl-has-image {
+      background: linear-gradient(to bottom, #333 0%, #333 300px, #fff 300px, #fff 100%);
     }
   }
-}
+}
+
+
+
+
+.breadcrumbs {
+
+  position: sticky;
+  z-index: 1;
+  top: 108px;
+  margin-left: var(--rest);
+
+
+  ul {
+    padding: 8px 12px;
+    background-color: #f2f2f2;
+    border-radius: 32px;
+
+    display: inline-flex;
+    flex-direction: row-reverse;
+    list-style: none;
+
+    li {
+      font-size: 0.8em;
+      padding-right: 8px;
+
+
+      a {
+        text-decoration: none;
+        border-bottom: none;
+      }
+
+
+    }
+  }
+}
+
+
+.home-layout {
+  padding-top: 128px;
+  background-color: #fff;
+}
+
+
+.article-layout {
+  padding-top: 128px;
+  background-color: #1D1D1D;
+
+  .breadcrumbs {
+    ul {
+      background-color: #343434;
+      li {
+        color: #858585;
+
+        a {
+          color: #fff;
+        }
+      }
+    }
+  }
+}
+
+.topic-layout {
+  padding-top: 0;
+  background-color: white;
+}