Merge branch 'master' into lume

5 files changed, 44 insertions, 18 deletions

diff --git a/package.json b/package.json
index 6432e29..0e868f6 100644
--- a/package.json
+++ b/package.json
@@ -9,7 +9,7 @@
   },
   "scripts": {
     "build": "node build/postcss.js",
-    "www": "eleventy --config=www/.eleventy.cjs && build/version-history.sh",
+    "www": "eleventy --config=www/.eleventy.cjs && ./build/version-archive.sh",
     "dev": "eleventy --config=www/.eleventy.cjs --serve",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
diff --git a/src/components/nav-bar.css b/src/components/nav-bar.css
index 1599af5..b06ba2c 100644
--- a/src/components/nav-bar.css
+++ b/src/components/nav-bar.css
@@ -10,20 +10,31 @@ header[is="nav-bar"] {
 	background: var(--bg-2);
 	border-block-end: 1px solid var(--accent);
 
+	overflow-x: auto;
+	scrollbar-width: thin;
+
 	/* Inner layout */
 	display: flex;
-	flex-flow: row wrap;
-	justify-content: space-around;
+	flex-flow: row;
 	gap: calc(2 * var(--rhythm));
 
+	& :first-child { margin-inline-start: auto; }
+	&  :last-child { margin-inline-end:   auto; }
+	& * { flex-shrink: 0 }
+
 	& nav ul[role="list"] {
+		padding-inline-start: 0;
 		display: flex;
-		flex-flow: row wrap;
+		flex-flow: row;
 		gap: var(--rhythm);
+
+		& * { flex-shrink: 0 }
 	}
 
 	& a {
 		font-weight: bold;
 		text-decoration: none;
 	}
+
+	
 }
diff --git a/src/components/tabs.css b/src/components/tabs.css
index 0ff630f..e524518 100644
--- a/src/components/tabs.css
+++ b/src/components/tabs.css
@@ -2,22 +2,21 @@
 [role="tablist"] {
     display: flex;
     gap: .5ch;
-    overfiow-x: auto;
     scrollbar-width: thin;
 }
 
-[role="tab"] {
+[role="tab"][role="tab"] {
     all: initial;
 
     padding: 0 calc(var(--rhythm) / 4);
     margin: 0;
     min-height: var(--rhythm);
 
-    border: 1px solid var(--faded-fg);
+    border: solid var(--accent);
+    border-width: 1px 1px 0 1px;
+    border-block-end-color: transparent;
     background: var(--bg-3);
 
-    transform: translateY(1px);
-
     border-start-start-radius: .4em;
     border-start-end-radius: .4em;
 
@@ -25,15 +24,12 @@
         outline-bottom: none;
     }
     
-    &:active {
-        transform: translateY(.2em);
-        clip-path: inset(0 0 calc(.2em - 1px) 0);
-        border-block-end: 1px solid var(--bg);
-    }
-    
-    &[aria-selected="true"] {
-        background: var(--bg);
-        border-block-end: 1px solid var(--bg);
+    &:active, &[aria-selected="true"] {
+        transform: none;
+        bottom: -1px;
+        position: relative;
+        background: var(--bg-2);
+        border-block-end: 1px solid var(--bg-2);
     }
 }
 
@@ -42,4 +38,5 @@
     margin-block-start: 0;
     border-start-start-radius: 0;
     border-start-end-radius: 0;
+    z-index: 1;
 }
diff --git a/src/util/layout.css b/src/util/layout.css
index 7e20afc..551b821 100644
--- a/src/util/layout.css
+++ b/src/util/layout.css
@@ -7,6 +7,8 @@
     gap: var(--gap);
 
     & > * {
+        flex-grow: 1;
+        flex-shrink: 0;
         flex-basis: var(--col-width);
         margin: 0;
         min-width: 1px;
@@ -19,6 +21,8 @@
 .colwidth-m { --col-width: 24ch }
 .colwidth-s { --col-width: 15ch }
 
+.col-0  { flex-grow: 0  }
+.col-1  { flex-grow: 1  }
 .col-2  { flex-grow: 2  }
 .col-3  { flex-grow: 3  }
 .col-4  { flex-grow: 4  }
@@ -35,6 +39,11 @@
 
 .fullbleed {
     position: relative;
+    width: 100vw;
     left: 50%;
     transform: translateX(-50vw);  
 }
+
+.pad {
+    padding-inline: var(--gap);
+}
diff --git a/www/docs/layout.md b/www/docs/layout.md
index 9903573..faad9a3 100644
--- a/www/docs/layout.md
+++ b/www/docs/layout.md
@@ -31,8 +31,17 @@ If you want an element to take up multiple columns, use the `col-*` classes:
  * <dfn>`.col-11`</dfn>
  * <dfn>`.col-12`</dfn>
 
+There's also <dfn>`.col-0`</dfn>, which makes an element take on its intrinsic
+size without regard for the column grid, and <dfn>`.col-1`</dfn>, just for
+completeness' sake.
+
+
 ## Full Bleed
 
 Add the <dfn>`.full-bleed`</dfn> class to make an element go outside its
 container and span the whole width of the viewport.
 
+## Pad
+
+Add some padding with <dfn>`.pad`</dfn>.
+