still working on the curriculum page. Added signature to every post. Added categories...

[theme-danix.xyz.git] / assets / sass / components / _image.scss

diff --git a/assets/sass/components/_image.scss b/assets/sass/components/_image.scss
index b77a874..6b6fdb3 100644 (file)
--- a/assets/sass/components/_image.scss
+++ b/assets/sass/components/_image.scss
@@ -15,6 +15,14 @@
                        display: block;\r
                }\r
 \r
+               &.shadow {\r
+                       img {\r
+                               @include box-shadow(-5px, 5px, 5px, _palette_light(fg-bold));\r
+                               @media screen and (prefers-color-scheme: dark) {\r
+                                       @include box-shadow(-5px, 5px, 5px, _palette_light(fg-bold));\r
+                               }\r
+                       }\r
+               }\r
                &.left,\r
                &.right {\r
                        max-width: 30%;\r
@@ -26,13 +34,13 @@
 \r
                &.left {\r
                        float: left;\r
-                       margin: 0 1.5em 1.25em 0;\r
+                       margin: 0 1.5em 0.5em 1em;\r
                        top: 0.25em;\r
                }\r
 \r
                &.right {\r
                        float: right;\r
-                       margin: 0 0 1.25em 1.5em;\r
+                       margin: 0 1em 0.5em 1.5em;\r
                        top: 0.25em;\r
                }\r
 \r
@@ -60,7 +68,65 @@
                        }\r
                }\r
        }\r
+       .image.signature {\r
+               &.left,\r
+               &.right {\r
+                       max-width: 60%;\r
+               }\r
+               @media screen and (prefers-color-scheme: dark) {\r
+                       filter: invert(84%) sepia(12%) saturate(486%) hue-rotate(197deg) brightness(84%) contrast(87%);\r
+               }\r
+       }\r
 \r
        .circle > img {\r
-               @include circle(200px, "block")\r
+               @include circle(200px, "block");\r
+               @include box-shadow(-5px, 5px, 5px, _palette_light(fg-bold));\r
+               @media screen and (prefers-color-scheme: dark) {\r
+                       @include box-shadow(-5px, 5px, 5px, _palette_light(fg-bold));\r
+               }\r
+       }\r
+\r
+       video {\r
+               display: block !important;\r
+               &.left {\r
+                       float: left;\r
+                       margin: 0 1.5em 1.25em 0;\r
+                       top: 0.25em;\r
+               }\r
+\r
+               &.right {\r
+                       float: right;\r
+                       margin: 0 0 1.25em 1.5em;\r
+                       top: 0.25em;\r
+               }\r
+\r
+               &.fit {\r
+                       display: block;\r
+                       margin: 0 0 _size(element-margin) 0;\r
+                       width: 100%;\r
+               }\r
+       }\r
+\r
+       figure {\r
+               figcaption {\r
+                       p {\r
+                               text-align: center;\r
+                       }\r
+               }\r
+       }\r
+       // signature inside single articles\r
+       div#post-signature {\r
+               clear: both;\r
+               overflow: hidden;\r
+               width: 100%;\r
+               margin: 0;\r
+               div#signature {\r
+                       margin: 0;\r
+                       padding: 0;\r
+                       img.signature {\r
+                               margin: 0;\r
+                               margin-right: 4em;\r
+                               width: 350px;\r
+                       }\r
+               }\r
        }
\ No newline at end of file