Work on layout

.idea/inspectionProfiles/Project_Default.xml

@@ -6,5 +6,6 @@
       <option name="processLiterals" value="true" />
       <option name="processComments" value="true" />
     </inspection_tool>
+    <inspection_tool class="Stylelint" enabled="true" level="ERROR" enabled_by_default="true" />
   </profile>
 </component>

.stylelintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "@punkfairie/stylelint-config"
+}

package.json

@@ -12,12 +12,15 @@
   "license": "ISC",
   "devDependencies": {
     "@11ty/eleventy": "^2.0.1",
+    "@punkfairie/stylelint-config": "^1.0.1",
+    "circletype": "^2.3.0",
     "cssnano": "^6.0.1",
     "eleventy-plugin-automatic-noopener": "^2.0.2",
     "postcss": "^8.4.24",
     "postcss-import": "^15.1.0",
     "postcss-import-ext-glob": "^2.1.1",
-    "postcss-preset-env": "^8.5.1"
+    "postcss-preset-env": "^8.5.1",
+    "stylelint": "^15.9.0"
   },
   "dependencies": {
     "@punkfairie/modern-css-reset": "^1.0.1"

src/index.liquid

@@ -14,9 +14,7 @@
 <div class="Site">
 
     <header class="Header">
-        <nav class="Nav">
-            <a href="/contact/">Contact</a>
-        </nav>
+
     </header>
 
     <main class="Main">

src/style/layout/Body.css

@@ -1,5 +1,8 @@
 @layer layout {
   .Body {
+    display: flex;
+    align-items: center;
+    justify-content: center;
     background: var(--c-purple);
     background: linear-gradient(135deg, var(--c-purple) 0%, var(--c-pink) 100%);
   }

src/style/layout/Footer.css

@@ -0,0 +1,5 @@
+@layer layout {
+  .Footer {
+    flex-grow: 0;
+  }
+}

src/style/layout/Header.css

@@ -0,0 +1,5 @@
+@layer layout {
+  .Header {
+    flex-grow: 0;
+  }
+}

src/style/layout/Main.css

@@ -0,0 +1,5 @@
+@layer layout {
+  .Main {
+    flex-grow: 1;
+  }
+}

src/style/layout/Site.css

@@ -1,7 +1,13 @@
 @layer layout {
   .Site {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
     background-color: var(--c-neutral);
-        height: 90vh;
-        width: 90vw;
+    /* stylelint-disable scale-unlimited/declaration-strict-value */
+    border-radius: 50%;
+    block-size: 90vb;
+    inline-size: 95vb;
+    /* stylelint-enable scale-unlimited/declaration-strict-value */
   }
 }

src/style/style.css

@@ -1,4 +1,7 @@
-@import 'theme.css';
-
-@import 'layout/Body.css';
-@import 'layout/Site.css';
+@import url('@punkfairie/modern-css-reset');
+@import url('theme.css');
+@import url('layout/Body.css');
+@import url('layout/Site.css');
+@import url('layout/Header.css');
+@import url('layout/Main.css');
+@import url('layout/Footer.css');

src/style/theme.css

@@ -9,10 +9,9 @@
 \* -------------------------------------------------------------------------- */
 
 :root {
-    --c-pink: hsl(329, 86%, 70%);
-    --c-purple: hsl(270, 95%, 75%);
-    --c-neutral: hsl(220, 16%, 96%);
-}
+    --c-pink: hsl(329deg 86% 70%);
+    --c-purple: hsl(270deg 95% 75%);
+    --c-neutral: hsl(220deg 16% 96%);
 
     /* -------------------------------------------------------------------------- *\
         &type sizing
@@ -20,7 +19,6 @@
 
     /* @link https://utopia.fyi/type/calculator?c=320,18,1.2,1240,20,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
 
-:root {
     --t-step--2: clamp(0.78rem, calc(0.77rem + 0.03vw), 0.80rem);
     --t-step--1: clamp(0.94rem, calc(0.92rem + 0.11vw), 1.00rem);
     --t-step-0: clamp(1.13rem, calc(1.08rem + 0.22vw), 1.25rem);
@@ -29,7 +27,6 @@
     --t-step-3: clamp(1.94rem, calc(1.77rem + 0.87vw), 2.44rem);
     --t-step-4: clamp(2.33rem, calc(2.08rem + 1.25vw), 3.05rem);
     --t-step-5: clamp(2.80rem, calc(2.45rem + 1.77vw), 3.82rem);
-}
 
     /* -------------------------------------------------------------------------- *\
         &spacers
@@ -37,7 +34,6 @@
 
     /* @link https://utopia.fyi/space/calculator?c=320,18,1.2,1240,20,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
 
-:root {
     --space-3xs: clamp(0.31rem, calc(0.31rem + 0.00vw), 0.31rem);
     --space-2xs: clamp(0.56rem, calc(0.54rem + 0.11vw), 0.63rem);
     --space-xs: clamp(0.88rem, calc(0.85rem + 0.11vw), 0.94rem);