added signature in contact page
[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
18 &.left,\r
19 &.right {\r
20 max-width: 30%;\r
21\r
22 img {\r
23 width: 100%;\r
24 }\r
25 }\r
26\r
27 &.left {\r
28 float: left;\r
29 margin: 0 1.5em 1.25em 0;\r
30 top: 0.25em;\r
31 }\r
32\r
33 &.right {\r
34 float: right;\r
35 margin: 0 0 1.25em 1.5em;\r
36 top: 0.25em;\r
37 }\r
38\r
39 &.fit {\r
40 display: block;\r
41 margin: 0 0 _size(element-margin) 0;\r
42 width: 100%;\r
43\r
44 img {\r
45 width: 100%;\r
46 }\r
47 }\r
48\r
49 &.main {\r
50 display: block;\r
51 margin: (_size(element-margin) * 1.25) 0;\r
52 width: 100%;\r
53\r
54 img {\r
55 width: 100%;\r
56 }\r
57\r
58 @include breakpoint('<=small') {\r
59 margin: (_size(element-margin) * 0.75) 0;\r
60 }\r
61 }\r
f945c30b 62 }\r
37ce5147 63 .image.signature {\r
64 &.left,\r
65 &.right {\r
66 max-width: 60%;\r
67 }\r
68 @media screen and (prefers-color-scheme: dark) {\r
69 filter: invert(84%) sepia(12%) saturate(486%) hue-rotate(197deg) brightness(84%) contrast(87%);\r
70 }\r
71 }\r
f945c30b 72\r
73 .circle > img {\r
7e7766c9 74 @include circle(200px, "block");\r
cb4379e1 75 @include box-shadow(-5px, 5px, 5px, _palette_light(fg-bold));\r
76 @media screen and (prefers-color-scheme: dark) {\r
d9849e6a 77 @include box-shadow(-5px, 5px, 5px, _palette_light(fg-bold));\r
cb4379e1 78 }\r
26ee5f4d 79 }\r
80\r
81 video {\r
82 display: block !important;\r
83 &.left {\r
84 float: left;\r
85 margin: 0 1.5em 1.25em 0;\r
86 top: 0.25em;\r
87 }\r
88\r
89 &.right {\r
90 float: right;\r
91 margin: 0 0 1.25em 1.5em;\r
92 top: 0.25em;\r
93 }\r
94\r
95 &.fit {\r
96 display: block;\r
97 margin: 0 0 _size(element-margin) 0;\r
98 width: 100%;\r
99 }\r
100 }\r
b89b070c 101\r
102 figure {\r
103 figcaption {\r
104 p {\r
105 text-align: center;\r
106 }\r
107 }\r
108 }