Improve responsiveness of css to mobile phone screens

5 files changed, 44 insertions, 6 deletions

diff --git a/html/assets/style.css b/html/assets/style.css
index d5121fb..b550d4f 100644
--- a/html/assets/style.css
+++ b/html/assets/style.css
@@ -77,6 +77,7 @@ blockquote
     display:block;
     margin: auto;
     font-size: 72px;
+    word-break: break-word;
 }
 
 .title-header-container
@@ -117,6 +118,16 @@ blockquote
     margin-right: 5px;
 }
 
+.plant-status-text 
+{
+    margin: auto;
+}
+.plant-status-text p 
+{
+    margin: auto;
+    padding-top: 10px;
+}
+
 .page-info-date
 {
     margin-left: 10px;
@@ -180,16 +191,17 @@ main
 {
     display: flex;
     flex-wrap: wrap;
+    justify-content: center;
 }
 
 .note-box 
 {
-   max-width: 400px;
+   max-width: 300px;
    max-height: 500px;
    background-color: #FCFBF7;
    margin-right: 20px;
-   height: 100%;
-   width: 400px;
+   height: fit-content;
+   width: 300px;
    margin-bottom: 20px;
    border-radius: 5px;
    border: 2px solid #E6E3E1;
@@ -216,7 +228,7 @@ main
 
 .note-box img 
 {
-    max-width: 380px;
+    max-width:280px;
     max-height: 480px;
     margin-left: auto;
     margin-right: auto;
@@ -232,6 +244,24 @@ main
     border-radius: 5px;
 }
 
+@media (max-width: 600px)
+{
+    .page-self-image
+    {
+        float: none;
+    }
+
+    .page-info-container p
+    {
+        margin-top: 2px;
+    }
+
+    .page-info-date-container
+    {
+        display: initial;
+    }
+}
+
 .animated-box::before 
 {
     top: 0;
@@ -313,7 +343,7 @@ ul.task-list{list-style: none;}
 pre > code.sourceCode { white-space: pre; position: relative; }
 pre > code.sourceCode > span { display: inline-block; line-height: 1.25; }
 pre > code.sourceCode > span:empty { height: 1.2em; }
-.sourceCode { overflow: visible; }
+.sourceCode { overflow: scroll; }
 code.sourceCode > span { color: inherit; text-decoration: inherit; }
 div.sourceCode { margin: 1em 0; }
 pre.sourceCode { margin: 0; }
diff --git a/html/notes/baremetal-risc-v.html b/html/notes/baremetal-risc-v.html
index f9cc288..03ac433 100644
--- a/html/notes/baremetal-risc-v.html
+++ b/html/notes/baremetal-risc-v.html
@@ -28,8 +28,10 @@
         <div class="page-info-container">
                     <div class="plant-status">
                     <img src="/assets/budding.svg">
+                    <div class="plant-status-text">
                     <p>budding</p>
                     </div>
+                    </div>
                 <div class="page-info-date-container">
             <p class="page-info-date">Published: 2022-06-09</p>
             <p class="page-info-date">Last Edited: 2022-06-09</p>
diff --git a/html/notes/digital_garden.html b/html/notes/digital_garden.html
index 6410f73..9f41114 100644
--- a/html/notes/digital_garden.html
+++ b/html/notes/digital_garden.html
@@ -28,8 +28,10 @@
         <div class="page-info-container">
                     <div class="plant-status">
                     <img src="/assets/seadling.svg">
+                    <div class="plant-status-text">
                     <p>seadling</p>
                     </div>
+                    </div>
                 <div class="page-info-date-container">
             <p class="page-info-date">Published: 2022-10-30</p>
             <p class="page-info-date">Last Edited: 2022-11-01</p>
diff --git a/html/notes/rasterizing-triangles.html b/html/notes/rasterizing-triangles.html
index c6c5f15..8bad785 100644
--- a/html/notes/rasterizing-triangles.html
+++ b/html/notes/rasterizing-triangles.html
@@ -28,8 +28,10 @@
         <div class="page-info-container">
                     <div class="plant-status">
                     <img src="/assets/budding.svg">
+                    <div class="plant-status-text">
                     <p>budding</p>
                     </div>
+                    </div>
                 <div class="page-info-date-container">
             <p class="page-info-date">Published: 2022-04-03</p>
             <p class="page-info-date">Last Edited: 2022-10-30</p>
diff --git a/tools/note.lua b/tools/note.lua
index 3ec9a51..330a24e 100644
--- a/tools/note.lua
+++ b/tools/note.lua
@@ -10,7 +10,9 @@ function Pandoc(doc)
     local text = pandoc.Para(status_name)
     local image = pandoc.RawBlock("html", string.format("<img src=\"/assets/%s.svg\">", status_name))
 
-    local div = pandoc.Div({image, text})
+    local status_div = pandoc.Div({text})
+    status_div.classes = {"plant-status-text"}
+    local div = pandoc.Div({image, status_div})
     div.classes = {"plant-status"}
 
     local status_info = pandoc.MetaBlocks(div)