feat(post): first draft of styling

posts/from-github-pages-to-aws.html

@@ -24,13 +24,16 @@
     </header>
     <main class="main">
       <div class="post-container">
-        <header class="post-header">
+        <div class="header-container">
-          <h1 class="post-title">From GitHub Pages to AWS</h1>
+          <header class="post-header">
-          <p class="post-meta">
+            <h1 class="post-title">From GitHub Pages to AWS</h1>
-            <time datetime="2024-06-15">15/06/2024</time>
+            <p class="post-meta">
-          </p>
+              <time datetime="2024-06-15">15/06/2024</time>
-        </header>
+            </p>
+          </header>
+        </div>
         <article>
+          <h2>a subheading you will fix</h2>
           <p>
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla felis
             quam, varius eu ullamcorper ac, tempus eget risus. Vestibulum ante
@@ -60,5 +63,6 @@
       </div>
     </main>
     <script src="../scripts/common.js"></script>
+    <script src="../scripts/post.js"></script>
   </body>
 </html>

scripts/post.js

@@ -0,0 +1,8 @@
+const h2s = document.querySelectorAll("article h2");
+
+h2s.forEach((h2) => {
+  const mdHeading = document.createElement("span");
+  mdHeading.textContent = "# ";
+  mdHeading.style.color = "#0073e6";
+  h2.prepend(mdHeading);
+});

styles/post.css

@@ -1,31 +1,3 @@
-@font-face {
-  font-family: "Signifier";
-  src: url("public/signifier/Signifier-Regular.ttf");
-  font-weight: normal;
-  font-style: normal;
-}
-
-@font-face {
-  font-family: "Signifier";
-  src: url("public/signifier/Signifier-Italic.ttf");
-  font-weight: normal;
-  font-style: italic;
-}
-
-@font-face {
-  font-family: "Signifier";
-  src: url("public/signifier/Signifier-Bold.ttf");
-  font-weight: bold;
-  font-style: normal;
-}
-
-@font-face {
-  font-family: "Signifier";
-  src: url("public/signifier/Signifier-BoldItalic.ttf");
-  font-weight: bold;
-  font-style: italic;
-}
-
 html,
 body {
   font-family: "Signifier", serif;
@@ -34,3 +6,74 @@ body {
   padding: 0;
   height: 100%;
 }
+
+header {
+  font-size: 1.5em;
+  display: flex;
+  padding: 20px;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.main {
+  display: flex;
+  justify-content: center;
+}
+
+.post-header {
+  padding: 0;
+}
+
+.post-container {
+  max-width: 80%;
+}
+
+.post-title {
+  font-weight: normal;
+}
+
+.post-meta {
+  font-style: italic;
+  /* space between date and title */
+  margin-left: 100px;
+}
+
+.post-title {
+  font-weight: normal;
+}
+
+.post-title {
+  width: 100%;
+  position: relative;
+  display: inline-block;
+}
+
+.post-title::before {
+  content: "";
+  position: absolute;
+  background-color: #0073e6;
+  height: 30px;
+  width: 2px;
+  bottom: -10px;
+  left: -20px;
+}
+
+.post-title::after {
+  content: "";
+  position: absolute;
+  background-color: #0073e6;
+  width: 200px;
+  height: 2px;
+  bottom: -10px;
+  left: -20px;
+}
+
+article {
+  font-size: 1.5em;
+  line-height: 1.2em;
+}
+
+article h2 {
+  font-weight: normal;
+  font-style: italic;
+}