Begin CSS refactoring for improved organization
CSS code was divided in multiple files, however this was not practical for organization since different pages needed different CSS classes one another, that were in most of those CSS files. This commit brings (mostly) everything in one file with a table of contents on top. An exception is made for fonts, that are now in a separate "fonts.css" file, since they contain fundamentally different things. Classes organization is not yet complete, however a great part was done. Next commits will finalize this organization and finish moving classes. Signed-off-by: Lorenzo Dellacà <lorenzo.dellaca@mind-overflow.net>
This commit is contained in:
parent
da155c7d7e
commit
67344effd0
|
|
@ -0,0 +1,78 @@
|
|||
|
||||
/* Begin fonts */
|
||||
@font-face {
|
||||
font-family: 'Oswald';
|
||||
font-style: normal;
|
||||
font-weight: 300;
|
||||
src: url(https://fonts.gstatic.com/s/oswald/v24/TK3_WkUHHAIjg75cFRf3bXL8LICs169vsUZiZQ.woff2) format('woff2');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Montserrat';
|
||||
font-style: normal;
|
||||
font-weight: 200;
|
||||
src: url(https://fonts.gstatic.com/s/montserrat/v14/JTURjIg1_i6t8kCHKm45_aZA3gnD_g.woff2) format('woff2');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Montserrat';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-display: swap;
|
||||
src: local('Montserrat Regular'), local('Montserrat-Regular'), url(https://fonts.gstatic.com/s/montserrat/v14/JTUSjIg1_i6t8kCHKm459Wlhyw.woff2) format('woff2');
|
||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Montserrat';
|
||||
font-style: normal;
|
||||
font-weight: 800;
|
||||
src: url(https://fonts.gstatic.com/s/montserrat/v14/JTURjIg1_i6t8kCHKm45_c5H3gnD_g.woff2) format('woff2');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
font-style: normal;
|
||||
font-weight: 300;
|
||||
font-display: swap;
|
||||
src: local('Roboto Light'), local('Roboto-Light'), url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmSU5fBBc4.woff2) format('woff2');
|
||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-display: swap;
|
||||
src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu4mxK.woff2) format('woff2');
|
||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
font-display: swap;
|
||||
src: local('Roboto Bold'), local('Roboto-Bold'), url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmWUlfBBc4.woff2) format('woff2');
|
||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
font-style: normal;
|
||||
font-weight: 900;
|
||||
font-display: swap;
|
||||
src: local('Roboto Black'), local('Roboto-Black'), url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmYUtfBBc4.woff2) format('woff2');
|
||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'PT Serif';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-display: swap;
|
||||
src: local('PT Serif'), local('PTSerif-Regular'), url(https://fonts.gstatic.com/s/ptserif/v11/EJRVQgYoZZY2vCFuvAFWzr8.woff2) format('woff2');
|
||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
||||
}
|
||||
|
||||
/* End fonts */
|
||||
|
|
@ -1,59 +0,0 @@
|
|||
@charset "utf-8";
|
||||
/* CSS Document */
|
||||
|
||||
h1 {
|
||||
font-size: 90px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.mind-site-title {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
margin: auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
background: linear-gradient(45deg, #067062, #063d70, #2d0670, #4e0670, #700667);
|
||||
background-size: 1000%, 100%;
|
||||
animation: gradient 7s linear infinite;
|
||||
animation-direction: alternate-reverse;
|
||||
}
|
||||
|
||||
.mind-site-title h1 {
|
||||
margin-top: 100px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.navbar-secondary {
|
||||
width: 100%;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
|
||||
background-color: rgb(50, 50, 50);
|
||||
}
|
||||
|
||||
.navbar-secondary li {
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
font-size: 25px;
|
||||
font-family: 'Oswald', sans-serif;
|
||||
font-weight: 300;
|
||||
margin: 0;
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.navbar-secondary a {
|
||||
color: white;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
text-decoration: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
|
@ -1,6 +1,4 @@
|
|||
@charset "utf-8";
|
||||
/* CSS Document */
|
||||
|
||||
|
||||
.mind-post_main {
|
||||
max-width: 1260px;
|
||||
|
|
@ -130,57 +128,6 @@ img.mind-post_feature-image {
|
|||
top: 0;
|
||||
}
|
||||
|
||||
.post-card-sidebar_main {
|
||||
/* Layout */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: 20px 0;
|
||||
|
||||
/* 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;
|
||||
}
|
||||
|
||||
.post-card-sidebar_main:hover {
|
||||
transform:translate3d(0,-5px,0);
|
||||
box-shadow: 0 0 2px rgb(0,0,0),0 2px 15px rgb(0,0,0);
|
||||
}
|
||||
|
||||
.post-card-sidebar_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: 100px;
|
||||
max-height: 100%;
|
||||
|
||||
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.post-card-sidebar_meta {
|
||||
font-family: 'Roboto';
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
font-size: 12px;
|
||||
color: rgb(180, 180, 180);
|
||||
}
|
||||
|
||||
.post-card-sidebar_header {
|
||||
margin: 0 5px 0;
|
||||
padding: 0 5px 10px;
|
||||
}
|
||||
|
||||
/* MEDIA QUERIES FOR RESPONSIVE DESIGN */
|
||||
@media screen and (max-width: 1300px) {
|
||||
.mind-post_main {
|
||||
|
|
|
|||
|
|
@ -1,101 +0,0 @@
|
|||
|
||||
.post-card_main {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
|
||||
/* Style */
|
||||
background-color: rgb(50, 50, 50);
|
||||
border: 1px solid;
|
||||
border-color: transparent;
|
||||
border-radius: 5px;
|
||||
box-shadow: 0 1px 1px black, 0 2px 4px black;
|
||||
transition: 0.5s;
|
||||
font-size: 19px;
|
||||
}
|
||||
|
||||
.post-card_main:hover {
|
||||
box-shadow: 1px 3px 15px 2px black;
|
||||
|
||||
/* TODO: decide:
|
||||
1. move up
|
||||
transform:translate3d(0,-5px,0);
|
||||
|
||||
2. scale up
|
||||
transform: scale(1.04);
|
||||
|
||||
3. scale down
|
||||
transform: scale(0.96);
|
||||
|
||||
ATM: move up
|
||||
*/
|
||||
transform:translate3d(0,-5px,0);
|
||||
}
|
||||
|
||||
.post-card_header {
|
||||
font-family: 'Roboto', sans-serif;
|
||||
font-weight: 300;
|
||||
padding: 20px 30px 0;
|
||||
}
|
||||
|
||||
.post-card_excerpt {
|
||||
text-align: justify;
|
||||
padding: 0 30px;
|
||||
}
|
||||
|
||||
a.post-card_main {
|
||||
color: rgb(200, 200, 200);
|
||||
}
|
||||
|
||||
.post-card_meta {
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
font-size: 14px;
|
||||
margin: 10px 5px 0;
|
||||
color: rgb(180, 180, 180);
|
||||
}
|
||||
|
||||
a.post-card_main:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
footer.post-card_footer {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
height: 100%;
|
||||
margin-top: 20px;
|
||||
justify-content: flex-end;
|
||||
padding: 0 20px 20px;
|
||||
}
|
||||
|
||||
article {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.post-card_author-image {
|
||||
border-radius: 100%;
|
||||
margin-left: 10px;
|
||||
max-width: 30px;
|
||||
}
|
||||
|
||||
.post-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: 217px;
|
||||
max-height: 100%;
|
||||
|
||||
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
|
@ -1,6 +1,35 @@
|
|||
@charset "utf-8";
|
||||
/* CSS Document */
|
||||
/*
|
||||
|
||||
TABLE OF CONTENTS
|
||||
--------------------------------------------------
|
||||
1. Global Settings
|
||||
1.1. Structure & Style
|
||||
1.2. Layout
|
||||
1.3. Navigation bar(s)
|
||||
2. Index Style
|
||||
3. Post Feed
|
||||
4. Post Cards
|
||||
4.1. Big Post Card style
|
||||
4.2. Navbar Post Card Style
|
||||
--------------------------------------------------
|
||||
|
||||
*/
|
||||
|
||||
|
||||
/*
|
||||
1. Global Settings
|
||||
--------------------------------------------------
|
||||
Settings used for things displayed in all pages
|
||||
*/
|
||||
|
||||
/*
|
||||
1.1. Structure & Style
|
||||
--------------------------------------------------
|
||||
Used to style things in such a way that they appear in the same way, everywhere.
|
||||
*/
|
||||
|
||||
@import "fonts.css";
|
||||
html, body {
|
||||
font-family: 'Roboto', sans-serif;
|
||||
font-weight: 300;
|
||||
|
|
@ -57,61 +86,80 @@ img {
|
|||
display: block;
|
||||
}
|
||||
|
||||
.mind-post-card-sidebar_tag, .mind-page-title_tag, .mind-post-card-big_tag {
|
||||
color: #3fd5ff;
|
||||
}
|
||||
|
||||
/*
|
||||
1.2. Layout
|
||||
--------------------------------------------------
|
||||
Used to define how every page is displayed.
|
||||
*/
|
||||
.mind-content_main {
|
||||
width: 1260px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
/*
|
||||
1.3. Navigation
|
||||
--------------------------------------------------
|
||||
Used to style the navigation bars.
|
||||
*/
|
||||
.nav {
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
position: absolute; /* only used if JS is disabled */
|
||||
top: 0;
|
||||
width: 100%;
|
||||
z-index: 100;
|
||||
.mind-global-navbar_primary {
|
||||
position: absolute; /* only used if JS is disabled */
|
||||
top: 0;
|
||||
width: 100%;
|
||||
z-index: 100;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
text-decoration: none;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
text-decoration: none;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
|
||||
transition: .5s;
|
||||
transition: .5s;
|
||||
}
|
||||
/* This class is applied by a JS script, so that users with JS disabled
|
||||
can still see the navbar, but it won't move while they're scrolling.
|
||||
This is needed because the navbar is transparent, and a black background
|
||||
is applied by the script on scroll.
|
||||
*/
|
||||
.navbar-allowmoving {
|
||||
.mind-global-navbar_primary-allowmoving {
|
||||
position: fixed;
|
||||
}
|
||||
|
||||
.navbar-colored {
|
||||
.mind-global-navbar_primary-colored {
|
||||
background: rgba(0, 0, 0, 1);
|
||||
}
|
||||
|
||||
.navbar-colored img {
|
||||
.mind-global-navbar_primary-colored img {
|
||||
transform:translate(50px, 0);
|
||||
}
|
||||
|
||||
.navbar-transparent {
|
||||
.mind-global-navbar_primary-transparent {
|
||||
background: rgba(0, 0, 0, 0.0);
|
||||
}
|
||||
|
||||
.navbar-transparent img {
|
||||
.mind-global-navbar_primary-transparent img {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.navbar img {
|
||||
.mind-global-navbar_primary img {
|
||||
margin-left: -30px;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
transition: .5s;
|
||||
}
|
||||
|
||||
.navbar li {
|
||||
.mind-global-navbar_primary li {
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
font-size: 25px;
|
||||
|
|
@ -121,7 +169,7 @@ is applied by the script on scroll.
|
|||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.navbar a {
|
||||
.mind-global-navbar_primary a {
|
||||
color: white;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
|
@ -130,7 +178,7 @@ is applied by the script on scroll.
|
|||
align-items: center;
|
||||
}
|
||||
|
||||
.navbar li.nav-services {
|
||||
.mind-global-navbar_primary li.nav-services {
|
||||
/* TODO: choose if background should be colorful or white */
|
||||
background: linear-gradient(to right, #33ffc5 20%, #fc33ff, #ff3370, #ff3333, #3dff33, #33ffc5);
|
||||
/*background: white;*/
|
||||
|
|
@ -142,18 +190,238 @@ is applied by the script on scroll.
|
|||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
|
||||
.mind-content_main {
|
||||
width: 1260px;
|
||||
margin: auto;
|
||||
.mind-global-navbar_secondary {
|
||||
width: 100%;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
|
||||
background-color: rgb(50, 50, 50);
|
||||
}
|
||||
|
||||
.mind-feed_main {
|
||||
.mind-global-navbar_secondary li {
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
font-size: 25px;
|
||||
font-family: 'Oswald', sans-serif;
|
||||
font-weight: 300;
|
||||
margin: 0;
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.mind-global-navbar_secondary a {
|
||||
color: white;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
text-decoration: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* 2. Index Style
|
||||
--------------------------------------------------
|
||||
Used to style the index/homepage.
|
||||
*/
|
||||
|
||||
.mind-index-title_main {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
margin: auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
background: linear-gradient(45deg, #067062, #063d70, #2d0670, #4e0670, #700667);
|
||||
background-size: 1000%, 100%;
|
||||
animation: gradient 7s linear infinite;
|
||||
animation-direction: alternate-reverse;
|
||||
}
|
||||
|
||||
.mind-index-title_main h1 {
|
||||
margin-top: 100px;
|
||||
padding: 0;
|
||||
font-size: 90px;
|
||||
}
|
||||
|
||||
/* 3. Post Feed
|
||||
--------------------------------------------------
|
||||
Used to style the post feed, seen in the homepage & custom-tags page.
|
||||
*/
|
||||
|
||||
.mind-feed-content_main {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
grid-gap: 30px;
|
||||
padding: 50px 0;
|
||||
}
|
||||
|
||||
|
||||
/* 4. Post Cards
|
||||
--------------------------------------------------
|
||||
*/
|
||||
|
||||
/* 4.1. Big Post Card style
|
||||
--------------------------------------------------
|
||||
*/
|
||||
|
||||
.mind-post-card-big_main {
|
||||
/* Layout */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
|
||||
/* Style */
|
||||
background-color: rgb(50, 50, 50);
|
||||
border: 1px solid;
|
||||
border-color: transparent;
|
||||
border-radius: 5px;
|
||||
box-shadow: 0 1px 1px black, 0 2px 4px black;
|
||||
transition: 0.5s;
|
||||
font-size: 19px;
|
||||
}
|
||||
|
||||
.mind-post-card-big_main:hover {
|
||||
box-shadow: 1px 3px 15px 2px black;
|
||||
|
||||
/* TODO: decide:
|
||||
1. move up
|
||||
transform:translate3d(0,-5px,0);
|
||||
|
||||
2. scale up
|
||||
transform: scale(1.04);
|
||||
|
||||
3. scale down
|
||||
transform: scale(0.96);
|
||||
|
||||
ATM: move up
|
||||
*/
|
||||
transform:translate3d(0,-5px,0);
|
||||
}
|
||||
|
||||
.mind-post-card-big_header {
|
||||
font-family: 'Roboto', sans-serif;
|
||||
font-weight: 300;
|
||||
padding: 20px 30px 0;
|
||||
}
|
||||
|
||||
.mind-post-card-big_excerpt {
|
||||
text-align: justify;
|
||||
padding: 0 30px;
|
||||
}
|
||||
|
||||
a.mind-post-card-big_main {
|
||||
color: rgb(200, 200, 200);
|
||||
}
|
||||
|
||||
.mind-post-card-big_meta {
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
font-size: 14px;
|
||||
margin: 10px 5px 0;
|
||||
color: rgb(180, 180, 180);
|
||||
}
|
||||
|
||||
a.mind-post-card-big_main:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
footer.mind-post-card-big_footer {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
height: 100%;
|
||||
margin-top: 20px;
|
||||
justify-content: flex-end;
|
||||
padding: 0 20px 20px;
|
||||
}
|
||||
|
||||
.mind-post-card-big_author-image {
|
||||
border-radius: 100%;
|
||||
margin-left: 10px;
|
||||
max-width: 30px;
|
||||
}
|
||||
|
||||
.mind-post-card-big_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: 217px;
|
||||
max-height: 100%;
|
||||
|
||||
|
||||
border-radius: 5px;
|
||||
}
|
||||
/* 4.2. Navbar Post Card style
|
||||
--------------------------------------------------
|
||||
*/
|
||||
|
||||
.mind-post-card-sidebar_main {
|
||||
/* Layout */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: 20px 0;
|
||||
|
||||
/* 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-post-card-sidebar_main:hover {
|
||||
transform:translate3d(0,-5px,0);
|
||||
box-shadow: 0 0 2px rgb(0,0,0),0 2px 15px rgb(0,0,0);
|
||||
}
|
||||
|
||||
.mind-post-card-sidebar_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: 100px;
|
||||
max-height: 100%;
|
||||
|
||||
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.mind-post-card-sidebar_meta {
|
||||
font-family: 'Roboto';
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
font-size: 12px;
|
||||
color: rgb(180, 180, 180);
|
||||
}
|
||||
|
||||
.mind-post-card-sidebar_header {
|
||||
margin: 0 5px 0;
|
||||
padding: 0 5px 10px;
|
||||
}
|
||||
|
||||
/* */
|
||||
.mind-page-title {
|
||||
height: 400px;
|
||||
width: 100%;
|
||||
|
|
@ -181,10 +449,6 @@ is applied by the script on scroll.
|
|||
font-size: 15px
|
||||
}
|
||||
|
||||
.post-card-sidebar_tag, .mind-page-title a, .post-card_tag {
|
||||
color: #3fd5ff;
|
||||
}
|
||||
|
||||
/* Begin Main Content */
|
||||
main {
|
||||
display: block;
|
||||
|
|
@ -291,7 +555,7 @@ nav.mind-site-footer_nav {
|
|||
|
||||
/* End policy popup */
|
||||
|
||||
.mind-all-title_arrow-down {
|
||||
.mind-global-title_arrow-down {
|
||||
border: solid white;
|
||||
opacity: 0.4;
|
||||
border-width: 0 2px 2px 0;
|
||||
|
|
@ -308,11 +572,11 @@ div.mind-policy-popup {
|
|||
padding: 20px 20px;
|
||||
}
|
||||
|
||||
.mind-all-title_arrow-down-big {
|
||||
.mind-global-title_arrow-down-big {
|
||||
animation: arrow-bounce-big 1.5s infinite;
|
||||
}
|
||||
|
||||
.mind-all-title_arrow-down-mid {
|
||||
.mind-global-title_arrow-down-mid {
|
||||
animation: arrow-bounce-mid 1.5s infinite;
|
||||
}
|
||||
|
||||
|
|
@ -540,81 +804,3 @@ img {
|
|||
*/
|
||||
background: rgba(255, 255, 255, 0.995);
|
||||
}
|
||||
|
||||
/* Begin fonts */
|
||||
@font-face {
|
||||
font-family: 'Oswald';
|
||||
font-style: normal;
|
||||
font-weight: 300;
|
||||
src: url(https://fonts.gstatic.com/s/oswald/v24/TK3_WkUHHAIjg75cFRf3bXL8LICs169vsUZiZQ.woff2) format('woff2');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Montserrat';
|
||||
font-style: normal;
|
||||
font-weight: 200;
|
||||
src: url(https://fonts.gstatic.com/s/montserrat/v14/JTURjIg1_i6t8kCHKm45_aZA3gnD_g.woff2) format('woff2');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Montserrat';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-display: swap;
|
||||
src: local('Montserrat Regular'), local('Montserrat-Regular'), url(https://fonts.gstatic.com/s/montserrat/v14/JTUSjIg1_i6t8kCHKm459Wlhyw.woff2) format('woff2');
|
||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Montserrat';
|
||||
font-style: normal;
|
||||
font-weight: 800;
|
||||
src: url(https://fonts.gstatic.com/s/montserrat/v14/JTURjIg1_i6t8kCHKm45_c5H3gnD_g.woff2) format('woff2');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
font-style: normal;
|
||||
font-weight: 300;
|
||||
font-display: swap;
|
||||
src: local('Roboto Light'), local('Roboto-Light'), url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmSU5fBBc4.woff2) format('woff2');
|
||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-display: swap;
|
||||
src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu4mxK.woff2) format('woff2');
|
||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
font-display: swap;
|
||||
src: local('Roboto Bold'), local('Roboto-Bold'), url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmWUlfBBc4.woff2) format('woff2');
|
||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
font-style: normal;
|
||||
font-weight: 900;
|
||||
font-display: swap;
|
||||
src: local('Roboto Black'), local('Roboto-Black'), url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmYUtfBBc4.woff2) format('woff2');
|
||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'PT Serif';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-display: swap;
|
||||
src: local('PT Serif'), local('PTSerif-Regular'), url(https://fonts.gstatic.com/s/ptserif/v11/EJRVQgYoZZY2vCFuvAFWzr8.woff2) format('woff2');
|
||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
||||
}
|
||||
|
||||
/* End fonts */
|
||||
|
|
|
|||
|
|
@ -1,12 +1,11 @@
|
|||
// JavaScript Document
|
||||
$(document).ready(function(){
|
||||
$(window).scroll(function(){
|
||||
if($(this).scrollTop() >
|
||||
//$(window).height()*0.3){
|
||||
100) {
|
||||
$(".mind-all-title_arrow-down").css({"opacity" : "0"});
|
||||
$(".mind-global-title_arrow-down").css({"opacity" : "0"});
|
||||
} else {
|
||||
$(".mind-all-title_arrow-down").css({"opacity" : "0.4"});
|
||||
$(".mind-global-title_arrow-down").css({"opacity" : "0.4"});
|
||||
}
|
||||
})
|
||||
})
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -4,19 +4,19 @@ var offset = 100;
|
|||
|
||||
function makeTransparent()
|
||||
{
|
||||
$("#navbar").removeClass('navbar-colored').addClass('navbar-transparent');
|
||||
$("#mind-global-navbar_primary").removeClass('mind-global-navbar_primary-colored').addClass('mind-global-navbar_primary-transparent');
|
||||
transparent = true;
|
||||
}
|
||||
|
||||
function makeOpaque()
|
||||
{
|
||||
$("#navbar").removeClass('navbar-transparent').addClass('navbar-colored');
|
||||
$("#mind-global-navbar_primary").removeClass('mind-global-navbar_primary-transparent').addClass('mind-global-navbar_primary-colored');
|
||||
transparent = false;
|
||||
}
|
||||
|
||||
$(document).ready(function() {
|
||||
|
||||
$("#navbar").addClass('navbar-allowmoving');
|
||||
$("#mind-global-navbar_primary").addClass('mind-global-navbar_primary-allowmoving');
|
||||
scroll_pos = $(this).scrollTop();
|
||||
|
||||
if(scroll_pos > offset)
|
||||
|
|
|
|||
|
|
@ -0,0 +1,22 @@
|
|||
{{!< default}}
|
||||
<div class="mind-page-title unselectable">
|
||||
{{#post}}
|
||||
<div>
|
||||
<h1>{{title}}</h1>
|
||||
</div>
|
||||
{{/post}}
|
||||
<i class="mind-global-title_arrow-down mind-global-title_arrow-down-mid"></i>
|
||||
</div>
|
||||
|
||||
<main>
|
||||
<nav class="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>
|
||||
</div>
|
||||
</main>
|
||||
26
default.hbs
26
default.hbs
|
|
@ -19,36 +19,24 @@
|
|||
|
||||
<!-- Scripts End -->
|
||||
|
||||
<!-- Begin Posts & Pages only code -->
|
||||
<!-- Begin Page-specific code -->
|
||||
{{#is "post, page"}}
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="{{asset "css/page-style.css"}}" />
|
||||
|
||||
<title>{{meta_title}} – {{@site.title}}</title>
|
||||
|
||||
{{/is}}
|
||||
|
||||
{{#is "post"}}
|
||||
<script src="{{asset "js/remark42-comments.js"}}"></script>
|
||||
{{/is}}
|
||||
<!-- End Posts & Pages only code -->
|
||||
|
||||
<!-- Begin Tags only code -->
|
||||
{{# is "tag"}}
|
||||
<link rel="stylesheet" type="text/css" href="{{asset "css/tag-style.css"}}" />
|
||||
{{/is}}
|
||||
<!-- End Tags only code -->
|
||||
|
||||
<!-- Begin Index only code -->
|
||||
{{#is "index"}}
|
||||
<title>{{@site.title}}</title>
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="{{asset "css/home-style.css"}}" />
|
||||
{{/is}}
|
||||
|
||||
{{#is "index, tag"}}
|
||||
<link rel="stylesheet" type="text/css" href="{{asset "css/post-card-style.css"}}" />
|
||||
{{# is "post, page, tag"}}
|
||||
<title>{{meta_title}} – {{@site.title}}</title>
|
||||
{{/is}}
|
||||
<!-- End Index only code -->
|
||||
|
||||
<!-- End Page-specific code -->
|
||||
|
||||
{{ghost_head}}
|
||||
{{!-- Outputs important meta data and settings, should always be in <head> --}}
|
||||
|
|
@ -56,7 +44,7 @@
|
|||
</head>
|
||||
<body class="{{body_class}}" onload="openPolicyPopup()">
|
||||
|
||||
<nav id="navbar" class="navbar unselectable">
|
||||
<nav id="mind-global-navbar_primary" class="mind-global-navbar_primary unselectable">
|
||||
<a href="/">
|
||||
<img src="{{img_url @site.icon size="xxs"}}" />
|
||||
</a>
|
||||
|
|
|
|||
8
home.hbs
8
home.hbs
|
|
@ -1,17 +1,17 @@
|
|||
{{!< default}}
|
||||
|
||||
<div class="mind-site-title unselectable" id="vantajs">
|
||||
<div class="mind-index-title_main unselectable" id="vantajs">
|
||||
<h1>{{@site.title}}</h1>
|
||||
<i class="mind-all-title_arrow-down mind-all-title_arrow-down-big"></i>
|
||||
<i class="mind-global-title_arrow-down mind-global-title_arrow-down-big"></i>
|
||||
</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_main">
|
||||
<div class="mind-feed-content_main">
|
||||
|
||||
<!-- Looping through every post -->
|
||||
{{#foreach posts}}
|
||||
|
|
|
|||
|
|
@ -1,22 +1,21 @@
|
|||
{{!< default}}
|
||||
|
||||
<div class="mind-site-title unselectable" id="vantajs">
|
||||
<div class="mind-index-title_main unselectable" id="vantajs">
|
||||
<h1>{{@site.title}}</h1>
|
||||
<i class="mind-all-title_arrow-down mind-all-title_arrow-down-big"></i>
|
||||
<i class="mind-global-title_arrow-down mind-global-title_arrow-down-big"></i>
|
||||
</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_main">
|
||||
<div class="mind-feed-content_main">
|
||||
|
||||
<!-- Looping through every post -->
|
||||
{{#foreach posts}}
|
||||
{{> "post-card-big"}}
|
||||
</article>
|
||||
{{/foreach}}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
2
page.hbs
2
page.hbs
|
|
@ -5,7 +5,7 @@
|
|||
<h1>{{title}}</h1>
|
||||
</div>
|
||||
{{/post}}
|
||||
<i class="mind-all-title_arrow-down mind-all-title_arrow-down-mid"></i>
|
||||
<i class="mind-global-title_arrow-down mind-global-title_arrow-down-mid"></i>
|
||||
</div>
|
||||
|
||||
<main>
|
||||
|
|
|
|||
|
|
@ -1,17 +1,17 @@
|
|||
<article class="{{post_class}}">
|
||||
<a class="post-card_main" href="{{url}}">
|
||||
<img class="post-card_feature-image" src="{{img_url feature_image size="m"}}" />
|
||||
<header class="post-card_header">
|
||||
<p class="post-card_meta"><span class="post-card_tag">{{primary_tag.name}}</span>
|
||||
<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>
|
||||
</header>
|
||||
<section class="post-card_excerpt">
|
||||
<section class="mind-post-card-big_excerpt">
|
||||
<p>{{excerpt words="26"}}</p>
|
||||
</section>
|
||||
<footer class="post-card_footer">
|
||||
<footer class="mind-post-card-big_footer">
|
||||
{{primary_author.name}}
|
||||
{{#if primary_author.profile_image}}<img class="post-card_author-image" src="{{img_url primary_author.profile_image size="xxs"}}" alt="Author image" />{{/if}}
|
||||
{{#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>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,16 @@
|
|||
{{#get "posts" limit="3" filter="tags:[{{post.tags}}]+id:-{{post.id}}" include="tags" as |related|}}
|
||||
<h4>Similar posts</h4>
|
||||
{{#foreach related}}
|
||||
<article class="{{post_class}}">
|
||||
<a class="mind-post-card-sidebar_main" href="{{url}}">
|
||||
<img class="mind-post-card-sidebar_feature-image" src="{{img_url feature_image size="s"}}" />
|
||||
<header class="mind-post-card-sidebar_header">
|
||||
<p class="mind-post-card-sidebar_meta"><span class="mind-post-card-sidebar_tag">{{primary_tag.name}}</span> • <time class="post-date" datetime="{{date format='YYYY-MM-DD'}}">{{date format="DD MMMM YYYY"}}</time></p>
|
||||
<h5>{{title}}</h5>
|
||||
</header>
|
||||
</a>
|
||||
</article>
|
||||
{{/foreach}}
|
||||
{{else}}
|
||||
<h4>No related posts</h4>
|
||||
{{/get}}
|
||||
|
|
@ -1,16 +0,0 @@
|
|||
{{#get "posts" limit="3" filter="tags:[{{post.tags}}]+id:-{{post.id}}" include="tags" as |related|}}
|
||||
<h4>Similar posts</h4>
|
||||
{{#foreach related}}
|
||||
<article class="{{post_class}}">
|
||||
<a class="post-card-sidebar_main" href="{{url}}">
|
||||
<img class="post-card-sidebar_feature-image" src="{{img_url feature_image size="s"}}" />
|
||||
<header class="post-card-sidebar_header">
|
||||
<p class="post-card-sidebar_meta"><span class="post-card-sidebar_tag">{{primary_tag.name}}</span> • <time class="post-date" datetime="{{date format='YYYY-MM-DD'}}">{{date format="DD MMMM YYYY"}}</time></p>
|
||||
<h5>{{title}}</h5>
|
||||
</header>
|
||||
</a>
|
||||
</article>
|
||||
{{/foreach}}
|
||||
{{else}}
|
||||
<h4>No related posts</h4>
|
||||
{{/get}}
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
<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>
|
||||
</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>
|
||||
6
post.hbs
6
post.hbs
|
|
@ -4,10 +4,10 @@
|
|||
|
||||
<div>
|
||||
<h1>{{title}}</h1>
|
||||
<p><a href="{{primary_tag.url}}">{{primary_tag.name}}</a> • <time class="post-date" datetime="{{date format='YYYY-MM-DD'}}">{{date format="DD MMMM YYYY"}}</time></p>
|
||||
<p><a class="mind-page-title_tag" href="{{primary_tag.url}}">{{primary_tag.name}}</a> • <time class="post-date" datetime="{{date format='YYYY-MM-DD'}}">{{date format="DD MMMM YYYY"}}</time></p>
|
||||
</div>
|
||||
{{/post}}
|
||||
<i class="mind-all-title_arrow-down mind-all-title_arrow-down-mid"></i>
|
||||
<i class="mind-global-title_arrow-down mind-global-title_arrow-down-mid"></i>
|
||||
</div>
|
||||
|
||||
<main>
|
||||
|
|
@ -28,7 +28,7 @@
|
|||
{{/post}}
|
||||
<aside class="mind-post_sidebar unselectable">
|
||||
<div class="mind-post_sidebar-content">
|
||||
{{> "posts-sidebar-loop"}}
|
||||
{{> "posts-card-small"}}
|
||||
</div>
|
||||
</aside>
|
||||
</div>
|
||||
|
|
|
|||
4
tag.hbs
4
tag.hbs
|
|
@ -14,12 +14,12 @@
|
|||
</p>
|
||||
</div>
|
||||
{{/tag}}
|
||||
<i class="mind-all-title_arrow-down mind-all-title_arrow-down-mid"></i>
|
||||
<i class="mind-global-title_arrow-down mind-global-title_arrow-down-mid"></i>
|
||||
</div>
|
||||
|
||||
<main>
|
||||
<div class="mind-content_main">
|
||||
<div class="mind-feed_main">
|
||||
<div class="mind-feed-content_main">
|
||||
|
||||
<!-- Looping through every post -->
|
||||
{{#foreach posts}}
|
||||
|
|
|
|||
Loading…
Reference in New Issue