Lorenzo Dellacà
d976eaed0c
It was completely white before, and it had too much contrast in comparison to the rest of the text. Now, it's rgb(220, 220, 220).
1458 lines
27 KiB
CSS
Executable File
1458 lines
27 KiB
CSS
Executable File
@charset "utf-8";
|
|
/*
|
|
|
|
TABLE OF CONTENTS
|
|
--------------------------------------------------
|
|
1. Global Settings
|
|
1.1. Structure & Style
|
|
1.2. Layout
|
|
1.3. Navigation bar(s)
|
|
1.4. Footer
|
|
1.5. Header
|
|
2. Index Style
|
|
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
|
|
5.3. Koenig Styles
|
|
5.4. Sidebar
|
|
6. Cookie & Policy Popup
|
|
7. Animations and Gradients
|
|
8. Media Queries
|
|
--------------------------------------------------
|
|
|
|
*/
|
|
|
|
/*
|
|
1. Global Settings
|
|
--------------------------------------------------
|
|
Settings used for things displayed in all pages
|
|
*/
|
|
|
|
/*
|
|
1.1. Style
|
|
--------------------------------------------------
|
|
Used to style things in such a way that they appear in the same way, everywhere.
|
|
*/
|
|
|
|
@import "fonts.css";
|
|
|
|
html, body {
|
|
font-family: 'Open Sans', sans-serif;
|
|
font-weight: 300;
|
|
margin: 0;
|
|
padding: 0;
|
|
height: 100%;
|
|
|
|
font-size: 20px;
|
|
line-height: 1.6;
|
|
color: white;
|
|
width: 100%;
|
|
background-color: #151515;
|
|
scroll-behavior: smooth;
|
|
}
|
|
|
|
a {
|
|
text-decoration: none;
|
|
color: paleturquoise;
|
|
}
|
|
|
|
h1, h2, h3, h4, h5, h6 {
|
|
margin: 0;
|
|
font-family: 'Montserrat', sans-serif;
|
|
font-weight: 800;
|
|
color: rgb(230, 230, 230);
|
|
}
|
|
|
|
h1 {
|
|
font-size: 70px;
|
|
}
|
|
|
|
h2 {
|
|
font-size: 35px;
|
|
}
|
|
|
|
h3 {
|
|
font-size: 28px;
|
|
}
|
|
|
|
h4 {
|
|
font-size: 24px;
|
|
}
|
|
|
|
h5 {
|
|
font-size: 20px;
|
|
}
|
|
|
|
hr {
|
|
border: 1px solid rgb(80, 80, 80);
|
|
border-bottom: 0;
|
|
margin: 50px 70px;
|
|
}
|
|
|
|
img {
|
|
display: block;
|
|
-moz-user-select: none;
|
|
-webkis-user-select: none;
|
|
-ms-user-select: none;
|
|
user-select: none;
|
|
-o-user-select: none;
|
|
}
|
|
|
|
/* Generic class to make things unselectable */
|
|
.unselectable {
|
|
-moz-user-select: none;
|
|
-webkis-user-select: none;
|
|
-ms-user-select: none;
|
|
user-select: none;
|
|
-o-user-select: none;
|
|
}
|
|
|
|
/* COLORED TEXT SELECTION */
|
|
::selection {
|
|
color: #2d0670;
|
|
|
|
/*
|
|
We need RGBA because Chrome forces it to be semi-transparent, making white look like grey.
|
|
By setting it to 99.5% opacity, we can override this. 100% does not work, however.
|
|
*/
|
|
background: rgba(255, 255, 255, 0.995);
|
|
}
|
|
|
|
.mind-post-card-sidebar_tag, .mind-post-header_tag, .mind-post-card-big_tag {
|
|
color: #3fd5ff;
|
|
}
|
|
|
|
/*
|
|
1.2. Layout
|
|
--------------------------------------------------
|
|
Used to define how every page is displayed.
|
|
*/
|
|
|
|
main {
|
|
display: block;
|
|
box-sizing: border-box;
|
|
width: 100%;
|
|
max-width: 100%;
|
|
min-height: calc(100vh - 400px); /* To avoid having the footer appearing in the middle of the page */
|
|
}
|
|
|
|
.mind-content_main {
|
|
padding: 0 20px;
|
|
max-width: 1260px;
|
|
width: 1260px;
|
|
margin: auto;
|
|
}
|
|
|
|
/*
|
|
1.3. Navigation
|
|
--------------------------------------------------
|
|
Used to style the navigation bars.
|
|
*/
|
|
|
|
ul {
|
|
display: block;
|
|
list-style-type: disc;
|
|
margin-block-start: 1em;
|
|
margin-block-end: 1em;
|
|
margin-inline-start: 0;
|
|
margin-inline-end: 0;
|
|
padding-inline-start: 40px;
|
|
}
|
|
|
|
.nav {
|
|
width: 100%;
|
|
padding: 0;
|
|
|
|
overflow: auto;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.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;
|
|
|
|
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.
|
|
*/
|
|
.mind-global-navbar_primary-allowmoving {
|
|
position: fixed;
|
|
}
|
|
|
|
.mind-global-navbar_primary-colored {
|
|
background: rgba(0, 0, 0, 1);
|
|
}
|
|
|
|
.mind-global-navbar_primary-colored img {
|
|
transform: translate(50px, 0);
|
|
}
|
|
|
|
.mind-global-navbar_primary-transparent {
|
|
background: rgba(0, 0, 0, 0.0);
|
|
}
|
|
|
|
.mind-global-navbar_primary-transparent img {
|
|
opacity: 0;
|
|
}
|
|
|
|
.mind-global-navbar_primary img {
|
|
margin-left: -30px;
|
|
width: 30px;
|
|
height: 30px;
|
|
transition: .5s;
|
|
}
|
|
|
|
.mind-global-navbar_primary 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_primary a {
|
|
color: white;
|
|
margin: 0;
|
|
padding: 0;
|
|
text-decoration: none;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.mind-global-navbar_primary li.nav-services {
|
|
/* TODO: choose if background should be colorful or white */
|
|
/*background: white;*/
|
|
/*background: linear-gradient(to right, #33ffc5 20%, #fc33ff, #ff3370, #ff3333, #3dff33, #33ffc5);
|
|
background-size: 800px, 800px;
|
|
color: aquamarine;
|
|
text-fill-color: transparent;
|
|
animation: gradient 2s linear infinite;
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;*/
|
|
}
|
|
|
|
.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);
|
|
|
|
position: relative;
|
|
z-index: 4;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
/*
|
|
1.4. Footer
|
|
--------------------------------------------------
|
|
*/
|
|
|
|
.mind-site-footer_main {
|
|
font-size: 25px;
|
|
}
|
|
|
|
footer.mind-site-footer_main {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
position: relative;
|
|
z-index: 3;
|
|
font-family: 'Montserrat', sans-serif;
|
|
color: white;
|
|
padding: 20px;
|
|
}
|
|
|
|
.mind-site-footer_main p {
|
|
font-weight: 800;
|
|
margin: 0;
|
|
overflow-wrap: break-word;
|
|
}
|
|
|
|
nav.mind-site-footer_nav {
|
|
text-align: right;
|
|
}
|
|
|
|
/*
|
|
1.5. Header
|
|
--------------------------------------------------
|
|
*/
|
|
|
|
/* TODO: choose if background should be colorful or black */
|
|
.mind-post-header, footer.mind-site-footer_main {
|
|
/*background: linear-gradient(45deg, #067062, #063d70, #2d0670, #4e0670, #700667);
|
|
background-size: 1000%, 100%;
|
|
animation: gradient 7s linear infinite;
|
|
animation-direction: alternate-reverse;*/
|
|
background: rgb(10, 10, 10);
|
|
color: white;
|
|
}
|
|
|
|
.mind-global-header_arrow-down {
|
|
border: solid white;
|
|
opacity: 0.4;
|
|
border-width: 0 2px 2px 0;
|
|
display: inline-block;
|
|
padding: 6px;
|
|
margin-left: -6px;
|
|
position: absolute;
|
|
transform: rotate(45deg);
|
|
transition: 1s;
|
|
}
|
|
|
|
.mind-global-header_arrow-down-big {
|
|
animation: arrow-bounce-big 1.5s infinite;
|
|
}
|
|
|
|
.mind-global-header_arrow-down-mid {
|
|
animation: arrow-bounce-mid 1.5s infinite;
|
|
}
|
|
|
|
/* 2. Index Style
|
|
--------------------------------------------------
|
|
Used to style the index/homepage.
|
|
*/
|
|
|
|
.mind-index-header_main {
|
|
height: 100%;
|
|
width: 100%;
|
|
margin: auto;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
text-align: center;
|
|
/*background: black;*/
|
|
background: linear-gradient(45deg, #067062, #063d70, #2d0670, #4e0670, #700667);
|
|
background-size: 1000%, 100%;
|
|
animation: gradient 7s linear infinite;
|
|
animation-direction: alternate-reverse;
|
|
}
|
|
|
|
.mind-index-header_main h1 {
|
|
margin: 100px 40px 0;
|
|
padding: 0;
|
|
font-size: 90px;
|
|
line-height: 17vw;
|
|
}
|
|
|
|
/* 3. Feeds
|
|
--------------------------------------------------
|
|
*/
|
|
|
|
/* 3.1. Post Feed
|
|
--------------------------------------------------
|
|
Used to style the post feed, seen in the index/home page.
|
|
*/
|
|
|
|
.mind-feed-content_main {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr 1fr;
|
|
grid-gap: 30px;
|
|
padding: 50px 0;
|
|
}
|
|
|
|
/* 3.2. Tag Feed
|
|
--------------------------------------------------
|
|
Used to style the tag feed, seen in the custom-tags page.
|
|
*/
|
|
|
|
.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
|
|
--------------------------------------------------
|
|
*/
|
|
|
|
/* 4.1. Big Post Card style
|
|
--------------------------------------------------
|
|
*/
|
|
|
|
.mind-post-card-big_main {
|
|
/* Layout */
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
width: 100%;
|
|
max-width: 400px;
|
|
box-sizing: border-box;
|
|
|
|
/* Style */
|
|
background-color: rgb(50, 50, 50);
|
|
border: 1px solid transparent;
|
|
border-radius: 5px;
|
|
box-shadow: 0 1px 1px black, 0 2px 4px black;
|
|
transition: 0.5s;
|
|
font-size: 18px;
|
|
}
|
|
|
|
.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: 'Open Sans', 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 0 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', sans-serif;
|
|
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;
|
|
}
|
|
|
|
|
|
/* 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).
|
|
|
|
Even if pages are different from posts, they are very similar,
|
|
and thus mostly share the same classes.
|
|
Due to Ghost's structure, pages are derivates of posts,
|
|
so all classes will refer to them as posts ".mind-post*"
|
|
instead of pages ".mind-page*".
|
|
*/
|
|
|
|
|
|
/* 5.1. Header
|
|
--------------------------------------------------
|
|
*/
|
|
|
|
.mind-post-header {
|
|
height: 400px;
|
|
width: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
text-align: center;
|
|
position: relative;
|
|
z-index: 3;
|
|
box-shadow: 0 0 3px rgb(0, 0, 0), 0 3px 46px rgb(0, 0, 0);
|
|
}
|
|
|
|
.mind-post-header div {
|
|
/* Leave space for the floating arrow */
|
|
margin: 0 0 70px;
|
|
}
|
|
|
|
.mind-post-header p {
|
|
font-family: 'Roboto', sans-serif;
|
|
font-weight: 700;
|
|
text-transform: uppercase;
|
|
color: rgb(200, 200, 200);
|
|
font-size: 15px
|
|
}
|
|
|
|
.mind-post-header h1 {
|
|
margin: 0 20px;
|
|
line-height: 70px;
|
|
}
|
|
|
|
/* 5.2. Content
|
|
--------------------------------------------------
|
|
*/
|
|
|
|
.mind-post_main {
|
|
display: grid;
|
|
grid-template-columns: 1fr 4fr 1fr;
|
|
}
|
|
|
|
.mind-post_content-header {
|
|
/*
|
|
TODO: decide whether the image should be full-size (without rounded borders),
|
|
or with the same margin as the content, with rounded borders.
|
|
|
|
SAME-AS-CONTENT:
|
|
margin-top: 50px;
|
|
|
|
CURRENTLY:
|
|
full-size.
|
|
*/
|
|
|
|
margin: 0 -60px;
|
|
padding: 0 0 20px;
|
|
}
|
|
|
|
img.mind-post_feature-image {
|
|
width: 100%;
|
|
/*
|
|
TODO: see .mind-post_content-header.
|
|
|
|
SAME-AS-CONTENT:
|
|
border-radius: 5px;
|
|
*/
|
|
}
|
|
|
|
.mind-post_content code {
|
|
font-family: monospace;
|
|
background-color: rgb(20, 20, 20);
|
|
border-radius: 2px;
|
|
font-size: 14px;
|
|
padding: 7px 5px 2px;
|
|
}
|
|
|
|
.mind-post_content pre code {
|
|
border-radius: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.mind-post_content pre {
|
|
background-color: rgb(20, 20, 20);
|
|
overflow-x: auto;
|
|
border: 1px solid black;
|
|
border-radius: 5px;
|
|
font-size: 14px;
|
|
padding: 10px;
|
|
margin: 0 20px 2em;
|
|
}
|
|
|
|
.mind-post_central-column {
|
|
overflow: hidden; /* to hide, eg., overflowing code */
|
|
padding: 0 60px;
|
|
text-align: justify;
|
|
background-color: rgb(40, 40, 40);
|
|
box-shadow: 0 0 3px rgb(0, 0, 0), 0 3px 46px rgb(0, 0, 0);
|
|
position: relative;
|
|
z-index: 2;
|
|
font-size: 18px;
|
|
color: rgb(200, 200, 200);
|
|
box-sizing: border-box;
|
|
min-height: calc(100vh - 400px); /* To avoid having the div finish in the middle of the page, leaving an empty part */
|
|
}
|
|
|
|
.mind-post_content h1, .mind-post_content h2, .mind-post_content h3, .mind-post_content h4, .mind-post_content h5, .mind-post_content h6 {
|
|
text-align: left;
|
|
}
|
|
|
|
.mind-post_content blockquote {
|
|
border-left: 4px solid paleturquoise;
|
|
border-radius: 6px;
|
|
|
|
color: rgb(180, 180, 180);
|
|
background-color: rgb(30, 30, 30);
|
|
|
|
margin: 20px 0;
|
|
padding: 10px 30px;
|
|
}
|
|
|
|
.mind-post_content li {
|
|
margin: 0 0 1em;
|
|
}
|
|
|
|
.mind-post_content a {
|
|
text-decoration: underline;
|
|
color: rgb(220, 220, 220);
|
|
text-decoration-color: rgb(133, 179, 179); /* darker paleturquoise */
|
|
text-underline-position: under;
|
|
transition: 0.3s;
|
|
}
|
|
|
|
.mind-post_content a:hover {
|
|
color: paleturquoise;
|
|
}
|
|
|
|
/*.mind-post_content a {
|
|
position: relative;
|
|
}
|
|
|
|
.mind-post_content a:before {
|
|
content: "";
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 1px;
|
|
bottom: 0;
|
|
left: 0;
|
|
background-color: paleturquoise;
|
|
visibility: hidden;
|
|
-webkit-transform: scaleX(0);
|
|
transform: scaleX(0);
|
|
-webkit-transition: all 0.3s ease-in-out 0s;
|
|
transition: all 0.3s ease-in-out 0s;
|
|
}
|
|
|
|
.mind-post_content a:hover:before {
|
|
visibility: visible;
|
|
-webkit-transform: scaleX(1);
|
|
transform: scaleX(1);
|
|
}*/
|
|
|
|
#remark42 .root__copyright {
|
|
visibility: hidden;
|
|
}
|
|
|
|
/* 5.3. Koenig Styles
|
|
--------------------------------------------------
|
|
*/
|
|
|
|
/* Begin images
|
|
|
|
[structure]
|
|
class ".kg-card" is applied to all cards!
|
|
|
|
class ".kg-image" is applied to all images.
|
|
class ".kg-image-card" is applied to all image containers (includes description)
|
|
|
|
there are 3 sizes:
|
|
- normal
|
|
- wide (class ".kg-width-wide")
|
|
- full (class ".kg-width-full")
|
|
|
|
if an image has a description, class ".kg-card-hascaption" is applied to the container.
|
|
*/
|
|
|
|
.kg-card {
|
|
padding: 20px 0 20px;
|
|
}
|
|
|
|
.kg-image {
|
|
width: 100%;
|
|
max-width: 100%;
|
|
}
|
|
|
|
.kg-image-card img {
|
|
border-radius: 5px;
|
|
}
|
|
|
|
.kg-image-card {
|
|
margin: 0 40px;
|
|
}
|
|
|
|
.kg-width-wide {
|
|
margin: 0;
|
|
}
|
|
|
|
.kg-width-full {
|
|
margin: 0 -60px;
|
|
}
|
|
|
|
.kg-width-full img {
|
|
border-radius: 0;
|
|
}
|
|
|
|
.kg-card-hascaption figcaption {
|
|
margin: 0 20px;
|
|
padding: 10px 20px;
|
|
font-size: 16px;
|
|
line-height: 1em;
|
|
color: rgb(150, 150, 150);
|
|
border-right: 1px solid rgb(80, 80, 80);
|
|
border-bottom: 1px solid rgb(80, 80, 80);
|
|
border-left: 1px solid rgb(80, 80, 80);
|
|
border-radius: 0 0 5px 5px;
|
|
text-align: center;
|
|
}
|
|
|
|
/* End images */
|
|
|
|
/* Begin Bookmarks */
|
|
|
|
|
|
.kg-bookmark-card {
|
|
margin: 0;
|
|
}
|
|
|
|
.kg-bookmark-card a {
|
|
text-decoration: none;
|
|
}
|
|
|
|
.kg-bookmark-container {
|
|
display: flex;
|
|
min-height: 148px;
|
|
border: 1px solid rgb(80, 80, 80);
|
|
border-radius: 5px;
|
|
transition: .3s;
|
|
max-height: 170px;
|
|
}
|
|
|
|
.kg-bookmark-container:hover {
|
|
transform: translate3d(0, -3px, 0);
|
|
box-shadow: 0 0 3px rgb(0, 0, 0), 0 3px 10px rgb(0, 0, 0);
|
|
}
|
|
|
|
.kg-bookmark-content {
|
|
display: flex;
|
|
flex-grow: 1;
|
|
flex-direction: column;
|
|
justify-content: flex-start;
|
|
align-items: flex-start;
|
|
word-break: break-word;
|
|
padding: 20px 20px 0;
|
|
color: white;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.kg-bookmark-title, .kg-bookmark-description {
|
|
/* Used to make the text only be max 2 lines long */
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 2;
|
|
-webkit-box-orient: vertical;
|
|
}
|
|
|
|
.kg-bookmark-title {
|
|
font-size: 15px;
|
|
font-weight: 700;
|
|
|
|
}
|
|
|
|
.kg-bookmark-description {
|
|
margin: 12px 0;
|
|
max-height: 48px;
|
|
font-size: 14px;
|
|
|
|
}
|
|
|
|
.kg-bookmark-metadata {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 15px;
|
|
margin-top: auto;
|
|
|
|
}
|
|
|
|
.kg-bookmark-icon {
|
|
width: 22px;
|
|
height: 22px;
|
|
margin-right: 10px;
|
|
|
|
}
|
|
|
|
.kg-bookmark-publisher {
|
|
padding-left: 10px;
|
|
}
|
|
|
|
.kg-bookmark-author {
|
|
padding-right: 10px;
|
|
border-right: 1px solid rgb(80, 80, 80);
|
|
}
|
|
|
|
.kg-bookmark-author, .kg-bookmark-publisher {
|
|
font-family: 'Open Sans', sans-serif;
|
|
font-weight: 700;
|
|
text-transform: uppercase;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.kg-bookmark-thumbnail {
|
|
border-radius: 0 5px 5px 0;
|
|
min-width: 33%;
|
|
box-sizing: border-box;
|
|
font-size: 0;
|
|
width: 50%;
|
|
max-height: 100%;
|
|
}
|
|
|
|
.kg-bookmark-thumbnail img {
|
|
box-sizing: border-box;
|
|
border-radius: 0 5px 5px 0;
|
|
object-fit: cover;
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
|
|
/* End Bookmarks */
|
|
|
|
/* Begin Gallery */
|
|
.kg-gallery-container {
|
|
margin: 0 -40px;
|
|
}
|
|
|
|
.kg-gallery-row {
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
|
|
.kg-gallery-image {
|
|
margin: 10px 10px;
|
|
}
|
|
|
|
.kg-gallery-image img {
|
|
object-fit: cover;
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
|
|
/* End Gallery */
|
|
|
|
|
|
/* 5.4. Sidebar
|
|
--------------------------------------------------
|
|
*/
|
|
#mind-post_sidebar-left {
|
|
}
|
|
|
|
#mind-post_sidebar-left a {
|
|
color: rgb(230, 230, 230);
|
|
font-family: 'Open Sans', sans-serif;
|
|
font-weight: 300;
|
|
}
|
|
|
|
#mind-post_sidebar-left a.current {
|
|
font-weight: 700;
|
|
}
|
|
|
|
#mind-post_sidebar-left a:hover {
|
|
color: paleturquoise;
|
|
}
|
|
|
|
#mind-post_sidebar-left h2 {
|
|
font-size: 18px;
|
|
padding: 10px 0;
|
|
}
|
|
|
|
#mind-post_sidebar-left h3 {
|
|
font-size: 15px;
|
|
padding: 0 0 0 10px;
|
|
}
|
|
|
|
.mind-post_sidebar {
|
|
padding: 0 20px;
|
|
background-color: rgb(30, 30, 30);
|
|
box-shadow: 0 0 3px rgb(0, 0, 0), 0 3px 46px rgb(0, 0, 0);
|
|
height: 100%;
|
|
}
|
|
|
|
.mind-post_sidebar-content {
|
|
padding: 90px 0 10px;
|
|
position: sticky;
|
|
top: 0;
|
|
}
|
|
|
|
/* 6. Cookie & Policy popup
|
|
--------------------------------------------------
|
|
*/
|
|
|
|
.mind-policy-popup {
|
|
display: none; /*Hidden, we want to show it via JavaScript */
|
|
|
|
/* Theming */
|
|
background: rgb(30, 30, 30);
|
|
color: white;
|
|
border-radius: 3px;
|
|
padding: 10px;
|
|
font-size: 25px;
|
|
box-sizing: border-box;
|
|
box-shadow: 10px 10px 10px 0 rgba(0, 0, 0, 0.2);
|
|
|
|
/* Disable text highlighting */
|
|
user-select: none;
|
|
-moz-user-select: none;
|
|
-webkis-user-select: none;
|
|
-ms-user-select: none;
|
|
-o-user-select: none;
|
|
|
|
/* Size */
|
|
width: 600px;
|
|
overflow: hidden;
|
|
|
|
/* Positioning */
|
|
position: fixed;
|
|
left: 50px;
|
|
bottom: 75px;
|
|
z-index: 2;
|
|
}
|
|
|
|
.mind-policy-popup p {
|
|
font-family: 'Montserrat', sans-serif;
|
|
font-weight: 200;
|
|
color: rgb(220, 220, 220);
|
|
font-size: 16px;
|
|
}
|
|
|
|
|
|
.mind-policy-popup button {
|
|
font-family: 'Montserrat', sans-serif;
|
|
font-weight: 800;
|
|
font-size: 13px;
|
|
|
|
transition-duration: 0.4s;
|
|
border-radius: 3px;
|
|
background-color: #484848;
|
|
border: none;
|
|
cursor: pointer;
|
|
color: white;
|
|
padding: 15px 30px;
|
|
text-align: center;
|
|
float: right;
|
|
}
|
|
|
|
.mind-policy-popup button:hover {
|
|
background-color: #44277a;
|
|
}
|
|
|
|
div.mind-policy-popup {
|
|
z-index: 100;
|
|
padding: 20px 20px;
|
|
}
|
|
|
|
/* End policy popup */
|
|
|
|
/* 7. Animations and Gradients
|
|
--------------------------------------------------
|
|
*/
|
|
|
|
/* ARROW BOUNCE (on Pages and Posts)*/
|
|
@keyframes arrow-bounce-mid {
|
|
0% {
|
|
top: 89%;
|
|
}
|
|
50% {
|
|
top: 87%;
|
|
}
|
|
100% {
|
|
top: 89%;
|
|
}
|
|
}
|
|
|
|
/* ARROW BOUNCE (on Index and Home pages)*/
|
|
@keyframes arrow-bounce-big {
|
|
0% {
|
|
top: 94%;
|
|
}
|
|
50% {
|
|
top: 92%;
|
|
}
|
|
100% {
|
|
top: 94%;
|
|
}
|
|
}
|
|
|
|
/* ANIMATED GRADIENT BACKGROUND */
|
|
@keyframes gradient {
|
|
0% {
|
|
background-position: 0
|
|
}
|
|
100% {
|
|
background-position: 100%
|
|
}
|
|
}
|
|
/* 8. Media Queries
|
|
Media queries are used to make the website responsive and cool on mobile.
|
|
--------------------------------------------------
|
|
*/
|
|
|
|
@media only screen and (max-width: 2000px)
|
|
{
|
|
ul {
|
|
margin: 15px 0;
|
|
}
|
|
}
|
|
|
|
@media only screen and (max-width: 1300px) {
|
|
|
|
h1 {
|
|
font-size: 60px;
|
|
}
|
|
|
|
h2 {
|
|
font-size: 32px;
|
|
}
|
|
|
|
h3 {
|
|
font-size: 26px;
|
|
}
|
|
|
|
.mind-post-header p {
|
|
font-size: 13px;
|
|
}
|
|
|
|
.mind-post-card-big_meta {
|
|
font-size: 13px;
|
|
}
|
|
|
|
.mind-post-card-big_main {
|
|
font-size: 17px;
|
|
}
|
|
|
|
.mind-content_main {
|
|
min-width: calc(100% - 40px);
|
|
width: calc(100% - 40px);
|
|
padding: 0 20px;
|
|
}
|
|
|
|
.mind-post_central-column {
|
|
padding: 0 40px;
|
|
font-size: 17px;
|
|
}
|
|
|
|
.kg-gallery-image {
|
|
margin: 10px 10px;
|
|
}
|
|
|
|
.kg-gallery-row {
|
|
margin: 0 20px;
|
|
}
|
|
|
|
.mind-post-card-big_main {
|
|
margin: auto;
|
|
}
|
|
|
|
.mind-site-footer_main {
|
|
font-size: 23px;
|
|
}
|
|
|
|
.mind-tag-content_main {
|
|
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
|
|
}
|
|
}
|
|
|
|
@media only screen and (max-width: 1000px) {
|
|
|
|
h1 {
|
|
font-size: 50px;
|
|
}
|
|
|
|
h2 {
|
|
font-size: 30px;
|
|
}
|
|
|
|
h3 {
|
|
font-size: 24px;
|
|
}
|
|
|
|
h4 {
|
|
font-size: 18px;
|
|
}
|
|
|
|
ul {
|
|
margin: 13px 0;
|
|
}
|
|
|
|
.mind-post-card-big_meta {
|
|
font-size: 12px;
|
|
}
|
|
|
|
.mind-post-card-big_header h3 {
|
|
font-size: 25px;
|
|
}
|
|
|
|
.mind-post-card-big_main {
|
|
font-size: 16px;
|
|
}
|
|
|
|
.mind-global-navbar_primary li, .mind-global-navbar_secondary li {
|
|
font-size: 22px;
|
|
}
|
|
|
|
.mind-feed-content_main {
|
|
grid-template-columns: 1fr 1fr;
|
|
}
|
|
|
|
.mind-post-header h1 {
|
|
margin: 0 20px;
|
|
line-height: 60px;
|
|
}
|
|
|
|
.mind-post_main {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.mind-post_central-column {
|
|
padding: 0 20px;
|
|
}
|
|
|
|
.kg-gallery-image {
|
|
margin: 10px 5px;
|
|
}
|
|
|
|
.kg-gallery-row {
|
|
margin: 0 40px;
|
|
}
|
|
|
|
.mind-post_sidebar {
|
|
visibility: hidden;
|
|
height: 0;
|
|
max-height: 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.mind-policy-popup {
|
|
width: 50vw;
|
|
bottom: 10px;
|
|
left: 10px;
|
|
}
|
|
|
|
.mind-policy-popup button {
|
|
padding: 10px 20px;
|
|
}
|
|
|
|
.mind-site-footer_main {
|
|
font-size: 20px;
|
|
}
|
|
|
|
.mind-tag-content_main {
|
|
grid-template-columns: 1fr 1fr 1fr 1fr;
|
|
}
|
|
|
|
.mind-tag-card_feature-image {
|
|
height: 180px;
|
|
}
|
|
}
|
|
|
|
@media only screen and (max-width: 800px) {
|
|
.mind-tag-content_main {
|
|
grid-template-columns: 1fr 1fr 1fr;
|
|
}
|
|
}
|
|
|
|
@media only screen and (max-width: 650px) {
|
|
|
|
h1 {
|
|
font-size: 40px;
|
|
}
|
|
|
|
h2 {
|
|
font-size: 26px;
|
|
}
|
|
|
|
h3 {
|
|
font-size: 21px;
|
|
}
|
|
|
|
ul {
|
|
margin: 10px 0 10px auto;
|
|
transition: .5s;
|
|
}
|
|
|
|
.mind-post-header h1 {
|
|
line-height: 40px;
|
|
}
|
|
|
|
.mind-post-card-big_header h3 {
|
|
font-size: 23px;
|
|
}
|
|
|
|
.mind-post-card-big_main {
|
|
font-size: 15px;
|
|
}
|
|
|
|
.mind-global-navbar_primary li, .mind-global-navbar_secondary li {
|
|
font-size: 18px;
|
|
}
|
|
|
|
.mind-feed-content_main, .mind-tag-content_main {
|
|
padding: 20px;
|
|
}
|
|
|
|
.mind-feed-content_main {
|
|
grid-template-columns: 1fr;
|
|
min-width: calc(100% - 40px);
|
|
width: calc(100% - 40px);
|
|
}
|
|
|
|
.mind-content_main {
|
|
width: 100%;
|
|
padding: 0;
|
|
}
|
|
|
|
.mind-post_central-column {
|
|
font-size: 15px;
|
|
}
|
|
|
|
.mind-post_content pre,
|
|
.mind-post_content code,
|
|
.kg-card-hascaption figcaption,
|
|
.kg-bookmark-description {
|
|
font-size: 12px;
|
|
}
|
|
|
|
.kg-bookmark-title {
|
|
font-size: 13px;
|
|
}
|
|
|
|
.kg-bookmark-publisher {
|
|
font-size: 10px;
|
|
}
|
|
|
|
.kg-bookmark-content {
|
|
padding: 10px 10px 0;
|
|
}
|
|
|
|
.kg-bookmark-metadata {
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.mind-global-navbar_primary img {
|
|
margin-left: -35px;
|
|
width: 25px;
|
|
height: 25px;
|
|
}
|
|
|
|
.mind-global-navbar_primary-colored ul {
|
|
width: calc(100vw - 40px);
|
|
}
|
|
|
|
.mind-policy-popup {
|
|
width: 90vw;
|
|
}
|
|
|
|
.mind-policy-popup p {
|
|
font-size: 12px;
|
|
}
|
|
|
|
.mind-policy-popup button {
|
|
font-size: 12px;
|
|
}
|
|
|
|
.mind-site-footer_main {
|
|
font-size: 18px;
|
|
}
|
|
|
|
.mind-tag-card_feature-image {
|
|
height: 150px;
|
|
}
|
|
}
|
|
|
|
@media only screen and (max-width: 550px) {
|
|
.mind-index-header_main h1 {
|
|
font-size: 16vw;
|
|
}
|
|
|
|
h2 {
|
|
font-size: 23px;
|
|
}
|
|
|
|
h3 {
|
|
font-size: 19px;
|
|
}
|
|
|
|
.mind-post_central-column {
|
|
font-size: 14px;
|
|
}
|
|
|
|
.mind-site-footer_main {
|
|
font-size: 16px;
|
|
}
|
|
}
|
|
|
|
@media only screen and (max-width: 470px)
|
|
{
|
|
.mind-tag-content_main {
|
|
grid-template-columns: 1fr 1fr;
|
|
}
|
|
}
|