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:
parent
e166717e21
commit
69c1bf00d2
@ -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).
|
||||
|
||||
@ -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">
|
||||
{{#foreach tags}}
|
||||
{{> "tag-card-big"}}
|
||||
{{/foreach}}
|
||||
<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>
|
||||
|
||||
@ -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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user