club.syntax.feed.snap

syntax.club

Samples

4 randomly sampled records from the AT Protocol firehose

club.syntax.feed.snap (2 samples) 
{
  "$type": "club.syntax.feed.snap",
  "title": "Conditional border radius with CSS `sign()`",
  "content": {
    "$type": "club.syntax.content.files",
    "files": [
      {
        "id": "3mtlpazatsk2x",
        "name": "conditional-border-radius-vw.css",
        "content": ".conditional-border-radius {\r\n  --radius: 1rem;   /* Border radius value */\r\n  --offset: 1rem;   /* Distance from viewport edge */\r\n\r\n  border-radius: calc(\r\n    sign(100vw - var(--offset) * 2 - 100%) * var(--radius)\r\n  );\r\n}",
        "language": "css",
        "description": "- `100vw - offset × 2 - 100%`: does the element fit inside the viewport with the desired offset?\r\n- If it does, `sign()` returns `1` → `border-radius: 1rem`.\r\n- If it doesn't, `sign()` returns `0` → `border-radius: 0`.\r\n\r\nSo the same CSS can give an element rounded corners when it's inset from the viewport, while automatically removing them when it becomes edge-to-edge."
      },
      {
        "id": "3mtlpazatsl2x",
        "name": "conditional-border-radius-cqi.css",
        "content": ".container {\r\n  container-type: inline-size;\r\n}\r\n\r\n.conditional-border-radius {\r\n  --radius: 1rem;\r\n  --offset: 1rem;\r\n\r\n  border-radius: calc(\r\n    sign(100cqi - var(--offset) * 2 - 100%) * var(--radius)\r\n  );\r\n}",
        "language": "css",
        "description": "Container-aware version using `cqi` instead of `vw`, so the border radius automatically adapts when the element reaches the edge of its containing block."
      }
    ],
    "primaryId": "3mtlpazatsk2x"
  },
  "description": "What if `border-radius` could automatically disappear when an element touches the viewport edge?\r\n\r\nCSS [`sign()`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/sign) makes this surprisingly simple.\r\n\r\nCredits: \r\n- https://bsky.app/profile/kevinpowell.co/post/3mtgv54zxg223\r\n- https://ishadeed.com/article/conditional-border-radius\r\n- https://github.com/sindresorhus/css-extras"
}

did:plc:sdt6u6ybm3ck5vueftpvnxms | at://did:plc:sdt6u6ybm3ck5vueftpvnxms/club.syntax.feed.snap/3mtlpaznbnz27

club.syntax.content.files (nested within club.syntax.feed.snap) (2 samples) 
{
  "$type": "club.syntax.feed.snap",
  "title": "Conditional border radius with CSS `sign()`",
  "content": {
    "$type": "club.syntax.content.files",
    "files": [
      {
        "id": "3mtlpazatsk2x",
        "name": "conditional-border-radius-vw.css",
        "content": ".conditional-border-radius {\r\n  --radius: 1rem;   /* Border radius value */\r\n  --offset: 1rem;   /* Distance from viewport edge */\r\n\r\n  border-radius: calc(\r\n    sign(100vw - var(--offset) * 2 - 100%) * var(--radius)\r\n  );\r\n}",
        "language": "css",
        "description": "- `100vw - offset × 2 - 100%`: does the element fit inside the viewport with the desired offset?\r\n- If it does, `sign()` returns `1` → `border-radius: 1rem`.\r\n- If it doesn't, `sign()` returns `0` → `border-radius: 0`.\r\n\r\nSo the same CSS can give an element rounded corners when it's inset from the viewport, while automatically removing them when it becomes edge-to-edge."
      },
      {
        "id": "3mtlpazatsl2x",
        "name": "conditional-border-radius-cqi.css",
        "content": ".container {\r\n  container-type: inline-size;\r\n}\r\n\r\n.conditional-border-radius {\r\n  --radius: 1rem;\r\n  --offset: 1rem;\r\n\r\n  border-radius: calc(\r\n    sign(100cqi - var(--offset) * 2 - 100%) * var(--radius)\r\n  );\r\n}",
        "language": "css",
        "description": "Container-aware version using `cqi` instead of `vw`, so the border radius automatically adapts when the element reaches the edge of its containing block."
      }
    ],
    "primaryId": "3mtlpazatsk2x"
  },
  "description": "What if `border-radius` could automatically disappear when an element touches the viewport edge?\r\n\r\nCSS [`sign()`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/sign) makes this surprisingly simple.\r\n\r\nCredits: \r\n- https://bsky.app/profile/kevinpowell.co/post/3mtgv54zxg223\r\n- https://ishadeed.com/article/conditional-border-radius\r\n- https://github.com/sindresorhus/css-extras"
}

did:plc:sdt6u6ybm3ck5vueftpvnxms | at://did:plc:sdt6u6ybm3ck5vueftpvnxms/club.syntax.feed.snap/3mtlpaznbnz27

Lexicon Garden

@