ghostcms/liebling
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Version 1.5.0 (#423)

Browse Source
This commit is contained in:
Eduardo Gómez 2021-12-25 19:44:13 +01:00 committed by GitHub
parent cfd3a0d085
commit da8f75d8de
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
21 changed files with 627 additions and 432 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
README.md
View File

@ -30,23 +30,34 @@ To know how to enable the search, comments, newsletter and more, please head to
### General features ### General features
* Clean and beautiful design 💅🏼 * Clean and beautiful design
* Lightning fast ⚡️ * Lightning fast
* Fully responsive, looks great on any device 📱 * Lightweight and high performance
* Compatible with modern browsers 💻 * Fully responsive, looks great on any device
* Fast support 📞 * Compatible with modern browsers
### Ghost features ### Ghost features
* Subscription form [more info here](https://github.com/eddiesigner/liebling/wiki/How-to-enable-subscribers) * Subscription form
* Multiple authors * Multiple authors
* Logo support * Logo support
* Secondary menu * Secondary menu
* Accent color
* Featured posts and pages * Featured posts and pages
* Post, Page, Tag, Authors, pages * Post, Page, Tag, Authors, pages
* Koenig editor * Koenig editor
* Bookmark card * Bookmark card
* Gallery card * Gallery card
* Button card
* NFT card
* Callouts
* Toggles
* Quotes
* Products
* Audio
* Video
* File uploads
* Headers
* Blog title and description * Blog title and description
* Cover image for Home, Post, Page, Tag, Author pages * Cover image for Home, Post, Page, Tag, Author pages
* Author avatar, bio, location, website and social links * Author avatar, bio, location, website and social links
@ -59,6 +70,7 @@ To know how to enable the search, comments, newsletter and more, please head to
* Dark mode * Dark mode
* Search * Search
* Custom settings
* Custom Subscribe page * Custom Subscribe page
* Custom authors page * Custom authors page
* Custom error page * Custom error page
@ -127,13 +139,15 @@ Contributions are very welcome. First, please read the [Pull Request Guidelines]
## Related ## Related
* [Galerie](https://eddiesigner.gumroad.com/l/KgroF) - Modern and versatile theme that stands out for its sleek design, it's incredibly fast, it offers a great user experience and it has many options to customise it.
* [Firma](https://gum.co/ZXLha) - Ghost theme that can be used by startups to large companies to publish any kind of articles related to their business. It stands out for its clean design and is able to adapt to any company's identity. * [Firma](https://gum.co/ZXLha) - Ghost theme that can be used by startups to large companies to publish any kind of articles related to their business. It stands out for its clean design and is able to adapt to any company's identity.
* [Weiss Pro](https://gum.co/pzvDn) - Modern and beautiful Ghost theme ready to make your content shine. * [Weiss Pro](https://gum.co/pzvDn) - Modern and beautiful Ghost theme ready to make your content shine.
## License ## License
Copyright (c) 2019-2020 Eduardo Gómez. Released under the [MIT license](https://github.com/eddiesigner/liebling/blob/master/LICENSE). Copyright (c) 2019-present Eduardo Gómez. Released under the [MIT license](https://github.com/eddiesigner/liebling/blob/master/LICENSE).
## Credits ## Credits

2
assets/css/app.css
View File

File diff suppressed because one or more lines are too long

2
assets/css/post.css
View File

File diff suppressed because one or more lines are too long

2
assets/js/app.js
View File

File diff suppressed because one or more lines are too long

2
assets/js/helpers.js
View File

@ -1 +1 @@
(window.webpackJsonp=window.webpackJsonp||[]).push([[3],{1:function(n,e,t){"use strict";t.r(e),t.d(e,"isRTL",(function(){return o})),t.d(e,"isMobile",(function(){return a})),t.d(e,"isDarkMode",(function(){return i})),t.d(e,"formatDate",(function(){return r})),t.d(e,"getParameterByName",(function(){return c})),t.d(e,"adjustImageGallery",(function(){return u})),t.d(e,"managePostImages",(function(){return s})),t.d(e,"makeImagesZoomable",(function(){return d}));var o=function(){var n=document.querySelector("html");return["ar","he","fa"].includes(n.getAttribute("lang"))},a=function(){var n=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"768px";return window.matchMedia("(max-width: ".concat(n,")")).matches},i=function(){var n=window.matchMedia&&window.matchMedia("(prefers-color-scheme: dark)");return n&&n.matches},r=function(n){return n?new Date(n).toLocaleDateString(document.documentElement.lang,{year:"numeric",month:"long",day:"numeric"}):""},c=function(n,e){e||(e=window.location.href),n=n.replace(/[\[\]]/g,"\\$&");var t=new RegExp("[?&]".concat(n,"(=([^&#]*)|&|#|$)")).exec(e);return t?t[2]?decodeURIComponent(t[2].replace(/\+/g," ")):"":null},u=function(){for(var n=document.querySelectorAll(".kg-gallery-image img"),e=0,t=n.length;e<t;e++){var o=n[e].closest(".kg-gallery-image"),a=n[e].attributes.width.value/n[e].attributes.height.value;o.style.flex="".concat(a," 1 0%")}},s=function(n){n(".js-post-content").find("img").each((function(){n(this).closest("figure").hasClass("kg-bookmark-card")||n(this).parent().is("a")||n(this).addClass("js-zoomable")}))},d=function(n,e){e(".js-zoomable").on("opened",(function(){setTimeout((function(){var e=n(".medium-zoom-image--opened");e.length>1&&e.last().hide()}),10)}))}},12:function(n,e,t){t(1),t(28),t(30),t(32),t(34),t(36),t(38),n.exports=t(40)},28:function(n,e){},30:function(n,e){},32:function(n,e){},34:function(n,e){},36:function(n,e){},38:function(n,e){},40:function(n,e){}},[[12,0,1]]]); (window.webpackJsonp=window.webpackJsonp||[]).push([[3],{1:function(n,e,t){"use strict";t.r(e),t.d(e,"isRTL",(function(){return o})),t.d(e,"isMobile",(function(){return a})),t.d(e,"isDarkMode",(function(){return i})),t.d(e,"formatDate",(function(){return r})),t.d(e,"getParameterByName",(function(){return c})),t.d(e,"adjustImageGallery",(function(){return u})),t.d(e,"managePostImages",(function(){return s})),t.d(e,"makeImagesZoomable",(function(){return l}));var o=function(){var n=document.querySelector("html");return["ar","he","fa"].includes(n.getAttribute("lang"))},a=function(){var n=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"768px";return window.matchMedia("(max-width: ".concat(n,")")).matches},i=function(){var n=window.matchMedia&&window.matchMedia("(prefers-color-scheme: dark)");return n&&n.matches},r=function(n){return n?new Date(n).toLocaleDateString(document.documentElement.lang,{year:"numeric",month:"long",day:"numeric"}):""},c=function(n,e){e||(e=window.location.href),n=n.replace(/[\[\]]/g,"\\$&");var t=new RegExp("[?&]".concat(n,"(=([^&#]*)|&|#|$)")).exec(e);return t?t[2]?decodeURIComponent(t[2].replace(/\+/g," ")):"":null},u=function(){for(var n=document.querySelectorAll(".kg-gallery-image img"),e=0,t=n.length;e<t;e++){var o=n[e].closest(".kg-gallery-image"),a=n[e].attributes.width.value/n[e].attributes.height.value;o.style.flex="".concat(a," 1 0%")}},s=function(n){n(".js-post-content").find("img").each((function(){n(this).closest("figure").hasClass("kg-bookmark-card")||n(this).closest("figure").hasClass("kg-nft-card")||n(this).parent().is("a")||n(this).hasClass("kg-product-card-image")||n(this).hasClass("kg-audio-thumbnail")||n(this).addClass("js-zoomable")}))},l=function(n,e){e(".js-zoomable").on("opened",(function(){setTimeout((function(){var e=n(".medium-zoom-image--opened");e.length>1&&e.last().hide()}),10)}))}},12:function(n,e,t){t(1),t(28),t(30),t(32),t(34),t(36),t(38),n.exports=t(40)},28:function(n,e){},30:function(n,e){},32:function(n,e){},34:function(n,e){},36:function(n,e){},38:function(n,e){},40:function(n,e){}},[[12,0,1]]]);

2
assets/js/home.js
View File

@ -1 +1 @@
(window.webpackJsonp=window.webpackJsonp||[]).push([[4],{1:function(e,t,n){"use strict";n.r(t),n.d(t,"isRTL",(function(){return r})),n.d(t,"isMobile",(function(){return o})),n.d(t,"isDarkMode",(function(){return i})),n.d(t,"formatDate",(function(){return a})),n.d(t,"getParameterByName",(function(){return u})),n.d(t,"adjustImageGallery",(function(){return s})),n.d(t,"managePostImages",(function(){return c})),n.d(t,"makeImagesZoomable",(function(){return l}));var r=function(){var e=document.querySelector("html");return["ar","he","fa"].includes(e.getAttribute("lang"))},o=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"768px";return window.matchMedia("(max-width: ".concat(e,")")).matches},i=function(){var e=window.matchMedia&&window.matchMedia("(prefers-color-scheme: dark)");return e&&e.matches},a=function(e){return e?new Date(e).toLocaleDateString(document.documentElement.lang,{year:"numeric",month:"long",day:"numeric"}):""},u=function(e,t){t||(t=window.location.href),e=e.replace(/[\[\]]/g,"\\$&");var n=new RegExp("[?&]".concat(e,"(=([^&#]*)|&|#|$)")).exec(t);return n?n[2]?decodeURIComponent(n[2].replace(/\+/g," ")):"":null},s=function(){for(var e=document.querySelectorAll(".kg-gallery-image img"),t=0,n=e.length;t<n;t++){var r=e[t].closest(".kg-gallery-image"),o=e[t].attributes.width.value/e[t].attributes.height.value;r.style.flex="".concat(o," 1 0%")}},c=function(e){e(".js-post-content").find("img").each((function(){e(this).closest("figure").hasClass("kg-bookmark-card")||e(this).parent().is("a")||e(this).addClass("js-zoomable")}))},l=function(e,t){t(".js-zoomable").on("opened",(function(){setTimeout((function(){var t=e(".medium-zoom-image--opened");t.length>1&&t.last().hide()}),10)}))}},21:function(e,t,n){e.exports=n(22)},22:function(e,t,n){"use strict";n.r(t);var r=n(0),o=n.n(r),i=n(3),a=n(2),u=n(1);function s(e,t){var n;if("undefined"==typeof Symbol||null==e[Symbol.iterator]){if(Array.isArray(e)||(n=function(e,t){if(!e)return;if("string"==typeof e)return c(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);"Object"===n&&e.constructor&&(n=e.constructor.name);if("Map"===n||"Set"===n)return Array.from(e);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return c(e,t)}(e))||t&&e&&"number"==typeof e.length){n&&(e=n);var r=0,o=function(){};return{s:o,n:function(){return r>=e.length?{done:!0}:{done:!1,value:e[r++]}},e:function(e){throw e},f:o}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var i,a=!0,u=!1;return{s:function(){n=e[Symbol.iterator]()},n:function(){var e=n.next();return a=e.done,e},e:function(e){u=!0,i=e},f:function(){try{a||null==n.return||n.return()}finally{if(u)throw i}}}}function c(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n<t;n++)r[n]=e[n];return r}o()((function(){var e=o()(".js-featured-slider");if(e.length>0){var t=e.find(".js-featured-slide").length,n=new a.d(".js-featured-slider",{type:"slider",rewind:!1,gap:0,swipeThreshold:!1,dragThreshold:!1,direction:Object(u.isRTL)()?"rtl":"ltr",breakpoints:{768:{swipeThreshold:1!==t&&80,dragThreshold:1!==t&&120}}});1===t&&e.find(".js-featured-slider-controls").remove(),n.on("mount.after",(function(){Object(i.a)(".js-featured-article-title",200)})),n.mount({Controls:a.b,Swipe:a.c,Breakpoints:a.a,ArrowDisabler:function(e,n){var r="js-featured-slider-controls",o="js-featured-slider-previous",i="js-featured-slider-next";return{mount:function(){e.settings.rewind||1===t||e.on(["mount.after","run"],(function(){var t,a=s(n.Controls.items);try{for(a.s();!(t=a.n()).done;){var u=t.value;if(u.className.includes(r)){var c=u.querySelector(".".concat(o));c&&(0===e.index?c.setAttribute("disabled",""):c.removeAttribute("disabled"));var l=u.querySelector(".".concat(i));if(l)(e.settings.bound?e.index+(e.settings.perView-1):e.index)===n.Sizes.length-1?l.setAttribute("disabled",""):l.removeAttribute("disabled")}}}catch(e){a.e(e)}finally{a.f()}}))}}}}),setTimeout((function(){window.dispatchEvent(new Event("resize"))}),350)}Object(i.a)(".js-featured-article-title",200)}))}},[[21,0,1]]]); (window.webpackJsonp=window.webpackJsonp||[]).push([[4],{1:function(e,t,n){"use strict";n.r(t),n.d(t,"isRTL",(function(){return r})),n.d(t,"isMobile",(function(){return o})),n.d(t,"isDarkMode",(function(){return i})),n.d(t,"formatDate",(function(){return a})),n.d(t,"getParameterByName",(function(){return u})),n.d(t,"adjustImageGallery",(function(){return s})),n.d(t,"managePostImages",(function(){return c})),n.d(t,"makeImagesZoomable",(function(){return l}));var r=function(){var e=document.querySelector("html");return["ar","he","fa"].includes(e.getAttribute("lang"))},o=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"768px";return window.matchMedia("(max-width: ".concat(e,")")).matches},i=function(){var e=window.matchMedia&&window.matchMedia("(prefers-color-scheme: dark)");return e&&e.matches},a=function(e){return e?new Date(e).toLocaleDateString(document.documentElement.lang,{year:"numeric",month:"long",day:"numeric"}):""},u=function(e,t){t||(t=window.location.href),e=e.replace(/[\[\]]/g,"\\$&");var n=new RegExp("[?&]".concat(e,"(=([^&#]*)|&|#|$)")).exec(t);return n?n[2]?decodeURIComponent(n[2].replace(/\+/g," ")):"":null},s=function(){for(var e=document.querySelectorAll(".kg-gallery-image img"),t=0,n=e.length;t<n;t++){var r=e[t].closest(".kg-gallery-image"),o=e[t].attributes.width.value/e[t].attributes.height.value;r.style.flex="".concat(o," 1 0%")}},c=function(e){e(".js-post-content").find("img").each((function(){e(this).closest("figure").hasClass("kg-bookmark-card")||e(this).closest("figure").hasClass("kg-nft-card")||e(this).parent().is("a")||e(this).hasClass("kg-product-card-image")||e(this).hasClass("kg-audio-thumbnail")||e(this).addClass("js-zoomable")}))},l=function(e,t){t(".js-zoomable").on("opened",(function(){setTimeout((function(){var t=e(".medium-zoom-image--opened");t.length>1&&t.last().hide()}),10)}))}},21:function(e,t,n){e.exports=n(22)},22:function(e,t,n){"use strict";n.r(t);var r=n(0),o=n.n(r),i=n(3),a=n(2),u=n(1);function s(e,t){var n;if("undefined"==typeof Symbol||null==e[Symbol.iterator]){if(Array.isArray(e)||(n=function(e,t){if(!e)return;if("string"==typeof e)return c(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);"Object"===n&&e.constructor&&(n=e.constructor.name);if("Map"===n||"Set"===n)return Array.from(e);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return c(e,t)}(e))||t&&e&&"number"==typeof e.length){n&&(e=n);var r=0,o=function(){};return{s:o,n:function(){return r>=e.length?{done:!0}:{done:!1,value:e[r++]}},e:function(e){throw e},f:o}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var i,a=!0,u=!1;return{s:function(){n=e[Symbol.iterator]()},n:function(){var e=n.next();return a=e.done,e},e:function(e){u=!0,i=e},f:function(){try{a||null==n.return||n.return()}finally{if(u)throw i}}}}function c(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n<t;n++)r[n]=e[n];return r}o()((function(){var e=o()(".js-featured-slider");if(e.length>0){var t=e.find(".js-featured-slide").length,n=new a.d(".js-featured-slider",{type:"slider",rewind:!1,gap:0,swipeThreshold:!1,dragThreshold:!1,direction:Object(u.isRTL)()?"rtl":"ltr",breakpoints:{768:{swipeThreshold:1!==t&&80,dragThreshold:1!==t&&120}}});1===t&&e.find(".js-featured-slider-controls").remove(),n.on("mount.after",(function(){Object(i.a)(".js-featured-article-title",200)})),n.mount({Controls:a.b,Swipe:a.c,Breakpoints:a.a,ArrowDisabler:function(e,n){var r="js-featured-slider-controls",o="js-featured-slider-previous",i="js-featured-slider-next";return{mount:function(){e.settings.rewind||1===t||e.on(["mount.after","run"],(function(){var t,a=s(n.Controls.items);try{for(a.s();!(t=a.n()).done;){var u=t.value;if(u.className.includes(r)){var c=u.querySelector(".".concat(o));c&&(0===e.index?c.setAttribute("disabled",""):c.removeAttribute("disabled"));var l=u.querySelector(".".concat(i));if(l)(e.settings.bound?e.index+(e.settings.perView-1):e.index)===n.Sizes.length-1?l.setAttribute("disabled",""):l.removeAttribute("disabled")}}}catch(e){a.e(e)}finally{a.f()}}))}}}}),setTimeout((function(){window.dispatchEvent(new Event("resize"))}),350)}Object(i.a)(".js-featured-article-title",200)}))}},[[21,0,1]]]);

2
assets/js/page.js
View File

@ -1 +1 @@
(window.webpackJsonp=window.webpackJsonp||[]).push([[5],{1:function(e,t,n){"use strict";n.r(t),n.d(t,"isRTL",(function(){return a})),n.d(t,"isMobile",(function(){return o})),n.d(t,"isDarkMode",(function(){return r})),n.d(t,"formatDate",(function(){return c})),n.d(t,"getParameterByName",(function(){return i})),n.d(t,"adjustImageGallery",(function(){return u})),n.d(t,"managePostImages",(function(){return s})),n.d(t,"makeImagesZoomable",(function(){return m}));var a=function(){var e=document.querySelector("html");return["ar","he","fa"].includes(e.getAttribute("lang"))},o=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"768px";return window.matchMedia("(max-width: ".concat(e,")")).matches},r=function(){var e=window.matchMedia&&window.matchMedia("(prefers-color-scheme: dark)");return e&&e.matches},c=function(e){return e?new Date(e).toLocaleDateString(document.documentElement.lang,{year:"numeric",month:"long",day:"numeric"}):""},i=function(e,t){t||(t=window.location.href),e=e.replace(/[\[\]]/g,"\\$&");var n=new RegExp("[?&]".concat(e,"(=([^&#]*)|&|#|$)")).exec(t);return n?n[2]?decodeURIComponent(n[2].replace(/\+/g," ")):"":null},u=function(){for(var e=document.querySelectorAll(".kg-gallery-image img"),t=0,n=e.length;t<n;t++){var a=e[t].closest(".kg-gallery-image"),o=e[t].attributes.width.value/e[t].attributes.height.value;a.style.flex="".concat(o," 1 0%")}},s=function(e){e(".js-post-content").find("img").each((function(){e(this).closest("figure").hasClass("kg-bookmark-card")||e(this).parent().is("a")||e(this).addClass("js-zoomable")}))},m=function(e,t){t(".js-zoomable").on("opened",(function(){setTimeout((function(){var t=e(".medium-zoom-image--opened");t.length>1&&t.last().hide()}),10)}))}},25:function(e,t,n){e.exports=n(26)},26:function(e,t,n){"use strict";n.r(t);var a=n(0),o=n.n(a),r=n(4),c=n.n(r),i=n(5),u=n(1);o()((function(){c()(".js-post-content"),Object(u.adjustImageGallery)(),Object(u.managePostImages)(o.a),Object(u.makeImagesZoomable)(o.a,i.a)}))}},[[25,0,1]]]); (window.webpackJsonp=window.webpackJsonp||[]).push([[5],{1:function(e,t,n){"use strict";n.r(t),n.d(t,"isRTL",(function(){return a})),n.d(t,"isMobile",(function(){return o})),n.d(t,"isDarkMode",(function(){return r})),n.d(t,"formatDate",(function(){return i})),n.d(t,"getParameterByName",(function(){return c})),n.d(t,"adjustImageGallery",(function(){return u})),n.d(t,"managePostImages",(function(){return s})),n.d(t,"makeImagesZoomable",(function(){return l}));var a=function(){var e=document.querySelector("html");return["ar","he","fa"].includes(e.getAttribute("lang"))},o=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"768px";return window.matchMedia("(max-width: ".concat(e,")")).matches},r=function(){var e=window.matchMedia&&window.matchMedia("(prefers-color-scheme: dark)");return e&&e.matches},i=function(e){return e?new Date(e).toLocaleDateString(document.documentElement.lang,{year:"numeric",month:"long",day:"numeric"}):""},c=function(e,t){t||(t=window.location.href),e=e.replace(/[\[\]]/g,"\\$&");var n=new RegExp("[?&]".concat(e,"(=([^&#]*)|&|#|$)")).exec(t);return n?n[2]?decodeURIComponent(n[2].replace(/\+/g," ")):"":null},u=function(){for(var e=document.querySelectorAll(".kg-gallery-image img"),t=0,n=e.length;t<n;t++){var a=e[t].closest(".kg-gallery-image"),o=e[t].attributes.width.value/e[t].attributes.height.value;a.style.flex="".concat(o," 1 0%")}},s=function(e){e(".js-post-content").find("img").each((function(){e(this).closest("figure").hasClass("kg-bookmark-card")||e(this).closest("figure").hasClass("kg-nft-card")||e(this).parent().is("a")||e(this).hasClass("kg-product-card-image")||e(this).hasClass("kg-audio-thumbnail")||e(this).addClass("js-zoomable")}))},l=function(e,t){t(".js-zoomable").on("opened",(function(){setTimeout((function(){var t=e(".medium-zoom-image--opened");t.length>1&&t.last().hide()}),10)}))}},25:function(e,t,n){e.exports=n(26)},26:function(e,t,n){"use strict";n.r(t);var a=n(0),o=n.n(a),r=n(4),i=n.n(r),c=n(5),u=n(1);o()((function(){i()(".js-post-content"),Object(u.adjustImageGallery)(),Object(u.managePostImages)(o.a),Object(u.makeImagesZoomable)(o.a,c.a)}))}},[[25,0,1]]]);

2
assets/js/post.js
View File

@ -1 +1 @@
(window.webpackJsonp=window.webpackJsonp||[]).push([[6],{1:function(e,t,n){"use strict";n.r(t),n.d(t,"isRTL",(function(){return o})),n.d(t,"isMobile",(function(){return a})),n.d(t,"isDarkMode",(function(){return r})),n.d(t,"formatDate",(function(){return i})),n.d(t,"getParameterByName",(function(){return s})),n.d(t,"adjustImageGallery",(function(){return c})),n.d(t,"managePostImages",(function(){return l})),n.d(t,"makeImagesZoomable",(function(){return d}));var o=function(){var e=document.querySelector("html");return["ar","he","fa"].includes(e.getAttribute("lang"))},a=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"768px";return window.matchMedia("(max-width: ".concat(e,")")).matches},r=function(){var e=window.matchMedia&&window.matchMedia("(prefers-color-scheme: dark)");return e&&e.matches},i=function(e){return e?new Date(e).toLocaleDateString(document.documentElement.lang,{year:"numeric",month:"long",day:"numeric"}):""},s=function(e,t){t||(t=window.location.href),e=e.replace(/[\[\]]/g,"\\$&");var n=new RegExp("[?&]".concat(e,"(=([^&#]*)|&|#|$)")).exec(t);return n?n[2]?decodeURIComponent(n[2].replace(/\+/g," ")):"":null},c=function(){for(var e=document.querySelectorAll(".kg-gallery-image img"),t=0,n=e.length;t<n;t++){var o=e[t].closest(".kg-gallery-image"),a=e[t].attributes.width.value/e[t].attributes.height.value;o.style.flex="".concat(a," 1 0%")}},l=function(e){e(".js-post-content").find("img").each((function(){e(this).closest("figure").hasClass("kg-bookmark-card")||e(this).parent().is("a")||e(this).addClass("js-zoomable")}))},d=function(e,t){t(".js-zoomable").on("opened",(function(){setTimeout((function(){var t=e(".medium-zoom-image--opened");t.length>1&&t.last().hide()}),10)}))}},23:function(e,t,n){e.exports=n(24)},24:function(e,t,n){"use strict";n.r(t);var o=n(0),a=n.n(o),r=n(5),i=n(4),s=n.n(i),c=n(3),l=n(2),d=n(1),u=null,m=null,f=window.pageYOffset,h=0,g=0,p=0,w=!1,b=function(){f=window.pageYOffset,v()},j=function(e){Object(d.isMobile)("1023px")?(a()("body").addClass("share-menu-displayed"),setTimeout((function(){u.removeAttr("data-aos")}),e)):a()("body").removeClass("share-menu-displayed")},y=function(){T(),j(100),setTimeout((function(){O(),v()}),200)},v=function(){w||requestAnimationFrame(k),w=!0},k=function(){var e=g-h,t=Math.ceil(f/e*100);t<=100&&x(t),w=!1},T=function(){h=window.innerHeight,g=a()(document).height()},O=function(){var e=m.parent().width(),t=e/2,n=Object(d.isMobile)()?2:3;m.parent().attr("viewBox","0 0 ".concat(e," ").concat(e)),m.attr("stroke-width",n),m.attr("r",t-(n-1)),m.attr("cx",t),m.attr("cy",t),p=2*t*Math.PI,m[0].style.strokeDasharray="".concat(p," ").concat(p),m[0].style.strokeDashoffset=p},x=function(e){if(e<=100){var t=p-e/100*p;m[0].style.strokeDashoffset=t}};a()((function(){u=a()(".js-aos-wrapper");var e=a()(".js-scrolltop"),t=a()(".js-recommended-slider");if(s()(".js-post-content"),Object(d.adjustImageGallery)(),j(1e3),t.length>0){var n=new l.d(".js-recommended-slider",{type:"slider",rewind:!1,perView:3,swipeThreshold:!1,dragThreshold:!1,gap:0,direction:Object(d.isRTL)()?"rtl":"ltr",breakpoints:{1023:{type:"carousel",perView:2,swipeThreshold:80,dragThreshold:120},720:{type:"carousel",perView:2,swipeThreshold:80,dragThreshold:120},568:{type:"carousel",perView:1,swipeThreshold:80,dragThreshold:120}}});n.on("mount.after",(function(){Object(c.a)(".js-article-card-title",100),Object(c.a)(".js-article-card-title-no-image",250)})),n.on("length.change",(function(e){1===e&&(n.update({type:"slider"}),t.find(".js-controls").remove())})),n.mount({Controls:l.b,Swipe:l.c,Breakpoints:l.a,Length:function(e,t,n){return{mount:function(){n.emit("length.change",t.Sizes.length)}}}})}Object(c.a)(".js-article-card-title",100),Object(c.a)(".js-article-card-title-no-image",250),e.on("click",(function(){a()("html, body").animate({scrollTop:0},500)})),Object(d.managePostImages)(a.a),Object(d.makeImagesZoomable)(a.a,r.a),window.addEventListener("scroll",b,{passive:!0}),window.addEventListener("resize",y,{passive:!0})})),a()(window).on("load",(function(){m=a()(".js-progress"),T(),O(),k(),setTimeout((function(){m.parent().css("opacity",1)}),300)}))}},[[23,0,1]]]); (window.webpackJsonp=window.webpackJsonp||[]).push([[6],{1:function(e,t,n){"use strict";n.r(t),n.d(t,"isRTL",(function(){return a})),n.d(t,"isMobile",(function(){return o})),n.d(t,"isDarkMode",(function(){return r})),n.d(t,"formatDate",(function(){return i})),n.d(t,"getParameterByName",(function(){return s})),n.d(t,"adjustImageGallery",(function(){return c})),n.d(t,"managePostImages",(function(){return l})),n.d(t,"makeImagesZoomable",(function(){return d}));var a=function(){var e=document.querySelector("html");return["ar","he","fa"].includes(e.getAttribute("lang"))},o=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"768px";return window.matchMedia("(max-width: ".concat(e,")")).matches},r=function(){var e=window.matchMedia&&window.matchMedia("(prefers-color-scheme: dark)");return e&&e.matches},i=function(e){return e?new Date(e).toLocaleDateString(document.documentElement.lang,{year:"numeric",month:"long",day:"numeric"}):""},s=function(e,t){t||(t=window.location.href),e=e.replace(/[\[\]]/g,"\\$&");var n=new RegExp("[?&]".concat(e,"(=([^&#]*)|&|#|$)")).exec(t);return n?n[2]?decodeURIComponent(n[2].replace(/\+/g," ")):"":null},c=function(){for(var e=document.querySelectorAll(".kg-gallery-image img"),t=0,n=e.length;t<n;t++){var a=e[t].closest(".kg-gallery-image"),o=e[t].attributes.width.value/e[t].attributes.height.value;a.style.flex="".concat(o," 1 0%")}},l=function(e){e(".js-post-content").find("img").each((function(){e(this).closest("figure").hasClass("kg-bookmark-card")||e(this).closest("figure").hasClass("kg-nft-card")||e(this).parent().is("a")||e(this).hasClass("kg-product-card-image")||e(this).hasClass("kg-audio-thumbnail")||e(this).addClass("js-zoomable")}))},d=function(e,t){t(".js-zoomable").on("opened",(function(){setTimeout((function(){var t=e(".medium-zoom-image--opened");t.length>1&&t.last().hide()}),10)}))}},23:function(e,t,n){e.exports=n(24)},24:function(e,t,n){"use strict";n.r(t);var a=n(0),o=n.n(a),r=n(5),i=n(4),s=n.n(i),c=n(3),l=n(2),d=n(1),u=null,m=null,h=window.pageYOffset,f=0,g=0,p=0,w=!1,b=function(){h=window.pageYOffset,v()},j=function(e){Object(d.isMobile)("1023px")?(o()("body").addClass("share-menu-displayed"),setTimeout((function(){u.removeAttr("data-aos")}),e)):o()("body").removeClass("share-menu-displayed")},y=function(){T(),j(100),setTimeout((function(){O(),v()}),200)},v=function(){w||requestAnimationFrame(k),w=!0},k=function(){var e=g-f,t=Math.ceil(h/e*100);t<=100&&x(t),w=!1},T=function(){f=window.innerHeight,g=o()(document).height()},O=function(){var e=m.parent().width(),t=e/2,n=Object(d.isMobile)()?2:3;m.parent().attr("viewBox","0 0 ".concat(e," ").concat(e)),m.attr("stroke-width",n),m.attr("r",t-(n-1)),m.attr("cx",t),m.attr("cy",t),p=2*t*Math.PI,m[0].style.strokeDasharray="".concat(p," ").concat(p),m[0].style.strokeDashoffset=p},x=function(e){if(e<=100){var t=p-e/100*p;m[0].style.strokeDashoffset=t}};o()((function(){u=o()(".js-aos-wrapper");var e=o()(".js-scrolltop"),t=o()(".js-recommended-slider");if(s()(".js-post-content"),Object(d.adjustImageGallery)(),j(1e3),t.length>0){var n=new l.d(".js-recommended-slider",{type:"slider",rewind:!1,perView:3,swipeThreshold:!1,dragThreshold:!1,gap:0,direction:Object(d.isRTL)()?"rtl":"ltr",breakpoints:{1023:{type:"carousel",perView:2,swipeThreshold:80,dragThreshold:120},720:{type:"carousel",perView:2,swipeThreshold:80,dragThreshold:120},568:{type:"carousel",perView:1,swipeThreshold:80,dragThreshold:120}}});n.on("mount.after",(function(){Object(c.a)(".js-article-card-title",100),Object(c.a)(".js-article-card-title-no-image",250)})),n.on("length.change",(function(e){1===e&&(n.update({type:"slider"}),t.find(".js-controls").remove())})),n.mount({Controls:l.b,Swipe:l.c,Breakpoints:l.a,Length:function(e,t,n){return{mount:function(){n.emit("length.change",t.Sizes.length)}}}})}Object(c.a)(".js-article-card-title",100),Object(c.a)(".js-article-card-title-no-image",250),e.on("click",(function(){o()("html, body").animate({scrollTop:0},500)})),Object(d.managePostImages)(o.a),Object(d.makeImagesZoomable)(o.a,r.a),window.addEventListener("scroll",b,{passive:!0}),window.addEventListener("resize",y,{passive:!0})})),o()(window).on("load",(function(){m=o()(".js-progress"),T(),O(),k(),setTimeout((function(){m.parent().css("opacity",1)}),300)}))}},[[23,0,1]]]);

24
default.hbs
View File

@ -85,12 +85,31 @@
{{!-- This tag outputs SEO meta+structured data and other important settings --}} {{!-- This tag outputs SEO meta+structured data and other important settings --}}
{{ghost_head}} {{ghost_head}}
{{!-- This variable is used to make the search form work --}} {{!-- This style overrides the accent color to match the one from the Admin --}}
<style>
:root {
--primary-subtle-color: var(--ghost-accent-color) !important;
}
</style>
{{!-- These variables are used to make the search form work --}}
<script> <script>
// @license magnet:?xt=urn:btih:d3d9a9a6595521f9666a5e94cc830dab83b65699&dn=expat.txt Expat // @license magnet:?xt=urn:btih:d3d9a9a6595521f9666a5e94cc830dab83b65699&dn=expat.txt Expat
const ghostHost = "{{@site.url}}" const ghostHost = "{{@site.url}}"
// @license-end // @license-end
</script> </script>
{{#if @custom.search_api_key}}
<script>
const ghostSearchApiKey = "{{@custom.search_api_key}}"
</script>
{{/if}}
{{!-- This variable disbale the fade animation when it's enabled --}}
{{#if @custom.disable_fade_animation}}
<script>
const disableFadeAnimation = {{@custom.disable_fade_animation}}
</script>
{{/if}}
</head> </head>
<body class="{{body_class}}"> <body class="{{body_class}}">
{{!-- All the main content gets inserted here, index.hbs, post.hbs, etc --}} {{!-- All the main content gets inserted here, index.hbs, post.hbs, etc --}}
@ -102,9 +121,6 @@
{{!-- The footer --}} {{!-- The footer --}}
{{> footer}} {{> footer}}
{{!-- Notifications alerts --}}
{{> "notifications"}}
{{!-- Common scripts shared between pages --}} {{!-- Common scripts shared between pages --}}
<script crossorigin="anonymous" src="https://polyfill.io/v3/polyfill.min.js?features=IntersectionObserver%2CPromise%2CArray.prototype.includes%2CString.prototype.endsWith%2CString.prototype.startsWith%2CObject.assign%2CNodeList.prototype.forEach"></script> <script crossorigin="anonymous" src="https://polyfill.io/v3/polyfill.min.js?features=IntersectionObserver%2CPromise%2CArray.prototype.includes%2CString.prototype.endsWith%2CString.prototype.startsWith%2CObject.assign%2CNodeList.prototype.forEach"></script>
<script defer src="{{asset "js/manifest.js"}}"></script> <script defer src="{{asset "js/manifest.js"}}"></script>

8
index.hbs
View File

@ -31,8 +31,12 @@ into the {body} of the default.hbs template --}}
{{#if @site.description}} {{#if @site.description}}
<p class="m-hero-description bigger">{{@site.description}}</p> <p class="m-hero-description bigger">{{@site.description}}</p>
{{/if}} {{/if}}
{{#if @labs.members}} {{#if @custom.use_custom_cta}}
<a href="{{@site.url}}/newsletter" class="m-button filled js-newsletter">{{t "Subscribe"}}</a> <a href="{{@custom.custom_cta_url}}" class="m-button filled">{{@custom.custom_cta_text}}</a>
{{else}}
{{#if @labs.members}}
<a href="{{@site.url}}/newsletter" class="m-button filled js-newsletter">{{t "Subscribe"}}</a>
{{/if}}
{{/if}} {{/if}}
</div> </div>
</section> </section>

29
package.json
View File

@ -25,6 +25,33 @@
"xl": { "xl": {
"width": 2000 "width": 2000
} }
},
"custom": {
"dark_mode_logo": {
"type": "image"
},
"search_api_key": {
"type": "text"
},
"disable_fade_animation": {
"type": "boolean",
"default": false
},
"use_custom_cta": {
"type": "boolean",
"default": false,
"group": "homepage"
},
"custom_cta_text": {
"type": "text",
"default": "Subscribe",
"group": "homepage"
},
"custom_cta_url": {
"type": "text",
"default": "/newsletter",
"group": "homepage"
}
} }
}, },
"demo": "https://liebling.eduardogomez.io", "demo": "https://liebling.eduardogomez.io",
@ -54,5 +81,5 @@
"desktop": "assets/screenshot-desktop.jpg", "desktop": "assets/screenshot-desktop.jpg",
"mobile": "assets/screenshot-mobile.jpg" "mobile": "assets/screenshot-mobile.jpg"
}, },
"version": "1.0.6" "version": "1.5.0"
} }

10
partials/header.hbs
View File

@ -9,7 +9,10 @@ This header template is shared across all the pages.
</button> </button>
{{#if @site.logo}} {{#if @site.logo}}
<a href="{{@site.url}}" class="m-logo in-mobile-topbar"> <a href="{{@site.url}}" class="m-logo in-mobile-topbar">
<img src="{{@site.logo}}" alt="{{@site.title}}"> <img src="{{@site.logo}}" alt="{{@site.title}}" class="{{#if @custom.dark_mode_logo}}m-logo__image-light{{/if}}">
{{#if @custom.dark_mode_logo}}
<img src="{{@custom.dark_mode_logo}}" alt="{{@site.title}}" class="m-logo__image-dark">
{{/if}}
</a> </a>
{{else}} {{else}}
<a href="{{@site.url}}" class="m-site-name in-mobile-topbar"> <a href="{{@site.url}}" class="m-site-name in-mobile-topbar">
@ -33,7 +36,10 @@ This header template is shared across all the pages.
{{#if @site.logo}} {{#if @site.logo}}
<li class="only-desktop"> <li class="only-desktop">
<a href="{{@site.url}}" class="m-logo"> <a href="{{@site.url}}" class="m-logo">
<img src="{{@site.logo}}" alt="{{@site.title}}"> <img src="{{@site.logo}}" alt="{{@site.title}}" class="{{#if @custom.dark_mode_logo}}m-logo__image-light{{/if}}">
{{#if @custom.dark_mode_logo}}
<img src="{{@custom.dark_mode_logo}}" alt="{{@site.title}}" class="m-logo__image-dark">
{{/if}}
</a> </a>
</li> </li>
{{else}} {{else}}

27
partials/notifications.hbs
View File

@ -1,27 +0,0 @@
<div class="m-alert success subscribe js-alert" data-notification="subscribe">
{{t "Great! You've successfully subscribed."}}
<button class="m-alert__close js-notification-close" aria-label="{{t "Close"}}">
<span class="icon-close"></span>
</button>
</div>
<div class="m-alert success signup js-alert" data-notification="signup">
{{t "Great! Next, complete checkout for full access."}}
<button class="m-alert__close js-notification-close" aria-label="{{t "Close"}}">
<span class="icon-close"></span>
</button>
</div>
<div class="m-alert success signin js-alert" data-notification="signin">
{{t "Welcome back! You've successfully signed in."}}
<button class="m-alert__close js-notification-close" aria-label="{{t "Close"}}">
<span class="icon-close"></span>
</button>
</div>
<div class="m-alert success checkout js-alert" data-notification="checkout">
{{t "Success! Your account is fully activated, you now have access to all content."}}
<button class="m-alert__close js-notification-close" aria-label="{{t "Close"}}">
<span class="icon-close"></span>
</button>
</div>

4
src/docker-compose.yml
View File

@ -1,8 +1,8 @@
version: '3' version: "3"
services: services:
ghost: ghost:
image: ghost:4.4.0 image: ghost:4.32.0
container_name: ghost container_name: ghost
volumes: volumes:
- ./..:/var/lib/ghost/content/themes/liebling:Z - ./..:/var/lib/ghost/content/themes/liebling:Z

351
src/js/app.js
View File

@ -1,93 +1,94 @@
import $ from 'jquery' import $ from 'jquery';
import Headroom from "headroom.js" import Headroom from 'headroom.js';
import Glide, { import Glide, {
Swipe, Swipe,
Breakpoints Breakpoints
} from '@glidejs/glide/dist/glide.modular.esm' } from '@glidejs/glide/dist/glide.modular.esm';
import tippy from 'tippy.js'; import tippy from 'tippy.js';
import 'tippy.js/dist/tippy.css'; import 'tippy.js/dist/tippy.css';
import shave from 'shave' import shave from 'shave';
import AOS from 'aos' import AOS from 'aos';
import Fuse from 'fuse.js/dist/fuse.basic.esm.min.js' import Fuse from 'fuse.js/dist/fuse.basic.esm.min.js';
import { import {
isRTL, isRTL,
formatDate, formatDate,
isDarkMode, isDarkMode,
isMobile, isMobile,
getParameterByName getParameterByName
} from './helpers' } from './helpers';
$(() => { $(() => {
if (isRTL()) { if (isRTL()) {
$('html').attr('dir', 'rtl').addClass('rtl') $('html')
.attr('dir', 'rtl')
.addClass('rtl');
} }
const $body = $('body') const $body = $('body');
const $header = $('.js-header') const $header = $('.js-header');
const $openMenu = $('.js-open-menu') const $openMenu = $('.js-open-menu');
const $closeMenu = $('.js-close-menu') const $closeMenu = $('.js-close-menu');
const $menu = $('.js-menu') const $menu = $('.js-menu');
const $toggleSubmenu = $('.js-toggle-submenu') const $toggleSubmenu = $('.js-toggle-submenu');
const $submenuOption = $('.js-submenu-option')[0] const $submenuOption = $('.js-submenu-option')[0];
const $submenu = $('.js-submenu') const $submenu = $('.js-submenu');
const $recentSlider = $('.js-recent-slider') const $recentSlider = $('.js-recent-slider');
const $openSecondaryMenu = $('.js-open-secondary-menu') const $openSecondaryMenu = $('.js-open-secondary-menu');
const $openSearch = $('.js-open-search') const $openSearch = $('.js-open-search');
const $closeSearch = $('.js-close-search') const $closeSearch = $('.js-close-search');
const $search = $('.js-search') const $search = $('.js-search');
const $inputSearch = $('.js-input-search') const $inputSearch = $('.js-input-search');
const $searchResults = $('.js-search-results') const $searchResults = $('.js-search-results');
const $searchNoResults = $('.js-no-results') const $searchNoResults = $('.js-no-results');
const $toggleDarkMode = $('.js-toggle-darkmode') const $toggleDarkMode = $('.js-toggle-darkmode');
const $closeNotification = $('.js-notification-close') const $mainNav = $('.js-main-nav');
const $mainNav = $('.js-main-nav') const $mainNavLeft = $('.js-main-nav-left');
const $mainNavLeft = $('.js-main-nav-left') const $newsletterElements = $('.js-newsletter');
const $newsletterElements = $('.js-newsletter') const currentSavedTheme = localStorage.getItem('theme');
const currentSavedTheme = localStorage.getItem('theme')
let fuse = null let fuse = null;
let submenuIsOpen = false let submenuIsOpen = false;
let secondaryMenuTippy = null let secondaryMenuTippy = null;
const showSubmenu = () => { const showSubmenu = () => {
$header.addClass('submenu-is-active') $header.addClass('submenu-is-active');
$toggleSubmenu.addClass('active') $toggleSubmenu.addClass('active');
$submenu.removeClass('closed').addClass('opened') $submenu.removeClass('closed').addClass('opened');
} };
const hideSubmenu = () => { const hideSubmenu = () => {
$header.removeClass('submenu-is-active') $header.removeClass('submenu-is-active');
$toggleSubmenu.removeClass('active') $toggleSubmenu.removeClass('active');
$submenu.removeClass('opened').addClass('closed') $submenu.removeClass('opened').addClass('closed');
} };
const toggleScrollVertical = () => { const toggleScrollVertical = () => {
$body.toggleClass('no-scroll-y') $body.toggleClass('no-scroll-y');
} };
const tryToRemoveNewsletter = () => { const tryToRemoveNewsletter = () => {
if (typeof disableNewsletter !== 'undefined' && disableNewsletter) { if (typeof disableNewsletter !== 'undefined' && disableNewsletter) {
$newsletterElements.remove() $newsletterElements.remove();
} }
} };
const trySearchFeature = () => { const trySearchFeature = () => {
if (typeof ghostSearchApiKey !== 'undefined') { if (typeof ghostSearchApiKey !== 'undefined') {
getAllPosts(ghostHost, ghostSearchApiKey) getAllPosts(ghostHost, ghostSearchApiKey);
} else { } else {
$openSearch.css('visibility', 'hidden') $openSearch.css('visibility', 'hidden');
$closeSearch.remove() $closeSearch.remove();
$search.remove() $search.remove();
} }
} };
const getAllPosts = (host, key) => { const getAllPosts = (host, key) => {
const api = new GhostContentAPI({ const api = new GhostContentAPI({
url: host, url: host,
key, key,
version: 'v4' version: 'v4'
}) });
const allPosts = [] const allPosts = [];
const fuseOptions = { const fuseOptions = {
shouldSort: true, shouldSort: true,
ignoreLocation: true, ignoreLocation: true,
@ -95,126 +96,84 @@ $(() => {
includeScore: true, includeScore: true,
minMatchCharLength: 2, minMatchCharLength: 2,
keys: ['title', 'custom_excerpt', 'tags.name'] keys: ['title', 'custom_excerpt', 'tags.name']
} };
api.posts.browse({ api.posts
limit: 'all', .browse({
include: 'tags', limit: 'all',
fields: 'id, title, url, published_at, custom_excerpt' include: 'tags',
}) fields: 'id, title, url, published_at, custom_excerpt'
.then((posts) => { })
.then(posts => {
for (let i = 0, len = posts.length; i < len; i++) { for (let i = 0, len = posts.length; i < len; i++) {
allPosts.push(posts[i]) allPosts.push(posts[i]);
} }
fuse = new Fuse(allPosts, fuseOptions) fuse = new Fuse(allPosts, fuseOptions);
}) })
.catch((err) => { .catch(err => {
console.log(err) console.log(err);
}) });
} };
const showNotification = (typeNotification) => { const toggleDesktopTopbarOverflow = disableOverflow => {
const $notification = $(`.js-alert[data-notification="${typeNotification}"]`)
$notification.addClass('opened')
setTimeout(() => {
closeNotification($notification)
}, 5000)
}
const closeNotification = ($notification) => {
$notification.removeClass('opened')
const url = window.location.toString()
if (url.indexOf('?') > 0) {
const cleanUrl = url.substring(0, url.indexOf('?'))
window.history.replaceState({}, document.title, cleanUrl)
}
}
const checkForActionParameter = () => {
const action = getParameterByName('action')
const stripe = getParameterByName('stripe')
if (action === 'subscribe') {
showNotification('subscribe')
}
if (action === 'signup') {
window.location = `${ghostHost}/signup/?action=checkout`
}
if (action === 'checkout') {
showNotification('signup')
}
if (action === 'signin') {
showNotification('signin')
}
if (stripe === 'success') {
showNotification('checkout')
}
}
const toggleDesktopTopbarOverflow = (disableOverflow) => {
if (!isMobile()) { if (!isMobile()) {
if (disableOverflow) { if (disableOverflow) {
$mainNav.addClass('toggle-overflow') $mainNav.addClass('toggle-overflow');
$mainNavLeft.addClass('toggle-overflow') $mainNavLeft.addClass('toggle-overflow');
} else { } else {
$mainNav.removeClass('toggle-overflow') $mainNav.removeClass('toggle-overflow');
$mainNavLeft.removeClass('toggle-overflow') $mainNavLeft.removeClass('toggle-overflow');
} }
} }
} };
$openMenu.on('click', () => { $openMenu.on('click', () => {
$header.addClass('mobile-menu-opened') $header.addClass('mobile-menu-opened');
$menu.addClass('opened') $menu.addClass('opened');
toggleScrollVertical() toggleScrollVertical();
}) });
$closeMenu.on('click', () => { $closeMenu.on('click', () => {
$header.removeClass('mobile-menu-opened') $header.removeClass('mobile-menu-opened');
$menu.removeClass('opened') $menu.removeClass('opened');
toggleScrollVertical() toggleScrollVertical();
}) });
$toggleSubmenu.on('click', () => { $toggleSubmenu.on('click', () => {
submenuIsOpen = !submenuIsOpen submenuIsOpen = !submenuIsOpen;
if (submenuIsOpen) { if (submenuIsOpen) {
showSubmenu() showSubmenu();
} else { } else {
hideSubmenu() hideSubmenu();
} }
}) });
$openSearch.on('click', () => { $openSearch.on('click', () => {
$search.addClass('opened') $search.addClass('opened');
setTimeout(() => { setTimeout(() => {
$inputSearch.trigger('focus') $inputSearch.trigger('focus');
}, 400); }, 400);
toggleScrollVertical() toggleScrollVertical();
}) });
$closeSearch.on('click', () => { $closeSearch.on('click', () => {
$inputSearch.trigger('blur') $inputSearch.trigger('blur');
$search.removeClass('opened') $search.removeClass('opened');
toggleScrollVertical() toggleScrollVertical();
}) });
$inputSearch.on('keyup', () => { $inputSearch.on('keyup', () => {
if ($inputSearch.val().length > 0 && fuse) { if ($inputSearch.val().length > 0 && fuse) {
const results = fuse.search($inputSearch.val()) const results = fuse.search($inputSearch.val());
const bestResults = results.filter((result) => { const bestResults = results.filter(result => {
if (result.score <= 0.5) { if (result.score <= 0.5) {
return result return result;
} }
}) });
let htmlString = '' let htmlString = '';
if (bestResults.length > 0) { if (bestResults.length > 0) {
for (let i = 0, len = bestResults.length; i < len; i++) { for (let i = 0, len = bestResults.length; i < len; i++) {
@ -222,72 +181,70 @@ $(() => {
<article class="m-result">\ <article class="m-result">\
<a href="${bestResults[i].item.url}" class="m-result__link">\ <a href="${bestResults[i].item.url}" class="m-result__link">\
<h3 class="m-result__title">${bestResults[i].item.title}</h3>\ <h3 class="m-result__title">${bestResults[i].item.title}</h3>\
<span class="m-result__date">${formatDate(bestResults[i].item.published_at)}</span>\ <span class="m-result__date">${formatDate(
bestResults[i].item.published_at
)}</span>\
</a>\ </a>\
</article>` </article>`;
} }
$searchNoResults.hide() $searchNoResults.hide();
$searchResults.html(htmlString) $searchResults.html(htmlString);
$searchResults.show() $searchResults.show();
} else { } else {
$searchResults.html('') $searchResults.html('');
$searchResults.hide() $searchResults.hide();
$searchNoResults.show() $searchNoResults.show();
} }
} else { } else {
$searchResults.html('') $searchResults.html('');
$searchResults.hide() $searchResults.hide();
$searchNoResults.hide() $searchNoResults.hide();
} }
}) });
$toggleDarkMode.on('change', () => { $toggleDarkMode.on('change', () => {
if ($toggleDarkMode.is(':checked')) { if ($toggleDarkMode.is(':checked')) {
$('html').attr('data-theme', 'dark') $('html').attr('data-theme', 'dark');
localStorage.setItem('theme', 'dark') localStorage.setItem('theme', 'dark');
} else { } else {
$('html').attr('data-theme', 'light') $('html').attr('data-theme', 'light');
localStorage.setItem('theme', 'light') localStorage.setItem('theme', 'light');
} }
}) });
$toggleDarkMode.on('mouseenter', () => { $toggleDarkMode.on('mouseenter', () => {
toggleDesktopTopbarOverflow(true) toggleDesktopTopbarOverflow(true);
}) });
$toggleDarkMode.on('mouseleave', () => { $toggleDarkMode.on('mouseleave', () => {
toggleDesktopTopbarOverflow(false) toggleDesktopTopbarOverflow(false);
}) });
$closeNotification.on('click', function () { $(window).on('click', e => {
closeNotification($(this).parent())
})
$(window).on('click', (e) => {
if (submenuIsOpen) { if (submenuIsOpen) {
if ($submenuOption && !$submenuOption.contains(e.target)) { if ($submenuOption && !$submenuOption.contains(e.target)) {
submenuIsOpen = false submenuIsOpen = false;
hideSubmenu() hideSubmenu();
} }
} }
}) });
$(document).on('keyup', (e) => { $(document).on('keyup', e => {
if (e.key === 'Escape' && $search.hasClass('opened')) { if (e.key === 'Escape' && $search.hasClass('opened')) {
$closeSearch.trigger('click') $closeSearch.trigger('click');
} }
}) });
if (currentSavedTheme) { if (currentSavedTheme) {
$('html').attr('data-theme', currentSavedTheme) $('html').attr('data-theme', currentSavedTheme);
if (currentSavedTheme === 'dark') { if (currentSavedTheme === 'dark') {
$toggleDarkMode.attr('checked', true) $toggleDarkMode.attr('checked', true);
} }
} else { } else {
if (isDarkMode()) { if (isDarkMode()) {
$toggleDarkMode.attr('checked', true) $toggleDarkMode.attr('checked', true);
} }
} }
@ -300,17 +257,18 @@ $(() => {
offset: 15, offset: 15,
onUnpin: () => { onUnpin: () => {
if (!isMobile() && secondaryMenuTippy) { if (!isMobile() && secondaryMenuTippy) {
const desktopSecondaryMenuTippy = secondaryMenuTippy[0] const desktopSecondaryMenuTippy = secondaryMenuTippy[0];
if ( if (
desktopSecondaryMenuTippy && desktopSecondaryMenuTippy.state.isVisible desktopSecondaryMenuTippy &&
desktopSecondaryMenuTippy.state.isVisible
) { ) {
desktopSecondaryMenuTippy.hide() desktopSecondaryMenuTippy.hide();
} }
} }
} }
}) });
headroom.init() headroom.init();
} }
if ($recentSlider.length > 0) { if ($recentSlider.length > 0) {
@ -341,26 +299,26 @@ $(() => {
peek: { before: 0, after: 115 } peek: { before: 0, after: 115 }
} }
} }
}) });
recentSlider.on('mount.after', () => { recentSlider.on('mount.after', () => {
shave('.js-recent-article-title', 50) shave('.js-recent-article-title', 50);
}) });
recentSlider.mount({ Swipe, Breakpoints }) recentSlider.mount({ Swipe, Breakpoints });
} }
if (typeof disableFadeAnimation === 'undefined' || !disableFadeAnimation) { if (typeof disableFadeAnimation === 'undefined' || !disableFadeAnimation) {
AOS.init({ AOS.init({
once: true, once: true,
startEvent: 'DOMContentLoaded', startEvent: 'DOMContentLoaded'
}) });
} else { } else {
$('[data-aos]').addClass('no-aos-animation') $('[data-aos]').addClass('no-aos-animation');
} }
if ($openSecondaryMenu.length > 0) { if ($openSecondaryMenu.length > 0) {
const template = document.getElementById('secondary-navigation-template') const template = document.getElementById('secondary-navigation-template');
secondaryMenuTippy = tippy('.js-open-secondary-menu', { secondaryMenuTippy = tippy('.js-open-secondary-menu', {
appendTo: document.body, appendTo: document.body,
@ -370,20 +328,19 @@ $(() => {
trigger: 'click', trigger: 'click',
interactive: true, interactive: true,
onShow() { onShow() {
toggleDesktopTopbarOverflow(true) toggleDesktopTopbarOverflow(true);
}, },
onHidden() { onHidden() {
toggleDesktopTopbarOverflow(false) toggleDesktopTopbarOverflow(false);
} }
}) });
} }
tippy('.js-tooltip') tippy('.js-tooltip');
shave('.js-article-card-title', 100) shave('.js-article-card-title', 100);
shave('.js-article-card-title-no-image', 250) shave('.js-article-card-title-no-image', 250);
checkForActionParameter() tryToRemoveNewsletter();
tryToRemoveNewsletter() trySearchFeature();
trySearchFeature() });
})

109
src/js/helpers.js
View File

@ -1,80 +1,89 @@
export const isRTL = () => { export const isRTL = () => {
const $html = document.querySelector('html') const $html = document.querySelector('html');
return ['ar', 'he', 'fa'].includes($html.getAttribute('lang')) return ['ar', 'he', 'fa'].includes($html.getAttribute('lang'));
} };
export const isMobile = (width = '768px') => { export const isMobile = (width = '768px') => {
return window.matchMedia(`(max-width: ${width})`).matches return window.matchMedia(`(max-width: ${width})`).matches;
} };
export const isDarkMode = () => { export const isDarkMode = () => {
const darkModeMatcher = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)') const darkModeMatcher =
window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)');
return darkModeMatcher && darkModeMatcher.matches return darkModeMatcher && darkModeMatcher.matches;
} };
export const formatDate = (date) => { export const formatDate = date => {
if (date) { if (date) {
return new Date(date).toLocaleDateString( return new Date(date).toLocaleDateString(document.documentElement.lang, {
document.documentElement.lang, year: 'numeric',
{ month: 'long',
year: 'numeric', day: 'numeric'
month: 'long', });
day: 'numeric'
}
)
} }
return '' return '';
} };
export const getParameterByName = (name, url) => { export const getParameterByName = (name, url) => {
if (!url) url = window.location.href if (!url) url = window.location.href;
name = name.replace(/[\[\]]/g, '\\$&') name = name.replace(/[\[\]]/g, '\\$&');
const regex = new RegExp(`[?&]${name}(=([^&#]*)|&|#|$)`) const regex = new RegExp(`[?&]${name}(=([^&#]*)|&|#|$)`);
const results = regex.exec(url) const results = regex.exec(url);
if (!results) return null if (!results) return null;
if (!results[2]) return '' if (!results[2]) return '';
return decodeURIComponent(results[2].replace(/\+/g, ' ')) return decodeURIComponent(results[2].replace(/\+/g, ' '));
} };
export const adjustImageGallery = () => { export const adjustImageGallery = () => {
const images = document.querySelectorAll('.kg-gallery-image img') const images = document.querySelectorAll('.kg-gallery-image img');
for (var i = 0, len = images.length; i < len; i++) { for (var i = 0, len = images.length; i < len; i++) {
const container = images[i].closest('.kg-gallery-image') const container = images[i].closest('.kg-gallery-image');
const width = images[i].attributes.width.value const width = images[i].attributes.width.value;
const height = images[i].attributes.height.value const height = images[i].attributes.height.value;
const ratio = width / height const ratio = width / height;
container.style.flex = `${ratio} 1 0%` container.style.flex = `${ratio} 1 0%`;
} }
} };
export const managePostImages = ($) => { export const managePostImages = $ => {
$('.js-post-content').find('img').each(function () { $('.js-post-content')
if ( .find('img')
!$(this).closest('figure').hasClass('kg-bookmark-card') && .each(function() {
!$(this).parent().is('a') if (
) { !$(this)
$(this).addClass('js-zoomable') .closest('figure')
} .hasClass('kg-bookmark-card') &&
}) !$(this)
} .closest('figure')
.hasClass('kg-nft-card') &&
!$(this)
.parent()
.is('a') &&
!$(this).hasClass('kg-product-card-image') &&
!$(this).hasClass('kg-audio-thumbnail')
) {
$(this).addClass('js-zoomable');
}
});
};
export const makeImagesZoomable = ($, mediumZoom) => { export const makeImagesZoomable = ($, mediumZoom) => {
const zoom = mediumZoom('.js-zoomable') const zoom = mediumZoom('.js-zoomable');
zoom.on('opened', () => { zoom.on('opened', () => {
setTimeout(() => { setTimeout(() => {
const $mediumZoomImages = $('.medium-zoom-image--opened') const $mediumZoomImages = $('.medium-zoom-image--opened');
if ($mediumZoomImages.length > 1) { if ($mediumZoomImages.length > 1) {
$mediumZoomImages.last().hide() $mediumZoomImages.last().hide();
} }
}, 10) }, 10);
}) });
} };

1
src/sass/app.scss
View File

@ -15,7 +15,6 @@
@import "components/ui/section-title"; @import "components/ui/section-title";
@import "components/ui/small-text"; @import "components/ui/small-text";
@import "components/ui/not-found"; @import "components/ui/not-found";
@import "components/ui/alert";
@import "components/header/header"; @import "components/header/header";
@import "components/header/mobile-topbar"; @import "components/header/mobile-topbar";
@import "components/header/logo"; @import "components/header/logo";

21
src/sass/common/_themes.scss
View File

@ -9,9 +9,9 @@
--link-color: #133467; --link-color: #133467;
--primary-border-color: #9b9b9b; --primary-border-color: #9b9b9b;
--secondary-border-color: aliceblue; --secondary-border-color: aliceblue;
--article-shadow-normal: 0 10px 10px rgba(0,0,0,0.08); --article-shadow-normal: 0 10px 10px rgba(0, 0, 0, 0.08);
--article-shadow-hover: 0 4px 60px 0 rgba(0,0,0,0.2); --article-shadow-hover: 0 4px 60px 0 rgba(0, 0, 0, 0.2);
--transparent-background-color: rgba(255,255,255,0.99); --transparent-background-color: rgba(255, 255, 255, 0.99);
--footer-background-color: #133467; --footer-background-color: #133467;
--submenu-shadow-color-opacity: 0.25; --submenu-shadow-color-opacity: 0.25;
--button-shadow-color-normal: rgba(108, 108, 108, 0.2); --button-shadow-color-normal: rgba(108, 108, 108, 0.2);
@ -23,6 +23,7 @@
--toggle-darkmode-background-color: rgba(0, 0, 0, 0.05); --toggle-darkmode-background-color: rgba(0, 0, 0, 0.05);
--header-menu-gradient-first-color: rgba(255, 255, 255, 0); --header-menu-gradient-first-color: rgba(255, 255, 255, 0);
--header-menu-gradient-second-color: rgba(255, 255, 255, 1); --header-menu-gradient-second-color: rgba(255, 255, 255, 1);
--kg-card-img-invert-color: 0;
} }
[data-theme="dark"] { [data-theme="dark"] {
@ -35,9 +36,9 @@
--link-color: #b6b7f6; --link-color: #b6b7f6;
--primary-border-color: #1d1d1d; --primary-border-color: #1d1d1d;
--secondary-border-color: #0f0f0f; --secondary-border-color: #0f0f0f;
--article-shadow-normal: 0 4px 5px 5px rgba(0,0,0,0.1); --article-shadow-normal: 0 4px 5px 5px rgba(0, 0, 0, 0.1);
--article-shadow-hover: 0 4px 5px 10px rgba(0,0,0,0.1); --article-shadow-hover: 0 4px 5px 10px rgba(0, 0, 0, 0.1);
--transparent-background-color: rgba(0,0,0,0.99); --transparent-background-color: rgba(0, 0, 0, 0.99);
--footer-background-color: #080808; --footer-background-color: #080808;
--submenu-shadow-color-opacity: 0.55; --submenu-shadow-color-opacity: 0.55;
--button-shadow-color-normal: rgba(10, 10, 10, 0.5); --button-shadow-color-normal: rgba(10, 10, 10, 0.5);
@ -49,6 +50,7 @@
--toggle-darkmode-background-color: rgba(0, 0, 0, 0.5); --toggle-darkmode-background-color: rgba(0, 0, 0, 0.5);
--header-menu-gradient-first-color: rgba(17, 17, 17, 0); --header-menu-gradient-first-color: rgba(17, 17, 17, 0);
--header-menu-gradient-second-color: rgba(17, 17, 17, 0.65); --header-menu-gradient-second-color: rgba(17, 17, 17, 0.65);
--kg-card-img-invert-color: 1;
} }
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
@ -62,9 +64,9 @@
--link-color: #b6b7f6; --link-color: #b6b7f6;
--primary-border-color: #1d1d1d; --primary-border-color: #1d1d1d;
--secondary-border-color: #0f0f0f; --secondary-border-color: #0f0f0f;
--article-shadow-normal: 0 4px 5px 5px rgba(0,0,0,0.1); --article-shadow-normal: 0 4px 5px 5px rgba(0, 0, 0, 0.1);
--article-shadow-hover: 0 4px 5px 10px rgba(0,0,0,0.1); --article-shadow-hover: 0 4px 5px 10px rgba(0, 0, 0, 0.1);
--transparent-background-color: rgba(0,0,0,0.99); --transparent-background-color: rgba(0, 0, 0, 0.99);
--footer-background-color: #080808; --footer-background-color: #080808;
--submenu-shadow-color-opacity: 0.55; --submenu-shadow-color-opacity: 0.55;
--button-shadow-color-normal: rgba(10, 10, 10, 0.5); --button-shadow-color-normal: rgba(10, 10, 10, 0.5);
@ -76,5 +78,6 @@
--toggle-darkmode-background-color: rgba(0, 0, 0, 0.5); --toggle-darkmode-background-color: rgba(0, 0, 0, 0.5);
--header-menu-gradient-first-color: rgba(17, 17, 17, 0); --header-menu-gradient-first-color: rgba(17, 17, 17, 0);
--header-menu-gradient-second-color: rgba(17, 17, 17, 0.65); --header-menu-gradient-second-color: rgba(17, 17, 17, 0.65);
--kg-card-img-invert-color: 1;
} }
} }

