Merge pull request #2653 from ZhenShuo2021/fix/gallery

🐛 Fix: gallery and carousel no width

assets/css/compiled/main.css

@@ -9,7 +9,6 @@
     --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
       "Courier New", monospace;
     --spacing: 0.25rem;
-    --container-2xs: 18rem;
     --container-xs: 20rem;
     --container-xl: 36rem;
     --container-3xl: 48rem;
@@ -2847,11 +2846,6 @@
       margin-top: calc(var(--spacing) * 0);
     }
   }
-  .lg\:ml-auto {
-    @media (width >= 1024px) {
-      margin-left: auto;
-    }
-  }
   .lg\:block {
     @media (width >= 1024px) {
       display: block;
@@ -2887,11 +2881,6 @@
       width: auto;
     }
   }
-  .lg\:max-w-2xs {
-    @media (width >= 1024px) {
-      max-width: var(--container-2xs);
-    }
-  }
   .lg\:max-w-7xl {
     @media (width >= 1024px) {
       max-width: var(--container-7xl);
@@ -4172,6 +4161,16 @@ pre {
 .thumbnail-shadow {
   box-shadow: 5px 5px 20px 1px rgba(0, 0, 0, 0.3);
 }
+@media (width < 853px) {
+  .width-patch {
+    width: 90vw;
+  }
+}
+@media (width >= 853px) {
+  .width-patch {
+    width: 65ch;
+  }
+}
 .anchor {
   display: block;
   position: relative;

assets/css/main.css

@@ -203,6 +203,18 @@ pre {
   box-shadow: 5px 5px 20px 1px rgba(0, 0, 0, 0.3);
 }
 
+/* placeholder for gallery/carousel */
+@variant max-md {
+  .width-patch {
+    width: 90vw;
+  }
+}
+@variant min-md {
+  .width-patch {
+    width: 65ch;
+  }
+}
+
 .anchor {
   display: block;
   position: relative;

layouts/shortcodes/carousel.html

@@ -19,6 +19,7 @@
 {{ end }}
 
 
+<div class="width-patch"></div>
 <div
   id="{{ $id }}"
   class="relative"
@@ -49,9 +50,7 @@
         data-twe-carousel-item
         style="transition-duration: {{ $interval }}ms;"
         {{ if eq $index 0 }}data-twe-carousel-active{{ end }}>
-        <div
-          class="single_hero_background"
-          style="aspect-ratio: {{ $aspectx }} / {{ $aspecty }};">
+        <div class="single_hero_background" style="aspect-ratio: {{ $aspectx }} / {{ $aspecty }};">
           <img
             src="{{ $image.RelPermalink }}"
             class="block absolute top-0 object-cover w-full h-full not-prose nozoom"

layouts/shortcodes/gallery.html

@@ -26,6 +26,7 @@
 {{ end -}}
 
 
+<div class="width-patch"></div>
 <div id="{{- $id -}}" class="gallery">
   {{ $content | safeHTML -}}
 </div>