Added CSS Markdown class for right-aligned columns.

hibbitts-design · Jan 20, 2024 · 830eb0c · 830eb0c
1 parent 781e71e
commit 830eb0c
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 1 deletion.
diff --git a/README.md b/README.md
@@ -360,6 +360,35 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit.
 </div>
 ```
 
+```html
+<div class="row reverse-columns">
+<div class="column">
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+
+</div>
+<div class="column">
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+
+</div>
+</div>
+```
+
+```html
+<div class="row">
+<div class="column">
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+
+</div>
+<div class="column-right">
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+
+</div>
+</div>
+
 `video-container-4by3`  
 
 ```html

diff --git a/docs/assets/css/theme.css b/docs/assets/css/theme.css
@@ -387,10 +387,20 @@
   width: 50%;
 }
 
+.markdown-section .column-right {
+  float: right;
+  padding-left: 1rem;
+  width: 50%;
+}
+
 .markdown-section .column img {
   padding-top: .35rem;
 }
 
+.markdown-section .column-right img {
+  padding-top: .35rem;
+}
+
 .markdown-section .reverse-columns .column {
   float: right;
 }
@@ -402,8 +412,10 @@
 }
 
 @media screen and (max-width:800px) {
-  .markdown-section .column {
+  .markdown-section .column, .markdown-section .column-right {
     width: 100%;
+    padding-right: 0rem;
+    padding-left: 0rem;
   }
 
   .markdown-section .image-75, .markdown-section .image-50, .markdown-section .image-25, .markdown-section .image-75-border, .markdown-section .image-50-border, .markdown-section .image-25-border {