Only modify image size as opposed to entire image group

WPBuddy · Feb 7, 2020 · 0d90b91 · 0d90b91
1 parent 7a98075
commit 0d90b91
Show file tree

Hide file tree

Showing 6 changed files with 66 additions and 30 deletions.
diff --git a/css/editor-style.min.css b/css/editor-style.min.css
diff --git a/css/gutenberg.css b/css/gutenberg.css
diff --git a/css/gutenberg.min.css b/css/gutenberg.min.css
diff --git a/css/style.min.css b/css/style.min.css
diff --git a/homepages/assets/css/single.min.css b/homepages/assets/css/single.min.css
diff --git a/less/inc/blocks.less b/less/inc/blocks.less
@@ -52,23 +52,44 @@
     }
   }
   &.alignfull {
-    figcaption {
-      // Constrain caption width within Largo's main column
-      // https://github.com/INN/largo/issues/1773
+    width: 100%;
+    margin-left: 0%;
+    transform: unset;
+    max-width: 100%;
+    &:not(.navis-slideshow) {
       .classic & {
-      }
-      .normal & {
-        padding-left: ~"calc( 2.5vw + 17.021276594%)";
-        padding-right: ~"calc( 2.5vw + 17.021276594%)";
-        @media @tabletDown {
-          padding-left: ~"calc( 2.5vw + 6.38297872% )";
-          padding-right: ~"calc( 2.5vw + 6.38297872% )";
-        }
-        @media @mobile {
-          padding-left: 2.5vw;
-          padding-right: 2.5vw;
+        img {
+
+          // because #page does not have box-sizing: border-box but does have padding 0 2.5%
+          // 1170px * 1.05 = 1228.5px
+          //
+          // 1170px: the max-width of #page;
+          // 2.5vw: padding-left and padding-right on #page when #page is whole width of viewport
+          // 24px: padding-left on #sidebar.widget
+          // 2.12765957%: margin-left on #sidebar since it is a .span4
+          // 1170px * 2.12765957%: acceptable bleed from #content into the gutter of the sidebar, at that viewport width
+          // 95vw * 2.12765957%: acceptable bleed, below that viewport width
+          @media ( min-width: 1229px ) {
+            width: ~"calc( 100% + ( 0.5 * ( 100vw - 1170px ) ) + ( 1170px * 0.0212765957 ) )"; // the column width plus the left margin on #page, plus the bleed figure
+            margin-left: ~"calc( -0.5 * ( 100vw - 1170px ) )"; // the left margin on #page, as a negative.
+            transform: none;
+          }
+          @media ( max-width: 1228px ) {
+            width: ~"calc( 100% + 2.5vw + ( 95vw * 0.0212765957 ) )"; // the column width plus the left margin on #page, plus the bleed figure
+            margin-left: -2.5vw; // the left margin on #page, as a negative.
+            transform: none;
+          }
+          @media ( max-width: 768px ) {
+            width: 100vw;
+          }
         }
       }
+      img {
+        width: 100vw;
+        margin-left: 50%;
+        transform: translateX(-50%);
+        max-width: none;
+      }
     }
   }
 }