Merge pull request #135 from whitep4nth3r/add-video-page

add video page
whitep4nth3r · Mar 21, 2024 · dd7556c · dd7556c
2 parents 34b494a + cb56db1
commit dd7556c
Show file tree

Hide file tree

Showing 9 changed files with 247 additions and 9 deletions.
diff --git a/src/_css/main.css b/src/_css/main.css
diff --git a/src/_css/main.css.map b/src/_css/main.css.map
diff --git a/src/_includes/header.html b/src/_includes/header.html
@@ -11,8 +11,8 @@
           <a href="/" class="header__navListItemLink" data-link="home">Home</a>
         </li>
         <li class="header__navListItem">
-          <a href="/about/" class="header__navListItemLink" data-link="about">
-            About
+          <a href="/video/" class="header__navListItemLink" data-link="video">
+            Video
           </a>
         </li>
         <li class="header__navListItem">
@@ -24,6 +24,7 @@
           <details class="header__navListDetails">
             <summary class="header__navListSummary">More</summary>
             <div class="header__navListMoreLinks">
+              <a href="/about/" class="header__navListItemLink">About</a>
               <a
                 href="/newsletter"
                 target="_blank"

diff --git a/src/_public/img/salma_on_sofa.png b/src/_public/img/salma_on_sofa.png
diff --git a/src/_public/img/this_internet.svg b/src/_public/img/this_internet.svg
diff --git a/src/_sass/_header.scss b/src/_sass/_header.scss
@@ -204,7 +204,7 @@
 
 [data-active="home"] [data-link="home"],
 [data-active="blog"] [data-link="blog"],
-[data-active="about"] [data-link="about"] {
+[data-active="video"] [data-link="video"] {
   opacity: 1;
   position: relative;
 
@@ -240,7 +240,7 @@
   }
 }
 
-[data-active="about"] [data-link="about"] {
+[data-active="video"] [data-link="video"] {
   &::after {
     content: var(--header-about-active-content);
     bottom: 0.75rem;

diff --git a/src/_sass/_video.scss b/src/_sass/_video.scss
@@ -0,0 +1,78 @@
+.video {
+  position: relative;
+  aspect-ratio: 16/9;
+
+  /* address the magic numbers here, see _reset.scss */
+  margin-top: -8rem;
+
+  @media screen and (min-width: $global_md_breakpoint) {
+    margin-top: -12rem;
+  }
+}
+
+.video__banner {
+  width: 100vw;
+  height: 100svh;
+  position: relative;
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  background-image: url("/.netlify/images/?url=/img/salma_on_sofa.png");
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-position: center;
+  justify-content: flex-end;
+  filter: contrast(1.1);
+
+  @media screen and (min-width: $global_md_breakpoint) {
+    justify-content: center;
+  }
+}
+
+.video__bannerImg {
+  width: 100%;
+}
+
+.video__headline {
+  padding: clamp(0.5rem, 1vw, 1rem);
+  position: absolute;
+  right: 0;
+  width: 100%;
+  @media screen and (min-width: $global_md_breakpoint) {
+    width: 50%;
+  }
+}
+
+.video__grid {
+  @include card_grid;
+}
+
+.video__gridHeader {
+  @include font_bold;
+  margin-top: 3rem;
+  margin-bottom: 2rem;
+  font-size: clamp(2.5rem, 3.5vw, 3.5rem);
+  line-height: 1.4;
+  color: var(--color-fg);
+  max-width: var(--post-max-width);
+  text-wrap: balance;
+}
+
+.video__content {
+  max-width: var(--post-max-width);
+
+  p {
+    @include font_main;
+    font-size: 1.125rem;
+    line-height: 1.75;
+    margin-bottom: 1rem;
+    color: var(--color-fg-copy);
+    word-break: break-word;
+
+    a {
+      @include link_focus;
+    }
+  }
+}
diff --git a/src/_sass/main.scss b/src/_sass/main.scss
@@ -41,3 +41,4 @@
 @import "stream-package";
 @import "newsletter-signup";
 @import "webring";
+@import "video";