From 67344effd083294114b56b0370879a3b10171a52 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Lorenzo=20Dellac=C3=A0?= Date: Tue, 18 Aug 2020 18:20:39 +0200 Subject: [PATCH] Begin CSS refactoring for improved organization MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit CSS code was divided in multiple files, however this was not practical for organization since different pages needed different CSS classes one another, that were in most of those CSS files. This commit brings (mostly) everything in one file with a table of contents on top. An exception is made for fonts, that are now in a separate "fonts.css" file, since they contain fundamentally different things. Classes organization is not yet complete, however a great part was done. Next commits will finalize this organization and finish moving classes. Signed-off-by: Lorenzo Dellacà --- assets/css/fonts.css | 78 ++++++ assets/css/home-style.css | 59 ----- assets/css/page-style.css | 53 ---- assets/css/post-card-style.css | 101 -------- assets/css/screen.css | 412 ++++++++++++++++++++++--------- assets/css/tag-style.css | 0 assets/js/arrow-fade.js | 9 +- assets/js/scroll-navbar-color.js | 6 +- custom-tags.hbs | 22 ++ default.hbs | 26 +- home.hbs | 8 +- index.hbs | 9 +- page.hbs | 2 +- partials/post-card-big.hbs | 14 +- partials/posts-card-small.hbs | 16 ++ partials/posts-sidebar-loop.hbs | 16 -- partials/tag-card-big.hbs | 17 ++ post.hbs | 6 +- tag.hbs | 4 +- 19 files changed, 467 insertions(+), 391 deletions(-) create mode 100644 assets/css/fonts.css delete mode 100755 assets/css/home-style.css delete mode 100644 assets/css/post-card-style.css delete mode 100644 assets/css/tag-style.css create mode 100644 custom-tags.hbs create mode 100644 partials/posts-card-small.hbs delete mode 100644 partials/posts-sidebar-loop.hbs create mode 100644 partials/tag-card-big.hbs diff --git a/assets/css/fonts.css b/assets/css/fonts.css new file mode 100644 index 0000000..f457eee --- /dev/null +++ b/assets/css/fonts.css @@ -0,0 +1,78 @@ + +/* Begin fonts */ +@font-face { + font-family: 'Oswald'; + font-style: normal; + font-weight: 300; + src: url(https://fonts.gstatic.com/s/oswald/v24/TK3_WkUHHAIjg75cFRf3bXL8LICs169vsUZiZQ.woff2) format('woff2'); +} + +@font-face { + font-family: 'Montserrat'; + font-style: normal; + font-weight: 200; + src: url(https://fonts.gstatic.com/s/montserrat/v14/JTURjIg1_i6t8kCHKm45_aZA3gnD_g.woff2) format('woff2'); +} + +@font-face { + font-family: 'Montserrat'; + font-style: normal; + font-weight: 400; + font-display: swap; + src: local('Montserrat Regular'), local('Montserrat-Regular'), url(https://fonts.gstatic.com/s/montserrat/v14/JTUSjIg1_i6t8kCHKm459Wlhyw.woff2) format('woff2'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; +} + +@font-face { + font-family: 'Montserrat'; + font-style: normal; + font-weight: 800; + src: url(https://fonts.gstatic.com/s/montserrat/v14/JTURjIg1_i6t8kCHKm45_c5H3gnD_g.woff2) format('woff2'); +} + +@font-face { + font-family: 'Roboto'; + font-style: normal; + font-weight: 300; + font-display: swap; + src: local('Roboto Light'), local('Roboto-Light'), url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmSU5fBBc4.woff2) format('woff2'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; +} + +@font-face { + font-family: 'Roboto'; + font-style: normal; + font-weight: 400; + font-display: swap; + src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu4mxK.woff2) format('woff2'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; +} + +@font-face { + font-family: 'Roboto'; + font-style: normal; + font-weight: 700; + font-display: swap; + src: local('Roboto Bold'), local('Roboto-Bold'), url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmWUlfBBc4.woff2) format('woff2'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; +} + +@font-face { + font-family: 'Roboto'; + font-style: normal; + font-weight: 900; + font-display: swap; + src: local('Roboto Black'), local('Roboto-Black'), url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmYUtfBBc4.woff2) format('woff2'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; +} + +@font-face { + font-family: 'PT Serif'; + font-style: normal; + font-weight: 400; + font-display: swap; + src: local('PT Serif'), local('PTSerif-Regular'), url(https://fonts.gstatic.com/s/ptserif/v11/EJRVQgYoZZY2vCFuvAFWzr8.woff2) format('woff2'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; +} + +/* End fonts */ diff --git a/assets/css/home-style.css b/assets/css/home-style.css deleted file mode 100755 index 9595ca5..0000000 --- a/assets/css/home-style.css +++ /dev/null @@ -1,59 +0,0 @@ -@charset "utf-8"; -/* CSS Document */ - -h1 { - font-size: 90px; - margin-top: 20px; -} - -.mind-site-title { - 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-site-title h1 { - margin-top: 100px; - padding: 0; -} - -.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); -} - -.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; -} - -.navbar-secondary a { - color: white; - margin: 0; - padding: 0; - text-decoration: none; - display: flex; - align-items: center; -} diff --git a/assets/css/page-style.css b/assets/css/page-style.css index cc08bee..3a428d8 100755 --- a/assets/css/page-style.css +++ b/assets/css/page-style.css @@ -1,6 +1,4 @@ @charset "utf-8"; -/* CSS Document */ - .mind-post_main { max-width: 1260px; @@ -130,57 +128,6 @@ img.mind-post_feature-image { top: 0; } -.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; -} - -.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); -} - -.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; -} - -.post-card-sidebar_meta { - font-family: 'Roboto'; - font-weight: 700; - text-transform: uppercase; - font-size: 12px; - color: rgb(180, 180, 180); -} - -.post-card-sidebar_header { - margin: 0 5px 0; - padding: 0 5px 10px; -} - /* MEDIA QUERIES FOR RESPONSIVE DESIGN */ @media screen and (max-width: 1300px) { .mind-post_main { diff --git a/assets/css/post-card-style.css b/assets/css/post-card-style.css deleted file mode 100644 index 9725c76..0000000 --- a/assets/css/post-card-style.css +++ /dev/null @@ -1,101 +0,0 @@ - -.post-card_main { - 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: 19px; -} - -.post-card_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); -} - -.post-card_header { - font-family: 'Roboto', sans-serif; - font-weight: 300; - padding: 20px 30px 0; -} - -.post-card_excerpt { - text-align: justify; - padding: 0 30px; -} - -a.post-card_main { - color: rgb(200, 200, 200); -} - -.post-card_meta { - font-weight: 700; - text-transform: uppercase; - font-size: 14px; - margin: 10px 5px 0; - color: rgb(180, 180, 180); -} - -a.post-card_main:hover { - text-decoration: none; -} - -footer.post-card_footer { - display: flex; - align-items: flex-end; - height: 100%; - margin-top: 20px; - justify-content: flex-end; - padding: 0 20px 20px; -} - -article { - box-sizing: border-box; -} - -.post-card_author-image { - border-radius: 100%; - margin-left: 10px; - max-width: 30px; -} - -.post-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: 217px; - max-height: 100%; - - - border-radius: 5px; -} diff --git a/assets/css/screen.css b/assets/css/screen.css index 8b21bd5..dae4487 100755 --- a/assets/css/screen.css +++ b/assets/css/screen.css @@ -1,6 +1,35 @@ @charset "utf-8"; -/* CSS Document */ +/* +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 +-------------------------------------------------- +Settings used for things displayed in all pages +*/ + +/* +1.1. Structure & 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; @@ -57,61 +86,80 @@ img { display: block; } +.mind-post-card-sidebar_tag, .mind-page-title_tag, .mind-post-card-big_tag { + color: #3fd5ff; +} + +/* +1.2. Layout +-------------------------------------------------- +Used to define how every page is displayed. +*/ +.mind-content_main { + width: 1260px; + margin: auto; +} + +/* +1.3. Navigation +-------------------------------------------------- +Used to style the navigation bars. +*/ .nav { width: 100%; padding: 0; } -.navbar { -position: absolute; /* only used if JS is disabled */ -top: 0; -width: 100%; -z-index: 100; +.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; + display: flex; + align-items: center; + justify-content: flex-start; + text-align: center; + text-transform: uppercase; + text-decoration: none; + overflow: hidden; + padding: 0; -transition: .5s; + 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. */ -.navbar-allowmoving { +.mind-global-navbar_primary-allowmoving { position: fixed; } -.navbar-colored { +.mind-global-navbar_primary-colored { background: rgba(0, 0, 0, 1); } -.navbar-colored img { +.mind-global-navbar_primary-colored img { transform:translate(50px, 0); } -.navbar-transparent { +.mind-global-navbar_primary-transparent { background: rgba(0, 0, 0, 0.0); } -.navbar-transparent img { +.mind-global-navbar_primary-transparent img { opacity: 0; } -.navbar img { +.mind-global-navbar_primary img { margin-left: -30px; width: 30px; height: 30px; transition: .5s; } -.navbar li { +.mind-global-navbar_primary li { display: inline-block; text-align: center; font-size: 25px; @@ -121,7 +169,7 @@ is applied by the script on scroll. padding: 0 10px; } -.navbar a { +.mind-global-navbar_primary a { color: white; margin: 0; padding: 0; @@ -130,7 +178,7 @@ is applied by the script on scroll. align-items: center; } -.navbar li.nav-services { +.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;*/ @@ -142,18 +190,238 @@ is applied by the script on scroll. -webkit-text-fill-color: transparent; } -.mind-content_main { - width: 1260px; - margin: auto; +.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-feed_main { +.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; +} + +/* 2. Index Style +-------------------------------------------------- +Used to style the index/homepage. +*/ + +.mind-index-title_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-title_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: 19px; +} + +.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: 'Roboto', 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: 'Roboto'; + 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; +} + +/* */ .mind-page-title { height: 400px; width: 100%; @@ -181,10 +449,6 @@ is applied by the script on scroll. font-size: 15px } -.post-card-sidebar_tag, .mind-page-title a, .post-card_tag { - color: #3fd5ff; -} - /* Begin Main Content */ main { display: block; @@ -291,7 +555,7 @@ nav.mind-site-footer_nav { /* End policy popup */ -.mind-all-title_arrow-down { +.mind-global-title_arrow-down { border: solid white; opacity: 0.4; border-width: 0 2px 2px 0; @@ -308,11 +572,11 @@ div.mind-policy-popup { padding: 20px 20px; } -.mind-all-title_arrow-down-big { +.mind-global-title_arrow-down-big { animation: arrow-bounce-big 1.5s infinite; } -.mind-all-title_arrow-down-mid { +.mind-global-title_arrow-down-mid { animation: arrow-bounce-mid 1.5s infinite; } @@ -540,81 +804,3 @@ img { */ background: rgba(255, 255, 255, 0.995); } - -/* Begin fonts */ -@font-face { - font-family: 'Oswald'; - font-style: normal; - font-weight: 300; - src: url(https://fonts.gstatic.com/s/oswald/v24/TK3_WkUHHAIjg75cFRf3bXL8LICs169vsUZiZQ.woff2) format('woff2'); -} - -@font-face { - font-family: 'Montserrat'; - font-style: normal; - font-weight: 200; - src: url(https://fonts.gstatic.com/s/montserrat/v14/JTURjIg1_i6t8kCHKm45_aZA3gnD_g.woff2) format('woff2'); -} - -@font-face { - font-family: 'Montserrat'; - font-style: normal; - font-weight: 400; - font-display: swap; - src: local('Montserrat Regular'), local('Montserrat-Regular'), url(https://fonts.gstatic.com/s/montserrat/v14/JTUSjIg1_i6t8kCHKm459Wlhyw.woff2) format('woff2'); - unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; -} - -@font-face { - font-family: 'Montserrat'; - font-style: normal; - font-weight: 800; - src: url(https://fonts.gstatic.com/s/montserrat/v14/JTURjIg1_i6t8kCHKm45_c5H3gnD_g.woff2) format('woff2'); -} - -@font-face { - font-family: 'Roboto'; - font-style: normal; - font-weight: 300; - font-display: swap; - src: local('Roboto Light'), local('Roboto-Light'), url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmSU5fBBc4.woff2) format('woff2'); - unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; -} - -@font-face { - font-family: 'Roboto'; - font-style: normal; - font-weight: 400; - font-display: swap; - src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu4mxK.woff2) format('woff2'); - unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; -} - -@font-face { - font-family: 'Roboto'; - font-style: normal; - font-weight: 700; - font-display: swap; - src: local('Roboto Bold'), local('Roboto-Bold'), url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmWUlfBBc4.woff2) format('woff2'); - unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; -} - -@font-face { - font-family: 'Roboto'; - font-style: normal; - font-weight: 900; - font-display: swap; - src: local('Roboto Black'), local('Roboto-Black'), url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmYUtfBBc4.woff2) format('woff2'); - unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; -} - -@font-face { - font-family: 'PT Serif'; - font-style: normal; - font-weight: 400; - font-display: swap; - src: local('PT Serif'), local('PTSerif-Regular'), url(https://fonts.gstatic.com/s/ptserif/v11/EJRVQgYoZZY2vCFuvAFWzr8.woff2) format('woff2'); - unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; -} - -/* End fonts */ diff --git a/assets/css/tag-style.css b/assets/css/tag-style.css deleted file mode 100644 index e69de29..0000000 diff --git a/assets/js/arrow-fade.js b/assets/js/arrow-fade.js index 198529c..e7844ae 100755 --- a/assets/js/arrow-fade.js +++ b/assets/js/arrow-fade.js @@ -1,12 +1,11 @@ -// JavaScript Document $(document).ready(function(){ $(window).scroll(function(){ if($(this).scrollTop() > //$(window).height()*0.3){ 100) { - $(".mind-all-title_arrow-down").css({"opacity" : "0"}); + $(".mind-global-title_arrow-down").css({"opacity" : "0"}); } else { - $(".mind-all-title_arrow-down").css({"opacity" : "0.4"}); + $(".mind-global-title_arrow-down").css({"opacity" : "0.4"}); } - }) -}) + }); +}); diff --git a/assets/js/scroll-navbar-color.js b/assets/js/scroll-navbar-color.js index 500096c..9d88197 100755 --- a/assets/js/scroll-navbar-color.js +++ b/assets/js/scroll-navbar-color.js @@ -4,19 +4,19 @@ var offset = 100; function makeTransparent() { - $("#navbar").removeClass('navbar-colored').addClass('navbar-transparent'); + $("#mind-global-navbar_primary").removeClass('mind-global-navbar_primary-colored').addClass('mind-global-navbar_primary-transparent'); transparent = true; } function makeOpaque() { - $("#navbar").removeClass('navbar-transparent').addClass('navbar-colored'); + $("#mind-global-navbar_primary").removeClass('mind-global-navbar_primary-transparent').addClass('mind-global-navbar_primary-colored'); transparent = false; } $(document).ready(function() { - $("#navbar").addClass('navbar-allowmoving'); + $("#mind-global-navbar_primary").addClass('mind-global-navbar_primary-allowmoving'); scroll_pos = $(this).scrollTop(); if(scroll_pos > offset) diff --git a/custom-tags.hbs b/custom-tags.hbs new file mode 100644 index 0000000..7cbb6fe --- /dev/null +++ b/custom-tags.hbs @@ -0,0 +1,22 @@ +{{!< default}} +
+ {{#post}} +
+

{{title}}

+
+ {{/post}} + +
+ +
+ +
+
+ {{#foreach tags}} + {{> "tag-card-big"}} + {{/foreach}} +
+
+
diff --git a/default.hbs b/default.hbs index 8d65e76..e40ee18 100755 --- a/default.hbs +++ b/default.hbs @@ -19,36 +19,24 @@ - + {{#is "post, page"}} - - - {{meta_title}} – {{@site.title}} - {{/is}} + {{#is "post"}} {{/is}} - - - {{# is "tag"}} - - {{/is}} - - - {{#is "index"}} {{@site.title}} - - {{/is}} - {{#is "index, tag"}} - + {{# is "post, page, tag"}} + {{meta_title}} – {{@site.title}} {{/is}} - + + {{ghost_head}} {{!-- Outputs important meta data and settings, should always be in --}} @@ -56,7 +44,7 @@ -