Separate hero css (#521)

Author: jarrodmillman

assets/theme-css/hero.css

@@ -0,0 +1,114 @@
+.hero {
+  align-items: stretch;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+
+.hero ul {
+  border-bottom: none;
+}
+
+.hero-container {
+  width: 100vw;
+}
+
+.hero-content {
+  display: flex;
+  flex-direction: column;
+}
+
+.hero-title-content {
+  align-items: center;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  width: 100%;
+  line-height: 1.5;
+}
+
+.hero-title {
+  align-items: center;
+  display: flex;
+  flex-direction: row;
+  font-family: var(--fontFamily), sans-serif;
+  font-weight: 900;
+  font-size: 6em;
+  color: var(--pst-color-text-base);
+  justify-content: center;
+  margin-left: 1em;
+  margin-bottom: 0.2em;
+  margin-right: 0.5em;
+  text-align: right;
+}
+
+.hero-logo {
+  align-self: start;
+  margin: 0.1em;
+  margin-left: 0.25em;
+  max-height: 0.8em;
+}
+
+.hero-subtitle {
+  color: var(--pst-color-text-base);
+  font-size: 1em;
+  max-width: 550px;
+}
+
+.hero-cta {
+  padding: 15px 0;
+  display: flex;
+  flex-wrap: wrap;
+  align-self: center;
+}
+
+.cta-button {
+  margin-right: 1em;
+  min-width: 15rem;
+  padding-left: 1.5rem;
+  padding-right: 1.5rem;
+  width: auto;
+  height: 3rem;
+  text-transform: uppercase;
+  letter-spacing: 1.5px;
+  font-weight: 500;
+  color: var(--colorSecondaryLight);
+  background-color: var(--colorPrimaryDark);
+  border: none;
+  border-radius: 25px;
+  outline: none;
+  cursor: pointer;
+}
+
+.cta-button:hover {
+  color: var(--colorPrimaryLight);
+}
+
+@media only screen and (max-width: 1090px) {
+  .hero-content {
+    flex-direction: column;
+    padding: 0;
+    align-items: center;
+  }
+
+  .hero-title-content {
+    flex-direction: column;
+    align-items: center;
+  }
+}
+
+@media only screen and (max-width: 600px) {
+  .flex-column {
+    margin: 0 30px;
+  }
+
+  .hero-title {
+    font-size: 4em;
+  }
+}
+
+@media only screen and (max-width: 400px) {
+  .hero-title {
+    flex-direction: column;
+  }
+}

assets/theme-css/styles.css

@@ -96,122 +96,14 @@ a > code {
   margin-left: 0.5em;
 }
 
-.hero {
-  align-items: stretch;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-}
-
-.hero ul {
-  border-bottom: none;
-}
-
-.hero-container {
-  width: 100vw;
-}
-
-.hero-content {
-  display: flex;
-  flex-direction: column;
-}
-
-.hero-title-content {
-  align-items: center;
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  width: 100%;
-  line-height: 1.5;
-}
-
-.hero-title {
-  align-items: center;
-  display: flex;
-  flex-direction: row;
-  font-family: var(--fontFamily), sans-serif;
-  font-weight: 900;
-  font-size: 6em;
-  color: var(--pst-color-text-base);
-  justify-content: center;
-  margin-left: 1em;
-  margin-bottom: 0.2em;
-  margin-right: 0.5em;
-  text-align: right;
-}
-
-.hero-logo {
-  align-self: start;
-  margin: 0.1em;
-  margin-left: 0.25em;
-  max-height: 0.8em;
-}
-
-.hero-subtitle {
-  color: var(--pst-color-text-base);
-  font-size: 1em;
-  max-width: 550px;
-}
-
-.hero-cta {
-  padding: 15px 0;
-  display: flex;
-  flex-wrap: wrap;
-  align-self: center;
-}
-
-.cta-button {
-  margin-right: 1em;
-  min-width: 15rem;
-  padding-left: 1.5rem;
-  padding-right: 1.5rem;
-  width: auto;
-  height: 3rem;
-  text-transform: uppercase;
-  letter-spacing: 1.5px;
-  font-weight: 500;
-  color: var(--colorSecondaryLight);
-  background-color: var(--colorPrimaryDark);
-  border: none;
-  border-radius: 25px;
-  outline: none;
-  cursor: pointer;
-}
-
-.cta-button:hover {
-  color: var(--colorPrimaryLight);
-}
 #backtotop.visible #backtotop-color:hover {
   background: var(--colorYellow);
 }
 
-@media only screen and (max-width: 1090px) {
-  .hero-content {
-    flex-direction: column;
-    padding: 0;
-    align-items: center;
-  }
-
-  .hero-title-content {
-    flex-direction: column;
-    align-items: center;
-  }
-}
-
 @media only screen and (max-width: 600px) {
   .flex-column {
     margin: 0 30px;
   }
-
-  .hero-title {
-    font-size: 4em;
-  }
-}
-
-@media only screen and (max-width: 400px) {
-  .hero-title {
-    flex-direction: column;
-  }
 }
 
 figcaption {