Trending

#theming

Latest posts tagged with #theming on Bluesky

Latest Top
Trending
#Canada's Politics #Liverpool FC #Oscars #Ukraine Conflict #U.S. Foreign Policy #F1 #Chinese Grand Prix #SNL #Venezuela Baseball #AEW Collision #Canada's Politics #Liverpool FC #Oscars #Ukraine Conflict #U.S. Foreign Policy #F1 #Chinese Grand Prix #SNL #Venezuela Baseball #AEW Collision

Posts tagged #theming

Themagical.nl
Themagical.nl
@themagical.nl
3 weeks ago

Ever wonder how the world’s best theme park stays at the top? 🎢✨

@Blooloop takes a deep dive into the artistry of Europa-Park's show production and theming team. Read more: blooloop.com/europa-park-...

#EuropaPark #ThemeParkDesign #Theming #AmusementParks #RollerCoasters

0 0 0 0
Frontend Dogma
Frontend Dogma
@frontenddogma.com
3 weeks ago
Preview
How to build a WordPress block theme | naeemnur Block themes work differently from classic WordPress themes because they use blocks for everything, not just the content area, which means you can edit

How to Build a WordPress Block Theme, by (not on Mastodon or Bluesky):

naeemnur.com/how-to-build-a-wordpress...

#howtos #wordpress #theming

0 0 0 0
The Drop Times
The Drop Times
@thedroptimes.bsky.social
1 month ago
visual promo of Meridian, the new Drupal theme by Dripyard. Built with Single Directory Components and designed for compatibility with Layout Builder, Paragraphs, and traditional templates.

visual promo of Meridian, the new Drupal theme by Dripyard. Built with Single Directory Components and designed for compatibility with Layout Builder, Paragraphs, and traditional templates.

@dripyard.com has released Meridian, a new Drupal theme built with Single Directory Components.

Designed for flexibility, it works with Layout Builder, Paragraphs, and classic theming.

Read more:
https://bit.ly/4cijtHY

#Drupal #Theming #SDC

0 0 0 0
QDude24
QDude24
@qdude24.bsky.social
1 month ago
Post image

In remembrance; Spookslot

#Efteling #Spookslot #Spookhuis #Schedel #Skull #Nederland #Pretpark #Themapark #fotografie #magie #pop #eng #griezel #griezelig #Hauntedhouse #bone #Spooky #scary #spirit #animatronic #amusementpark #themepark #theNetherlands #photography #Theming #haunted #hauntedcastle

