End CSS refactoring and organization
CSS refactoring is now complete, and all styles are correctly organized in main "screen.css" file, with a table of contents. All supplementary CSS files have been removed, with the exception of "fonts.css", as explained in previous commit. This CSS implementation may, however, be considered immature, and thus could be subject to heavy changes again in the near future. Many things are also still missing, such as a responsive design and support for some custom pages (such as /tags/). Signed-off-by: Lorenzo Dellacà <lorenzo.dellaca@mind-overflow.net>
This commit is contained in:
parent
67344effd0
commit
3bd2fe5627
@ -1,137 +0,0 @@
|
|||||||
@charset "utf-8";
|
|
||||||
|
|
||||||
.mind-post_main {
|
|
||||||
max-width: 1260px;
|
|
||||||
width: 1260px;
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: 1fr 4fr 1fr;
|
|
||||||
margin: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.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: scroll;
|
|
||||||
border: 1px solid black;
|
|
||||||
border-radius: 5px;
|
|
||||||
font-size: 14px;
|
|
||||||
color: white;
|
|
||||||
padding: 10px;
|
|
||||||
margin: 0 20px 2em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mind-post_content {
|
|
||||||
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: 19px;
|
|
||||||
color: rgb(200, 200, 200);
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
|
|
||||||
.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 {
|
|
||||||
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);
|
|
||||||
}*/
|
|
||||||
|
|
||||||
.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;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* MEDIA QUERIES FOR RESPONSIVE DESIGN */
|
|
||||||
@media screen and (max-width: 1300px) {
|
|
||||||
.mind-post_main {
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
/* END MEDIA QUERIES */
|
|
||||||
@ -3,15 +3,24 @@
|
|||||||
|
|
||||||
TABLE OF CONTENTS
|
TABLE OF CONTENTS
|
||||||
--------------------------------------------------
|
--------------------------------------------------
|
||||||
1. Global Settings
|
1. Global Settings
|
||||||
1.1. Structure & Style
|
1.1. Structure & Style
|
||||||
1.2. Layout
|
1.2. Layout
|
||||||
1.3. Navigation bar(s)
|
1.3. Navigation bar(s)
|
||||||
2. Index Style
|
1.4. Footer
|
||||||
3. Post Feed
|
1.5. Header
|
||||||
4. Post Cards
|
2. Index Style
|
||||||
4.1. Big Post Card style
|
3. Post Feed
|
||||||
4.2. Navbar Post Card Style
|
4. Post Cards
|
||||||
|
4.1. Big Post Card style
|
||||||
|
4.2. Navbar Post 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
|
||||||
--------------------------------------------------
|
--------------------------------------------------
|
||||||
|
|
||||||
*/
|
*/
|
||||||
@ -24,12 +33,13 @@ Settings used for things displayed in all pages
|
|||||||
*/
|
*/
|
||||||
|
|
||||||
/*
|
/*
|
||||||
1.1. Structure & Style
|
1.1. Style
|
||||||
--------------------------------------------------
|
--------------------------------------------------
|
||||||
Used to style things in such a way that they appear in the same way, everywhere.
|
Used to style things in such a way that they appear in the same way, everywhere.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
@import "fonts.css";
|
@import "fonts.css";
|
||||||
|
|
||||||
html, body {
|
html, body {
|
||||||
font-family: 'Roboto', sans-serif;
|
font-family: 'Roboto', sans-serif;
|
||||||
font-weight: 300;
|
font-weight: 300;
|
||||||
@ -84,9 +94,34 @@ hr {
|
|||||||
|
|
||||||
img {
|
img {
|
||||||
display: block;
|
display: block;
|
||||||
|
-moz-user-select: none;
|
||||||
|
-webkis-user-select: none;
|
||||||
|
-ms-user-select: none;
|
||||||
|
user-select: none;
|
||||||
|
-o-user-select: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mind-post-card-sidebar_tag, .mind-page-title_tag, .mind-post-card-big_tag {
|
/* 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-trasparent, 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;
|
color: #3fd5ff;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -95,6 +130,14 @@ img {
|
|||||||
--------------------------------------------------
|
--------------------------------------------------
|
||||||
Used to define how every page is displayed.
|
Used to define how every page is displayed.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
main {
|
||||||
|
display: block;
|
||||||
|
box-sizing: border-box;
|
||||||
|
width: 100%;
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
.mind-content_main {
|
.mind-content_main {
|
||||||
width: 1260px;
|
width: 1260px;
|
||||||
margin: auto;
|
margin: auto;
|
||||||
@ -223,12 +266,72 @@ is applied by the script on scroll.
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
1.4. Footer
|
||||||
|
--------------------------------------------------
|
||||||
|
*/
|
||||||
|
|
||||||
|
footer.mind-site-footer_main {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 1fr;
|
||||||
|
position: relative;
|
||||||
|
z-index: 3;
|
||||||
|
font-family: 'Montserrat', sans-serif;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mind-site-footer_main p {
|
||||||
|
font-weight: 800;
|
||||||
|
margin: 0;
|
||||||
|
padding: 20px;
|
||||||
|
font-size: 25px;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav.mind-site-footer_nav {
|
||||||
|
text-align: right;
|
||||||
|
margin: 20px;
|
||||||
|
}
|
||||||
|
/*
|
||||||
|
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: rgb(10, 10, 10);
|
||||||
|
background-size: 1000%, 100%;
|
||||||
|
animation: gradient 7s linear infinite;
|
||||||
|
animation-direction: alternate-reverse;
|
||||||
|
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
|
/* 2. Index Style
|
||||||
--------------------------------------------------
|
--------------------------------------------------
|
||||||
Used to style the index/homepage.
|
Used to style the index/homepage.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
.mind-index-title_main {
|
.mind-index-header_main {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin: auto;
|
margin: auto;
|
||||||
@ -242,7 +345,7 @@ Used to style the index/homepage.
|
|||||||
animation-direction: alternate-reverse;
|
animation-direction: alternate-reverse;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mind-index-title_main h1 {
|
.mind-index-header_main h1 {
|
||||||
margin-top: 100px;
|
margin-top: 100px;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
font-size: 90px;
|
font-size: 90px;
|
||||||
@ -421,8 +524,24 @@ footer.mind-post-card-big_footer {
|
|||||||
padding: 0 5px 10px;
|
padding: 0 5px 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* */
|
|
||||||
.mind-page-title {
|
/* 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;
|
height: 400px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
display: flex;
|
display: flex;
|
||||||
@ -435,13 +554,13 @@ footer.mind-post-card-big_footer {
|
|||||||
box-shadow: 0 0 3px rgb(0,0,0),0 3px 46px rgb(0,0,0);
|
box-shadow: 0 0 3px rgb(0,0,0),0 3px 46px rgb(0,0,0);
|
||||||
}
|
}
|
||||||
|
|
||||||
.mind-page-title div {
|
.mind-post-header div {
|
||||||
/* Leave space for the floating arrow */
|
/* Leave space for the floating arrow */
|
||||||
margin: 0;
|
margin: 0;
|
||||||
margin-bottom: 70px;
|
margin-bottom: 70px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mind-page-title p {
|
.mind-post-header p {
|
||||||
font-family: 'Roboto';
|
font-family: 'Roboto';
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
@ -449,151 +568,129 @@ footer.mind-post-card-big_footer {
|
|||||||
font-size: 15px
|
font-size: 15px
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Begin Main Content */
|
/* 5.2. Content
|
||||||
main {
|
--------------------------------------------------
|
||||||
display: block;
|
*/
|
||||||
box-sizing: border-box;
|
|
||||||
width: 100%;
|
|
||||||
max-width: 100%;
|
|
||||||
}
|
|
||||||
/* End Main Content */
|
|
||||||
|
|
||||||
/* Begin footer */
|
.mind-post_main {
|
||||||
footer.mind-site-footer_main {
|
max-width: 1260px;
|
||||||
display: grid;
|
width: 1260px;
|
||||||
grid-template-columns: 1fr 1fr;
|
display: grid;
|
||||||
position: relative;
|
grid-template-columns: 1fr 4fr 1fr;
|
||||||
z-index: 3;
|
margin: auto;
|
||||||
font-family: 'Montserrat', sans-serif;
|
|
||||||
color: white;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.mind-site-footer_main p {
|
.mind-post_content-header {
|
||||||
font-weight: 800;
|
/*
|
||||||
margin: 0;
|
TODO: decide whether the image should be full-size (without rounded borders),
|
||||||
padding: 20px;
|
or with the same margin as the content, with rounded borders.
|
||||||
font-size: 25px;
|
|
||||||
|
SAME-AS-CONTENT:
|
||||||
|
margin-top: 50px;
|
||||||
|
|
||||||
|
CURRENTLY:
|
||||||
|
full-size.
|
||||||
|
*/
|
||||||
|
|
||||||
|
margin: 0 -60px;
|
||||||
|
padding: 0 0 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* .mind-page-title is only used by pages (homepage has a different title style), however other pages have the footer too. */
|
img.mind-post_feature-image {
|
||||||
/* TODO: choose if background should be colorful or black */
|
width: 100%;
|
||||||
.mind-page-title, footer.mind-site-footer_main {
|
/*
|
||||||
/*background: linear-gradient(45deg, #067062, #063d70, #2d0670, #4e0670, #700667);*/
|
TODO: see .mind-post_content-header.
|
||||||
background: rgb(10, 10, 10);
|
|
||||||
background-size: 1000%, 100%;
|
SAME-AS-CONTENT:
|
||||||
animation: gradient 7s linear infinite;
|
border-radius: 5px;
|
||||||
animation-direction: alternate-reverse;
|
*/
|
||||||
|
}
|
||||||
|
|
||||||
|
.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: scroll;
|
||||||
|
border: 1px solid black;
|
||||||
|
border-radius: 5px;
|
||||||
|
font-size: 14px;
|
||||||
color: white;
|
color: white;
|
||||||
|
padding: 10px;
|
||||||
|
margin: 0 20px 2em;
|
||||||
}
|
}
|
||||||
|
|
||||||
nav.mind-site-footer_nav {
|
.mind-post_content {
|
||||||
text-align: right;
|
overflow: hidden; /* to hide, eg., overflowing code */
|
||||||
margin: 20px;
|
padding: 0 60px;
|
||||||
}
|
text-align: justify;
|
||||||
/* End footer */
|
background-color: rgb(40, 40, 40);
|
||||||
|
box-shadow: 0 0 3px rgb(0,0,0),0 3px 46px rgb(0,0,0);
|
||||||
/* Begin policy popup */
|
position: relative;
|
||||||
/* TODO: this makes the page a little bit higher & larger, also adding scrollbars. fix it */
|
z-index: 2;
|
||||||
|
font-size: 19px;
|
||||||
.mind-policy-popup {
|
color: rgb(200, 200, 200);
|
||||||
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-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 {
|
.mind-post_content h1, .mind-post_content h2, .mind-post_content h3, .mind-post_content h4, .mind-post_content h5, .mind-post_content h6 {
|
||||||
font-family: 'Montserrat', sans-serif;
|
text-align: left;
|
||||||
font-weight: 200;
|
|
||||||
color: white;
|
|
||||||
font-size: 16px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.mind-post_content blockquote {
|
||||||
|
border-left: 4px solid paleturquoise;
|
||||||
|
border-radius: 6px;
|
||||||
|
|
||||||
.mind-policy-popup button {
|
color: rgb(180, 180, 180);
|
||||||
font-family: 'Montserrat', sans-serif;
|
background-color: rgb(30, 30, 30);
|
||||||
font-weight: 800;
|
|
||||||
font-size: 13px;
|
|
||||||
|
|
||||||
transition-duration: 0.4s;
|
margin: 20px 0;
|
||||||
border-radius: 3px;
|
padding: 10px 30px;
|
||||||
background-color: #484848;
|
|
||||||
border: none;
|
|
||||||
cursor: pointer;
|
|
||||||
color: white;
|
|
||||||
padding: 15px 30px;
|
|
||||||
text-align: center;
|
|
||||||
float: right;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.mind-policy-popup button:hover {
|
.mind-post_content li {
|
||||||
background-color: #44277a;
|
margin: 0 0 1em;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* End policy popup */
|
/*.mind-post_content a {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
.mind-global-title_arrow-down {
|
.mind-post_content a:before {
|
||||||
border: solid white;
|
content: "";
|
||||||
opacity: 0.4;
|
|
||||||
border-width: 0 2px 2px 0;
|
|
||||||
display: inline-block;
|
|
||||||
padding: 6px;
|
|
||||||
margin-left: -6px;
|
|
||||||
position: absolute;
|
position: absolute;
|
||||||
transform: rotate(45deg);
|
width: 100%;
|
||||||
transition: 1s;
|
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;
|
||||||
}
|
}
|
||||||
|
|
||||||
div.mind-policy-popup {
|
.mind-post_content a:hover:before {
|
||||||
z-index: 100;
|
visibility: visible;
|
||||||
padding: 20px 20px;
|
-webkit-transform: scaleX(1);
|
||||||
}
|
transform: scaleX(1);
|
||||||
|
}*/
|
||||||
|
|
||||||
.mind-global-title_arrow-down-big {
|
|
||||||
animation: arrow-bounce-big 1.5s infinite;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mind-global-title_arrow-down-mid {
|
/* 5.3. Koenig Styles
|
||||||
animation: arrow-bounce-mid 1.5s infinite;
|
--------------------------------------------------
|
||||||
}
|
*/
|
||||||
|
|
||||||
/* ARROW BOUNCE */
|
|
||||||
@keyframes arrow-bounce-mid {
|
|
||||||
0% { top: 89%; }
|
|
||||||
50% { top: 87%; }
|
|
||||||
100% { top: 89%; }
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ARROW BOUNCE */
|
|
||||||
@keyframes arrow-bounce-big {
|
|
||||||
0% { top: 94%; }
|
|
||||||
50% { top: 92%; }
|
|
||||||
100% { top: 94%; }
|
|
||||||
}
|
|
||||||
/* Begin Ghost mandatory CSS */
|
|
||||||
|
|
||||||
/* Begin images
|
/* Begin images
|
||||||
|
|
||||||
@ -769,23 +866,110 @@ animation: arrow-bounce-mid 1.5s infinite;
|
|||||||
}
|
}
|
||||||
|
|
||||||
/* End Gallery */
|
/* End Gallery */
|
||||||
/* End Ghost mandatory CSS */
|
|
||||||
|
|
||||||
/* Generic class to make things unselectable */
|
|
||||||
.unselectable {
|
/* 5.4. Sidebar
|
||||||
-moz-user-select: none;
|
--------------------------------------------------
|
||||||
-webkis-user-select: none;
|
*/
|
||||||
-ms-user-select: none;
|
|
||||||
user-select: none;
|
.mind-post_sidebar {
|
||||||
-o-user-select: none;
|
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%;
|
||||||
}
|
}
|
||||||
|
|
||||||
img {
|
.mind-post_sidebar-content {
|
||||||
-moz-user-select: none;
|
padding: 90px 0 10px;
|
||||||
-webkis-user-select: none;
|
position: sticky;
|
||||||
-ms-user-select: none;
|
top: 0;
|
||||||
user-select: none;
|
}
|
||||||
-o-user-select: none;
|
|
||||||
|
/* 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: white;
|
||||||
|
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 */
|
/* ANIMATED GRADIENT BACKGROUND */
|
||||||
@ -793,14 +977,3 @@ img {
|
|||||||
0% {background-position: 0%}
|
0% {background-position: 0%}
|
||||||
100% {background-position: 100%}
|
100% {background-position: 100%}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* COLORED TEXT SELECTION */
|
|
||||||
::selection {
|
|
||||||
color: #2d0670;
|
|
||||||
|
|
||||||
/*
|
|
||||||
We need RGBA because Chrome forces it to be semi-trasparent, 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);
|
|
||||||
}
|
|
||||||
|
|||||||
@ -3,9 +3,9 @@ $(document).ready(function(){
|
|||||||
if($(this).scrollTop() >
|
if($(this).scrollTop() >
|
||||||
//$(window).height()*0.3){
|
//$(window).height()*0.3){
|
||||||
100) {
|
100) {
|
||||||
$(".mind-global-title_arrow-down").css({"opacity" : "0"});
|
$(".mind-global-header_arrow-down").css({"opacity" : "0"});
|
||||||
} else {
|
} else {
|
||||||
$(".mind-global-title_arrow-down").css({"opacity" : "0.4"});
|
$(".mind-global-header_arrow-down").css({"opacity" : "0.4"});
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|||||||
@ -1,11 +1,11 @@
|
|||||||
{{!< default}}
|
{{!< default}}
|
||||||
<div class="mind-page-title unselectable">
|
<div class="mind-post-header unselectable">
|
||||||
{{#post}}
|
{{#post}}
|
||||||
<div>
|
<div>
|
||||||
<h1>{{title}}</h1>
|
<h1>{{title}}</h1>
|
||||||
</div>
|
</div>
|
||||||
{{/post}}
|
{{/post}}
|
||||||
<i class="mind-global-title_arrow-down mind-global-title_arrow-down-mid"></i>
|
<i class="mind-global-header_arrow-down mind-global-header_arrow-down-mid"></i>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<main>
|
<main>
|
||||||
|
|||||||
4
home.hbs
4
home.hbs
@ -1,8 +1,8 @@
|
|||||||
{{!< default}}
|
{{!< default}}
|
||||||
|
|
||||||
<div class="mind-index-title_main unselectable" id="vantajs">
|
<div class="mind-index-header_main unselectable" id="vantajs">
|
||||||
<h1>{{@site.title}}</h1>
|
<h1>{{@site.title}}</h1>
|
||||||
<i class="mind-global-title_arrow-down mind-global-title_arrow-down-big"></i>
|
<i class="mind-global-header_arrow-down mind-global-header_arrow-down-big"></i>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@ -1,8 +1,8 @@
|
|||||||
{{!< default}}
|
{{!< default}}
|
||||||
|
|
||||||
<div class="mind-index-title_main unselectable" id="vantajs">
|
<div class="mind-index-header_main unselectable" id="vantajs">
|
||||||
<h1>{{@site.title}}</h1>
|
<h1>{{@site.title}}</h1>
|
||||||
<i class="mind-global-title_arrow-down mind-global-title_arrow-down-big"></i>
|
<i class="mind-global-header_arrow-down mind-global-header_arrow-down-big"></i>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
6
page.hbs
6
page.hbs
@ -1,16 +1,16 @@
|
|||||||
{{!< default}}
|
{{!< default}}
|
||||||
<div class="mind-page-title unselectable">
|
<div class="mind-post-header unselectable">
|
||||||
{{#post}}
|
{{#post}}
|
||||||
<div>
|
<div>
|
||||||
<h1>{{title}}</h1>
|
<h1>{{title}}</h1>
|
||||||
</div>
|
</div>
|
||||||
{{/post}}
|
{{/post}}
|
||||||
<i class="mind-global-title_arrow-down mind-global-title_arrow-down-mid"></i>
|
<i class="mind-global-header_arrow-down mind-global-header_arrow-down-mid"></i>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<main>
|
<main>
|
||||||
<div class="mind-content_main">
|
<div class="mind-content_main">
|
||||||
<div class="mind-page_main">
|
<div class="mind-post_main">
|
||||||
{{#post}}
|
{{#post}}
|
||||||
<div class="mind-post_content">
|
<div class="mind-post_content">
|
||||||
<div class="mind-post_content-header">
|
<div class="mind-post_content-header">
|
||||||
|
|||||||
6
post.hbs
6
post.hbs
@ -1,13 +1,13 @@
|
|||||||
{{!< default}}
|
{{!< default}}
|
||||||
<div class="mind-page-title unselectable">
|
<div class="mind-post-header unselectable">
|
||||||
{{#post}}
|
{{#post}}
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<h1>{{title}}</h1>
|
<h1>{{title}}</h1>
|
||||||
<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>
|
<p><a class="mind-post-header_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>
|
</div>
|
||||||
{{/post}}
|
{{/post}}
|
||||||
<i class="mind-global-title_arrow-down mind-global-title_arrow-down-mid"></i>
|
<i class="mind-global-header_arrow-down mind-global-header_arrow-down-mid"></i>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<main>
|
<main>
|
||||||
|
|||||||
4
tag.hbs
4
tag.hbs
@ -1,6 +1,6 @@
|
|||||||
{{!< default}}
|
{{!< default}}
|
||||||
|
|
||||||
<div class="mind-page-title unselectable">
|
<div class="mind-post-header unselectable">
|
||||||
{{#tag}}
|
{{#tag}}
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
@ -14,7 +14,7 @@
|
|||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
{{/tag}}
|
{{/tag}}
|
||||||
<i class="mind-global-title_arrow-down mind-global-title_arrow-down-mid"></i>
|
<i class="mind-global-header_arrow-down mind-global-header_arrow-down-mid"></i>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<main>
|
<main>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user