Refactor jumbotron styles

app/assets/stylesheets/_variables.scss

@@ -9,4 +9,5 @@ $list-group-border-width: 0;
 
 :root {
   --background: #f0edf4;
+  --primary-text: #ffffff;
 }

app/assets/stylesheets/application.css.scss

@@ -60,6 +60,8 @@ body { padding-top: 50px; }
   display: none
 }
 
+@import "components/jumbotron";
+
 @import "base";
 
 @import "font-awesome";

app/assets/stylesheets/base.css.scss

@@ -36,28 +36,6 @@ body {
   margin-bottom: 1.5em;
 }
 
-.j2-jumbo {
-  background-color: darken($navbar-inverse-bg, 10%);
-  color: #fff;
-}
-
-.j2-jumbo h1, .j2-jumbo h2, .j2-jumbo h3, .j2-jumbo h4, .j2-jumbo h5, .j2-jumbo h6 {
-  color: #fff;
-}
-
-.j2-jumbo a, .j2-jumbo a:hover {
-  color: #fff;
-  opacity: 0.6;
-}
-
-.j2-jumbo a:hover {
-  opacity: 1;
-}
-
-.j2-jumbo a .btn {
-  opacity: 1;
-}
-
 .smiles {
   margin-bottom: 7px;
 }
@@ -162,29 +140,6 @@ body {
   border-bottom-right-radius: 2px;
 }
 
-.frontpage {
-  margin-top: -50px;
-  height: 100vh;
-  display: table;
-}
-
-.frontpage-scroll {
-  display: block;
-  position: absolute;
-  bottom: 0;
-  margin: 0 auto;
-  padding: 20px;
-  text-align: center;
-  z-index: 1000;
-  font-size: 32px;
-  width: 100%;
-}
-
-.frontpage-content {
-  display: table-cell;
-  vertical-align: middle;
-}
-
 .frontpage-features {
   padding-top: 20px;
   padding-bottom: 10px;
@@ -229,47 +184,10 @@ body {
   margin: 10px;
 }
 
-.btn-register {
-  opacity: 1 !important;
-  background: transparent;
-  color: #fff;
-  border: 4px #fff solid;
-  border-radius: 4px;
-  transition: background-color .25s ease-in-out;
-
-  &:hover {
-    background-color: #fff;
-    color: darken($navbar-inverse-bg, 10%) !important;
-    transition: background-color .25s ease-in-out;
-  }
-}
-
 .lead {
   margin-bottom: 3px;
 }
 
-.particle-jumbotron {
-  padding: 0px;
-  overflow: hidden;
-  position: relative;
-  width: 100%;
-}
-
-.particle-content {
-  position: relative;
-  top: 0;
-  padding-top: 48px;
-  padding-bottom: 48px;
-  padding-left: 30px;
-  padding-right: 30px;
-}
-
-#particles {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-}
-
 .icon-showcase {
   font-size: 78px;
   text-align: center;

app/assets/stylesheets/components/_jumbotron.scss

@@ -0,0 +1,73 @@
+.jumbotron {
+  $this: &;
+  display: flex;
+  background-color: var(--primary);
+  color: var(--primary-text);
+  text-align: center;
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    color: var(--primary-text);
+  }
+
+  a:not(.btn) {
+    color: var(--primary-text);
+    opacity: 0.6;
+
+    &:hover {
+      opacity: 1;
+    }
+
+    .btn {
+      opacity: 1;
+    }
+  }
+
+  &__scroller {
+    display: block;
+    position: absolute;
+    bottom: 0;
+    margin: 0 auto;
+    padding: 20px;
+    text-align: center;
+    z-index: 1000;
+    font-size: 32px;
+    width: 100%;
+  }
+
+  &__content {
+    width: 100%;
+    align-self: center;
+  }
+
+  &--frontpage {
+    margin-top: -50px;
+    height: 100vh;
+  }
+
+  &--particles {
+    padding: 0px;
+    overflow: hidden;
+    position: relative;
+    width: 100%;
+
+    #{$this}__particles {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+    }
+
+    #{$this}__content {
+      position: relative;
+      top: 0;
+      padding-top: 48px;
+      padding-bottom: 48px;
+      padding-left: 30px;
+      padding-right: 30px;
+    }
+  }
+}

app/views/discover/index.html.haml

@@ -1,7 +1,7 @@
 - provide(:title, generate_title("Discover"))
-.jumbotron.j2-jumbo.text-center.particle-jumbotron
+.jumbotron.jumbotron--particles
-  #particles
+  #particles.jumbotron__particles
-  .particle-content
+  .jumbotron__content
     %h1= t 'views.discover.title'
     %p= t('views.discover.subtitle', app_title: APP_CONFIG['site_name'])
 .container

app/views/static/about.html.haml

@@ -1,7 +1,7 @@
 - provide(:title, generate_title("About"))
-.jumbotron.j2-jumbo.text-center.particle-jumbotron
+.jumbotron.jumbotron--particles
-  #particles
+  #particles.jumbotron__particles
-  .particle-content
+  .jumbotron__content
     %h1= APP_CONFIG['site_name']
     %p= t 'views.about.subtitle'
 .container

app/views/static/faq.html.haml

@@ -1,7 +1,7 @@
 - provide(:title, generate_title("Frequently Asked Questions"))
-.jumbotron.j2-jumbo.text-center.particle-jumbotron
+.jumbotron.jumbotron--particles
-  #particles
+  #particles.jumbotron__particles
-  .particle-content
+  .jumbotron__content
     %h1 Frequently Asked Questions
     %p
       Everything you want to know about

app/views/static/front.html.haml

@@ -1,16 +1,16 @@
 - provide(:title, "#{APP_CONFIG['site_name']}")
-.jumbotron.j2-jumbo.text-center.particle-jumbotron.frontpage
+.jumbotron.jumbotron--particles.jumbotron--frontpage
-  .frontpage-scroll
+  .jumbotron__scroller
     %a.arctic_scroll{href: "#content", data: {offset: "-80"} }
       %i.fa.fa-chevron-down
-  #particles
+  #particles.jumbotron__particles
-  .particle-content.frontpage-content
+  .jumbotron__content
     .container
       = render 'layouts/messages'
       %h1= APP_CONFIG['site_name']
       %p= t 'views.front.subtitle'
       %p
-        %a.btn.btn-register.btn-lg{href: url_for(new_user_registration_path)}
+        %a.btn.btn-outline-light.btn-lg{href: url_for(new_user_registration_path)}
           Register now
       %small
         Already a member?