fixed images display on smaller screens
[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
1bb5bdce 54 height: auto;\r
748286b5 55 }\r
f112ccc8 56 div.picture {\r
1bb5bdce 57 width: 100%;\r
f112ccc8 58 max-width: 100%;\r
f112ccc8 59 }\r
748286b5 60 }\r
61\r
62 &.main {\r
63 display: block;\r
64 margin: (_size(element-margin) * 1.25) 0;\r
65 width: 100%;\r
66\r
67 img {\r
68 width: 100%;\r
1bb5bdce 69 height: auto;\r
f112ccc8 70 max-width: 100%;\r
71 }\r
72 div.picture {\r
1bb5bdce 73 width: 100%;\r
f112ccc8 74 max-width: 100%;\r
748286b5 75 }\r
76\r
77 @include breakpoint('<=small') {\r
78 margin: (_size(element-margin) * 0.75) 0;\r
79 }\r
80 }\r
85782679 81 &.w-full {\r
82 width: 100%;\r
83 }\r
84 &.h-auto {\r
85 height: auto;\r
86 }\r
f945c30b 87 }\r
37ce5147 88 .image.signature {\r
89 &.left,\r
90 &.right {\r
91 max-width: 60%;\r
92 }\r
93 @media screen and (prefers-color-scheme: dark) {\r
94 filter: invert(84%) sepia(12%) saturate(486%) hue-rotate(197deg) brightness(84%) contrast(87%);\r
95 }\r
96 }\r
f945c30b 97\r
98 .circle > img {\r
7e7766c9 99 @include circle(200px, "block");\r
cb4379e1 100 @include box-shadow(-5px, 5px, 5px, _palette_light(fg-bold));\r
101 @media screen and (prefers-color-scheme: dark) {\r
d9849e6a 102 @include box-shadow(-5px, 5px, 5px, _palette_light(fg-bold));\r
cb4379e1 103 }\r
26ee5f4d 104 }\r
105\r
106 video {\r
107 display: block !important;\r
108 &.left {\r
109 float: left;\r
110 margin: 0 1.5em 1.25em 0;\r
111 top: 0.25em;\r
112 }\r
113\r
114 &.right {\r
115 float: right;\r
116 margin: 0 0 1.25em 1.5em;\r
117 top: 0.25em;\r
118 }\r
119\r
120 &.fit {\r
121 display: block;\r
122 margin: 0 0 _size(element-margin) 0;\r
123 width: 100%;\r
124 }\r
125 }\r
b89b070c 126\r
85782679 127 .animate-fade {\r
128 animation: fadeIn 750ms ease-in-out;\r
129 }\r
130\r
b89b070c 131 figure {\r
132 figcaption {\r
133 p {\r
134 text-align: center;\r
135 }\r
136 }\r
06c2e9e4 137 }\r
138 // signature inside single articles\r
139 div#post-signature {\r
140 clear: both;\r
141 overflow: hidden;\r
142 width: 100%;\r
143 margin: 0;\r
144 div#signature {\r
145 margin: 0;\r
146 padding: 0;\r
147 img.signature {\r
148 margin: 0;\r
149 margin-right: 4em;\r
150 width: 350px;\r
151 }\r
152 }\r
abdd02ed 153 }\r
154 .section-blog {\r
155 .spotlights {\r
156 .image {\r
157 max-height: 20em;\r
158 overflow: hidden;\r
159 }\r
160 }\r
f112ccc8 161 }\r
162\r
163 div.picture {\r
164 display: inline-block;\r
b89b070c 165 }