From b1f9ccb6d744884640c123ba7d54233d8a5b8c3f Mon Sep 17 00:00:00 2001
From: akhil <akhil@email.com>
Date: Mon, 23 Sep 2024 14:22:14 +0530
Subject: [PATCH] Update styles in custom components for header and footer

---
 publish/drafts/global.css  | 525 ++++++++++++++++++++++++-------------
 publish/drafts/index.html  |  41 +--
 publish/drafts/myFooter.js | 342 ++++++++++++++++++++++--
 publish/drafts/myHeader.js | 394 ++++++++++++++++++++++++----
 publish/drafts/post1.html  |  15 +-
 publish/drafts/post2.html  |  16 +-
 6 files changed, 1038 insertions(+), 295 deletions(-)

diff --git a/publish/drafts/global.css b/publish/drafts/global.css
index adda5a3..1f9dd78 100644
--- a/publish/drafts/global.css
+++ b/publish/drafts/global.css
@@ -1,194 +1,253 @@
+/* Styles based on the book refactoring UI */
 :root {
-    --background-color: #e1e1e1;
-}
-@media (prefers-color-scheme: dark) {
-    :root {
-        --background-color: #121212;
-    }
-}
-
-:root {
-    --text-color: #333333;
-}
-@media (prefers-color-scheme: dark) {
-    :root {
-        --text-color: #e0e0e0;
-    }
-}
-
-:root {
-    --primary-color: #007bff;
-}
-@media (prefers-color-scheme: dark) {
-    :root {
-        --primary-color: #4dabf7;
-    }
+    /* Light theme colors */
+    --color-bg: hsl(220, 0%, 100%);
+    --color-text: hsl(220, 10%, 20%);
+    --color-primary-0: hsl(220, 100%, 90%);
+    --color-primary-1: hsl(220, 100%, 80%);
+    --color-primary-2: hsl(220, 100%, 70%);
+    --color-primary-3: hsl(220, 100%, 60%);
+    --color-primary-4: hsl(220, 100%, 50%);
+    --color-primary-5: hsl(220, 100%, 40%);
+    --color-primary-6: hsl(220, 100%, 30%);
+    --color-primary-7: hsl(220, 100%, 20%);
+    --color-primary-8: hsl(220, 100%, 10%);
+
+    --color-neutral-0: hsl(220, 0%, 90%);
+    --color-neutral-1: hsl(220, 0%, 85%);
+    --color-neutral-2: hsl(220, 0%, 70%);
+    --color-neutral-3: hsl(220, 0%, 60%);
+    --color-neutral-4: hsl(220, 0%, 50%);
+    --color-neutral-5: hsl(220, 0%, 40%);
+    --color-neutral-6: hsl(220, 0%, 30%);
+    --color-neutral-7: hsl(220, 0%, 20%);
+
+    /* Valid accent */
+    --color-accent-green-0: hsl(120, 60%, 90%);
+    --color-accent-green-1: hsl(120, 60%, 80%);
+    --color-accent-green-2: hsl(120, 60%, 70%);
+    --color-accent-green-3: hsl(120, 60%, 60%);
+    --color-accent-green-4: hsl(120, 60%, 50%);
+    --color-accent-green-5: hsl(120, 60%, 40%);
+    --color-accent-green-6: hsl(120, 60%, 30%);
+    --color-accent-green-7: hsl(120, 60%, 20%);
+
+    /* Error accent */
+    --color-accent-red-0: hsl(0, 100%, 90%);
+    --color-accent-red-1: hsl(0, 100%, 80%);
+    --color-accent-red-2: hsl(0, 100%, 70%);
+    --color-accent-red-3: hsl(0, 100%, 60%);
+    --color-accent-red-4: hsl(0, 100%, 50%);
+    --color-accent-red-5: hsl(0, 100%, 40%);
+    --color-accent-red-6: hsl(0, 100%, 30%);
+    --color-accent-red-7: hsl(0, 100%, 20%);
+
+    /* Warning accent */
+    --color-accent-yellow-0: hsl(40, 100%, 90%);
+    --color-accent-yellow-1: hsl(40, 100%, 80%);
+    --color-accent-yellow-2: hsl(40, 100%, 70%);
+    --color-accent-yellow-3: hsl(40, 100%, 60%);
+    --color-accent-yellow-4: hsl(40, 100%, 50%);
+    --color-accent-yellow-5: hsl(40, 100%, 40%);
+    --color-accent-yellow-6: hsl(40, 100%, 30%);
+    --color-accent-yellow-7: hsl(40, 100%, 20%);
+
+    /* Font sizes */
+    --font-size-xs: 0.75rem;
+    --font-size-sm: 0.875rem;
+    --font-size-md: 1rem;
+    --font-size-lg: 1.125rem;
+    --font-size-xl: 1.25rem;
+
+    /* Spacing */
+    --spacing-xs: 0.25rem;
+    --spacing-sm: 0.5rem;
+    --spacing-md: 1rem;
+    --spacing-lg: 1.5rem;
+    --spacing-xl: 2rem;
 }
 
