matthias
/
matthiasportzel.com
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Styling for post entries in post feed

This commit is contained in:
Matthias Portzel 2023-04-20 08:32:35 -04:00
parent d4fda72521
commit 50633c07cb
3 changed files with 61 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
paper-houses-theme/assets/styles/main.scss
View File

@ -228,7 +228,7 @@ ul.links-list {
&::before {
//content: "\279A "
content: "➤ ";
}
}
}
}
.project-list {
@ -258,6 +258,41 @@ ul.links-list {
}
}
.post-feed {
.post-card-content:not(:last-of-type) {
padding-block-end: 35px;
}
.post-card-content {
display: grid;
align-items: center;
justify-items: start;
column-gap: 14px;
row-gap: 8px;
// First column is as narrow as possible, second column fills remaining space
grid-template-columns: min-content auto;
.star-icon {
grid-column: 1;
grid-row: 1;
height: 24px;
}
.post-entry-link {
grid-column: 2;
grid-row: 1;
font-weight: 600;
font-size: 18px;
}
.post-card-excerpt {
grid-column: 2;
grid-row: 2;
text-indent: 0em;
}
}
}
.date {
font-size: 0.85em;
padding-left: 15px;

15
paper-houses-theme/ideas.hbs
View File

@ -9,12 +9,23 @@
<div class="post-feed">
{{#foreach posts}}
{{!-- This mirrors the .post-card-content block in index.hbs (the Backrooms) --}}
{{!-- We're maintaining both since I don't know how to use partials --}}
<div class="post-card-content">
<a class="post-card-content-link" href="{{url}}">
{{#if featured}}
<span class="post-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-file-text"><path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" x2="8" y1="13" y2="13"></line><line x1="16" x2="8" y1="17" y2="17"></line><line x1="10" x2="8" y1="9" y2="9"></line></svg>
</span>
{{else}}
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right-circle"><circle cx="12" cy="12" r="10"></circle><polyline points="12 16 16 12 12 8"></polyline><line x1="8" x2="16" y1="12" y2="12"></line></svg>
{{/if}}
<a class="post-entry-link" href="{{url}}">
<span class="post-card-primary-tag">{{title}}</span>
</a>
{{#if excerpt}}
{{!-- Featured posts actually deserve an excerpt, IMO. --}}
{{#if featured}}
<div class="post-card-excerpt">{{excerpt}}</div>
{{/if}}
</div>

14
paper-houses-theme/index.hbs
View File

@ -13,12 +13,22 @@ into the {body} of the default.hbs template --}}
<div class="post-feed">
{{#foreach posts}}
{{!-- Duplicated from ideas.hbs (TODO: use partials) --}}
<div class="post-card-content">
<a class="post-card-content-link" href="{{url}}">
{{#if featured}}
<span class="post-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-file-text"><path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" x2="8" y1="13" y2="13"></line><line x1="16" x2="8" y1="17" y2="17"></line><line x1="10" x2="8" y1="9" y2="9"></line></svg>
</span>
{{else}}
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right-circle"><circle cx="12" cy="12" r="10"></circle><polyline points="12 16 16 12 12 8"></polyline><line x1="8" x2="16" y1="12" y2="12"></line></svg>
{{/if}}
<a class="post-entry-link" href="{{url}}">
<span class="post-card-primary-tag">{{title}}</span>
</a>
{{#if excerpt}}
{{!-- Featured posts actually deserve an excerpt, IMO. --}}
{{#if featured}}
<div class="post-card-excerpt">{{excerpt}}</div>
{{/if}}
</div>