simplify footer and header css

src/_includes/partials/footer.njk

@@ -1,7 +1,7 @@
-<footer class="site-footer ">
+<footer class="site-footer mt-l-xl p-s-m">
   <div class="wrapper">
-    <div class="footer__meta | cluster">
+    <div class="cluster gutter-xs">
-      <nav class="footer__meta | cluster text-step-0" aria-label="{{ meta.navigation.ariaBottom }}">
+      <nav class="cluster text-step-0" aria-label="{{ meta.navigation.ariaBottom }}">
         &copy; {% year %}
         <a href="/" {% if page.url == "/" %}aria-current="page"{% endif %}
           ><span class="font-display">{{ meta.siteName }}</span> <small>{{ pkg.version }}</small>
@@ -21,7 +21,7 @@
         {% endfor %}
       </nav>
 
-      <nav class="footer__meta | cluster" aria-label="{{ meta.navigation.ariaPlatforms }}">
+      <nav class="cluster" aria-label="{{ meta.navigation.ariaPlatforms }}">
         <!-- gets the first item from the feed loop set in meta -->
         <a href="{{ meta.blog.feedLinks[0].url }}" rel="alternate" type="{{ meta.blog.feedLinks[0].type }}">
           <span class="visually-hidden">{{ meta.blog.feedLinks[0].title }}</span>
@@ -40,13 +40,12 @@
       </nav>
     </div>
 
-    <!-- theme switch -->
     {% include 'partials/theme-switch.njk' %}
 
-    <aside class="creator">
+    <aside class="creator | mt-xl">
-      <a class="cluster" href="{{ meta.creator.website }}"
+      <a class="cluster text-step-min-1 gutter-xs no-underline" href="{{ meta.creator.website }}"
-        >Made with <span class="visually-hidden">love</span> <span>{% svg "misc/heart" %}</span> by
+        >Made with <span class="visually-hidden">love</span>
-        {{ meta.creator.name }}</a
+        <span>{% svg "misc/heart", null, "color-text" %}</span> by {{ meta.creator.name }}</a
       >
     </aside>
   </div>

src/_includes/partials/header.njk

@@ -1,7 +1,7 @@
 <header class="wrapper">
   <a href="#main" class="skip-link">{{ meta.skipContent }}</a>
 
-  <div class="site-header | repel ontop">
+  <div class="repel ontop gutter-s">
     <a href="/" class="logo | cluster" {% if page.url == "/" %}aria-current="page"{% endif %}>
       {% svg "misc/star" %}
 

src/assets/css/global/blocks/site-footer.css

@@ -1,16 +1,9 @@
 .site-footer {
-  margin-block-start: var(--space-l-xl);
-  padding: var(--space-s-m);
-  color: var(--color-text);
-}
-
-.site-footer .footer__meta {
-  --gutter: var(--space-xs);
   --cluster-horizontal-alignment: center;
 }
 
 /* increase tab size */
-.site-footer .footer__meta a {
+.site-footer a {
   padding: var(--space-xs);
 }
 
@@ -19,19 +12,6 @@
   block-size: 1em;
 }
 
-.site-footer .creator {
-  font-size: var(--size-step-min-1);
-  margin-block-start: var(--space-xl);
-  display: grid;
-  place-items: center;
-}
-
-.site-footer .creator a {
-  --gutter: var(--space-xs);
-  --cluster-horizontal-alignment: center;
-  text-decoration: none;
-}
-
 .site-footer .creator a:hover {
   color: transparent;
   background-image: var(--gradient-rainbow);
@@ -39,7 +19,3 @@
   background-repeat: repeat;
   background-clip: text;
 }
-
-.site-footer .creator:hover svg {
-  color: var(--color-text);
-}

src/assets/css/global/blocks/site-header.css

@@ -1,3 +0,0 @@
-.site-header {
-  --gutter: var(--space-s);
-}