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:
Lorenzo Dellacà
78
assets/css/fonts.css
Normal file
78
assets/css/fonts.css
Normal file
@@ -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)
|
||||
|
||||
Reference in New Issue
Block a user