Post listing mockup using a three column grid
Planning a site redesign can be a bit stressful, but it's a good time to review what you've previously made and improve the areas you know you can do better. Today I worked on a potential way of displaying posts on my index pages. I'm not sure if I like it, but I'll revisit it at a later time.
Page Header
Post Header
This is a big block of text that has the sole purpose of filling up space while I mock up this page. This text should only be x characters long.
Post Header
This is a big block of text that has the sole purpose of filling up space while I mock up this page. This text should only be x characters long.
View the code:
HTML and JS
<div class="code-block">
<h1>Page Header</h1>
<article>
<h2>Post Header</h2>
<p>This is a big block of text that has the sole purpose of filling up space while I mock up this page. This text should only be <em>x</em> characters long.</p>
<time><span>2021</span>/<span>03</span>/<span>30</span></time>
<div class="meta">
<ul>
<li>100DaysofCode</li>
<li>CSS</li>
<li>HTML</li>
<li>JavaScript</li>
</ul>
</div>
</article>
<article>
<h2>Post Header</h2>
<p>This is a big block of text that has the sole purpose of filling up space while I mock up this page. This text should only be <em>x</em> characters long.</p>
<time><span>2021</span>/<span>03</span>/<span>29</span></time>
<div class="meta">
<ul>
<li>Photos</li>
<li>Sakura</li>
<li>Flowers</li>
<li>Nature</li>
</ul>
</div>
</article>
</div>CSS
.code-block {
width: 100%;
padding: 1rem 0;
margin: 0;
background-color: #dedede99;
font-family: Helvetica, Arial, sans-serif;
font-size: 20px;
min-height: 100vh;
}
.code-block h1 {
margin: 0 0 1rem 1rem;
font-size: 3rem;
}
@supports (display: grid) {
.code-block article{
display: grid;
grid-template-columns: calc(60% - .66rem) calc(10% - .66rem) calc(30% - .66rem);
grid-template-rows: min-content;
gap: 1rem;
margin-bottom: 1rem;
padding: 1rem;
background-color:rgba(0,0,0, .25);
max-width: 60em;
}
.code-block article h2 {
font-size: 2em;
margin: 0;
padding: 0;
grid-column: 1 / 4;
color: rgba(255, 255, 255, .8);
position: relative;
}
.code-block article p {
font-size: 1em;
margin-top: 0;
grid-column: 1 / 2;
line-height: 1.5;
max-width: 65ch;
}
.code-block article time {
grid-column: 2 / 3;
display: flex;
flex-direction: row;
justify-content: center;
padding: 1rem 0;
align-items: center;
writing-mode: vertical-rl;
width: 100%;
text-transform: uppercase;
font-size: 2em;
font-weight: 600;
background-color:rgba(255, 255, 255, .5);
color: #ababab;
overflow: hidden;
}
div.meta h5 {
font-size: 1rem;
color: #333;
margin: 0 0 .5em 0;
}
div.meta ul {
margin: 0;
padding: 0;
list-style-type: none;
line-height: 1.5;
}
div.meta ul li {
padding: .25rem;
border: solid 1px rgba(255, 255, 255, .5);
margin-bottom: .25rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: .70rem;
color: rgba(255, 255, 255, .5);
max-width: 20ch;
padding: .6rem 1.2rem;
}
div.meta ul li::before {
display: inline;
content: "\2022";
margin-right: 1ch;
color: rgba(255, 255, 255, .5);
}
}