Merge branch 'hibbitts-design:main' into main

CHANGELOG.md

@@ -1,5 +1,22 @@
 # Changelog
 
+## [v1.2.13](https://github.com/hibbitts-design/docsify-open-course-starter-kit/releases/tag/v1.2.13)
+### XX/XX/2024
+
+**Improved:**
+* Add ability to define custom colors for badges (with thanks to @cmadland for the example use of colored badges)
+* Updated ReadMe
+
+## [v1.2.12](https://github.com/hibbitts-design/docsify-open-course-starter-kit/releases/tag/v1.2.12)
+### 02/09/2024
+
+**New:**
+* Added CSS Markdown class for right-aligned columns `column-right`
+* Added CSS Markdown class for full width background gradient header image (`header-image-fade-full-width`)
+
+**Improved:**   
+* ReadMe updated
+
 ## [v1.2.11](https://github.com/hibbitts-design/docsify-open-course-starter-kit/releases/tag/v1.2.11)
 ### 01/18/2024
 

README.md

@@ -223,6 +223,14 @@ For example, here is a [Docsify Open Course Site hosted within a Canvas course](
 <span class='badge'> Tue Jun 12th 11:59pm PDT</span>
 ```
 
+```html
+<span class='badge' style='--badge-bg-color: #0164db;'> Tue Jun 12th 11:59pm PDT</span>
+```
+
+```html
+<span class='badge' style='--badge-bg-color: #e7c500; --badge-text-color: #000;'> Tue Jun 12th 11:59pm PDT</span>
+```
+
 ```html
 <span class='badge'> [Tue May 16 2:30pm PT](https://www.timeanddate.com/worldclock/fixedtime.html?msg=CMPT-363+Blackboard+Mini-lectures+and+Activities&iso=20220516T1430&p1=256&ah=1&am=50)</span>  
 ```
@@ -275,6 +283,12 @@ For example, here is a [Docsify Open Course Site hosted within a Canvas course](
 ![Photo of Mountain](images/mountain.jpg ':class=header-image-fade')
 ```
 
+`header-image-fade-full-width` (suggested size of 1200px to 2000px, and display of Table of Contents is not available)  
+
+```markdown
+![Photo of Mountain](images/mountain.jpg ':class=header-image-fade-full-width')
+```
+
 `header-image-full-width` (suggested size of 1200px to 2000px width and 400px to 600px height, and display of Table of Contents is not available)  
 
 ```markdown
@@ -356,6 +370,36 @@ 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

docs/assets/css/theme.css

@@ -155,8 +155,9 @@
 }
 
 .markdown-section .badge {
-  color: var(--base-background-color);
-  background-color: color-mix(in srgb, var(--base-color) 70%, transparent);
+  color: var(--badge-text-color, #FFFFFF); /* Default text color */
+  background-color: var(--badge-bg-color, color-mix(in srgb, var(--base-color) 70%, transparent)); /* Default background */
+
   display: inline-block;
   padding: .25em .4em .25em .4em;
   font-family: -apple-system, "Segoe UI", "Helvetica Neue", sans-serif;
@@ -173,7 +174,7 @@
 }
 
 .markdown-section .badge a {
-  color: var(--base-background-color)!important;
+  color: var(--badge-text-color, #FFFFFF); /* Default text color */
   text-decoration: none !important;
 }
 
@@ -304,10 +305,20 @@
   z-index: -1;
 }
 
-@media screen and (max-width: 980px) {
-  .markdown-section .header-image-fade {
-    top: -20px;
-  }
+/* CSS currently only works with sidebar and standalone pages */
+.markdown-section .header-image-fade-full-width {
+  margin-top: -2rem;
+  left: 50%;
+  right: 50%;
+  margin-left: -50vw;
+  margin-right: -50vw;
+  position: absolute;
+  width: 100vw;
+  max-width: 100vw;
+  -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
+  mask-image: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0));
+  opacity: 0.4;
+  z-index: -1;
 }
 
 /* CSS currently only works with sidebar and standalone pages */
@@ -387,10 +398,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 +423,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 {