5 1 0 0
Frontend Dogma
Frontend Dogma
@frontenddogma.com
1 month ago
Preview
Smashing Animations Part 8: Theming Animations Using CSS Relative Colour — Smashing Magazine CSS relative colour values are now widely supported. In this article, pioneering author and web designer [Andy Clarke](https://stuffandnonsense.co.uk/) shares practical techniques for using them to theme and animate SVG graphics.

Smashing Animations: Theming Animations Using CSS Relative Colour, by @malarkey@mastodon.social (@smashingmag@mastodon.social):

www.smashingmagazine.com/2026/01/smashing-animati...

#animations #colors #theming #css

0 0 0 0
The Drop Times
The Drop Times
@thedroptimes.bsky.social
1 month ago
Dripyard and Lullabot to Deliver Future‑Proof Theming Training at DrupalCon Chicago 2026

Dripyard and Lullabot to Deliver Future‑Proof Theming Training at DrupalCon Chicago 2026

Frontend theming for the next Drupal era?

miketherchel @mike.herchel.com of @dripyard.com and Andy Blum of Lullabot @lullabot.bsky.social bring real-world CSS and component strategy to DrupalCon Chicago 2026.

Check the TDT preview: https://bit.ly/4jPubYk

#Drupal #DrupalCon #Theming #Frontend

2 1 0 0
Jonas Karlsen Åstrøm, PhD 🇳🇴🏳️‍🌈🇺🇦🏳️‍⚧️
Jonas Karlsen Åstrøm, PhD 🇳🇴🏳️‍🌈🇺🇦🏳️‍⚧️
@pigalopp.no
1 month ago
Preview
Theming and Sustainability in Experiences | 14 | Services, Experiences The overall aim of this chapter is to explore how themed experiences can facilitate sustainability in themed tourism experiences. Using insights from in-depth

💚 My chapter "Theming and Sustainability" is out! Proud to have contributed to "Services, Experiences, and Sustainability" released today! It's open access, and all chapters are available to the public. 🎢 #greensky #sustainability #theming #experience LINK: www.taylorfrancis.com/chapters/oa-...

2 0 0 0
The Drop Times
The Drop Times
@thedroptimes.bsky.social
2 months ago
Preview
Advent Calendar Day 18: Drupal Canvas Templates Are Not Just Themes James Shield's Advent Day 18 post covers Elliott Mower’s talk at DrupalCon Nara, where he explains why modern Drupal templates like Mercury go far beyond traditional themes. With Canvas and no-code tools, even non-developers can build, style, and ext...

Day 18 of the #DrupalAdvent spotlights Drupal Canvas and Mercury templates—it's no longer just about themes. @lostcarpark.bsky.social

Elliott Mower shows how visual tools like Figma, Tailwind, and Storybook empower non-dev creators.

Read: https://bit.ly/4qkD51R

#Drupal #Canvas #NoCode #Theming

1 0 0 0
Soso
Soso
@sgued.pouet.chapril.org.ap.brid.gy
3 months ago
Screenshot of a text bubble on the fasterthanli.me website Those themes do not appeal to my personal aesthetic, but | decided that consistency was the most important imperative here.

Screenshot of a text bubble on the fasterthanli.me website Those themes do not appeal to my personal aesthetic, but | decided that consistency was the most important imperative here.

Thank you @fasterthanlime that's how it should be done.

context: fasterthanli.me/articles/my-gift-to-the-...

#Rustlang #Rust #Theming #TreeSitter

4 2 1 0
Amusement Logic, S.L.
Amusement Logic, S.L.
@amusementlogic1.bsky.social
3 months ago
Video

Opening soon! Six Flags Qiddiya!
A perfect plan for the end-of-year holidays. In addition to enjoying attractions that are unique in the world, you can admire our work!
👉 amusementlogic.com/company-news...

📽️ @SixFlagsQC
🎼 Rockot, pixabay.com/es/users/roc...

🎢 #attractions #theming #amusementlogic

0 0 0 0
Jonathan Stephens
Jonathan Stephens
@jonathanstephens.us.web.brid.gy
3 months ago
Preview
Native HTML light and dark color scheme switching — Vadim Makeev A fantastic article. I had originally developed Poet & Scribe with `light-dark()` but couldn't get it to work properly. It was because I hadn't fully implemented it yet either. This is the clearest I've read in terms of how to implement (and the JavaScript looks much simpler, too!). Will be using/referencing this in my refactor of this site. > The light dark value means that we’re choosing to support both light and dark schemes in our code. The property will be inherited down the document tree, and the browser will enable some default styling for built-in primitives when needed. Thank you, browser!
0 0 0 0
Jonathan Stephens
Jonathan Stephens
@jonathanstephens.us.web.brid.gy
3 months ago
Post image
0 0 0 0
Jonathan Stephens
Jonathan Stephens
@jonathanstephens.us.web.brid.gy
4 months ago
Post image
0 0 0 0
Amusement Logic, S.L.
Amusement Logic, S.L.
@amusementlogic1.bsky.social
4 months ago
Video

Oceanogràfic in Valencia, Spain
6,000 m² of themed areas with artificial rocks... Don't miss it, it's well worth a visit!
👉 amusementlogic.com/projects/ani...

📽️ @Oceanografic_vl
🎼 Zen_Man, pixabay.com/es/users/zen... and Liecio, pixabay.com/es/users/lie...

🐠 #theming #design #amusementlogic

0 0 0 0
The Drop Times
The Drop Times
@thedroptimes.bsky.social
4 months ago
Dripyard Prepares Premium Themes for Drupal Canvas Ahead of Stable Release

Dripyard Prepares Premium Themes for Drupal Canvas Ahead of Stable Release

Dripyard @dripyard.com releases v1.0.5 of its premium themes with full prep for Drupal Canvas compatibility.

20+ issues submitted upstream to help stabilize the next-gen page builder.

Full TDT summary: https://bit.ly/47L5qqA

#Drupal #DrupalCanvas #Theming #PageBuilder

2 0 0 0
Jonathan Stephens
Jonathan Stephens
@jonathanstephens.us.web.brid.gy
4 months ago
Preview
How we’re approaching theming with modern CSS :root { /* Fluid type scale */ --size-step--2: clamp(0.6944rem, 0.6376rem + 0.284vi, 0.84rem); --size-step--1: clamp(0.8333rem, 0.7488rem + 0.4228vi, 1.05rem); --size-step-0: clamp(1rem, 0.878rem + 0.6098vi, 1.3125rem); --size-step-1: clamp(1.2rem, 1.028rem + 0.8598vi, 1.6406rem); --size-step-2: clamp(1.44rem, 1.2016rem + 1.1918vi, 2.0508rem); --size-step-3: clamp(1.728rem, 1.402rem + 1.6302vi, 2.5635rem); --size-step-4: clamp(2.0736rem, 1.6323rem + 2.2063vi, 3.2043rem); --size-step-5: clamp(2.4883rem, 1.8963rem + 2.9602vi, 4.0054rem); --size-step-6: clamp(2.986rem, 2.1974rem + 3.943vi, 5.0068rem); --size-step-7: clamp(3.5832rem, 2.5392rem + 5.2201vi, 6.2585rem); /* Fluid space scale */ --space-3xs: clamp(0.25rem, 0.2256rem + 0.122vi, 0.3125rem); --space-2xs: clamp(0.5rem, 0.4268rem + 0.3659vi, 0.6875rem); --space-xs: clamp(0.75rem, 0.6524rem + 0.4878vi, 1rem); --space-s: clamp(1rem, 0.878rem + 0.6098vi, 1.3125rem); --space-m: clamp(1.5rem, 1.3049rem + 0.9756vi, 2rem); --space-l: clamp(2rem, 1.7561rem + 1.2195vi, 2.625rem); --space-xl: clamp(3rem, 2.6341rem + 1.8293vi, 3.9375rem); --space-2xl: clamp(4rem, 3.5122rem + 2.439vi, 5.25rem); --space-3xl: clamp(6rem, 5.2683rem + 3.6585vi, 7.875rem); /* Colours */ --color-light: #ffffff; --color-light-shade: #f3f5f7; --color-dark: #000000; --color-mid: #ebebeb; --color-mid-shade: #dedede; --color-midnight: #4a4e69; --color-midnight-shade: #22223b; --color-eggshell: #f2e9e4; --color-blue: #3b71fe; --color-blue-glare: #eef6fd; --color-slate: #4f5563; } --leading: 1.5; --leading-short: 1.3; --leading-fine: 1.1; --leading-flat: 1; --leading-loose: 1.7; --kerning: normal; --kerning-tight: -0.04ch; --kerning-loose: 0.1ch; --text-size-base: var(--size-step-0); --text-size-lede: var(--size-step-1); --text-size-meta: var(--size-step--1); --text-size-heading-1: var(--size-step-5); --text-size-heading-2: var(--size-step-4); --text-size-heading-3: var(--size-step-3); --text-size-heading-4: var(--size-step-2); --text-size-prose: var(--text-size-base); --space-gutter: var(--space-m); --space-gutter-s: var(--space-s); --space-gutter-l: var(--space-l); --space-regions: var(--space-xl); --size-wrapper-max-width: 1135px; --color-global-bg: var(--color-light); --color-global-text: var(--color-dark); --color-surface-bg: var(--color-mid); --color-surface-bg-interact: var(--color-mid-shade); --color-surface-text: var(--color-dark); --color-surface-text-interact: var(--color-dark); --font-base: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; --font-display: var(--font-base); --font-lede: var(--font-base); --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-bold: 700; --font-weight-black: 900; --focus-ring: 2px solid currentColor; --focus-ring-offset: 2px; /* Custom property configuration */ :root { --color-global-bg: var(--color-light); --color-global-text: var(--color-midnight-shade); --color-surface-bg: var(--color-blue); --color-surface-bg-interact: var(--color-dark); --color-surface-text: var(--color-light); --color-surface-text-interact: var(--color-light); --button-radius: 1.5em; --font-lede: Georgia, serif; --font-display: 'Khula', sans-serif; --text-size-heading-1: var(--size-step-6); } /* Specific theme styles and settings */ .intro { --space-regions: var(--space-2xl) var(--space-3xl); --sidebar-target-width: 11ch; background: linear-gradient( 85deg, var(--color-blue-glare) 35%, var(--color-light-shade) 100% ); } .intro .sidebar { /* Going straight for gap so it doesn't affect the wrapper */ gap: var(--space-s) var(--space-l); } .lede { font-style: italic; } .quote { position: relative; border-radius: 1em; overflow: hidden; } .quote img { width: 100%; aspect-ratio: 1/1; object-fit: cover; } .quote q { quotes: none; background: var(--color-midnight-shade); color: var(--color-light); padding: 0.5em 1em; background: rgb(from var(--color-midnight-shade) r g b / 70%); backdrop-filter: blur(2px); position: absolute; bottom: 0; left: 0; width: 100%; } .grid { --space-flow: var(--space-l); }
0 0 0 0
Jonathan Stephens
Jonathan Stephens
@jonathanstephens.us.web.brid.gy
4 months ago
Preview
How we’re approaching theming with modern CSS :root { /* Fluid type scale */ --size-step--2: clamp(0.6944rem, 0.6376rem + 0.284vi, 0.84rem); --size-step--1: clamp(0.8333rem, 0.7488rem + 0.4228vi, 1.05rem); --size-step-0: clamp(1rem, 0.878rem + 0.6098vi, 1.3125rem); --size-step-1: clamp(1.2rem, 1.028rem + 0.8598vi, 1.6406rem); --size-step-2: clamp(1.44rem, 1.2016rem + 1.1918vi, 2.0508rem); --size-step-3: clamp(1.728rem, 1.402rem + 1.6302vi, 2.5635rem); --size-step-4: clamp(2.0736rem, 1.6323rem + 2.2063vi, 3.2043rem); --size-step-5: clamp(2.4883rem, 1.8963rem + 2.9602vi, 4.0054rem); --size-step-6: clamp(2.986rem, 2.1974rem + 3.943vi, 5.0068rem); --size-step-7: clamp(3.5832rem, 2.5392rem + 5.2201vi, 6.2585rem); /* Fluid space scale */ --space-3xs: clamp(0.25rem, 0.2256rem + 0.122vi, 0.3125rem); --space-2xs: clamp(0.5rem, 0.4268rem + 0.3659vi, 0.6875rem); --space-xs: clamp(0.75rem, 0.6524rem + 0.4878vi, 1rem); --space-s: clamp(1rem, 0.878rem + 0.6098vi, 1.3125rem); --space-m: clamp(1.5rem, 1.3049rem + 0.9756vi, 2rem); --space-l: clamp(2rem, 1.7561rem + 1.2195vi, 2.625rem); --space-xl: clamp(3rem, 2.6341rem + 1.8293vi, 3.9375rem); --space-2xl: clamp(4rem, 3.5122rem + 2.439vi, 5.25rem); --space-3xl: clamp(6rem, 5.2683rem + 3.6585vi, 7.875rem); /* Colours */ --color-light: #ffffff; --color-light-shade: #f3f5f7; --color-dark: #000000; --color-mid: #ebebeb; --color-mid-shade: #dedede; --color-midnight: #4a4e69; --color-midnight-shade: #22223b; --color-eggshell: #f2e9e4; --color-blue: #3b71fe; --color-blue-glare: #eef6fd; --color-slate: #4f5563; } --leading: 1.5; --leading-short: 1.3; --leading-fine: 1.1; --leading-flat: 1; --leading-loose: 1.7; --kerning: normal; --kerning-tight: -0.04ch; --kerning-loose: 0.1ch; --text-size-base: var(--size-step-0); --text-size-lede: var(--size-step-1); --text-size-meta: var(--size-step--1); --text-size-heading-1: var(--size-step-5); --text-size-heading-2: var(--size-step-4); --text-size-heading-3: var(--size-step-3); --text-size-heading-4: var(--size-step-2); --text-size-prose: var(--text-size-base); --space-gutter: var(--space-m); --space-gutter-s: var(--space-s); --space-gutter-l: var(--space-l); --space-regions: var(--space-xl); --size-wrapper-max-width: 1135px; --color-global-bg: var(--color-light); --color-global-text: var(--color-dark); --color-surface-bg: var(--color-mid); --color-surface-bg-interact: var(--color-mid-shade); --color-surface-text: var(--color-dark); --color-surface-text-interact: var(--color-dark); --font-base: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; --font-display: var(--font-base); --font-lede: var(--font-base); --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-bold: 700; --font-weight-black: 900; --focus-ring: 2px solid currentColor; --focus-ring-offset: 2px; /* Custom property configuration */ :root { --color-global-bg: var(--color-light); --color-global-text: var(--color-midnight-shade); --color-surface-bg: var(--color-blue); --color-surface-bg-interact: var(--color-dark); --color-surface-text: var(--color-light); --color-surface-text-interact: var(--color-light); --button-radius: 1.5em; --font-lede: Georgia, serif; --font-display: 'Khula', sans-serif; --text-size-heading-1: var(--size-step-6); } /* Specific theme styles and settings */ .intro { --space-regions: var(--space-2xl) var(--space-3xl); --sidebar-target-width: 11ch; background: linear-gradient( 85deg, var(--color-blue-glare) 35%, var(--color-light-shade) 100% ); } .intro .sidebar { /* Going straight for gap so it doesn't affect the wrapper */ gap: var(--space-s) var(--space-l); } .lede { font-style: italic; } .quote { position: relative; border-radius: 1em; overflow: hidden; } .quote img { width: 100%; aspect-ratio: 1/1; object-fit: cover; } .quote q { quotes: none; background: var(--color-midnight-shade); color: var(--color-light); padding: 0.5em 1em; background: rgb(from var(--color-midnight-shade) r g b / 70%); backdrop-filter: blur(2px); position: absolute; bottom: 0; left: 0; width: 100%; } .grid { --space-flow: var(--space-l); }
0 0 0 0
Jonathan Stephens
Jonathan Stephens
@jonathanstephens.us.web.brid.gy
4 months ago
Preview
How we’re approaching theming with modern CSS :root { /* Fluid type scale */ --size-step--2: clamp(0.6944rem, 0.6376rem + 0.284vi, 0.84rem); --size-step--1: clamp(0.8333rem, 0.7488rem + 0.4228vi, 1.05rem); --size-step-0: clamp(1rem, 0.878rem + 0.6098vi, 1.3125rem); --size-step-1: clamp(1.2rem, 1.028rem + 0.8598vi, 1.6406rem); --size-step-2: clamp(1.44rem, 1.2016rem + 1.1918vi, 2.0508rem); --size-step-3: clamp(1.728rem, 1.402rem + 1.6302vi, 2.5635rem); --size-step-4: clamp(2.0736rem, 1.6323rem + 2.2063vi, 3.2043rem); --size-step-5: clamp(2.4883rem, 1.8963rem + 2.9602vi, 4.0054rem); --size-step-6: clamp(2.986rem, 2.1974rem + 3.943vi, 5.0068rem); --size-step-7: clamp(3.5832rem, 2.5392rem + 5.2201vi, 6.2585rem); /* Fluid space scale */ --space-3xs: clamp(0.25rem, 0.2256rem + 0.122vi, 0.3125rem); --space-2xs: clamp(0.5rem, 0.4268rem + 0.3659vi, 0.6875rem); --space-xs: clamp(0.75rem, 0.6524rem + 0.4878vi, 1rem); --space-s: clamp(1rem, 0.878rem + 0.6098vi, 1.3125rem); --space-m: clamp(1.5rem, 1.3049rem + 0.9756vi, 2rem); --space-l: clamp(2rem, 1.7561rem + 1.2195vi, 2.625rem); --space-xl: clamp(3rem, 2.6341rem + 1.8293vi, 3.9375rem); --space-2xl: clamp(4rem, 3.5122rem + 2.439vi, 5.25rem); --space-3xl: clamp(6rem, 5.2683rem + 3.6585vi, 7.875rem); /* Colours */ --color-light: #ffffff; --color-light-shade: #f3f5f7; --color-dark: #000000; --color-mid: #ebebeb; --color-mid-shade: #dedede; --color-midnight: #4a4e69; --color-midnight-shade: #22223b; --color-eggshell: #f2e9e4; --color-blue: #3b71fe; --color-blue-glare: #eef6fd; --color-slate: #4f5563; } --leading: 1.5; --leading-short: 1.3; --leading-fine: 1.1; --leading-flat: 1; --leading-loose: 1.7; --kerning: normal; --kerning-tight: -0.04ch; --kerning-loose: 0.1ch; --text-size-base: var(--size-step-0); --text-size-lede: var(--size-step-1); --text-size-meta: var(--size-step--1); --text-size-heading-1: var(--size-step-5); --text-size-heading-2: var(--size-step-4); --text-size-heading-3: var(--size-step-3); --text-size-heading-4: var(--size-step-2); --text-size-prose: var(--text-size-base); --space-gutter: var(--space-m); --space-gutter-s: var(--space-s); --space-gutter-l: var(--space-l); --space-regions: var(--space-xl); --size-wrapper-max-width: 1135px; --color-global-bg: var(--color-light); --color-global-text: var(--color-dark); --color-surface-bg: var(--color-mid); --color-surface-bg-interact: var(--color-mid-shade); --color-surface-text: var(--color-dark); --color-surface-text-interact: var(--color-dark); --font-base: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; --font-display: var(--font-base); --font-lede: var(--font-base); --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-bold: 700; --font-weight-black: 900; --focus-ring: 2px solid currentColor; --focus-ring-offset: 2px; /* Custom property configuration */ :root { --color-global-bg: var(--color-light); --color-global-text: var(--color-midnight-shade); --color-surface-bg: var(--color-blue); --color-surface-bg-interact: var(--color-dark); --color-surface-text: var(--color-light); --color-surface-text-interact: var(--color-light); --button-radius: 1.5em; --font-lede: Georgia, serif; --font-display: 'Khula', sans-serif; --text-size-heading-1: var(--size-step-6); } /* Specific theme styles and settings */ .intro { --space-regions: var(--space-2xl) var(--space-3xl); --sidebar-target-width: 11ch; background: linear-gradient( 85deg, var(--color-blue-glare) 35%, var(--color-light-shade) 100% ); } .intro .sidebar { /* Going straight for gap so it doesn't affect the wrapper */ gap: var(--space-s) var(--space-l); } .lede { font-style: italic; } .quote { position: relative; border-radius: 1em; overflow: hidden; } .quote img { width: 100%; aspect-ratio: 1/1; object-fit: cover; } .quote q { quotes: none; background: var(--color-midnight-shade); color: var(--color-light); padding: 0.5em 1em; background: rgb(from var(--color-midnight-shade) r g b / 70%); backdrop-filter: blur(2px); position: absolute; bottom: 0; left: 0; width: 100%; } .grid { --space-flow: var(--space-l); }
0 0 0 0
Jonathan Stephens
Jonathan Stephens
@jonathanstephens.us.web.brid.gy
4 months ago
Preview
How we’re approaching theming with modern CSS :root { /* Fluid type scale */ --size-step--2: clamp(0.6944rem, 0.6376rem + 0.284vi, 0.84rem); --size-step--1: clamp(0.8333rem, 0.7488rem + 0.4228vi, 1.05rem); --size-step-0: clamp(1rem, 0.878rem + 0.6098vi, 1.3125rem); --size-step-1: clamp(1.2rem, 1.028rem + 0.8598vi, 1.6406rem); --size-step-2: clamp(1.44rem, 1.2016rem + 1.1918vi, 2.0508rem); --size-step-3: clamp(1.728rem, 1.402rem + 1.6302vi, 2.5635rem); --size-step-4: clamp(2.0736rem, 1.6323rem + 2.2063vi, 3.2043rem); --size-step-5: clamp(2.4883rem, 1.8963rem + 2.9602vi, 4.0054rem); --size-step-6: clamp(2.986rem, 2.1974rem + 3.943vi, 5.0068rem); --size-step-7: clamp(3.5832rem, 2.5392rem + 5.2201vi, 6.2585rem); /* Fluid space scale */ --space-3xs: clamp(0.25rem, 0.2256rem + 0.122vi, 0.3125rem); --space-2xs: clamp(0.5rem, 0.4268rem + 0.3659vi, 0.6875rem); --space-xs: clamp(0.75rem, 0.6524rem + 0.4878vi, 1rem); --space-s: clamp(1rem, 0.878rem + 0.6098vi, 1.3125rem); --space-m: clamp(1.5rem, 1.3049rem + 0.9756vi, 2rem); --space-l: clamp(2rem, 1.7561rem + 1.2195vi, 2.625rem); --space-xl: clamp(3rem, 2.6341rem + 1.8293vi, 3.9375rem); --space-2xl: clamp(4rem, 3.5122rem + 2.439vi, 5.25rem); --space-3xl: clamp(6rem, 5.2683rem + 3.6585vi, 7.875rem); /* Colours */ --color-light: #ffffff; --color-light-shade: #f3f5f7; --color-dark: #000000; --color-mid: #ebebeb; --color-mid-shade: #dedede; --color-midnight: #4a4e69; --color-midnight-shade: #22223b; --color-eggshell: #f2e9e4; --color-blue: #3b71fe; --color-blue-glare: #eef6fd; --color-slate: #4f5563; } --leading: 1.5; --leading-short: 1.3; --leading-fine: 1.1; --leading-flat: 1; --leading-loose: 1.7; --kerning: normal; --kerning-tight: -0.04ch; --kerning-loose: 0.1ch; --text-size-base: var(--size-step-0); --text-size-lede: var(--size-step-1); --text-size-meta: var(--size-step--1); --text-size-heading-1: var(--size-step-5); --text-size-heading-2: var(--size-step-4); --text-size-heading-3: var(--size-step-3); --text-size-heading-4: var(--size-step-2); --text-size-prose: var(--text-size-base); --space-gutter: var(--space-m); --space-gutter-s: var(--space-s); --space-gutter-l: var(--space-l); --space-regions: var(--space-xl); --size-wrapper-max-width: 1135px; --color-global-bg: var(--color-light); --color-global-text: var(--color-dark); --color-surface-bg: var(--color-mid); --color-surface-bg-interact: var(--color-mid-shade); --color-surface-text: var(--color-dark); --color-surface-text-interact: var(--color-dark); --font-base: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; --font-display: var(--font-base); --font-lede: var(--font-base); --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-bold: 700; --font-weight-black: 900; --focus-ring: 2px solid currentColor; --focus-ring-offset: 2px; /* Custom property configuration */ :root { --color-global-bg: var(--color-light); --color-global-text: var(--color-midnight-shade); --color-surface-bg: var(--color-blue); --color-surface-bg-interact: var(--color-dark); --color-surface-text: var(--color-light); --color-surface-text-interact: var(--color-light); --button-radius: 1.5em; --font-lede: Georgia, serif; --font-display: 'Khula', sans-serif; --text-size-heading-1: var(--size-step-6); } /* Specific theme styles and settings */ .intro { --space-regions: var(--space-2xl) var(--space-3xl); --sidebar-target-width: 11ch; background: linear-gradient( 85deg, var(--color-blue-glare) 35%, var(--color-light-shade) 100% ); } .intro .sidebar { /* Going straight for gap so it doesn't affect the wrapper */ gap: var(--space-s) var(--space-l); } .lede { font-style: italic; } .quote { position: relative; border-radius: 1em; overflow: hidden; } .quote img { width: 100%; aspect-ratio: 1/1; object-fit: cover; } .quote q { quotes: none; background: var(--color-midnight-shade); color: var(--color-light); padding: 0.5em 1em; background: rgb(from var(--color-midnight-shade) r g b / 70%); backdrop-filter: blur(2px); position: absolute; bottom: 0; left: 0; width: 100%; } .grid { --space-flow: var(--space-l); }
0 0 0 0
Jonathan Stephens
Jonathan Stephens
@jonathanstephens.us.web.brid.gy
4 months ago
Preview
How we’re approaching theming with modern CSS :root { /* Fluid type scale */ --size-step--2: clamp(0.6944rem, 0.6376rem + 0.284vi, 0.84rem); --size-step--1: clamp(0.8333rem, 0.7488rem + 0.4228vi, 1.05rem); --size-step-0: clamp(1rem, 0.878rem + 0.6098vi, 1.3125rem); --size-step-1: clamp(1.2rem, 1.028rem + 0.8598vi, 1.6406rem); --size-step-2: clamp(1.44rem, 1.2016rem + 1.1918vi, 2.0508rem); --size-step-3: clamp(1.728rem, 1.402rem + 1.6302vi, 2.5635rem); --size-step-4: clamp(2.0736rem, 1.6323rem + 2.2063vi, 3.2043rem); --size-step-5: clamp(2.4883rem, 1.8963rem + 2.9602vi, 4.0054rem); --size-step-6: clamp(2.986rem, 2.1974rem + 3.943vi, 5.0068rem); --size-step-7: clamp(3.5832rem, 2.5392rem + 5.2201vi, 6.2585rem); /* Fluid space scale */ --space-3xs: clamp(0.25rem, 0.2256rem + 0.122vi, 0.3125rem); --space-2xs: clamp(0.5rem, 0.4268rem + 0.3659vi, 0.6875rem); --space-xs: clamp(0.75rem, 0.6524rem + 0.4878vi, 1rem); --space-s: clamp(1rem, 0.878rem + 0.6098vi, 1.3125rem); --space-m: clamp(1.5rem, 1.3049rem + 0.9756vi, 2rem); --space-l: clamp(2rem, 1.7561rem + 1.2195vi, 2.625rem); --space-xl: clamp(3rem, 2.6341rem + 1.8293vi, 3.9375rem); --space-2xl: clamp(4rem, 3.5122rem + 2.439vi, 5.25rem); --space-3xl: clamp(6rem, 5.2683rem + 3.6585vi, 7.875rem); /* Colours */ --color-light: #ffffff; --color-light-shade: #f3f5f7; --color-dark: #000000; --color-mid: #ebebeb; --color-mid-shade: #dedede; --color-midnight: #4a4e69; --color-midnight-shade: #22223b; --color-eggshell: #f2e9e4; --color-blue: #3b71fe; --color-blue-glare: #eef6fd; --color-slate: #4f5563; } --leading: 1.5; --leading-short: 1.3; --leading-fine: 1.1; --leading-flat: 1; --leading-loose: 1.7; --kerning: normal; --kerning-tight: -0.04ch; --kerning-loose: 0.1ch; --text-size-base: var(--size-step-0); --text-size-lede: var(--size-step-1); --text-size-meta: var(--size-step--1); --text-size-heading-1: var(--size-step-5); --text-size-heading-2: var(--size-step-4); --text-size-heading-3: var(--size-step-3); --text-size-heading-4: var(--size-step-2); --text-size-prose: var(--text-size-base); --space-gutter: var(--space-m); --space-gutter-s: var(--space-s); --space-gutter-l: var(--space-l); --space-regions: var(--space-xl); --size-wrapper-max-width: 1135px; --color-global-bg: var(--color-light); --color-global-text: var(--color-dark); --color-surface-bg: var(--color-mid); --color-surface-bg-interact: var(--color-mid-shade); --color-surface-text: var(--color-dark); --color-surface-text-interact: var(--color-dark); --font-base: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; --font-display: var(--font-base); --font-lede: var(--font-base); --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-bold: 700; --font-weight-black: 900; --focus-ring: 2px solid currentColor; --focus-ring-offset: 2px; /* Custom property configuration */ :root { --color-global-bg: var(--color-light); --color-global-text: var(--color-midnight-shade); --color-surface-bg: var(--color-blue); --color-surface-bg-interact: var(--color-dark); --color-surface-text: var(--color-light); --color-surface-text-interact: var(--color-light); --button-radius: 1.5em; --font-lede: Georgia, serif; --font-display: 'Khula', sans-serif; --text-size-heading-1: var(--size-step-6); } /* Specific theme styles and settings */ .intro { --space-regions: var(--space-2xl) var(--space-3xl); --sidebar-target-width: 11ch; background: linear-gradient( 85deg, var(--color-blue-glare) 35%, var(--color-light-shade) 100% ); } .intro .sidebar { /* Going straight for gap so it doesn't affect the wrapper */ gap: var(--space-s) var(--space-l); } .lede { font-style: italic; } .quote { position: relative; border-radius: 1em; overflow: hidden; } .quote img { width: 100%; aspect-ratio: 1/1; object-fit: cover; } .quote q { quotes: none; background: var(--color-midnight-shade); color: var(--color-light); padding: 0.5em 1em; background: rgb(from var(--color-midnight-shade) r g b / 70%); backdrop-filter: blur(2px); position: absolute; bottom: 0; left: 0; width: 100%; } .grid { --space-flow: var(--space-l); }
0 0 0 0
Jonathan Stephens
Jonathan Stephens
@jonathanstephens.us.web.brid.gy
4 months ago
Preview
How we’re approaching theming with modern CSS :root { /* Fluid type scale */ --size-step--2: clamp(0.6944rem, 0.6376rem + 0.284vi, 0.84rem); --size-step--1: clamp(0.8333rem, 0.7488rem + 0.4228vi, 1.05rem); --size-step-0: clamp(1rem, 0.878rem + 0.6098vi, 1.3125rem); --size-step-1: clamp(1.2rem, 1.028rem + 0.8598vi, 1.6406rem); --size-step-2: clamp(1.44rem, 1.2016rem + 1.1918vi, 2.0508rem); --size-step-3: clamp(1.728rem, 1.402rem + 1.6302vi, 2.5635rem); --size-step-4: clamp(2.0736rem, 1.6323rem + 2.2063vi, 3.2043rem); --size-step-5: clamp(2.4883rem, 1.8963rem + 2.9602vi, 4.0054rem); --size-step-6: clamp(2.986rem, 2.1974rem + 3.943vi, 5.0068rem); --size-step-7: clamp(3.5832rem, 2.5392rem + 5.2201vi, 6.2585rem); /* Fluid space scale */ --space-3xs: clamp(0.25rem, 0.2256rem + 0.122vi, 0.3125rem); --space-2xs: clamp(0.5rem, 0.4268rem + 0.3659vi, 0.6875rem); --space-xs: clamp(0.75rem, 0.6524rem + 0.4878vi, 1rem); --space-s: clamp(1rem, 0.878rem + 0.6098vi, 1.3125rem); --space-m: clamp(1.5rem, 1.3049rem + 0.9756vi, 2rem); --space-l: clamp(2rem, 1.7561rem + 1.2195vi, 2.625rem); --space-xl: clamp(3rem, 2.6341rem + 1.8293vi, 3.9375rem); --space-2xl: clamp(4rem, 3.5122rem + 2.439vi, 5.25rem); --space-3xl: clamp(6rem, 5.2683rem + 3.6585vi, 7.875rem); /* Colours */ --color-light: #ffffff; --color-light-shade: #f3f5f7; --color-dark: #000000; --color-mid: #ebebeb; --color-mid-shade: #dedede; --color-midnight: #4a4e69; --color-midnight-shade: #22223b; --color-eggshell: #f2e9e4; --color-blue: #3b71fe; --color-blue-glare: #eef6fd; --color-slate: #4f5563; } --leading: 1.5; --leading-short: 1.3; --leading-fine: 1.1; --leading-flat: 1; --leading-loose: 1.7; --kerning: normal; --kerning-tight: -0.04ch; --kerning-loose: 0.1ch; --text-size-base: var(--size-step-0); --text-size-lede: var(--size-step-1); --text-size-meta: var(--size-step--1); --text-size-heading-1: var(--size-step-5); --text-size-heading-2: var(--size-step-4); --text-size-heading-3: var(--size-step-3); --text-size-heading-4: var(--size-step-2); --text-size-prose: var(--text-size-base); --space-gutter: var(--space-m); --space-gutter-s: var(--space-s); --space-gutter-l: var(--space-l); --space-regions: var(--space-xl); --size-wrapper-max-width: 1135px; --color-global-bg: var(--color-light); --color-global-text: var(--color-dark); --color-surface-bg: var(--color-mid); --color-surface-bg-interact: var(--color-mid-shade); --color-surface-text: var(--color-dark); --color-surface-text-interact: var(--color-dark); --font-base: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; --font-display: var(--font-base); --font-lede: var(--font-base); --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-bold: 700; --font-weight-black: 900; --focus-ring: 2px solid currentColor; --focus-ring-offset: 2px; /* Custom property configuration */ :root { --color-global-bg: var(--color-light); --color-global-text: var(--color-midnight-shade); --color-surface-bg: var(--color-blue); --color-surface-bg-interact: var(--color-dark); --color-surface-text: var(--color-light); --color-surface-text-interact: var(--color-light); --button-radius: 1.5em; --font-lede: Georgia, serif; --font-display: 'Khula', sans-serif; --text-size-heading-1: var(--size-step-6); } /* Specific theme styles and settings */ .intro { --space-regions: var(--space-2xl) var(--space-3xl); --sidebar-target-width: 11ch; background: linear-gradient( 85deg, var(--color-blue-glare) 35%, var(--color-light-shade) 100% ); } .intro .sidebar { /* Going straight for gap so it doesn't affect the wrapper */ gap: var(--space-s) var(--space-l); } .lede { font-style: italic; } .quote { position: relative; border-radius: 1em; overflow: hidden; } .quote img { width: 100%; aspect-ratio: 1/1; object-fit: cover; } .quote q { quotes: none; background: var(--color-midnight-shade); color: var(--color-light); padding: 0.5em 1em; background: rgb(from var(--color-midnight-shade) r g b / 70%); backdrop-filter: blur(2px); position: absolute; bottom: 0; left: 0; width: 100%; } .grid { --space-flow: var(--space-l); }
0 0 0 0
Jonathan Stephens
Jonathan Stephens
@jonathanstephens.us.web.brid.gy
4 months ago
Preview
How we’re approaching theming with modern CSS :root { /* Fluid type scale */ --size-step--2: clamp(0.6944rem, 0.6376rem + 0.284vi, 0.84rem); --size-step--1: clamp(0.8333rem, 0.7488rem + 0.4228vi, 1.05rem); --size-step-0: clamp(1rem, 0.878rem + 0.6098vi, 1.3125rem); --size-step-1: clamp(1.2rem, 1.028rem + 0.8598vi, 1.6406rem); --size-step-2: clamp(1.44rem, 1.2016rem + 1.1918vi, 2.0508rem); --size-step-3: clamp(1.728rem, 1.402rem + 1.6302vi, 2.5635rem); --size-step-4: clamp(2.0736rem, 1.6323rem + 2.2063vi, 3.2043rem); --size-step-5: clamp(2.4883rem, 1.8963rem + 2.9602vi, 4.0054rem); --size-step-6: clamp(2.986rem, 2.1974rem + 3.943vi, 5.0068rem); --size-step-7: clamp(3.5832rem, 2.5392rem + 5.2201vi, 6.2585rem); /* Fluid space scale */ --space-3xs: clamp(0.25rem, 0.2256rem + 0.122vi, 0.3125rem); --space-2xs: clamp(0.5rem, 0.4268rem + 0.3659vi, 0.6875rem); --space-xs: clamp(0.75rem, 0.6524rem + 0.4878vi, 1rem); --space-s: clamp(1rem, 0.878rem + 0.6098vi, 1.3125rem); --space-m: clamp(1.5rem, 1.3049rem + 0.9756vi, 2rem); --space-l: clamp(2rem, 1.7561rem + 1.2195vi, 2.625rem); --space-xl: clamp(3rem, 2.6341rem + 1.8293vi, 3.9375rem); --space-2xl: clamp(4rem, 3.5122rem + 2.439vi, 5.25rem); --space-3xl: clamp(6rem, 5.2683rem + 3.6585vi, 7.875rem); /* Colours */ --color-light: #ffffff; --color-light-shade: #f3f5f7; --color-dark: #000000; --color-mid: #ebebeb; --color-mid-shade: #dedede; --color-midnight: #4a4e69; --color-midnight-shade: #22223b; --color-eggshell: #f2e9e4; --color-blue: #3b71fe; --color-blue-glare: #eef6fd; --color-slate: #4f5563; } --leading: 1.5; --leading-short: 1.3; --leading-fine: 1.1; --leading-flat: 1; --leading-loose: 1.7; --kerning: normal; --kerning-tight: -0.04ch; --kerning-loose: 0.1ch; --text-size-base: var(--size-step-0); --text-size-lede: var(--size-step-1); --text-size-meta: var(--size-step--1); --text-size-heading-1: var(--size-step-5); --text-size-heading-2: var(--size-step-4); --text-size-heading-3: var(--size-step-3); --text-size-heading-4: var(--size-step-2); --text-size-prose: var(--text-size-base); --space-gutter: var(--space-m); --space-gutter-s: var(--space-s); --space-gutter-l: var(--space-l); --space-regions: var(--space-xl); --size-wrapper-max-width: 1135px; --color-global-bg: var(--color-light); --color-global-text: var(--color-dark); --color-surface-bg: var(--color-mid); --color-surface-bg-interact: var(--color-mid-shade); --color-surface-text: var(--color-dark); --color-surface-text-interact: var(--color-dark); --font-base: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; --font-display: var(--font-base); --font-lede: var(--font-base); --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-bold: 700; --font-weight-black: 900; --focus-ring: 2px solid currentColor; --focus-ring-offset: 2px; /* Custom property configuration */ :root { --color-global-bg: var(--color-light); --color-global-text: var(--color-midnight-shade); --color-surface-bg: var(--color-blue); --color-surface-bg-interact: var(--color-dark); --color-surface-text: var(--color-light); --color-surface-text-interact: var(--color-light); --button-radius: 1.5em; --font-lede: Georgia, serif; --font-display: 'Khula', sans-serif; --text-size-heading-1: var(--size-step-6); } /* Specific theme styles and settings */ .intro { --space-regions: var(--space-2xl) var(--space-3xl); --sidebar-target-width: 11ch; background: linear-gradient( 85deg, var(--color-blue-glare) 35%, var(--color-light-shade) 100% ); } .intro .sidebar { /* Going straight for gap so it doesn't affect the wrapper */ gap: var(--space-s) var(--space-l); } .lede { font-style: italic; } .quote { position: relative; border-radius: 1em; overflow: hidden; } .quote img { width: 100%; aspect-ratio: 1/1; object-fit: cover; } .quote q { quotes: none; background: var(--color-midnight-shade); color: var(--color-light); padding: 0.5em 1em; background: rgb(from var(--color-midnight-shade) r g b / 70%); backdrop-filter: blur(2px); position: absolute; bottom: 0; left: 0; width: 100%; } .grid { --space-flow: var(--space-l); }
0 0 0 0
Jonathan Stephens
Jonathan Stephens
@jonathanstephens.us.web.brid.gy
4 months ago
Preview
How we’re approaching theming with modern CSS :root { /* Fluid type scale */ --size-step--2: clamp(0.6944rem, 0.6376rem + 0.284vi, 0.84rem); --size-step--1: clamp(0.8333rem, 0.7488rem + 0.4228vi, 1.05rem); --size-step-0: clamp(1rem, 0.878rem + 0.6098vi, 1.3125rem); --size-step-1: clamp(1.2rem, 1.028rem + 0.8598vi, 1.6406rem); --size-step-2: clamp(1.44rem, 1.2016rem + 1.1918vi, 2.0508rem); --size-step-3: clamp(1.728rem, 1.402rem + 1.6302vi, 2.5635rem); --size-step-4: clamp(2.0736rem, 1.6323rem + 2.2063vi, 3.2043rem); --size-step-5: clamp(2.4883rem, 1.8963rem + 2.9602vi, 4.0054rem); --size-step-6: clamp(2.986rem, 2.1974rem + 3.943vi, 5.0068rem); --size-step-7: clamp(3.5832rem, 2.5392rem + 5.2201vi, 6.2585rem); /* Fluid space scale */ --space-3xs: clamp(0.25rem, 0.2256rem + 0.122vi, 0.3125rem); --space-2xs: clamp(0.5rem, 0.4268rem + 0.3659vi, 0.6875rem); --space-xs: clamp(0.75rem, 0.6524rem + 0.4878vi, 1rem); --space-s: clamp(1rem, 0.878rem + 0.6098vi, 1.3125rem); --space-m: clamp(1.5rem, 1.3049rem + 0.9756vi, 2rem); --space-l: clamp(2rem, 1.7561rem + 1.2195vi, 2.625rem); --space-xl: clamp(3rem, 2.6341rem + 1.8293vi, 3.9375rem); --space-2xl: clamp(4rem, 3.5122rem + 2.439vi, 5.25rem); --space-3xl: clamp(6rem, 5.2683rem + 3.6585vi, 7.875rem); /* Colours */ --color-light: #ffffff; --color-light-shade: #f3f5f7; --color-dark: #000000; --color-mid: #ebebeb; --color-mid-shade: #dedede; --color-midnight: #4a4e69; --color-midnight-shade: #22223b; --color-eggshell: #f2e9e4; --color-blue: #3b71fe; --color-blue-glare: #eef6fd; --color-slate: #4f5563; } --leading: 1.5; --leading-short: 1.3; --leading-fine: 1.1; --leading-flat: 1; --leading-loose: 1.7; --kerning: normal; --kerning-tight: -0.04ch; --kerning-loose: 0.1ch; --text-size-base: var(--size-step-0); --text-size-lede: var(--size-step-1); --text-size-meta: var(--size-step--1); --text-size-heading-1: var(--size-step-5); --text-size-heading-2: var(--size-step-4); --text-size-heading-3: var(--size-step-3); --text-size-heading-4: var(--size-step-2); --text-size-prose: var(--text-size-base); --space-gutter: var(--space-m); --space-gutter-s: var(--space-s); --space-gutter-l: var(--space-l); --space-regions: var(--space-xl); --size-wrapper-max-width: 1135px; --color-global-bg: var(--color-light); --color-global-text: var(--color-dark); --color-surface-bg: var(--color-mid); --color-surface-bg-interact: var(--color-mid-shade); --color-surface-text: var(--color-dark); --color-surface-text-interact: var(--color-dark); --font-base: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; --font-display: var(--font-base); --font-lede: var(--font-base); --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-bold: 700; --font-weight-black: 900; --focus-ring: 2px solid currentColor; --focus-ring-offset: 2px; /* Custom property configuration */ :root { --color-global-bg: var(--color-light); --color-global-text: var(--color-midnight-shade); --color-surface-bg: var(--color-blue); --color-surface-bg-interact: var(--color-dark); --color-surface-text: var(--color-light); --color-surface-text-interact: var(--color-light); --button-radius: 1.5em; --font-lede: Georgia, serif; --font-display: 'Khula', sans-serif; --text-size-heading-1: var(--size-step-6); } /* Specific theme styles and settings */ .intro { --space-regions: var(--space-2xl) var(--space-3xl); --sidebar-target-width: 11ch; background: linear-gradient( 85deg, var(--color-blue-glare) 35%, var(--color-light-shade) 100% ); } .intro .sidebar { /* Going straight for gap so it doesn't affect the wrapper */ gap: var(--space-s) var(--space-l); } .lede { font-style: italic; } .quote { position: relative; border-radius: 1em; overflow: hidden; } .quote img { width: 100%; aspect-ratio: 1/1; object-fit: cover; } .quote q { quotes: none; background: var(--color-midnight-shade); color: var(--color-light); padding: 0.5em 1em; background: rgb(from var(--color-midnight-shade) r g b / 70%); backdrop-filter: blur(2px); position: absolute; bottom: 0; left: 0; width: 100%; } .grid { --space-flow: var(--space-l); }
0 0 0 0
Jonathan Stephens
Jonathan Stephens
@jonathanstephens.us.web.brid.gy
4 months ago
Preview
How we’re approaching theming with modern CSS :root { /* Fluid type scale */ --size-step--2: clamp(0.6944rem, 0.6376rem + 0.284vi, 0.84rem); --size-step--1: clamp(0.8333rem, 0.7488rem + 0.4228vi, 1.05rem); --size-step-0: clamp(1rem, 0.878rem + 0.6098vi, 1.3125rem); --size-step-1: clamp(1.2rem, 1.028rem + 0.8598vi, 1.6406rem); --size-step-2: clamp(1.44rem, 1.2016rem + 1.1918vi, 2.0508rem); --size-step-3: clamp(1.728rem, 1.402rem + 1.6302vi, 2.5635rem); --size-step-4: clamp(2.0736rem, 1.6323rem + 2.2063vi, 3.2043rem); --size-step-5: clamp(2.4883rem, 1.8963rem + 2.9602vi, 4.0054rem); --size-step-6: clamp(2.986rem, 2.1974rem + 3.943vi, 5.0068rem); --size-step-7: clamp(3.5832rem, 2.5392rem + 5.2201vi, 6.2585rem); /* Fluid space scale */ --space-3xs: clamp(0.25rem, 0.2256rem + 0.122vi, 0.3125rem); --space-2xs: clamp(0.5rem, 0.4268rem + 0.3659vi, 0.6875rem); --space-xs: clamp(0.75rem, 0.6524rem + 0.4878vi, 1rem); --space-s: clamp(1rem, 0.878rem + 0.6098vi, 1.3125rem); --space-m: clamp(1.5rem, 1.3049rem + 0.9756vi, 2rem); --space-l: clamp(2rem, 1.7561rem + 1.2195vi, 2.625rem); --space-xl: clamp(3rem, 2.6341rem + 1.8293vi, 3.9375rem); --space-2xl: clamp(4rem, 3.5122rem + 2.439vi, 5.25rem); --space-3xl: clamp(6rem, 5.2683rem + 3.6585vi, 7.875rem); /* Colours */ --color-light: #ffffff; --color-light-shade: #f3f5f7; --color-dark: #000000; --color-mid: #ebebeb; --color-mid-shade: #dedede; --color-midnight: #4a4e69; --color-midnight-shade: #22223b; --color-eggshell: #f2e9e4; --color-blue: #3b71fe; --color-blue-glare: #eef6fd; --color-slate: #4f5563; } --leading: 1.5; --leading-short: 1.3; --leading-fine: 1.1; --leading-flat: 1; --leading-loose: 1.7; --kerning: normal; --kerning-tight: -0.04ch; --kerning-loose: 0.1ch; --text-size-base: var(--size-step-0); --text-size-lede: var(--size-step-1); --text-size-meta: var(--size-step--1); --text-size-heading-1: var(--size-step-5); --text-size-heading-2: var(--size-step-4); --text-size-heading-3: var(--size-step-3); --text-size-heading-4: var(--size-step-2); --text-size-prose: var(--text-size-base); --space-gutter: var(--space-m); --space-gutter-s: var(--space-s); --space-gutter-l: var(--space-l); --space-regions: var(--space-xl); --size-wrapper-max-width: 1135px; --color-global-bg: var(--color-light); --color-global-text: var(--color-dark); --color-surface-bg: var(--color-mid); --color-surface-bg-interact: var(--color-mid-shade); --color-surface-text: var(--color-dark); --color-surface-text-interact: var(--color-dark); --font-base: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; --font-display: var(--font-base); --font-lede: var(--font-base); --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-bold: 700; --font-weight-black: 900; --focus-ring: 2px solid currentColor; --focus-ring-offset: 2px; /* Custom property configuration */ :root { --color-global-bg: var(--color-light); --color-global-text: var(--color-midnight-shade); --color-surface-bg: var(--color-blue); --color-surface-bg-interact: var(--color-dark); --color-surface-text: var(--color-light); --color-surface-text-interact: var(--color-light); --button-radius: 1.5em; --font-lede: Georgia, serif; --font-display: 'Khula', sans-serif; --text-size-heading-1: var(--size-step-6); } /* Specific theme styles and settings */ .intro { --space-regions: var(--space-2xl) var(--space-3xl); --sidebar-target-width: 11ch; background: linear-gradient( 85deg, var(--color-blue-glare) 35%, var(--color-light-shade) 100% ); } .intro .sidebar { /* Going straight for gap so it doesn't affect the wrapper */ gap: var(--space-s) var(--space-l); } .lede { font-style: italic; } .quote { position: relative; border-radius: 1em; overflow: hidden; } .quote img { width: 100%; aspect-ratio: 1/1; object-fit: cover; } .quote q { quotes: none; background: var(--color-midnight-shade); color: var(--color-light); padding: 0.5em 1em; background: rgb(from var(--color-midnight-shade) r g b / 70%); backdrop-filter: blur(2px); position: absolute; bottom: 0; left: 0; width: 100%; } .grid { --space-flow: var(--space-l); }
0 0 0 0
Jonathan Stephens
Jonathan Stephens
@jonathanstephens.us.web.brid.gy
4 months ago
Preview
How we’re approaching theming with modern CSS :root { /* Fluid type scale */ --size-step--2: clamp(0.6944rem, 0.6376rem + 0.284vi, 0.84rem); --size-step--1: clamp(0.8333rem, 0.7488rem + 0.4228vi, 1.05rem); --size-step-0: clamp(1rem, 0.878rem + 0.6098vi, 1.3125rem); --size-step-1: clamp(1.2rem, 1.028rem + 0.8598vi, 1.6406rem); --size-step-2: clamp(1.44rem, 1.2016rem + 1.1918vi, 2.0508rem); --size-step-3: clamp(1.728rem, 1.402rem + 1.6302vi, 2.5635rem); --size-step-4: clamp(2.0736rem, 1.6323rem + 2.2063vi, 3.2043rem); --size-step-5: clamp(2.4883rem, 1.8963rem + 2.9602vi, 4.0054rem); --size-step-6: clamp(2.986rem, 2.1974rem + 3.943vi, 5.0068rem); --size-step-7: clamp(3.5832rem, 2.5392rem + 5.2201vi, 6.2585rem); /* Fluid space scale */ --space-3xs: clamp(0.25rem, 0.2256rem + 0.122vi, 0.3125rem); --space-2xs: clamp(0.5rem, 0.4268rem + 0.3659vi, 0.6875rem); --space-xs: clamp(0.75rem, 0.6524rem + 0.4878vi, 1rem); --space-s: clamp(1rem, 0.878rem + 0.6098vi, 1.3125rem); --space-m: clamp(1.5rem, 1.3049rem + 0.9756vi, 2rem); --space-l: clamp(2rem, 1.7561rem + 1.2195vi, 2.625rem); --space-xl: clamp(3rem, 2.6341rem + 1.8293vi, 3.9375rem); --space-2xl: clamp(4rem, 3.5122rem + 2.439vi, 5.25rem); --space-3xl: clamp(6rem, 5.2683rem + 3.6585vi, 7.875rem); /* Colours */ --color-light: #ffffff; --color-light-shade: #f3f5f7; --color-dark: #000000; --color-mid: #ebebeb; --color-mid-shade: #dedede; --color-midnight: #4a4e69; --color-midnight-shade: #22223b; --color-eggshell: #f2e9e4; --color-blue: #3b71fe; --color-blue-glare: #eef6fd; --color-slate: #4f5563; } --leading: 1.5; --leading-short: 1.3; --leading-fine: 1.1; --leading-flat: 1; --leading-loose: 1.7; --kerning: normal; --kerning-tight: -0.04ch; --kerning-loose: 0.1ch; --text-size-base: var(--size-step-0); --text-size-lede: var(--size-step-1); --text-size-meta: var(--size-step--1); --text-size-heading-1: var(--size-step-5); --text-size-heading-2: var(--size-step-4); --text-size-heading-3: var(--size-step-3); --text-size-heading-4: var(--size-step-2); --text-size-prose: var(--text-size-base); --space-gutter: var(--space-m); --space-gutter-s: var(--space-s); --space-gutter-l: var(--space-l); --space-regions: var(--space-xl); --size-wrapper-max-width: 1135px; --color-global-bg: var(--color-light); --color-global-text: var(--color-dark); --color-surface-bg: var(--color-mid); --color-surface-bg-interact: var(--color-mid-shade); --color-surface-text: var(--color-dark); --color-surface-text-interact: var(--color-dark); --font-base: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; --font-display: var(--font-base); --font-lede: var(--font-base); --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-bold: 700; --font-weight-black: 900; --focus-ring: 2px solid currentColor; --focus-ring-offset: 2px; /* Custom property configuration */ :root { --color-global-bg: var(--color-light); --color-global-text: var(--color-midnight-shade); --color-surface-bg: var(--color-blue); --color-surface-bg-interact: var(--color-dark); --color-surface-text: var(--color-light); --color-surface-text-interact: var(--color-light); --button-radius: 1.5em; --font-lede: Georgia, serif; --font-display: 'Khula', sans-serif; --text-size-heading-1: var(--size-step-6); } /* Specific theme styles and settings */ .intro { --space-regions: var(--space-2xl) var(--space-3xl); --sidebar-target-width: 11ch; background: linear-gradient( 85deg, var(--color-blue-glare) 35%, var(--color-light-shade) 100% ); } .intro .sidebar { /* Going straight for gap so it doesn't affect the wrapper */ gap: var(--space-s) var(--space-l); } .lede { font-style: italic; } .quote { position: relative; border-radius: 1em; overflow: hidden; } .quote img { width: 100%; aspect-ratio: 1/1; object-fit: cover; } .quote q { quotes: none; background: var(--color-midnight-shade); color: var(--color-light); padding: 0.5em 1em; background: rgb(from var(--color-midnight-shade) r g b / 70%); backdrop-filter: blur(2px); position: absolute; bottom: 0; left: 0; width: 100%; } .grid { --space-flow: var(--space-l); }
0 0 0 0
Jonathan Stephens
Jonathan Stephens
@jonathanstephens.us.web.brid.gy
4 months ago
Preview
How we’re approaching theming with modern CSS :root { /* Fluid type scale */ --size-step--2: clamp(0.6944rem, 0.6376rem + 0.284vi, 0.84rem); --size-step--1: clamp(0.8333rem, 0.7488rem + 0.4228vi, 1.05rem); --size-step-0: clamp(1rem, 0.878rem + 0.6098vi, 1.3125rem); --size-step-1: clamp(1.2rem, 1.028rem + 0.8598vi, 1.6406rem); --size-step-2: clamp(1.44rem, 1.2016rem + 1.1918vi, 2.0508rem); --size-step-3: clamp(1.728rem, 1.402rem + 1.6302vi, 2.5635rem); --size-step-4: clamp(2.0736rem, 1.6323rem + 2.2063vi, 3.2043rem); --size-step-5: clamp(2.4883rem, 1.8963rem + 2.9602vi, 4.0054rem); --size-step-6: clamp(2.986rem, 2.1974rem + 3.943vi, 5.0068rem); --size-step-7: clamp(3.5832rem, 2.5392rem + 5.2201vi, 6.2585rem); /* Fluid space scale */ --space-3xs: clamp(0.25rem, 0.2256rem + 0.122vi, 0.3125rem); --space-2xs: clamp(0.5rem, 0.4268rem + 0.3659vi, 0.6875rem); --space-xs: clamp(0.75rem, 0.6524rem + 0.4878vi, 1rem); --space-s: clamp(1rem, 0.878rem + 0.6098vi, 1.3125rem); --space-m: clamp(1.5rem, 1.3049rem + 0.9756vi, 2rem); --space-l: clamp(2rem, 1.7561rem + 1.2195vi, 2.625rem); --space-xl: clamp(3rem, 2.6341rem + 1.8293vi, 3.9375rem); --space-2xl: clamp(4rem, 3.5122rem + 2.439vi, 5.25rem); --space-3xl: clamp(6rem, 5.2683rem + 3.6585vi, 7.875rem); /* Colours */ --color-light: #ffffff; --color-light-shade: #f3f5f7; --color-dark: #000000; --color-mid: #ebebeb; --color-mid-shade: #dedede; --color-midnight: #4a4e69; --color-midnight-shade: #22223b; --color-eggshell: #f2e9e4; --color-blue: #3b71fe; --color-blue-glare: #eef6fd; --color-slate: #4f5563; } --leading: 1.5; --leading-short: 1.3; --leading-fine: 1.1; --leading-flat: 1; --leading-loose: 1.7; --kerning: normal; --kerning-tight: -0.04ch; --kerning-loose: 0.1ch; --text-size-base: var(--size-step-0); --text-size-lede: var(--size-step-1); --text-size-meta: var(--size-step--1); --text-size-heading-1: var(--size-step-5); --text-size-heading-2: var(--size-step-4); --text-size-heading-3: var(--size-step-3); --text-size-heading-4: var(--size-step-2); --text-size-prose: var(--text-size-base); --space-gutter: var(--space-m); --space-gutter-s: var(--space-s); --space-gutter-l: var(--space-l); --space-regions: var(--space-xl); --size-wrapper-max-width: 1135px; --color-global-bg: var(--color-light); --color-global-text: var(--color-dark); --color-surface-bg: var(--color-mid); --color-surface-bg-interact: var(--color-mid-shade); --color-surface-text: var(--color-dark); --color-surface-text-interact: var(--color-dark); --font-base: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; --font-display: var(--font-base); --font-lede: var(--font-base); --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-bold: 700; --font-weight-black: 900; --focus-ring: 2px solid currentColor; --focus-ring-offset: 2px; /* Custom property configuration */ :root { --color-global-bg: var(--color-light); --color-global-text: var(--color-midnight-shade); --color-surface-bg: var(--color-blue); --color-surface-bg-interact: var(--color-dark); --color-surface-text: var(--color-light); --color-surface-text-interact: var(--color-light); --button-radius: 1.5em; --font-lede: Georgia, serif; --font-display: 'Khula', sans-serif; --text-size-heading-1: var(--size-step-6); } /* Specific theme styles and settings */ .intro { --space-regions: var(--space-2xl) var(--space-3xl); --sidebar-target-width: 11ch; background: linear-gradient( 85deg, var(--color-blue-glare) 35%, var(--color-light-shade) 100% ); } .intro .sidebar { /* Going straight for gap so it doesn't affect the wrapper */ gap: var(--space-s) var(--space-l); } .lede { font-style: italic; } .quote { position: relative; border-radius: 1em; overflow: hidden; } .quote img { width: 100%; aspect-ratio: 1/1; object-fit: cover; } .quote q { quotes: none; background: var(--color-midnight-shade); color: var(--color-light); padding: 0.5em 1em; background: rgb(from var(--color-midnight-shade) r g b / 70%); backdrop-filter: blur(2px); position: absolute; bottom: 0; left: 0; width: 100%; } .grid { --space-flow: var(--space-l); }
0 0 0 0
Jonathan Stephens
Jonathan Stephens
@jonathanstephens.us.web.brid.gy
4 months ago
Preview
How we’re approaching theming with modern CSS :root { /* Fluid type scale */ --size-step--2: clamp(0.6944rem, 0.6376rem + 0.284vi, 0.84rem); --size-step--1: clamp(0.8333rem, 0.7488rem + 0.4228vi, 1.05rem); --size-step-0: clamp(1rem, 0.878rem + 0.6098vi, 1.3125rem); --size-step-1: clamp(1.2rem, 1.028rem + 0.8598vi, 1.6406rem); --size-step-2: clamp(1.44rem, 1.2016rem + 1.1918vi, 2.0508rem); --size-step-3: clamp(1.728rem, 1.402rem + 1.6302vi, 2.5635rem); --size-step-4: clamp(2.0736rem, 1.6323rem + 2.2063vi, 3.2043rem); --size-step-5: clamp(2.4883rem, 1.8963rem + 2.9602vi, 4.0054rem); --size-step-6: clamp(2.986rem, 2.1974rem + 3.943vi, 5.0068rem); --size-step-7: clamp(3.5832rem, 2.5392rem + 5.2201vi, 6.2585rem); /* Fluid space scale */ --space-3xs: clamp(0.25rem, 0.2256rem + 0.122vi, 0.3125rem); --space-2xs: clamp(0.5rem, 0.4268rem + 0.3659vi, 0.6875rem); --space-xs: clamp(0.75rem, 0.6524rem + 0.4878vi, 1rem); --space-s: clamp(1rem, 0.878rem + 0.6098vi, 1.3125rem); --space-m: clamp(1.5rem, 1.3049rem + 0.9756vi, 2rem); --space-l: clamp(2rem, 1.7561rem + 1.2195vi, 2.625rem); --space-xl: clamp(3rem, 2.6341rem + 1.8293vi, 3.9375rem); --space-2xl: clamp(4rem, 3.5122rem + 2.439vi, 5.25rem); --space-3xl: clamp(6rem, 5.2683rem + 3.6585vi, 7.875rem); /* Colours */ --color-light: #ffffff; --color-light-shade: #f3f5f7; --color-dark: #000000; --color-mid: #ebebeb; --color-mid-shade: #dedede; --color-midnight: #4a4e69; --color-midnight-shade: #22223b; --color-eggshell: #f2e9e4; --color-blue: #3b71fe; --color-blue-glare: #eef6fd; --color-slate: #4f5563; } --leading: 1.5; --leading-short: 1.3; --leading-fine: 1.1; --leading-flat: 1; --leading-loose: 1.7; --kerning: normal; --kerning-tight: -0.04ch; --kerning-loose: 0.1ch; --text-size-base: var(--size-step-0); --text-size-lede: var(--size-step-1); --text-size-meta: var(--size-step--1); --text-size-heading-1: var(--size-step-5); --text-size-heading-2: var(--size-step-4); --text-size-heading-3: var(--size-step-3); --text-size-heading-4: var(--size-step-2); --text-size-prose: var(--text-size-base); --space-gutter: var(--space-m); --space-gutter-s: var(--space-s); --space-gutter-l: var(--space-l); --space-regions: var(--space-xl); --size-wrapper-max-width: 1135px; --color-global-bg: var(--color-light); --color-global-text: var(--color-dark); --color-surface-bg: var(--color-mid); --color-surface-bg-interact: var(--color-mid-shade); --color-surface-text: var(--color-dark); --color-surface-text-interact: var(--color-dark); --font-base: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; --font-display: var(--font-base); --font-lede: var(--font-base); --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-bold: 700; --font-weight-black: 900; --focus-ring: 2px solid currentColor; --focus-ring-offset: 2px; /* Custom property configuration */ :root { --color-global-bg: var(--color-light); --color-global-text: var(--color-midnight-shade); --color-surface-bg: var(--color-blue); --color-surface-bg-interact: var(--color-dark); --color-surface-text: var(--color-light); --color-surface-text-interact: var(--color-light); --button-radius: 1.5em; --font-lede: Georgia, serif; --font-display: 'Khula', sans-serif; --text-size-heading-1: var(--size-step-6); } /* Specific theme styles and settings */ .intro { --space-regions: var(--space-2xl) var(--space-3xl); --sidebar-target-width: 11ch; background: linear-gradient( 85deg, var(--color-blue-glare) 35%, var(--color-light-shade) 100% ); } .intro .sidebar { /* Going straight for gap so it doesn't affect the wrapper */ gap: var(--space-s) var(--space-l); } .lede { font-style: italic; } .quote { position: relative; border-radius: 1em; overflow: hidden; } .quote img { width: 100%; aspect-ratio: 1/1; object-fit: cover; } .quote q { quotes: none; background: var(--color-midnight-shade); color: var(--color-light); padding: 0.5em 1em; background: rgb(from var(--color-midnight-shade) r g b / 70%); backdrop-filter: blur(2px); position: absolute; bottom: 0; left: 0; width: 100%; } .grid { --space-flow: var(--space-l); }
0 0 0 0
Jonathan Stephens
Jonathan Stephens
@jonathanstephens.us.web.brid.gy
4 months ago
Preview
How we’re approaching theming with modern CSS :root { /* Fluid type scale */ --size-step--2: clamp(0.6944rem, 0.6376rem + 0.284vi, 0.84rem); --size-step--1: clamp(0.8333rem, 0.7488rem + 0.4228vi, 1.05rem); --size-step-0: clamp(1rem, 0.878rem + 0.6098vi, 1.3125rem); --size-step-1: clamp(1.2rem, 1.028rem + 0.8598vi, 1.6406rem); --size-step-2: clamp(1.44rem, 1.2016rem + 1.1918vi, 2.0508rem); --size-step-3: clamp(1.728rem, 1.402rem + 1.6302vi, 2.5635rem); --size-step-4: clamp(2.0736rem, 1.6323rem + 2.2063vi, 3.2043rem); --size-step-5: clamp(2.4883rem, 1.8963rem + 2.9602vi, 4.0054rem); --size-step-6: clamp(2.986rem, 2.1974rem + 3.943vi, 5.0068rem); --size-step-7: clamp(3.5832rem, 2.5392rem + 5.2201vi, 6.2585rem); /* Fluid space scale */ --space-3xs: clamp(0.25rem, 0.2256rem + 0.122vi, 0.3125rem); --space-2xs: clamp(0.5rem, 0.4268rem + 0.3659vi, 0.6875rem); --space-xs: clamp(0.75rem, 0.6524rem + 0.4878vi, 1rem); --space-s: clamp(1rem, 0.878rem + 0.6098vi, 1.3125rem); --space-m: clamp(1.5rem, 1.3049rem + 0.9756vi, 2rem); --space-l: clamp(2rem, 1.7561rem + 1.2195vi, 2.625rem); --space-xl: clamp(3rem, 2.6341rem + 1.8293vi, 3.9375rem); --space-2xl: clamp(4rem, 3.5122rem + 2.439vi, 5.25rem); --space-3xl: clamp(6rem, 5.2683rem + 3.6585vi, 7.875rem); /* Colours */ --color-light: #ffffff; --color-light-shade: #f3f5f7; --color-dark: #000000; --color-mid: #ebebeb; --color-mid-shade: #dedede; --color-midnight: #4a4e69; --color-midnight-shade: #22223b; --color-eggshell: #f2e9e4; --color-blue: #3b71fe; --color-blue-glare: #eef6fd; --color-slate: #4f5563; } --leading: 1.5; --leading-short: 1.3; --leading-fine: 1.1; --leading-flat: 1; --leading-loose: 1.7; --kerning: normal; --kerning-tight: -0.04ch; --kerning-loose: 0.1ch; --text-size-base: var(--size-step-0); --text-size-lede: var(--size-step-1); --text-size-meta: var(--size-step--1); --text-size-heading-1: var(--size-step-5); --text-size-heading-2: var(--size-step-4); --text-size-heading-3: var(--size-step-3); --text-size-heading-4: var(--size-step-2); --text-size-prose: var(--text-size-base); --space-gutter: var(--space-m); --space-gutter-s: var(--space-s); --space-gutter-l: var(--space-l); --space-regions: var(--space-xl); --size-wrapper-max-width: 1135px; --color-global-bg: var(--color-light); --color-global-text: var(--color-dark); --color-surface-bg: var(--color-mid); --color-surface-bg-interact: var(--color-mid-shade); --color-surface-text: var(--color-dark); --color-surface-text-interact: var(--color-dark); --font-base: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; --font-display: var(--font-base); --font-lede: var(--font-base); --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-bold: 700; --font-weight-black: 900; --focus-ring: 2px solid currentColor; --focus-ring-offset: 2px; /* Custom property configuration */ :root { --color-global-bg: var(--color-light); --color-global-text: var(--color-midnight-shade); --color-surface-bg: var(--color-blue); --color-surface-bg-interact: var(--color-dark); --color-surface-text: var(--color-light); --color-surface-text-interact: var(--color-light); --button-radius: 1.5em; --font-lede: Georgia, serif; --font-display: 'Khula', sans-serif; --text-size-heading-1: var(--size-step-6); } /* Specific theme styles and settings */ .intro { --space-regions: var(--space-2xl) var(--space-3xl); --sidebar-target-width: 11ch; background: linear-gradient( 85deg, var(--color-blue-glare) 35%, var(--color-light-shade) 100% ); } .intro .sidebar { /* Going straight for gap so it doesn't affect the wrapper */ gap: var(--space-s) var(--space-l); } .lede { font-style: italic; } .quote { position: relative; border-radius: 1em; overflow: hidden; } .quote img { width: 100%; aspect-ratio: 1/1; object-fit: cover; } .quote q { quotes: none; background: var(--color-midnight-shade); color: var(--color-light); padding: 0.5em 1em; background: rgb(from var(--color-midnight-shade) r g b / 70%); backdrop-filter: blur(2px); position: absolute; bottom: 0; left: 0; width: 100%; } .grid { --space-flow: var(--space-l); }
0 0 0 0