From 3bd2fe56270e83439a91210431fe6d13b95312b8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Lorenzo=20Dellac=C3=A0?= Date: Thu, 20 Aug 2020 14:05:14 +0200 Subject: [PATCH] End CSS refactoring and organization MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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à --- assets/css/page-style.css | 137 ----------- assets/css/screen.css | 497 +++++++++++++++++++++++++------------- assets/js/arrow-fade.js | 4 +- custom-tags.hbs | 4 +- home.hbs | 4 +- index.hbs | 4 +- page.hbs | 6 +- post.hbs | 6 +- tag.hbs | 4 +- 9 files changed, 351 insertions(+), 315 deletions(-) delete mode 100755 assets/css/page-style.css 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}} - +