fix some style issue

Signed-off-by: Avinal Kumar <avinal.xlvii@gmail.com>

public/foo-style.css

@@ -30,12 +30,12 @@ figcaption,
 figure,
 footer,
 form,
-h1,
+/* h1,
 h2,
 h3,
 h4,
 h5,
-h6,
+h6, */
 header,
 hgroup,
 html,

public/index.html

@@ -5,9 +5,8 @@
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <!-- <link rel="stylesheet" href="/website/post-style.css"> -->
-    <!-- <link rel="stylesheet" href="/website/foo-style.css"> -->
-    <link rel="stylesheet" href="/website/trymerge.css">
+    <link rel="stylesheet" href="/website/post-style.css">
+    <link rel="stylesheet" href="/website/foo-style.css">
 
     <title>Document</title>
     <script src="/website/redirect.js"></script>

public/post-style.css

@@ -412,8 +412,8 @@
   padding-left: 4rem;
 }
 
-body h1,
-body .h1 {
+h1,
+.h1 {
   display: block;
   margin-top: 3rem;
   margin-bottom: 1rem;
@@ -426,8 +426,8 @@ body .h1 {
   -webkit-font-smoothing: antialiased;
 }
 
-body h2,
-body .h2 {
+h2,
+.h2 {
   position: relative;
   display: block;
   margin-top: 2rem;
@@ -439,16 +439,16 @@ body .h2 {
   font-size: 1rem;
 }
 
-body h3 {
+h3 {
   color: #eee;
   text-decoration: underline;
   font-weight: bold;
   font-size: 0.9rem;
 }
 
-body h4,
-body h5,
-body h6 {
+h4,
+h5,
+h6 {
   display: inline;
   text-decoration: none;
   color: #ccc;
@@ -456,15 +456,15 @@ body h6 {
   font-size: 0.9rem;
 }
 
-body h3,
-body h4,
-body h5,
-body h6 {
+h3,
+h4,
+h5,
+h6 {
   margin-top: 0.9rem;
   margin-bottom: 0.5rem;
 }
 
-body hr {
+hr {
   border: 0.5px dashed #ccc;
   opacity: 0.5;
   margin: 0;
@@ -472,63 +472,63 @@ body hr {
   margin-bottom: 20px;
 }
 
-body strong {
+strong {
   font-weight: bold;
 }
 
-body em,
-body cite {
+em,
+cite {
   font-style: italic;
 }
 
-body sup,
-body sub {
+sup,
+sub {
   position: relative;
   vertical-align: baseline;
   font-size: 0.75em;
   line-height: 0;
 }
 
-body sup {
+sup {
   top: -0.5em;
 }
 
-body sub {
+sub {
   bottom: -0.2em;
 }
 
-body small {
+small {
   font-size: 0.85em;
 }
 
-body acronym,
-body abbr {
+acronym,
+abbr {
   border-bottom: 1px dotted;
 }
 
-body ul,
-body ol,
-body dl {
+ul,
+ol,
+dl {
   line-height: 1.725;
 }
 
-body ul ul,
-body ol ul,
-body ul ol,
-body ol ol {
+ul ul,
+ol ul,
+ul ol,
+ol ol {
   margin-top: 0;
   margin-bottom: 0;
 }
 
-body ol {
+ol {
   list-style: decimal;
 }
 
-body dt {
+dt {
   font-weight: bold;
 }
 
-body table {
+table {
   width: 100%;
   border-collapse: collapse;
   text-align: left;
@@ -537,7 +537,7 @@ body table {
   display: block;
 }
 
-body th {
+th {
   padding: 8px;
   border-bottom: 1px dashed #908d8d;
   color: #eee;
@@ -545,7 +545,7 @@ body th {
   font-size: 13px;
 }
 
-body td {
+td {
   padding: 0 8px;
   border-bottom: none;
 }
@@ -600,7 +600,7 @@ html {
   -ms-text-size-adjust: 100%;
 }
 
-body {
+/*  {
   margin: 0;
   height: 100%;
   background-color: #1d1f21;
@@ -614,7 +614,7 @@ body {
   flex: 1;
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
-}
+} */
 
 .content {
   position: relative;

src/Blog.elm

@@ -35,7 +35,7 @@ view model =
     div [ class "foo-interface" ]
         [ div [ class "max-width mx-auto px3 ltr" ]
             [ div [ class "content index py4" ]
-                (textToHtml testString)
+                (textToHtml postString)
             ]
         ]
 
@@ -142,3 +142,103 @@ testString =
         </ul>
     </section>
     """
+
+
+postString : String
+postString =
+    """
+    <article class="post" itemscope itemtype="http://schema.org/BlogPosting">
+    <header>
+        <h1 class="posttitle" itemprop="name headline">
+            Hello World
+        </h1>
+        <div class="meta">
+            <span class="author" itemprop="author" itemscope itemtype="http://schema.org/Person">
+                <span itemprop="name"></span>
+            </span>
+            <div class="postdate">
+                <time datetime="2022-09-05T17:21:59.000Z" itemprop="datePublished">2022-09-05</time>
+            </div>
+            <div class="article-category">
+                <i class="fas fa-archive"></i>
+                <a class="category-link" href="/categories/tech/">tech<span class="category-count">1</span></a>
+            </div>
+            <div class="article-tag">
+                <i class="fas fa-tag"></i>
+                <a class="tag-link-link" href="/tags/gyus-feaiugy/" rel="tag">gyus, feaiugy</a>
+            </div>
+        </div>
+    </header>
+    <div class="content" itemprop="articleBody">
+        <p>Welcome to <a target="_blank" rel="noopener" href="https://hexo.io/">Hexo</a>! This is your very first post.
+            Check <a target="_blank" rel="noopener" href="https://hexo.io/docs/">documentation</a> for more info. If you
+            get any problems when using Hexo, you can find the answer in <a target="_blank" rel="noopener"
+                href="https://hexo.io/docs/troubleshooting.html">troubleshooting</a> or you can ask me on <a
+                target="_blank" rel="noopener" href="https://github.com/hexojs/hexo/issues">GitHub</a>.</p>
+        <h2 id="Quick-Start"><a href="#Quick-Start" class="headerlink" title="Quick Start"></a>Quick Start</h2>
+        <h3 id="Create-a-new-post"><a href="#Create-a-new-post" class="headerlink" title="Create a new post"></a>Create
+            a new post</h3>
+        <figure class="highlight bash">
+            <table>
+                <tr>
+                    <td class="gutter">
+                        <pre><span class="line">1</span><br></pre>
+                    </td>
+                    <td class="code">
+                        <pre><span class="line">$ hexo new <span class="string">&quot;My New Post&quot;</span></span><br></pre>
+                    </td>
+                </tr>
+            </table>
+        </figure>
+        <p>More info: <a target="_blank" rel="noopener" href="https://hexo.io/docs/writing.html">Writing</a></p>
+        <h3 id="Run-server"><a href="#Run-server" class="headerlink" title="Run server"></a>Run server</h3>
+        <figure class="highlight bash">
+            <table>
+                <tr>
+                    <td class="gutter">
+                        <pre><span class="line">1</span><br></pre>
+                    </td>
+                    <td class="code">
+                        <pre><span class="line">$ hexo server</span><br></pre>
+                    </td>
+                </tr>
+            </table>
+        </figure>
+        <p>More info: <a target="_blank" rel="noopener" href="https://hexo.io/docs/server.html">Server</a></p>
+        <h3 id="Generate-static-files"><a href="#Generate-static-files" class="headerlink"
+                title="Generate static files"></a>Generate static files</h3>
+        <figure class="highlight bash">
+            <table>
+                <tr>
+                    <td class="gutter">
+                        <pre><span class="line">1</span><br></pre>
+                    </td>
+                    <td class="code">
+                        <pre><span class="line">$ hexo generate</span><br></pre>
+                    </td>
+                </tr>
+            </table>
+        </figure>
+
+        <p>More info: <a target="_blank" rel="noopener" href="https://hexo.io/docs/generating.html">Generating</a></p>
+        <h3 id="Deploy-to-remote-sites"><a href="#Deploy-to-remote-sites" class="headerlink"
+                title="Deploy to remote sites"></a>Deploy to remote sites</h3>
+        <figure class="highlight bash">
+            <table>
+                <tr>
+                    <td class="gutter">
+                        <pre><span class="line">1</span><br></pre>
+                    </td>
+                    <td class="code">
+                        <pre><span class="line">$ hexo deploy</span><br></pre>
+                    </td>
+                </tr>
+            </table>
+        </figure>
+
+        <p>More info: <a target="_blank" rel="noopener"
+                href="https://hexo.io/docs/one-command-deployment.html">Deployment</a></p>
+
+    </div>
+</article>
+    """