Styling and navigation logic

src/style/_cards.scss

@@ -12,6 +12,8 @@
         margin: 1rem .25em;
         border: 1px solid rgba(0,0,0,.125);
         border-radius: .25rem;
+        background-color: #fff;
+        box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);
 
         > a {
             color: unset;
@@ -21,9 +23,10 @@
         .card-header {
             background-color: red;
             padding: .75rem 1.25rem;
-            background-color: rgba(0,0,0,.03);
             border: 0px solid rgba(0,0,0,.125);
             border-bottom-width: 1px;
+            background-color: $primary-color;
+            color: #fff;
 
             @media screen and (max-width: $breakpoint-xs) {
                 border-width: 1px;

src/style/_footer.scss

@@ -42,6 +42,7 @@ footer {
       img {
         display: inline-block;
         margin: 0px 10px;
+        max-width: 250px;
       }
     }
   }

src/style/_navigation.scss

@@ -7,6 +7,8 @@
   top: 0;
   width: 100%;
   z-index: 1000;
+  font-family: "SFMoviePoster", system-ui, sans-serif;
+  font-size: 2.8rem;
 
   nav {
     padding: 0 20px;
@@ -17,6 +19,7 @@
 
     .header-logo img {
       height: 35px;
+      display: inline-block;
     }
 
     .nav-links {
@@ -36,7 +39,7 @@
           &:hover,
           &.active {
             border-color: inherit;
-            padding: 5px 0px;
+            padding: 0px 0px;
           }
         }
       }

src/style/_variables.scss

@@ -6,6 +6,6 @@ $breakpoint-lg: 992px;
 $breakpoint-xl: 1200px;
 
 $primary-color: #09003d;
-$primary-color: #09003d18;
+$primary-color: rgb(128, 0, 0);
 $hero-color: #fff;
 $footer-color: #898f9c;

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