fix some style issue

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

public/index.html

@@ -7,7 +7,8 @@
     <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="preload" as="style" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css"
+    crossorigin="anonymous" onload="this.onload=null;this.rel='stylesheet'" />
     <title>Document</title>
     <script src="/website/redirect.js"></script>
 </head>
@@ -16,14 +17,34 @@
     <div id="app"></div>
    
     <script src="/website/app.js"></script>
-    <script>
-        var app = Elm.Main.init({ node: document.getElementById("app") });
-    </script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" crossorigin="anonymous"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.7/clipboard.min.js"
         crossorigin="anonymous"></script>
+    <script>
+        var app = Elm.Main.init({ node: document.getElementById("app") });
 
-    <script type="text/javascript">
+        $(function () {
+            // copy-btn HTML
+            var btn = "<span class=\"btn-copy tooltipped tooltipped-sw\" aria-label=\"Copy to clipboard!\">";
+            btn += '<i class="far fa-clone"></i>';
+            btn += '</span>';
+            // mount it!
+            $(".highlight table").before(btn);
+            var clip = new ClipboardJS('.btn-copy', {
+                text: function (trigger) {
+                    return Array.from(trigger.nextElementSibling.querySelectorAll('.code')).reduce((str, it) => str + it.innerText + '\n', '')
+                }
+            });
+            clip.on('success', function (e) {
+                e.trigger.setAttribute('aria-label', "Copied!");
+                e.clearSelection();
+            })
+        });
+    </script>
+
+    
+
+     <!-- <script type="text/javascript">
         $(function () {
             // copy-btn HTML
             var btn = "<span class=\"btn-copy tooltipped tooltipped-sw\" aria-label=\"Copy to clipboard!\">";
@@ -41,7 +62,7 @@
                 e.clearSelection();
             })
         })
-    </script>
+    </script> -->
 </body>
 
 </html>

src/Blog.elm

@@ -170,64 +170,30 @@ postString =
 
 
       
-
+    <div class="article-category">
-
+        <i class="fas fa-archive"></i>
-            <div class="article-tag">
+        <a class="category-link" href="/categories/tech/">tech<span class="category-count">2</span></a>
-                <i class="fas fa-tag"></i>
-                <a class="tag-link-link" href="/tags/example/" rel="tag">example</a>, <a class="tag-link-link"
-                    href="/tags/features/" rel="tag">features</a>
     </div>
 
 
+      
+
     </div>
   </div>
   
 
   <div class="content" itemprop="articleBody">
-        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec at dolor a sem consequat facilisis ut et
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec at dolor a sem consequat facilisis ut et augue. Vestibulum vestibulum lectus erat, id tincidunt sapien laoreet non. Ut nec ante eu lorem posuere fringilla sit amet in tortor.</p>
-            augue. Vestibulum vestibulum lectus erat, id tincidunt sapien laoreet non. Ut nec ante eu lorem posuere
+<h2 id="This-is-a-subtitle"><a href="#This-is-a-subtitle" class="headerlink" title="This is a subtitle"></a>This is a subtitle</h2><p>Quisque ac maximus ligula, sed sagittis est. Integer venenatis pellentesque elit. Donec molestie turpis sit amet sodales cursus. Sed at risus cursus, feugiat lacus sit amet, rutrum sem. Vestibulum accumsan dui urna, vel feugiat lectus malesuada id. Quisque in interdum turpis, et pulvinar tortor. Vivamus tincidunt purus eu libero viverra, at posuere dolor gravida.</p>
-            fringilla sit amet in tortor.</p>
+<figure class="highlight python"><figcaption><span>Hello world</span><a target="_blank" rel="noopener" href="http://github.com">hello_world.py</a></figcaption><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">print</span> <span class="string">&quot;Hello World!&quot;</span></span><br><span class="line">=&gt; <span class="string">&quot;Hello World!&quot;</span></span><br></pre></td></tr></table></figure>
-        <h2 id="This-is-a-subtitle"><a href="#This-is-a-subtitle" class="headerlink" title="This is a subtitle"></a>This
-            is a subtitle</h2>
-        <p>Quisque ac maximus ligula, sed sagittis est. Integer venenatis pellentesque elit. Donec molestie turpis sit
-            amet sodales cursus. Sed at risus cursus, feugiat lacus sit amet, rutrum sem. Vestibulum accumsan dui urna,
-            vel feugiat lectus malesuada id. Quisque in interdum turpis, et pulvinar tortor. Vivamus tincidunt purus eu
-            libero viverra, at posuere dolor gravida.</p>
-        <figure class="highlight python">
-            <figcaption><span>Hello world
 
