Extract Footer component

Author: Turbo87

app/components/footer.hbs

@@ -0,0 +1,17 @@
+<footer local-class="footer">
+  <div local-class='after-main-links'>
+    <a href='https://doc.rust-lang.org/cargo/getting-started/installation.html'>Install</a>
+    <span local-class="sep">|</span>
+    <a href='https://doc.rust-lang.org/cargo/'>Getting Started</a>
+    <span local-class="sep">|</span>
+    <a href='https://doc.rust-lang.org/cargo/guide/'>Guide</a>
+    <span local-class="sep">|</span>
+    <a href='mailto:[email protected]'>Send us an email</a>
+    <span local-class="sep">|</span>
+    <a href='https://www.rust-lang.org/policies/security'>Report a security issue</a>
+    <span local-class="sep">|</span>
+    <a href='https://www.rust-lang.org/policies/privacy'>Privacy notice</a>
+    <span local-class="sep">|</span>
+    <LinkTo @route="policies">Policies</LinkTo>
+  </div>
+</footer>

app/components/footer.module.css

@@ -0,0 +1,38 @@
+.footer {
+    display: flex;
+    justify-content: center;
+    width: 100%;
+}
+
+.sep {
+    margin: 0 10px;
+    color: var(--separator-color);
+}
+
+.after-main-links {
+    composes: width-limit from '../styles/application.module.css';
+
+    margin: 40px;
+    text-align: center;
+
+    a { color: white; }
+    a:hover { color: darken(white, 10%); }
+
+    @media only screen and (max-width: 450px) {
+        margin: 20px;
+        .sep { display: none; }
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        a {
+            width: 50%;
+            font-size: 110%;
+            padding: 5px;
+
+            &:not(:first-child) {
+                border-top: 1px solid var(--separator-color);
+            }
+        }
+    }
+}

app/styles/application.module.css

@@ -71,19 +71,10 @@ noscript {
     }
 }
 
-.main,
-.footer {
+.main {
     display: flex;
     justify-content: center;
     width: 100%;
-}
-
-.sep {
-    margin: 0 10px;
-    color: var(--separator-color);
-}
-
-.main {
     background-color: var(--main-bg);
     color: var(--main-color);
 }
@@ -95,34 +86,6 @@ noscript {
     margin: 15px;
 }
 
-.after-main-links {
-    composes: width-limit;
-
-    margin: 40px;
-    text-align: center;
-
-    a { color: white; }
-    a:hover { color: darken(white, 10%); }
-
-    @media only screen and (max-width: 450px) {
-        margin: 20px;
-        .sep { display: none; }
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-
-        a {
-            width: 50%;
-            font-size: 110%;
-            padding: 5px;
-
-            &:not(:first-child) {
-                border-top: 1px solid var(--separator-color);
-            }
-        }
-    }
-}
-
 .fork-me {
     position: absolute;
     top: 0;

app/templates/application.hbs

@@ -12,23 +12,7 @@
   </div>
 </main>
 
-<footer local-class="footer">
-  <div local-class='after-main-links'>
-    <a href='https://doc.rust-lang.org/cargo/getting-started/installation.html'>Install</a>
-    <span local-class="sep">|</span>
-    <a href='https://doc.rust-lang.org/cargo/'>Getting Started</a>
-    <span local-class="sep">|</span>
-    <a href='https://doc.rust-lang.org/cargo/guide/'>Guide</a>
-    <span local-class="sep">|</span>
-    <a href='mailto:[email protected]'>Send us an email</a>
-    <span local-class="sep">|</span>
-    <a href='https://www.rust-lang.org/policies/security'>Report a security issue</a>
-    <span local-class="sep">|</span>
-    <a href='https://www.rust-lang.org/policies/privacy'>Privacy notice</a>
-    <span local-class="sep">|</span>
-    <LinkTo @route="policies">Policies</LinkTo>
-  </div>
-</footer>
+<Footer/>
 
 <a href='https://github.com/rust-lang/crates.io' local-class='fork-me'>
   <img src='/assets/forkme.png' alt="Fork me on GitHub">