Post layout

This commit is contained in:
Mats Rauhala 2023-03-29 23:22:45 +03:00
parent 9bd93a667f
commit 12be909960
2 changed files with 79 additions and 8 deletions

View File

@ -516,6 +516,40 @@ video {
--tw-backdrop-sepia: ;
}
.container {
width: 100%;
}
@media (min-width: 640px) {
.container {
max-width: 640px;
}
}
@media (min-width: 768px) {
.container {
max-width: 768px;
}
}
@media (min-width: 1024px) {
.container {
max-width: 1024px;
}
}
@media (min-width: 1280px) {
.container {
max-width: 1280px;
}
}
@media (min-width: 1536px) {
.container {
max-width: 1536px;
}
}
.absolute {
position: absolute;
}
@ -557,6 +591,10 @@ video {
margin-top: 2rem;
}
.mb-10 {
margin-bottom: 2.5rem;
}
.line-clamp-3 {
overflow: hidden;
display: -webkit-box;
@ -642,6 +680,10 @@ video {
row-gap: 4rem;
}
.justify-self-center {
justify-self: center;
}
.rounded-full {
border-radius: 9999px;
}
@ -654,6 +696,10 @@ video {
border-top-width: 1px;
}
.border-b {
border-bottom-width: 1px;
}
.border-gray-200 {
--tw-border-opacity: 1;
border-color: rgb(229 231 235 / var(--tw-border-opacity));
@ -674,6 +720,10 @@ video {
background-color: rgb(31 41 55 / var(--tw-bg-opacity));
}
.p-4 {
padding: 1rem;
}
.py-24 {
padding-top: 6rem;
padding-bottom: 6rem;
@ -727,6 +777,16 @@ video {
line-height: 1rem;
}
.text-5xl {
font-size: 3rem;
line-height: 1;
}
.text-2xl {
font-size: 1.5rem;
line-height: 2rem;
}
.font-bold {
font-weight: 700;
}
@ -747,6 +807,10 @@ video {
line-height: 2rem;
}
.leading-tight {
line-height: 1.25;
}
.tracking-tight {
letter-spacing: -0.025em;
}

View File

@ -1,8 +1,15 @@
<article>
<section class="header">
Posted on $date$
<div class="container mx-auto mt-10 mb-10">
<article class="flex max-w-xl flex-col items-start justify-center">
<div class="flex items-center gap-x-4 text-xs">
<time datetime="$date$" class="text-gray-500">$date$</time>
</div>
<div class="group relative">
<section class="text-2xl text-primary border-b">
$title$
</section>
<section>
$body$
</section>
</article>
</div>
</article>
</div>