Styling and navigation logic

src/style/combined.scss

@@ -7,6 +7,20 @@
 @import "_footer.scss";
 @import "_cards.scss";
 
+@font-face {
+  font-family: "SFMoviePoster";
+  src: url("../font/SFMoviePoster.ttf") format("truetype");
+  font-weight: normal;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "SFMoviePoster";
+  src: url("../font/SFMoviePosterBold.ttf") format("truetype");
+  font-weight: bold;
+  font-style: normal;
+}
+
 @font-face {
   font-family: "FiraSans";
   src: url("../font/FiraSans-Regular.ttf") format("truetype");
@@ -47,6 +61,15 @@ body {
   position: absolute;
   top: 80px;
   width: 100%;
+  min-height: calc(100vh - 80px);
+}
+
+h1,h2,h3,h4,h5,h6 {
+  font-family: "SFMoviePoster", system-ui, sans-serif;
+}
+
+h1 {
+  font-size: 4rem;
 }
 
 h2,h3 {
@@ -63,9 +86,7 @@ p {
   max-width: 1440px;
   margin: auto;
   
-  @media screen and (max-width: $breakpoint-xs) {
-    padding: 20px;
-  }
+
 
   padding-bottom: 300px;
 }
@@ -147,18 +168,42 @@ body.hero {
   justify-content: center;
   text-align: center;
 
+  > div > div {
+    border: 1px solid red;
+    padding: 0;
+  }
+
+  h1,h2,h3,h4 {
+    img {
+      vertical-align: middle;
+      display: inline-block;
+    }
+
+    small {
+      font-size: .5em;
+      vertical-align: text-top;
+    }
+  }
+
   h1 {
-    font-size: 7vw;
+    font-size: 15vw;
     font-weight: normal;
+    line-height: 15vw;
+
+    img {
+      width: 18vw;
+      height: auto;
+    }
   }
 
   h2 {
-    font-size: 4vw;
     font-weight: lighter;
+    font-size: 8vw;
+    line-height: 8vw;
   }
 
   h3 {
-    font-size: 2vw;
+    font-size: 3vw;
     font-weight: lighter;
   }
 
@@ -172,13 +217,23 @@ body.hero {
     opacity: 0.3;
   }
 
-  @media only screen and (max-width: $breakpoint-xs) {
-    h2 {
-      font-size: 6vw;
-    }
+  @media only screen and (max-width: $breakpoint-xl) {
+    h1 {font-size: 20vw; line-height: 17vw; img{width: 28vw;}}
+    h2 {font-size: 12vw; line-height: 12vw;}
+    h3 {font-size: 4vw;}
+  }
 
-    h3 {
-      font-size: 4vw;
-    }
+  @media only screen and (max-width: $breakpoint-lg) {
+    h1 img{width: 34vw;}
+    h3 { font-size: 5vw; }
+  }
+
+  @media only screen and (max-width: $breakpoint-sm) {
+  }
+
+  @media only screen and (max-width: $breakpoint-xs) {
+    h1 {font-size: 22vw; line-height: 20vw;}
+    h2 {font-size: 16vw; line-height: 16vw;}
+    h3 {font-size: 9vw;}
   }
 }