improved layout and use of tables, css and head updated

Author: mbrignall

assets/html_preamble.html

@@ -1,11 +1,11 @@
 <hr style="border-top: 1px solid black;">
 <div class='topnav' style='display: flex; justify-content: space-between; align-items: center;'>
-  <a href="/index.html"><h2 style='margin-top: 0; margin-bottom: 0; margin-left:0px;'>mblognl</h2></a>
+  <a href="/index.html"><h1 class="logo" style='margin-top: 0 !important; margin-bottom: 0 !important; margin-left:0px !important;'>mblognl</h1></a>
   <div>
-    <a href='/about.html' style='font-weight:bold; font-style:italic;'>About Me</a> |
-    <a href='/archive.html' style='font-weight:bold; font-style:italic;'>Blog</a> |
-    <a href='/books.html' style='font-weight:bold; font-style:italic;'>Books</a> |
-    <a href='/rss.xml' style='font-weight:bold; font-style:italic;'>RSS</a>
+    <a href='/about.html' class="areas" style='font-weight:bold; font-style:italic;'>About Me</a> |
+    <a href='/archive.html' class="areas" style='font-weight:bold; font-style:italic;'>Blog</a> |
+    <a href='/books.html' class="areas" style='font-weight:bold; font-style:italic;'>Books</a> |
+    <a href='/rss.xml'  class="areas" style='font-weight:bold; font-style:italic;'>RSS</a>
   </div>
 </div>
 <hr style="border-top: 1px solid black;">

assets/stylesheet.css

@@ -28,30 +28,71 @@
  /* Headings */ 
  h1 { 
      color: #e79686; 
-     font-size: 1.5em; 
+     font-size: 1em; 
      text-align: center; 
-     margin-bottom: 0;
      width: 90%;
- } 
+ }
 
- h2 { 
-     color: #7ec98f; 
-     font-size: 1em; 
-     margin-top: 20px; 
-     margin-bottom: 10px; 
-     border-bottom: 1px solid #7ec98f; 
-     display: flex; 
-     justify-content: space-between; 
- } 
+ h1.logo:hover {
+     color: #7ec98f;
+ }
+
+ a.areas:hover {
+     color: #e79686;
+ }
+
+ /* h2 { */
+ /*     margin-bottom: 10px; */
+ /*     border-bottom: 1px solid #7ec98f; */
+ /*     display: flex; */
+ /*     justify-content: space-between; */
+ /* } */
+
+ /* Allow the flex container to wrap */
+h2 {
+    color: #7ec98f;
+    font-size: 1em;
+    margin-top: 0px;
+    margin-bottom: 0;
+    display: flex;
+    justify-content: space-between;
+    align-items: center; /* Good for vertical alignment */
+    flex-wrap: wrap;      /* This is the key change */
+    border-top: 2px solid #7ec98f;
+    padding-top: 0.5em;
+}
+
+/* This rule controls the LAYOUT of the tag container */
+.tag {
+  flex-basis: 100%;      /* Make the container take up the full width */
+  text-align: left;       /* Push the tag to the right on its new line */
+  margin-bottom: 0.5em;    /* Add space between the tag and the bottom border */
+}
+
+/* This rule controls the APPEARANCE of the tag itself */
+.tag span {
+  background-color: #1c1e26;
+  color: #dcdccc;
+  border: 1px solid #dcdccc;
+  padding: 2px;
+  font-size: 0.6em;
+}
+
+.tag span:hover {
+    background-color: #dcdccc;
+    color:  #1c1e26;
+}
 
  h3 { 
      color: #a89bb9; 
      font-size: 0.8em; 
-     margin-top: 10px; 
-     margin-bottom: 5px; 
-     border-bottom: 1px solid #a89bb9; 
-     display: flex; 
-     justify-content: space-between; 
+     margin-top: 0px;
+     margin-bottom: 0;
+     border-top: 2px solid #7ec98f; 
+     display: flex;
+     flex-wrap: wrap;
+     justify-content: space-between;
+     padding-top: 0.5em;
  } 
 
  h4 { 
@@ -65,11 +106,51 @@
  p { 
      text-align: justify; 
      margin-bottom: 1.5em;
- } 
+ }
+
+ /* --- Org Mode Table Styling (Refined) --- */
+
+/* Main table container (no changes here) */
+table {
+  width: 100%;
+  border-collapse: collapse;
+  border: 1px solid #4c566a;
+  border-radius: 0px;
+  overflow: hidden;
+  font-size: 0.8em;
+  margin-bottom: 0.5em;
+  margin-top: 0.5em;
+}
+
+/* Table row styling (no changes here) */
+tr {
+  border-bottom: 1px solid #4c566a;
+}
+
+tr:last-child {
+  border-bottom: none;
+}
+tr:hover {
+  background-color: #3b4252;
+}
+
+/* General cell styling (no changes here) */
+th, td {
+  padding: 8px 8px;
+  text-align: left;
+}
+
+/* --- THIS IS THE UPDATED RULE --- */
+/* Specific styling for the "Key" column using its class */
+td.org-left {
+  font-weight: bold;
+  color: #a89bb9;
+}
 
  ul { 
      padding-left: 30px;
      font-size: 0.8em;
+     margin-top: 0;
  } 
 
  /* Links */ 
