added box-shadow mixin. Added shadow to the gravatar in homepage.
[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
63\r
64 .circle > img {\r
7e7766c9 65 @include circle(200px, "block");\r
66 @include box-shadow(-5px, 5px, 5px, _palette(fg-bold));\r
26ee5f4d 67 }\r
68\r
69 video {\r
70 display: block !important;\r
71 &.left {\r
72 float: left;\r
73 margin: 0 1.5em 1.25em 0;\r
74 top: 0.25em;\r
75 }\r
76\r
77 &.right {\r
78 float: right;\r
79 margin: 0 0 1.25em 1.5em;\r
80 top: 0.25em;\r
81 }\r
82\r
83 &.fit {\r
84 display: block;\r
85 margin: 0 0 _size(element-margin) 0;\r
86 width: 100%;\r
87 }\r
88 }\r
b89b070c 89\r
90 figure {\r
91 figcaption {\r
92 p {\r
93 text-align: center;\r
94 }\r
95 }\r
96 }