add footer

Author: minimaldesign

src/components/Footer.astro

@@ -0,0 +1,45 @@
+---
+import logoImg from '../assets/ui/mcss-logo.svg?raw';
+
+import { VERSION } from '../scripts/globals';
+---
+
+<footer>
+  <section class="footer_meta">
+    <p>Made with <span>❤</span> in California by <a href="http://minimaldesign.net">minimal design</a></p>
+    <p>Released under the MIT <a href="https://github.com/minimaldesign/mCSS/blob/main/LICENSE">License</a></p>
+    <p><Fragment set:html={logoImg} /> mCSS v.{VERSION}</p>
+  </section>
+  <nav class="footer_nav">
+    <ul>
+      <li>
+        <h5>Documentation</h5>
+        <ul>
+          <li><a href="/docs/start">mCSS methodology</a></li>
+          <li><a href="/docs/tokens">Tokens</a></li>
+          <li><a href="/docs/media-queries">Responsive design</a></li>
+          <li><a href="/docs/global#grid">Grid system</a></li>
+          <li><a href="/docs/helpers">Utility classes</a></li>
+          <li><a href="/components/start">Component library</a></li>
+        </ul>
+      </li>
+      <li>
+        <h5>Learn</h5>
+        <ul>
+          <li><a href="https://github.com/minimaldesign/mCSS/tree/main/src/styles">mCSS code</a></li>
+          <li><a href="https://github.com/minimaldesign/mCSS/issues">Issue tracker</a></li>
+          <li><a href="/tags/learn">Tutorials, tips, trick…</a></li>
+        </ul>
+      </li>
+      <li>
+        <h5>Connect</h5>
+        <ul>
+          <li><a href="https://github.com/minimaldesign/mCSS/discussions">Discussions</a></li>
+          <li><a href="https://x.com/_yannb_">Twitter</a></li>
+          <li><a href="">YouTube</a></li>
+          <li><a href="">Email</a></li>
+        </ul>
+      </li>
+    </ul>
+  </nav>
+</footer>

src/styles/_global.css

@@ -33,6 +33,7 @@
 /* Component specific styles */
 /* Should be added here or within the Astro component itself */
 @import url(./component.button.css);
+@import url(./component.footer.css);
 @import url(./component.header.css);
 @import url(./component.navDocs.css);
 @import url(./component.notice.css);

src/styles/component.footer.css

@@ -0,0 +1,45 @@
+footer {
+  display: grid;
+  gap: var(--md3);
+  grid-template-columns: 25% 1fr;
+  padding: var(--lg3) var(--md3);
+  background-color: var(--primary-600);
+  color: var(--base-0);
+  line-height: var(--leading-xl);
+
+  a {
+    color: var(--base-0);
+    text-decoration: none;
+    font-weight: var(--book);
+    transition: color var(--transition);
+    &:hover {
+      color: var(--primary-200);
+    }
+  }
+}
+
+.footer_meta {
+  --logo-size: 25px;
+
+  /* & is just to make syntax highlighter happy */
+  & p:last-child {
+    margin-top: 1em;
+  }
+
+  span {
+    font-size: var(--text-lg);
+    line-height: 1;
+  }
+
+  svg {
+    display: inline-block;
+    margin-right: 0.25em;
+    width: var(--logo-size);
+    height: var(--logo-size);
+  }
+}
+
+.footer_nav > ul {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+}