add promo video to hero and reorganize reviews (#36)

* add promo video to hero and reorganize reviews

* update video link

* update video link

src/_includes/components/landing/hero.njk

@@ -4,6 +4,12 @@
     <span>sovereign computing</span>
   </div>
 </section>
-<section id="reviews">
+<div class="video-container">
-  <div id= "ap-widget-1" class="ap-widget--carousel" data-options='{"prod_code": "startos", "show": "top" , "theme":  "dark", "template_id": "carousel", "text_color": "#F5F5F5" , "bg_color": "transparent" }'></div>
+  <div class="video-wrapper">
-</section>
+    <iframe src="https://www.youtube.com/embed/52XMf_NabFA?si=aIlLu0puOOY2_r0b" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
+
+  </div>
+</div>
+<div class="ratings">
+  <div id= "ap-widget-2" class="ap-widget--mini" data-options='{"prod_code": "startos", "theme":  "dark", "template_id": "mini", "text_color": "#F5F5F5" , "bg_color": "transparent" }'></div>
+</div>

src/_includes/components/landing/powered-by.njk

@@ -1,9 +1,9 @@
 <section id="powered-by">
   <img class="logo" src="/assets/images/logomark.png" alt="Logomark">
   <h1>Powered by StartOS</h1>
-  <div class="ratings">
+  <section id="reviews">
-    <div id= "ap-widget-2" class="ap-widget--mini" data-options='{"prod_code": "startos", "theme":  "dark", "template_id": "mini", "text_color": "#F5F5F5" , "bg_color": "transparent" }'></div>
+    <div id= "ap-widget-1" class="ap-widget--carousel" data-options='{"prod_code": "startos", "show": "top" , "theme":  "dark", "template_id": "carousel", "text_color": "#F5F5F5" , "bg_color": "transparent" }'></div>
-  </div>
+  </section>
   <p>Just as Windows and macOS made it possible for anyone to own a personal computer, StartOS makes it possible for anyone to own a personal server.</p>
   <p>StartOS facilitates the entire process of discovering, installing, configuring, and using any variety of open-source software from anywhere in the world without trusting anyone.</p>
   <p>

src/assets/styles/landing.scss

@@ -1,17 +1,17 @@
-@use 'pitch';
+@use "pitch";
-@use 'products';
+@use "products";
-@use 'infographics';
+@use "infographics";
-@use 'bitcoin';
+@use "bitcoin";
-@use 'be-your-own';
+@use "be-your-own";
-@use 'powered-by';
+@use "powered-by";
-@use 'support';
+@use "support";
-@use 'dev';
+@use "dev";
-@use 'community';
+@use "community";
-
 
 body {
   margin: 0;
-  background: linear-gradient(0deg, var(--c-bkg), var(--c-bkg)), url("/assets/images/bkg.jpg");
+  background: linear-gradient(0deg, var(--c-bkg), var(--c-bkg)),
+    url("/assets/images/bkg.jpg");
   background-blend-mode: color, normal;
   background-size: cover;
   background-attachment: fixed;
@@ -25,19 +25,19 @@ body {
     position: relative;
   }
   body::after {
-    content:'';
+    content: "";
     position: fixed;
     z-index: -1;
     width: 100vw;
     height: 100vh;
     top: 0;
     left: 0;
-    background: linear-gradient(0deg, var(--c-bkg), var(--c-bkg)), url("/assets/images/bkg.jpg");
+    background: linear-gradient(0deg, var(--c-bkg), var(--c-bkg)),
+      url("/assets/images/bkg.jpg");
     background-blend-mode: color, normal;
     background-size: auto 100vh;
     background-repeat: no-repeat;
   }
-
 }
 
 main {
@@ -53,11 +53,11 @@ section {
 }
 
 .subsection {
-  
 }
 
 .line {
-  padding: 1.8rem 0 1.4rem 0;
+  // padding: 1.8rem 0 1.4rem 0;
+  padding: 4rem 0 3.8rem 0;
 }
 
 .line-primary path {
@@ -81,7 +81,8 @@ section {
 .section--inverse {
   background-color: var(--c-bkg-light-fade2);
   backdrop-filter: blur(1rem);
-  h1, p {
+  h1,
+  p {
     color: var(--c-bkg);
   }
   .svg-primary {
@@ -122,7 +123,7 @@ nav {
     padding-top: 1rem;
     text-transform: uppercase;
     font-weight: 400;
-    letter-spacing: .1ch;
+    letter-spacing: 0.1ch;
   }
   @keyframes fadeIn {
     0% {
@@ -134,24 +135,44 @@ nav {
     }
   }
   @keyframes fadeIn {
-    0% { opacity: 0; }
+    0% {
-    100% { opacity: 1; }
+      opacity: 0;
+    }
+    100% {
+      opacity: 1;
+    }
   }
   @-moz-keyframes fadeIn {
-    0% { opacity: 0; }
+    0% {
-    100% { opacity: 1; }
+      opacity: 0;
+    }
+    100% {
+      opacity: 1;
+    }
   }
   @-webkit-keyframes fadeIn {
-    0% { opacity: 0; }
+    0% {
-    100% { opacity: 1; }
+      opacity: 0;
+    }
+    100% {
+      opacity: 1;
+    }
   }
   @-o-keyframes fadeIn {
-    0% { opacity: 0; }
+    0% {
-    100% { opacity: 1; }
+      opacity: 0;
+    }
+    100% {
+      opacity: 1;
+    }
   }
   @-ms-keyframes fadeIn {
-    0% { opacity: 0; }
+    0% {
-    100% { opacity: 1; }
+      opacity: 0;
+    }
+    100% {
+      opacity: 1;
+    }
   }
 }
 
@@ -307,11 +328,15 @@ a.btn {
 }
 
 // flipping some lines horizontally
-#bitcoin-to-be, #be-to-powered, #powered-to-support, #support-to-dev {
+#bitcoin-to-be,
+#be-to-powered,
+#powered-to-support,
+#support-to-dev {
   transform: scaleX(-1);
 }
 
 section#reviews {
+  padding: 2.5rem 0 1rem 0;
   overflow: visible;
   z-index: 6;
   position: relative;
@@ -321,7 +346,8 @@ section#reviews {
     font-size: 0.9rem;
   }
 
-  .ap-widget__rev-stars, .ap-widget--carousel__first-row img {
+  .ap-widget__rev-stars,
+  .ap-widget--carousel__first-row img {
     display: unset;
     width: auto;
   }
@@ -334,6 +360,7 @@ section#reviews {
     display: flex;
     flex-direction: column;
     align-items: center;
+    justify-content: start;
     margin: 0 !important;
     padding: 0 !important;
 
@@ -343,7 +370,8 @@ section#reviews {
     }
   }
 
-  .ap-widget__author, .ap-widget__prod-rating-text--carousel  {
+  .ap-widget__author,
+  .ap-widget__prod-rating-text--carousel {
     font-size: 0.7rem;
     color: var(--c-gray3) !important;
 
@@ -357,7 +385,6 @@ section#reviews {
     }
   }
 
-
   .glider-track {
     display: grid;
     grid-auto-flow: column;
@@ -377,7 +404,62 @@ section#reviews {
   }
 }
 
+.ratings {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding-top: 2rem;
+
+  &-box {
+    align-self: end;
+  }
+
+  img {
+    display: unset;
+    width: auto;
+  }
+
+  .ap-widget__logo--mini {
+    display: none;
+  }
+
+  .ap-widget__prod-rating-text--mini {
+    a {
+      color: var(--c-red1) !important;
+
+      &:hover {
+        font-size: unset;
+        font-weight: bold;
+      }
+    }
+  }
+}
+
+.video-container {
+  width: 70vw;
+}
+
+.video-wrapper {
+  position: relative;
+  padding-bottom: 56.25%;
+  /* 16:9 */
+  height: 0;
+
+  iframe {
+    border: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+  }
+}
+
 @media screen and (max-width: 500px) {
+  #hero {
+    margin-bottom: calc(-1 * (21vh - 4.5rem - (min(32.385rem, 58.3vw) / 2)));
+  }
+
   .line svg {
     max-height: 17vh;
   }
@@ -397,4 +479,20 @@ section#reviews {
       width: 9px;
     }
   }
+
+  .ratings {
+    &-gh-mobile {
+      display: block;
+    }
+
+    &-gh-desktop {
+      display: none;
+    }
+  }
+}
+
+@media only screen and (max-width: 1100px) {
+  .video-container {
+    width: 90vw;
+  }
 }

