markdown in home, add installation placeholders, move styles to css file

arc42 · Dec 5, 2024 · a3172f3 · a3172f3
1 parent 618ab0c
commit a3172f3
Show file tree

Hide file tree

Showing 3 changed files with 94 additions and 49 deletions.
diff --git a/docs/_includes/page__hero.html b/docs/_includes/page__hero.html
@@ -19,10 +19,10 @@
 {% assign image_description = image_description | markdownify | strip_html | strip_newlines | escape_once %}
 
 <div class="page__hero{% if page.header.overlay_color or page.header.overlay_image %}--overlay{% endif %}"
-     style="background: linear-gradient(to right, #1976d2, #d5eaf6); height: 80vh; background-size: cover; display: flex; flex-direction: column; justify-content: center; align-items: center;">
+     style="background: linear-gradient(to right, #1976d2, #d5eaf6); height: 60vh; background-size: cover; display: flex; flex-direction: column; justify-content: center; align-items: center;">
   {% if page.header.overlay_color or page.header.overlay_image %}
   <div class="wrapper">
-    <h1 id="page-title" class="page__title top-margin black" itemprop="headline">
+    <h1 id="page-title" class="page__title top-margin-header black" itemprop="headline">
       {{ page.title | default: site.title | markdownify | remove: "<p>" | remove: "</p>" }}
     </h1>
     {% if page.header.show_overlay_excerpt != false and page.excerpt %}

diff --git a/docs/_pages/index.html → docs/_pages/index.md b/docs/_pages/index.html → docs/_pages/index.md
@@ -17,47 +17,7 @@
 excerpt: "**For all those who like handouts - and page numbers even more so!**"
 ---
 
-<style>
-
-    .container {
-        display: flex;
-        flex-wrap: wrap;
-        align-items: center;
-        padding: 20px;
-    }
-
-    .logo {
-        flex: 0 0 auto;
-        margin-right: 20px;
-    }
-
-    .logo img {
-        max-width: 100px;
-        height: auto;
-    }
-
-    .text {
-        flex: 1 1 auto;
-        font-size: 1.2em;
-        color: #333;
-    }
-
-    @media (max-width: 600px) {
-        .container {
-            text-align: center;
-            flex-direction: column;
-        }
-
-        .logo {
-            margin-right: 0;
-            margin-bottom: 10px;
-        }
-
-        .text {
-            font-size: 1em;
-        }
-    }
-</style>
+
 
 <section>
 
@@ -126,6 +86,26 @@ <h4>Feature 2</h4>
 
     <h1>Installation</h1>
 
+    <div class="box-container">
+
+        <div class="box box--primary box-third">
+            <h4><i class="fab fa-apple"></i> MacOS</h4>
+            <p>How to install on MacOS</p>
+        </div>
+
+        <div class="box box--primary box-third">
+            <h4><i class="fab fa-windows"></i> Windows</h4>
+            <p>How to install on Windows</p>
+        </div>
+
+        <div class="box box--primary box-third">
+            <h4><i class="fab fa-linux"></i> Linux</h4>
+            <p>How to install on Linux</p>
+        </div>
+
+    </div>
+
+
 
 </section>
 
@@ -135,14 +115,10 @@ <h1>Installation</h1>
 <br>
 
 
-<section id="usage">
+<section id="usage"></section>
 
 <h1>Usage</h1>
 
-<div class="dummyt" markdown="1">
-
-## Usage
-
 | **Command/Config Name**  | **Long Command**            | **Short Command**       | **Description**    |
 |--------------------------|----------------------------|--------------------------|--------------------|
 | **Help**                 | `--help`                   | `-h`, `-?`, `?`         | Displays a list of supported commands and their usage. Example: `pdfminion --help`                                                |
@@ -165,7 +141,6 @@ <h1>Usage</h1>
 | **Page Count Prefix**    | `--page-count-prefix <text>`|                          | Sets prefix for total page count. Default: "of". Example: `pdfminion --page-count-prefix "out of"`                               |
 
 
-</section>
 
 <br>
 <hr class="section-sep">

diff --git a/docs/assets/css/custom-styles.css b/docs/assets/css/custom-styles.css
@@ -2,6 +2,10 @@
     margin-top: 2rem !important;
 }
 
+.top-margin-header {
+    margin-top: 6rem !important;
+}
+
 .black {
     color: black !important;
 }
@@ -13,3 +17,69 @@
     margin-top: 6rem;
     width: 150px;
 }
+
+
+
+
+
+/* STYLES YOU ADDED AS STYLE TAG */
+
+
+.container {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    padding: 20px;
+}
+
+.logo {
+    flex: 0 0 auto;
+    margin-right: 20px;
+}
+
+.logo img {
+    max-width: 100px;
+    height: auto;
+}
+
+.text {
+    flex: 1 1 auto;
+    font-size: 1.2em;
+    color: #333;
+}
+
+@media (max-width: 600px) {
+    .container {
+        text-align: center;
+        flex-direction: column;
+    }
+
+    .logo {
+        margin-right: 0;
+        margin-bottom: 10px;
+    }
+
+    .text {
+        font-size: 1em;
+    }
+}
+
+
+
+
+
+/* TABLE STYLES */
+
+table {
+    border-collapse: collapse;
+}
+
+th, td {
+    border: 1px solid grey;
+    padding: 10px;
+    text-align: left;
+}
+
+th {
+    border-bottom: 2px solid black;
+}