Presentable article style with 3 columns.

7 files changed, 97 insertions, 81 deletions

diff --git a/_layouts/post.html b/_layouts/post.html
index 0b25d7c..116bab4 100644
--- a/_layouts/post.html
+++ b/_layouts/post.html
@@ -11,29 +11,13 @@
 
     <main>
       <div class="container">
-        <img src="{{ site.baseurl }}/assets/img/grunge.png" alt="" class="line">
-        <p class="center">[&nbsp;N<sup>o</sup>{% for post in site.posts %}
-              {% if post.title == page.title %}
-              {{ forloop.index | roman }}
-              {% endif %}
-              {% endfor %}&nbsp;]
-        <span>&nbsp;{{ page.keywords }}</span></p>
-        <img src="{{ site.baseurl }}/assets/img/grunge.png" alt="" class="line flip">
-
         <h2 class="brand center" id="title">{{ page.title | upcase }}</h2>
-        {% if page.abstract %}<h5 class="center">{{ page.abstract }}</h5>{% endif %}
-        {% if page.category %}
-        <img src="{{ site.baseurl }}/assets/img/grunge.png" alt="" class="line tag flip">
-        <p class="right tagline">{{ page.category }}</p>
-        <img src="{{ site.baseurl }}/assets/img/grunge.png" alt="" class="line tag">
-        {% endif %}
+
+        <h6 class="center">{{ page.date | date_to_long_string | upcase }}</h5>
+
         <br>
-        <h4 class="center space">{{ site.location | upcase }}</h4>
-        <h5 class="center">{{ page.date | date_to_long_string | upcase }}</h5>
 
-        <div class="threecol justify">
-          {{ content }}
-        </div>
+        <div class="threecol justify">{{ content }}</div>
 
         <p class="right italics">by {{ page.author }}</p>
       </div>
diff --git a/_projects/e-reader.md b/_projects/e-reader.md
index be34473..5bd446f 100644
--- a/_projects/e-reader.md
+++ b/_projects/e-reader.md
@@ -27,10 +27,6 @@ books of arbitrary sizes by streaming them over HTTP. It employs sleep modes to
 minimize power consumption when not in use and records the reading progress in
 the chip's RTC memory.
 
-The following schematic outlines the electrical connections of the e-reader.
-
-![circuit](circuit.svg)
-
 The biggest challenge when building an e-reader using an ESP32 board is its low
 memory and lack of storage. My ESP-WROOM-32 board has 512 KB of SRAM and 4 MB
 of flash memory, which the freeRTOS, ESP-IDF, and my own program have to share.
diff --git a/_site/assets/css/main.css b/_site/assets/css/main.css
index 621e0a5..e6c2231 100644
--- a/_site/assets/css/main.css
+++ b/_site/assets/css/main.css
@@ -51,6 +51,18 @@ td {
   width: 50%;
 }
 
