oh look, a messy commit!

look, nobody contributes to this anyway

18 files changed, 77 insertions, 65 deletions

diff --git a/build/postcss.ts b/build/postcss.ts
index adebfad..d928be4 100644
--- a/build/postcss.ts
+++ b/build/postcss.ts
@@ -2,7 +2,6 @@ import * as path from "std/path/mod.ts";
 import postcss from "https://esm.sh/postcss@8.4.16";
 import nesting from "https://esm.sh/postcss-nesting@10.1.7?dev&deps=postcss@8.4.16";
 import atImport from "https://esm.sh/postcss-easy-import@4.0.0?dev&deps=postcss@8.4.16";
-import mixins from "https://esm.sh/postcss-mixins@9.0.2?dev&deps=postcss@8.4.16";
 import autoprefixer from "https://esm.sh/autoprefixer@10.4.7?dev&deps=postcss@8.4.16";
 import csso from "https://esm.sh/csso@3.5.1";
 
@@ -11,7 +10,6 @@ const dist = "dist";
 const pc = postcss([
   atImport(),
   nesting(),
-  mixins(),
   autoprefixer({ overrideBrowserslist: ">1% and not ie 11" }),
 ]);
 
diff --git a/src/components/box.css b/src/components/box.css
index e151d23..e313343 100644
--- a/src/components/box.css
+++ b/src/components/box.css
@@ -1,5 +1,23 @@
 
