feat(divider): extract hr styling into shared component styles

Author: sarmstead

src/css/app.css

@@ -2,30 +2,31 @@
 @import './base/typography.css';
 @import './base/colors.css';
 
-/* /1* Components *1/ */
+/* Components */
 @import './components/button.css';
 @import './components/get-involved.css';
 @import './components/sponsors.css';
 @import './components/profile-image.css';
 @import './components/static-content.css';
 @import './components/back.css';
+@import './components/divider.css';
 
-/* /1* Layout *1/ */
+/* Layout */
 @import './layout/reset.css';
 @import './layout/navigation.css';
 @import './layout/dropdown.css';
 @import './layout/container.css';
 /* @import './layout/header.css'; */
 /* @import './layout/footer.css'; */
 
-/* /1* Pages *1/ */
+/* Pages */
 @import './pages/post.css';
 @import './pages/home.css';
 @import './pages/conferences.css';
 @import './pages/open-source.css';
 
 @import './modern.css';
 
-/* Vendor */
+/* Vendors */
 @import './vendors/ghost.css';
 @import '../../node_modules/tocbot/dist/tocbot.css';

src/css/components/divider.css

@@ -0,0 +1,5 @@
+hr {
+    border: 3px solid var(--yellow);
+    width: 70px;
+    margin: 0 0 30px;
+}

src/css/components/get-involved.css

@@ -10,9 +10,7 @@
     }
 
     hr {
-        border: 3px solid var(--yellow);
-        margin-bottom: 32px;
-        width: 70px;
+        margin: 0 auto 30px;
     }
 
     span[data-members-error],
@@ -39,6 +37,7 @@
         font-weight: 500;
         line-height: 3rem;
         text-align: center;
+        margin-bottom: 16px;
     }
 
     .get-involved__row {
@@ -114,10 +113,6 @@
     @media (min-width: 1440px) {
         padding: 96px 0;
 
-        hr {
-            margin-bottom: 48px;
-        }
-
         .get-involved__row {
             grid-template-columns: repeat(2, minmax(0, 1fr));
         }

src/css/pages/home.css

@@ -1,9 +1,4 @@
 .home-template {
-    hr {
-        border: 3px solid var(--yellow);
-        width: 70px;
-    }
-
     .home-template__hero {
         display: flex;
         flex-direction: column;
@@ -68,10 +63,6 @@
     .home-template__community__inner {
         max-width: 1135px;
         margin: auto;
-
-        hr {
-            margin: 0 0 30px;
-        }
     }
 
     .home-template__pillars__details,
@@ -268,7 +259,7 @@
         }
 
         hr {
-            margin-bottom: 30px;
+            margin: 0 auto 30px;
         }
     }
 
@@ -297,13 +288,6 @@
             padding: 96px 56px;
         }
 
-        .home-template__pillars__inner,
-        .home-template__community__inner {
-            hr {
-                margin: 0 0 60px 0;
-            }
-        }
-
         .home-template__pillars__details,
         .home-template__community__details {
             padding: 80px 48px;