correct for wp img alignment classes on blog-post and default-page contexts

Author: possumbilities

src/singular.php

@@ -52,6 +52,8 @@
 
 </header>
 
+<div class="content"
+
 <?php if (!class_exists('ACF')): ?>
 
 <!-- display raw post_meta, if ACF not installed & activated -->
@@ -117,6 +119,8 @@
 ));
 ?>
 
+</div>
+
 <?php if ( $query->have_posts() ) : ?>
 
 <article class="posts related">

src/style.css

@@ -608,9 +608,140 @@ main nav.pagination ul li span.current {
 
 /* patches */
 
-main > article figure img, main > figure img {
+/* main > article figure img, main > figure img {
   width: 100%;
-}
+} */
+ 
 main .content ul, main .content ol {
     line-height: 150%;
 }
+
+/* Classic Editor TinyMCE WYSIWYG editor image alignment  */
+/* TODO: port in alignleft and alignright rules here as well? */
+main figure:has(img.aligncenter) {
+  width: 100%;
+  margin-left: 0;
+}
+
+/* Classic Editor TinyMCE WYSIWYG editor image alignment, previous theme's markukp  */
+/* presently <figure> */
+div[id^="attachment_"] {
+  width: 120%;
+  margin: 0;
+  margin-left: -10%;
+  margin-bottom: 3em;
+  padding: 0;
+  float: none;
+}
+
+/* presently <img> */
+div[id^="attachment_"] img[class^="wp-image"]:not([width]) {
+  width: 100%;
+}
+
+/* presently <span class="attribution> */
+div[id^="attachment_"] p[id^="caption-attachment-"] {
+  display: block;
+  margin-top: 1em;
+  font-size: 1em;
+}
+
+div[id^="attachment_"].alignleft {
+  margin-top: 2em;
+  margin-right: 2em;
+  margin-left: -10%;
+  width: 50%;
+  float: left;
+}
+
+div[id^="attachment_"].alignleft:after {
+  display: block;
+  content: '';
+  height: 3em;
+  clear: both;
+}
+
+div[id^="attachment_"].aligncenter {
+  width: 100%;
+
+  margin-left: 0;
+}
+
+div[id^="attachment_"].alignright {
+  margin-top: 2em;
+  margin-right: -10%;
+  margin-left: 2em;
+  width: 50%;
+  float: right;
+}
+
+div[id^="attachment_"].alignright:after {
+  display: block;
+  content: '';
+  height: 2em;
+  clear: both;
+}
+
+main .content div[id^="attachment_"].alignleft {
+  margin-left: 0;
+  width: 40%;
+}
+
+main .content div[id^="attachment_"].alignright {
+  margin-right: 0;
+  width: 40%;
+}
+
+main .content figure:has(img.alignleft), .blog-post main figure:has(img.alignleft) {
+  margin-right: 2em;
+  margin-left: 0;
+  width: 40%;
+  float: left;
+}
+
+main .content figure:has(img.alignright), .blog-post main figure:has(img.alignright) {
+  margin-right: 0;
+  margin-left: 2em;
+  width: 40%;
+  float: right;
+}
+
+@media (max-width:400px) {
+
+  div[id^="attachment_"].alignleft {
+    width: 100%;
+    float: none;
+    margin: 0;
+  }
+
+  div[id^="attachment_"].alignright {
+    width: 100%;
+    float: none;
+    margin: 0;
+  }
+
+  main .content div[id^="attachment_"].alignleft {
+    width: 100%;
+    float: none;
+    margin: 0;
+  }
+  
+  main .content div[id^="attachment_"].alignright {
+    width: 100%;
+    float: none;
+    margin: 0;
+  }
+
+  main .content figure:has(img.alignleft), .blog-post main figure:has(img.alignleft) {
+    width: 100%;
+    float: none;
+    margin: 0;
+  }
+
+  main .content figure:has(img.alignright), .blog-post main figure:has(img.alignright) {
+    width: 100%;
+    float: none;
+    margin: 0;
+  }
+
+}