16c47eea9d* Lint fixes. * Implement light-dark(). * Lint css with biome, remove stylelint. * Biome lint fixes. * Dark mode adjustments. * Style bug fixes. * Colour adjustments. * Move header and footer styles to base. * Site header adjustments. * Removing jQuery and umbrella libs. They where great but not needed anymore. * Add colorScheme to optionally lock light/dark. * Update README. * Biome adjustments.
87 lines
1.6 KiB
CSS
87 lines
1.6 KiB
CSS
/* Figure and image. */
|
|
|
|
figure,
|
|
img {
|
|
&.image {
|
|
--image-padding: 0.75rem;
|
|
|
|
@media (min-width: 666px) {
|
|
&.center {
|
|
margin-inline: auto;
|
|
}
|
|
|
|
&.left {
|
|
padding-inline-end: var(--image-padding);
|
|
padding-block-end: var(--image-padding);
|
|
margin: 0;
|
|
float: left;
|
|
clear: both;
|
|
}
|
|
|
|
&.right {
|
|
padding-inline-start: var(--image-padding);
|
|
padding-block-end: var(--image-padding);
|
|
margin: 0;
|
|
float: right;
|
|
clear: both;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
figure {
|
|
/* Add vertical rhythm margins. */
|
|
margin-block: 0 var(--spacing-m);
|
|
|
|
&.image {
|
|
figcaption {
|
|
padding-block-start: var(--image-padding);
|
|
contain: inline-size;
|
|
|
|
/* Set max text line width in main for readability. */
|
|
max-width: var(--max-line-width);
|
|
|
|
/* Nicer text wrap, e.g. no lone word on last line. */
|
|
text-wrap: pretty;
|
|
|
|
@media (min-width: 666px) {
|
|
padding-block-start: 0;
|
|
}
|
|
|
|
p {
|
|
margin: 0;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 666px) {
|
|
inline-size: fit-content;
|
|
|
|
&.left {
|
|
figcaption {
|
|
padding-inline-end: var(--image-padding);
|
|
padding-block-end: var(--image-padding);
|
|
}
|
|
}
|
|
|
|
&.right {
|
|
figcaption {
|
|
padding-inline-start: var(--image-padding);
|
|
padding-block-end: var(--image-padding);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&.podcast {
|
|
audio {
|
|
width: 95%;
|
|
}
|
|
}
|
|
}
|
|
|
|
img {
|
|
&.image {
|
|
/* Add vertical rhythm margins. */
|
|
margin-block: 0 var(--spacing-m);
|
|
}
|
|
}
|