8
src/sass/components/header/_logo.scss
View File

@ -7,6 +7,14 @@
max-width: 150px; max-width: 150px;
height: 100%; height: 100%;
object-fit: contain; object-fit: contain;
&.m-logo__image-light {
display: var(--toggle-darkmode-button-display-moon);
}
&.m-logo__image-dark {
display: var(--toggle-darkmode-button-display-sun);
}
} }
&.in-mobile-topbar { &.in-mobile-topbar {

75
src/sass/components/ui/_alert.scss
View File

@ -1,75 +0,0 @@
.m-alert {
color: $white;
text-align: center;
letter-spacing: 1px;
line-height: 1.4;
font-size: 0.875rem;
visibility: hidden;
position: fixed;
top: 0;
left: 0;
width: 100%;
padding: 16px 45px 14px;
z-index: 11;
@include transform(translateY(-100%));
@include transition(transform 0.2s ease);
@include respond-to('medium') {
font-size: 1rem;
padding: 24px 75px 22px;
}
&.success {
background-color: var(--primary-subtle-color);
}
&.opened {
visibility: visible;
@include transform(translateY(0));
}
}
.m-alert__close {
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 50%;
right: $mobile-space;
width: 20px;
height: 20px;
cursor: pointer;
outline: 0;
border: 0;
padding: 0;
background-color: transparent;
@extend .no-appearance;
@include transform(translateY(-50%));
@include respond-to('medium') {
right: 40px;
width: 25px;
height: 25px;
}
span {
color: $white;
font-size: 0.75rem;
@include respond-to('medium') {
font-size: 0.875rem;
}
}
}
.rtl {
.m-alert__close {
right: auto;
left: $mobile-space;
@include respond-to('medium') {
right: auto;
left: 40px;
}
}
}

350
src/sass/layouts/_post-content.scss
View File

@ -1,12 +1,12 @@
.l-post-content { .l-post-content {
padding-bottom: 15px; padding-bottom: 15px;
@include respond-to('medium') { @include respond-to("medium") {
max-width: 820px; max-width: 820px;
min-height: 400px; min-height: 400px;
margin: 0 auto; margin: 0 auto;
@include respond-to('medium') { @include respond-to("medium") {
padding-bottom: 30px; padding-bottom: 30px;
} }
} }
@ -23,7 +23,7 @@
padding-top: 5px; padding-top: 5px;
margin: 0 0 30px; margin: 0 0 30px;
@include respond-to('medium') { @include respond-to("medium") {
padding-top: 10px; padding-top: 10px;
margin-bottom: 40px; margin-bottom: 40px;
} }
@ -32,31 +32,31 @@
h1 { h1 {
font-size: 2.125rem; font-size: 2.125rem;
@include respond-to('medium') { @include respond-to("medium") {
font-size: 2.625rem; font-size: 2.625rem;
} }
} }
h2 { h2 {
font-size: 1.750rem; font-size: 1.75rem;
@include respond-to('medium') { @include respond-to("medium") {
font-size: 2.250rem; font-size: 2.25rem;
} }
} }
h3 { h3 {
font-size: 1.375rem; font-size: 1.375rem;
@include respond-to('medium') { @include respond-to("medium") {
font-size: 1.750rem; font-size: 1.75rem;
} }
} }
h4 { h4 {
font-size: 1rem; font-size: 1rem;
@include respond-to('medium') { @include respond-to("medium") {
font-size: 1.375rem; font-size: 1.375rem;
} }
} }
@ -64,7 +64,7 @@
h5 { h5 {
font-size: 0.938rem; font-size: 0.938rem;
@include respond-to('medium') { @include respond-to("medium") {
font-size: 1.125rem; font-size: 1.125rem;
} }
} }
@ -72,7 +72,7 @@
h6 { h6 {
font-size: 0.813rem; font-size: 0.813rem;
@include respond-to('medium') { @include respond-to("medium") {
font-size: 1rem; font-size: 1rem;
} }
} }
@ -83,10 +83,10 @@
font-size: 1.125rem; font-size: 1.125rem;
margin-bottom: 25px; margin-bottom: 25px;
@include respond-to('medium') { @include respond-to("medium") {
letter-spacing: 0.3px; letter-spacing: 0.3px;
line-height: 1.6; line-height: 1.6;
font-size: 1.250rem; font-size: 1.25rem;
margin-bottom: 30px; margin-bottom: 30px;
} }
@ -95,7 +95,8 @@
} }
} }
b, strong { b,
strong {
font-weight: 600; font-weight: 600;
} }
@ -113,17 +114,18 @@
} }
} }
ul, ol { ul,
ol {
letter-spacing: 0.2px; letter-spacing: 0.2px;
line-height: 1.5; line-height: 1.5;
font-size: 1.125rem; font-size: 1.125rem;
padding-left: 20px; padding-left: 20px;
margin: 0 0 20px 0; margin: 0 0 20px 0;
@include respond-to('medium') { @include respond-to("medium") {
letter-spacing: 0.3px; letter-spacing: 0.3px;
line-height: 1.6; line-height: 1.6;
font-size: 1.250rem; font-size: 1.25rem;
padding-left: 40px; padding-left: 40px;
margin-bottom: 30px; margin-bottom: 30px;
} }
@ -139,7 +141,7 @@
max-width: 100%; max-width: 100%;
margin: 0 auto 35px; margin: 0 auto 35px;
@include respond-to('medium') { @include respond-to("medium") {
margin-bottom: 40px; margin-bottom: 40px;
} }
} }
@ -151,7 +153,7 @@
.fluid-width-video-wrapper { .fluid-width-video-wrapper {
margin: 0 auto 35px; margin: 0 auto 35px;
@include respond-to('medium') { @include respond-to("medium") {
margin-bottom: 40px; margin-bottom: 40px;
} }
} }
@ -161,7 +163,7 @@
padding: 20px 0 40px; padding: 20px 0 40px;
margin: 0 -#{$mobile-space}; margin: 0 -#{$mobile-space};
@include respond-to('medium') { @include respond-to("medium") {
padding: 20px 0 50px; padding: 20px 0 50px;
margin: 0; margin: 0;
} }
@ -187,16 +189,15 @@
} }
&.kg-width-wide { &.kg-width-wide {
@include respond-to('extra-large') { @include respond-to("extra-large") {
margin: 0 -70px; margin: 0 -70px;
} }
} }
&.kg-width-full { &.kg-width-full {
@include respond-to('medium') { @include respond-to("medium") {
width: 100vw; width: 100vw;
margin-left: 50%; margin-left: 50%;
@include transform(translateX(-50%)); @include transform(translateX(-50%));
} }
} }
@ -214,10 +215,10 @@
text-align: center; text-align: center;
letter-spacing: 0.1px; letter-spacing: 0.1px;
line-height: 1.3; line-height: 1.3;
font-size: 0.750rem; font-size: 0.75rem;
padding: 10px $mobile-space 0 $mobile-space; padding: 10px $mobile-space 0 $mobile-space;
@include respond-to('medium') { @include respond-to("medium") {
font-size: 0.875rem; font-size: 0.875rem;
padding: 15px 0 0 0; padding: 15px 0 0 0;
} }
@ -267,12 +268,12 @@
border: 0; border: 0;
border-top: 1px solid var(--secondary-subtle-color); border-top: 1px solid var(--secondary-subtle-color);
@include respond-to('medium') { @include respond-to("medium") {
margin: 50px 0; margin: 50px 0;
} }
&:after { &:after {
content: ''; content: "";
position: absolute; position: absolute;
top: 50%; top: 50%;
left: 50%; left: 50%;
@ -281,9 +282,9 @@
border-radius: 50%; border-radius: 50%;
background-color: var(--secondary-subtle-color); background-color: var(--secondary-subtle-color);
@include bs(0 0 0 10px var(--background-color)); @include bs(0 0 0 10px var(--background-color));
@include transform(translate(-50%,-50%)); @include transform(translate(-50%, -50%));
@include respond-to('medium') { @include respond-to("medium") {
width: 12px; width: 12px;
height: 12px; height: 12px;
@include bs(0 0 0 20px var(--background-color)); @include bs(0 0 0 20px var(--background-color));
@ -297,18 +298,39 @@
line-height: 1.5; line-height: 1.5;
font-size: 1.125rem; font-size: 1.125rem;
font-style: italic; font-style: italic;
font-family: Georgia, 'Times New Roman', Times, serif; font-family: Georgia, "Times New Roman", Times, serif;
padding: 0 40px; padding: 0 40px;
margin: 0 0 25px; margin: 0 0 25px;
@include respond-to('medium') { @include respond-to("medium") {
letter-spacing: 0.3px; letter-spacing: 0.3px;
line-height: 1.6; line-height: 1.6;
font-size: 1.250rem; font-size: 1.25rem;
padding: 0 60px; padding: 0 60px;
margin-bottom: 30px; margin-bottom: 30px;
} }
&.kg-blockquote-alt {
color: var(--primary-subtle-color);
line-height: 1.2;
font-family: inherit;
font-style: normal;
font-weight: 700;
font-size: 2rem;
padding-top: 20px;
padding-bottom: 20px;
@include respond-to("medium") {
font-size: 2.625rem;
padding-top: 40px;
padding-bottom: 40px;
}
&:before {
display: none;
}
}
&:before { &:before {
content: '"'; content: '"';
position: absolute; position: absolute;
@ -318,7 +340,7 @@
line-height: 1; line-height: 1;
font-size: 2.625rem; font-size: 2.625rem;
@include respond-to('medium') { @include respond-to("medium") {
font-size: 4rem; font-size: 4rem;
} }
} }
@ -334,7 +356,7 @@
width: calc(100% + 40px); width: calc(100% + 40px);
margin: 0 -#{$mobile-space} 25px; margin: 0 -#{$mobile-space} 25px;
@include respond-to('medium') { @include respond-to("medium") {
font-size: 1rem; font-size: 1rem;
width: 100%; width: 100%;
margin: 0 0 30px; margin: 0 0 30px;
@ -361,7 +383,7 @@
text-align: center; text-align: center;
padding: 10px; padding: 10px;
@include respond-to('medium') { @include respond-to("medium") {
padding: 20px; padding: 20px;
} }
} }
@ -371,7 +393,7 @@
display: inline-block; display: inline-block;
color: var(--link-color); color: var(--link-color);
font-size: 0.9rem; font-size: 0.9rem;
font-family: Consolas,Monaco,'Andale Mono','Ubuntu Mono',monospace; font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
padding: 0 5px; padding: 0 5px;
border-radius: 5px; border-radius: 5px;
background-color: var(--secondary-subtle-color); background-color: var(--secondary-subtle-color);
@ -379,7 +401,7 @@
pre { pre {
line-height: 1.4; line-height: 1.4;
font-family: Consolas,Monaco,'Andale Mono','Ubuntu Mono',monospace; font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
margin: 0 0 25px; margin: 0 0 25px;
overflow-x: auto; overflow-x: auto;
border-radius: 5px; border-radius: 5px;
@ -397,7 +419,7 @@
-ms-hyphens: none; -ms-hyphens: none;
hyphens: none; hyphens: none;
@include respond-to('medium') { @include respond-to("medium") {
margin-bottom: 30px; margin-bottom: 30px;
} }
@ -417,7 +439,7 @@
-ms-hyphens: none; -ms-hyphens: none;
hyphens: none; hyphens: none;
@include respond-to('medium') { @include respond-to("medium") {
padding: 20px 20px 0; padding: 20px 20px 0;
} }
} }
@ -430,12 +452,12 @@
form { form {
margin-bottom: 25px; margin-bottom: 25px;
@include respond-to('medium') { @include respond-to("medium") {
margin-bottom: 30px; margin-bottom: 30px;
} }
} }
input, input:not(.kg-video-card input):not(.kg-audio-card input),
textarea, textarea,
select { select {
margin-bottom: 20px; margin-bottom: 20px;
@ -456,7 +478,8 @@
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI5IiBoZWlnaHQ9IjUiIHZpZXdCb3g9IjAgMCA5IDUiPgogICAgPHBhdGggZmlsbD0iIzU2NWU2MCIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNOC4zMi41N2EuMjQ3LjI0NyAwIDAgMSAwIC4zNkw0LjY4IDQuNTdhLjI0Ny4yNDcgMCAwIDEtLjM2IDBMLjY4LjkzYS4yNDcuMjQ3IDAgMCAxIDAtLjM2bC4zOS0uMzlhLjI0Ny4yNDcgMCAwIDEgLjM2IDBMNC41IDMuMjUgNy41Ny4xOGEuMjQ3LjI0NyAwIDAgMSAuMzYgMGwuMzkuMzl6Ii8+Cjwvc3ZnPgo="); background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI5IiBoZWlnaHQ9IjUiIHZpZXdCb3g9IjAgMCA5IDUiPgogICAgPHBhdGggZmlsbD0iIzU2NWU2MCIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNOC4zMi41N2EuMjQ3LjI0NyAwIDAgMSAwIC4zNkw0LjY4IDQuNTdhLjI0Ny4yNDcgMCAwIDEtLjM2IDBMLjY4LjkzYS4yNDcuMjQ3IDAgMCAxIDAtLjM2bC4zOS0uMzlhLjI0Ny4yNDcgMCAwIDEgLjM2IDBMNC41IDMuMjUgNy41Ny4xOGEuMjQ3LjI0NyAwIDAgMSAuMzYgMGwuMzkuMzl6Ii8+Cjwvc3ZnPgo=");
} }
button:not(.m-icon-button) { button:not(.m-icon-button):not(.kg-video-card button):not(.kg-audio-card
button) {
border: 1px solid var(--primary-foreground-color) !important; border: 1px solid var(--primary-foreground-color) !important;
@extend .m-button; @extend .m-button;
} }
@ -467,7 +490,7 @@
margin: 30px auto !important; margin: 30px auto !important;
background: var(--background-color); background: var(--background-color);
@include respond-to('medium') { @include respond-to("medium") {
margin: 40px auto !important; margin: 40px auto !important;
} }
@ -551,7 +574,7 @@
} }
.kg-bookmark-author:after { .kg-bookmark-author:after {
content: '•'; content: "•";
margin: 0 6px; margin: 0 6px;
} }
@ -578,15 +601,225 @@
order: 2; order: 2;
} }
} }
.kg-nft-card {
.kg-nft-card-container {
border-radius: 20px;
background-color: var(--background-color);
}
.kg-ntf-image-container {
border-radius: 20px 20px 0 0;
overflow: hidden;
}
.kg-nft-metadata {
border-radius: 0 0 20px 20px;
}
.kg-nft-header {
margin-bottom: 10px;
img {
display: inline-block;
width: 100px;
max-width: 100px;
margin: 0;
filter: #{"invert(var(--kg-card-img-invert-color))"};
}
}
.kg-nft-title {
color: var(--secondary-foreground-color);
padding-top: 0;
}
kg-nft-description,
.kg-nft-creator {
color: var(--primary-foreground-color);
span {
color: var(--secondary-foreground-color);
}
}
}
.kg-button-card {
padding: 30px 0;
margin-bottom: 25px;
a.kg-btn {
color: $white !important;
font-family: inherit !important;
height: auto;
background-color: var(--primary-subtle-color) !important;
@include bs(0 2px 4px var(--button-shadow-color-normal));
@extend .m-button;
&:hover {
opacity: 1;
@include transform(translateY(-2px));
@include bs(0 4px 8px var(--button-shadow-color-hover));
}
}
}
.kg-callout-card {
margin-bottom: 25px;
@include respond-to("medium") {
margin-bottom: 30px;
}
.kg-callout-emoji {
padding-right: 24px;
}
.kg-callout-text {
font-size: 1.0625rem;
@include respond-to("medium") {
font-size: 1.125rem;
}
}
}
.kg-header-card {
width: 100vw;
margin-top: 30px;
margin-bottom: 30px;
margin-left: 50%;
@include transform(translateX(-50%));
@include respond-to("medium") {
margin-top: 40px;
margin-bottom: 40px;
}
&.kg-style-light {
.kg-header-card-header,
.kg-header-card-subheader {
color: $titles;
}
.kg-header-card-button {
color: $white !important;
background-color: var(--primary-subtle-color) !important;
}
}
.kg-header-card-button {
color: $titles !important;
font-family: inherit;
height: auto !important;
background-color: $white !important;
@extend .m-button;
&:hover {
opacity: 1;
@include transform(translateY(-2px));
@include bs(0 4px 8px var(--button-shadow-color-hover));
}
}
}
.kg-toggle-card {
margin-bottom: 20px;
.kg-toggle-heading-text {
padding-top: 0;
}
.kg-toggle-card-icon {
display: flex !important;
align-items: center;
justify-content: center;
border: 0 !important;
padding: 0;
}
}
.kg-product-card {
margin-bottom: 30px;
@include respond-to("medium") {
margin-bottom: 40px;
}
.kg-product-card-image {
margin-bottom: 0;
border-radius: 5px;
}
.kg-product-card-title {
padding-top: 0;
font-family: inherit;
}
.kg-product-card-description {
p {
font-family: inherit;
}
}
.kg-product-card-button {
color: $white !important;
font-family: inherit !important;
height: auto;
background-color: var(--primary-subtle-color) !important;
@extend .m-button;
}
}
.kg-file-card {
margin-bottom: 30px;
@include respond-to("medium") {
margin-bottom: 40px;
}
}
.kg-audio-card {
margin-bottom: 30px;
@include respond-to("medium") {
margin-bottom: 40px;
}
img {
margin: 8px;
}
.kg-audio-play-icon,
.kg-audio-pause-icon,
.kg-audio-unmute-icon,
.kg-audio-mute-icon {
svg {
fill: var(--secondary-foreground-color);
}
}
.kg-audio-playback-rate {
color: var(--secondary-foreground-color);
}
.kg-audio-seek-slider,
.kg-audio-volume-slider {
&:before {
background-color: var(--secondary-foreground-color);
}
}
}
} }
.rtl { .rtl {
.l-post-content { .l-post-content {
ul, ol { ul,
ol {
padding-left: 0; padding-left: 0;
padding-right: 20px; padding-right: 20px;
@include respond-to('medium') { @include respond-to("medium") {
padding-left: 0; padding-left: 0;
padding-right: 40px; padding-right: 40px;
} }
@ -609,12 +842,33 @@
} }
figure.kg-width-full { figure.kg-width-full {
@include respond-to('medium') { @include respond-to("medium") {
margin-left: 0; margin-left: 0;
margin-right: 50%; margin-right: 50%;
@include transform(translateX(50%)); @include transform(translateX(50%));
} }
} }
.kg-callout-card {
.kg-callout-emoji {
padding-right: auto;
padding-left: 24px;
}
}
.kg-toggle-card {
.kg-toggle-card-icon {
margin-left: 0;
margin-right: 16px;
}
}
.kg-product-card {
.kg-product-card-rating {
padding-left: 0;
padding-right: 16px;
}
}
} }
} }