code cleanupdev

author: realtradam <[email protected]> 2024-07-28 20:00:49 -0400
committer: realtradam <[email protected]> 2024-07-28 20:00:49 -0400
commit: fc34d9853386b6dbf270a10862a47a052f1fb151 (patch)
tree: 20ebca59324d88eab8b867306dd251a27cd91699 /backend/src/main/resources/templates/post.html
parent: c24839e8f8b4b6868f8ee383b589ce01dcdc81e1 (diff)
download: spring-blog-dev.tar.gz
spring-blog-dev.zip
1 files changed, 85 insertions, 32 deletions
diff --git a/backend/src/main/resources/templates/post.html b/backend/src/main/resources/templates/post.html
index a775ff2..75d39cc 100644
--- a/backend/src/main/resources/templates/post.html
+++ b/backend/src/main/resources/templates/post.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" xmlns:th="http://www.thymeleaf.org">
+<html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -8,7 +8,8 @@
     <meta name="author" content="name">
     <meta name="description" content="description here">
     <meta name="keywords" content="keywords,here">
-    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/tailwind.min.css"/> <!--Replace with your tailwind.css once created-->
+    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/tailwind.min.css"/>
+    <!--Replace with your tailwind.css once created-->
     <link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" rel="stylesheet">
     <style>
         .smooth {transition: box-shadow 0.3s ease-in-out;}
@@ -24,42 +25,74 @@
 <!--Nav-->
 
 
-
 <!--Title-->
 <div class="text-center pt-16 md:pt-32">
-    <p class="text-sm md:text-base text-green-500 font-bold">04 JULY 2023 <span class="text-gray-900">/</span> GETTING STARTED</p>
+    <p class="text-sm md:text-base text-green-500 font-bold">04 JULY 2023 <span class="text-gray-900">/</span> GETTING
+        STARTED</p>
     <h1 class="font-bold break-normal text-3xl md:text-5xl">Welcome to Ghostwind CSS</h1>
 </div>
 
 <!--image-->
-<div class="container w-full max-w-6xl mx-auto bg-white bg-cover mt-8 rounded" style="background-image:url('https://source.unsplash.com/collection/1118905/'); height: 75vh;"></div>
+<div class="container w-full max-w-6xl mx-auto bg-white bg-cover mt-8 rounded"
+     style="background-image:url('https://source.unsplash.com/collection/1118905/'); height: 75vh;"></div>
 
 <!--Container-->
 <div class="container max-w-5xl mx-auto -mt-32">
 
     <div class="mx-0 sm:mx-6">
 
-        <div class="bg-white w-full p-8 md:p-24 text-xl md:text-2xl text-gray-800 leading-normal" style="font-family:Georgia,serif;">
+        <div class="bg-white w-full p-8 md:p-24 text-xl md:text-2xl text-gray-800 leading-normal"
+             style="font-family:Georgia,serif;">
 
             <!--Post Content-->
 
 
             <!--Lead Para-->
             <p class="text-2xl md:text-3xl mb-5">
-                👋 Welcome fellow <a class="text-gray-800 hover:text-green-500 no-underline border-b-2 border-green-500" href="https://www.tailwindcss.com">Tailwind CSS</a> and <a class="text-gray-800 hover:text-green-500 no-underline border-b-2 border-green-500" href="https://www.ghost.org">Ghost</a> fan.  This starter template is an attempt to replicate the default Ghost theme <a class="text-gray-800 hover:text-green-500 no-underline border-b-2 border-green-500" href="https://demo.ghost.io/welcome">"Casper"</a> using Tailwind CSS and vanilla Javascript.
+                👋 Welcome fellow <a class="text-gray-800 hover:text-green-500 no-underline border-b-2 border-green-500"
+                                    href="https://www.tailwindcss.com">Tailwind CSS</a> and <a
+                    class="text-gray-800 hover:text-green-500 no-underline border-b-2 border-green-500"
+                    href="https://www.ghost.org">Ghost</a> fan. This starter template is an attempt to replicate the
+                default Ghost theme <a
+                    class="text-gray-800 hover:text-green-500 no-underline border-b-2 border-green-500"
+                    href="https://demo.ghost.io/welcome">"Casper"</a> using Tailwind CSS and vanilla Javascript.
             </p>
 
-            <p class="py-6">The basic blog page layout is available and all using the default Tailwind CSS classes (although there are a few hardcoded style tags). If you are going to use this in your project, you will want to convert the classes into components.</p>
+            <p class="py-6">The basic blog page layout is available and all using the default Tailwind CSS classes
+                (although there are a few hardcoded style tags). If you are going to use this in your project, you will
+                want to convert the classes into components.</p>
 
