feat: new website powered by 11ty

vycke · Feb 4, 2024 · dba4be8 · dba4be8
1 parent b432be4
commit dba4be8
Show file tree

Hide file tree

Showing 31 changed files with 2,144 additions and 1,163 deletions.
diff --git a/.eleventy.js b/.eleventy.js
@@ -0,0 +1,13 @@
+module.exports = (config) => {
+  config.addPassthroughCopy({ "./public/": "/" });
+
+  return {
+    markdownTemplateEngine: "njk",
+    dataTemplateEngine: "njk",
+    htmlTemplateEngine: "njk",
+    dir: {
+      input: "site",
+      output: "_site",
+    },
+  };
+};
diff --git a/.gitignore b/.gitignore
@@ -7,4 +7,5 @@ npm-debug.*
 .sass-cache
 node_modules
 
+_site
 yarn-error.log
diff --git a/feo.css b/feo.css
@@ -232,7 +232,7 @@
   }
 
   pre > code {
-    padding: var(--token-size-0) var(--token-size-1);
+    padding: var(--token-size-00) var(--token-size-0);
     font-size: var(--token-size-00);
     tab-size: 2;
     -webkit-text-size-adjust: none;
@@ -416,7 +416,7 @@
   .sidebar {
     --layout-gap: 0;
     --layout-width: 0;
-    --min-inline-size: 60%;
+    --min-inline-size: 67%;
     gap: var(--layout-gap);
     flex-wrap: wrap;
     display: flex;
@@ -528,6 +528,10 @@
     --layout-gap: auto;
   }
 
+  .--gap-0000 {
+    --layout-gap: var(--token-size-0000);
+  }
+
   .--gap-000 {
     --layout-gap: var(--token-size-000);
   }
@@ -1066,6 +1070,10 @@
     text-align: center;
   }
 
+  .lh-1 {
+    line-height: 1;
+  }
+
   .maxw-000 {
     max-width: var(--token-bp-000);
   }
@@ -1102,7 +1110,7 @@
 @layer components {
   label {
     color: var(--color-foreground-1);
-    font-size: var(--token-size-00);
+    font-size: var(--token-size-0);
     flex-direction: column;
     gap: 4px;
     display: flex;
@@ -1163,6 +1171,7 @@
   }
 
   label:has(input[type="checkbox"]) {
+    align-items: center;
     gap: var(--token-size-00);
     flex-direction: row;
   }
@@ -1216,7 +1225,7 @@
     outline: 2px solid #1e90ff;
   }
 
