Update demo site with OddBird branding

README.md

@@ -1,11 +1,18 @@
 # CSS Anchor Positioning Polyfill
 
-[![Build Status](https://github.com/oddbird/css-anchor-positioning/actions/workflows/test.yml/badge.svg)](https://github.com/oddbird/css-anchor-positioning/actions/workflows/test.yml)
-
-[![Netlify Status](https://api.netlify.com/api/v1/badges/61a20096-7925-4775-99a9-b40a010197c0/deploy-status)](https://app.netlify.com/sites/anchor-polyfill/deploys)
+[![Build Status](https://github.com/oddbird/css-anchor-positioning/actions/workflows/test.yml/badge.svg)](https://github.com/oddbird/css-anchor-positioning/actions/workflows/test.yml) [![npm version](https://badge.fury.io/js/@oddbird%2Fcss-anchor-positioning.svg)](https://www.npmjs.com/package/@oddbird/css-anchor-positioning) [![Netlify Status](https://api.netlify.com/api/v1/badges/61a20096-7925-4775-99a9-b40a010197c0/deploy-status)](https://app.netlify.com/sites/anchor-polyfill/deploys)
 
 <!-- [WPT results](https://anchor-position-wpt.netlify.app/) -->
 
+- [Demo](https://anchor-positioning.oddbird.net/)
+- [Draft Spec](https://drafts.csswg.org/css-anchor-position/)
+
+The CSS anchor positioning
+[specification](https://drafts.csswg.org/css-anchor-position/) defines anchor
+positioning, "where a positioned element can size and position itself relative
+to one or more 'anchor elements' elsewhere on the page." This CSS Anchor
+Positioning Polyfill supports and is based on this specification.
+
 ## Browser Support
 
 - Firefox 54+

index.html

@@ -5,7 +5,6 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>CSS Anchor Positioning Polyfill Demo</title>
-    <link rel="stylesheet" href="https://unpkg.com/open-props" />
     <link
       rel="stylesheet"
       href="https://unpkg.com/[email protected]/themes/prism.css"
@@ -15,7 +14,15 @@
       crossorigin="anonymous"
       defer
     ></script>
+    <!-- TypeKit Fonts -->
+    <script src="https://use.typekit.net/slx1xnq.js"></script>
+    <script>
+      try {
+        Typekit.load({ async: true });
+      } catch (e) {}
+    </script>
     <link rel="stylesheet" href="/demo.css" />
+
     <!-- Included to test invalid stylesheets -->
     <link rel="stylesheet" href="/fake.css" />
     <link rel="stylesheet" href="/anchor.css" />
@@ -236,7 +243,7 @@ <h1>CSS Anchor Positioning Polyfill</h1>
           >WPT results</a
         > -->
         <a
-          href="https://w3c.github.io/csswg-drafts/css-anchor-position/"
+          href="https://drafts.csswg.org/css-anchor-position/"
           target="_blank"
           rel="noopener noreferrer"
           >Draft Spec</a
@@ -251,7 +258,7 @@ <h2>Anchoring Elements Using CSS</h2>
       <p>
         The CSS anchor positioning
         <a
-          href="https://w3c.github.io/csswg-drafts/css-anchor-position/"
+          href="https://drafts.csswg.org/css-anchor-position/"
           target="_blank"
           rel="noopener noreferrer"
           >specification</a
@@ -298,7 +305,7 @@ <h2>Anchoring Elements Using CSS</h2>
         <li>
           Browse or open issues related to the specification
           <a
-            href="https://github.com/w3c/csswg-drafts/labels/css-anchor-1"
+            href="https://github.com/w3c/csswg-drafts/labels/css-anchor-position-1"
             target="_blank"
             rel="noopener noreferrer"
             >here</a
@@ -854,8 +861,8 @@ <h2>
         <div id="my-target-math" class="target">Target</div>
       </div>
       <p class="note">
-        With polyfill applied: Target's left edge is 50px left of the Anchor's
-        right edge). The top edge of the Target is 50px above the bottom edge of
+        With polyfill applied: Target's left edge is 10px left of the Anchor's
+        right edge). The top edge of the Target is 10px below the bottom edge of
         the Anchor.
       </p>
       <pre><code class="language-css"
@@ -865,10 +872,10 @@ <h2>
 
 #my-target-math {
   --full-math: anchor(--my-anchor-math 100%);
-  --full-minus-math: calc(anchor(--my-anchor-math 100%) - 50px);
+  --full-minus-math: calc(anchor(--my-anchor-math 100%) - 10px);
 
   position: absolute;
-  top: calc(var(--full-math) - 50px);
+  top: calc(var(--full-math) + 10px);
   left: var(--full-minus-math);
 }</code></pre>
     </section>
@@ -1303,12 +1310,6 @@ <h2>Sponsor OddBird's OSS Work</h2>
           target="_blank"
           rel="noopener noreferrer"
           >OddBird</a
-        >. Designed using
-        <a
-          href="https://open-props.style/"
-          target="_blank"
-          rel="noopener noreferrer"
-          >Open Props</a
         >.
       </p>
     </footer>

package.json

@@ -64,7 +64,7 @@
     "eslint:fix": "npm run eslint:check -- --fix",
     "format:css": "npm run lint:css -- --fix",
     "format:js": "run-s prettier:fix eslint:fix tsc tsc:tests",
-    "lint": "run-p format:css format:js",
+    "lint": "run-s format:css format:js",
     "lint:css": "stylelint \"**/*.css\"",
     "lint:js": "run-s prettier:check eslint:check tsc tsc:tests",
     "lint:ci": "run-p lint:css lint:js",

public/anchor-absolute.css

@@ -4,11 +4,6 @@
   anchor-name: --my-anchor-absolute;
 }
 
-#my-anchor-absolute-one {
-  top: 10px;
-  left: 20px;
-}
-
 #my-anchor-absolute-two {
   top: 100px;
   left: 200px;

public/anchor-math.css

@@ -4,9 +4,9 @@
 
 #my-target-math {
   --full-math: anchor(--my-anchor-math 100%);
-  --full-minus-math: calc(anchor(--my-anchor-math 100%) - 50px);
+  --full-minus-math: calc(anchor(--my-anchor-math 100%) - 10px);
 
   position: absolute;
-  top: calc(var(--full-math) - 50px);
+  top: calc(var(--full-math) + 10px);
   left: var(--full-minus-math);
 }

public/anchor-scroll.css

@@ -1,7 +1,7 @@
 .scroll-container {
   height: 400px;
   overflow: scroll;
-  border: solid;
+  border: thin solid;
   position: relative;
 }
 

public/demo.css

@@ -4,39 +4,52 @@
 }
 
 html {
-  --action: var(--action-light);
-  --action-dark: var(--pink-2);
-  --action-light: hsl(339deg 68% 37%);
-  --anchor-color: var(--yellow-6);
-  --bg: var(--gray-1);
-  --brand: var(--green-9);
+  --brand-blue: lch(38.953% 23.391 229.55deg);
+  --brand-pink: lch(50.161% 77.603 3.8969deg);
+  --brand-pink-light: lch(from var(--brand-pink) calc(l + 8) c h);
+  --brand-pink-dark: lch(from var(--brand-pink) calc(l - 20) c h);
+  --brand-orange: lch(70.149% 72.526 55.336deg);
+  --brand-orange-dark: lch(from var(--brand-orange) calc(l - 20) c h);
+  --gray-1: lch(from var(--brand-blue) calc(l + 53) calc(c - 19) h);
+  --gray-2: lch(from var(--brand-blue) calc(l + 14) calc(c - 19) h);
+  --gray-3: lch(from var(--brand-blue) calc(l + 4) calc(c - 13) h);
+  --gray-4: lch(from var(--brand-blue) calc(l - 13) calc(c - 13) h);
+  --gray-5: lch(from var(--brand-blue) calc(l - 26) calc(c - 13) h);
+  --action: var(--brand-pink-dark);
+  --anchor-color: var(--brand-pink);
+  --bg: white;
+  --border: var(--gray-3);
   --button-border: var(--text);
-  --callout: var(--gray-3);
-  --disabled-bg: var(--gray-6);
-  --disabled-text: var(--gray-2);
-  --grad: var(--lime-0);
-  --target: var(--lime-8);
+  --text: var(--gray-5);
+  --callout: lch(89% 7 229deg);
+  --disabled-bg: var(--gray-3);
+  --disabled-text: white;
+  --target: var(--brand-blue);
   --link-focus: var(--text);
-  --outer-anchored: var(--blue-2);
-  --text: var(--gray-9);
+  --outer-anchored: var(--brand-orange-dark);
   --note-color: var(--target);
-  --page-margin: calc(var(--size-3) + 4vw);
-  --pseudo-element: var(--gray-0);
+  --page-margin: calc(1rem + 4vw);
+  --pseudo-element: var(--action);
+  --font-serif: freight-text-pro, baskerville, palatino, cambria, georgia, serif;
+  --font-sans: freight-sans-pro, 'Helvetica Neue', helvetica, arial, sans-serif;
+  --font-mono: 'Dank Mono', 'Operator Mono', inconsolata, 'Fira Mono',
+    ui-monospace, 'SF Mono', monaco, 'Droid Sans Mono', 'Source Code Pro',
+    'Cascadia Code', menlo, consolas, 'DejaVu Sans Mono', monospace;
 
   background-color: var(--bg);
   color: var(--text);
-  font-family: var(--font-sans);
+  font-family: var(--font-serif);
+  font-size: calc(1em + 0.25vw);
 }
 
 @media (prefers-color-scheme: dark) {
   html {
-    --action: var(--action-dark);
-    --bg: var(--gray-9);
-    --brand: var(--green-3);
-    --callout: var(--gray-8);
-    --grad: var(--lime-9);
-    --gradient-bg: var(--gradient-16);
-    --text: var(--gray-2);
+    --action: var(--brand-pink-light);
+    --bg: var(--gray-5);
+    --border: var(--gray-2);
+    --callout: var(--gray-4);
+    --button-text: var(--text);
+    --text: white;
   }
 }
 
@@ -52,19 +65,19 @@ body {
 
 @media (width >= 30em) {
   body {
-    --page-margin: calc(var(--size-6) + 4vw);
+    --page-margin: calc(1.75rem + 4vw);
   }
 }
 
 /* layout */
 
 header,
 footer {
-  background: var(--gradient-bg, var(--grad));
   grid-column: full;
 }
 
 header {
+  background-color: var(--bg);
   border-block-end: thin dotted var(--text);
   display: grid;
   grid-column: full;
@@ -82,30 +95,36 @@ header {
   header {
     --header-padding: 1em 0;
 
+    align-items: start;
     display: grid;
     gap: 0.5em;
     grid-template:
-      '. title title .' auto
-      '. nav button .' minmax(2rem, auto)
+      '. title button .' auto
+      '. nav button .' auto
       / var(--page-margin) minmax(min-content, 1fr) minmax(2rem, auto) var(--page-margin);
   }
 
   [data-button] {
-    align-self: center;
     justify-self: end;
+    margin-block-start: 0.25lh;
   }
 }
 
+:where(h1, h2, h3, h4, h5, h6) {
+  font-family: var(--font-sans);
+}
+
 h1 {
+  font-size: calc(1.75rem + 1vw);
   grid-area: title;
   margin: 0;
 }
 
 nav {
   display: flex;
   flex-wrap: wrap;
+  gap: 1ch;
   grid-area: nav;
-  padding: 1em 0;
 }
 
 section {
@@ -142,11 +161,12 @@ footer p {
 
 .demo-elements {
   grid-area: elements;
+  font-family: var(--font-sans);
 }
 
-.demo-item .note {
+.note {
   background-color: var(--callout);
-  border-left: 0.5em solid var(--note-color);
+  border-inline-start: 0.5em solid var(--note-color);
   grid-area: note;
   margin: 2em 0 0;
   padding: 1em;
@@ -157,11 +177,7 @@ footer p {
 /* prettier-ignore */
 [href*='://']::after {
   content: ' ↗';
-}
-
-nav a:any-link,
-nav span {
-  padding: 0.25em;
+  font-family: system-ui,-apple-system,'Segoe UI',Roboto,Ubuntu,Cantarell,'Noto Sans',sans-serif;
 }
 
 a:any-link {
@@ -189,8 +205,8 @@ a:any-link:focus {
 [data-button]:hover,
 [data-button]:focus,
 [data-button]:active {
-  --button-bg-color: var(--gray-2);
-  --button-text: var(--action-light);
+  --button-bg-color: var(--bg);
+  --button-text: var(--action);
 }
 
 [data-button]:disabled {
@@ -208,6 +224,7 @@ a:any-link:focus {
 /* heading links */
 
 h2 {
+  font-size: calc(1.5rem + 0.5vw);
   position: relative;
 }
 
@@ -240,9 +257,9 @@ h2 [aria-hidden]:active {
 .anchor,
 .target {
   background: var(--element-color);
-  border: thin solid var(--text);
+  border: thin solid var(--border);
   border-radius: var(--radius-1);
-  color: var(--gray-9);
+  color: white;
   font-weight: bold;
   padding: 0.5em;
   white-space: nowrap;
@@ -264,11 +281,25 @@ h2 [aria-hidden]:active {
 
 /* code samples */
 pre {
-  border: thin dotted gray;
+  border: thin dotted var(--border);
   background-color: var(--callout);
   font-family: var(--font-mono);
   grid-area: code;
   overflow-x: auto;
   max-width: 100%;
   padding: 1em;
 }
+
+code {
+  font-size: 90%;
+}
+
+code[class*='language-'],
+pre[class*='language-'] {
+  font-size: 0.9em;
+}
+
+:not(pre) > code[class*='language-'],
+pre[class*='language-'] {
+  background-color: lch(98% 2 269.6deg);
+}