ViMaSter/hackertours-theme
Watch
0
0
Fork
You've already forked hackertours-theme
 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Implement new css.Build.

Browse source
This commit is contained in:
Fredrik Jonsson 2026-04-08 11:17:24 +02:00
commit d984bcaf5d
1 changed files with 1681 additions and 1695 deletions
Download patch file Download diff file Expand all files Collapse all files

148
assets/css/base/_images.css
View file

@ -1,89 +1,87 @@
/* Figure and image. */
@layer base {
figure,
img {
&.image {
--image-padding: .75rem;
figure,
img {
&.image {
--image-padding: .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) {
&.center {
margin-inline: auto;
}
@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);
}
}
&.left {
padding-inline-end: var(--image-padding);
padding-block-end: var(--image-padding);
margin: 0;
float: left;
clear: both;
}
}
&.podcast {
audio {
width: 95%;
&.right {
padding-inline-start: var(--image-padding);
padding-block-end: var(--image-padding);
margin: 0;
float: right;
clear: both;
}
}
}
}
img {
&.image {
/* Add vertical rhythm margins. */
margin-block: 0 var(--spacing-m);
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);
}
}