-  div:has( > table) {
+  div:has( > tabl:first-child) {
     overflow-x: auto;
   }
 
@@ -1227,7 +1236,6 @@
     background: var(--table-color);
     border-radius: calc(var(--table-radius) * 1.3);
     width: 100%;
-    overflow-x: auto;
   }
 
   table tr:last-child td:first-child {

diff --git a/feo.min.css b/feo.min.css
diff --git a/package.json b/package.json
@@ -1,11 +1,12 @@
 {
   "dependencies": {},
   "scripts": {
-    "build:full": "lightningcss --bundle --nesting  --targets '> 0.25%, not IE 11' src/index.css -o feo.css",
-    "build:site": "lightningcss --bundle --nesting --minify --targets '> 0.25%, not IE 11' src/index.css -o site/feo.min.css",
-    "build:min": "lightningcss --bundle --nesting --minify --targets '> 0.25%, not IE 11' src/index.css -o feo.min.css",
-    "build": "yarn build:min && yarn build:full && yarn build:site",
-    "start": "onchange 'src/**/*.css' -- yarn build"
+    "css:bundle": "lightningcss --bundle --nesting  --targets '> 0.25%, not IE 11' src/index.css -o feo.css",
+    "css:minified": "lightningcss --bundle --nesting --minify --targets '> 0.25%, not IE 11' src/index.css -o feo.min.css",
+    "css:docs": "lightningcss --bundle --nesting --minify --targets '> 0.25%, not IE 11' src/index.css -o public/feo.min.css",
+    "build": "yarn css:bundle && yarn css:minified && yarn css:docs",
+    "start": "eleventy --serve && onchange 'src/**/*.css' -- yarn build",
+    "build:11ty": "npx @11ty/eleventy onchange 'src/**/*.css' -- yarn css:docs"
   },
   "name": "feo-css",
   "version": "4.2.0",
@@ -23,6 +24,7 @@
   },
   "homepage": "https://github.com/vyckes/feo-css#readme",
   "devDependencies": {
+    "@11ty/eleventy": "^2.0.1",
     "lightningcss-cli": "^1.18.0",
     "onchange": "^7.1.0"
   }

diff --git a/public/demo.css b/public/demo.css
@@ -0,0 +1,26 @@
+nav {
+  top: 1rem;
+}
+
+@media (max-width: 637px) {
+  nav {
+    position: relative;
+  }
+
+  nav ul {
+    flex-direction: row;
+    flex-wrap: wrap;
+  }
+
+  nav li {
+    white-space: nowrap;
+  }
+}
+
+article > * + * {
+  margin-top: var(--token-size-0);
+}
+
+article > * + h2 {
+  margin-top: var(--token-size-3);
+}
diff --git a/site/favicon.ico → public/favicon.ico b/site/favicon.ico → public/favicon.ico
diff --git a/public/feo.min.css b/public/feo.min.css
diff --git a/site/_includes/base.njk b/site/_includes/base.njk
@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Feo.css - {{ title }}</title>
+    <meta name="robots" content="index,follow" />
+    <meta
+      name="description"
+      content="Feo.css is a classless css and layout library"
+    />
+    <meta name="keywords" content="CSS, layout, patterns, cube css">
+    <meta name="content" content="CSS, layout, patterns, cube css">
+    <meta name="property" content="CSS, layout, patterns, cube css">
+    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="color-scheme" content="light dark" />
+    <meta
+      name="theme-color"
+      media="(prefers-color-scheme: light)"
+      content="#F7F9FB"
+    />
+    <meta
+      name="theme-color"
+      media="(prefers-color-scheme: dark)"
+      content="#0E131B"
+    />
+    <meta name="view-transition" content="same-origin" />
+    <link rel="stylesheet" href="/feo.min.css" />
+    <link rel="stylesheet" href="/demo.css" />
+    <link rel="icon" href="/favicon.ico" sizes="any" />
+  </head>
+
+  <body class="p-0 flex-col">
+    <main class="sidebar --left --width-000 --gap-0 | relative flex-grow">
+      <!-- NAVIGATION -->
+      <nav class="sticky">
+        <div class="flex-row --gap-000 items-center">
+          <svg height="32" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path fill-rule="evenodd" clip-rule="evenodd" d="M15 25C15 30.5228 19.4772 35 25 35C30.5228 35 35 30.5229 35 25C35 19.4772 30.5228 15 25 15C19.4772 15 15 19.4772 15 25ZM25 20C22.2386 20 20 22.2386 20 25C20 27.7614 22.2386 30 25 30C27.7614 30 30 27.7614 30 25C30 22.2386 27.7614 20 25 20Z" fill="var(--color-foreground-0)"/>
+            <path fill-rule="evenodd" clip-rule="evenodd" d="M43.1623 44.4868L28.1623 49.4868C26.1096 50.1711 23.8904 50.1711 21.8377 49.4868L6.83772 44.4868C2.7543 43.1257 0 39.3043 0 35L2.31474e-06 15C2.69103e-06 10.6957 2.7543 6.8743 6.83773 5.51316L21.8377 0.513167C23.8904 -0.171056 26.1096 -0.171055 28.1623 0.513167L43.1623 5.51317C47.2457 6.87431 50 10.6957 50 15L50 35C50 39.3043 47.2457 43.1257 43.1623 44.4868ZM25 5C24.466 5 23.932 5.08553 23.4189 5.25658L8.41886 10.2566C6.37715 10.9372 5 12.8478 5 15L5 35C5 37.1522 6.37715 39.0628 8.41886 39.7434L23.4189 44.7434C23.932 44.9145 24.466 45 25 45C25.534 45 26.068 44.9145 26.5811 44.7434L41.5811 39.7434C43.6228 39.0629 45 37.1522 45 35L45 15C45 12.8479 43.6229 10.9372 41.5811 10.2566L26.5811 5.25658C26.068 5.08553 25.534 5 25 5Z" fill="var(--color-foreground-0)"/>
+          </svg>
+          <span class="size-1 bold lh-1">Feo.css</span> 
+        </div>
+        <span class="size-00">(v4.2.1)</span>
+        <ul role="list" class="flex-col --gap-000 | mt-0 pt-0000 | size-00">
+          <li {% if key == "home" %} class="bold"{% endif %}><a href="/">Homepage</a></li>
+          <li {% if key == "tokens" %} class="bold"{% endif %}><a href="/tokens">Design tokens</a></li>
+          <li {% if key == "layouts" %} class="bold"{% endif %} ><a href="/layouts">Layout patterns</a></li>
+          <li {% if key == "utilities" %} class="bold"{% endif %}><a href="/utilities">Utilities</a></li>
+          <li {% if key == "components" %} class="bold"{% endif %}><a href="/components">Components</a></li>
+          <li {% if key == "builtwith" %} class="bold"{% endif %}><a href="/builtwith">Built with</a></li>
+        </ul>
+      </nav>
+      <div class="flex-col">
+        <article class="center --width-3 | flex-grow">
+          <h1>{{title}}</h1>
+          {{ content | safe }}
+        </article>
+        <!-- FOOTER -->
+        <footer class="cluster --gap-000 justify-end | size-00 italic | mt-1">
+          <span>Powered by: <a href="https://11ty.dev" class="italic">11ty</a></span>
+          <span>|</span>
+          <a href="https://github.com/vyckes/feo-css">Github</a>
+          <span>|</span>
+          <span>Made by <a href="https://vyckes.dev">Vyckes</a>
+        </footer>
+      </div>
+    </main>
+  </body>
+</html>
diff --git a/site/_template.html b/site/_template.html
diff --git a/site/builtwith.md b/site/builtwith.md
@@ -0,0 +1,8 @@
+---
+layout: base.njk
+title: Projects/sites built with
+key: builtwith
+---
+
+- [Vyckes.dev](https://vyckes.dev): personal website of Feo.css' maintainer
+- [Feo.css](https://feo.vyckes.dev): document website of Feo.css