Rework default footer

digitoimistodude · Feb 28, 2025 · baffd93 · baffd93
1 parent 835db29
commit baffd93
Show file tree

Hide file tree

Showing 5 changed files with 63 additions and 87 deletions.
diff --git a/css/dev/global.css b/css/dev/global.css
diff --git a/css/prod/global.css b/css/prod/global.css
diff --git a/footer.php b/footer.php
@@ -16,20 +16,23 @@
 
 <footer id="colophon" class="site-footer">
 
-  <!-- Default footer content that you can safely remove from here... -->
-  <div class="site-info">
-    <a class="no-external-link-indicator powered-by-wordpress" href="<?php echo esc_url( __( 'http://wordpress.org/', 'air-light' ) ); ?>">
-      <svg class="wordpress-logo" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="42" height="42" fill="currentColor" aria-hidden="true"><path d="M21.469 6.825c.84 1.537 1.318 3.3 1.318 5.175 0 3.979-2.156 7.456-5.363 9.325l3.295-9.527c.615-1.54.82-2.771.82-3.864 0-.405-.026-.78-.07-1.11m-7.981.105c.647-.03 1.232-.105 1.232-.105.582-.075.514-.93-.067-.899 0 0-1.755.135-2.88.135-1.064 0-2.85-.15-2.85-.15-.585-.03-.661.855-.075.885 0 0 .54.061 1.125.09l1.68 4.605-2.37 7.08L5.354 6.9c.649-.03 1.234-.1 1.234-.1.585-.075.516-.93-.065-.896 0 0-1.746.138-2.874.138-.2 0-.438-.008-.69-.015C4.911 3.15 8.235 1.215 12 1.215c2.809 0 5.365 1.072 7.286 2.833-.046-.003-.091-.009-.141-.009-1.06 0-1.812.923-1.812 1.914 0 .89.513 1.643 1.06 2.531.411.72.89 1.643.89 2.977 0 .915-.354 1.994-.821 3.479l-1.075 3.585-3.9-11.61.001.014zM12 22.784c-1.059 0-2.081-.153-3.048-.437l3.237-9.406 3.315 9.087c.024.053.05.101.078.149-1.12.393-2.325.609-3.582.609M1.211 12c0-1.564.336-3.05.935-4.39L7.29 21.709C3.694 19.96 1.212 16.271 1.211 12M12 0C5.385 0 0 5.385 0 12s5.385 12 12 12 12-5.385 12-12S18.615 0 12 0"/></svg>
-      <span>
-        <?php printf( esc_html__( 'Proudly powered by %s', 'air-light' ), 'WordPress' ); ?>.
+  <div class="container">
+    <!-- Default footer content that you can safely remove from here... -->
+    <div class="site-info">
+      <a class="no-external-link-indicator powered-by-wordpress" href="<?php echo esc_url( __( 'http://wordpress.org/', 'air-light' ) ); ?>">
+        <svg class="wordpress-logo" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="42" height="42" fill="currentColor" aria-hidden="true"><path d="M21.469 6.825c.84 1.537 1.318 3.3 1.318 5.175 0 3.979-2.156 7.456-5.363 9.325l3.295-9.527c.615-1.54.82-2.771.82-3.864 0-.405-.026-.78-.07-1.11m-7.981.105c.647-.03 1.232-.105 1.232-.105.582-.075.514-.93-.067-.899 0 0-1.755.135-2.88.135-1.064 0-2.85-.15-2.85-.15-.585-.03-.661.855-.075.885 0 0 .54.061 1.125.09l1.68 4.605-2.37 7.08L5.354 6.9c.649-.03 1.234-.1 1.234-.1.585-.075.516-.93-.065-.896 0 0-1.746.138-2.874.138-.2 0-.438-.008-.69-.015C4.911 3.15 8.235 1.215 12 1.215c2.809 0 5.365 1.072 7.286 2.833-.046-.003-.091-.009-.141-.009-1.06 0-1.812.923-1.812 1.914 0 .89.513 1.643 1.06 2.531.411.72.89 1.643.89 2.977 0 .915-.354 1.994-.821 3.479l-1.075 3.585-3.9-11.61.001.014zM12 22.784c-1.059 0-2.081-.153-3.048-.437l3.237-9.406 3.315 9.087c.024.053.05.101.078.149-1.12.393-2.325.609-3.582.609M1.211 12c0-1.564.336-3.05.935-4.39L7.29 21.709C3.694 19.96 1.212 16.271 1.211 12M12 0C5.385 0 0 5.385 0 12s5.385 12 12 12 12-5.385 12-12S18.615 0 12 0"/></svg>
+        <span>
+          <?php printf( esc_html__( 'Proudly powered by %s', 'air-light' ), 'WordPress' ); ?>.
+        </span>
+      </a>
+      <span class="theme-info">
+        <span>
+          <?php printf( esc_html__( 'Lightweight like %1$s itself. You are using version %2$s', 'air-light' ), '<i>air</i>', esc_attr( AIR_LIGHT_VERSION ) ); ?>.
+        </span>
       </span>