-@define-mixin titlebar {
+.box,
+/* defined elsewhere */
+[role=menu],
+.sidebar,
+[role=tabpanel],
+figure,
+details,
+dialog,
+aside {
+    margin: var(--gap) 0;
+    padding: var(--gap);
+    overflow: clip;
+    
+    border-radius: var(--border-radius);
+    background: var(--box-bg);
+    border: 1px solid var(--faded-fg);
+}
+
+.titlebar {
     margin-inline: calc(0px - var(--gap));
     margin-block-end: calc(0px - var(--gap));
     padding-inline: var(--gap);
@@ -13,23 +31,3 @@
     background: var(--accent);
     color: var(--bg);
 }
-
-@define-mixin box {
-    margin: var(--gap) 0;
-    padding: var(--gap);
-    overflow: clip;
-    
-    border-radius: var(--border-radius);
-    background: var(--box-bg);
-    border: 1px solid var(--faded-fg);
-    
-    @mixin padded;
-}
-
-.box {
-    @mixin box;
-}
-
-.titlebar {
-    @mixin titlebar;
-}
diff --git a/src/components/menu.css b/src/components/menu.css
index 295f1f6..9bdc659 100644
--- a/src/components/menu.css
+++ b/src/components/menu.css
@@ -1,7 +1,6 @@
 
 [role="menu"] {
-    @mixin box;
-
+    /* SEE components/box.css */
     position: absolute;
     
     padding: calc(var(--gap) / 2) 0;
diff --git a/src/components/nav-bar.css b/src/components/nav-bar.css
index cc45e4c..0af7520 100644
--- a/src/components/nav-bar.css
+++ b/src/components/nav-bar.css
@@ -1,7 +1,7 @@
 
 .navbar {
-	margin: 0;
-	padding: 0 var(--rhythm);
+	margin: 0 0 var(--gap) 0;
+	padding: var(--rhythm);
 
 	font-family: var(--secondary-font);
 
@@ -14,11 +14,13 @@
 	/* Inner layout */
 	display: flex;
 	flex-flow: row;
+	justify-content: center;
 	gap: calc(2 * var(--rhythm));
 
-	& :first-child { margin-inline-start: auto; }
-	&  :last-child { margin-inline-end:   auto; }
-	& * { flex-shrink: 0 }
+	& * {
+		flex-shrink: 0;
+		margin-block: 0;
+	}
 
 	& nav ul[role="list"] {
 		padding-inline-start: 0;
diff --git a/src/components/sidebar.css b/src/components/sidebar.css
index 230d169..bf0e002 100644
--- a/src/components/sidebar.css
+++ b/src/components/sidebar.css
@@ -1,6 +1,6 @@
 
 .sidebar {
-    @mixin box;
+    /* SEE components/box.css */
 
 	font-family: var(--secondary-font);
     
diff --git a/src/components/tabs.css b/src/components/tabs.css
index 6c92a31..32c6b10 100644
--- a/src/components/tabs.css
+++ b/src/components/tabs.css
@@ -14,7 +14,7 @@
     margin: 0;
     min-height: var(--rhythm);
 
-    border: solid var(--box-border);
+    border: solid var(--faded-fg);
     border-width: 1px 1px 0 1px;
     border-block-end-color: transparent;
     background: var(--interactive-bg);
@@ -29,10 +29,21 @@
         background: var(--box-bg);
         border-block-end: 1px solid var(--box-bg);
     }
+
+    &:hover {
+        background-color: var(--box-bg);
+    }
+
+    &:focus {
+        background-color: var(--box-bg);
+        border-color: var(--accent);
+        outline: 1px solid var(--accent);
+    }
 }
 
 [role="tabpanel"] {
-    @mixin box;
+    /* SEE components/box.css */
+
     margin-block-start: 0;
     border-start-start-radius: 0;
     border-start-end-radius: 0;
diff --git a/src/elements/forms.css b/src/elements/forms.css
index 9a1a3bf..852904e 100644
--- a/src/elements/forms.css
+++ b/src/elements/forms.css
@@ -161,8 +161,6 @@ fieldset {
 	width: 100%;
 	border-radius: var(--border-radius);
 
-	@mixin padded;
-
 	& > legend + * { margin-block-start: 0 }
 
 	border: 1px solid var(--faded-fg);
diff --git a/src/elements/grouping.css b/src/elements/grouping.css
index 7f51ef1..aa6a302 100644
--- a/src/elements/grouping.css
+++ b/src/elements/grouping.css
@@ -95,7 +95,7 @@ figure {
 	max-width: 100%;
 	margin-inline: 0;
 
-	@mixin box;
+    /* SEE components/box.css */
 }
 figcaption {
 	margin-block: var(--gap);
@@ -108,5 +108,7 @@ figcaption {
 main {
 	max-inline-size: var(--eff-line-length);
 	margin: auto;
+
+	&:first-child { padding-top: var(--gap); }
 }
 
diff --git a/src/elements/interactive.css b/src/elements/interactive.css
index 15dea41..37078b2 100644
--- a/src/elements/interactive.css
+++ b/src/elements/interactive.css
@@ -4,7 +4,8 @@
  ***/
 
 details {
-	@mixin box;
+    /* SEE components/box.css */
+
 	padding-block-start: 0;
 	&:not([open]) { padding-block-end: 0; }
 }
@@ -36,7 +37,8 @@ summary {
 
 
 dialog {
-	@mixin box;
+    /* SEE components/box.css */
+	
     position: absolute;
     inline-inset: 0;
     
diff --git a/src/elements/sections.css b/src/elements/sections.css
index ada3b79..2025845 100644
--- a/src/elements/sections.css
+++ b/src/elements/sections.css
@@ -31,7 +31,7 @@ nav {
 }
 
 aside {
-	@mixin box;
+    /* SEE components/box.css */
 
 	& h1,
 	& h2,
diff --git a/src/util/flex.css b/src/util/flex.css
index 5a9841d..341354f 100644
--- a/src/util/flex.css
+++ b/src/util/flex.css
@@ -15,14 +15,15 @@
 
 .f-switch {
     display: flex;
-    flex-flow: row wrap;
+    flex-wrap: wrap;
     gap: var(--gap);
-    --col-width: 15ch;
-    & > * { margin: 0 }
-
+    --f-switch-threshold: 55ch;
+    
     & > * {
-        flex-basis: calc((var(--col-width) - 100%) * 999);
+        margin: 0;
+
         flex-grow: 1;
+        flex-basis: calc((var(--f-switch-threshold) - 100%) * 999);
     }
 }
 
diff --git a/src/util/layout.css b/src/util/layout.css
index 108659f..299e162 100644
--- a/src/util/layout.css
+++ b/src/util/layout.css
@@ -37,27 +37,24 @@
 
 /**/
 
-@define-mixin padded {
-    /* artificially increase specificity */
-    /* TODO: come up with a better way to do this */
-    & > :first-child:first-child:first-child:first-child,
-    & > :first-child>:first-child:first-child:first-child,
-    & > :first-child>:first-child>:first-child:first-child,
-    & > :first-child>:first-child>:first-child>:first-child { margin-block-start: 0; }
-	& > :last-child:last-child:last-child:last-child,
-	& > :last-child>:last-child:last-child:last-child,
-	& > :last-child>:last-child>:last-child:last-child,
-	& > :last-child>:last-child>:last-child>:last-child     { margin-block-end:   0; }
-}
+/* ugh, specificity hacks */
+*:first-child:first-child:first-child { margin-block-start: 0; }
+*:last-child:last-child:last-child    { margin-block-end:   0; }
 
-.padding { padding-inline: var(--gap); @mixin padded; }
-.padding-block { padding-block: var(--gap); @mixin padded; }
+.padding { padding-inline: var(--gap) }
+.padding-block { padding-block: var(--gap) }
 .padding-inline { padding-inline: var(--gap) }
 
 .margin { margin: var(--gap) }
 .margin-block  { margin-block:  var(--gap) }
 .margin-inline { margin-inline: var(--gap) }
 
+.flow-gap {
+    & > :not(:last-child) {
+        margin-bottom: 1em;
+    }
+}
+
 /**/
 
 .inline { display: inline }
diff --git a/www/_config.ts b/www/_config.ts
index 3396e13..d4b363d 100644
--- a/www/_config.ts
+++ b/www/_config.ts
@@ -50,6 +50,7 @@ export default lume(
   },
 )
   .copy("netlify.redirects", "_redirects")
+  .copy("js")
   .addEventListener("afterRender", postcss)
   .use(date())
   .use(highlighting())
diff --git a/www/demos.md b/www/demos.md
index 0470142..d52d21c 100644
--- a/www/demos.md
+++ b/www/demos.md
@@ -7,9 +7,9 @@ templateEngine: eta,md
 
 # Demos
 
-<ul class='list-of-links'>
+<ul class='list-of-links flow-gap'>
 <% for (const demo of search.pages("demo")) { _%>
-<li><p><a href="<%= demo.data.url %>"><%= demo.data.name %></a>
+<li><a href="<%= demo.data.url %>"><%= demo.data.name %></a>
 <% } %>
 </ul>
 
diff --git a/www/demos/landing-page.html b/www/demos/landing-page.html
index 39c95b8..0019ce6 100644
--- a/www/demos/landing-page.html
+++ b/www/demos/landing-page.html
@@ -67,7 +67,7 @@ name: Landing Page
         Rerum ipsam consequatur autem eaque et velit?
     </p>
 
-    <ul role="list" class="basicgrid dense">
+    <ul role="list" class="f-switch dense">
         <li class="box">
             <h2 class="<h4>">Beautiful by default</h2>
             <p>Just drop the stylesheet in and use semantic HTML.</p>
@@ -84,7 +84,7 @@ name: Landing Page
 </main>
 
 <footer>
-    <nav class="basicgrid">
+    <nav class="f-switch">
         <div>
             <h4>Company</h4>
             <ul role="list">
diff --git a/www/docs/index.md b/www/docs/index.md
index 0b2e7c1..9002205 100644
--- a/www/docs/index.md
+++ b/www/docs/index.md
@@ -19,6 +19,8 @@ If you're using Prism.js to highlight code, consider our syntax theme as well:
 
 Then, see how you can go beyond classless CSS with its features:
 
+<div class=box>
+
  * [Improve your **forms**](/docs/forms)
 
  * [Customize with CSS **variables**](/docs/variables)
@@ -35,8 +37,9 @@ Then, see how you can go beyond classless CSS with its features:
 
  * [Use our **utility classes**](/docs/utils)
 
- {.list-of-links .textcolumns role=list}
+ { .list-of-links .textcolumns .flow-gap role=list}
 
+</div>
 
 ## Index
 
diff --git a/www/index.md b/www/index.md
index b7fc689..3ba1130 100644
--- a/www/index.md
+++ b/www/index.md
@@ -43,7 +43,7 @@ authors
 
  - create unique sites by applying utility classes as needed.
 
-{.textcolumns .dense style="--col-width: 15em; margin-bottom: calc(0px - var(--gap));"}
+{.flow-gap .textcolumns .dense style="--col-width: 15em; margin-bottom: calc(0px - var(--gap));"}
 
 missing.css is not designed to be a complete styling solution for large
 websites. It may serve as a basis for a more completely styled site, but does
diff --git a/www/releases.md b/www/releases.md
index ba630f8..13ee3cf 100644
--- a/www/releases.md
+++ b/www/releases.md
@@ -9,4 +9,4 @@ renderOrder: 1
 <% for (const page of search.pages("release", "date=desc")) { %>
  * [v<%= page.data.release %>](<%= page.data.url %>)
 <% } %>
-{.list-of-links}
\ No newline at end of file
+{.list-of-links .flow-gap}
\ No newline at end of file