AdamMescher · January 10, 2024 22:05 · Apr 22, 2023 · Apr 22, 2023 · Apr 22, 2023 · Apr 22, 2023
diff --git a/flow-fluid-css.css → lobotomized-style-selector.css b/flow-fluid-css.css → lobotomized-style-selector.css
diff --git a/fluid-flow-headings.css → fluid-flow-headings-and-text.css b/fluid-flow-headings.css → fluid-flow-headings-and-text.css
@@ -15,4 +15,16 @@ h2 {
 
 h3 {
   font-size: var(--step-size-3);
+}
+
+p,
+li,
+blockquote:not([class]) {
+  max-width: 50ch;
+}
+
+h1,
+h2,
+h3 {
+  max-width: 20ch;
 }
diff --git a/fluid-flow-headings.css b/fluid-flow-headings.css
@@ -0,0 +1,18 @@
+h1,
+h2,
+h3 {
+  line-height: 1;
+  letter-spacing: var(--tracking-s);
+}
+
+h1 {
+  font-size: var(--step-size-5);
+}
+
+h2 {
+  font-size: var(--step-size-4);
+}
+
+h3 {
+  font-size: var(--step-size-3);
+}
diff --git a/flow-fluid-body.css b/flow-fluid-body.css
@@ -0,0 +1,8 @@
+body {
+  color: var(--color-dark);
+  background: var(--color-light);
+  font-size: var(--size-step-1);
+  font-family: var(--font-base);
+  line-height: 1.4;
+  letter-spacing: var(--tracking); 
+}
diff --git a/root.css b/root.css
@@ -11,4 +11,16 @@
   --size-step-1: var(--utopia-type-token);
   --size-step-2: var(--utopia-type-token);
   --size-step-3: var(--utopia-type-token);
+
+  --gutter: var(--space-s-m);
+
+  --border-radius: var(--size-step-1);
+
+  --transition-base: 250ms ease;
+  --transition-movement: 200ms linear;
+  --transition-fade: 200ms ease;
+  --transition-bounce: 500ms cubic-bezier(0.5, 0.5, 0.2, 1.5);
+
+  --tracking: -0.05ch;
+  --tracking-s: -0.075ch;
 }
diff --git a/root.css b/root.css
@@ -0,0 +1,14 @@
+:root {
+  --color-primary: var(--color-theme-token);
+  --color-primary-glare: var(--color-theme-token);
+  --color-secondary: var(--color-theme-token);
+  --color-secondary-glare: var(--color-theme-token);
+
+  --space-s: var(--utopia-space-token);
+  --space-m: var(--utopia-space-token);
+  --space-l: var(--utopia-space-token);
+
+  --size-step-1: var(--utopia-type-token);
+  --size-step-2: var(--utopia-type-token);
+  --size-step-3: var(--utopia-type-token);
+}
diff --git a/flow-fluid-baseline.css b/flow-fluid-baseline.css
@@ -0,0 +1,54 @@
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+body,
+h1,
+h2,
+h3,
+h4,
+p,
+figure,
+blockquote,
+dl,
+dd {
+  margin: 0;
+}
+
+ul[role="list"],
+ol[role="list] {
+  list-style: none;
+}
+
+html {
+  text-size-adjust: none;
+  -webkit-text-size-adjust: none;
+}
+
+html:focus-within {
+  scroll-behavior: smooth;
+}
+
+body {
+  min-height: 100vh;
+  text-rendering: optimizeSpeed;
+  line-height: 1.5;
+}
+
+a:not([class]) {
+  text-decoration-skip-link: auto;
+}
+
+img,
+picture {
+  max-width: 100%;
+  display: block;
+}
+
+input,
+button,
+textarea,
+select {
+  font: inherit;
+}
diff --git a/flow-fluid-features.css b/flow-fluid-features.css
@@ -5,4 +5,20 @@
   --flow-space: var(--space-s);
 
   text-align: center;
+}
+
+.features svg {
+  display: block;
+  margin-inline: auto;
+  height: 4em;
+}
+
+.features a {
+  text-decoration: none;
+}
+
+.features a:hover {
+  text-decoration: underline;
+  text-decoration-thickness: 0.08ex;
+  text-decoration-underline-offset: 0.2ex;
 }
diff --git a/flow-fluid-features.css b/flow-fluid-features.css
@@ -0,0 +1,8 @@
+.features {
+  --grid-placement: auto-fit;
+  --grid-min-item-size: clamp(16rem, 33%, 20rem);
+  --gutter: var(--space-l-xl);
+  --flow-space: var(--space-s);
+
+  text-align: center;
+}
diff --git a/flow-fluid-two-columns.css b/flow-fluid-two-columns.css
@@ -1,4 +1,9 @@
 .grid[data-layout="50-50"] {
   --grid-placement: auto-fit;
   --grid-min-item-size: clamp(16rem, 50vw, 26rem);
+}
+
+.grid[data-layout="masonry"] {
+  grid-template-rows: masonry;
+  align-items: start;
 }
diff --git a/questionably-clever.html b/questionably-clever.html
@@ -1,4 +1,4 @@
-<ul class="grid" role="list">
+<ul class="grid" role="list" data-rows="masonry" data-layout="50-50">
 ...
 </ul>
 

diff --git a/flow-fluid-card.css b/flow-fluid-card.css
@@ -0,0 +1,7 @@
+.card {
+  background: var(--color-dark);
+  color: var(--color-light);
+  padding: var(--space-m-l);
+  border-radius: var(--border-radius);
+  max-width: unset;
+}
diff --git a/flow-fluid-two-columns.css b/flow-fluid-two-columns.css
@@ -0,0 +1,4 @@
+.grid[data-layout="50-50"] {
+  --grid-placement: auto-fit;
+  --grid-min-item-size: clamp(16rem, 50vw, 26rem);
+}
diff --git a/class-role.html b/class-role.html
@@ -1,3 +0,0 @@
-<ul class="grid" role="list">
-...
-</ul>

diff --git a/questionably-clever.html b/questionably-clever.html
@@ -0,0 +1,9 @@
+<ul class="grid" role="list">
+...
+</ul>
+
+<style>
+  [role='list'] {
+    padding: 0;
+  }
+</style>
diff --git a/class-role.html b/class-role.html
@@ -0,0 +1,3 @@
+<ul class="grid" role="list">
+...
+</ul>
diff --git a/flow-fluid-grid.css b/flow-fluid-grid.css
@@ -0,0 +1,8 @@
+.grid {
+  display: grid;
+  grid-template-columns: repeat(
+    var(--grid-placement, auto-fill),
+    minmax(var(--grid-min-item-size, 16rem), 1fr)
+  );
+  gap: var(--gutter, var(--space-s-l));
+}
diff --git a/flow-fluid-css.css b/flow-fluid-css.css
@@ -1,3 +1,3 @@
 .flow > * + * {
-  margin-top: var(--flow-space, 1em);
+  margin-inline-start: var(--flow-space, 1em);
 }
diff --git a/flow-fluid-css.css b/flow-fluid-css.css
@@ -0,0 +1,3 @@
+.flow > * + * {
+  margin-top: var(--flow-space, 1em);
+}
diff --git a/flow-fluid-region.css b/flow-fluid-region.css
@@ -0,0 +1,4 @@
+.region {
+  padding-inline-start: var(--region-space, var(--space-l-2xl));
+  padding-inline-end: var(--region-space, var(--space-l-2xl));
+}
No results found