dotfiles

 1@import "variables";
 2
 3img {
 4  display: block;
 5  max-width: 100%;
 6  height: auto;
 7
 8  &.center {
 9    margin-left: auto;
10    margin-right: auto;
11  }
12
13  &.left {
14    margin-right: auto;
15  }
16
17  &.right {
18    margin-left: auto;
19  }
20}
21
22figure {
23  display: block;
24  width: fit-content;
25  max-width: 100%;
26  min-width: min(300px, 100%);
27  text-align: center;
28
29  figcaption {
30    background: var(--background);
31    caption-side: bottom;
32    color: var(--accent);
33    display: block;
34    font-size: 14px;
35    margin-top: 5px;
36    padding: 5px 10px;
37  }
38
39  &.size-small img,
40  &.size-small svg {
41    max-width: 42.5%;
42  }
43
44  &.size-medium img,
45  &.size-medium svg {
46    max-width: 57.5%;
47  }
48
49  &.size-large img,
50  &.size-large svg {
51    max-width: 72.5%;
52  }
53
54  &.center {
55    margin: 25px auto;
56    figcaption {
57      text-align: center;
58    }
59  }
60
61  &.left {
62    img,
63    svg {
64      float: left;
65    }
66
67    figcaption {
68      text-align: left;
69    }
70  }
71
72  &.right {
73    img,
74    svg {
75      float: right;
76    }
77
78    figcaption {
79      text-align: right;
80    }
81  }
82}