Added placeholder posts

ghost/sodo-search/public/main.css

@@ -565,6 +565,31 @@ video {
   margin: auto;
 }
 
+.-mx-7 {
+  margin-left: -2.8rem;
+  margin-right: -2.8rem;
+}
+
+.mt-1 {
+  margin-top: 0.4rem;
+}
+
+.mt-0 {
+  margin-top: 0px;
+}
+
+.mt-4 {
+  margin-top: 1.6rem;
+}
+
+.mb-4 {
+  margin-bottom: 1.6rem;
+}
+
+.mb-3 {
+  margin-bottom: 1.2rem;
+}
+
 .mr-3 {
   margin-right: 1.2rem;
 }
@@ -573,6 +598,14 @@ video {
   margin-left: 1.2rem;
 }
 
+.mb-0 {
+  margin-bottom: 0px;
+}
+
+.mb-2 {
+  margin-bottom: 0.8rem;
+}
+
 .flex {
   display: flex;
 }
@@ -597,14 +630,38 @@ video {
   flex-grow: 1;
 }
 
+.cursor-pointer {
+  cursor: pointer;
+}
+
 .items-center {
   align-items: center;
 }
 
+.truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 .rounded-lg {
   border-radius: 0.8rem;
 }
 
+.border-t {
+  border-top-width: 1px;
+}
+
+.border-gray-300 {
+  --tw-border-opacity: 1;
+  border-color: rgb(209 213 219 / var(--tw-border-opacity));
+}
+
+.border-gray-200 {
+  --tw-border-opacity: 1;
+  border-color: rgb(229 231 235 / var(--tw-border-opacity));
+}
+
 .bg-\[rgba\(0\2c 0\2c 0\2c 0\.2\)\] {
   background-color: rgba(0,0,0,0.2);
 }
@@ -614,16 +671,9 @@ video {
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
 }
 
