hacker.tours-website/themes/zen/assets/sass/base/images/_images.scss
2024-06-13 22:14:05 +02:00

83 lines
1.4 KiB
SCSS

// Figure and image.
figure,
img {
&.image {
--image-padding: .75rem;
@include respond-to(s) {
&.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.
@include margin-block(0 1);
&.image {
figcaption {
padding-block-start: var(--image-padding);
@include respond-to(s) {
display: table-caption;
caption-side: bottom;
padding-block-start: 0;
}
p {
margin: 0;
}
}
@include respond-to(s) {
display: table;
&.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.
@include margin-block(0 1);
}
}