refactor: Pico v2 customized design system

picocss · Jan 21, 2024 · 777906d · 777906d
1 parent 483af1d
commit 777906d
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 8 deletions.
diff --git a/v2-sass-customized-design-system/index.html b/v2-sass-customized-design-system/index.html
@@ -1,11 +1,11 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="color-scheme" content="light dark" />
     <title>Customized design system • Pico CSS</title>
-    <meta name="description" content="A pure HTML example, without dependencies." />
+    <meta name="description" content="An example to customize Pico CSS with SASS." />
     <link rel="stylesheet" href="css/main.css" />
   </head>
 
@@ -91,6 +91,14 @@
         <button type="submit">Send</button>
       </form>
     </main>
+    <footer>
+      <small
+        >Built with <a href="https://picocss.com">Pico</a> •
+        <a href="https://github.com/picocss/examples/tree/master/v2-sass-customized-design-system/"
+          >Source code</a
+        ></small
+      >
+    </footer>
     <script src="js/main.js"></script>
   </body>
 </html>
diff --git a/...ized-design-system/scss/layout/_main.scss → ...ized-design-system/scss/layout/_body.scss b/...ized-design-system/scss/layout/_main.scss → ...ized-design-system/scss/layout/_body.scss
@@ -2,8 +2,13 @@
 @use "settings" as *;
 
 body {
-  > main {
+  > main,
+  > footer {
+    max-width: map.get(map.get($breakpoints, "md"), "viewport");
+    margin-inline: auto;
+  }
 
+  > main {
     svg {
       display: block;
       width: 4rem;
@@ -13,14 +18,10 @@ body {
     }
 
     form {
-      max-width: map.get(map.get($breakpoints, "md"), "viewport");
-      margin-inline: auto;
-
       label {
         color: var(#{$css-var-prefix}muted-color);
       }
 
-
       :last-child {
         margin-bottom: 0;
       }

diff --git a/v2-sass-customized-design-system/scss/main.scss b/v2-sass-customized-design-system/scss/main.scss
@@ -55,7 +55,7 @@
 @use "theme/schemes";
 
 // Layout
-@use "layout/main";
+@use "layout/body";
 
 // Custom components
 @use "components/input-amount";