From 35d85b94295582e09de41215205be6f0dcdb3532 Mon Sep 17 00:00:00 2001 From: Kumar Abhishek Date: Tue, 22 Dec 2020 18:29:30 +0530 Subject: [PATCH] Updated components, styles, etc --- src/_data/developers.yaml | 4 +- src/_data/products.yaml | 12 +- src/_data/website.yaml | 4 + src/_includes/css/base.css | 491 +++++++------------ src/_includes/css/blog.css | 8 +- src/_includes/css/carousel.css | 203 ++++++++ src/_includes/css/dark.css | 20 +- src/_includes/css/flex.css | 13 + src/_includes/css/nav.css | 26 - src/_includes/footer.njk | 2 +- src/_includes/js/carousel.js | 2 +- src/_includes/navigation.njk | 4 +- src/_includes/section_final_ad.njk | 42 -- src/_includes/section_get_started_banner.njk | 41 ++ src/_includes/section_large_top_hero.njk | 4 +- src/_includes/section_message.njk | 2 +- src/_layouts/pageTemplates/base.njk | 36 +- src/_layouts/pageTemplates/blog_post.njk | 24 +- src/faq.md | 2 +- src/images/{ => icons}/paper-plane.svg | 0 src/images/main/homepage-illustration.svg | 418 ++++++++++++++++ src/index.njk | 12 +- src/retailer.njk | 4 +- 23 files changed, 933 insertions(+), 441 deletions(-) create mode 100644 src/_includes/css/carousel.css delete mode 100644 src/_includes/section_final_ad.njk create mode 100644 src/_includes/section_get_started_banner.njk rename src/images/{ => icons}/paper-plane.svg (100%) create mode 100644 src/images/main/homepage-illustration.svg diff --git a/src/_data/developers.yaml b/src/_data/developers.yaml index 1707758..016fd6a 100644 --- a/src/_data/developers.yaml +++ b/src/_data/developers.yaml @@ -73,7 +73,7 @@ main_line: For all integration related issues, we provide 24x7 support. button_text: Contact Support - - section: final_ad + - section: get_started_banner small_header: Ready to get started? main_header: Integrate our money transfer API image: /images/become-eko-partner.svg @@ -170,7 +170,7 @@ - image: /images/partners/toffee.png title: Toffee Insurance - - section: final_ad + - section: get_started_banner small_header: Ready to get started? main_header: Get AePS SDK & Earn More image: /images/become-eko-partner.svg diff --git a/src/_data/products.yaml b/src/_data/products.yaml index 68fdd82..3fff07c 100644 --- a/src/_data/products.yaml +++ b/src/_data/products.yaml @@ -72,7 +72,7 @@ main_line: For all issues, we provide 24x7 support. button_text: Contact Support - - section: final_ad + - section: get_started_banner small_header: Ready to get started? main_header: Become Eko Partner & Earn More image: /images/become-eko-partner.svg @@ -169,7 +169,7 @@ - image: /images/aadhaar-banking/npci.png title: NPCI - - section: final_ad + - section: get_started_banner small_header: Ready to get started? main_header: Use Aadhaar Banking & Earn More image: /images/become-eko-partner.svg @@ -246,7 +246,7 @@ main_line: For all issues, we provide 24x7 support. button_text: Contact Support - - section: final_ad + - section: get_started_banner small_header: Ready to get started? main_header: Serve at Doorstep & Earn More image: /images/become-eko-partner.svg @@ -326,7 +326,7 @@ main_line: For all issues, we provide 24x7 support. button_text: Contact Support - - section: final_ad + - section: get_started_banner small_header: Ready to get started? main_header: Pay Utility Bills & Earn More image: /images/become-eko-partner.svg @@ -395,7 +395,7 @@ main_line: For all issues, we provide 24x7 support. button_text: Contact Support - - section: final_ad + - section: get_started_banner small_header: Ready to get started? main_header: Sell Insurance policies & Earn More image: /images/become-eko-partner.svg @@ -464,7 +464,7 @@ main_line: For all issues, we provide 24x7 support. button_text: Contact Support - - section: final_ad + - section: get_started_banner small_header: Ready to get started? main_header: Send money to Nepal & Earn More image: /images/become-eko-partner.svg diff --git a/src/_data/website.yaml b/src/_data/website.yaml index 31708b3..386db8c 100644 --- a/src/_data/website.yaml +++ b/src/_data/website.yaml @@ -16,6 +16,10 @@ twitter: https://twitter.com/ekospeaks twitter_handle: '@ekospeaks' +#### Others... +google_font_url: https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap&text=abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890%21%22%23%24%25%26%27%2B%2C%2F%40%7C%7B%7D%5B%5D%3B%3C%3D%3E%3F.!-*()₹ + + ## The following values are setup as ENVIRONMENT-VARIABLES ## See '.env.example' file for details diff --git a/src/_includes/css/base.css b/src/_includes/css/base.css index dc4b22b..fedff55 100644 --- a/src/_includes/css/base.css +++ b/src/_includes/css/base.css @@ -1,6 +1,7 @@ :root { --primary-color: #ffb218; + --accent-dark-color: #f6b243; /* nav (bordered button, dot), link */ --dot-color: #ffb218; --header-color: #727272; --main-text-color: #666; @@ -12,13 +13,37 @@ --footer-link: #8e8e8e; --nav-caption: #b0b0b0; --divider-color: #e0e0e0; + --button-shadow-color: rgba(254,178,25,0.6); + + /* + bordered button: #f6b243 + link on shaded BG: #f6b243 + + Menu-dot: #f6b243 + Dot Box: + BG: #ffefd1 (tag color) + Dot: #ffb218 + + + dark carousel pagination dot: primary + light pagination dot: #f7e8c8 + Carousel border & next/prev arrowhead circles: #fcb72c + */ + + /* Extended Palette - Use with care */ + --primary-dark-20-color: #DF9500; + --primary-dark-40-color: #A77000; + --primary-dark-60-color: #704A00; + + --primary-light-20-color: #FFC146; + --primary-light-40-color: #FFD174; + --primary-light-60-color: #FFE0A3; } main, html, body { - letter-spacing: 1px; - color: var(--main-text-color) !important; font-family: 'Roboto', sans-serif; + color: var(--main-text-color); line-height: 1.42857143; } @@ -51,89 +76,6 @@ img { max-width: 100%; } -button, select { - text-transform: none; -} - -button, - [type="button"], - [type="reset"], - [type="submit"] { - -webkit-appearance: none; -} - -button::-moz-focus-inner, - [type="button"]::-moz-focus-inner, - [type="reset"]::-moz-focus-inner, - [type="submit"]::-moz-focus-inner { - border-style: none; - padding: 0; -} - -button:-moz-focusring, - [type="button"]:-moz-focusring, - [type="reset"]:-moz-focusring, - [type="submit"]:-moz-focusring { - outline: 1px dotted ButtonText; -} - - -/* ============= SECTIONS / COMPONENTS =================== */ - -section, nav.topnav, footer { - box-sizing: border-box; - width: 100%; - margin: 0; - padding-left: 5px; - padding-right: 5px; -} - -section { - padding-top: 20px; - padding-bottom: 20px; -} - -@media (min-width: 576px) { - section, nav.topnav, footer { - padding-left: 10%; - padding-right: 10%; - } - - section { - padding-top: 3%; - padding-bottom: 3%; - } - - main { - padding-top: 1%; - } -} - - -.horizontal-spacer { - padding-right: 20px; -} - -/* TODO: Fix this. Normally used with
*/ -.background-section { - width: 100%; - background-color: var(--background-section-color); - margin: 0; -} - -.scroll-icon-container .scroll-icon { -border: 1px solid #727272; -border-radius: 18px; -} - -.h2-border { -width: 50px; -height: 5px; -background-color: var(--primary-color); -display: inline-block; -border-radius: 2.5px; -margin-bottom: 5px; -} h1 { font-size: 40px; @@ -167,29 +109,87 @@ a:hover { color: var(--primary-color); } -.button { - border-radius: 12px; - transition-duration: 0.4s; +/* button, select { + text-transform: none; +} + +button, + [type="button"], + [type="reset"], + [type="submit"] { + -webkit-appearance: none; +} + +button::-moz-focus-inner, + [type="button"]::-moz-focus-inner, + [type="reset"]::-moz-focus-inner, + [type="submit"]::-moz-focus-inner { + border-style: none; + padding: 0; +} + +button:-moz-focusring, + [type="button"]:-moz-focusring, + [type="reset"]:-moz-focusring, + [type="submit"]:-moz-focusring { + outline: 1px dotted ButtonText; +} */ + + +/* =============== COMMON UI COMPONENTS ================= */ + + +.h2-border { + width: 50px; + height: 5px; background-color: var(--primary-color); - border: none; - color: white; - padding: 10px 24px; - text-align: center; - text-decoration: none; + display: inline-block; + border-radius: 2.5px; + margin-bottom: 5px; +} + + +.button { display: inline-block; font-size: 16px; font-weight: bold; + padding: 12px 25px; + margin: 0.3em; + background: var(--primary-color) !important; + color: white !important; + text-align: center; + vertical-align: middle; + text-decoration: none; + border: none; + border-radius: 10px; + white-space: nowrap; + cursor: pointer; + line-height: 1.43; + transition: all 0.3s ease-out; + will-change: translate; +} + +.button:not(.outline):hover { + box-shadow: 0px 15px 20px var(--button-shadow-color); + transform: translateY(-7px); } -.button:hover { -box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19); -color: white !important; +.button.outline { + padding: 10px 25px; + background: none !important; + border: 2px solid var(--accent-dark-color); + border-radius: 10px; + color: var(--accent-dark-color) !important; } -.tag a { -font-size: 12px; +.button.outline:hover { + background-color: var(--accent-dark-color) !important; + color: white !important; + transform: none; + box-shadow: none; } + .dot-box { border-radius: 30px; background-color: var(--tag-color); @@ -217,27 +217,58 @@ box-shadow: 0 3px 2px 0 rgba(0,0,0,0.1); display: inline-block; } -.bg-image { -background-image: url(https://eko.in/sites/default/files/2020-06/homepage-illustration_0.svg); -background-repeat: no-repeat; -background-size: contain; -height: 442px; -background-position: center; + + +/* ============= SECTIONS / COMPONENTS =================== */ + +section, nav.topnav, footer { + box-sizing: border-box; + width: 100%; + margin: 0; + padding-left: 20px; + padding-right: 20px; } -.button-white { -border-radius: 12px; -transition-duration: 0.4s; -border: 1px solid var(--primary-color); -color: var(--primary-color); -padding: 10px 24px; -text-align: center; -text-decoration: none; -display: inline-block; -font-size: 13px; -font-weight: 600; +section { + padding-top: 20px; + padding-bottom: 20px; } +@media (min-width: 576px) { + section, nav.topnav, footer { + padding-left: 10%; + padding-right: 10%; + } + + section { + padding-top: 3%; + padding-bottom: 3%; + } + + main { + padding-top: 1%; + } +} + + +.horizontal-spacer { + padding-right: 20px; +} + +.background-section { + background-color: var(--background-section-color); +} + + + +.large-top-hero .bg-image { + background-repeat: no-repeat; + background-size: contain; + height: 442px; + background-position: center; +} + + /* alternating steps*/ .alternating-steps > *:nth-of-type(even) .step-image{ @@ -283,7 +314,7 @@ font-weight: 600; font-weight: 500; } -.boxed { +.step_section .boxed { max-width: 200px; display: block; border: 1px solid var(--main-text-color); @@ -294,23 +325,25 @@ font-weight: 600; margin: 10px; opacity: 0.5; } -.boxed:hover{ +.step_section .boxed:hover{ background-color: var(--background-section-color); - border: 2px solid var(--primary-color); + border-color: var(--primary-color); } -.boxed:hover .box-text, -.box-text:hover { +.step_section .boxed:hover .box-text, +.step_section .box-text:hover { color: var(--header-color); opacity: 1; } -.boxed:hover .box-title, -.box-title:hover { +.step_section .boxed:hover .box-title, +.step_section .box-title:hover { color: var(--primary-color); opacity: 1; } + + .main-line { font-weight: bold; } @@ -478,215 +511,19 @@ h6 { - - -/* ================================= EMBLA COROUSEL ============================ */ -/* ----------- [TODO: Remove duplicate CSS between galary & embla] ------------ */ - -.embla { -position: relative; -padding: 20px; -max-width: 850px; -} - -.embla__viewport { -overflow: hidden; -width: 100%; -align-items: center; -margin: auto; -border: solid 0.3px var(--primary-color); -} - -.embla__viewport.is-draggable { -cursor: move; -cursor: grab; -} - -.embla__viewport.is-dragging { -cursor: grabbing; -} - -.embla__container { -display: flex; -user-select: none; --webkit-touch-callout: none; --khtml-user-select: none; --webkit-tap-highlight-color: transparent; -margin-left: -10px; -} - -.embla__slide { -position: relative; -min-width: 100%; -padding-left: 10px; -} - -.embla__slide__inner { -position: relative; -overflow: hidden; -padding: 30px; -margin-bottom: -15px; -background-color: var(--background-section-color); -background-size: cover; -text-align: left !important; -} - -.embla__slide__inner h3 { -font-weight: bold; -} - -.embla__slide__inner img { -max-width: 100%; -} - -.embla__button { -outline: 0; -cursor: pointer; -background-color: transparent; -touch-action: manipulation; -position: absolute; -z-index: 1; -top: 50%; -transform: translateY(-50%); -border: 0; -width: 30px; -height: 30px; -justify-content: center; -align-items: center; -fill: var(--primary-color); -padding: 0; -} - -.embla__button:disabled { -cursor: default; -opacity: 0.3; -} - -.embla__button__svg { -width: 100%; -height: 100%; -} - -.embla__button--prev { -left: 27px; -} - -.embla__button--next { -right: 27px; -} - -.gallery { - border: none !important; -} - -/* .gallery { -position: relative; -padding: 20px; -max-width: 850px; -} */ - -/* .gallery__viewport { -overflow: hidden; -width: 100%; -align-items: center; -margin: auto; -padding: 20px; -} */ - -/* .gallery__viewport.is-draggable { -cursor: move; -cursor: grab; -} */ - -/* .gallery__viewport.is-dragging { -cursor: grabbing; -} */ - -.gallery__container { -display: flex; -user-select: none; --webkit-touch-callout: none; --khtml-user-select: none; --webkit-tap-highlight-color: transparent; -margin-left: -10px; -} - -.gallery__slide { -position: relative; -min-width: 100%; -padding-left: 10px; -} - -.gallery__slide__inner p { - color: var(--main-text-color); -} - -.gallery__slide__inner h1 { - font-weight: bold; - padding-top: 10px; - font-size: 15px; - color: var(--header-color); -} - -.gallery__slide__inner { - position: relative; - overflow: hidden; - padding: 30px; - margin-bottom: -15px; - background-size: cover; - text-align: left !important; -} - - -.gallery .partner-box { - margin-bottom: 50px; - border-radius: 20px; - box-shadow: 0 3px 10px 0 rgba(0,0,0,0.12), 0 3px 5px 0 rgba(0,0,0,0.05); -} - -.gallery .partner-box img { - max-width: 80%; +.get_started_banner h1 { + line-height: 1.5em; + margin: 0; } - -/* .gallery__button { - outline: 0; - cursor: pointer; - background-color: transparent; - touch-action: manipulation; - position: absolute; - z-index: 1; - top: 50%; - transform: translateY(-50%); - border: 0; - width: 30px; - height: 30px; - justify-content: center; - align-items: center; - fill: var(--primary-color); - padding: 0; -} */ - -/* .gallery__button:disabled { - cursor: default; - opacity: 0.3; - } - -.gallery__button__svg { - width: 100%; - height: 100%; +.get_started_banner h3 { + font-size: 24px; + line-height: 1.1; + margin:0; } - -.gallery__button--prev { - left: 1px; +.get_started_banner .button { + margin: 0 1em 0 0; } -.gallery__button--next { - right: 1px; -} */ - -/* ======================================================================================== */ - - /* ====================== SECTION ACCORDION =================================== */ diff --git a/src/_includes/css/blog.css b/src/_includes/css/blog.css index cd9ceac..b4efe07 100644 --- a/src/_includes/css/blog.css +++ b/src/_includes/css/blog.css @@ -25,6 +25,10 @@ a { color: var(--primary-color); } +p { + text-align: justify; +} + blockquote { background: #f9f9f9; @@ -34,11 +38,11 @@ blockquote { quotes: "\201C""\201D""\2018""\2019"; } blockquote:before { - color: #ccc; + color: var(--primary-light-60-color); content: open-quote; font-size: 5em; line-height: 0.1em; - margin-right: 0.25em; + margin-right: 0.1em; vertical-align: -0.4em; } blockquote p { diff --git a/src/_includes/css/carousel.css b/src/_includes/css/carousel.css new file mode 100644 index 0000000..7ad9895 --- /dev/null +++ b/src/_includes/css/carousel.css @@ -0,0 +1,203 @@ +/* ================================= EMBLA COROUSEL ============================ */ +/* ----------- [TODO: Remove duplicate CSS between galary & embla] ------------ */ + +.embla { +position: relative; +padding: 20px; +max-width: 850px; +} + +.embla__viewport { +overflow: hidden; +width: 100%; +align-items: center; +margin: auto; +border: solid 0.3px var(--primary-color); +} + +.embla__viewport.is-draggable { +cursor: move; +cursor: grab; +} + +.embla__viewport.is-dragging { +cursor: grabbing; +} + +.embla__container { +display: flex; +user-select: none; +-webkit-touch-callout: none; +-khtml-user-select: none; +-webkit-tap-highlight-color: transparent; +margin-left: -10px; +} + +.embla__slide { +position: relative; +min-width: 100%; +padding-left: 10px; +} + +.embla__slide__inner { +position: relative; +overflow: hidden; +padding: 30px; +margin-bottom: -15px; +background-color: var(--background-section-color); +background-size: cover; +text-align: left !important; +} + +.embla__slide__inner h3 { +font-weight: bold; +} + +.embla__slide__inner img { +max-width: 100%; +} + +.embla__button { +outline: 0; +cursor: pointer; +background-color: transparent; +touch-action: manipulation; +position: absolute; +z-index: 1; +top: 50%; +transform: translateY(-50%); +border: 0; +width: 30px; +height: 30px; +justify-content: center; +align-items: center; +fill: var(--primary-color); +padding: 0; +} + +.embla__button:disabled { +cursor: default; +opacity: 0.3; +} + +.embla__button__svg { +width: 100%; +height: 100%; +} + +.embla__button--prev { +left: 27px; +} + +.embla__button--next { +right: 27px; +} + +.gallery { + border: none !important; +} + +/* .gallery { +position: relative; +padding: 20px; +max-width: 850px; +} */ + +/* .gallery__viewport { +overflow: hidden; +width: 100%; +align-items: center; +margin: auto; +padding: 20px; +} */ + +/* .gallery__viewport.is-draggable { +cursor: move; +cursor: grab; +} */ + +/* .gallery__viewport.is-dragging { +cursor: grabbing; +} */ + +.gallery__container { +display: flex; +user-select: none; +-webkit-touch-callout: none; +-khtml-user-select: none; +-webkit-tap-highlight-color: transparent; +margin-left: -10px; +} + +.gallery__slide { +position: relative; +min-width: 100%; +padding-left: 10px; +} + +.gallery__slide__inner p { + color: var(--main-text-color); +} + +.gallery__slide__inner h1 { + font-weight: bold; + padding-top: 10px; + font-size: 15px; + color: var(--header-color); +} + +.gallery__slide__inner { + position: relative; + overflow: hidden; + padding: 30px; + margin-bottom: -15px; + background-size: cover; + text-align: left !important; +} + + +.gallery .partner-box { + margin-bottom: 50px; + border-radius: 20px; + box-shadow: 0 3px 10px 0 rgba(0,0,0,0.12), 0 3px 5px 0 rgba(0,0,0,0.05); +} + +.gallery .partner-box img { + max-width: 80%; +} + +/* .gallery__button { + outline: 0; + cursor: pointer; + background-color: transparent; + touch-action: manipulation; + position: absolute; + z-index: 1; + top: 50%; + transform: translateY(-50%); + border: 0; + width: 30px; + height: 30px; + justify-content: center; + align-items: center; + fill: var(--primary-color); + padding: 0; +} */ + +/* .gallery__button:disabled { + cursor: default; + opacity: 0.3; + } + +.gallery__button__svg { + width: 100%; + height: 100%; +} + +.gallery__button--prev { + left: 1px; +} + +.gallery__button--next { + right: 1px; +} */ diff --git a/src/_includes/css/dark.css b/src/_includes/css/dark.css index a7f9210..8ff4e7e 100644 --- a/src/_includes/css/dark.css +++ b/src/_includes/css/dark.css @@ -3,30 +3,26 @@ color: white; background-color: #000; } - + .dark a { color: white; } - - .dark .tag a { - color: black; - } - + .dark a:hover { color: orange; } - + .dark .nav a { color: grey; } - - + + .dark .boxed:hover .box-text, - .box-text:hover { + .box-text:hover { color: white; - opacity: 1; + opacity: 1; } - + .dark .nav .l-box-main a:hover { color: orange; } \ No newline at end of file diff --git a/src/_includes/css/flex.css b/src/_includes/css/flex.css index efa9c80..1ab1334 100644 --- a/src/_includes/css/flex.css +++ b/src/_includes/css/flex.css @@ -133,3 +133,16 @@ align-self: stretch; } + +/* -------- Responsive Flexbox -------- */ +@media (min-width: 700px) { + + .layout.horizontal-md { + flex-direction: row; + } + + .layout.horizontal-reverse-md { + flex-direction: row-reverse; + } + +} \ No newline at end of file diff --git a/src/_includes/css/nav.css b/src/_includes/css/nav.css index 62576fc..4c3539e 100644 --- a/src/_includes/css/nav.css +++ b/src/_includes/css/nav.css @@ -141,32 +141,6 @@ padding: 0; font-weight: normal; } -.nav-column .button-white { - border-radius: 12px; - transition-duration: 0.4s; - border: 1px solid var(--primary-color); - color: var(--primary-color); - padding: 10px 24px; - text-align: center; - text-decoration: none; - display: inline-block; - font-size: 13px; - font-weight: 600; -} - -.nav-column .button-white:hover { - background-color: var(--primary-color); - color:white; -} - -.nav .button { - color: white !important; -} - -.nav-button:hover { - box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19); -} - .nav .l-box-main { padding-right: 1em; } diff --git a/src/_includes/footer.njk b/src/_includes/footer.njk index 7f5f973..2bcbd25 100644 --- a/src/_includes/footer.njk +++ b/src/_includes/footer.njk @@ -33,7 +33,7 @@





Sign Up

- Contact Us Link {{ footer.contact_button_text }} + Contact Us Link {{ footer.contact_button_text }} diff --git a/src/_includes/js/carousel.js b/src/_includes/js/carousel.js index 22bd421..b959bf2 100644 --- a/src/_includes/js/carousel.js +++ b/src/_includes/js/carousel.js @@ -54,7 +54,7 @@ const setupEmblaCarousel = (emblaNode, options) => { const prevBtn = emblaNode.querySelector(".embla__button--prev"); const nextBtn = emblaNode.querySelector(".embla__button--next"); const embla = EmblaCarousel(viewPort, options); - const autoplayer = autoplay(embla, 4000); + const autoplayer = autoplay(embla, 10000); const disablePrevAndNextBtns = disablePrevNextBtns(prevBtn, nextBtn, embla); listenForPrevBtnClick(prevBtn, embla, autoplayer); diff --git a/src/_includes/navigation.njk b/src/_includes/navigation.njk index b591413..90455d7 100644 --- a/src/_includes/navigation.njk +++ b/src/_includes/navigation.njk @@ -28,7 +28,7 @@
Check out our Developer Products

Available as APIs & SDKs

- Check Developer Products + Check Developer Products @@ -85,7 +85,7 @@
  • - Contact Sales + Contact Sales
  • Sign Up diff --git a/src/_includes/section_final_ad.njk b/src/_includes/section_final_ad.njk deleted file mode 100644 index 880c686..0000000 --- a/src/_includes/section_final_ad.njk +++ /dev/null @@ -1,42 +0,0 @@ -
    -
    -
    -

    -

    {{ item.small_header }}

    -

    {{ item.main_header }}

    - - {% if item.button1_text %} -
    -
    - {{ item.button1_text }} -
    -
    - {{ item.button2_text }} -
    -
    - {% endif %} - {% if item.icon1 %} -

    -
    -
    -
    - {{ item.icon1_text }} -

    {{ item.icon1_text }}

    -
    -
    -
    -
    - {{ item.icon2_text }} -

    {{ item.icon2_text }}

    -
    -
    -
    - {% endif %} -

    -
    -

    -
    {{ item.caption }} -

    {{ item.caption }}

    -
    -
    -
    diff --git a/src/_includes/section_get_started_banner.njk b/src/_includes/section_get_started_banner.njk new file mode 100644 index 0000000..e5981f8 --- /dev/null +++ b/src/_includes/section_get_started_banner.njk @@ -0,0 +1,41 @@ +
    +
    + +
    + {{ item.caption }} + {% if item.caption %} +

    {{ item.caption }}

    + {% endif %} +
    + +
    +

    {{ item.small_header }}

    +

    {{ item.main_header }}

    + + {% if item.button1_text %} +
    + {{ item.button1_text }} + {{ item.button2_text }} +
    + {% endif %} + {# {% if item.icon1 %} +

    +
    +
    +
    + {{ item.icon1_text }} +

    {{ item.icon1_text }}

    +
    +
    +
    +
    + {{ item.icon2_text }} +

    {{ item.icon2_text }}

    +
    +
    +
    + {% endif %} #} +
    + +
    +
    diff --git a/src/_includes/section_large_top_hero.njk b/src/_includes/section_large_top_hero.njk index d964f19..3570039 100644 --- a/src/_includes/section_large_top_hero.njk +++ b/src/_includes/section_large_top_hero.njk @@ -1,5 +1,5 @@
    -
    +
    {% if item.tag_title %} @@ -11,7 +11,7 @@ {% endif %}

    {{ item.header }}


    -
    +
    Try for Free
    diff --git a/src/_includes/section_message.njk b/src/_includes/section_message.njk index c27718e..51708b1 100644 --- a/src/_includes/section_message.njk +++ b/src/_includes/section_message.njk @@ -8,6 +8,6 @@

    {{ item.line2 }}

    {{ item.main_line }}


    - {{ item.button_text }} + {{ item.button_text }}
diff --git a/src/_layouts/pageTemplates/base.njk b/src/_layouts/pageTemplates/base.njk index 772f4e1..91b8e28 100644 --- a/src/_layouts/pageTemplates/base.njk +++ b/src/_layouts/pageTemplates/base.njk @@ -7,8 +7,20 @@ - - + + {# ---- Optimal/non-blocking way to load Google Font (https://csswizardry.com/2020/05/the-fastest-google-fonts) ---- #} + {% if website.google_font_url %} + + + {# Less optimized way but ledd FOUT: #} + + + {# More optimized method but more FOUT: #} + {# + #} + {# Ignoring