fixed images display inside a figure element, aka when not inside a gallery.
[theme-danix.xyz.git] / assets / sass / components / _image.scss
CommitLineData
748286b5 1///\r
2/// Forty by HTML5 UP\r
3/// html5up.net | @ajlkn\r
4/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)\r
5///\r
6\r
7/* Image */\r
8\r
9 .image {\r
10 border: 0;\r
11 display: inline-block;\r
12 position: relative;\r
13\r
14 img {\r
15 display: block;\r
16 }\r
17\r
07a590fe 18 &.shadow {\r
19 img {\r
20 @include box-shadow(-5px, 5px, 5px, _palette_light(fg-bold));\r
21 @media screen and (prefers-color-scheme: dark) {\r
22 @include box-shadow(-5px, 5px, 5px, _palette_light(fg-bold));\r
23 }\r
24 }\r
25 }\r
748286b5 26 &.left,\r
27 &.right {\r
28 max-width: 30%;\r
29\r
30 img {\r
31 width: 100%;\r
32 }\r
33 }\r
34\r
35 &.left {\r
36 float: left;\r
07a590fe 37 margin: 0 1.5em 0.5em 1em;\r
748286b5 38 top: 0.25em;\r
39 }\r
40\r
41 &.right {\r
42 float: right;\r
07a590fe 43 margin: 0 1em 0.5em 1.5em;\r
748286b5 44 top: 0.25em;\r
45 }\r
46\r
47 &.fit {\r
48 display: block;\r
f112ccc8 49 margin: 0 auto _size(element-margin);\r
50 width: 90%;\r
748286b5 51\r
52 img {\r
53 width: 100%;\r
54 }\r
f112ccc8 55 div.picture {\r
56 max-width: 100%;\r
57 height: auto;\r
58 }\r
748286b5 59 }\r
60\r
61 &.main {\r
62 display: block;\r
63 margin: (_size(element-margin) * 1.25) 0;\r
64 width: 100%;\r
65\r
66 img {\r
67 width: 100%;\r
f112ccc8 68 max-width: 100%;\r
69 }\r
70 div.picture {\r
71 max-width: 100%;\r
72 height: auto;\r
748286b5 73 }\r
74\r
75 @include breakpoint('<=small') {\r
76 margin: (_size(element-margin) * 0.75) 0;\r
77 }\r
78 }\r
85782679 79 &.w-full {\r
80 width: 100%;\r
81 }\r
82 &.h-auto {\r
83 height: auto;\r
84 }\r
f945c30b 85 }\r
37ce5147 86 .image.signature {\r
87 &.left,\r
88 &.right {\r
89 max-width: 60%;\r
90 }\r
91 @media screen and (prefers-color-scheme: dark) {\r
92 filter: invert(84%) sepia(12%) saturate(486%) hue-rotate(197deg) brightness(84%) contrast(87%);\r
93 }\r
94 }\r
f945c30b 95\r
96 .circle > img {\r
7e7766c9 97 @include circle(200px, "block");\r
cb4379e1 98 @include box-shadow(-5px, 5px, 5px, _palette_light(fg-bold));\r
99 @media screen and (prefers-color-scheme: dark) {\r
d9849e6a 100 @include box-shadow(-5px, 5px, 5px, _palette_light(fg-bold));\r
cb4379e1 101 }\r
26ee5f4d 102 }\r
103\r
104 video {\r
105 display: block !important;\r
106 &.left {\r
107 float: left;\r
108 margin: 0 1.5em 1.25em 0;\r
109 top: 0.25em;\r
110 }\r
111\r
112 &.right {\r
113 float: right;\r
114 margin: 0 0 1.25em 1.5em;\r
115 top: 0.25em;\r
116 }\r
117\r
118 &.fit {\r
119 display: block;\r
120 margin: 0 0 _size(element-margin) 0;\r
121 width: 100%;\r
122 }\r
123 }\r
b89b070c 124\r
85782679 125 .animate-fade {\r
126 animation: fadeIn 750ms ease-in-out;\r
127 }\r
128\r
b89b070c 129 figure {\r
130 figcaption {\r
131 p {\r
132 text-align: center;\r
133 }\r
134 }\r
06c2e9e4 135 }\r
136 // signature inside single articles\r
137 div#post-signature {\r
138 clear: both;\r
139 overflow: hidden;\r
140 width: 100%;\r
141 margin: 0;\r
142 div#signature {\r
143 margin: 0;\r
144 padding: 0;\r
145 img.signature {\r
146 margin: 0;\r
147 margin-right: 4em;\r
148 width: 350px;\r
149 }\r
150 }\r
abdd02ed 151 }\r
152 .section-blog {\r
153 .spotlights {\r
154 .image {\r
155 max-height: 20em;\r
156 overflow: hidden;\r
157 }\r
158 }\r
f112ccc8 159 }\r
160\r
161 div.picture {\r
162 display: inline-block;\r
b89b070c 163 }