Break out components.scss

2020-06-02 21:11:01 -05:00
parent f563f6234b
commit 077278b7dc
35 changed files with 5218 additions and 5248 deletions
--- a/app/styles/components/getting-started.scss
+++ b/app/styles/components/getting-started.scss
@ -0,0 +1,77 @@
+.getting-started__wrapper,
+.getting-started,
+.flex-spacer {
+  background: var(--brand-color-med);
+}
+
+.getting-started__wrapper {
+  flex: 0 0 auto;
+}
+
+.flex-spacer {
+  flex: 1 1 auto;
+}
+
+.getting-started {
+  overflow: auto;
+
+  &__footer {
+    flex: 0 0 auto;
+    padding: 10px;
+    padding-top: 20px;
+    opacity: 0.7;
+
+    ul {
+      margin-bottom: 10px;
+    }
+
+    ul li {
+      display: inline;
+    }
+
+    p {
+      color: var(--primary-text-color);
+      font-size: 13px;
+      margin-bottom: 20px;
+
+      a {
+        color: var(--primary-text-color-faint);
+        text-decoration: underline;
+        opacity: 0.8;
+      }
+    }
+
+    a {
+      text-decoration: none;
+      color: var(--primary-text-color-faint);
+      opacity: 0.8;
+
+      &:hover,
+      &:focus,
+      &:active {
+        text-decoration: underline;
+      }
+    }
+  }
+
+  &__trends {
+    background: var(--brand-color-med);
+    flex: 0 1 auto;
+
+    @media screen and (max-height: 810px) {
+      .trends__item:nth-child(3) {
+        display: none;
+      }
+    }
+
+    @media screen and (max-height: 720px) {
+      .trends__item:nth-child(2) {
+        display: none;
+      }
+    }
+
+    @media screen and (max-height: 670px) {
+      display: none;
+    }
+  }
+}