src/assets/styles/main.scss

@@ -477,7 +477,7 @@ nav {
   line-height: 1.4;
 }
 
-.center {
+.center-content {
   width: fit-content;
   align-self: center;
 }

src/assets/styles/peripheral.scss

@@ -533,26 +533,6 @@ section#creators {
   }
 }
 
-.video-container {
-  width: 70vw;
-}
-
-.video-wrapper {
-  position: relative;
-  padding-bottom: 56.25%;
-  /* 16:9 */
-  height: 0;
-
-  iframe {
-    border: none;
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-  }
-}
-
 a.btn {
   position: relative;
   padding: 0.7rem 1.7rem;
@@ -572,7 +552,7 @@ a.btn {
   }
 }
 
-.center {
+.text-center {
   text-align: center;
 }
 
@@ -673,12 +653,6 @@ section#faq {
   }
 }
 
-@media only screen and (max-width: 1100px) {
-  .video-container {
-    width: 90vw;
-  }
-}
-
 @media only screen and (max-width: 500px) {
   section {
     --width: 40ch;

src/assets/styles/powered-by.scss

@@ -46,7 +46,7 @@ section#powered-by {
     span {
       background-color: var(--c-text-accent);
       border-radius: 999px;
-      padding: .15em .6em;
+      padding: 0.15em 0.6em;
       transition: var(--t-simple);
       white-space: nowrap;
     }
@@ -61,7 +61,6 @@ section#powered-by {
       position: absolute;
     }
   }