-:root {
-    --secondary-color: #6c757d;
-}
-@media (prefers-color-scheme: dark) {
-    :root {
-        --secondary-color: #909090;
-    }
-}
-
-:root {
-    --accent-color: #28a745;
-}
 @media (prefers-color-scheme: dark) {
     :root {
-        --accent-color: #66bb6a;
+        /* Dark theme colors */
+        --color-bg: hsl(220, 10%, 10%);
+        --color-text: hsl(220, 10%, 80%);
+        --color-primary-0: hsl(220, 100%, 10%);
+        --color-primary-1: hsl(220, 100%, 20%);
+        --color-primary-2: hsl(220, 100%, 30%);
+        --color-primary-3: hsl(220, 100%, 40%);
+        --color-primary-4: hsl(220, 100%, 50%);
+        --color-primary-5: hsl(220, 100%, 60%);
+        --color-primary-6: hsl(220, 100%, 70%);
+        --color-primary-7: hsl(220, 100%, 80%);
+        --color-primary-8: hsl(220, 100%, 90%);
+
+        /* Neutral colors */
+        --color-neutral-0: hsl(220, 10%, 20%);
+        --color-neutral-1: hsl(220, 10%, 25%);
+        --color-neutral-2: hsl(220, 10%, 40%);
+        --color-neutral-3: hsl(220, 10%, 50%);
+        --color-neutral-4: hsl(220, 10%, 60%);
+        --color-neutral-5: hsl(220, 10%, 70%);
+        --color-neutral-6: hsl(220, 10%, 80%);
+        --color-neutral-7: hsl(220, 10%, 90%);
+
+        /* Valid accent */
+        --color-accent-green-0: hsl(120, 60%, 20%);
+        --color-accent-green-1: hsl(120, 60%, 30%);
+        --color-accent-green-2: hsl(120, 60%, 40%);
+        --color-accent-green-3: hsl(120, 60%, 50%);
+        --color-accent-green-4: hsl(120, 60%, 60%);
+        --color-accent-green-5: hsl(120, 60%, 70%);
+        --color-accent-green-6: hsl(120, 60%, 80%);
+        --color-accent-green-7: hsl(120, 60%, 90%);
+
+        /* Error accent */
+        --color-accent-red-0: hsl(0, 100%, 20%);
+        --color-accent-red-1: hsl(0, 100%, 30%);
+        --color-accent-red-2: hsl(0, 100%, 40%);
+        --color-accent-red-3: hsl(0, 100%, 50%);
+        --color-accent-red-4: hsl(0, 100%, 60%);
+        --color-accent-red-5: hsl(0, 100%, 70%);
+        --color-accent-red-6: hsl(0, 100%, 80%);
+        --color-accent-red-7: hsl(0, 100%, 90%);
+
+        /* Warning accent */
+        --color-accent-yellow-0: hsl(40, 100%, 20%);
+        --color-accent-yellow-1: hsl(40, 100%, 30%);
+        --color-accent-yellow-2: hsl(40, 100%, 40%);
+        --color-accent-yellow-3: hsl(40, 100%, 50%);
+        --color-accent-yellow-4: hsl(40, 100%, 60%);
+        --color-accent-yellow-5: hsl(40, 100%, 70%);
+        --color-accent-yellow-6: hsl(40, 100%, 80%);
+        --color-accent-yellow-7: hsl(40, 100%, 90%);
     }
 }
 
 :root {
-    --border-color: #dee2e6;
+    --container-max-width: 1200px;
 }
 
