From 69c1bf00d26332c924cd2acd069c4a4bed0c4374 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Lorenzo=20Dellac=C3=A0?= Date: Thu, 20 Aug 2020 15:47:29 +0200 Subject: [PATCH] Finish creating /tags/ page MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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à --- assets/css/screen.css | 80 ++++++++++++++++++++++++++++++++++++--- custom-tags.hbs | 12 +++--- partials/tag-card-big.hbs | 17 ++------- tag.hbs | 1 + 4 files changed, 87 insertions(+), 23 deletions(-) diff --git a/assets/css/screen.css b/assets/css/screen.css index f6b8541..5ef2a67 100755 --- a/assets/css/screen.css +++ b/assets/css/screen.css @@ -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). diff --git a/custom-tags.hbs b/custom-tags.hbs index baa9d0c..974d811 100644 --- a/custom-tags.hbs +++ b/custom-tags.hbs @@ -9,14 +9,16 @@
-
diff --git a/partials/tag-card-big.hbs b/partials/tag-card-big.hbs index 3a2c957..8678407 100644 --- a/partials/tag-card-big.hbs +++ b/partials/tag-card-big.hbs @@ -1,17 +1,8 @@ diff --git a/tag.hbs b/tag.hbs index 63e4354..77b11b2 100644 --- a/tag.hbs +++ b/tag.hbs @@ -10,6 +10,7 @@ {{description}} {{else}} {{plural ../pagination.total empty='posts' singular='% post' plural='% posts'}} + • see all tags {{/if}}