Styling and navigation logic

static/css/ndws.css

@@ -5947,6 +5947,8 @@ select {
   top: 0;
   width: 100%;
   z-index: 1000;
+  font-family: 'SFMoviePoster', system-ui, sans-serif;
+  font-size: 2.8rem;
 }
 .nav nav {
   padding: 0 20px;
@@ -5957,6 +5959,7 @@ select {
 }
 .nav nav .header-logo img {
   height: 35px;
+  display: inline-block;
 }
 .nav nav .nav-links {
   list-style: none;
@@ -5975,7 +5978,7 @@ select {
 .nav nav .nav-links a li:hover,
 .nav nav .nav-links a li.active {
   border-color: inherit;
-  padding: 5px 0px;
+  padding: 0px 0px;
 }
 .nav nav .nav-left {
   display: flex;
@@ -6048,6 +6051,7 @@ footer .footer-row a {
 footer .footer-row img {
   display: inline-block;
   margin: 0px 10px;
+  max-width: 250px;
 }
 
 .cards {
@@ -6065,6 +6069,9 @@ footer .footer-row img {
   margin: 1rem 0.25em;
   border: 1px solid rgba(0, 0, 0, 0.125);
   border-radius: 0.25rem;
+  background-color: #fff;
+  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2),
+    0 1px 5px 0 rgba(0, 0, 0, 0.12);
 }
 .cards .card > a {
   color: unset;
@@ -6073,9 +6080,10 @@ footer .footer-row img {
 .cards .card .card-header {
   background-color: red;
   padding: 0.75rem 1.25rem;
-  background-color: rgba(0, 0, 0, 0.03);
   border: 0px solid rgba(0, 0, 0, 0.125);
   border-bottom-width: 1px;
+  background-color: maroon;
+  color: #fff;
 }
 @media screen and (max-width: 576px) {
   .cards .card .card-header {
@@ -6104,6 +6112,20 @@ footer .footer-row img {
   display: inline;
 }
 
+@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');
@@ -6144,6 +6166,20 @@ 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,
@@ -6162,11 +6198,6 @@ p {
   margin: auto;
   padding-bottom: 300px;
 }
-@media screen and (max-width: 576px) {
-  #content {
-    padding: 20px;
-  }
-}
 
 .text-center {
   text-align: center;
@@ -6252,16 +6283,40 @@ body.hero {
   justify-content: center;
   text-align: center;
 }
+#hero > div > div {
+  border: 1px solid red;
+  padding: 0;
+}
+#hero h1 img,
+#hero h2 img,
+#hero h3 img,
+#hero h4 img {
+  vertical-align: middle;
+  display: inline-block;
+}
+#hero h1 small,
+#hero h2 small,
+#hero h3 small,
+#hero h4 small {
+  font-size: 0.5em;
+  vertical-align: text-top;
+}
 #hero h1 {
-  font-size: 7vw;
+  font-size: 15vw;
   font-weight: normal;
+  line-height: 15vw;
+}
+#hero h1 img {
+  width: 18vw;
+  height: auto;
 }
 #hero h2 {
-  font-size: 4vw;
   font-weight: lighter;
+  font-size: 8vw;
+  line-height: 8vw;
 }
 #hero h3 {
-  font-size: 2vw;
+  font-size: 3vw;
   font-weight: lighter;
 }
 #hero a {
@@ -6272,11 +6327,40 @@ body.hero {
   width: 20%;
   opacity: 0.3;
 }
-@media only screen and (max-width: 576px) {
+@media only screen and (max-width: 1200px) {
+  #hero h1 {
+    font-size: 20vw;
+    line-height: 17vw;
+  }
+  #hero h1 img {
+    width: 28vw;
+  }
   #hero h2 {
-    font-size: 6vw;
+    font-size: 12vw;
+    line-height: 12vw;
   }
   #hero h3 {
     font-size: 4vw;
   }
 }
+@media only screen and (max-width: 992px) {
+  #hero h1 img {
+    width: 34vw;
+  }
+  #hero h3 {
+    font-size: 5vw;
+  }
+}
+@media only screen and (max-width: 576px) {
+  #hero h1 {
+    font-size: 22vw;
+    line-height: 20vw;
+  }
+  #hero h2 {
+    font-size: 16vw;
+    line-height: 16vw;
+  }
+  #hero h3 {
+    font-size: 9vw;
+  }
+}