WebDev/simple-purple-ghost-theme
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Get index page to render basic info

Browse Source 
The structure is not even close to being finished, and only looks decent on desktop.
This commit is contained in:
Bea 2023-01-10 00:36:16 +01:00
parent 9e86bbec3e
commit 1c4edf415c
3 changed files with 93 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

65
assets/css/screen.css
View File

@ -39,7 +39,7 @@ a {
} }
a:hover { a:hover {
color: pink; color: #d9b9e6
} }
/* Generic class to make things unselectable */ /* Generic class to make things unselectable */
@ -63,6 +63,34 @@ a:hover {
margin: auto; margin: auto;
} }
.ptheme-global-navbar_primary {
background-color: #201724;
width: 100%;
display: flex;
align-items: center;
justify-content: flex-start;
text-align: center;
white-space: nowrap;
text-transform: uppercase;
}
.ptheme-global-navbar_primary ul {
display: block;
width: 100%;
}
.ptheme-global-navbar_primary li {
display: inline-block;
}
.ptheme-index-post_article {
padding: 20px 0;
display: flex;
flex-direction: row;
}
.ptheme-content_main { .ptheme-content_main {
max-width: 1260px; max-width: 1260px;
width: 80%; width: 80%;
@ -70,17 +98,38 @@ a:hover {
overflow: hidden; overflow: hidden;
} }
.ptheme-index-post_article { .ptheme-index-post_feature-image-container {
padding: 20px 0; display: flex;
flex-direction: column;
justify-content: center;
} }
a.ptheme-index-post_article_link {
display: flex;
flex-direction: row;
}
.ptheme-index-post_feature-image { .ptheme-index-post_feature-image {
max-width: 100%; width: 250px;
height: 140px;
padding: 20px;
object-fit: cover;
border-radius: 25px;
}
.ptheme-index-post_excerpt {
width: 100%;
text-align: justify;
}
.ptheme-index-post_footer {
padding: 10px;
display: flex;
justify-content: right;
align-items: center;
}
.ptheme-index-post_author-image {
width: 25px;
padding: 10px;
border-radius: 100%;
} }
.kg-width-wide { .kg-width-wide {

52
index.hbs
View File

@ -1,48 +1,56 @@
{{!< default}} {{!< default}}
<div class="ptheme-index-header_main unselectable" id="vantajs"> <div class="ptheme-index-header_main unselectable">
<h1>{{@site.title}}</h1> <h1>{{@site.title}}</h1>
</div> </div>
<main> <main>
<nav id="ptheme-global-navbar_primary" class="ptheme-global-navbar_primary unselectable">
{{navigation}}
</nav>
<div class="ptheme-content_main"> <div class="ptheme-content_main">
{{!-- Looping through every post --}} {{!-- Looping through every post --}}
{{#foreach posts}} {{#foreach posts}}
<article class="ptheme-index-post_article"> <article class="ptheme-index-post_article">
<a class="ptheme-index-post_article_link" href="{{url}}">
<div> <div class="ptheme-index-post_feature-image-container">
{{#if feature_image}} {{#if feature_image}}
<img class="ptheme-index-post_feature-image" src="{{img_url feature_image size="m"}}" alt="{{title}}"/> <a href="{{url}}">
<img class="ptheme-index-post_feature-image" src="{{img_url feature_image size="m"}}" alt="{{title}}"/>
</a>
{{/if}} {{/if}}
</div> </div>
<div> <div class="ptheme-index-post_excerpt">
<header> <p>
<p><span>{{primary_tag.name}}</span> {{#foreach tags}}
• <a href="{{url}}" title="{{name}}" class="tag tag-{{id}} {{slug}}"><b>{{name}}</b></a>{{#unless @last}}, {{/unless}}
<time datetime="{{date published_at format='YYYY-MM-DD'}}">{{date published_at format="DD MMMM YYYY"}}</time> {{/foreach}}
</p> •
<h3>{{title}}</h3> <time datetime="{{date published_at format='YYYY-MM-DD'}}">{{date published_at format="DD MMMM YYYY"}}</time>
</header> </p>
<a href="{{url}}">
<header>
<h3>{{title}}</h3>
</header>
<section> <section>
<p>{{excerpt words="26"}}</p> <p>{{excerpt words="60"}}</p>
</section> </section>
</div> </a>
{{!-- author info disabled because i'm the only one posting here
<div> <footer class="ptheme-index-post_footer">
<footer>
{{primary_author.name}}
{{#if primary_author.profile_image}} {{#if primary_author.profile_image}}
<img src="{{img_url primary_author.profile_image size="xxs"}}" <img class="ptheme-index-post_author-image" src="{{img_url primary_author.profile_image size="xxs"}}"
alt="{{title}}"/>{{/if}} alt="{{title}}"/>{{/if}}
{{primary_author.name}}
</footer> </footer>
--}}
</div> </div>
</a>
</article> </article>
{{/foreach}} {{/foreach}}

6
post.hbs
View File

@ -0,0 +1,6 @@
{{!< default}}
<div>
{{#post}}
{{content}}
{{/post}}
</div>