hugo-theme-termlite/assets/css/050_quotations.css



/*************
 * QUOTATIONS
 *************/

.figure--blockquote, :not(.figure--blockquote) > blockquote {
  --border-width: var(--space-xs);
  --inline-padding: var(--space-l);

  border-inline-start: var(--border-width) solid var(--text-color-light);
  margin-inline: 0 var(--inline-padding);
  padding-inline-start: calc(var(--inline-padding) - var(--border-width));
}
Move blockquote styles to a new quotations stylesheet 2024-07-23 09:03:23 -07:00




			`/*************`
			`* QUOTATIONS`
			`*************/`

Render blockquotes in a figure Render cite and caption too. 2024-11-06 09:31:16 -08:00			`.figure--blockquote, :not(.figure--blockquote) > blockquote {`
Move blockquote styles to a new quotations stylesheet 2024-07-23 09:03:23 -07:00			`--border-width: var(--space-xs);`
			`--inline-padding: var(--space-l);`

Colors: Allow setting the color scheme explicitly In addition to the color scheme changing based on the system setting, enable setting the color scheme explicitly by adding a color-scheme="light \| dark" attribute on the <html> element. Doing this was a bit tricky. I originally implemented the grayscale ramp by reversing it when prefers-color-scheme: dark. This was convenient, but meant that setting the color scheme explicitly didn't work. Along the way I discovered the light-dark() CSS function. Deploy that as the preferred style if the browser supports it. Otherwise, fall back on the prefers-color-scheme media queries. This function only works if color-scheme: light dark is set on the :root element. 2024-07-27 22:59:56 -07:00			`border-inline-start: var(--border-width) solid var(--text-color-light);`
Move blockquote styles to a new quotations stylesheet 2024-07-23 09:03:23 -07:00			`margin-inline: 0 var(--inline-padding);`
			`padding-inline-start: calc(var(--inline-padding) - var(--border-width));`
			`}`