@@ -199,20 +280,20 @@
      margin-bottom: 1em; 
  } 
 
- /* Postamble styling */ 
- .postamble { 
-     text-align: center; 
-     font-size: 1em; 
- } 
+ /* --- Postamble/Footer Styling --- */
+.postamble {
+    margin-top: 3em;
+    padding-top: 1.5em;
+    border-top: 1px solid #4c566a;
+    font-size: 0.9em;
+    color: #616e88;
+}
 
- .tag span { 
-     background-color: #ebcb8b; 
-     color: #3b4252; 
-     border: 1px solid #dcdccc; 
-     padding: 1px; 
-     border-radius: 4px; 
-     font-size: 0.4em; 
- } 
+/* You can also style the paragraph inside it if needed */
+.postamble p {
+    margin: 0;
+    text-align: center !important;
+}
 
  .todo.TODO { 
      background-color: #e79686; 

build-site.el

@@ -79,7 +79,7 @@ https://ogbe.net/blog/blogging_with_org.html"
     (error "File not readable: %s" file)))
 
 (setq org-html-postamble-format
-      '(("en" "<div class=\"postamble\" style=\"text-align: center; margin-top: 20px; margin-bottom: 20px;\"> 
+      '(("en" "<div class=\"postamble\">
                <p> Created by %c %s </p>
                </div>")))
 
@@ -100,7 +100,6 @@ https://ogbe.net/blog/blogging_with_org.html"
              :with-tags t
              :with-toc nil
              :section-numbers nil
-             ;; --- CHANGE HERE: Disable sitemap in this component ---
              :auto-sitemap nil
              :time-stamp-file nil
              :html-doctype "html5"

content/about.org

@@ -2,11 +2,13 @@
 #+author: mbrignall
 #+TODO: TODO STARTED | DONE
 
+* General @@html:<i class="fa-regular fa-address-card"></i>@@
+
 [[./img/mbrignl.jpg]]
 
 During the day I work as a Cyber Security professional in an Incident Response team. When not blocking attackers and analysing threats I can be found playing guitar.
 
-* Music things @@html:<i class="fa-regular fa-address-card"></i>@@
+* Music things @@html:<i class="fa-solid fa-music"></i>@@
 
 
  I am working on music for live performance hopefully before the end of the year (more on that soon).

content/books.org

@@ -1,11 +1,11 @@
-#+title: Previous Books
+#+title: Book Reviews
 #+author: mbrignall
 #+date: <2024-12-31>
 
 * A Trading Game                           :finance:economics:currentaffairs:
 
-- Author: Gary Stephenson
-- Published date: 2025-01-30
+| Author         | Gary Stephenson |
+| Published date |      2025-01-30 |
 
 #+begin_quote
 The rich get the assets, the poor get the debt, and then the poor have to pay their whole salary to the rich every year just to live in a house. The rich use that money to buy the rest of the assets from the middle class and then the problem gets worse every year.
@@ -21,8 +21,8 @@ Gary is clearly a very smart person. Someone who not only can convey complex ide
 
 * America Over Water                                 :folklore:music:america:
 
-- Author: Shirley Collins
-- Published date: 2022-01-20
+| Author         | Shirley Collins |
+| Published date |      2022-01-20 |
 
 #+begin_quote
 If people don't like folk music, they haven't heard the real thing.
@@ -37,10 +37,12 @@ Shirley Collins writes her early days and travels with Folklorist, Alan Lomax as
 
 @@html:<div style="clear: both;"></div>@@
 
+#+keywords: folk
+
 * The Cuckoo's Egg                                  :cybersecurity:truecrime:
 
-- Author: Clifford Stoll
-- Published date: 2005-09-13
+| Author         | Clifford Stoll |
+| Published date |     2005-09-13 |
 
 #+begin_quote
 The hacker didn't succeed through sophistication. Rather he poked at obvious places, trying to enter through unlock doors. Persistence, not wizardry, let him through.
@@ -68,17 +70,17 @@ On occasion the book felt a little like groundhog day due to the repetitive even
 
 * Cult of the Dead Cow                 :cybersecurity:truecrime:hacking:tech:
 
-- Author: Joseph Menn
-- Published date: 2020-06-02
+| Author         | Joseph Menn |
+| Published date |  2020-06-02 |
 
 [[https://www.littlebrown.co.uk/wp-content/uploads/2019/05/hbg-title-9781541724426-49.jpg?w=436]]
 
 @@html:<div style="clear: both;"></div>@@
 
 * Going Dark: The Secret Social Lives of Extremists  :extremism:radicalisation:politics:
 
-- Author: Julia Ebner
-- Published date: 2020-02-20
+| Author         | Julia Ebner |
+| Published date |  2020-02-20 |
 
 #+begin_quote
 Like the coronavirus pandemic, the current infodemic is a global phenomenon. We need to tackle it on an international level to avoid adding a third layer to this worldwide crisis: a societal one.
@@ -98,8 +100,8 @@ Additional content: [[https://www.youtube.com/watch?v=fAFV49e2W5M][Going Dark: T
 
 * Rinsed: From Cartels to Crypto             :truecrime:financial:technology:
 
-- Author: Geoff White
-- Published date: 2024-06-13
+| Author         | Geoff White |
+| Published date |  2024-06-13 |
 
 #+begin_quote
 Rinsed is a triumph. If you want to understand how the chaotic world around us really works, read this book!
@@ -119,8 +121,11 @@ Money laundering and Cyber crime in general are mutually exclusive. Even the mos
 
 * Podcasts:
 
-- [[https://darknetdiaries.com/][Darknet Diaries]] (cybersecurity, hacking, fraud, technology)
-- [[https://www.qanonanonymous.com/][QAA Podcast]] (debunked conspiracy theories, current affairs, politics)
-- [[https://opensourcesecurity.io/category/podcast/][Open Source Security]] (cyber security, current affairs, technology)
-- [[https://www.otherworldpod.com/en-gb][Other World]] (paranormal, ghost/hauntings, unexplained experiences)
-- [[https://risky.biz/][Risky Biz]] (Cyber Security, Current Affairs, Threat Intelligence)
+Here is a list of podcasts I regularly listen to about a variety of topics:
+
+
+| [[https://darknetdiaries.com/][Darknet Diaries]]      | cybersecurity, hacking, fraud, technology               |
+| [[https://www.qanonanonymous.com/][QAA Podcast]]          | debunked conspiracy theories, current affairs, politics |
+| [[https://opensourcesecurity.io/category/podcast/][Open Source Security]] | cyber security, current affairs, technology             |
+| [[https://www.otherworldpod.com/en-gb][Other World]]          | paranormal, ghost/hauntings, unexplained experiences    |
+| [[https://risky.biz/][Risky Biz]]            | Cyber Security, Current Affairs, Threat Intelligence    |

content/index.org

@@ -13,7 +13,7 @@ You'll likely find me talking about my favourite technologies. I may, from time
 
 I hope you find something useful or thought-provoking!
 
-*** Some topics, themes, and subjects
+Some topics, themes, and subjects:
 
 - *Cybersecurity and Security Engineering*
 - *Web Development and Web Design*
@@ -23,12 +23,13 @@ I hope you find something useful or thought-provoking!
 
 * Current Book(s) @@html:<i class="fa-solid fa-book"></i>@@
 
+On rotation this month:
+
 ** To Anyone Who Ever Asks: The Life, Music, and Mystery of Connie Converse :music:folklore:
 
-- Author: Howard Fishman
-- Publication date: 2024-05-02
+| Author           | Howard Fishman |
+| Publication date |     2024-05-02 |
 
-#+ATTR_HTML: :style float:left; margin-right: 15px; vertical-align: bottom; :width 75px
 https://shop.pem.org/cdn/shop/files/Untitled-2024-11-12T123048.527_1200x.jpg?v=1731432661
 
 So far this book is awesome and intriguing. I have only read the first few chapters and listened to her music for sometime, but hadn't been aware of her strange career.
@@ -38,12 +39,13 @@ So far this book is awesome and intriguing. I have only read the first few chapt
 
 * Previous Books @@html:<i class="fa-solid fa-book"></i>@@
 
+Ongoing reads/ last completed book:
+
 ** Code: The Hidden Language of Computer Hardware and Software :computer:science:technology:
 
-- Author: Charles Petzold
-- Publication date: 1999-09-29
+| Author           | Charles Petzold |
+| Publication date |      1999-09-29 |
 
-#+ATTR_HTML: :style float:left; margin-right: 15px; vertical-align: bottom; :width 75px
 https://m.media-amazon.com/images/I/61Hc-9h+-XL.jpg
 
 I am half way through this book so far, it's fascinating. Covering the beginning of code/bits/bytes up to modern computing. It has illuminated some points of computing that I have not covered for some time. More on that soon.
@@ -57,13 +59,12 @@ In Progress... Still in progress.
 
 @@html:<div style="clear: both;"></div>@@
 
-
 * Contact @@html:<i class="fa-solid fa-house"></i>@@
 
 Feel free to reach out via email or GitHub:
 
-- @@html:<i class="fa fa-envelope"></i>@@ [[mailto:hello@mbrig.nl][email me]] 
-- @@html:<i class="fa-brands fa-github-alt"></i>@@ [[https://github.com/mbrignall][github/mbrignall]]
+| [[mailto:hello@mbrig.nl][email me]]         | @@html:<i class="fa fa-envelope"></i>@@          |
+| [[https://github.com/mbrignall][github/mbrignall]] | @@html:<i class="fa-brands fa-github-alt"></i>@@ |
 
 * Post Archive @@html:<i class="fa-solid fa-box-archive"></i>@@