-.fill-gray-50 {
+.bg-gray-500 {
-  fill: #f9fafb;
+  --tw-bg-opacity: 1;
-}
+  background-color: rgb(107 114 128 / var(--tw-bg-opacity));
-
-.fill-gray-500 {
-  fill: #6b7280;
-}
-
-.fill-gray-300 {
-  fill: #d1d5db;
 }
 
 .fill-gray-400 {
@@ -634,10 +684,6 @@ video {
   padding: 1.6rem;
 }
 
-.p-6 {
-  padding: 2.4rem;
-}
-
 .py-6 {
   padding-top: 2.4rem;
   padding-bottom: 2.4rem;
@@ -648,36 +694,91 @@ video {
   padding-right: 2.8rem;
 }
 
-.pt-8 {
+.py-1 {
-  padding-top: 3.2rem;
+  padding-top: 0.4rem;
+  padding-bottom: 0.4rem;
 }
 
-.pt-12 {
+.py-2 {
-  padding-top: 4.8rem;
+  padding-top: 0.8rem;
+  padding-bottom: 0.8rem;
+}
+
+.pt-8 {
+  padding-top: 3.2rem;
 }
 
 .pt-20 {
   padding-top: 8rem;
 }
 
+.pt-6 {
+  padding-top: 2.4rem;
+}
+
 .text-md {
   font-size: 1.5rem;
 }
 
-.text-lg {
+.text-sm {
-  font-size: 1.8rem;
+  font-size: 1.4rem;
 }
 
-.text-\[1\.6rem\] {
+.text-xs {
-  font-size: 1.6rem;
+  font-size: 1.2rem;
 }
 
 .text-\[1\.65rem\] {
   font-size: 1.65rem;
 }
 
-.text-\[1\.7rem\] {
+.text-lg {
-  font-size: 1.7rem;
+  font-size: 1.8rem;
+}
+
+.font-semibold {
+  font-weight: 600;
+}
+
+.font-medium {
+  font-weight: 500;
+}
+
+.uppercase {
+  text-transform: uppercase;
+}
+
+.leading-tight {
+  line-height: 1.25;
+}
+
+.leading-normal {
+  line-height: 1.5;
+}
+
+.text-gray-600 {
+  --tw-text-opacity: 1;
+  color: rgb(75 85 99 / var(--tw-text-opacity));
+}
+
+.text-gray-300 {
+  --tw-text-opacity: 1;
+  color: rgb(209 213 219 / var(--tw-text-opacity));
+}
+
+.text-gray-500 {
+  --tw-text-opacity: 1;
+  color: rgb(107 114 128 / var(--tw-text-opacity));
+}
+
+.text-gray-400 {
+  --tw-text-opacity: 1;
+  color: rgb(156 163 175 / var(--tw-text-opacity));
+}
+
+.text-gray-900 {
+  --tw-text-opacity: 1;
+  color: rgb(17 24 39 / var(--tw-text-opacity));
 }
 
 .shadow-lg {
@@ -696,12 +797,6 @@ video {
   outline-style: solid;
 }
 
-.blur-sm {
-  --tw-blur: blur(4px);
-  -webkit-filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
-          filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
-}
-
 .filter {
   -webkit-filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
           filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
@@ -717,12 +812,9 @@ body {
   font-size: 1.5rem;
 }
 
-.focus\:border-none:focus {
+.hover\:bg-gray-100:hover {
-  border-style: none;
+  --tw-bg-opacity: 1;
-}
+  background-color: rgb(243 244 246 / var(--tw-bg-opacity));
-
-.focus-visible\:border-none:focus-visible {
-  border-style: none;
 }
 
 .focus-visible\:outline-none:focus-visible {

ghost/sodo-search/src/components/PopupModal.js

@@ -87,12 +87,27 @@ function Search() {
     return (
         <> 
             <div className='bg-[rgba(0,0,0,0.2)] h-screen w-screen pt-20'>
-                <div className='bg-white max-w-lg rounded-lg shadow-xl py-6 px-7 m-auto'>
+                <div className='bg-white max-w-lg rounded-lg shadow-xl m-auto'>
-                    <div className='flex items-center'>
+                    <div className='flex items-center py-6 px-7'>
                         <SearchIcon className='mr-3' alt='Search' />
                         <input className='grow text-[1.65rem] focus-visible:outline-none' placeholder='Search posts, tags, authors..' />
                         <ClearIcon className='ml-3 fill-gray-400' alt='Clear' />
                     </div>
+                    <div className="border-t border-gray-200 py-6 px-7">
+                        <h1 className="uppercase text-xs text-gray-400 font-semibold mb-2">Posts</h1>
+                        <div className="py-2 -mx-7 px-7 hover:bg-gray-100 cursor-pointer">
+                            <h2 className="text-[1.65rem] font-medium leading-tight text-gray-900">The DNC’s Disastrous Post-Roe Message</h2>
+                            <p className="text-gray-400 leading-normal text-sm mt-0 mb-0 truncate">Democrats’ first stab at warning voters about the GOP threat with harpoons and guns and knives and rifles</p>
+                        </div>
+                        <div className="py-2 -mx-7 px-7 hover:bg-gray-100 cursor-pointer">
+                            <h2 className="text-[1.65rem] font-medium leading-tight text-gray-900">Roberts Started A Revolution, Dems Enabled It</h2>
+                            <p className="text-gray-400 leading-normal text-sm mt-0 mb-0 truncate">New data show the end of pandemic relief coincided with a 49 percent increase in the number of families struggling to survive.</p>
+                        </div>
+                        <div className="py-2 -mx-7 px-7 hover:bg-gray-100 cursor-pointer">
+                            <h2 className="text-[1.65rem] font-medium leading-tight text-gray-900">Ending Pandemic Aid Created A Disaster</h2>
+                            <p className="text-gray-400 leading-normal text-sm mt-0 mb-0 truncate">On this week’s Lever Time: David goes deep into SCOTUS, including exposing the dark money network that has been bankrolling conservative judicial nominees.</p>
+                        </div>
+                    </div>
                 </div>
             </div>
         </>