+#navlist li
+{
+  display: inline;
+  list-style-type: none;
+  padding-right: 20px;
+}
+
+#navlist > .active > a {
+  font-weight: 600;
+  text-decoration: none;
+}
+
 .author{
   font-size: 1.3em;
   padding-top: 20px;
@@ -95,8 +107,8 @@ td {
 }
 
 #title{
-  padding-top: 50px;
-  padding-bottom: 50px;
+  padding-top: 0px;
+  padding-bottom: 0px;
 }
 
 .center{
@@ -136,11 +148,7 @@ hr.simple {
   font-size: 2.5em;
 }
 
-.twocol::first-letter{
-  font-size: 2.5em;
-}
-
-.threecol{
+.threecol {
   -ms-word-break: keep-all;
   word-break: keep-all;
   hyphens: auto;
@@ -148,27 +156,43 @@ hr.simple {
   -moz-hyphens: auto;
 }
 
-#navlist li
-{
-  display: inline;
-  list-style-type: none;
-  padding-right: 20px;
+@media only screen
+and (min-device-width : 768px)  {
+  .threecol {
+    -moz-column-count: 3;
+    -moz-column-gap: 20px;
+    -webkit-column-count: 3;
+    -webkit-column-gap: 20px;
+    column-count: 3;
+    column-gap: 20px;
+    width: 100%;
+  }
+  .tag{
+    width: 23%;
+    margin-right:0;
+  }
 }
 
+.twocol::first-letter {
+  font-size: 2.5em;
+}
 
-#navlist > .active > a {
-  font-weight: 600;
-  text-decoration: none;
+.twocol{
+  -ms-word-break: keep-all;
+  word-break: keep-all;
+  hyphens: auto;
+  -webkit-hyphens: auto;
+  -moz-hyphens: auto;
 }
 
 @media only screen
 and (min-device-width : 768px)  {
-  .threecol {
-    -moz-column-count: 3;
+  .twocol {
+    -moz-column-count: 2;
     -moz-column-gap: 20px;
-    -webkit-column-count: 3;
+    -webkit-column-count: 2;
     -webkit-column-gap: 20px;
-    column-count: 3;
+    column-count: 2;
     column-gap: 20px;
     width: 100%;
   }
diff --git a/_site/assets/css/skeleton.css b/_site/assets/css/skeleton.css
index e9cb181..ab259bb 100644
--- a/_site/assets/css/skeleton.css
+++ b/_site/assets/css/skeleton.css
@@ -352,7 +352,7 @@ p,
 ul,
 ol,
 form {
-  margin-bottom: 2.5rem; }
+  margin-bottom: 1.5rem; }
 
 
 /* Utilities
diff --git a/_site/projects/e-reader/index.html b/_site/projects/e-reader/index.html
index bc23c7b..540e86a 100644
--- a/_site/projects/e-reader/index.html
+++ b/_site/projects/e-reader/index.html
@@ -34,20 +34,13 @@
 
     <main>
       <div class="container">
-        <img src="/assets/img/grunge.png" alt="" class="line">
-        <p class="center">[&nbsp;N<sup>o</sup>&nbsp;]
-        <span>&nbsp;</span></p>
-        <img src="/assets/img/grunge.png" alt="" class="line flip">
-
         <h2 class="brand center" id="title">PROTOTYPE E-READER</h2>
-        
-        
+
+        <h6 class="center">24 OCTOBER 2023</h5>
+
         <br>
-        <h4 class="center space"></h4>
-        <h5 class="center">24 OCTOBER 2023</h5>
 
-        <div class="threecol justify">
-          <p>This project features a prototype e-reader powered by a 7.5-inch Waveshare e-paper display and an
+        <div class="threecol justify"><p>This project features a prototype e-reader powered by a 7.5-inch Waveshare e-paper display and an
 ESP-WROOM-32 development board.</p>
 
 <iframe style="max-width: 100%" src="ereader.mp4" frameborder="0" allowfullscreen=""></iframe>
@@ -66,10 +59,6 @@ books of arbitrary sizes by streaming them over HTTP. It employs sleep modes to
 minimize power consumption when not in use and records the reading progress in
 the chip’s RTC memory.</p>
 
-<p>The following schematic outlines the electrical connections of the e-reader.</p>
-
-<p><img src="circuit.svg" alt="circuit" /></p>
-
 <p>The biggest challenge when building an e-reader using an ESP32 board is its low
 memory and lack of storage. My ESP-WROOM-32 board has 512 KB of SRAM and 4 MB
 of flash memory, which the freeRTOS, ESP-IDF, and my own program have to share.
@@ -125,8 +114,7 @@ develop the skill set, but now, at last, I know how those displays worked and
 how to build my own.</p>
 
 <p>Files: <a href="source.tar.gz">source.tar.gz</a></p>
-
-        </div>
+</div>
 
         <p class="right italics">by W. D. Sadeep Madurange</p>
       </div>
diff --git a/assets/css/main.css b/assets/css/main.css
index 621e0a5..e6c2231 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -51,6 +51,18 @@ td {
   width: 50%;
 }
 
+#navlist li
+{
+  display: inline;
+  list-style-type: none;
+  padding-right: 20px;
+}
+
+#navlist > .active > a {
+  font-weight: 600;
+  text-decoration: none;
+}
+
 .author{
   font-size: 1.3em;
   padding-top: 20px;
@@ -95,8 +107,8 @@ td {
 }
 
 #title{
-  padding-top: 50px;
-  padding-bottom: 50px;
+  padding-top: 0px;
+  padding-bottom: 0px;
 }
 
 .center{
@@ -136,11 +148,7 @@ hr.simple {
   font-size: 2.5em;
 }
 
-.twocol::first-letter{
-  font-size: 2.5em;
-}
-
-.threecol{
+.threecol {
   -ms-word-break: keep-all;
   word-break: keep-all;
   hyphens: auto;
@@ -148,27 +156,43 @@ hr.simple {
   -moz-hyphens: auto;
 }
 
-#navlist li
-{
-  display: inline;
-  list-style-type: none;
-  padding-right: 20px;
+@media only screen
+and (min-device-width : 768px)  {
+  .threecol {
+    -moz-column-count: 3;
+    -moz-column-gap: 20px;
+    -webkit-column-count: 3;
+    -webkit-column-gap: 20px;
+    column-count: 3;
+    column-gap: 20px;
+    width: 100%;
+  }
+  .tag{
+    width: 23%;
+    margin-right:0;
+  }
 }
 
+.twocol::first-letter {
+  font-size: 2.5em;
+}
 
-#navlist > .active > a {
-  font-weight: 600;
-  text-decoration: none;
+.twocol{
+  -ms-word-break: keep-all;
+  word-break: keep-all;
+  hyphens: auto;
+  -webkit-hyphens: auto;
+  -moz-hyphens: auto;
 }
 
 @media only screen
 and (min-device-width : 768px)  {
-  .threecol {
-    -moz-column-count: 3;
+  .twocol {
+    -moz-column-count: 2;
     -moz-column-gap: 20px;
-    -webkit-column-count: 3;
+    -webkit-column-count: 2;
     -webkit-column-gap: 20px;
-    column-count: 3;
+    column-count: 2;
     column-gap: 20px;
     width: 100%;
   }
diff --git a/assets/css/skeleton.css b/assets/css/skeleton.css
index e9cb181..ab259bb 100644
--- a/assets/css/skeleton.css
+++ b/assets/css/skeleton.css
@@ -352,7 +352,7 @@ p,
 ul,
 ol,
 form {
-  margin-bottom: 2.5rem; }
+  margin-bottom: 1.5rem; }
 
 
 /* Utilities