-                </span></figcaption>
+<h2 id="This-is-a-second-subtitle"><a href="#This-is-a-second-subtitle" class="headerlink" title="This is a second subtitle"></a>This is a second subtitle</h2><p>Donec venenatis eu nunc non accumsan. Etiam elementum dapibus urna, ac mattis tortor volutpat a. Pellentesque eu purus metus. Curabitur vel nulla ut odio congue vulputate. Morbi lacinia tellus sit amet facilisis dictum. Nullam a erat felis. Vestibulum nec diam ac nisi pharetra tincidunt. Ut vitae ullamcorper ipsum. Sed vehicula vehicula dolor. Quisque ac tortor a neque scelerisque venenatis.</p>
-            <table>
+<img src="/assets/wallpaper-878514.jpg" class="" title="Wallpaper">
-                <tr>
-                    <td class="gutter">
-                        <pre><span class="line">1</span><br><span class="line">2</span><br></pre>
-                    </td>
-                    <td class="code">
-                        <pre><span class="line"><span class="built_in">print</span> <span class="string">&quot;Hello World!&quot;</span></span><br><span class="line">=&gt; <span class="string">&quot;Hello World!&quot;</span></span><br></pre>
-                    </td>
-                </tr>
-            </table>
-        </figure>
 
-        <h2 id="This-is-a-second-subtitle"><a href="#This-is-a-second-subtitle" class="headerlink"
+<blockquote class="pullquote right"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque hendrerit lacus ut purus iaculis feugiat.</p>
-                title="This is a second subtitle"></a>This is a second subtitle</h2>
+</blockquote>
-        <p>Donec venenatis eu nunc non accumsan. Etiam elementum dapibus urna, ac mattis tortor volutpat a. Pellentesque
-            eu purus metus. Curabitur vel nulla ut odio congue vulputate. Morbi lacinia tellus sit amet facilisis
-            dictum. Nullam a erat felis. Vestibulum nec diam ac nisi pharetra tincidunt. Ut vitae ullamcorper ipsum. Sed
-            vehicula vehicula dolor. Quisque ac tortor a neque scelerisque venenatis.</p>
-        <img src="/assets/wallpaper-878514.jpg" class="" title="Wallpaper">
 
-        <blockquote class="pullquote right">
+<p>Mauris quis lorem id arcu lobortis finibus in quis mauris. Cras lacinia neque arcu, id viverra nunc pretium eget. Aenean eu luctus diam. Maecenas blandit eros in fermentum cursus. Pellentesque hendrerit ipsum orci, tempor facilisis est maximus at. Suspendisse potenti. Sed eleifend ullamcorper eleifend. Nullam tincidunt eget ex vitae blandit. Donec molestie iaculis elementum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Maecenas in suscipit ex. Integer molestie felis mi, in commodo dolor fermentum a. Cras blandit auctor enim, eu rhoncus turpis ullamcorper id.</p>
-            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque hendrerit lacus ut purus iaculis
-                feugiat.</p>
-        </blockquote>
-
-        <p>Mauris quis lorem id arcu lobortis finibus in quis mauris. Cras lacinia neque arcu, id viverra nunc pretium
-            eget. Aenean eu luctus diam. Maecenas blandit eros in fermentum cursus. Pellentesque hendrerit ipsum orci,
-            tempor facilisis est maximus at. Suspendisse potenti. Sed eleifend ullamcorper eleifend. Nullam tincidunt
-            eget ex vitae blandit. Donec molestie iaculis elementum. Interdum et malesuada fames ac ante ipsum primis in
-            faucibus. Maecenas in suscipit ex. Integer molestie felis mi, in commodo dolor fermentum a. Cras blandit
-            auctor enim, eu rhoncus turpis ullamcorper id.</p>
 
   </div>
 </article>

src/Splash.elm

@@ -23,8 +23,8 @@ view model =
                 , height 130
                 ]
                 []
-            , p [ class "foo-support__message" ] [ text model.support_message ]
+            , div [ class "foo-support__message" ] [ text model.support_message ]
-            , p [ class "foo-error__message" ] [ text model.error_message ]
+            , div [ class "foo-error__message" ] [ text model.error_message ]
             ]
         ]