fix: template changing

src/sass/abstracts/_preferences.scss

@@ -23,18 +23,4 @@ html {
     --blend-text-color: #FFF;
     --blend-back-color: #000;
     --blend-highlight-color: #000;
-}
-
-
-// TEMPLATES
-
-
-[data-style="sharp"] {
-
-    --roundness: 0;
-}
-
-[data-style="modern"] {
-
-    --spacing: var(--lg);
 }

src/sass/abstracts/_templates.scss

@@ -0,0 +1,41 @@
+:where(:root, html) {
+
+    --roundness: unset; // The border-radius to everything
+    --theme: dark; // the actual theme in the page
+    --width: auto; // the witdth of an element
+    --height: auto; // the height of each element
+
+    // CONTROL VARS ---------------------------------
+
+    --main-container-size: 80dvw;
+    --min-layou-size: 20rem;
+
+    // These are the variables that generate all the style system
+
+    --base: 1.6rem; // Represent the inital value for measurements
+    --spacing: .8rem; // the spacing between elements
+
+    --jump: 2; // the jump value between elements
+
+    // SPACING VARS
+
+    --spacing-y: calc(--spacing / 2);
+    --spacing-x: calc(--spacing * 2);
+
+    // COLOR SPECIFIC
+
+    --destructive: #772626;
+}
+
+:where(:root[data-template="modern"]) {
+    --base: 2.4rem;
+
+    --min-container-size: 60dvw;
+}
+
+:where(:root[data-template="classic"]) {
+
+    --base: 1rem;
+}
+
+:where(:root[data-template="roundy"]) {}

src/sass/abstracts/_variables.scss

@@ -1,27 +1,9 @@
 @use "color-palette";
 @use "props";
+@use "templates"; // Base Styles and Templates
 @use "../utils/vars";
 
 :where(:root, html) {
-    // GLOBAL SCOPED VARS
-
-    --roundness: unset; // The border-radius to everything
-    --jump: 2; // the jump value between elements
-    --theme: dark; // the actual theme in the page
-    --width: auto; // the witdth of an element
-    --height: auto; // the height of each element
-
-    // CONTROL VARS ---------------------------------
-
-    // These are the variables that generate all the style system
-
-    --base: 1.6rem; // Represent the inital value for measurements
-    --spacing: .8rem; // the spacing between elements
-
-    // SPACING VARS
-
-    --spacing-y: calc(--spacing / 2);
-    --spacing-x: calc(--spacing * 2);
 
     // MEASUREMENTS
 
@@ -39,8 +21,6 @@
 
     // Color created with the palette
 
-    --destructive: #772626;
-
     --light-destructive: color-mix(in oklab, var(--destructive), #FFF 30%);
 
     // Blend Colors -----------------------------------------

src/sass/base/_base.scss

@@ -12,6 +12,8 @@ body, .app, #root {
     //gap: var(--spacing); Testing for hero section
     background-color: var(--bg);
 
+    //padding: calc(12vw - 1em);
+
     & > :where(nav, header, main, footer):not(.hero) {
         --bg: var(--background);
         background-color: var(--bg);

src/sass/layout/_footer.scss

@@ -1,21 +1,39 @@
 body > footer {
     --_width: 100%;
     --_height: 35vmin;
+    --_bg: var(--muted-background);
 
     --_txt: color-mix(in oklab, var(--text-color) 90%, black 10%);
 
+    font-size: calc(10vw - var(--footer-size));
+
+    background-color: var(--_bg);
+
     color: var(--_txt);
     align-self: flex-end;
     display: grid;
+
+    padding-block: var(--3xl);
+    padding-inline: var(--lg);
+
     place-items: center;
     width: var(--_width);
-    height: var(--_height);
-    border-top: .1rem solid var(--foreground-accent);
+    height: clamp(var(--_height), auto, fit-content);
+    border-top: .2rem solid var(--muted-accent);
+
+    display: grid;
+    place-items: center;
 
     & ul {
-        display: flex;
-        align-items: center;
-        justify-content: center;
+        display: grid;
+        place-items: center;
+        grid-template-columns: repeat(auto-fit, minmax(4rem, 1fr));
+
+        & li {
+
+            font-size: calc(10vw - var(--footer-size));
+        }
+
 
         & a {
             color: var(--_txt);

src/sass/layout/_main.scss

@@ -1,13 +1,14 @@
 body > main {
-    --width: 50%;
-    --height: auto;
-    --spacing: var(--lg);
-    --bg: inherit;
+    --_width: var(--main-container-size);
+    --_height: auto;
+    --_spacing-y: var(--spacing-y);
+    --_bg: inherit;
 
-    width: max(var(--width), 80dvw);
-    height: var(--height);
-    padding: var(--lg) var(--xl);
+    width: clamp(20rem, var(--_width), 100dvw);
+    height: var(--_height);
+    //padding: var(--lg) var(--xl);
     border-radius: var(--roundness);
-    margin-block: var(--spacing);
-    background-color: var(--bg);
+    margin-block: var(--_spacing-y);
+    //margin-inline: auto;
+    background-color: var(--_bg);
 }