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

Create image sass component, was in Zen styles before.

Browse source
This commit is contained in:
Fredrik Jonsson 2023-11-14 11:51:52 +01:00
commit 34b103f41f
1 changed files with 69 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

68
assets/sass/components/image/_image.scss Normal file
View file

@ -0,0 +1,68 @@
// Figure and image.
figure,
img {
&.image {
--padding: .75rem;
@include respond-to(s) {
&.center {
margin-inline: auto;
}
&.left {
padding-inline-end: var(--padding);
padding-block-end: var(--padding);
margin: 0;
float: left;
clear: both;
}
&.right {
padding-inline-start: var(--padding);
padding-block-end: var(--padding);
margin: 0;
float: right;
clear: both;
}
}
}
}
figure {
&.image {
--padding: .75rem;
figcaption {
padding-block-start: var(--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(--padding);
padding-block-end: var(--padding);
}
}
&.right {
figcaption {
padding-inline-start: var(--padding);
padding-block-end: var(--padding);
}
}
}
}
}