still working on the curriculum page. Added signature to every post. Added categories...
[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
49 margin: 0 0 _size(element-margin) 0;\r
50 width: 100%;\r
51\r
52 img {\r
53 width: 100%;\r
54 }\r
55 }\r
56\r
57 &.main {\r
58 display: block;\r
59 margin: (_size(element-margin) * 1.25) 0;\r
60 width: 100%;\r
61\r
62 img {\r
63 width: 100%;\r
64 }\r
65\r
66 @include breakpoint('<=small') {\r
67 margin: (_size(element-margin) * 0.75) 0;\r
68 }\r
69 }\r
f945c30b 70 }\r
37ce5147 71 .image.signature {\r
72 &.left,\r
73 &.right {\r
74 max-width: 60%;\r
75 }\r
76 @media screen and (prefers-color-scheme: dark) {\r
77 filter: invert(84%) sepia(12%) saturate(486%) hue-rotate(197deg) brightness(84%) contrast(87%);\r
78 }\r
79 }\r
f945c30b 80\r
81 .circle > img {\r
7e7766c9 82 @include circle(200px, "block");\r
cb4379e1 83 @include box-shadow(-5px, 5px, 5px, _palette_light(fg-bold));\r
84 @media screen and (prefers-color-scheme: dark) {\r
d9849e6a 85 @include box-shadow(-5px, 5px, 5px, _palette_light(fg-bold));\r
cb4379e1 86 }\r
26ee5f4d 87 }\r
88\r
89 video {\r
90 display: block !important;\r
91 &.left {\r
92 float: left;\r
93 margin: 0 1.5em 1.25em 0;\r
94 top: 0.25em;\r
95 }\r
96\r
97 &.right {\r
98 float: right;\r
99 margin: 0 0 1.25em 1.5em;\r
100 top: 0.25em;\r
101 }\r
102\r
103 &.fit {\r
104 display: block;\r
105 margin: 0 0 _size(element-margin) 0;\r
106 width: 100%;\r
107 }\r
108 }\r
b89b070c 109\r
110 figure {\r
111 figcaption {\r
112 p {\r
113 text-align: center;\r
114 }\r
115 }\r
06c2e9e4 116 }\r
117 // signature inside single articles\r
118 div#post-signature {\r
119 clear: both;\r
120 overflow: hidden;\r
121 width: 100%;\r
122 margin: 0;\r
123 div#signature {\r
124 margin: 0;\r
125 padding: 0;\r
126 img.signature {\r
127 margin: 0;\r
128 margin-right: 4em;\r
129 width: 350px;\r
130 }\r
131 }\r
b89b070c 132 }