fixed images display inside a figure element, aka when not inside a gallery.

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

diff --git a/assets/sass/components/_image.scss b/assets/sass/components/_image.scss
index 9636a0f..67f156c 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,24 +34,28 @@
 \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
                &.fit {\r
                        display: block;\r
-                       margin: 0 0 _size(element-margin) 0;\r
-                       width: 100%;\r
+                       margin: 0 auto _size(element-margin);\r
+                       width: 90%;\r
 \r
                        img {\r
                                width: 100%;\r
                        }\r
+                       div.picture {\r
+                               max-width: 100%;\r
+                               height: auto;\r
+                       }\r
                }\r
 \r
                &.main {\r
@@ -53,12 +65,32 @@
 \r
                        img {\r
                                width: 100%;\r
+                               max-width: 100%;\r
+                       }\r
+                       div.picture {\r
+                               max-width: 100%;\r
+                               height: auto;\r
                        }\r
 \r
                        @include breakpoint('<=small') {\r
                                margin: (_size(element-margin) * 0.75) 0;\r
                        }\r
                }\r
+               &.w-full {\r
+                       width: 100%;\r
+               }\r
+               &.h-auto {\r
+                       height: auto;\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
@@ -90,10 +122,42 @@
                }\r
        }\r
 \r
+       .animate-fade {\r
+               animation: fadeIn 750ms ease-in-out;\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
+       }\r
+       .section-blog {\r
+               .spotlights {\r
+                       .image {\r
+                               max-height: 20em;\r
+                               overflow: hidden;\r
+                       }\r
+               }\r
+       }\r
+\r
+       div.picture {\r
+               display: inline-block;\r
        }
\ No newline at end of file