From 9a4fefde113f5fa598a3e12059e5f6416b88c330 Mon Sep 17 00:00:00 2001 From: dvdherron Date: Thu, 20 Oct 2022 15:25:40 +0200 Subject: [PATCH 01/11] wip add initial code samples to demo page --- index.html | 25 +++++++++++++++++++++++++ public/demo.css | 16 +++++++++++++++- 2 files changed, 40 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index 45e8460c..2d3996a2 100644 --- a/index.html +++ b/index.html @@ -84,6 +84,20 @@

Target
Anchor
+ 
+
+/* demo.css */
+
+#my-anchor-positioning {
+  anchor-name: --my-anchor-positioning;
+}
+
+#my-target-positioning {
+  position: absolute;
+  right: anchor(--my-anchor-positioning right, 50px);
+  top: anchor(--my-anchor-positioning bottom);
+}
+

@@ -94,6 +108,17 @@

Target
Anchor
+ 
+#my-anchor-style-tag {
+  anchor-name: --my-anchor-style-tag;
+}
+
+#my-target-style-tag {
+  position: absolute;
+  bottom: anchor(--my-anchor-style-tag start);
+  right: anchor(--my-anchor-style-tag left);
+}
+

diff --git a/public/demo.css b/public/demo.css index 7546c6ca..a72840cb 100644 --- a/public/demo.css +++ b/public/demo.css @@ -11,6 +11,7 @@ html { --bg: var(--gray-1); --brand: var(--green-9); --button-border: var(--text); + --callout: var(--gray-3); --disabled-bg: var(--gray-6); --disabled-text: var(--gray-2); --grad: var(--lime-0); @@ -29,6 +30,7 @@ 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); @@ -97,7 +99,8 @@ footer p { gap: 2rem; grid-template: 'heading heading heading' min-content - '. elements .' min-content/minmax(0, 5rem) 1fr minmax(0, 5rem); + '. elements .' min-content + 'code code code' min-content/minmax(0, 5rem) 1fr minmax(0, 5rem); } /* stylelint-disable no-descending-specificity */ @@ -217,3 +220,14 @@ h2 [aria-hidden]:active { .outer-anchored { --element-color: var(--outer-anchored); } + +/* code samples */ +pre { + border: thin dotted gray; + background-color: var(--callout); + font-family: var(--font-mono); + grid-area: code; + overflow-x: auto; + max-width: 100%; + padding: 1em; +} From 1ac093dfa9b4a5e61a256a38d055b44ed10583ab Mon Sep 17 00:00:00 2001 From: dvdherron Date: Thu, 20 Oct 2022 17:04:06 +0200 Subject: [PATCH 02/11] add additional samples --- index.html | 101 ++++++++++++++++++++++++++++++++++++++++++++++++ public/demo.css | 2 +- 2 files changed, 102 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index 2d3996a2..5d944f0b 100644 --- a/index.html +++ b/index.html @@ -109,6 +109,9 @@

Anchor
+
+/* from the inside of a style tag */
+
 #my-anchor-style-tag {
   anchor-name: --my-anchor-style-tag;
 }
@@ -145,6 +148,23 @@ 

           Anchor
         
       
+      
+
+/* anchor */
+
+  style="anchor-name: --my-anchor-in-line"
+
+      
+/* target */
+
+  style="
+    position: absolute;
+    top: anchor(--my-anchor-in-line bottom);
+    right: anchor(--my-anchor-in-line right);
+  "
+
+

@@ -155,6 +175,54 @@

Target
Anchor
+ 
+
+#my-anchor-fallback {
+  anchor-name: --my-anchor-fallback;
+}
+
+#my-target-fallback {
+  bottom: anchor(--my-anchor-fallback 25%);
+  left: anchor(--my-anchor-fallback right);
+  position: absolute;
+  position-fallback: --fallback1;
+}
+
+@position-fallback --fallback1 {
+  @try {
+    /* 1: Position to the right of the anchor. */
+    left: anchor(--my-anchor-fallback right, 10px);
+    top: anchor(--my-anchor-fallback top);
+}
+
+  @try {
+    /* 2: Position to the left of the anchor. */
+    right: anchor(--my-anchor-fallback left);
+    top: anchor(--my-anchor-fallback top);
+}
+
+  @try {
+    /* 3: Position to the bottom of the anchor. */
+    left: anchor(--my-anchor-fallback left);
+    top: anchor(--my-anchor-fallback bottom);
+}
+
+  @try {
+    /* 4: Position to the top of the anchor. */
+    bottom: anchor(--my-anchor-fallback top);
+    left: anchor(--my-anchor-fallback left);
+}
+
+  @try {
+    /* 5: Position to the left with the narrower width. */
+    height: 40px;
+    left: anchor(--my-anchor-fallback right);
+    top: anchor(--my-anchor-fallback top);
+    width: 35px;
+  }
+}
+
+

@@ -184,6 +252,21 @@

Anchor
Target
+ 
+
+#my-anchor {
+  anchor-name: --my-anchor;
+}
+
+#my-target {
+  --center: anchor(--my-anchor 50%);
+  --full: anchor(--my-anchor 100%);
+
+  position: absolute;
+  right: var(--full);
+  top: var(--center);
+}
+

@@ -194,6 +277,15 @@

Anchor
Target
+ 
+#my-anchor-math {
+  . . .
+}
+
+#my-target-math {
+  . . .
+}
+

@@ -202,6 +294,15 @@

Anchor
Target
+ 
+#my-anchor-size {
+  . . .
+}
+
+#my-target-size {
+  . . .
+}
+