-            <p class="py-6">Sed dignissim lectus ut tincidunt vulputate. Fusce tincidunt lacus purus, in mattis tortor sollicitudin pretium. Phasellus at diam posuere, scelerisque nisl sit amet, tincidunt urna. Cras nisi diam, pulvinar ut molestie eget, eleifend ac magna. Sed at lorem condimentum, dignissim lorem eu, blandit massa. Phasellus eleifend turpis vel erat bibendum scelerisque. Maecenas id risus dictum, rhoncus odio vitae, maximus purus. Etiam efficitur dolor in dolor molestie ornare. Aenean pulvinar diam nec neque tincidunt, vitae molestie quam fermentum. Donec ac pretium diam. Suspendisse sed odio risus. Nunc nec luctus nisi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis nec nulla eget sem dictum elementum.</p>
+            <p class="py-6">Sed dignissim lectus ut tincidunt vulputate. Fusce tincidunt lacus purus, in mattis tortor
+                sollicitudin pretium. Phasellus at diam posuere, scelerisque nisl sit amet, tincidunt urna. Cras nisi
+                diam, pulvinar ut molestie eget, eleifend ac magna. Sed at lorem condimentum, dignissim lorem eu,
+                blandit massa. Phasellus eleifend turpis vel erat bibendum scelerisque. Maecenas id risus dictum,
+                rhoncus odio vitae, maximus purus. Etiam efficitur dolor in dolor molestie ornare. Aenean pulvinar diam
+                nec neque tincidunt, vitae molestie quam fermentum. Donec ac pretium diam. Suspendisse sed odio risus.
+                Nunc nec luctus nisi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos
+                himenaeos. Duis nec nulla eget sem dictum elementum.</p>
 
             <ol>
-                <li class="py-3">Maecenas accumsan lacus sit amet elementum porta. Aliquam eu libero lectus. Fusce vehicula dictum mi. In non dolor at sem ullamcorper venenatis ut sed dui. Ut ut est quam. Suspendisse quam quam, commodo sit amet placerat in, interdum a ipsum. Morbi sit amet tellus scelerisque tortor semper posuere.</li>
-                <li class="py-3">Morbi varius posuere blandit. Praesent gravida bibendum neque eget commodo. Duis auctor ornare mauris, eu accumsan odio viverra in. Proin sagittis maximus pharetra. Nullam lorem mauris, faucibus ut odio tempus, ultrices aliquet ex. Nam id quam eget ipsum luctus hendrerit. Ut eros magna, eleifend ac ornare vulputate, pretium nec felis.</li>
-                <li class="py-3">Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc vitae pretium elit. Cras leo mauris, tristique in risus ac, tristique rutrum velit. Mauris accumsan tempor felis vitae gravida. Cras egestas convallis malesuada. Etiam ac ante id tortor vulputate pretium. Maecenas vel sapien suscipit, elementum odio et, consequat tellus.</li>
+                <li class="py-3">Maecenas accumsan lacus sit amet elementum porta. Aliquam eu libero lectus. Fusce
+                    vehicula dictum mi. In non dolor at sem ullamcorper venenatis ut sed dui. Ut ut est quam.
+                    Suspendisse quam quam, commodo sit amet placerat in, interdum a ipsum. Morbi sit amet tellus
+                    scelerisque tortor semper posuere.
+                </li>
+                <li class="py-3">Morbi varius posuere blandit. Praesent gravida bibendum neque eget commodo. Duis auctor
+                    ornare mauris, eu accumsan odio viverra in. Proin sagittis maximus pharetra. Nullam lorem mauris,
+                    faucibus ut odio tempus, ultrices aliquet ex. Nam id quam eget ipsum luctus hendrerit. Ut eros
+                    magna, eleifend ac ornare vulputate, pretium nec felis.
+                </li>
+                <li class="py-3">Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
+                    Nunc vitae pretium elit. Cras leo mauris, tristique in risus ac, tristique rutrum velit. Mauris
+                    accumsan tempor felis vitae gravida. Cras egestas convallis malesuada. Etiam ac ante id tortor
+                    vulputate pretium. Maecenas vel sapien suscipit, elementum odio et, consequat tellus.
+                </li>
             </ol>
 
-            <blockquote class="border-l-4 border-green-500 italic my-8 pl-8 md:pl-12">Example of blockquote - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam at ipsum eu nunc commodo posuere et sit amet ligula.</blockquote>
+            <blockquote class="border-l-4 border-green-500 italic my-8 pl-8 md:pl-12">Example of blockquote - Lorem
+                ipsum dolor sit amet, consectetur adipiscing elit. Aliquam at ipsum eu nunc commodo posuere et sit amet
+                ligula.
+            </blockquote>
 
             <p class="py-6">Example code block:</p>
             <pre class="bg-gray-900 rounded text-white font-mono text-base p-4">
