add apollo ratings and github star link; todo add mini ratings to hero (#29)

* add apollo ratings and github star link; todo add mini ratings to hero

* mobile style fixes

* move reviews to top; move star to startos section; make lines smaller

* dont display ticker on mobile

src/assets/styles/be-your-own.scss

@@ -55,6 +55,12 @@
   }
 }
 
+@media screen and (max-width: 500px) {
+  #ticker {
+    display: none;
+  }
+}
+
 #be-your-own {
   display: flex;
   flex-direction: column;

src/assets/styles/landing.scss

@@ -40,7 +40,7 @@ body {
 
 }
 
-main{
+main {
   display:flex;
   flex-direction: column;
   align-items: center;
@@ -311,6 +311,75 @@ a.btn {
   transform: scaleX(-1);
 }
 
+.ap-widget-container {
+  width: 90vw;
+  text-align: center;
+
+  .glider-next,
+  .glider-prev {
+    img {
+      filter: invert(1);
+    }
+  }
+
+  a {
+    color: var(--c-red1);
+    font-size: 0.7rem !important;
+  }
+
+  .ap-avg-rat-c {
+    // font-variant: all-small-caps;
+    text-transform: none;
+    font-size: 0.7rem !important;
+  }
+
+  .glider-slide:hover {
+    background-color: transparent !important;
+    opacity: 50%;
+  }
+
+  .glider-dots {
+    padding: 1rem;
+  }
+
+  .glider-track {
+    display: grid;
+    grid-auto-flow: column;
+    gap: 1rem;
+    text-align: left;
+  }
+
+  .ap-review {
+    height: 100% !important;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    margin: 0 !important;
+    padding: 0 !important;
+  }
+
+  .glider-dot.active {
+    background: var(--c-red1);
+  }
+
+  .glider-contain {
+    padding-left: 80px;
+    padding-right: 80px;
+  }
+
+  .ap-review-author,
+  .ap-read-more {
+    color: var(--c-gray3) !important;
+  }
+
+  .ap-logo-c {
+    display: none!important;
+  }
+
+  .ap-rev-stars {
+    display: flex;
+  }
+}
 
 @media screen and (max-width: 500px) {
   #hero{
@@ -319,4 +388,15 @@ a.btn {
   .line svg{
     max-height: 30vh;
   }
+  .ap-widget-container {
+    .ap-logo-c {
+      width: 65px !important;
+      border-radius: 2.7rem;
+      padding: 6px 8px !important;
+    }
+
+    .glider-contain {
+      padding: 0 40px;
+    }
+  }
 }

src/assets/styles/powered-by.scss

@@ -74,12 +74,38 @@ svg a:visited {
   justify-content: center;
 }
 
+.ratings {
+  display: flex;
+  flex-direction: row;
+  gap: 1rem;
+  justify-content: center;
+  margin: 1rem;
+
+  &-mobile {
+    display: none
+  }
+
+  &-desktop {
+    display: block;
+  }
+}
+
 @media only screen and (max-width: 500px) {
   .container {
     width: 100vw;
   }
 
-  section#powered-by .inline img{
+  .ratings {
+    &-mobile {
+      display: block;
+    }
+
+    &-desktop {
+      display: none;
+    }
+  }
+
+  section#powered-by .inline img {
     padding-bottom: 4.7rem;
   }
 }