-@media (prefers-color-scheme: dark) {
-    :root {
-        --border-color: #404040;
-    }
-}
-
-:root {
-    --input-background-color: #f8f9fa;
-}
-
-@media (prefers-color-scheme: dark) {
+/* Responsive adjustments */
+@media (max-width: 640px) {
     :root {
-        --input-background-color: #1e1e1e;
+        --container-max-width: 640px;
     }
 }
 
-:root {
-    --input-text-color: #495057;
-}
-
-@media (prefers-color-scheme: dark) {
+@media (max-width: 768px) {
     :root {
-        --input-text-color: #b0b0b0;
+        --container-max-width: 768px;
     }
 }
 
-:root {
-    --link-color: #0056b3;
-}
-
-@media (prefers-color-scheme: dark) {
+@media (max-width: 1024px) {
     :root {
-        --link-color: #63b3ed;
+        --container-max-width: 1024px;
     }
 }
 
-:root {
-    --link-hover-color: #004085;
-}
-
-@media (prefers-color-scheme: dark) {
+@media (max-width: 1280px) {
     :root {
-        --link-hover-color: #90cdf4;
+        --container-max-width: 1280px;
     }
 }
 
-:root {
-    --success-color: #28a745;
-}
-
-@media (prefers-color-scheme: dark) {
+@media (max-width: 1536px) {
     :root {
-        --success-color: #66bb6a;
+        --container-max-width: 1536px;
     }
 }
 
-:root {
-    --error-color: #dc3545;
-}
-@media (prefers-color-scheme: dark) {
-    :root {
-        --error-color: #f44336;
-    }
+/* Responsive container class i.e based on the screen width*/
+.container {
+    width: 100%;
+    max-width: var(--container-max-width);
+    margin-left: auto;
+    margin-right: auto;
+    padding-left: var(--spacing-md);
+    padding-right: var(--spacing-md);
 }
 
-:root {
-    --warning-color: #ffc107;
-}
-@media (prefers-color-scheme: dark) {
-    :root {
-        --warning-color: #ffeb3b;
-    }
+/* Global styles */
+body {
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+        Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+    font-size: var(--font-size-md);
+    line-height: 1.5;
+    color: var(--color-text);
+    background-color: var(--color-bg);
+    margin: 0;
+    padding: 0;
 }
 
-:root {
-    --info-color: #17a2b8;
-}
-@media (prefers-color-scheme: dark) {
-    :root {
-        --info-color: #4dd0e1;
-    }
+main {
+    padding-top: var(--spacing-lg);
+    padding-bottom: var(--spacing-lg);
+    width: var(--container-max-width);
+    margin: 0 auto;
 }
 
-:root {
-    --loading-bar-color: #3498db;
+footer {
+    padding-top: var(--spacing-lg);
+    padding-bottom: var(--spacing-lg);
+    background-color: var(--color-neutral-0);
+    text-align: center;
 }
 
-@media (prefers-color-scheme: dark) {
-    :root {
-        --loading-bar-color: #3498db;
-    }
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+    margin-top: var(--spacing-lg);
+    margin-bottom: var(--spacing-md);
+    line-height: 1.2;
 }
 
-*:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) {
-    font-size: 1rem;
+h1 {
+    font-size: var(--font-size-xl);
 }
 
-html {
-    color-scheme: light dark;
+h2 {
+    font-size: var(--font-size-lg);
 }
 
-/* Base styles */
-body {
-    background-color: var(--background-color);
-    color: var(--text-color);
-    font-family: Arial, sans-serif;
-    line-height: 1.6;
-    transition:
-        background-color 0.2s,
-        color 0.2s;
+h3 {
+    font-size: var(--font-size-md);
 }
 
-/* Typography */
-h1,
-h2,
-h3,
 h4,
 h5,
 h6 {
-    color: var(--primary-color);
+    font-size: var(--font-size-sm);
+}
+
+p {
+    margin-bottom: var(--spacing-md);
 }
 
 a {
-    color: var(--link-color);
+    color: var(--color-primary-5);
     text-decoration: none;
 }
 
 a:hover {
-    color: var(--link-hover-color);
+    text-decoration: underline;
 }
 
 /* Form elements */
 input,
 textarea,
 select {
-    background-color: var(--input-background-color);
-    color: var(--input-text-color);
-    border: 1px solid var(--border-color);
-    outline: none;
-    border-radius: 0.5rem;
-    padding: 0.5rem;
-    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
+    font-size: var(--font-size-md);
+    padding: var(--spacing-xs) var(--spacing-sm);
+    border: 1px solid var(--color-neutral-1);
+    background-color: var(--color-neutral-1);
+    border-radius: 4px;
+    color: var(--color-text);
+    box-shadow: inset 0 1px 2px var(--color-neutral-1);
     transition:
         background-color 0.2s,
         border-color 0.2s;
@@ -197,115 +256,215 @@ select {
 input:focus,
 textarea:focus,
 select:focus {
-    border-color: #3b82f6; /* blue-500 */
+    border-color: var(--color-primary-5);
+    background-color: var(--color-neutral-0);
+    box-shadow: 0 0 0 2px var(--color-primary-5);
 }
 
 button {
-    background-color: var(--primary-color);
-    color: var(--background-color);
+    font-size: var(--font-size-md);
+    padding: var(--spacing-xs) var(--spacing-md);
+    background-color: var(--color-primary-3);
+    color: white;
     border: none;
-    padding: 0.5rem 1rem;
-    margin-top: 1rem;
     border-radius: 4px;
     cursor: pointer;
+    transition: background-color 0.2s ease;
 }
 
 button:hover {
-    opacity: 0.9;
+    background-color: var(--color-primary-4);
 }
 
-/*bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline*/
-button:focus {
-    outline: none;
-    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.5);
+/* Lists */
+ul,
+ol {
+    margin-bottom: var(--spacing-md);
+    padding-left: var(--spacing-lg);
 }
 
-/* Tables */
+/* Table */
 table {
     border-collapse: collapse;
     width: 100%;
+    margin-bottom: var(--spacing-md);
 }
 
 th,
 td {
-    border: 1px solid var(--border-color);
-    padding: 8px;
+    border: 1px solid var(--color-muted);
+    padding: var(--spacing-xs) var(--spacing-sm);
     text-align: left;
 }
 
 th {
-    background-color: var(--secondary-color);
-    color: var(--background-color);
+    background-color: var(--color-neutral-0);
+    font-weight: bold;
 }
 
-/* Lists */
-ul,
-ol {
-    padding-left: 20px;
+/* Responsive adjustments */
+@media (max-width: 768px) {
+    :root {
+        --font-size-xl: 1.125rem;
+        --font-size-lg: 1rem;
+        --font-size-md: 0.875rem;
+        --font-size-sm: 0.75rem;
+        --font-size-xs: 0.675rem;
+    }
+
+    body {
+        font-size: var(--font-size-sm);
+    }
 }
 
 /* Utility classes */
-.text-primary {
-    color: var(--primary-color);
+/* ================= */
+.primary-0 {
+    background-color: var(--color-primary-0);
+}
+
+.primary-1 {
+    background-color: var(--color-primary-1);
+}
+
+.primary-2 {
+    background-color: var(--color-primary-2);
+}
+
+.primary-3 {
+    background-color: var(--color-primary-3);
+}
+
+.primary-4 {
+    background-color: var(--color-primary-4);
+}
+
+.primary-5 {
+    background-color: var(--color-primary-5);
+}
+
+.primary-6 {
+    background-color: var(--color-primary-6);
+}
+
+.primary-7 {
+    background-color: var(--color-primary-7);
+}
+
+.neutral-0 {
+    background-color: var(--color-neutral-0);
+}
+
+.neutral-1 {
+    background-color: var(--color-neutral-1);
+}
+
+.neutral-2 {
+    background-color: var(--color-neutral-2);
+}
+
+.neutral-3 {
+    background-color: var(--color-neutral-3);
+}
+
+.neutral-4 {
+    background-color: var(--color-neutral-4);
+}
+
+.neutral-5 {
+    background-color: var(--color-neutral-5);
+}
+
+.neutral-6 {
+    background-color: var(--color-neutral-6);
+}
+
+.neutral-7 {
+    background-color: var(--color-neutral-7);
+}
+
+.accent-green-0 {
+    background-color: var(--color-accent-green-0);
+}
+
+.accent-green-1 {
+    background-color: var(--color-accent-green-1);
+}
+
+.accent-green-2 {
+    background-color: var(--color-accent-green-2);
+}
+
+.accent-green-3 {
+    background-color: var(--color-accent-green-3);
+}
+
+.accent-green-4 {
+    background-color: var(--color-accent-green-4);
+}
+
+.accent-green-5 {
+    background-color: var(--color-accent-green-5);
+}
+
+.accent-green-6 {
+    background-color: var(--color-accent-green-6);
+}
+
+.accent-green-7 {
+    background-color: var(--color-accent-green-7);
 }
 
-.text-secondary {
-    color: var(--secondary-color);
+.accent-red-0 {
+    background-color: var(--color-accent-red-0);
 }
 
-.text-accent {
-    color: var(--accent-color);
+.accent-red-1 {
+    background-color: var(--color-accent-red-1);
 }
 
-.text-success {
-    color: var(--success-color);
+.accent-red-2 {
+    background-color: var(--color-accent-red-2);
 }
 
-.text-error {
-    color: var(--error-color);
+.accent-red-3 {
+    background-color: var(--color-accent-red-3);
 }
 
-.text-warning {
-    color: var(--warning-color);
+.accent-red-4 {
+    background-color: var(--color-accent-red-4);
 }
 
-.text-info {
-    color: var(--info-color);
+.accent-red-5 {
+    background-color: var(--color-accent-red-5);
 }
 
-.bg-primary {
-    background-color: var(--primary-color);
-    color: var(--background-color);
+.accent-red-6 {
+    background-color: var(--color-accent-red-6);
 }
 
-.bg-secondary {
-    background-color: var(--secondary-color);
-    color: var(--background-color);
+.accent-red-7 {
+    background-color: var(--color-accent-red-7);
 }
 
-.bg-accent {
-    background-color: var(--accent-color);
-    color: var(--background-color);
+.accent-yellow-0 {
+    background-color: var(--color-accent-yellow-0);
 }
 
-.bg-success {
-    background-color: var(--success-color);
-    color: var(--background-color);
+.accent-yellow-1 {
+    background-color: var(--color-accent-yellow-1);
 }
 
-.bg-error {
-    background-color: var(--error-color);
-    color: var(--background-color);
+.accent-yellow-2 {
+    background-color: var(--color-accent-yellow-2);
 }
 
-.bg-warning {
-    background-color: var(--warning-color);
-    color: var(--background-color);
+.accent-yellow-3 {
+    background-color: var(--color-accent-yellow-3);
 }
 
-.bg-info {
-    background-color: var(--info-color);
-    color: var(--background-color);
+.accent-yellow-4 {
+    background-color: var(--color-accent-yellow-4);
 }
 
 /* Add more specific styles as needed */
@@ -316,7 +475,7 @@ ol {
     left: 0;
     width: 100%;
     height: 4px;
-    background-color: var(--loading-bar-color);
+    background-color: var(--color-primary-5);
     animation: loading 1s linear infinite;
 }
 
diff --git a/publish/drafts/index.html b/publish/drafts/index.html
index ee73bd5..52a0bf2 100644
--- a/publish/drafts/index.html
+++ b/publish/drafts/index.html
@@ -8,32 +8,37 @@
     <link rel="stylesheet" href="global.css">
     <script src="myHeader.js"></script>
     <script src="myFooter.js"></script>
+    <style>
+        .post-preview {
+            display: block;
+            background-color: #fff;
+            /* font-size: 1.25rem; */
+            padding: 1rem;
+            border-radius: 0.5rem;
+            box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.1);
+            margin-bottom: 1rem;
+        }
+    </style>
 </head>
 
-<body class="bg-gray-100">
+<body>
     <my-header></my-header>
-    <main style="max-width: 960px; margin: 0 auto; padding: 1rem;">
-        <section class="mb-8">
+    <main>
+        <section>
             <h2>Recent Posts</h2>
-            <a href="post1.html" style="display: block; background-color: #fff; padding: 1rem; border-radius: 0.5rem; box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.1); margin-bottom: 1rem;">
-                <h3 style="font-size: 1.25rem; font-weight: 600; margin-bottom: 0.5rem;">First Blog Post</h3>
-                <p class="text-gray-700">Welcome to my blog! I'm passionate about [your interests]. Here, I share my thoughts on [blog topics].</p>
+            <a href="post1.html">
+                <h3>First Blog Post</h3>
+                <p>Welcome to my blog! I'm passionate about [your interests]. Here, I share my
+                    thoughts on [blog topics].</p>
             </a>
-            <a href="post2.html" style="display: block; background-color: #fff; padding: 1rem; border-radius: 0.5rem; box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.1);">
-                <h3 style="font-size: 1.25rem; font-weight: 600; margin-bottom: 0.5rem;">Second Blog Post</h3>
-                <p class="text-gray-700">Welcome to my blog! I'm passionate about [your interests]. Here, I share my thoughts on [blog topics].</p>
+            <a href="post2.html">
+                <h3>Second Blog Post</h3>
+                <p>Welcome to my blog! I'm passionate about [your interests]. Here, I share my
+                    thoughts on [blog topics].</p>
             </a>
         </section>
-
-        <section>
-            <h2 class="text-2xl font-semibold mb-4">About Me</h2>
-            <p class="bg-white p-4 rounded shadow">
-                Welcome to my blog! I'm passionate about [your interests].
-                Here, I share my thoughts on [blog topics].
-            </p>
-        </section>
     </main>
     <my-footer></my-footer>
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/publish/drafts/myFooter.js b/publish/drafts/myFooter.js
index bb33eb9..faf4ebf 100644
--- a/publish/drafts/myFooter.js
+++ b/publish/drafts/myFooter.js
@@ -1,3 +1,324 @@
+const styleString = `
+/* Styles based on the book refactoring UI */
+:host {
+    /* Light theme colors */
+    --color-bg: hsl(220, 0%, 100%);
+    --color-text: hsl(220, 10%, 20%);
+    --color-primary-0: hsl(220, 100%, 90%);
+    --color-primary-1: hsl(220, 100%, 80%);
+    --color-primary-2: hsl(220, 100%, 70%);
+    --color-primary-3: hsl(220, 100%, 60%);
+    --color-primary-4: hsl(220, 100%, 50%);
+    --color-primary-5: hsl(220, 100%, 40%);
+    --color-primary-6: hsl(220, 100%, 30%);
+    --color-primary-7: hsl(220, 100%, 20%);
+    --color-primary-8: hsl(220, 100%, 10%);
+
+    --color-neutral-0: hsl(220, 0%, 90%);
+    --color-neutral-1: hsl(220, 0%, 85%);
+    --color-neutral-2: hsl(220, 0%, 70%);
+    --color-neutral-3: hsl(220, 0%, 60%);
+    --color-neutral-4: hsl(220, 0%, 50%);
+    --color-neutral-5: hsl(220, 0%, 40%);
+    --color-neutral-6: hsl(220, 0%, 30%);
+    --color-neutral-7: hsl(220, 0%, 20%);
+
+    /* Valid accent */
+    --color-accent-green-0: hsl(120, 60%, 90%);
+    --color-accent-green-1: hsl(120, 60%, 80%);
+    --color-accent-green-2: hsl(120, 60%, 70%);
+    --color-accent-green-3: hsl(120, 60%, 60%);
+    --color-accent-green-4: hsl(120, 60%, 50%);
+    --color-accent-green-5: hsl(120, 60%, 40%);
+    --color-accent-green-6: hsl(120, 60%, 30%);
+    --color-accent-green-7: hsl(120, 60%, 20%);
+
+    /* Error accent */
+    --color-accent-red-0: hsl(0, 100%, 90%);
+    --color-accent-red-1: hsl(0, 100%, 80%);
+    --color-accent-red-2: hsl(0, 100%, 70%);
+    --color-accent-red-3: hsl(0, 100%, 60%);
+    --color-accent-red-4: hsl(0, 100%, 50%);
+    --color-accent-red-5: hsl(0, 100%, 40%);
+    --color-accent-red-6: hsl(0, 100%, 30%);
+    --color-accent-red-7: hsl(0, 100%, 20%);
+
+    /* Warning accent */
+    --color-accent-yellow-0: hsl(40, 100%, 90%);
+    --color-accent-yellow-1: hsl(40, 100%, 80%);
+    --color-accent-yellow-2: hsl(40, 100%, 70%);
+    --color-accent-yellow-3: hsl(40, 100%, 60%);
+    --color-accent-yellow-4: hsl(40, 100%, 50%);
+    --color-accent-yellow-5: hsl(40, 100%, 40%);
+    --color-accent-yellow-6: hsl(40, 100%, 30%);
+    --color-accent-yellow-7: hsl(40, 100%, 20%);
+
+    /* Font sizes */
+    --font-size-xs: 0.75rem;
+    --font-size-sm: 0.875rem;
+    --font-size-md: 1rem;
+    --font-size-lg: 1.125rem;
+    --font-size-xl: 1.25rem;
+
+    /* Spacing */
+    --spacing-xs: 0.25rem;
+    --spacing-sm: 0.5rem;
+    --spacing-md: 1rem;
+    --spacing-lg: 1.5rem;
+    --spacing-xl: 2rem;
+}
+
+@media (prefers-color-scheme: dark) {
+    :host {
+        /* Dark theme colors */
+        --color-bg: hsl(220, 10%, 10%);
+        --color-text: hsl(220, 10%, 80%);
+        --color-primary-0: hsl(220, 100%, 10%);
+        --color-primary-1: hsl(220, 100%, 20%);
+        --color-primary-2: hsl(220, 100%, 30%);
+        --color-primary-3: hsl(220, 100%, 40%);
+        --color-primary-4: hsl(220, 100%, 50%);
+        --color-primary-5: hsl(220, 100%, 60%);
+        --color-primary-6: hsl(220, 100%, 70%);
+        --color-primary-7: hsl(220, 100%, 80%);
+        --color-primary-8: hsl(220, 100%, 90%);
+
+        /* Neutral colors */
+        --color-neutral-0: hsl(220, 10%, 20%);
+        --color-neutral-1: hsl(220, 10%, 25%);
+        --color-neutral-2: hsl(220, 10%, 40%);
+        --color-neutral-3: hsl(220, 10%, 50%);
+        --color-neutral-4: hsl(220, 10%, 60%);
+        --color-neutral-5: hsl(220, 10%, 70%);
+        --color-neutral-6: hsl(220, 10%, 80%);
+        --color-neutral-7: hsl(220, 10%, 90%);
+
+        /* Valid accent */
+        --color-accent-green-0: hsl(120, 60%, 20%);
+        --color-accent-green-1: hsl(120, 60%, 30%);
+        --color-accent-green-2: hsl(120, 60%, 40%);
+        --color-accent-green-3: hsl(120, 60%, 50%);
+        --color-accent-green-4: hsl(120, 60%, 60%);
+        --color-accent-green-5: hsl(120, 60%, 70%);
+        --color-accent-green-6: hsl(120, 60%, 80%);
+        --color-accent-green-7: hsl(120, 60%, 90%);
+
+        /* Error accent */
+        --color-accent-red-0: hsl(0, 100%, 20%);
+        --color-accent-red-1: hsl(0, 100%, 30%);
+        --color-accent-red-2: hsl(0, 100%, 40%);
+        --color-accent-red-3: hsl(0, 100%, 50%);
+        --color-accent-red-4: hsl(0, 100%, 60%);
+        --color-accent-red-5: hsl(0, 100%, 70%);
+        --color-accent-red-6: hsl(0, 100%, 80%);
+        --color-accent-red-7: hsl(0, 100%, 90%);
+
+        /* Warning accent */
+        --color-accent-yellow-0: hsl(40, 100%, 20%);
+        --color-accent-yellow-1: hsl(40, 100%, 30%);
+        --color-accent-yellow-2: hsl(40, 100%, 40%);
+        --color-accent-yellow-3: hsl(40, 100%, 50%);
+        --color-accent-yellow-4: hsl(40, 100%, 60%);
+        --color-accent-yellow-5: hsl(40, 100%, 70%);
+        --color-accent-yellow-6: hsl(40, 100%, 80%);
+        --color-accent-yellow-7: hsl(40, 100%, 90%);
+    }
+}
+
+:host {
+    --container-max-width: 1200px;
+}
+
+/* Responsive adjustments */
+@media (max-width: 640px) {
+    :host {
+        --container-max-width: 640px;
+    }
+}
+
+@media (max-width: 768px) {
+    :host {
+        --container-max-width: 768px;
+    }
+}
+
+@media (max-width: 1024px) {
+    :host {
+        --container-max-width: 1024px;
+    }
+}
+
+@media (max-width: 1280px) {
+    :host {
+        --container-max-width: 1280px;
+    }
+}
+
+@media (max-width: 1536px) {
+    :host {
+        --container-max-width: 1536px;
+    }
+}
+
+/* Responsive container class i.e based on the screen width*/
+.container {
+    width: 100%;
+    max-width: var(--container-max-width);
+    margin-left: auto;
+    margin-right: auto;
+    padding-left: var(--spacing-md);
+    padding-right: var(--spacing-md);
+}
+
+/* Global styles */
+body {
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+        Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+    font-size: var(--font-size-md);
+    line-height: 1.5;
+    color: var(--color-text);
+    background-color: var(--color-bg);
+    margin: 0;
+    padding: 0;
+}
+
+main {
+    padding-top: var(--spacing-lg);
+    padding-bottom: var(--spacing-lg);
+    width: var(--container-max-width);
+    margin: 0 auto;
+}
+
+footer {
+    padding-top: var(--spacing-lg);
+    padding-bottom: var(--spacing-lg);
+    background-color: var(--color-neutral-0);
+    text-align: center;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+    margin-top: var(--spacing-lg);
+    margin-bottom: var(--spacing-md);
+    line-height: 1.2;
+}
+
+h1 {
+    font-size: var(--font-size-xl);
+}
+
+h2 {
+    font-size: var(--font-size-lg);
+}
+
+h3 {
+    font-size: var(--font-size-md);
+}
+
+h4,
+h5,
+h6 {
+    font-size: var(--font-size-sm);
+}
+
+p {
+    margin-bottom: var(--spacing-md);
+}
+
+a {
+    color: var(--color-primary-5);
+    text-decoration: none;
+}
+
+a:hover {
+    text-decoration: underline;
+}
+
+/* Form elements */
+input,
+textarea,
+select {
+    font-size: var(--font-size-md);
+    padding: var(--spacing-xs) var(--spacing-sm);
+    border: 1px solid var(--color-neutral-1);
+    background-color: var(--color-neutral-1);
+    border-radius: 4px;
+    color: var(--color-text);
+    box-shadow: inset 0 1px 2px var(--color-neutral-1);
+    transition:
+        background-color 0.2s,
+        border-color 0.2s;
+}
+
+input:focus,
+textarea:focus,
+select:focus {
+    border-color: var(--color-primary-5);
+    background-color: var(--color-neutral-0);
+    box-shadow: 0 0 0 2px var(--color-primary-5);
+}
+
+button {
+    font-size: var(--font-size-md);
+    padding: var(--spacing-xs) var(--spacing-md);
+    background-color: var(--color-primary-3);
+    color: white;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    transition: background-color 0.2s ease;
+}
+
+button:hover {
+    background-color: var(--color-primary-4);
+}
+
+/* Lists */
+ul,
+ol {
+    margin-bottom: var(--spacing-md);
+    padding-left: var(--spacing-lg);
+}
+
+/* Table */
+table {
+    border-collapse: collapse;
+    width: 100%;
+    margin-bottom: var(--spacing-md);
+}
+
+th,
+td {
+    border: 1px solid var(--color-muted);
+    padding: var(--spacing-xs) var(--spacing-sm);
+    text-align: left;
+}
+
+th {
+    background-color: var(--color-neutral-0);
+    font-weight: bold;
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+    :host {
+        --font-size-xl: 1.125rem;
+        --font-size-lg: 1rem;
+        --font-size-md: 0.875rem;
+        --font-size-sm: 0.75rem;
+        --font-size-xs: 0.675rem;
+    }
+
+    body {
+        font-size: var(--font-size-sm);
+    }
+}
+`;
+
 class MyFooter extends HTMLElement {
     constructor() {
         super();
@@ -6,25 +327,10 @@ class MyFooter extends HTMLElement {
     connectedCallback() {
         this.shadowRoot.innerHTML = `
         <style>
-            :host {
-                display: block;
-                margin-top: 2rem;
-                --background-color: #333;
-                color: white;
-            }
-            :host (prefers-color-scheme: dark) {
-                --background-color: white;
-                color: #333;
-            }
-            footer {
-                background-color: var(--background-color);
-                padding: 2rem;
-            }
+            ${styleString}
         </style>
-        <footer style="background-color: #333; padding: 2rem;">
-            <div class="container mx-auto">
-                <p style="text-align: center;">© 2024 Akhil N</p>
-            </div>
+        <footer>
+            <p style="text-align: center;">© 2024 Akhil N</p>
         </footer>
         `;
     }
diff --git a/publish/drafts/myHeader.js b/publish/drafts/myHeader.js
index 335dd69..6183990 100644
--- a/publish/drafts/myHeader.js
+++ b/publish/drafts/myHeader.js
@@ -1,67 +1,345 @@
+// Custom element whose style is copied from global.css 
+const styleString = `
+/* Styles based on the book refactoring UI */
+:host {
+    /* Light theme colors */
+    --color-bg: hsl(220, 0%, 100%);
+    --color-text: hsl(220, 10%, 20%);
+    --color-primary-0: hsl(220, 100%, 90%);
+    --color-primary-1: hsl(220, 100%, 80%);
+    --color-primary-2: hsl(220, 100%, 70%);
+    --color-primary-3: hsl(220, 100%, 60%);
+    --color-primary-4: hsl(220, 100%, 50%);
+    --color-primary-5: hsl(220, 100%, 40%);
+    --color-primary-6: hsl(220, 100%, 30%);
+    --color-primary-7: hsl(220, 100%, 20%);
+    --color-primary-8: hsl(220, 100%, 10%);
+
+    --color-neutral-0: hsl(220, 0%, 90%);
+    --color-neutral-1: hsl(220, 0%, 85%);
+    --color-neutral-2: hsl(220, 0%, 70%);
+    --color-neutral-3: hsl(220, 0%, 60%);
+    --color-neutral-4: hsl(220, 0%, 50%);
+    --color-neutral-5: hsl(220, 0%, 40%);
+    --color-neutral-6: hsl(220, 0%, 30%);
+    --color-neutral-7: hsl(220, 0%, 20%);
+
+    /* Valid accent */
+    --color-accent-green-0: hsl(120, 60%, 90%);
+    --color-accent-green-1: hsl(120, 60%, 80%);
+    --color-accent-green-2: hsl(120, 60%, 70%);
+    --color-accent-green-3: hsl(120, 60%, 60%);
+    --color-accent-green-4: hsl(120, 60%, 50%);
+    --color-accent-green-5: hsl(120, 60%, 40%);
+    --color-accent-green-6: hsl(120, 60%, 30%);
+    --color-accent-green-7: hsl(120, 60%, 20%);
+
+    /* Error accent */
+    --color-accent-red-0: hsl(0, 100%, 90%);
+    --color-accent-red-1: hsl(0, 100%, 80%);
+    --color-accent-red-2: hsl(0, 100%, 70%);
+    --color-accent-red-3: hsl(0, 100%, 60%);
+    --color-accent-red-4: hsl(0, 100%, 50%);
+    --color-accent-red-5: hsl(0, 100%, 40%);
+    --color-accent-red-6: hsl(0, 100%, 30%);
+    --color-accent-red-7: hsl(0, 100%, 20%);
+
+    /* Warning accent */
+    --color-accent-yellow-0: hsl(40, 100%, 90%);
+    --color-accent-yellow-1: hsl(40, 100%, 80%);
+    --color-accent-yellow-2: hsl(40, 100%, 70%);
+    --color-accent-yellow-3: hsl(40, 100%, 60%);
+    --color-accent-yellow-4: hsl(40, 100%, 50%);
+    --color-accent-yellow-5: hsl(40, 100%, 40%);
+    --color-accent-yellow-6: hsl(40, 100%, 30%);
+    --color-accent-yellow-7: hsl(40, 100%, 20%);
+
+    /* Font sizes */
+    --font-size-xs: 0.75rem;
+    --font-size-sm: 0.875rem;
+    --font-size-md: 1rem;
+    --font-size-lg: 1.125rem;
+    --font-size-xl: 1.25rem;
+
+    /* Spacing */
+    --spacing-xs: 0.25rem;
+    --spacing-sm: 0.5rem;
+    --spacing-md: 1rem;
+    --spacing-lg: 1.5rem;
+    --spacing-xl: 2rem;
+}
+
+@media (prefers-color-scheme: dark) {
+    :host {
+        /* Dark theme colors */
+        --color-bg: hsl(220, 10%, 10%);
+        --color-text: hsl(220, 10%, 80%);
+        --color-primary-0: hsl(220, 100%, 10%);
+        --color-primary-1: hsl(220, 100%, 20%);
+        --color-primary-2: hsl(220, 100%, 30%);
+        --color-primary-3: hsl(220, 100%, 40%);
+        --color-primary-4: hsl(220, 100%, 50%);
+        --color-primary-5: hsl(220, 100%, 60%);
+        --color-primary-6: hsl(220, 100%, 70%);
+        --color-primary-7: hsl(220, 100%, 80%);
+        --color-primary-8: hsl(220, 100%, 90%);
+
+        /* Neutral colors */
+        --color-neutral-0: hsl(220, 10%, 20%);
+        --color-neutral-1: hsl(220, 10%, 25%);
+        --color-neutral-2: hsl(220, 10%, 40%);
+        --color-neutral-3: hsl(220, 10%, 50%);
+        --color-neutral-4: hsl(220, 10%, 60%);
+        --color-neutral-5: hsl(220, 10%, 70%);
+        --color-neutral-6: hsl(220, 10%, 80%);
+        --color-neutral-7: hsl(220, 10%, 90%);
+
+        /* Valid accent */
+        --color-accent-green-0: hsl(120, 60%, 20%);
+        --color-accent-green-1: hsl(120, 60%, 30%);
+        --color-accent-green-2: hsl(120, 60%, 40%);
+        --color-accent-green-3: hsl(120, 60%, 50%);
+        --color-accent-green-4: hsl(120, 60%, 60%);
+        --color-accent-green-5: hsl(120, 60%, 70%);
+        --color-accent-green-6: hsl(120, 60%, 80%);
+        --color-accent-green-7: hsl(120, 60%, 90%);
+
+        /* Error accent */
+        --color-accent-red-0: hsl(0, 100%, 20%);
+        --color-accent-red-1: hsl(0, 100%, 30%);
+        --color-accent-red-2: hsl(0, 100%, 40%);
+        --color-accent-red-3: hsl(0, 100%, 50%);
+        --color-accent-red-4: hsl(0, 100%, 60%);
+        --color-accent-red-5: hsl(0, 100%, 70%);
+        --color-accent-red-6: hsl(0, 100%, 80%);
+        --color-accent-red-7: hsl(0, 100%, 90%);
+
+        /* Warning accent */
+        --color-accent-yellow-0: hsl(40, 100%, 20%);
+        --color-accent-yellow-1: hsl(40, 100%, 30%);
+        --color-accent-yellow-2: hsl(40, 100%, 40%);
+        --color-accent-yellow-3: hsl(40, 100%, 50%);
+        --color-accent-yellow-4: hsl(40, 100%, 60%);
+        --color-accent-yellow-5: hsl(40, 100%, 70%);
+        --color-accent-yellow-6: hsl(40, 100%, 80%);
+        --color-accent-yellow-7: hsl(40, 100%, 90%);
+    }
+}
+
+:host {
+    --container-max-width: 1200px;
+}
+
+/* Responsive adjustments */
+@media (max-width: 640px) {
+    :host {
+        --container-max-width: 640px;
+    }
+}
+
+@media (max-width: 768px) {
+    :host {
+        --container-max-width: 768px;
+    }
+}
+
+@media (max-width: 1024px) {
+    :host {
+        --container-max-width: 1024px;
+    }
+}
+
+@media (max-width: 1280px) {
+    :host {
+        --container-max-width: 1280px;
+    }
+}
+
+@media (max-width: 1536px) {
+    :host {
+        --container-max-width: 1536px;
+    }
+}
+
+/* Responsive container class i.e based on the screen width*/
+.container {
+    width: 100%;
+    max-width: var(--container-max-width);
+    margin-left: auto;
+    margin-right: auto;
+    padding-left: var(--spacing-md);
+    padding-right: var(--spacing-md);
+}
+
+/* Global styles */
+body {
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+        Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+    font-size: var(--font-size-md);
+    line-height: 1.5;
+    color: var(--color-text);
+    background-color: var(--color-bg);
+    margin: 0;
+    padding: 0;
+}
+
+main {
+    padding-top: var(--spacing-lg);
+    padding-bottom: var(--spacing-lg);
+    width: var(--container-max-width);
+    margin: 0 auto;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+    margin-top: var(--spacing-lg);
+    margin-bottom: var(--spacing-md);
+    line-height: 1.2;
+}
+
+h1 {
+    font-size: var(--font-size-xl);
+}
+
+h2 {
+    font-size: var(--font-size-lg);
+}
+
+h3 {
+    font-size: var(--font-size-md);
+}
+
+h4,
+h5,
+h6 {
+    font-size: var(--font-size-sm);
+}
+
+p {
+    margin-bottom: var(--spacing-md);
+}
+
+a {
+    color: var(--color-primary-5);
+    text-decoration: none;
+}
+
+a:hover {
+    text-decoration: underline;
+}
+
+/* Form elements */
+input,
+textarea,
+select {
+    font-size: var(--font-size-md);
+    padding: var(--spacing-xs) var(--spacing-sm);
+    border: 1px solid var(--color-neutral-1);
+    background-color: var(--color-neutral-1);
+    border-radius: 4px;
+    color: var(--color-text);
+    box-shadow: inset 0 1px 2px var(--color-neutral-1);
+    transition:
+        background-color 0.2s,
+        border-color 0.2s;
+}
+
+input:focus,
+textarea:focus,
+select:focus {
+    border-color: var(--color-primary-5);
+    background-color: var(--color-neutral-0);
+    box-shadow: 0 0 0 2px var(--color-primary-5);
+}
+
+button {
+    font-size: var(--font-size-md);
+    padding: var(--spacing-xs) var(--spacing-md);
+    background-color: var(--color-primary-3);
+    color: white;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    transition: background-color 0.2s ease;
+}
+
+button:hover {
+    background-color: var(--color-primary-4);
+}
+
+/* Lists */
+ul,
+ol {
+    margin-bottom: var(--spacing-md);
+    padding-left: var(--spacing-lg);
+}
+
+/* Table */
+table {
+    border-collapse: collapse;
+    width: 100%;
+    margin-bottom: var(--spacing-md);
+}
+
+th,
+td {
+    border: 1px solid var(--color-muted);
+    padding: var(--spacing-xs) var(--spacing-sm);
+    text-align: left;
+}
+
+th {
+    background-color: var(--color-neutral-0);
+    font-weight: bold;
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+    :host {
+        --font-size-xl: 1.125rem;
+        --font-size-lg: 1rem;
+        --font-size-md: 0.875rem;
+        --font-size-sm: 0.75rem;
+        --font-size-xs: 0.675rem;
+    }
+
+    body {
+        font-size: var(--font-size-sm);
+    }
+}
+`;
 class MyHeader extends HTMLElement {
-    constructor () {
+    constructor() {
         super();
-        this.attachShadow({mode: 'open'});
+        this.attachShadow({ mode: 'open' });
     }
     connectedCallback() {
         this.shadowRoot.innerHTML = `
-        <style>
-            :host {
-                display: block;
-                margin-bottom: 2rem;
-                --background-color: white;
-            }
-            :host (prefers-color-scheme: dark) {
-                --background-color: #333;
-            }
-
-            header {
-                background-color: var(--background-color);
-                box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
-                padding: 16px;
-            }
-
-            .logo {
-                font-size: 24px;
-                font-weight: bold;
-                color: #333;
-            }
-            nav {
-                display: flex;
-                justify-content: flex-end;
-                margin-top: 1rem;
-                gap: 2rem;
-            }
-            .nav-item {
-                margin-left: 16px;
-            }
-
-            .nav-link {
-                color: #666;
-                text-decoration: none;
-            }
-
-            .nav-link:hover {
-                color: #000;
-            }
-        </style>
-
-        <header>
-            <div style="max-width: 960px; margin: 0 auto;">
-                <div class="logo">My Blog</div>
-                <nav>
-                    <slot name="nav-items">
-                        <a href="index.html" class="nav-link">Home</a>
-                        <a href="tech.html" class="nav-link">Tech</a>
-                        <a href="lifestyle.html" class="nav-link">Lifestyle</a>
-                        <a href="travel.html" class="nav-link">Travel</a>
-                        <a href="about.html" class="nav-link">About</a>
-                    </slot>
-                </nav>
-            </div>
-        </header>
-        `;
+    <style>
+       ${styleString}
+    </style>
+
+    <header>
+        <div class="container">
+            <h1>Akhil N</h1>
+            <nav style="display: flex; gap: 1rem;">
+                <slot name="nav-items">
+                    <a href="index.html" class="nav-link">Home</a>
+                    <a href="tech.html" class="nav-link">Tech</a>
+                    <a href="lifestyle.html" class="nav-link">Lifestyle</a>
+                    <a href="travel.html" class="nav-link">Travel</a>
+                    <a href="about.html" class="nav-link">About</a>
+                </slot>
+            </nav>
+        </div>
+    </header>
+`;
     }
 
 }
+
 customElements.define('my-header', MyHeader);
diff --git a/publish/drafts/post1.html b/publish/drafts/post1.html
index e454d23..13b0451 100644
--- a/publish/drafts/post1.html
+++ b/publish/drafts/post1.html
@@ -8,19 +8,16 @@
     <script src="myFooter.js"></script>
 </head>
 
-<body class="bg-gray-100">
-
+<body>
     <my-header></my-header>
-
-    <main class="container mx-auto px-6 py-8">
-        <section>
-            <h2 class="text-2xl font-semibold mb-4">Post 1</h2>
-            <p class="bg-white p-4 rounded shadow">
+    <main>
+        <article>
+            <h2>First Blog Post</h2>
+            <p>
                 Welcome to my blog! I'm passionate about [your interests].
                 Here, I share my thoughts on [blog topics].
             </p>
-        </section>
+        </article>
     </main>
-
     <my-footer></my-footer>
 </body>
diff --git a/publish/drafts/post2.html b/publish/drafts/post2.html
index 9c224a5..b5e099a 100644
--- a/publish/drafts/post2.html
+++ b/publish/drafts/post2.html
@@ -3,21 +3,19 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta name="date" content="2024-07-19">
     <title>First Blog Post</title>
-    <link rel="stylesheet" href="output.css">
+    <link rel="stylesheet" href="global.css">
     <script src="myHeader.js"></script>
     <script src="myFooter.js"></script>
 </head>
 
 <body class="bg-gray-100">
     <my-header></my-header>
-    <main class="container mx-auto px-6 py-8">
-        <section>
-            <h2 class="text-2xl font-semibold mb-4">Post 2</h2>
-            <p class="bg-white p-4 rounded shadow">
-                Welcome to my blog! I'm passionate about [your interests].
-                Here, I share my thoughts on [blog topics].
-            </p>
-        </section>
+    <main>
+        <article>
+            <h2>Second Blog Post</h2>
+            <p>Welcome to my blog! I'm passionate about [your interests]. Here, I share my
+                thoughts on [blog topics].</p>
+        </article>
     </main>
 
     <my-footer></my-footer>