@@ -81,12 +114,17 @@
         <!--Subscribe-->
         <div class="container font-sans bg-green-100 rounded mt-8 p-4 md:p-24 text-center">
             <h2 class="font-bold break-normal text-2xl md:text-4xl">Subscribe to Ghostwind CSS</h2>
-            <h3 class="font-bold break-normal font-normal text-gray-600 text-base md:text-xl">Get the latest posts delivered right to your inbox</h3>
+            <h3 class="font-bold break-normal font-normal text-gray-600 text-base md:text-xl">Get the latest posts
+                delivered right to your inbox</h3>
             <div class="w-full text-center pt-4">
                 <form action="#">
                     <div class="max-w-sm mx-auto p-1 pr-0 flex flex-wrap items-center">
-                        <input type="email" placeholder="[email protected]" class="flex-1 appearance-none rounded shadow p-3 text-gray-600 mr-2 focus:outline-none">
-                        <button type="submit" class="flex-1 mt-4 md:mt-0 block md:inline-block appearance-none bg-green-500 text-white text-base font-semibold tracking-wider uppercase py-4 rounded shadow hover:bg-green-400">Subscribe</button>
+                        <input type="email" placeholder="[email protected]"
+                               class="flex-1 appearance-none rounded shadow p-3 text-gray-600 mr-2 focus:outline-none">
+                        <button type="submit"
+                                class="flex-1 mt-4 md:mt-0 block md:inline-block appearance-none bg-green-500 text-white text-base font-semibold tracking-wider uppercase py-4 rounded shadow hover:bg-green-400">
+                            Subscribe
+                        </button>
                     </div>
                 </form>
             </div>
@@ -99,7 +137,9 @@
             <img class="w-10 h-10 rounded-full mr-4" src="http://i.pravatar.cc/300" alt="Avatar of Author">
             <div class="flex-1">
                 <p class="text-base font-bold text-base md:text-xl leading-none">Ghostwind CSS</p>
-                <p class="text-gray-600 text-xs md:text-base">Tailwind CSS version of Ghost's Casper theme by <a class="text-gray-800 hover:text-green-500 no-underline border-b-2 border-green-500" href="https://www.tailwindtoolbox.com">TailwindToolbox.com</a></p>
+                <p class="text-gray-600 text-xs md:text-base">Tailwind CSS version of Ghost's Casper theme by <a
+                        class="text-gray-800 hover:text-green-500 no-underline border-b-2 border-green-500"
+                        href="https://www.tailwindtoolbox.com">TailwindToolbox.com</a></p>
             </div>
             <div class="justify-end">
 
@@ -119,11 +159,13 @@
     <svg class="progress-circle" width="100%" height="100%" viewBox="-1 -1 102 102">
         <path d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98"/>
     </svg>
-    <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-arrow-up" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="cuurentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+    <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-arrow-up" width="24" height="24"
+         viewBox="0 0 24 24" stroke-width="1.5" stroke="cuurentColor" fill="none" stroke-linecap="round"
+         stroke-linejoin="round">
         <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
-        <line x1="12" y1="5" x2="12" y2="19" />
-        <line x1="18" y1="11" x2="12" y2="5" />
-        <line x1="6" y1="11" x2="12" y2="5" />
+        <line x1="12" y1="5" x2="12" y2="19"/>
+        <line x1="18" y1="11" x2="12" y2="5"/>
+        <line x1="6" y1="11" x2="12" y2="5"/>
     </svg>
 </button>
 
@@ -134,16 +176,20 @@
             <div class="w-full md:w-1/3 px-2 pb-12">
                 <div class="h-full bg-white rounded overflow-hidden shadow-md hover:shadow-lg relative smooth">
                     <a href="#" class="no-underline hover:no-underline">
-                        <img src="https://source.unsplash.com/_AjqGGafofE/400x200" class="h-48 w-full rounded-t shadow-lg">
+                        <img src="https://source.unsplash.com/_AjqGGafofE/400x200"
+                             class="h-48 w-full rounded-t shadow-lg">
                         <div class="p-6 h-auto md:h-48">
                             <p class="text-gray-600 text-xs md:text-sm">GETTING STARTED</p>
                             <div class="font-bold text-xl text-gray-900">Aperture Science</div>
                             <p class="text-gray-800 font-serif text-base mb-5">
