mirror of
https://github.com/TryGhost/Ghost.git
synced 2025-01-06 22:40:14 -05:00
Added placeholder posts
This commit is contained in:
Djordje Vlaisavljevic
parent
f61dbad9aa
commit
c50a5a14f2
2 changed files with 146 additions and 39 deletions
|
|
@ -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 {
|
||||
fill: #f9fafb;
|
||||
}
|
||||
|
||||
.fill-gray-500 {
|
||||
fill: #6b7280;
|
||||
}
|
||||
|
||||
.fill-gray-300 {
|
||||
fill: #d1d5db;
|
||||
.bg-gray-500 {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(107 114 128 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.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 {
|
||||
padding-top: 3.2rem;
|
||||
.py-1 {
|
||||
padding-top: 0.4rem;
|
||||
padding-bottom: 0.4rem;
|
||||
}
|
||||
|
||||
.pt-12 {
|
||||
padding-top: 4.8rem;
|
||||
.py-2 {
|
||||
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 {
|
||||
font-size: 1.8rem;
|
||||
.text-sm {
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
|
||||
.text-\[1\.6rem\] {
|
||||
font-size: 1.6rem;
|
||||
.text-xs {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.text-\[1\.65rem\] {
|
||||
font-size: 1.65rem;
|
||||
}
|
||||
|
||||
.text-\[1\.7rem\] {
|
||||
font-size: 1.7rem;
|
||||
.text-lg {
|
||||
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 {
|
||||
border-style: none;
|
||||
}
|
||||
|
||||
.focus-visible\:border-none:focus-visible {
|
||||
border-style: none;
|
||||
.hover\:bg-gray-100:hover {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(243 244 246 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.focus-visible\:outline-none:focus-visible {
|
||||
|
|
|
|||
|
|
@ -85,14 +85,29 @@ class PopupContent extends React.Component {
|
|||
|
||||
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='flex items-center'>
|
||||
<div className='bg-white max-w-lg rounded-lg shadow-xl m-auto'>
|
||||
<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>
|
||||
</>
|
||||
|
|
|
|||
Loading…
Reference in a new issue