Merge remote-tracking branch 'github/master'

# Conflicts:
#	assets/css/screen.css
#	custom-tags.hbs
#	tag.hbs
This commit is contained in:
Bea 2020-10-30 21:37:54 +01:00
commit dec41159a8
4 changed files with 1113 additions and 1049 deletions

View File

@ -10,10 +10,13 @@ TABLE OF CONTENTS
1.4. Footer 1.4. Footer
1.5. Header 1.5. Header
2. Index Style 2. Index Style
3. Post Feed 3. Feeds
4. Post Cards 3.1. Post Feed
3.2. Tag Feed
4. Post & Tag Cards
4.1. Big Post Card style 4.1. Big Post Card style
4.2. Navbar Post Card Style 4.2. Navbar Post Card Style
4.3. Tag Card Style
5. Pages & Posts style 5. Pages & Posts style
5.1. Header 5.1. Header
5.2. Content 5.2. Content
@ -245,6 +248,9 @@ is applied by the script on scroll.
padding: 0; padding: 0;
background-color: rgb(50, 50, 50); background-color: rgb(50, 50, 50);
position: relative;
z-index: 4;
} }
.mind-global-navbar_secondary li { .mind-global-navbar_secondary li {
@ -351,9 +357,13 @@ Used to style the index/homepage.
font-size: 90px; font-size: 90px;
} }
/* 3. Post Feed /* 3. Feeds
-------------------------------------------------- --------------------------------------------------
Used to style the post feed, seen in the homepage & custom-tags page. */
/* 3.1. Post Feed
--------------------------------------------------
Used to style the post feed, seen in the index/home page.
*/ */
.mind-feed-content_main { .mind-feed-content_main {
@ -363,8 +373,19 @@ Used to style the post feed, seen in the homepage & custom-tags page.
padding: 50px 0; padding: 50px 0;
} }
/* 3.2. Tag Feed
--------------------------------------------------
Used to style the tag feed, seen in the custom-tags page.
*/
/* 4. Post Cards .mind-tag-content_main {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
grid-gap: 30px;
padding: 50px 0;
}
/* 4. Post & Tag Cards
-------------------------------------------------- --------------------------------------------------
*/ */
@ -525,6 +546,55 @@ footer.mind-post-card-big_footer {
} }
/* 4.3. Tag Card Style
--------------------------------------------------
*/
.mind-tag-card_main {
/* Layout */
display: flex;
flex-direction: column;
height: 100%;
/* Style */
background-color: rgb(40, 40, 40);
border-radius: 5px;
box-shadow: 0 0 2px rgb(0,0,0), 0 2px 3px rgb(0,0,0);
transition: .3s;
}
.mind-tag-card_main:hover {
transform:translate3d(0,-5px,0);
box-shadow: 0 0 2px rgb(0,0,0), 0 2px 10px rgb(0,0,0);
}
.mind-tag-card_feature-image {
/*
The following 3 statements are used
to make all images have the same size.
This has the downside of being relatively more difficult to scale,
so if you want to go back to normal viewing (full image)
only leave:
width: 100%;
*/
object-fit: cover;
width: 100%;
height: 200px;
max-height: 100%;
border-radius: 5px;
}
.mind-tag-card_header {
margin: auto;
}
.mind-tag-card_header h4 {
font-size: 20px;
text-align: center;
margin: 10px;
}
/* 5. Pages & Posts style /* 5. Pages & Posts style
-------------------------------------------------- --------------------------------------------------
style shared between pages and posts (eg. title). style shared between pages and posts (eg. title).

View File

@ -9,14 +9,16 @@
</div> </div>
<main> <main>
<nav class="navbar-secondary unselectable"> <nav class="mind-global-navbar_secondary unselectable">
{{navigation type="secondary"}} {{navigation type="secondary"}}
</nav> </nav>
<div class="mind-content_main"> <div class="mind-content_main">
<div class="mind-feed-content_main"> <div class="mind-tag-content_main">
{{#foreach tags}} {{#get 'tags' limit='all' include='count.posts' order='count.posts desc'}}
{{> "tag-card-big"}} {{#foreach tags}}
{{/foreach}} {{> "tag-card-big"}}
{{/foreach}}
{{/get}}
</div> </div>
</div> </div>
</main> </main>

View File

@ -1,17 +1,8 @@
<article class="{{post_class}}"> <article class="{{post_class}}">
<a class="mind-post-card-big_main" href="{{url}}"> <a class="mind-tag-card_main" href="{{url}}">
<img class="mind-post-card-big_feature-image" src="{{img_url feature_image size="m"}}" /> <img class="mind-tag-card_feature-image" src="{{img_url feature_image size="s"}}" />
<header class="mind-post-card-big_header"> <header class="mind-tag-card_header">
<p class="mind-post-card-big_meta"><span class="mind-post-card-big_tag">{{primary_tag.name}}</span> <h4>{{name}}</h4>
• <time class="post-date" datetime="{{date format='YYYY-MM-DD'}}">{{date format="DD MMMM YYYY"}}</time></p>
<h3>{{title}}</h3>
</header> </header>
<section class="mind-post-card-big_excerpt">
<p>{{excerpt words="26"}}</p>
</section>
<footer class="mind-post-card-big_footer">
{{primary_author.name}}
{{#if primary_author.profile_image}}<img class="mind-post-card-big_author-image" src="{{img_url primary_author.profile_image size="xxs"}}" alt="Author image" />{{/if}}
</footer>
</a> </a>
</article> </article>

View File

@ -10,6 +10,7 @@
{{description}} {{description}}
{{else}} {{else}}
{{plural ../pagination.total empty='posts' singular='% post' plural='% posts'}} {{plural ../pagination.total empty='posts' singular='% post' plural='% posts'}}
• <a class="mind-post-header_tag" href="/tags/">see all tags</a>
{{/if}} {{/if}}
</p> </p>
</div> </div>