-    </a>
-    <span class="theme-info">
-      <?php printf( esc_html__( 'Lightweight like %1$s itself. You are using version %2$s', 'air-light' ), '<i>air</i>', esc_attr( AIR_LIGHT_VERSION ) ); ?>
-      <a class="no-external-link-indicator github-link" href="<?php echo esc_url( __( 'https://github.com/digitoimistodude/air', 'air-light' ) ); ?>"><svg width="16" height="16" viewBox="0 0 1792 1792" fill="currentColor" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path d="M1664 896q0 251-146.5 451.5T1139 1625q-27 5-39.5-7t-12.5-30v-211q0-97-52-142 57-6 102.5-18t94-39 81-66.5 53-105T1386 856q0-121-79-206 37-91-8-204-28-9-81 11t-92 44l-38 24q-93-26-192-26t-192 26q-16-11-42.5-27T578 459.5 492 446q-44 113-7 204-79 85-79 206 0 85 20.5 150t52.5 105 80.5 67 94 39 102.5 18q-40 36-49 103-21 10-45 15t-57 5-65.5-21.5T484 1274q-19-32-48.5-52t-49.5-24l-20-3q-21 0-29 4.5t-5 11.5 9 14 13 12l7 5q22 10 43.5 38t31.5 51l10 23q13 38 44 61.5t67 30 69.5 7 55.5-3.5l23-4q0 38 .5 89t.5 54q0 18-13 30t-40 7q-232-77-378.5-277.5T128 896q0-209 103-385.5T510.5 231 896 128t385.5 103T1561 510.5 1664 896z"/></svg><?php echo esc_html( 'Fork theme on GitHub.' ); ?></a>
-    </span>
+    </div>
+    <!-- ...up until here -->
   </div>
-  <!-- ...up until here -->
 
 </footer><!-- #colophon -->
 

diff --git a/sass/layout/_site-footer.scss b/sass/layout/_site-footer.scss
@@ -8,56 +8,46 @@
 .site-footer {
   // Making sure the footer background is white, even on WordPress.org
   background-color: var(--color-white);
-  clear: both;
+  border-top: 1px solid #e3e3f0;
   color: var(--color-paragraph);
   overflow: hidden;
   padding: 3.75rem 1.25rem;
-  text-align: center;
 
-  .wordpress-logo {
-    display: block;
-    margin-bottom: 1.25rem;
-    margin-left: auto;
-    margin-right: auto;
+  .container {
+    padding-bottom: 2.5rem;
+    padding-top: 2.5rem;
   }
 
-  span {
-    display: block;
-    text-align: center;
+  p,
+  a {
+    color: var(--color-black);
   }
 
-  svg {
-    margin-right: 0.3125rem;
-    position: relative;
+  .site-info {
+    display: grid;
+    gap: 1rem;
   }
 
-  .powered-by-wordpress {
-    display: inline-block;
-    font-weight: var(--typography-weight-semibold);
-    margin-bottom: 0.625rem;
-    text-align: center;
+  .theme-info {
+    font-size: var(--typography-size-16);
   }
 
-  .github-link {
-    margin-left: 0.5rem;
-    margin-top: 4px;
-    overflow: hidden;
-    padding-bottom: 4px;
-    position: relative;
+  .theme-info a {
+    display: block;
   }
 
+  .powered-by-wordpress,
   .theme-info {
-    align-items: center;
-    color: var(--color-paragraph);
     display: flex;
-    flex-wrap: wrap;
-    justify-content: center;
-    line-height: 1.5;
-    margin: 0 auto;
-    text-align: center;
-
-    i {
-      margin: 0 0.3125rem;
-    }
+    gap: 1rem;
+  }
+
+  .powered-by-wordpress {
+    font-weight: var(--typography-weight-semibold);
+  }
+
+  .powered-by-wordpress svg {
+    height: 1.75rem;
+    width: 1.75rem;
   }
 }
diff --git a/svg/logo.svg b/svg/logo.svg