✨ feat: add full-width image option to shortcodes

Closes #85
2023-07-05 02:43:07 +02:00
parent 8c5f30556a
commit fd50204e32
9 changed files with 89 additions and 4 deletions
--- a/sass/main.scss
+++ b/sass/main.scss
@@ -120,13 +120,24 @@ body {
 }

 article {
-    max-width: calc(var(--max-layout-width) - 12rem);
+    $base-margin: 6rem;
+
+    max-width: calc(var(--max-layout-width) - 2*$base-margin);
    margin: 0 auto;

    p,
    li {
        font-family: var(--serif-font);
    }
+
+    .full-width {
+        width: auto;
+        height: auto;
+        max-width: calc(100% + 2*$base-margin);
+        margin-left: -$base-margin;
+        margin-right: -$base-margin;
+        display: flex;
+    }
 }

 .section-title {
@@ -254,3 +265,13 @@ p {
        font-size: 20px;
    }
 }
+
+@media only screen and (max-width: 1000px) {
+    article .full-width {
+        width: auto;
+        max-width: none;
+        margin-left: 0;
+        margin-right: 0;
+        display: block;
+    }
+}