6 files modified

woodcox · Feb 27, 2024 · 99ff4cc · 99ff4cc
1 parent f84de80
commit 99ff4cc
Show file tree

Hide file tree

Showing 6 changed files with 36 additions and 30 deletions.
diff --git a/src/_data/buildmeta.json b/src/_data/buildmeta.json
@@ -1 +1 @@
-{"inputs":{"node_modules/solid-js/dist/solid.js":{"bytes":52004,"imports":[{"path":"<runtime>","kind":"import-statement","external":true}],"format":"esm"},"node_modules/solid-js/web/dist/web.js":{"bytes":27923,"imports":[{"path":"node_modules/solid-js/dist/solid.js","kind":"import-statement","original":"solid-js"},{"path":"node_modules/solid-js/dist/solid.js","kind":"import-statement","original":"solid-js"}],"format":"esm"},"src/scripts/jsx/app.jsx":{"bytes":2488,"imports":[{"path":"node_modules/solid-js/web/dist/web.js","kind":"import-statement","original":"solid-js/web"},{"path":"node_modules/solid-js/web/dist/web.js","kind":"import-statement","original":"solid-js/web"},{"path":"node_modules/solid-js/web/dist/web.js","kind":"import-statement","original":"solid-js/web"},{"path":"node_modules/solid-js/dist/solid.js","kind":"import-statement","original":"solid-js"},{"path":"node_modules/solid-js/web/dist/web.js","kind":"import-statement","original":"solid-js/web"}],"format":"esm"},"src/scripts/jsx/fetch.jsx":{"bytes":12246,"imports":[{"path":"node_modules/solid-js/web/dist/web.js","kind":"import-statement","original":"solid-js/web"},{"path":"node_modules/solid-js/web/dist/web.js","kind":"import-statement","original":"solid-js/web"},{"path":"node_modules/solid-js/web/dist/web.js","kind":"import-statement","original":"solid-js/web"},{"path":"node_modules/solid-js/web/dist/web.js","kind":"import-statement","original":"solid-js/web"},{"path":"node_modules/solid-js/web/dist/web.js","kind":"import-statement","original":"solid-js/web"},{"path":"node_modules/solid-js/web/dist/web.js","kind":"import-statement","original":"solid-js/web"},{"path":"node_modules/solid-js/web/dist/web.js","kind":"import-statement","original":"solid-js/web"},{"path":"node_modules/solid-js/dist/solid.js","kind":"import-statement","original":"solid-js"},{"path":"node_modules/solid-js/web/dist/web.js","kind":"import-statement","original":"solid-js/web"},{"path":"<runtime>","kind":"import-statement","external":true}],"format":"cjs"},"node_modules/@11ty/is-land/is-land.js":{"bytes":8708,"imports":[{"path":"<runtime>","kind":"import-statement","external":true}],"format":"esm"},"src/scripts/js/is-land.js":{"bytes":34,"imports":[{"path":"node_modules/@11ty/is-land/is-land.js","kind":"import-statement","original":"@11ty/is-land/is-land.js"}],"format":"esm"},"dist/app/style.css":{"bytes":10233,"imports":[]}},"outputs":{"dist/app/app-S5HW3ASK.min.js":{"imports":[],"exports":[],"entryPoint":"src/scripts/jsx/app.jsx","inputs":{"node_modules/solid-js/dist/solid.js":{"bytesInOutput":7272},"node_modules/solid-js/web/dist/web.js":{"bytesInOutput":3748},"src/scripts/jsx/app.jsx":{"bytesInOutput":226}},"bytes":11697},"dist/app/fetch-HXKD36VK.min.js":{"imports":[],"exports":[],"entryPoint":"src/scripts/jsx/fetch.jsx","inputs":{"node_modules/solid-js/dist/solid.js":{"bytesInOutput":9600},"node_modules/solid-js/web/dist/web.js":{"bytesInOutput":4468},"src/scripts/jsx/fetch.jsx":{"bytesInOutput":1638}},"bytes":16474},"dist/app/is-land-TXS7GROR.min.js":{"imports":[],"exports":[],"entryPoint":"src/scripts/js/is-land.js","inputs":{"node_modules/@11ty/is-land/is-land.js":{"bytesInOutput":3959},"src/scripts/js/is-land.js":{"bytesInOutput":0}},"bytes":4344},"dist/app/style-6PHCCTOC.min.css":{"imports":[],"entryPoint":"dist/app/style.css","inputs":{"dist/app/style.css":{"bytesInOutput":9801}},"bytes":9802}}}
+{"inputs":{"node_modules/solid-js/dist/solid.js":{"bytes":52004,"imports":[],"format":"esm"},"node_modules/solid-js/web/dist/web.js":{"bytes":27923,"imports":[{"path":"node_modules/solid-js/dist/solid.js","kind":"import-statement","original":"solid-js"},{"path":"node_modules/solid-js/dist/solid.js","kind":"import-statement","original":"solid-js"}],"format":"esm"},"src/scripts/jsx/app.jsx":{"bytes":2488,"imports":[{"path":"node_modules/solid-js/web/dist/web.js","kind":"import-statement","original":"solid-js/web"},{"path":"node_modules/solid-js/web/dist/web.js","kind":"import-statement","original":"solid-js/web"},{"path":"node_modules/solid-js/web/dist/web.js","kind":"import-statement","original":"solid-js/web"},{"path":"node_modules/solid-js/dist/solid.js","kind":"import-statement","original":"solid-js"},{"path":"node_modules/solid-js/web/dist/web.js","kind":"import-statement","original":"solid-js/web"}],"format":"esm"},"src/scripts/jsx/fetch.jsx":{"bytes":12289,"imports":[{"path":"node_modules/solid-js/web/dist/web.js","kind":"import-statement","original":"solid-js/web"},{"path":"node_modules/solid-js/web/dist/web.js","kind":"import-statement","original":"solid-js/web"},{"path":"node_modules/solid-js/web/dist/web.js","kind":"import-statement","original":"solid-js/web"},{"path":"node_modules/solid-js/web/dist/web.js","kind":"import-statement","original":"solid-js/web"},{"path":"node_modules/solid-js/web/dist/web.js","kind":"import-statement","original":"solid-js/web"},{"path":"node_modules/solid-js/web/dist/web.js","kind":"import-statement","original":"solid-js/web"},{"path":"node_modules/solid-js/web/dist/web.js","kind":"import-statement","original":"solid-js/web"},{"path":"node_modules/solid-js/dist/solid.js","kind":"import-statement","original":"solid-js"},{"path":"node_modules/solid-js/web/dist/web.js","kind":"import-statement","original":"solid-js/web"}],"format":"esm"},"node_modules/@11ty/is-land/is-land.js":{"bytes":8708,"imports":[],"format":"esm"},"src/scripts/js/is-land.js":{"bytes":34,"imports":[{"path":"node_modules/@11ty/is-land/is-land.js","kind":"import-statement","original":"@11ty/is-land/is-land.js"}],"format":"esm"},"dist/app/style.css":{"bytes":11981,"imports":[]}},"outputs":{"dist/app/app.js.map":{"imports":[],"exports":[],"inputs":{},"bytes":145200},"dist/app/app.js":{"imports":[],"exports":[],"entryPoint":"src/scripts/jsx/app.jsx","inputs":{"node_modules/solid-js/dist/solid.js":{"bytesInOutput":54951},"node_modules/solid-js/web/dist/web.js":{"bytesInOutput":29125},"src/scripts/jsx/app.jsx":{"bytesInOutput":488}},"bytes":84726},"dist/app/fetch.js.map":{"imports":[],"exports":[],"inputs":{},"bytes":149725},"dist/app/fetch.js":{"imports":[],"exports":[],"entryPoint":"src/scripts/jsx/fetch.jsx","inputs":{"node_modules/solid-js/dist/solid.js":{"bytesInOutput":54951},"node_modules/solid-js/web/dist/web.js":{"bytesInOutput":29125},"src/scripts/jsx/fetch.jsx":{"bytesInOutput":3431}},"bytes":87673},"dist/app/is-land.js.map":{"imports":[],"exports":[],"inputs":{},"bytes":14661},"dist/app/is-land.js":{"imports":[],"exports":[],"entryPoint":"src/scripts/js/is-land.js","inputs":{"node_modules/@11ty/is-land/is-land.js":{"bytesInOutput":7742},"src/scripts/js/is-land.js":{"bytesInOutput":0}},"bytes":7836},"dist/app/style.css.map":{"imports":[],"exports":[],"inputs":{},"bytes":20085},"dist/app/style.css":{"imports":[],"entryPoint":"dist/app/style.css","inputs":{"dist/app/style.css":{"bytesInOutput":11576}},"bytes":11639}}}
diff --git a/src/_data/manifest.json b/src/_data/manifest.json
@@ -1,6 +1,10 @@
 {
-  "app": "app-S5HW3ASK.min.js",
-  "fetch": "fetch-HXKD36VK.min.js",
-  "is-land": "is-land-TXS7GROR.min.js",
-  "style": "style-6PHCCTOC.min.css"
+  "app.map": "app.js.map",
+  "app": "app.js",
+  "fetch.map": "fetch.js.map",
+  "fetch": "fetch.js",
+  "is-land.map": "is-land.js.map",
+  "is-land": "is-land.js",
+  "style.map": "style.css.map",
+  "style": "style.css"
 }