-                                I’ll be honest, we’re throwing science at the wall here to see what sticks. No idea what it’ll do. Probably nothing. Best case scenario you might get some super powers. Worst case, some tumors, which we’ll cut out.
+                                I’ll be honest, we’re throwing science at the wall here to see what sticks. No idea what
+                                it’ll do. Probably nothing. Best case scenario you might get some super powers. Worst
+                                case, some tumors, which we’ll cut out.
                             </p>
                         </div>
                         <div class="flex items-center justify-between inset-x-0 bottom-0 p-6">
-                            <img class="w-8 h-8 rounded-full mr-4" src="http://i.pravatar.cc/300" alt="Avatar of Author">
+                            <img class="w-8 h-8 rounded-full mr-4" src="http://i.pravatar.cc/300"
+                                 alt="Avatar of Author">
                             <p class="text-gray-600 text-xs md:text-sm">2 MIN READ</p>
                         </div>
                     </a>
@@ -161,7 +207,8 @@
                             </p>
                         </div>
                         <div class="flex items-center justify-between inset-x-0 bottom-0 p-6">
-                            <img class="w-8 h-8 rounded-full mr-4" src="http://i.pravatar.cc/300" alt="Avatar of Author">
+                            <img class="w-8 h-8 rounded-full mr-4" src="http://i.pravatar.cc/300"
+                                 alt="Avatar of Author">
                             <p class="text-gray-600 text-xs md:text-sm">4 MIN READ</p>
                         </div>
                     </a>
@@ -173,13 +220,17 @@
                         <img src="https://source.unsplash.com/DEa8_vxKlEo/400x200" class="h-48 w-full rounded-t shadow">
                         <div class="p-6 h-auto md:h-48">
                             <p class="text-gray-600 text-xs md:text-sm">FOREST</p>
-                            <div class="font-bold text-xl text-gray-900">What is life but a teardrop in the eye of infinity?</div>
+                            <div class="font-bold text-xl text-gray-900">What is life but a teardrop in the eye of
+                                infinity?
+                            </div>
                             <p class="text-gray-800 font-serif text-base mb-5">
-                                Mollis pretium integer eros et dui orci, lectus nec elit sagittis neque. Dignissim ac nullam semper aliquet volutpat, ut scelerisque.
+                                Mollis pretium integer eros et dui orci, lectus nec elit sagittis neque. Dignissim ac
+                                nullam semper aliquet volutpat, ut scelerisque.
                             </p>
                         </div>
                         <div class="flex items-center justify-between inset-x-0 bottom-0 p-6">
-                            <img class="w-8 h-8 rounded-full mr-4" src="http://i.pravatar.cc/300" alt="Avatar of Author">
+                            <img class="w-8 h-8 rounded-full mr-4" src="http://i.pravatar.cc/300"
+                                 alt="Avatar of Author">
                             <p class="text-gray-600 text-xs md:text-sm">7 MIN READ</p>
                         </div>
                     </a>
@@ -206,20 +257,22 @@
                         <a class="inline-block py-2 px-3 text-white no-underline" href="index.html">HOME</a>
                     </li>
                     <li>
-                        <a class="inline-block text-gray-600 no-underline hover:text-gray-200 hover:underline py-2 px-3" href="#">link</a>
+                        <a class="inline-block text-gray-600 no-underline hover:text-gray-200 hover:underline py-2 px-3"
+                           href="#">link</a>
                     </li>
                     <li>
-                        <a class="inline-block text-gray-600 no-underline hover:text-gray-200 hover:underline py-2 px-3" href="#">link</a>
+                        <a class="inline-block text-gray-600 no-underline hover:text-gray-200 hover:underline py-2 px-3"
+                           href="#">link</a>
                     </li>
                     <li>
-                        <a class="inline-block text-gray-600 no-underline hover:text-gray-200 hover:underline py-2 px-3" href="#">link</a>
+                        <a class="inline-block text-gray-600 no-underline hover:text-gray-200 hover:underline py-2 px-3"
+                           href="#">link</a>
                     </li>
                 </ul>
             </div>
         </div>
 
 
-
     </div>
 </footer>
author	realtradam <[email protected]>	2024-07-28 20:00:49 -0400
committer	realtradam <[email protected]>	2024-07-28 20:00:49 -0400
commit	fc34d9853386b6dbf270a10862a47a052f1fb151 (patch)
tree	20ebca59324d88eab8b867306dd251a27cd91699 /backend/src/main/resources/templates/post.html
parent	c24839e8f8b4b6868f8ee383b589ce01dcdc81e1 (diff)
download	spring-blog-dev.tar.gz spring-blog-dev.zip