-
 }
 svg a:link,
 svg a:visited {
@@ -74,48 +73,11 @@ svg a:visited {
   justify-content: center;
 }
 
-.ratings {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  margin: 1rem;
-
-  img {
-    display: unset;
-    width: auto;
-  }
-
-  .ap-widget__logo--mini {
-    display: none;
-  }
-
-  .ap-widget__prod-rating-text--mini {
-    a {
-      color: var(--c-red1) !important;
-
-      &:hover {
-        font-size: unset;
-        font-weight: bold;
-      }
-    }
-  }
-}
-
 @media only screen and (max-width: 500px) {
   .container {
     width: 100vw;
   }
 
-  .ratings {
-    &-gh-mobile {
-      display: block;
-    }
-
-    &-gh-desktop {
-      display: none;
-    }
-  }
-
   section#powered-by .inline img {
     padding-bottom: 4.7rem;
   }

src/contribute.njk

@@ -49,7 +49,7 @@ layout: layouts/peripheral.njk
 
   <h4>Benefits</h4>
   <p>Do what you love.  Get paid in Bitcoin.  Get early access to the bleeding edge of Sovereign Computing.</p>
-  <a href="{{ site.contribute.techDetails }}" class="btn center" rel="noopener noreferrer" target="_blank">More details</a>
+  <a href="{{ site.contribute.techDetails }}" class="btn center-content" rel="noopener noreferrer" target="_blank">More details</a>
 </section>
 <section id="creators">
   <h2>Creators</h2>

src/jobs.njk

@@ -9,7 +9,7 @@ layout: layouts/peripheral.njk
     <img class="img-shadow" src="/assets/images/jobs-hero.png" alt=""/>
   </div>
   <div id="logo">
-    <h1 class="center">
+    <h1 class="text-center">
       <span>Jobs</span>
     </h1>
   </div>
@@ -52,11 +52,11 @@ layout: layouts/peripheral.njk
     </ul>
   {% endif %}
   {% if jobs|length == 0 %}
-    <p class="center">
+    <p class="text-center">
       There are no open positions at Start9 at this time.
     </p>
     <br/>
-    <p class="center">
+    <p class="text-center">
       Check back soon!
     </p>
   {% endif %}