Finish creating /tags/ page

The tags page was finally completed, and shows every tag
with its own image.

A "see all tags" link was added in the header of every
(single) tag's page, in case of a missing description.

Also, the "secondary navigation" div now has a relative
position and a higher z-index, so that the tags page's
header does not cast a shadow on it.

Signed-off-by: Lorenzo Dellacà <lorenzo.dellaca@mind-overflow.net>
This commit is contained in:
Bea 2020-08-20 15:47:29 +02:00
parent e166717e21
commit 69c1bf00d2
4 changed files with 87 additions and 23 deletions

View File

@ -10,10 +10,13 @@ TABLE OF CONTENTS
1.4. Footer
1.5. Header
2. Index Style
3. Post Feed
4. Post Cards
3. Feeds
3.1. Post Feed
3.2. Tag Feed
4. Post & Tag Cards
4.1. Big Post Card style
4.2. Navbar Post Card Style
4.3. Tag Card Style
5. Pages & Posts style
5.1. Header
5.2. Content
@ -245,6 +248,9 @@ is applied by the script on scroll.
padding: 0;
background-color: rgb(50, 50, 50);
position: relative;
z-index: 4;
}
.mind-global-navbar_secondary li {
@ -351,9 +357,13 @@ Used to style the index/homepage.
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 {
@ -363,8 +373,19 @@ Used to style the post feed, seen in the homepage & custom-tags page.
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
--------------------------------------------------
style shared between pages and posts (eg. title).

View File

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

View File

@ -1,17 +1,8 @@
<article class="{{post_class}}">
<a class="mind-post-card-big_main" href="{{url}}">
<img class="mind-post-card-big_feature-image" src="{{img_url feature_image size="m"}}" />
<header class="mind-post-card-big_header">
<p class="mind-post-card-big_meta"><span class="mind-post-card-big_tag">{{primary_tag.name}}</span>
• <time class="post-date" datetime="{{date format='YYYY-MM-DD'}}">{{date format="DD MMMM YYYY"}}</time></p>
<h3>{{title}}</h3>
<a class="mind-tag-card_main" href="{{url}}">
<img class="mind-tag-card_feature-image" src="{{img_url feature_image size="s"}}" />
<header class="mind-tag-card_header">
<h4>{{name}}</h4>
</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>
</article>

View File

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