diff --git a/assets/css/screen.css b/assets/css/screen.css index 669457d..2c912e8 100755 --- a/assets/css/screen.css +++ b/assets/css/screen.css @@ -1,979 +1,1049 @@ -@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. 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 --------------------------------------------------- - -*/ - - -/* -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; -} - -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-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; -} - -/* -1.2. Layout --------------------------------------------------- -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; -} - -/* -1.3. Navigation --------------------------------------------------- -Used to style the navigation bars. -*/ -.nav { - width: 100%; - padding: 0; -} - -.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: linear-gradient(to right, #33ffc5 20%, #fc33ff, #ff3370, #ff3333, #3dff33, #33ffc5); - /*background: white;*/ - 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); -} - -.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 --------------------------------------------------- -*/ - -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-header_main { - height: 100%; - width: 100%; - margin: auto; - display: flex; - align-items: center; - justify-content: center; - text-align: center; - background: linear-gradient(45deg, #067062, #063d70, #2d0670, #4e0670, #700667); - background-size: 1000%, 100%; - animation: gradient 7s linear infinite; - animation-direction: alternate-reverse; -} - -.mind-index-header_main h1 { - margin-top: 100px; - padding: 0; - font-size: 90px; -} - -/* 3. Post Feed --------------------------------------------------- -Used to style the post feed, seen in the homepage & custom-tags page. -*/ - -.mind-feed-content_main { - display: grid; - grid-template-columns: 1fr 1fr 1fr; - grid-gap: 30px; - padding: 50px 0; -} - - -/* 4. Post Cards --------------------------------------------------- -*/ - -/* 4.1. Big Post Card style --------------------------------------------------- -*/ - -.mind-post-card-big_main { - /* Layout */ - display: flex; - flex-direction: column; - height: 100%; - width: 100%; - box-sizing: border-box; - - /* Style */ - background-color: rgb(50, 50, 50); - border: 1px solid; - border-color: transparent; - border-radius: 5px; - box-shadow: 0 1px 1px black, 0 2px 4px black; - transition: 0.5s; - font-size: 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 5px 0; - color: rgb(180, 180, 180); -} - -a.mind-post-card-big_main:hover { - text-decoration: none; -} - -footer.mind-post-card-big_footer { - display: flex; - align-items: flex-end; - height: 100%; - margin-top: 20px; - justify-content: flex-end; - padding: 0 20px 20px; -} - -.mind-post-card-big_author-image { - border-radius: 100%; - margin-left: 10px; - max-width: 30px; -} - -.mind-post-card-big_feature-image { - - /* - The following 3 statements are used - to make all images have the same size. - - This has the downside of being relatively more difficult to scale, - so if you want to go back to normal viewing (full image) - only leave: - width: 100%; - */ - object-fit: cover; - width: 100%; - height: 217px; - max-height: 100%; - - - border-radius: 5px; -} -/* 4.2. Navbar Post Card style --------------------------------------------------- -*/ - -.mind-post-card-sidebar_main { - /* Layout */ - display: flex; - flex-direction: column; - margin: 20px 0; - - /* Style */ - background-color: rgb(40, 40, 40); - border-radius: 5px; - box-shadow: 0 0 2px rgb(0,0,0),0 2px 3px rgb(0,0,0); - transition: .3s; -} - -.mind-post-card-sidebar_main:hover { - transform:translate3d(0,-5px,0); - box-shadow: 0 0 2px rgb(0,0,0),0 2px 15px rgb(0,0,0); -} - -.mind-post-card-sidebar_feature-image { - - /* - The following 3 statements are used - to make all images have the same size. - - This has the downside of being relatively more difficult to scale, - so if you want to go back to normal viewing (full image) - only leave: - width: 100%; - */ - object-fit: cover; - width: 100%; - height: 100px; - max-height: 100%; - - - border-radius: 5px; -} - -.mind-post-card-sidebar_meta { - font-family: 'Open Sans'; - 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; -} - - -/* 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; - margin-bottom: 70px; -} - -.mind-post-header p { - font-family: 'Open Sans'; - font-weight: 700; - text-transform: uppercase; - color: rgb(200, 200, 200); - font-size: 15px -} - -/* 5.2. Content --------------------------------------------------- -*/ - -.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: 18px; - 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); -}*/ - - -/* 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-container { - display: flex; - min-height: 148px; - border: 1px solid rgb(80, 80, 80); - border-radius: 5px; - transition: .3s; - } - - .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-direction: column; - padding: 20px 20px 0; - color: white; - } - - .kg-bookmark-title { - font-size: 15px; - font-weight: 700; - - } - - .kg-bookmark-description { - margin: 12px 0; - max-height: 48px; - font-size: 14px; - - text-overflow: ellipsis; - overflow: hidden; - display: -webkit-box; - -webkit-line-clamp: 2; - -webkit-box-orient: vertical; - - } - - .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 { - box-sizing: border-box; - font-size: 0; - max-height: 100%; - max-width: 30%; - } - - .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 { - 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: 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 */ -@keyframes gradient { - 0% {background-position: 0%} - 100% {background-position: 100%} -} +@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 +-------------------------------------------------- + +*/ + + +/* +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; +} + +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-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; +} + +/* +1.2. Layout +-------------------------------------------------- +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; +} + +/* +1.3. Navigation +-------------------------------------------------- +Used to style the navigation bars. +*/ +.nav { + width: 100%; + padding: 0; +} + +.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: linear-gradient(to right, #33ffc5 20%, #fc33ff, #ff3370, #ff3333, #3dff33, #33ffc5); + /*background: white;*/ + 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 +-------------------------------------------------- +*/ + +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-header_main { + height: 100%; + width: 100%; + margin: auto; + display: flex; + align-items: center; + justify-content: center; + text-align: center; + background: linear-gradient(45deg, #067062, #063d70, #2d0670, #4e0670, #700667); + background-size: 1000%, 100%; + animation: gradient 7s linear infinite; + animation-direction: alternate-reverse; +} + +.mind-index-header_main h1 { + margin-top: 100px; + padding: 0; + font-size: 90px; +} + +/* 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%; + box-sizing: border-box; + + /* Style */ + background-color: rgb(50, 50, 50); + border: 1px solid; + border-color: transparent; + border-radius: 5px; + box-shadow: 0 1px 1px black, 0 2px 4px black; + transition: 0.5s; + font-size: 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 5px 0; + color: rgb(180, 180, 180); +} + +a.mind-post-card-big_main:hover { + text-decoration: none; +} + +footer.mind-post-card-big_footer { + display: flex; + align-items: flex-end; + height: 100%; + margin-top: 20px; + justify-content: flex-end; + padding: 0 20px 20px; +} + +.mind-post-card-big_author-image { + border-radius: 100%; + margin-left: 10px; + max-width: 30px; +} + +.mind-post-card-big_feature-image { + + /* + The following 3 statements are used + to make all images have the same size. + + This has the downside of being relatively more difficult to scale, + so if you want to go back to normal viewing (full image) + only leave: + width: 100%; + */ + object-fit: cover; + width: 100%; + height: 217px; + max-height: 100%; + + + border-radius: 5px; +} +/* 4.2. Navbar Post Card style +-------------------------------------------------- +*/ + +.mind-post-card-sidebar_main { + /* Layout */ + display: flex; + flex-direction: column; + margin: 20px 0; + + /* Style */ + background-color: rgb(40, 40, 40); + border-radius: 5px; + box-shadow: 0 0 2px rgb(0,0,0),0 2px 3px rgb(0,0,0); + transition: .3s; +} + +.mind-post-card-sidebar_main:hover { + transform:translate3d(0,-5px,0); + box-shadow: 0 0 2px rgb(0,0,0),0 2px 15px rgb(0,0,0); +} + +.mind-post-card-sidebar_feature-image { + + /* + The following 3 statements are used + to make all images have the same size. + + This has the downside of being relatively more difficult to scale, + so if you want to go back to normal viewing (full image) + only leave: + width: 100%; + */ + object-fit: cover; + width: 100%; + height: 100px; + max-height: 100%; + + + border-radius: 5px; +} + +.mind-post-card-sidebar_meta { + font-family: 'Open Sans'; + 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; + margin-bottom: 70px; +} + +.mind-post-header p { + font-family: 'Open Sans'; + font-weight: 700; + text-transform: uppercase; + color: rgb(200, 200, 200); + font-size: 15px +} + +/* 5.2. Content +-------------------------------------------------- +*/ + +.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: 18px; + 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); +}*/ + + +/* 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-container { + display: flex; + min-height: 148px; + border: 1px solid rgb(80, 80, 80); + border-radius: 5px; + transition: .3s; + } + + .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-direction: column; + padding: 20px 20px 0; + color: white; + } + + .kg-bookmark-title { + font-size: 15px; + font-weight: 700; + + } + + .kg-bookmark-description { + margin: 12px 0; + max-height: 48px; + font-size: 14px; + + text-overflow: ellipsis; + overflow: hidden; + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + + } + + .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 { + box-sizing: border-box; + font-size: 0; + max-height: 100%; + max-width: 30%; + } + + .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 { + 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: 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 */ +@keyframes gradient { + 0% {background-position: 0%} + 100% {background-position: 100%} +} diff --git a/custom-tags.hbs b/custom-tags.hbs index 288afb2..e733081 100644 --- a/custom-tags.hbs +++ b/custom-tags.hbs @@ -9,14 +9,16 @@
-
diff --git a/partials/tag-card-big.hbs b/partials/tag-card-big.hbs index 3a2c957..8678407 100644 --- a/partials/tag-card-big.hbs +++ b/partials/tag-card-big.hbs @@ -1,17 +1,8 @@
- - -
-

{{primary_tag.name}} - •

-

{{title}}

+ + +
+

{{name}}

-
-

{{excerpt words="26"}}

-
-
diff --git a/tag.hbs b/tag.hbs index cfb0e74..77b11b2 100644 --- a/tag.hbs +++ b/tag.hbs @@ -1,52 +1,53 @@ -{{!< default}} - -
- {{#tag}} - -
-

{{name}}

-

- {{#if description}} - {{description}} - {{else}} - {{plural ../pagination.total empty='posts' singular='% post' plural='% posts'}} - {{/if}} -

-
- {{/tag}} - -
- -
-
-
- - - {{#foreach posts}} - {{> "post-card-big"}} - {{/foreach}} -
-
-
- - - +{{!< default}} + +
+ {{#tag}} + +
+

{{name}}

+

+ {{#if description}} + {{description}} + {{else}} + {{plural ../pagination.total empty='posts' singular='% post' plural='% posts'}} + • see all tags + {{/if}} +

+
+ {{/tag}} + +
+ +
+
+
+ + + {{#foreach posts}} + {{> "post-card-big"}} + {{/foreach}} +
+
+
+ + +