diff --git a/src/_includes/default.html b/src/_includes/default.html
@@ -9,7 +9,7 @@
   <script type="module" defer src="{{ '/app/is-land.js' | hash }}"></script>
 </head>
 <body>
-  <header>
+  <header data-density-shift>
     <h1>{{ title }}</h1>
   </header>
   <main>

diff --git a/src/index.md b/src/index.md
@@ -48,3 +48,4 @@ A more interesting example
 <p id="wordapp"></p>
 <script type="module" src="{{ '/app/fetch.js' | hash }}"></script>
 
+<footer>Woodcox 2024</footer>
diff --git a/src/scripts/jsx/fetch.jsx b/src/scripts/jsx/fetch.jsx
@@ -57,7 +57,7 @@ const App = () => {
         {text()[0].meanings.map((meaning, index) => (
           <div key={index}>
             <h4>{meaning.partOfSpeech}</h4>
-            <ul>
+            <ul data-density-shift>
               {meaning.definitions.map((definition, idx) => (
                 <li key={idx}>
                   <p>{definition.definition}</p>

diff --git a/src/style/style.scss b/src/style/style.scss
@@ -31,16 +31,16 @@ $scrollbar-color: rgb(202, 202, 232);
   --bg-cube-1: #dee2e6; // grey-3
   --bg-cube-2: #ffffff; // white
   --bg-cube-3: #f1f3f5; // gray-1
-  --size-step--2: clamp(0.7813rem, 0.7747rem + 0.0326vw, 0.8rem);
-  --size-step--1: clamp(0.9375rem, 0.9158rem + 0.1087vw, 1rem);
-  --size-step-base: clamp(1.125rem, 1.0815rem + 0.2174vw, 1.25rem);
-  --size-step-1: clamp(1.35rem, 1.2761rem + 0.3696vw, 1.5625rem);
-  --size-step-2: clamp(1.62rem, 1.5041rem + 0.5793vw, 1.9531rem);
-  --size-step-3: clamp(1.9438rem, 1.7707rem + 0.8652vw, 2.4413rem);
-  --size-step-4: clamp(2.3325rem, 2.0823rem + 1.2511vw, 3.0519rem);
-  --size-step-5: clamp(2.7994rem, 2.4461rem + 1.7663vw, 3.815rem);
-  --size-step-6: clamp(3.3594rem, 2.8694rem + 2.45vw, 4.7681rem);
-  --box-density-size: 0.5rem;
+  --text-size--2: clamp(0.7813rem, 0.7747rem + 0.0326vw, 0.8rem);
+  --text-size--1: clamp(0.9375rem, 0.9158rem + 0.1087vw, 1rem);
+  --text-size-base: clamp(1.125rem, 1.0815rem + 0.2174vw, 1.25rem);
+  --text-size-1: clamp(1.35rem, 1.2761rem + 0.3696vw, 1.5625rem);
+  --text-size-2: clamp(1.62rem, 1.5041rem + 0.5793vw, 1.9531rem);
+  --text-size-3: clamp(1.9438rem, 1.7707rem + 0.8652vw, 2.4413rem);
+  --text-size-4: clamp(2.3325rem, 2.0823rem + 1.2511vw, 3.0519rem);
+  --text-size-5: clamp(2.7994rem, 2.4461rem + 1.7663vw, 3.815rem);
+  --text-size-6: clamp(3.3594rem, 2.8694rem + 2.45vw, 4.7681rem);
+  --box-density-size: 0.3rem;
 }
 
 @media (prefers-color-scheme: dark) {
@@ -82,15 +82,14 @@ $typescale: 1.25;
 }
 
 @mixin spacing-vars($selector, $levels, $attr-sel: '[data-density-shift]') {
-  //$attr-sel: "[data-density-shift]";
   @for $i from 1 through $levels {
     $nest-sel: if($i == 1, $selector, selector-nest($nest-sel, $attr-sel));
 
     #{$nest-sel} {
-      font-size: calc(#{type-calc($levels - $i)} * var(--text_standard_font-size, 1rem));
-      --text-display: min(#{type-calc(($levels - $i) + 5)} * var(--text_standard_font-size, 1rem), var(--text_display_min-size, 6vw));
-      --text-heading: calc(#{type-calc(($levels - $i) + 1)} * var(--text_standard_font-size, 1rem));
-      --text-detail: calc(#{type-calc(($levels - $i) - 1)} * var(--text_standard_font-size, 1rem));
+      font-size: calc(#{type-calc($levels - $i)} * var(--text-size-base, 1rem));
+      --text-display: min(#{type-calc(($levels - $i) + 5)} * var(--text-size-base, 1rem), var(--text-size-min, 6vw));
+      --text-heading: calc(#{type-calc(($levels - $i) + 1)} * var(--text-size-base, 1rem));
+      --text-detail: calc(#{type-calc(($levels - $i) - 1)} * var(--text-size-base, 1rem));
       --space-near: calc(#{space-calc($levels - $i)} * var(--box-density-size, 0.5rem));
       --space-away: calc(#{space-calc(($levels - $i) + 1)} * var(--box-density-size, 0.5rem));
     }
@@ -157,12 +156,13 @@ body {
   padding: 0;
 }
 
+//
 footer,
 header,
 main {
   margin: 0 auto;
   max-width: var(--width-content);
-  padding: 3rem 1rem;
+  padding: var(--space-away) var(--space-near);
 }
 
 hr {
@@ -222,7 +222,7 @@ header a b,
 header a em,
 header a i,
 header a strong {
-  margin-left: 0.5rem;
+  margin-left: var(--space-near);
   margin-right: 0.5rem;
 }
 
@@ -329,18 +329,19 @@ h5,
 h6 {
   line-height: var(--line-height);
   text-wrap: balance;
+  margin-block-end: 0;
 }
 
 h1 {
-  font-size: var(--size-step-6);
+  font-size: var(--text-size-5);
 }
 
 h2 {
-  font-size: var(--size-step-5);
+  font-size: var(--text-size-4);
 }
 
 h3 {
-  font-size: var(--size-step-4);
+  font-size: var(--text-size-3);
 }
 
 mark {
@@ -349,14 +350,14 @@ mark {
 
 ol li,
 ul li {
-  padding: 0.2rem 0;
+  padding: var(--space-near) 0;
 }
 
 p {
-  margin: 0.75rem 0;
+  margin: var(--space-near) 0;
   padding: 0;
   width: 100%;
-  font-size: var(--size-step-base);
+  font-size: var(--text-size-base);
 }
 
 pre {