WebDev/mind-overflow-website-ghost-theme
1
0
Fork 0
Code Issues 2 Pull Requests Releases Wiki Activity

Finish creating /tags/ page

Browse Source 
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:
Lorenzo Dellacà
2020-08-20 15:47:29 +02:00
parent e166717e21
commit 69c1bf00d2
4 changed files with 87 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

80
assets/css/screen.css
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).