style feature-explanations

arc42 · Dec 7, 2024 · c81fcbd · c81fcbd
1 parent 2bfba94
commit c81fcbd
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 6 deletions.
diff --git a/docs/_pages/index.md b/docs/_pages/index.md
@@ -53,25 +53,37 @@ excerpt: "**For all those who like handouts - and page numbers even more so!**"
         <div class="box-container">
 
         <div class="box box--primary box-third">
-            <img src="assets/images/functions/page-number.png" alt="page-numbering">
+            <img src="assets/images/functions/page-number.png" alt="page-numbering" class="img-half">
+            <h5>Page Numbers</h5>
+            <p>Description of this feature</p>
         </div>
 
         <div class="box box--primary box-third">
-            <img src="assets/images/functions/running-header.png" alt="running-head">
+            <img src="assets/images/functions/running-header.png" alt="running-head" class="img-half">
+            <h5>Running Header</h5>
+            <p>Description of this feature</p>
         </div>
 
         <div class="box box--primary box-third">
-            <img src="assets/images/functions/mascot.png" alt="we have a sweet mascot">
+            <img src="assets/images/functions/mascot.png" alt="we have a sweet mascot" class="img-half">
+            <h5>Add Personal Touch</h5>
+            <p>Description of this feature</p>
         </div>
 
         <div class="box box--primary box-third">
-            <img src="assets/images/functions/chapter-number.png" alt="chapter numbers">
+            <img src="assets/images/functions/chapter-number.png" alt="chapter numbers" class="img-half">
+            <h5>Chapter Number</h5>
+            <p>Description of this feature</p>
         </div>
         <div class="box box--primary box-third">
-            <img src="assets/images/functions/toc.png" alt="table of contents">
+            <img src="assets/images/functions/toc.png" alt="table of contents" class="img-half">
+            <h5>Table of Contents</h5>
+            <p>Description of this feature</p>
         </div>
         <div class="box box--primary box-third">
-            <img src="assets/images/functions/merge.png" alt="merge documents">
+            <img src="assets/images/functions/merge.png" alt="merge documents" class="img-half">
+            <h5>Merge</h5>
+            <p>Description of this feature</p>
         </div>
     </div>
 

diff --git a/docs/assets/css/custom-styles.css b/docs/assets/css/custom-styles.css
@@ -19,6 +19,11 @@
 }
 
 
+.img-half {
+    width: 40%;
+    margin-top: 0.7rem;
+}
+
-Original file line number
+Diff line change
@@ Expand Up / @@ -19,6 +19,11 @@ @@
     }
+    .img-half {
+        width: 40%;
+        margin-top: 0.7rem;
+    }
@@ Expand Down @@