All: Change footer to JS module

elaineleung · Nov 8, 2023 · 62f5caf · 62f5caf
1 parent 64bdedc
commit 62f5caf
Show file tree

Hide file tree

Showing 42 changed files with 300 additions and 311 deletions.
diff --git a/blogrlandingpage/index.html b/blogrlandingpage/index.html
@@ -259,15 +259,10 @@ <h4 class="fw-medium">Connect</h4>
         </nav>
       </div>
       <div class="attribution / fs-small clr-neutral-300">
-        <div class="attibution-content">
-          <span>
-            Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. Coded by
-            <a href="https://twitter.com/elaineclleung">Elaine</a>.</span>
-          <span class="block-footer">
-            Other <a href="https://elaineleung.github.io/frontendmentor/">Frontend Mentor Challenges</a> by Elaine</span>
-        </div>   
+
       </div>
     </footer>
   </body>
   <script src="index.js"></script>
+  <script src="../public/js/footer.js" type="module"></script>
 </html>
diff --git a/blogrlandingpage/stylesheet.css b/blogrlandingpage/stylesheet.css
@@ -907,10 +907,6 @@ body {
   padding-inline: 1rem;
   padding-block: 1.5rem;
 }
-.footer .attribution-content {
-  margin-top: auto;
-  justify-self: flex-end;
-}
 
 @media (min-width: 50em) {
   .footer {
@@ -950,6 +946,11 @@ body {
   }
   .footer .attribution {
     padding-block: 3.45rem 0.5rem;
+    flex-direction: row;
+    justify-content: center;
+  }
+  .footer .attribution > * + * {
+    margin-left: 0.2rem;
   }
 }
 .col-2 {

diff --git a/blogrlandingpage/stylesheet.css.map b/blogrlandingpage/stylesheet.css.map
diff --git a/blogrlandingpage/stylesheet.scss b/blogrlandingpage/stylesheet.scss
@@ -976,10 +976,10 @@ body {
     flex-direction: column;
     padding-inline: 1rem;
     padding-block: 1.5rem;
-    &-content {
-      margin-top: auto;
-      justify-self: flex-end;
-    }
+    // &-content {
+    //   margin-top: auto;
+    //   justify-self: flex-end;
+    // }
   }
 }
 
@@ -1021,6 +1021,11 @@ body {
 
     .attribution {
       padding-block: 3.45rem 0.5rem;
+      flex-direction: row;
+      justify-content: center;
+      > * + * {
+        margin-left: 0.2rem;
+      }
     }
   }
 }

diff --git a/calculatorapp/index.html b/calculatorapp/index.html
@@ -119,17 +119,9 @@ <h2>Theme</h2>
     </div>
 
     <footer class="footer / fs-footer">
-      <div class="footer__attribution container">
-        <span>
-          Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. Coded by
-          <a href="https://twitter.com/elaineclleung">Elaine</a>.
-        </span>
-        <span class="block-footer">Other 
-          <a href="https://elaineleung.github.io/frontendmentor/">Frontend Mentor Challenges</a>
-          by Elaine
-        </span>
-      </div>
+      <div class="attribution container"></div>
     </footer>
   </body>
   <script src="index.js"></script>
+  <script src="../public/js/footer.js" type="module"></script>
 </html>
diff --git a/calculatorapp/stylesheet.css b/calculatorapp/stylesheet.css
@@ -472,12 +472,16 @@ body {
     padding-block: 0.7rem;
   }
 }
-.footer {
-  width: 100%;
+footer {
+  font-size: var(--fs-footer);
   font-weight: 400;
+  padding-block: 1rem 0.5rem;
+  width: 100%;
 }
-.footer .block-footer {
-  display: none;
+footer .attribution {
+  display: flex;
+  flex-direction: column;
+  padding-inline: 1rem;
 }
 
 [data-theme=light] {
@@ -535,14 +539,18 @@ body {
   .header .labels-wrapper {
     margin-bottom: 0.25rem;
   }
-  .footer {
+  footer {
     padding-block: 1rem 0.5rem;
   }
-  .footer .container {
+  footer .container {
     width: 100%;
   }
-  .footer .block-footer {
-    display: inline;
+  footer .attribution {
+    flex-direction: row;
+    justify-content: center;
+  }
+  footer .attribution > * + * {
+    margin-left: 0.2rem;
   }
 }
 .wrapper {
@@ -581,10 +589,6 @@ body {
   font-size: var(--fs-small);
 }
 
-.fs-footer {
-  font-size: var(--fs-footer);
-}
-
 .fs-keys {
   font-size: var(--fs-keys);
 }