diff --git a/assets/css/page-style.css b/assets/css/page-style.css deleted file mode 100755 index 3a428d8..0000000 --- a/assets/css/page-style.css +++ /dev/null @@ -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 */ diff --git a/assets/css/screen.css b/assets/css/screen.css index dae4487..f6b8541 100755 --- a/assets/css/screen.css +++ b/assets/css/screen.css @@ -3,15 +3,24 @@ 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 + 1.1. Structure & Style + 1.2. Layout + 1.3. Navigation bar(s) + 1.4. Footer + 1.5. Header +2. Index Style +3. Post Feed +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. */ @import "fonts.css"; + html, body { font-family: 'Roboto', sans-serif; font-weight: 300; @@ -84,9 +94,34 @@ hr { img { 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; } @@ -95,6 +130,14 @@ img { -------------------------------------------------- Used to define how every page is displayed. */ + +main { + display: block; + box-sizing: border-box; + width: 100%; + max-width: 100%; +} + .mind-content_main { width: 1260px; margin: auto; @@ -223,12 +266,72 @@ is applied by the script on scroll. 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 -------------------------------------------------- Used to style the index/homepage. */ -.mind-index-title_main { +.mind-index-header_main { height: 100%; width: 100%; margin: auto; @@ -242,7 +345,7 @@ Used to style the index/homepage. animation-direction: alternate-reverse; } -.mind-index-title_main h1 { +.mind-index-header_main h1 { margin-top: 100px; padding: 0; font-size: 90px; @@ -421,8 +524,24 @@ footer.mind-post-card-big_footer { 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; width: 100%; 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); } -.mind-page-title div { +.mind-post-header div { /* Leave space for the floating arrow */ margin: 0; margin-bottom: 70px; } -.mind-page-title p { +.mind-post-header p { font-family: 'Roboto'; font-weight: 700; text-transform: uppercase; @@ -449,151 +568,129 @@ footer.mind-post-card-big_footer { font-size: 15px } -/* Begin Main Content */ -main { - display: block; - box-sizing: border-box; - width: 100%; - max-width: 100%; -} -/* End Main Content */ +/* 5.2. Content +-------------------------------------------------- +*/ -/* Begin 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-post_main { + max-width: 1260px; + width: 1260px; + display: grid; + grid-template-columns: 1fr 4fr 1fr; + margin: auto; } -.mind-site-footer_main p { - font-weight: 800; - margin: 0; - padding: 20px; - font-size: 25px; +.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; } -/* .mind-page-title is only used by pages (homepage has a different title style), however other pages have the footer too. */ -/* TODO: choose if background should be colorful or black */ -.mind-page-title, 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; +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; } -nav.mind-site-footer_nav { - text-align: right; - margin: 20px; -} -/* End footer */ - -/* Begin policy popup */ -/* TODO: this makes the page a little bit higher & larger, also adding scrollbars. fix it */ - -.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; +.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; - 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-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; -.mind-policy-popup button { - font-family: 'Montserrat', sans-serif; - font-weight: 800; - font-size: 13px; + color: rgb(180, 180, 180); + background-color: rgb(30, 30, 30); - transition-duration: 0.4s; - border-radius: 3px; - background-color: #484848; - border: none; - cursor: pointer; - color: white; - padding: 15px 30px; - text-align: center; - float: right; + margin: 20px 0; + padding: 10px 30px; } -.mind-policy-popup button:hover { - background-color: #44277a; +.mind-post_content li { + margin: 0 0 1em; } -/* End policy popup */ +/*.mind-post_content a { + position: relative; +} -.mind-global-title_arrow-down { - border: solid white; - opacity: 0.4; - border-width: 0 2px 2px 0; - display: inline-block; - padding: 6px; - margin-left: -6px; +.mind-post_content a:before { + content: ""; position: absolute; - transform: rotate(45deg); - transition: 1s; + 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; } -div.mind-policy-popup { - z-index: 100; - padding: 20px 20px; -} +.mind-post_content a:hover:before { + visibility: visible; + -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 { -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 */ +/* 5.3. Koenig Styles +-------------------------------------------------- +*/ /* Begin images @@ -769,23 +866,110 @@ animation: arrow-bounce-mid 1.5s infinite; } /* End Gallery */ -/* End Ghost mandatory CSS */ -/* 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; + +/* 5.4. Sidebar +-------------------------------------------------- +*/ + +.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%; } -img { - -moz-user-select: none; - -webkis-user-select: none; - -ms-user-select: none; - user-select: none; - -o-user-select: none; +.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: 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 */ @@ -793,14 +977,3 @@ img { 0% {background-position: 0%} 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); -} diff --git a/assets/js/arrow-fade.js b/assets/js/arrow-fade.js index e7844ae..0740f05 100755 --- a/assets/js/arrow-fade.js +++ b/assets/js/arrow-fade.js @@ -3,9 +3,9 @@ $(document).ready(function(){ if($(this).scrollTop() > //$(window).height()*0.3){ 100) { - $(".mind-global-title_arrow-down").css({"opacity" : "0"}); + $(".mind-global-header_arrow-down").css({"opacity" : "0"}); } else { - $(".mind-global-title_arrow-down").css({"opacity" : "0.4"}); + $(".mind-global-header_arrow-down").css({"opacity" : "0.4"}); } }); }); diff --git a/custom-tags.hbs b/custom-tags.hbs index 7cbb6fe..baa9d0c 100644 --- a/custom-tags.hbs +++ b/custom-tags.hbs @@ -1,11 +1,11 @@ {{!< default}} -
+
{{#post}}

{{title}}

{{/post}} - +
diff --git a/home.hbs b/home.hbs index 295ed6d..6646015 100644 --- a/home.hbs +++ b/home.hbs @@ -1,8 +1,8 @@ {{!< default}} -
+

{{@site.title}}

- +
diff --git a/index.hbs b/index.hbs index 295ed6d..6646015 100755 --- a/index.hbs +++ b/index.hbs @@ -1,8 +1,8 @@ {{!< default}} -
+

{{@site.title}}

- +
diff --git a/page.hbs b/page.hbs index c8c7dc7..525e212 100644 --- a/page.hbs +++ b/page.hbs @@ -1,16 +1,16 @@ {{!< default}} -
+
{{#post}}

{{title}}

{{/post}} - +
-
+
{{#post}}
diff --git a/post.hbs b/post.hbs index 09bf7cb..0c9e399 100755 --- a/post.hbs +++ b/post.hbs @@ -1,13 +1,13 @@ {{!< default}} -
+
{{#post}}

{{title}}

-

{{primary_tag.name}} •

+

{{primary_tag.name}} •

{{/post}} - +
diff --git a/tag.hbs b/tag.hbs index 5a478d7..63e4354 100644 --- a/tag.hbs +++ b/tag.hbs @@ -1,6 +1,6 @@ {{!< default}} -
+
{{#tag}}
@@ -14,7 +14,7 @@

{{/tag}} - +