feat: make theming easier and slight style adjustments

src/assets/style.css

@@ -20,4 +20,11 @@
   background-color: var(--bs-body-bg) !important;
   border: 1px solid var(--bs-border-color);
   border-radius: 12px;
+}
+
+[writea='read.header.thumbnail'] {
+  transition: height .3s;
+}
+[writea='read.header']:hover > [writea='read.header.thumbnail'] {
+  height: 250px;
 }

src/components/elements/ConnectionElement.js

@@ -2,7 +2,7 @@ function ConnectionElement(Icon, Link, Username, Defined) {
   if(!Defined) return ""
 
   return `
-  <div class="col py-2">
+  <div writea="element.connection" class="col py-2">
     <a href="https://${Link}" class="text-decoration-none">
         <div
           class="border border-dark border-opacity-25 py-2 px-3 rounded-4 position-relative" 

src/components/elements/FooterElement.js

@@ -1,6 +1,6 @@
 function FooterElement() {
   return `
-    <a href="#about" class="text-decoration-none">
+    <a writea="element.footer" href="#about" class="text-decoration-none">
       <p class="mt-4 text-secondary opacity-75 text-center">
         written with
         <span class='text-primary-emphasis'>

src/components/elements/LinkElement.js

@@ -35,7 +35,7 @@ function LinkElement() {
   }
 
   return `
-    <a href="http://${Link}" class="text-decoration-none">
+    <a writea="element.link" href="http://${Link}" class="text-decoration-none">
       <button class="btn shadow-none px-0 rounded-0 me-3">
         <i class="bi bi-${LinkIcon} text-primary-emphasis" style="font-size:${LinkIconSize}px;"></i>
       </button>

src/components/elements/MissingConfigurationElement.js

@@ -1,6 +1,6 @@
 function MissingConfigurationElement(OldConfiguration, NewConfiguration) {
   return `
-    <div class="row pb-4">
+    <div writea="element.missingconfig" class="row pb-4">
       <div class="col-6">
         <div class="bg-dark-subtle rounded-4 py-2 px-3">
           <p class="m-0 text-center">

src/components/elements/NavigationBarElement.js

@@ -18,7 +18,7 @@ function NavigationBarElement() {
 
   return `
     ${ConfigurationReminder}
-    <div class="row mb-3">
+    <div writea="element.navigation" class="row mb-3">
       <div class="col me-auto">
         <a href="#" class="text-decoration-none">
           <h3 class="fw-bolder text-primary-emphasis text-truncate mb-0 mt-2">

src/components/sections/BlogSection.js

@@ -18,27 +18,27 @@ function BlogSection() {
     let PostThumbnail = ""
     if (Post.Thumbnail) {
       PostThumbnail = `
-        <img src="./images/${Post.Thumbnail}" class="rounded-top-4 object-fit-cover" height="110px" width="100%"/>
+        <img src="./images/${Post.Thumbnail}" writea="post.entry.thumbnail" class="rounded-top-4 object-fit-cover" height="110px" width="100%"/>
       `
     }
 
     Posts = `
       ${Posts}
       
-      <div class="col-12 mb-4">
+      <div writea="post.entry" class="col-12 mb-4">
         <a href="#read/${Post.Content.replace('.md', '')}" class="text-decoration-none text-body">
           <div class="rounded-4 bg-dark-subtle position-relative" style="--mdc-ripple-hover-opacity: .02; --mdc-ripple-focus-opacity: .02; --mdc-ripple-press-opacity: .05;">
             ${PostThumbnail}
             <div class="row d-flex p-4">
               <div class="col-10 me-auto">
-                <span class="d-block text-primary-emphasis mb-1">
+                <span writea="post.entry.info" class="d-block text-primary-emphasis mb-1">
                   ${Post.Topic || "post"}
                   <span class="text-dark"><i class="bi bi-dot"></i> ${Post.Content}</span>
                 </span>
-                <span class="h5 fw-bold">
+                <span writea="post.entry.title" class="h5 fw-bold">
                   ${Post.Title || "No title available"}
                 </span>
-                <span class="d-block">
+                <span writea="post.entry.description" class="d-block">
                   ${Post.Description || "No description available"}
                 </span>
               </div>

src/components/sections/ReadSection.js

@@ -10,7 +10,7 @@ async function ReadSection() {
   let PostThumbnail = ""
   if(Post.Thumbnail) {
     PostThumbnail = `
-      <img src="./images/${Post.Thumbnail}" class="rounded-top-4 object-fit-cover" height="170px" width="100%"/>
+      <img src="./images/${Post.Thumbnail}" writea="read.header.thumbnail" class="rounded-top-4 object-fit-cover" height="200px" width="100%"/>
     `
   }
 
@@ -41,24 +41,24 @@ async function ReadSection() {
   return `
     ${NavigationBarElement()}
     <div class="pt-2"></div>
-    <div class="pb-4 bg-dark-subtle rounded-4">
+    <div writea="read.header" class="pb-4 bg-dark-subtle rounded-4">
       ${PostThumbnail}
       <div class="px-5 mb-4 pt-5">
-        <p class="mb-1 text-primary-emphasis">
+        <p writea="read.header.info" class="mb-1 text-primary-emphasis">
           ${Post.Topic || "post"}
           <span class="d-none d-sm-block text-dark float-end">
             ${Visibility}
           </span>
         </p>
-        <p class="h2 fw-bolder mb-1">
+        <p writea="read.header.title" class="h2 fw-bolder mb-1">
           ${Post.Title || "No title available"}
         </p>
-        <p class="opacity-75">
+        <p writea="read.header.description" class="opacity-75">
           ${Post.Description || "No description available"}
         </div>
       </div>
     </div>
-    <div class="p-xs-0 p-sm-5 py-5">
+    <div writea="read.content" class="p-xs-0 p-sm-5 py-5">
       <div id="MarkdownContainer"></div>
     </div>
     ${FooterElement()}

src/components/sections/RootSection.js

@@ -1,10 +1,10 @@
 function RootSection() {
   return `
     ${NavigationBarElement()}
-    <p>
+    <p writea="root.description">
       ${window.Configuration.Information.Description || "no description provided"}
     </p>
-    <div class="row">
+    <div writea="root.connections" class="row">
       ${ConnectionElement(
         "github",
         `github.com/${window.Configuration.Connections.GitHub}`,