From 50badd91f5cb5a3a7b93867d13ec981500c40f4f Mon Sep 17 00:00:00 2001 From: Emil Totev Date: Sun, 2 Aug 2020 21:32:03 +0300 Subject: [PATCH 1/6] Merge remote-tracking branch 'upstream/source' into source --- content/scripts/img-gallery-handler.js | 39 -------------------------- theme/static/scripts/mobile-nav.js | 28 ------------------ 2 files changed, 67 deletions(-) delete mode 100644 theme/static/scripts/mobile-nav.js diff --git a/content/scripts/img-gallery-handler.js b/content/scripts/img-gallery-handler.js index 34361e16..4448c8e5 100644 --- a/content/scripts/img-gallery-handler.js +++ b/content/scripts/img-gallery-handler.js @@ -87,39 +87,6 @@ shown.style.left = 0; } - // swipe detection in pure JavaScript - // http://www.javascriptkit.com/javatutors/touchevents2.shtml - function swipedetect(touchsurface, callback){ - var startX, - startTime, - threshold = 150, //required min distance traveled to be considered swipe - allowedTime = 300, // maximum time allowed to travel that distance - handleswipe = callback || function(swipedir){}; - - touchsurface.addEventListener('touchstart', function(e){ - startX = e.changedTouches[0].pageX; - startTime = new Date().getTime(); - e.preventDefault(); - }, false); - - touchsurface.addEventListener('touchmove', function(e){ - // prevent scrolling when inside DIV - e.preventDefault(); - }, false); - - touchsurface.addEventListener('touchend', function(e){ - var distX = e.changedTouches[0].pageX - startX, - elapsedTime = new Date().getTime() - startTime; - swipedir = 0; - if ((elapsedTime <= allowedTime) && (Math.abs(distX) >= threshold)) { - // direction indices are reversed compared to when clicking the buttons - swipedir = (distX < 0) ? 1 : -1; - handleswipe(swipedir); - } - e.preventDefault(); - }, false); - } - // initialization and callbacks updateDisplay(0); nextBtn.addEventListener('mouseover', function(){ changeDirection(1) }); @@ -127,9 +94,3 @@ nextBtn.addEventListener('click', function(){ rollImage(1); }); prevBtn.addEventListener('click', function(){ rollImage(-1); }); - - // sets up a touch-gesture event listener - swipedetect(document.getElementsByClassName('img-wrapper')[0], function(direction){ - changeDirection(direction); - setTimeout(function() { rollImage(direction); }, 50); - }); diff --git a/theme/static/scripts/mobile-nav.js b/theme/static/scripts/mobile-nav.js deleted file mode 100644 index 18e87920..00000000 --- a/theme/static/scripts/mobile-nav.js +++ /dev/null @@ -1,28 +0,0 @@ -function setMobileNavBehaviour() { - var mobileBtnOpen = document.getElementsByClassName('open-menu')[0], - mobileBtnClose = document.getElementsByClassName('close-menu')[0], - mobileMask = document.getElementById("mobile-mask"); - links = document.querySelectorAll('.topnav a[href^="#"]'); - - for(let i = 0; i < links.length; i++){ - links[i].addEventListener('click', function(){ - closeMenu(); - }); - } - - mobileBtnOpen.addEventListener('click', function(){ - openMenu(mobileMask); - }); - - mobileBtnClose.addEventListener('click', function(){ - closeMenu(mobileMask); - }); -} - -function closeMenu(menu){ - menu.style.top = '-100%'; -} - -function openMenu(menu){ - menu.style.top = 0; -} From 15e61e07e21abf82209a91482f0d0ddca0b50f99 Mon Sep 17 00:00:00 2001 From: Emil Totev Date: Sun, 2 Aug 2020 22:39:34 +0300 Subject: [PATCH 2/6] Source update --- content/pages/community.markdown | 2 +- theme/static/style/responsive-1024.css | 6 +++++- theme/static/style/responsive-768.css | 8 ++++++-- theme/static/style/responsive-micro.css | 8 ++++++-- theme/static/style/style.css | 9 +++++++-- 5 files changed, 25 insertions(+), 8 deletions(-) diff --git a/content/pages/community.markdown b/content/pages/community.markdown index bfb8a239..0ca14a69 100644 --- a/content/pages/community.markdown +++ b/content/pages/community.markdown @@ -20,7 +20,7 @@ We welcome community contributions! Please see the [contribution page](http://ki To make Kiwi TCMS a welcoming and harassment-free experience for everyone, we follow the [CNCF Code of Conduct](https://github.com/cncf/foundation/blob/master/code-of-conduct.md). -# Acknowledgements +# Credits Kiwi TCMS was initially started by [Red Hat, Inc.](https://www.redhat.com/en) under the name Nitrate. It was intended as a replacement for Mozilla's Testopia and has grown on its own diff --git a/theme/static/style/responsive-1024.css b/theme/static/style/responsive-1024.css index cf24cc25..47857bd0 100644 --- a/theme/static/style/responsive-1024.css +++ b/theme/static/style/responsive-1024.css @@ -75,12 +75,16 @@ background: var(--white); display: grid; transition: top 0.2s linear; - top: -100%; + top: -150%; + pointer-events: none; + opacity: 0; align-items: center; } #main-nav ul.hidden-menu.visible { display: grid; top: 0; + opacity: 1; + pointer-events: all; } #main-nav img { diff --git a/theme/static/style/responsive-768.css b/theme/static/style/responsive-768.css index 5ba1f753..99ce9a08 100644 --- a/theme/static/style/responsive-768.css +++ b/theme/static/style/responsive-768.css @@ -83,12 +83,16 @@ background: var(--white); display: grid; transition: top 0.2s linear; - top: -100%; + top: -150%; + pointer-events: none; + opacity: 0; align-items: center; } #main-nav ul.hidden-menu.visible { display: grid; top: 0; + opacity: 1; + pointer-events: all; } #main-nav img { @@ -109,7 +113,7 @@ width: 100vw; height: calc(var(--unusable-padding) * 2); background-color: var(--dark-green); - margin: calc(var(--x3-padding) * -1 - 1px) calc(var(--unusable-padding) * -1 - var(--x3-padding) - 2px); + margin: calc(var(--x3-padding) * -1 - 1px) calc(var(--unusable-padding) * -1 - var(--x3-padding) - 1px); z-index: -100; } .feature-list div:nth-child(5):before { diff --git a/theme/static/style/responsive-micro.css b/theme/static/style/responsive-micro.css index 487b3eec..ab82e8c3 100644 --- a/theme/static/style/responsive-micro.css +++ b/theme/static/style/responsive-micro.css @@ -83,12 +83,16 @@ background: var(--white); display: grid; transition: top 0.2s linear; - top: -100%; + top: -150%; + pointer-events: none; + opacity: 0; align-items: center; } #main-nav ul.hidden-menu.visible { display: grid; top: 0; + opacity: 1; + pointer-events: all; } #main-nav img { @@ -109,7 +113,7 @@ width: 100vw; height: calc(var(--unusable-padding) * 2); background-color: var(--dark-green); - margin: calc(var(--x3-padding) * -1 - 1px) calc(var(--unusable-padding) * -1 - var(--x3-padding) - 2px); + margin: calc(var(--x3-padding) * -1 - 1px) calc(var(--unusable-padding) * -1 - var(--x3-padding) - 1px); z-index: -100; } .feature-list div:nth-child(5):before { diff --git a/theme/static/style/style.css b/theme/static/style/style.css index 56b4cb22..f242faf8 100644 --- a/theme/static/style/style.css +++ b/theme/static/style/style.css @@ -70,7 +70,9 @@ body{ display: flex; flex-direction: column; place-content: start space-between; - height: 100vh; + height: 100vh; + overflow-x: hidden; + scroll-behavior: smooth; } section, @@ -399,7 +401,7 @@ header .video a { width: 100vw; height: calc(var(--unusable-padding) * 2); background-color: var(--dark-green); - margin: calc(var(--x3-padding) * -1 - 1px) calc(var(--unusable-padding) * -1 - var(--x3-padding) - 2px); + margin: calc(var(--x3-padding) * -1 - 1px) calc(var(--unusable-padding) * -1 - var(--x3-padding) - 1px); z-index: -100; } @@ -550,6 +552,9 @@ blockquote p.quote { #pricing .plans-modal ul a:hover { color: var(--light-green); } +summary, #plans-modal h3{ + cursor: pointer; +} /* S PRICING > Details */ #pricing summary::-webkit-details-marker{ From c54352fef38867dd8aff10b0f521d3032a2972df Mon Sep 17 00:00:00 2001 From: Emil Totev Date: Sun, 2 Aug 2020 23:45:17 +0300 Subject: [PATCH 3/6] Combined fix --- theme/static/style/style.css | 35 ++++++++++++++++++++++++++++------- 1 file changed, 28 insertions(+), 7 deletions(-) diff --git a/theme/static/style/style.css b/theme/static/style/style.css index c7d52a97..daa53155 100644 --- a/theme/static/style/style.css +++ b/theme/static/style/style.css @@ -110,11 +110,20 @@ code { font-size: inherit; border-radius: 2px; border: 1px solid var(--trans-green); + overflow: scroll; + width: fit-content; + max-width: 86vw; + display: inline-grid; + overflow-wrap: normal!important; +} +p > code{ + margin-bottom:0!important; } pre > code { border: none; - padding: 0; + padding: 0; + display:inline; } /* pre > code > span { */ @@ -450,6 +459,11 @@ header .video a { padding: var(--x3-padding) var(--unusable-padding); } +#quick-links div > *{ + float:left; + grid-column: 1 / 2; +} + #quick-links div { background: var(--white); filter: var(--light-shadow); @@ -559,12 +573,18 @@ summary, #plans-modal h3{ } /* S PRICING > Details */ -#pricing summary::-webkit-details-marker{ +summary::-webkit-details-marker{ display: none; } -#pricing summary::marker{ +summary::marker{ display:none; } +::-webkit-details-marker { display:none; } + +summary{ + list-style-image: none; +} + #pricing summary:after { height: 20px; @@ -1138,17 +1158,18 @@ font-size: 25px; } #blog-list article.blog-list .content *, #blog-article article.content *{ margin-bottom:var(--x1-padding); + max-width: 86vw; overflow-wrap: break-word; } #blog-list article.blog-list .content img, #blog-article article.content img{ max-width: 100%; } #blog-list article.blog-list .content pre, #blog-article article.content pre{ - white-space: pre-wrap; - white-space: -moz-pre-wrap; - white-space: -o-pre-wrap; - word-wrap: break-word; font-family: "Source Code Pro", monospace; + overflow: scroll; + width: fit-content; + max-width: 86vw; + background: var(--light-gray); } #blog-list article.blog-list .content a, #blog-article article.content a{ overflow-wrap: anywhere; From 58fa4a3aeae520888c2c02f7d1697f597836bd2c Mon Sep 17 00:00:00 2001 From: Emil Totev Date: Sun, 2 Aug 2020 23:47:37 +0300 Subject: [PATCH 4/6] Combined fix --- theme/static/style/style.css | 1161 +++++++++++++++++----------------- 1 file changed, 580 insertions(+), 581 deletions(-) diff --git a/theme/static/style/style.css b/theme/static/style/style.css index daa53155..ee41527d 100644 --- a/theme/static/style/style.css +++ b/theme/static/style/style.css @@ -9,60 +9,60 @@ @import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"); * { - margin: 0; - padding: 0; - font-family: "Rubik", sans-serif; - list-style-position: inside; - color: inherit; + margin: 0; + padding: 0; + font-family: "Rubik", sans-serif; + list-style-position: inside; + color: inherit; } :root { - /* Colors */ - --dark-green: #3c8d2c; - --mid-green: #59a016; - --light-green: #78b500; - --trans-green: #3c8d2c80; - --white: #ffffff; - --light-gray: #f8f8f8; - --brown: #36302c; - --black: #222222; - /* Sizes */ - --usable-area: 86vw; - --unusable-padding: 7vw; - --x1-padding: 10px; - --x2-padding: 20px; - --x3-padding: 30px; - --sec-padding: 70px; - --grid-gap: 30px; - --nav-border-bottom: 4px; - /* Icons */ - --la-play: "\f144"; - --la-check: "\f14a"; - --la-arrow: "\f061"; - --la-arrow-rev: "\f060"; - --la-cl-down: "\f381"; - --la-book: "\f02d"; - --la-team: "\f0c0"; - --la-headset: "\f590"; - --fa-caret: "\f0da"; - --fa-caret-down: "\f0d7"; - --fa-angle-right: "\f105"; - --la-arrow-left: "\f104"; - --la-arrow-right: "\f105"; - --la-quote: "\f10d"; - --la-twitter: "\f081"; - --la-github: "\f092"; - --la-facebook: "\f082"; - --la-youtube: "\f431"; - --la-mail: "\f0e0"; - --fa-info: "\f05a"; - --la-close: "\f00d"; - --fa-link: "\f0c1"; - --fa-video: "\f04b"; - /* Shadows */ - --light-shadow: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2)); - --lower-shadow: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.2)); - --image-shadow: drop-shadow(3px 3px 15px rgba(0, 0, 0, 0.2)); + /* Colors */ + --dark-green: #3c8d2c; + --mid-green: #59a016; + --light-green: #78b500; + --trans-green: #3c8d2c80; + --white: #ffffff; + --light-gray: #f8f8f8; + --brown: #36302c; + --black: #222222; + /* Sizes */ + --usable-area: 86vw; + --unusable-padding: 7vw; + --x1-padding: 10px; + --x2-padding: 20px; + --x3-padding: 30px; + --sec-padding: 70px; + --grid-gap: 30px; + --nav-border-bottom: 4px; + /* Icons */ + --la-play: "\f144"; + --la-check: "\f14a"; + --la-arrow: "\f061"; + --la-arrow-rev: "\f060"; + --la-cl-down: "\f381"; + --la-book: "\f02d"; + --la-team: "\f0c0"; + --la-headset: "\f590"; + --fa-caret: "\f0da"; + --fa-caret-down: "\f0d7"; + --fa-angle-right: "\f105"; + --la-arrow-left: "\f104"; + --la-arrow-right: "\f105"; + --la-quote: "\f10d"; + --la-twitter: "\f081"; + --la-github: "\f092"; + --la-facebook: "\f082"; + --la-youtube: "\f431"; + --la-mail: "\f0e0"; + --fa-info: "\f05a"; + --la-close: "\f00d"; + --fa-link: "\f0c1"; + --fa-video: "\f04b"; + /* Shadows */ + --light-shadow: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2)); + --lower-shadow: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.2)); + --image-shadow: drop-shadow(3px 3px 15px rgba(0, 0, 0, 0.2)); } /* COMMON */ @@ -70,15 +70,15 @@ body{ display: flex; flex-direction: column; place-content: start space-between; - height: 100vh; - overflow-x: hidden; - scroll-behavior: smooth; + height: 100vh; + overflow-x: hidden; + scroll-behavior: smooth; } section, footer { - padding: var(--unusable-padding); - display: grid; + padding: var(--unusable-padding); + display: grid; } section#blog-article { @@ -90,657 +90,657 @@ section.after-content { } h3 { - font-size: 25px; + font-size: 25px; } p { - font-size: 20px; + font-size: 20px; } section > h1 { - font-family: "Source Sans Pro Bold", "Source Sans Pro", sans-serif; - font-style: oblique; - font-size: 60px; - color: var(--dark-green); + font-family: "Source Sans Pro Bold", "Source Sans Pro", sans-serif; + font-style: oblique; + font-size: 60px; + color: var(--dark-green); } code { - font-family: "Source Code Pro", monospace; - color: var(--dark-green); - background-color: var(--light-gray); - padding: 0px 4px; - font-size: inherit; - border-radius: 2px; - border: 1px solid var(--trans-green); - overflow: scroll; + font-family: "Source Code Pro", monospace; + color: var(--dark-green); + background-color: var(--light-gray); + padding: 0px 4px; + font-size: inherit; + border-radius: 2px; + border: 1px solid var(--trans-green); + overflow: scroll; width: fit-content; max-width: 86vw; display: inline-grid; overflow-wrap: normal!important; } p > code{ - margin-bottom:0!important; + margin-bottom:0!important; } pre > code { border: none; - padding: 0; - display:inline; + padding: 0; + display:inline; } /* pre > code > span { */ pre, pre span, pre code span{ - font-family: "Source Code Pro", monospace; + font-family: "Source Code Pro", monospace; } pre, pre *{ - line-height: normal; + line-height: normal; } ::-moz-selection { - color: var(--white); - background: var(--dark-green); + color: var(--white); + background: var(--dark-green); } ::selection { - color: var(--white); - background: var(--dark-green); + color: var(--white); + background: var(--dark-green); } /* - LISTS - */ ul.caret li:before, ul.caret summary:before { - content: var(--fa-caret); - font-family: "Font Awesome 5 Free", "FontAwesome"; - font-weight: 900; - margin-right: 5px; + content: var(--fa-caret); + font-family: "Font Awesome 5 Free", "FontAwesome"; + font-weight: 900; + margin-right: 5px; } ul.caret details > ul > li:before{ - content: var(--fa-angle-right); + content: var(--fa-angle-right); } ul.caret li, ul.caret details { - font-size: 20px; - margin-bottom: 9px; - list-style: none; + font-size: 20px; + margin-bottom: 9px; + list-style: none; } /* - BUTTONS - */ .btn { - padding: 9px var(--x3-padding); - color: var(--white); - background: var(--dark-green); - font-size: 20px; - line-height: 32px; - text-decoration: none; + padding: 9px var(--x3-padding); + color: var(--white); + background: var(--dark-green); + font-size: 20px; + line-height: 32px; + text-decoration: none; } .btn[icon] { - padding: 9px 20px 9px var(--x3-padding); + padding: 9px 20px 9px var(--x3-padding); } .btn[icon="reversed"] { - padding: 9px var(--x3-padding) 9px 20px; + padding: 9px var(--x3-padding) 9px 20px; } .btn:hover, .drop-btn.drop-down .btn { - background: var(--light-green); + background: var(--light-green); } .btn i:after { - content: var(--la-arrow); - font-size: 32px; - margin-left: 45px; - font-family: "Line Awesome Free"; - font-weight: 900; - color: white; - vertical-align: bottom; - font-style: normal; - margin-right: 10px; - transition: margin 0.1s linear, transform 0.05s linear; - display:inline-block; + content: var(--la-arrow); + font-size: 32px; + margin-left: 45px; + font-family: "Line Awesome Free"; + font-weight: 900; + color: white; + vertical-align: bottom; + font-style: normal; + margin-right: 10px; + transition: margin 0.1s linear, transform 0.05s linear; + display:inline-block; } .btn i[reversed]:after { - margin-right: 45px; - margin-left: 10px; - content: var(--la-arrow-rev); + margin-right: 45px; + margin-left: 10px; + content: var(--la-arrow-rev); } .btn:hover i:after, .drop-btn.drop-down .btn i:after { - margin-left: 55px; - margin-right: 0px; + margin-left: 55px; + margin-right: 0px; } .btn:hover i[reversed]:after{ - margin-right: 55px; - margin-left: 0px; + margin-right: 55px; + margin-left: 0px; } .drop-btn.drop-down .btn i:after { transform: rotate(90deg); } .big-btn { - padding: 9px var(--x3-padding); - color: var(--white); - background: var(--dark-green); - font-size: 30px; - line-height: 42px; - text-decoration: none; + padding: 9px var(--x3-padding); + color: var(--white); + background: var(--dark-green); + font-size: 30px; + line-height: 42px; + text-decoration: none; } .big-btn i:after { - font-size: 45px; + font-size: 45px; } .border-btn { - background: var(--mid-green); - border: 2px solid white; + background: var(--mid-green); + border: 2px solid white; } .border-btn i:after { - margin-left: 25px; + margin-left: 25px; } .border-btn:hover i:after, .drop-btn.drop-down .border-btn i:after { - margin-left: 35px; + margin-left: 35px; } .ghost-btn { - background: transparent; - border: 2px solid white; + background: transparent; + border: 2px solid white; } .ghost-btn:hover { - background: var(--white); - color: var(--black); + background: var(--white); + color: var(--black); } .ghost-btn:hover i:after, .drop-btn.drop-down .ghost-btn i:after { - color: var(--black); + color: var(--black); } /* HEADER */ header { - width: var(--usable-area); - padding: var(--unusable-padding); - padding-bottom: calc(var(--unusable-padding) * 2); - display: grid; - grid-template-columns: 1fr 1fr; - grid-template-rows: 1fr; - grid-template-areas: "lead video"; - align-items: center; - column-gap: var(--grid-gap); - background-image: linear-gradient(to top, var(--white) 0%, transparent 5%), url("/theme/images/header-pattern.png"); - background-size: cover, contain; - background-attachment: scroll, fixed; - background-repeat: no-repeat; - background-position: bottom right; + width: var(--usable-area); + padding: var(--unusable-padding); + padding-bottom: calc(var(--unusable-padding) * 2); + display: grid; + grid-template-columns: 1fr 1fr; + grid-template-rows: 1fr; + grid-template-areas: "lead video"; + align-items: center; + column-gap: var(--grid-gap); + background-image: linear-gradient(to top, var(--white) 0%, transparent 5%), url("/theme/images/header-pattern.png"); + background-size: cover, contain; + background-attachment: scroll, fixed; + background-repeat: no-repeat; + background-position: bottom right; } /* NAVIGATION */ #main-nav { - position: fixed; - z-index: 20; - width: var(--usable-area); - padding: calc(var(--x3-padding) - 9px) var(--unusable-padding); - background: var(--white); - display: flex; + position: fixed; + z-index: 20; + width: var(--usable-area); + padding: calc(var(--x3-padding) - 9px) var(--unusable-padding); + background: var(--white); + display: flex; } #main-nav ul.hidden-menu { - display: none; + display: none; } #main-nav img { - margin: calc(var(--x3-padding) * -1) 0; - margin-top: -21px; - height: 60px; - padding: 16px 0; + margin: calc(var(--x3-padding) * -1) 0; + margin-top: -21px; + height: 60px; + padding: 16px 0; } #main-nav > i { - display: none !important; + display: none !important; } #main-nav > ul { - margin-left: auto; + margin-left: auto; } #main-nav > ul li{ - display: inline-block; - margin: 0 7px; - color: var(--black); + display: inline-block; + margin: 0 7px; + color: var(--black); } #main-nav > ul:not(.hidden-menu) li:last-child{ - margin:0; + margin:0; } #main-nav > ul:not(.hidden-menu) li > a:not(.btn) { - text-decoration: none; - padding: 38px 8px 35px; + text-decoration: none; + padding: 38px 8px 35px; } #main-nav > ul li a { - text-decoration: none; + text-decoration: none; } #main-nav > ul:not(.hidden-menu) li > a.active { - border-bottom: var(--nav-border-bottom) solid var(--dark-green); - padding-bottom: 31px; - color: var(--dark-green); - font-weight: 500; + border-bottom: var(--nav-border-bottom) solid var(--dark-green); + padding-bottom: 31px; + color: var(--dark-green); + font-weight: 500; } #main-nav > ul.hidden-menu li > a.active { - color: var(--dark-green); - font-weight: 500; + color: var(--dark-green); + font-weight: 500; } #main-nav ul li > a:hover { - color: var(--dark-green); + color: var(--dark-green); } /* HEADER > LEAD */ .lead { - grid-area: lead; + grid-area: lead; } header .lead h1 { - font-family: "Source Sans Pro Black", "Source Sans Pro", sans-serif; - font-weight: 900; - font-size: 60px; - color: var(--dark-green); - margin-bottom: 40px; + font-family: "Source Sans Pro Black", "Source Sans Pro", sans-serif; + font-weight: 900; + font-size: 60px; + color: var(--dark-green); + margin-bottom: 40px; } header .lead ul { - margin-bottom: 30px; + margin-bottom: 30px; } header .lead ul li:before { - content: var(--la-check); - font-family: "Line Awesome Free"; - font-weight: 900; - margin-right: 7px; - font-size: 32px; + content: var(--la-check); + font-family: "Line Awesome Free"; + font-weight: 900; + margin-right: 7px; + font-size: 32px; } header .lead ul li { - font-size: 30px; - margin-bottom: 3px; - list-style: none; + font-size: 30px; + margin-bottom: 3px; + list-style: none; } /* HEADER > VIDEO */ header .video { - display: grid; - grid-template-columns: repeat(6, 1fr); - gap: var(--grid-gap); - grid-area: video; + display: grid; + grid-template-columns: repeat(6, 1fr); + gap: var(--grid-gap); + grid-area: video; } header .video .backplate { - background-color: var(--light-green); - grid-column: 3 / 6; - grid-row: 1 / 3; + background-color: var(--light-green); + grid-column: 3 / 6; + grid-row: 1 / 3; } header .video img { - grid-column: 2 / 6; - grid-row: 1; - margin-left: calc(var(--grid-gap) * -1); - margin-top: var(--grid-gap); - filter: var(--image-shadow); - width: 100%; + grid-column: 2 / 6; + grid-row: 1; + margin-left: calc(var(--grid-gap) * -1); + margin-top: var(--grid-gap); + filter: var(--image-shadow); + width: 100%; } header .video:after { - content: var(--la-play); - font-size: 64px; - font-family: "Line Awesome Free"; - font-weight: 900; - grid-row: 1; - grid-column: 2 / 6; - z-index: 5; - background: var(--light-gray); - border-radius: 50px; - align-self: center; - margin: var(--grid-gap) var(--grid-gap) 0 calc(var(--grid-gap) * -1); - justify-self: center; - color: var(--dark-green); - cursor: pointer; - pointer-events: none; + content: var(--la-play); + font-size: 64px; + font-family: "Line Awesome Free"; + font-weight: 900; + grid-row: 1; + grid-column: 2 / 6; + z-index: 5; + background: var(--light-gray); + border-radius: 50px; + align-self: center; + margin: var(--grid-gap) var(--grid-gap) 0 calc(var(--grid-gap) * -1); + justify-self: center; + color: var(--dark-green); + cursor: pointer; + pointer-events: none; } header .video a { - grid-column: 1 / 6; - justify-self: end; - grid-row: 2; - margin-bottom: var(--grid-gap); - margin-right: var(--grid-gap); + grid-column: 1 / 6; + justify-self: end; + grid-row: 2; + margin-bottom: var(--grid-gap); + margin-right: var(--grid-gap); } /* S FEATURES */ #features { - background-image: linear-gradient(to top, var(--dark-green), var(--dark-green) 50%, transparent 50%, transparent); - padding-top: 0; - margin-top: calc(var(--unusable-padding) * -1 - 10px); + background-image: linear-gradient(to top, var(--dark-green), var(--dark-green) 50%, transparent 50%, transparent); + padding-top: 0; + margin-top: calc(var(--unusable-padding) * -1 - 10px); } .feature-list div:nth-child(5):before { - content: ""; - position: absolute; - width: 100vw; - height: calc(var(--unusable-padding) * 2); - background-color: var(--dark-green); - margin: calc(var(--x3-padding) * -1 - 1px) calc(var(--unusable-padding) * -1 - var(--x3-padding) - 1px); - z-index: -100; + content: ""; + position: absolute; + width: 100vw; + height: calc(var(--unusable-padding) * 2); + background-color: var(--dark-green); + margin: calc(var(--x3-padding) * -1 - 1px) calc(var(--unusable-padding) * -1 - var(--x3-padding) - 1px); + z-index: -100; } .feature-list { - grid-column: 1 / 3; - display: grid; - grid-template-columns: repeat(4, 1fr); + grid-column: 1 / 3; + display: grid; + grid-template-columns: repeat(4, 1fr); } .feature-list div { - padding: var(--x3-padding); - border: 1px solid var(--trans-green); - background: var(--white); + padding: var(--x3-padding); + border: 1px solid var(--trans-green); + background: var(--white); } .feature-list > a { - grid-column: 1 / 5; - justify-self: end; - margin-right: var(--grid-gap); - margin-top: -20px; - filter: var(--light-shadow); + grid-column: 1 / 5; + justify-self: end; + margin-right: var(--grid-gap); + margin-top: -20px; + filter: var(--light-shadow); } /* S OUR MISSION*/ #mission { - grid-template-columns: repeat(6, 1fr); - padding: 0 var(--unusable-padding) var(--unusable-padding); - background: var(--dark-green); + grid-template-columns: repeat(6, 1fr); + padding: 0 var(--unusable-padding) var(--unusable-padding); + background: var(--dark-green); } #mission p { - color: white; - font-family: "Source Sans Pro Bold", "Source Sans Pro", sans-serif; - font-weight: 600; - font-size: 40px; - font-style: oblique; - text-align: center; - grid-column: 2/6; - padding: 0 var(--x3-padding); + color: white; + font-family: "Source Sans Pro Bold", "Source Sans Pro", sans-serif; + font-weight: 600; + font-size: 40px; + font-style: oblique; + text-align: center; + grid-column: 2/6; + padding: 0 var(--x3-padding); } /* S QUICK LINKS */ #quick-links { - background-image: url(/theme/images/kiwi-triangle.svg); - background-size: 100%; - background-repeat: no-repeat; - grid-template-columns: repeat(4, 1fr); - gap: var(--grid-gap); - padding: var(--x3-padding) var(--unusable-padding); + background-image: url(/theme/images/kiwi-triangle.svg); + background-size: 100%; + background-repeat: no-repeat; + grid-template-columns: repeat(4, 1fr); + gap: var(--grid-gap); + padding: var(--x3-padding) var(--unusable-padding); } #quick-links div > *{ - float:left; - grid-column: 1 / 2; + float:left; + grid-column: 1 / 2; } #quick-links div { - background: var(--white); - filter: var(--light-shadow); - padding: 30px; - display: flex; + background: var(--white); + filter: var(--light-shadow); + padding: 30px; + display: flex; flex-direction: column; - display: grid; - grid-template-columns: auto 1fr; - grid-template-rows: auto 1fr; - gap: 10px; - cursor: pointer; - grid-template-areas: - "icon title" - "icon description"; + display: grid; + grid-template-columns: auto 1fr; + grid-template-rows: auto 1fr; + gap: 10px; + cursor: pointer; + grid-template-areas: + "icon title" + "icon description"; } #quick-links a { - text-decoration: none; + text-decoration: none; } #quick-links div:hover { - color: var(--dark-green); + color: var(--dark-green); } #quick-links div i, blockquote i { - grid-area: icon; - align-self: start; - font-size: 64px; - width: fit-content; + grid-area: icon; + align-self: start; + font-size: 64px; + width: fit-content; } .quick-links div h3 { - font-family: "Rubik Bold", "Rubik", sans-serif; - font-weight: bold; - font-size: 25px; - grid-area: title; + font-family: "Rubik Bold", "Rubik", sans-serif; + font-weight: bold; + font-size: 25px; + grid-area: title; } .quick-links div p, blockquote p.quote { - font-size: 20px; - grid-area: description; + font-size: 20px; + grid-area: description; } /* S PRICING */ #pricing { - grid-template-columns: repeat(4, 1fr); - column-gap: var(--grid-gap); - row-gap: calc(var(--x3-padding) * 2); - background-image: url(/theme/images/kiwi-triangle-mg.svg), url(/theme/images/header-pattern.png); - background-size: 100% 300px, contain; - background-repeat: no-repeat; - background-position: bottom left, bottom right; + grid-template-columns: repeat(4, 1fr); + column-gap: var(--grid-gap); + row-gap: calc(var(--x3-padding) * 2); + background-image: url(/theme/images/kiwi-triangle-mg.svg), url(/theme/images/header-pattern.png); + background-size: 100% 300px, contain; + background-repeat: no-repeat; + background-position: bottom left, bottom right; } #pricing h1 { - grid-column: 1/5; + grid-column: 1/5; } #pricing .plan, #pricing .plans-modal { - background: var(--white); - filter: var(--lower-shadow); - align-self: start; - padding: var(--x3-padding); + background: var(--white); + filter: var(--lower-shadow); + align-self: start; + padding: var(--x3-padding); } #pricing .plan h3, #pricing .plans-modal h3 { - padding: var(--x3-padding); - margin: calc(var(--x3-padding) * -1) calc(var(--x3-padding) * -1) var(--x3-padding); - border-bottom: 2px solid var(--trans-green); - color: var(--dark-green); - display: flex; - font-size: 25px; + padding: var(--x3-padding); + margin: calc(var(--x3-padding) * -1) calc(var(--x3-padding) * -1) var(--x3-padding); + border-bottom: 2px solid var(--trans-green); + color: var(--dark-green); + display: flex; + font-size: 25px; } #pricing .plan.prefered h3 { - background-color: var(--dark-green); - color: var(--white); + background-color: var(--dark-green); + color: var(--white); } #pricing .plan > a { - display: block; - text-align: center; - font-size: 20px; - padding: 16px var(--x3-padding); - margin: var(--x3-padding) calc(var(--x3-padding) * -1) calc(var(--x3-padding) * -1); - background-color: var(--dark-green); - color: var(--white); - font-weight: 500; - text-decoration: none; + display: block; + text-align: center; + font-size: 20px; + padding: 16px var(--x3-padding); + margin: var(--x3-padding) calc(var(--x3-padding) * -1) calc(var(--x3-padding) * -1); + background-color: var(--dark-green); + color: var(--white); + font-weight: 500; + text-decoration: none; } #pricing .plan > a:hover, #pricing .plans-modal > a:hover { - background: var(--light-green); + background: var(--light-green); } #features a:not(.btn), #pricing .plan ul a, #pricing .plans-modal ul a { - color: var(--dark-green); + color: var(--dark-green); } #features a:not(.btn):hover, #pricing .plan ul a:hover, #pricing .plans-modal ul a:hover { - color: var(--light-green); + color: var(--light-green); } summary, #plans-modal h3{ - cursor: pointer; + cursor: pointer; } /* S PRICING > Details */ summary::-webkit-details-marker{ - display: none; + display: none; } summary::marker{ - display:none; + display:none; } ::-webkit-details-marker { display:none; } summary{ - list-style-image: none; + list-style-image: none; } #pricing summary:after { - height: 20px; - width: 20px; - float: right; - content: var(--fa-info); - font-family: "Font Awesome 5 Free", "FontAwesome"; - font-weight: 900; - color: var(--dark-green); + height: 20px; + width: 20px; + float: right; + content: var(--fa-info); + font-family: "Font Awesome 5 Free", "FontAwesome"; + font-weight: 900; + color: var(--dark-green); } #pricing details[open] summary:after { - color: var(--trans-green); + color: var(--trans-green); } #pricing details[open] summary:before { - content: var(--fa-caret-down); + content: var(--fa-caret-down); } #pricing details li { - padding-left: var(--x2-padding); + padding-left: var(--x2-padding); } #pricing details li > ul > li, body.page section ul > li > ul > li{ - padding-left: var(--x2-padding); - font-style: oblique; + padding-left: var(--x2-padding); + font-style: oblique; } details:focus, summary:focus { - outline: none; + outline: none; } /* S PRICING > Modal */ #pricing .plans-modal { - grid-column: 1/3; + grid-column: 1/3; } #pricing .plans-modal h3 { - margin: calc(var(--x3-padding) * -1); + margin: calc(var(--x3-padding) * -1); } #pricing .plans-modal h3:after { - content: "+"; - margin-left: auto; - text-align: right; - align-self: center; + content: "+"; + margin-left: auto; + text-align: right; + align-self: center; } #pricing .plans-modal div { - display: none; + display: none; } #pricing .plans-modal.show-modal div { - display: block; - margin: var(--x3-padding) calc(var(--x3-padding) * -1) calc(var(--x3-padding) * -1) calc(var(--x3-padding) * -1); - padding: var(--x3-padding); + display: block; + margin: var(--x3-padding) calc(var(--x3-padding) * -1) calc(var(--x3-padding) * -1) calc(var(--x3-padding) * -1); + padding: var(--x3-padding); } #pricing .plans-modal.show-modal h3:after { - content: "-"; + content: "-"; } /* S SCREENS */ #screens { - color: white; - background: var(--mid-green); - padding: var(--x3-padding) var(--unusable-padding); + color: white; + background: var(--mid-green); + padding: var(--x3-padding) var(--unusable-padding); } #screens h1 { - color: white; - margin-bottom: var(--x3-padding); - display: flex; + color: white; + margin-bottom: var(--x3-padding); + display: flex; } #screens h1 span { - margin-left: auto; - bottom: -10px; - position: relative; + margin-left: auto; + bottom: -10px; + position: relative; } #screens h1 span i { - cursor: pointer; + cursor: pointer; } #screens h3 { - font-family: "Rubik Bold", "Rubik", sans-serif; - font-weight: bold; - font-size: 25px; - margin: var(--x3-padding) 0; + font-family: "Rubik Bold", "Rubik", sans-serif; + font-weight: bold; + font-size: 25px; + margin: var(--x3-padding) 0; } #screens p { - font-size: 20px; + font-size: 20px; } /* S SCREENS > SLIDER CSS */ .tns-controls, .tns-nav { - display: none; + display: none; } #screens img { - max-width: 100%; - filter: var(--lower-shadow); + max-width: 100%; + filter: var(--lower-shadow); } .tns-outer { - margin: 0 calc(var(--unusable-padding) * -1); - width: 100vw; + margin: 0 calc(var(--unusable-padding) * -1); + width: 100vw; } .tns-inner { - margin: 0 var(--unusable-padding) !important; - padding-top: var(--x3-padding); + margin: 0 var(--unusable-padding) !important; + padding-top: var(--x3-padding); } .tns-slide-active, .tns-slide-active + .tns-slide-active + .tns-slide-active, .tns-slide-active + .tns-slide-active + .tns-slide-active + .tns-slide-active, .tns-slide-active + .tns-slide-active + .tns-slide-active + .tns-slide-active + .tns-slide-active { - width: calc((var(--usable-area)-11 * var(--grid-gap)) / 12 * 3) !important; - /* overwrite default */ + width: calc((var(--usable-area)-11 * var(--grid-gap)) / 12 * 3) !important; + /* overwrite default */ } .tns-slide-active + .tns-slide-active { - width: calc((var(--usable-area)-11 * var(--grid-gap)) / 12 * 5) !important; + width: calc((var(--usable-area)-11 * var(--grid-gap)) / 12 * 5) !important; } .tns-slide-active p, .tns-slide-active + .tns-slide-active + .tns-slide-active p, .tns-slide-active + .tns-slide-active + .tns-slide-active + .tns-slide-active p, .tns-slide-active + .tns-slide-active + .tns-slide-active + .tns-slide-active + .tns-slide-active p { - display: none; + display: none; } .tns-slide-active + .tns-slide-active p { - display: block; + display: block; } /* S TESTIMONIALS extends S QUICK LINKS */ #testimonials { - background-image: url(/theme/images/kiwi-triangle-mg-bottom.svg); - background-size: 100%; - background-repeat: no-repeat; - grid-template-columns: repeat(4, 1fr); - gap: var(--grid-gap); - padding: var(--x3-padding) var(--unusable-padding); + background-image: url(/theme/images/kiwi-triangle-mg-bottom.svg); + background-size: 100%; + background-repeat: no-repeat; + grid-template-columns: repeat(4, 1fr); + gap: var(--grid-gap); + padding: var(--x3-padding) var(--unusable-padding); } body.page_home blockquote { - background: var(--white); - filter: var(--light-shadow); - padding: var(--x3-padding) var(--x3-padding) var(--x3-padding) var(--x2-padding); - display: grid; - grid-template-columns: auto 1fr; - grid-template-rows: 1fr auto; - row-gap: var(--x1-padding); - column-gap: var(--x2-padding); - grid-template-areas: - "icon description" - "icon author"; + background: var(--white); + filter: var(--light-shadow); + padding: var(--x3-padding) var(--x3-padding) var(--x3-padding) var(--x2-padding); + display: grid; + grid-template-columns: auto 1fr; + grid-template-rows: 1fr auto; + row-gap: var(--x1-padding); + column-gap: var(--x2-padding); + grid-template-areas: + "icon description" + "icon author"; } blockquote .author { - font-family: "Rubik Bold", "Rubik", sans-serif; - grid-area: author; - text-decoration: none; - font-size: 20px; + font-family: "Rubik Bold", "Rubik", sans-serif; + grid-area: author; + text-decoration: none; + font-size: 20px; } blockquote .author span { - font-weight: bold; - display: block; + font-weight: bold; + display: block; } /* S TRUSTED BY @@ -751,19 +751,19 @@ blockquote .author span { #trusted-by, #seen-at, #awards { - display: grid; - grid-template-columns: repeat(6, 1fr); - gap: var(--grid-gap); - text-align: center; - align-items: center; - padding: calc(var(--x3-padding) * 2) var(--unusable-padding); + display: grid; + grid-template-columns: repeat(6, 1fr); + gap: var(--grid-gap); + text-align: center; + align-items: center; + padding: calc(var(--x3-padding) * 2) var(--unusable-padding); } #trusted-by h1, #seen-at h1, #awards h1{ - grid-column: 1/7; - text-align: left; - margin-bottom: var(--x3-padding); + grid-column: 1/7; + text-align: left; + margin-bottom: var(--x3-padding); } #trusted-by a img, @@ -772,26 +772,26 @@ blockquote .author span { #trusted-by img, #seen-at img, #awards img { - max-width: 100%; - justify-self: center; + max-width: 100%; + justify-self: center; } #trusted-by a, #seen-at a, #awards a{ - position: relative; + position: relative; } #trusted-by a:hover, #awards a:hover{ - background-color:var(--light-gray); + background-color:var(--light-gray); } #seen-at a:hover{ - background-color:var(--white); + background-color:var(--white); } a[iclink]:after, a[icvideo]:after{ - font-family: "Font Awesome 5 Free", "FontAwesome"; + font-family: "Font Awesome 5 Free", "FontAwesome"; font-weight: 900; background: var(--dark-green); color: var(--white); @@ -804,209 +804,209 @@ a[iclink]:after, a[icvideo]:after{ } a[iclink]:after{ - content: var(--fa-link); + content: var(--fa-link); } a[icvideo]:after { - content: var(--fa-video); + content: var(--fa-video); } #seen-at { - background: var(--light-gray); + background: var(--light-gray); } /* S CALL TO ACTION extends SCREENS*/ #cta { - padding: calc(var(--x3-padding) * 1) var(--unusable-padding); - background: var(--dark-green); - grid-template-areas: - "cta-title cta-btn" - "cta-desc cta-btn"; + padding: calc(var(--x3-padding) * 1) var(--unusable-padding); + background: var(--dark-green); + grid-template-areas: + "cta-title cta-btn" + "cta-desc cta-btn"; } #cta h1 { - color: white; - margin-bottom: var(--x1-padding); - grid-area: cta-title; + color: white; + margin-bottom: var(--x1-padding); + grid-area: cta-title; } #cta h3 { - font-family: "Rubik Bold", "Rubik", sans-serif; - font-weight: bold; - font-size: 25px; - color: rgba(255, 255, 255, 0.7); - grid-area: cta-desc; + font-family: "Rubik Bold", "Rubik", sans-serif; + font-weight: bold; + font-size: 25px; + color: rgba(255, 255, 255, 0.7); + grid-area: cta-desc; } #cta .drop-btn { - grid-area: cta-btn; - align-self: center; - justify-self: end; + grid-area: cta-btn; + align-self: center; + justify-self: end; } /* FOOTER */ footer { - padding: calc(var(--x3-padding) + var(--x2-padding)) var(--unusable-padding); - background-color: var(--brown); - color: white; - font-size: 20px; - display: grid; - justify-items: start; - gap: var(--grid-gap); - grid-template-columns: 5fr 2fr 2fr 3fr; - grid-template-areas: - "logo fl-tw fl-yt mail" - "legal fl-gh fl-fb mail"; + padding: calc(var(--x3-padding) + var(--x2-padding)) var(--unusable-padding); + background-color: var(--brown); + color: white; + font-size: 20px; + display: grid; + justify-items: start; + gap: var(--grid-gap); + grid-template-columns: 5fr 2fr 2fr 3fr; + grid-template-areas: + "logo fl-tw fl-yt mail" + "legal fl-gh fl-fb mail"; } footer h3 { - font-family: "Rubik Bold", "Rubik", sans-serif; - font-weight: bold; - font-size: 25px; - grid-area: title; + font-family: "Rubik Bold", "Rubik", sans-serif; + font-weight: bold; + font-size: 25px; + grid-area: title; } footer img { - grid-area: logo; - max-width: 70%; - align-self: center; + grid-area: logo; + max-width: 70%; + align-self: center; } footer .legal { - grid-area: legal; + grid-area: legal; } footer .footer-block:not(.mail):hover a { - color: var(--light-green); + color: var(--light-green); } footer .footer-block a:hover { - color: var(--dark-green); + color: var(--dark-green); } footer .legal a { - color: var(--light-green); + color: var(--light-green); } footer .legal a:hover { - color: var(--dark-green); + color: var(--dark-green); } footer .fl-tw { - grid-area: fl-tw; + grid-area: fl-tw; } footer .fl-gh { - grid-area: fl-gh; + grid-area: fl-gh; } footer .fl-yt { - grid-area: fl-yt; + grid-area: fl-yt; } footer .fl-fb { - grid-area: fl-fb; + grid-area: fl-fb; } footer .footer-block { - display: grid; - gap: var(--x1-padding); - align-content: start; - grid-template-areas: - "icon title" - "icon link"; + display: grid; + gap: var(--x1-padding); + align-content: start; + grid-template-areas: + "icon title" + "icon link"; } footer .footer-block a { - grid-area: link; + grid-area: link; } footer .footer-block p { - grid-area: desc; + grid-area: desc; } footer .footer-block i { - grid-area: icon; - font-size: 64px; - font-family: "Line Awesome Free"; - font-weight: 400; - color: white; - font-style: normal; + grid-area: icon; + font-size: 64px; + font-family: "Line Awesome Free"; + font-weight: 400; + color: white; + font-style: normal; } footer .fl-tw i:before { - font-family: "Line Awesome Brands"; - content: var(--la-twitter); + font-family: "Line Awesome Brands"; + content: var(--la-twitter); } footer .fl-gh i:before { - font-family: "Line Awesome Brands"; - content: var(--la-github); + font-family: "Line Awesome Brands"; + content: var(--la-github); } footer .fl-yt i:before { - font-family: "Line Awesome Brands"; - content: var(--la-youtube); + font-family: "Line Awesome Brands"; + content: var(--la-youtube); } footer .fl-fb i:before { - font-family: "Line Awesome Brands"; - content: var(--la-facebook); + font-family: "Line Awesome Brands"; + content: var(--la-facebook); } footer .mail i:before { - content: var(--la-mail); + content: var(--la-mail); } footer .mail a { - justify-self: start; + justify-self: start; } footer .mail { - grid-area: mail; - grid-template-areas: - "icon title" - "icon desc" - "icon link"; + grid-area: mail; + grid-template-areas: + "icon title" + "icon desc" + "icon link"; } /* F VIDEO OVERLAY */ #vp-overlay { - display: none; - z-index: 25; - top: 0; - bottom: 0; - left: 0; - right: 0; - position: fixed; - padding: var(--x3-padding) var(--unusable-padding); - background-color: rgba(0, 0, 0, 0.8); - align-items: center; - justify-items: center; - grid-template-areas: "video"; + display: none; + z-index: 25; + top: 0; + bottom: 0; + left: 0; + right: 0; + position: fixed; + padding: var(--x3-padding) var(--unusable-padding); + background-color: rgba(0, 0, 0, 0.8); + align-items: center; + justify-items: center; + grid-template-areas: "video"; } #vp-overlay.vp-visible { - display: grid; + display: grid; } #vp-overlay i { - color: white; - font-size: 20px; - justify-self: end; - align-self: start; - grid-area: video; - cursor: pointer; + color: white; + font-size: 20px; + justify-self: end; + align-self: start; + grid-area: video; + cursor: pointer; } #vp-overlay i:before { - content: var(--la-close); - font-size: 32px; - font-family: "Line Awesome Free"; - font-weight: 900; + content: var(--la-close); + font-size: 32px; + font-family: "Line Awesome Free"; + font-weight: 900; } #vp-frame { - height: 700px; - max-height:calc(100vh - 2 * var(--x3-padding)); - width: 1120px; - max-width: calc(100vw - 2 * var(--unusable-padding)); - grid-area: video; + height: 700px; + max-height:calc(100vh - 2 * var(--x3-padding)); + width: 1120px; + max-width: calc(100vw - 2 * var(--unusable-padding)); + grid-area: video; } .green { - color: var(--dark-green); + color: var(--dark-green); } .yellow { - color: #ffcc00; + color: #ffcc00; } .red { - color: #cc0000; + color: #cc0000; } /* INNER PAGE STYLES */ @@ -1019,55 +1019,55 @@ body.page section{ background-repeat: no-repeat; } body.page section p, body.page section li, body.page section pre{ - font-size:20px; + font-size:20px; } body.page section a:not(.btn):not(.bio-link), section#blog-list a:not(.btn):not(.bio-link), section#blog-article a:not(.btn):not(.bio-link){ - color:var(--dark-green); + color:var(--dark-green); } body.page section a:not(.btn):not(.bio-link):hover, section#blog-list a:not(.btn):not(.bio-link):hover, section#blog-article a:not(.btn):not(.bio-link):hover{ - color:var(--light-green); + color:var(--light-green); } /* TEAM v1 */ img.rounded { - float: left; - margin-left: 0; - margin-right: 1.5rem; - margin-bottom: 0.2rem; - border: solid 0.2em var(--black); - border-radius: 100%; + float: left; + margin-left: 0; + margin-right: 1.5rem; + margin-bottom: 0.2rem; + border: solid 0.2em var(--black); + border-radius: 100%; } .member-bio { - height: auto; - width: 100%; - float: left; + height: auto; + width: 100%; + float: left; } div.drop-btn:not(#nav-drop){ - display:inline; - position: relative; + display:inline; + position: relative; } #nav-drop.drop-btn{ - display:inline; + display:inline; } div.drop-cnt > a{ - color: var(--white); - background-color:var(--light-green); + color: var(--white); + background-color:var(--light-green); padding: 12px 16px; text-decoration: none; display: block; font-size:20px; } div.drop-cnt > a:hover{ - background-color:var(--dark-green); - color:var(--white); + background-color:var(--dark-green); + color:var(--white); } div.drop-cnt{ display: none; @@ -1075,33 +1075,33 @@ div.drop-cnt{ background-color: var(--light-green); min-width: 160px; filter: var(--light-shadow); - /* margin-top: 6px; */ - right: 0; + /* margin-top: 6px; */ + right: 0; } #nav-drop.drop-btn.drop-down .drop-cnt{ - right: var(--unusable-padding); + right: var(--unusable-padding); } div.drop-btn.drop-down div.drop-cnt, div.drop-btn:hover div.drop-cnt{ - display:block; - width: intrinsic; /* Safari/WebKit uses a non-standard name */ - width: -moz-max-content; /* Firefox/Gecko */ - width: -webkit-max-content; /* Chrome */ - width: max-content; + display:block; + width: intrinsic; /* Safari/WebKit uses a non-standard name */ + width: -moz-max-content; /* Firefox/Gecko */ + width: -webkit-max-content; /* Chrome */ + width: max-content; } .drop-btn > .btn{ - display:inline-block; + display:inline-block; } /* TEAM */ .member-bio > strong{ font-size: 25px; } .member-bio > em{ - font-size: 20px; + font-size: 20px; } .member-bio a.bio-link{ - padding: 3px 5px; + padding: 3px 5px; display: inline-block; background: var(--dark-green); color: white; @@ -1110,12 +1110,12 @@ font-size: 25px; margin-right: var(--x1-padding); } .member-bio a.bio-link:hover{ - background: var(--light-green); + background: var(--light-green); color: white; } /* BLOG > S BLOGLIST */ #blog-list, #blog-article{ - gap: var(--x3-padding); + gap: var(--x3-padding); padding-top: 150px; background-image: linear-gradient(to top, var(--white), transparent), url(/theme/images/pattern-v2.png); background-size: auto 500px, auto 500px; @@ -1123,88 +1123,87 @@ font-size: 25px; background-repeat: no-repeat; } #blog-list article.blog-list, #blog-article article.content{ - display: grid; - gap: var(--x3-padding); - max-width: 1000px; - width: 86vw; - border-bottom: 2px solid var(--trans-green); + display: grid; + gap: var(--x3-padding); + max-width: 1000px; + width: 86vw; + border-bottom: 2px solid var(--trans-green); } #blog-article, #blog-article article.content{ - gap:unset; + gap:unset; } #blog-list article.blog-list h1{ - font-size:30px; + font-size:30px; } #blog-list article.blog-list h2{ - font-size:25px; + font-size:25px; } #blog-list article.blog-list h3{ - font-size:20px; + font-size:20px; } #blog-list article.blog-list .header h1{ - color:var(--dark-green); + color:var(--dark-green); } #blog-list article.blog-list .header .post-meta, #blog-article .post-meta{ - font-style: oblique; - opacity: .7; + font-style: oblique; + opacity: .7; } #blog-article .post-meta{ - margin-top:var(--x1-padding); + margin-top:var(--x1-padding); } #blog-list article.blog-list .content, #blog-article article.content{ - font-size:20px; - line-height: 1.6; + font-size:20px; + line-height: 1.6; } #blog-list article.blog-list .content *, #blog-article article.content *{ - margin-bottom:var(--x1-padding); - max-width: 86vw; - overflow-wrap: break-word; + margin-bottom:var(--x1-padding); + max-width: 86vw; + overflow-wrap: break-word; } #blog-list article.blog-list .content img, #blog-article article.content img{ - max-width: 100%; + max-width: 100%; } #blog-list article.blog-list .content pre, #blog-article article.content pre{ - font-family: "Source Code Pro", monospace; - overflow: scroll; + font-family: "Source Code Pro", monospace; + overflow: scroll; width: fit-content; max-width: 86vw; background: var(--light-gray); } #blog-list article.blog-list .content a, #blog-article article.content a{ - overflow-wrap: anywhere; - text-overflow: ellipsis; + overflow-wrap: anywhere; + text-overflow: ellipsis; } #blog-list article.blog-list .content .section, #blog-article article.content .section{ - max-width: 100%; - width: 86vw; + max-width: 100%; + width: 86vw; } #blog-list article.blog-list .content ul li ul li, #blog-article article.content ul li ul li{ - padding-left:var(--x2-padding); + padding-left:var(--x2-padding); } #blog-list article.blog-list .content ul li p, #blog-article article.content ul li p{ - display:inline; + display:inline; } #blog-article h2.top-subheader{ - font-size: 30px; - color:var(--dark-green); + font-size: 30px; + color:var(--dark-green); } #blog-list .content h1, #blog-article h1, #blog-list .content h2, #blog-article h2, #blog-list .content h3, #blog-article h3, #blog-list .content h4, #blog-article h4, #blog-list .content h5, #blog-article h5{ - margin-top: var(--x2-padding); + margin-top: var(--x2-padding); } #blog-article article.content{ - margin-top:var(--x3-padding); + margin-top:var(--x3-padding); } #pagination{ - padding: var(--x3-padding) 0 0; + padding: var(--x3-padding) 0 0; display: flex; - justify-content: space-between; - align-items: center; + justify-content: space-between; + align-items: center; } - From 1e23b0e8ed7c057e9044a30ad322810986390cd2 Mon Sep 17 00:00:00 2001 From: Emil Totev Date: Sun, 2 Aug 2020 23:58:23 +0300 Subject: [PATCH 5/6] Spaces to tabs --- theme/static/style/style.css | 1265 +++++++++++++++++----------------- 1 file changed, 633 insertions(+), 632 deletions(-) diff --git a/theme/static/style/style.css b/theme/static/style/style.css index ee41527d..a7c0aa8c 100644 --- a/theme/static/style/style.css +++ b/theme/static/style/style.css @@ -9,738 +9,738 @@ @import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"); * { - margin: 0; - padding: 0; - font-family: "Rubik", sans-serif; - list-style-position: inside; - color: inherit; + margin: 0; + padding: 0; + font-family: "Rubik", sans-serif; + list-style-position: inside; + color: inherit; } :root { - /* Colors */ - --dark-green: #3c8d2c; - --mid-green: #59a016; - --light-green: #78b500; - --trans-green: #3c8d2c80; - --white: #ffffff; - --light-gray: #f8f8f8; - --brown: #36302c; - --black: #222222; - /* Sizes */ - --usable-area: 86vw; - --unusable-padding: 7vw; - --x1-padding: 10px; - --x2-padding: 20px; - --x3-padding: 30px; - --sec-padding: 70px; - --grid-gap: 30px; - --nav-border-bottom: 4px; - /* Icons */ - --la-play: "\f144"; - --la-check: "\f14a"; - --la-arrow: "\f061"; - --la-arrow-rev: "\f060"; - --la-cl-down: "\f381"; - --la-book: "\f02d"; - --la-team: "\f0c0"; - --la-headset: "\f590"; - --fa-caret: "\f0da"; - --fa-caret-down: "\f0d7"; - --fa-angle-right: "\f105"; - --la-arrow-left: "\f104"; - --la-arrow-right: "\f105"; - --la-quote: "\f10d"; - --la-twitter: "\f081"; - --la-github: "\f092"; - --la-facebook: "\f082"; - --la-youtube: "\f431"; - --la-mail: "\f0e0"; - --fa-info: "\f05a"; - --la-close: "\f00d"; - --fa-link: "\f0c1"; - --fa-video: "\f04b"; - /* Shadows */ - --light-shadow: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2)); - --lower-shadow: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.2)); - --image-shadow: drop-shadow(3px 3px 15px rgba(0, 0, 0, 0.2)); + /* Colors */ + --dark-green: #3c8d2c; + --mid-green: #59a016; + --light-green: #78b500; + --trans-green: #3c8d2c80; + --white: #ffffff; + --light-gray: #f8f8f8; + --brown: #36302c; + --black: #222222; + /* Sizes */ + --usable-area: 86vw; + --unusable-padding: 7vw; + --x1-padding: 10px; + --x2-padding: 20px; + --x3-padding: 30px; + --sec-padding: 70px; + --grid-gap: 30px; + --nav-border-bottom: 4px; + /* Icons */ + --la-play: "\f144"; + --la-check: "\f14a"; + --la-arrow: "\f061"; + --la-arrow-rev: "\f060"; + --la-cl-down: "\f381"; + --la-book: "\f02d"; + --la-team: "\f0c0"; + --la-headset: "\f590"; + --fa-caret: "\f0da"; + --fa-caret-down: "\f0d7"; + --fa-angle-right: "\f105"; + --la-arrow-left: "\f104"; + --la-arrow-right: "\f105"; + --la-quote: "\f10d"; + --la-twitter: "\f081"; + --la-github: "\f092"; + --la-facebook: "\f082"; + --la-youtube: "\f431"; + --la-mail: "\f0e0"; + --fa-info: "\f05a"; + --la-close: "\f00d"; + --fa-link: "\f0c1"; + --fa-video: "\f04b"; + /* Shadows */ + --light-shadow: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2)); + --lower-shadow: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.2)); + --image-shadow: drop-shadow(3px 3px 15px rgba(0, 0, 0, 0.2)); } /* COMMON */ body{ - display: flex; - flex-direction: column; - place-content: start space-between; - height: 100vh; - overflow-x: hidden; - scroll-behavior: smooth; + display: flex; + flex-direction: column; + place-content: start space-between; + height: 100vh; + overflow-x: hidden; + scroll-behavior: smooth; } section, footer { - padding: var(--unusable-padding); - display: grid; + padding: var(--unusable-padding); + display: grid; } section#blog-article { - padding-bottom: calc(var(--unusable-padding) * 0.25); + padding-bottom: calc(var(--unusable-padding) * 0.25); } section.after-content { - padding-bottom: 0; - padding-top:0; + padding-bottom: 0; + padding-top:0; } h3 { - font-size: 25px; + font-size: 25px; } p { - font-size: 20px; + font-size: 20px; } section > h1 { - font-family: "Source Sans Pro Bold", "Source Sans Pro", sans-serif; - font-style: oblique; - font-size: 60px; - color: var(--dark-green); + font-family: "Source Sans Pro Bold", "Source Sans Pro", sans-serif; + font-style: oblique; + font-size: 60px; + color: var(--dark-green); } code { - font-family: "Source Code Pro", monospace; - color: var(--dark-green); - background-color: var(--light-gray); - padding: 0px 4px; - font-size: inherit; - border-radius: 2px; - border: 1px solid var(--trans-green); - overflow: scroll; - width: fit-content; - max-width: 86vw; - display: inline-grid; - overflow-wrap: normal!important; + font-family: "Source Code Pro", monospace; + color: var(--dark-green); + background-color: var(--light-gray); + padding: 0px 4px; + font-size: inherit; + border-radius: 2px; + border: 1px solid var(--trans-green); + overflow: scroll; + width: fit-content; + max-width: 86vw; + display: inline-grid; + overflow-wrap: normal!important; } p > code{ - margin-bottom:0!important; + margin-bottom:0!important; } pre > code { - border: none; - padding: 0; - display:inline; + border: none; + padding: 0; + display:inline; } /* pre > code > span { */ pre, pre span, pre code span{ - font-family: "Source Code Pro", monospace; + font-family: "Source Code Pro", monospace; } pre, pre *{ - line-height: normal; + line-height: normal; } ::-moz-selection { - color: var(--white); - background: var(--dark-green); + color: var(--white); + background: var(--dark-green); } ::selection { - color: var(--white); - background: var(--dark-green); + color: var(--white); + background: var(--dark-green); } /* - LISTS - */ ul.caret li:before, ul.caret summary:before { - content: var(--fa-caret); - font-family: "Font Awesome 5 Free", "FontAwesome"; - font-weight: 900; - margin-right: 5px; + content: var(--fa-caret); + font-family: "Font Awesome 5 Free", "FontAwesome"; + font-weight: 900; + margin-right: 5px; } ul.caret details > ul > li:before{ - content: var(--fa-angle-right); + content: var(--fa-angle-right); } ul.caret li, ul.caret details { - font-size: 20px; - margin-bottom: 9px; - list-style: none; + font-size: 20px; + margin-bottom: 9px; + list-style: none; } /* - BUTTONS - */ .btn { - padding: 9px var(--x3-padding); - color: var(--white); - background: var(--dark-green); - font-size: 20px; - line-height: 32px; - text-decoration: none; + padding: 9px var(--x3-padding); + color: var(--white); + background: var(--dark-green); + font-size: 20px; + line-height: 32px; + text-decoration: none; } .btn[icon] { - padding: 9px 20px 9px var(--x3-padding); + padding: 9px 20px 9px var(--x3-padding); } .btn[icon="reversed"] { - padding: 9px var(--x3-padding) 9px 20px; + padding: 9px var(--x3-padding) 9px 20px; } .btn:hover, .drop-btn.drop-down .btn { - background: var(--light-green); + background: var(--light-green); } .btn i:after { - content: var(--la-arrow); - font-size: 32px; - margin-left: 45px; - font-family: "Line Awesome Free"; - font-weight: 900; - color: white; - vertical-align: bottom; - font-style: normal; - margin-right: 10px; - transition: margin 0.1s linear, transform 0.05s linear; - display:inline-block; + content: var(--la-arrow); + font-size: 32px; + margin-left: 45px; + font-family: "Line Awesome Free"; + font-weight: 900; + color: white; + vertical-align: bottom; + font-style: normal; + margin-right: 10px; + transition: margin 0.1s linear, transform 0.05s linear; + display:inline-block; } .btn i[reversed]:after { - margin-right: 45px; - margin-left: 10px; - content: var(--la-arrow-rev); + margin-right: 45px; + margin-left: 10px; + content: var(--la-arrow-rev); } .btn:hover i:after, .drop-btn.drop-down .btn i:after { - margin-left: 55px; - margin-right: 0px; + margin-left: 55px; + margin-right: 0px; } .btn:hover i[reversed]:after{ - margin-right: 55px; - margin-left: 0px; + margin-right: 55px; + margin-left: 0px; } .drop-btn.drop-down .btn i:after { transform: rotate(90deg); } .big-btn { - padding: 9px var(--x3-padding); - color: var(--white); - background: var(--dark-green); - font-size: 30px; - line-height: 42px; - text-decoration: none; + padding: 9px var(--x3-padding); + color: var(--white); + background: var(--dark-green); + font-size: 30px; + line-height: 42px; + text-decoration: none; } .big-btn i:after { - font-size: 45px; + font-size: 45px; } .border-btn { - background: var(--mid-green); - border: 2px solid white; + background: var(--mid-green); + border: 2px solid white; } .border-btn i:after { - margin-left: 25px; + margin-left: 25px; } .border-btn:hover i:after, .drop-btn.drop-down .border-btn i:after { - margin-left: 35px; + margin-left: 35px; } .ghost-btn { - background: transparent; - border: 2px solid white; + background: transparent; + border: 2px solid white; } .ghost-btn:hover { - background: var(--white); - color: var(--black); + background: var(--white); + color: var(--black); } .ghost-btn:hover i:after, .drop-btn.drop-down .ghost-btn i:after { - color: var(--black); + color: var(--black); } /* HEADER */ header { - width: var(--usable-area); - padding: var(--unusable-padding); - padding-bottom: calc(var(--unusable-padding) * 2); - display: grid; - grid-template-columns: 1fr 1fr; - grid-template-rows: 1fr; - grid-template-areas: "lead video"; - align-items: center; - column-gap: var(--grid-gap); - background-image: linear-gradient(to top, var(--white) 0%, transparent 5%), url("/theme/images/header-pattern.png"); - background-size: cover, contain; - background-attachment: scroll, fixed; - background-repeat: no-repeat; - background-position: bottom right; + width: var(--usable-area); + padding: var(--unusable-padding); + padding-bottom: calc(var(--unusable-padding) * 2); + display: grid; + grid-template-columns: 1fr 1fr; + grid-template-rows: 1fr; + grid-template-areas: "lead video"; + align-items: center; + column-gap: var(--grid-gap); + background-image: linear-gradient(to top, var(--white) 0%, transparent 5%), url("/theme/images/header-pattern.png"); + background-size: cover, contain; + background-attachment: scroll, fixed; + background-repeat: no-repeat; + background-position: bottom right; } /* NAVIGATION */ #main-nav { - position: fixed; - z-index: 20; - width: var(--usable-area); - padding: calc(var(--x3-padding) - 9px) var(--unusable-padding); - background: var(--white); - display: flex; + position: fixed; + z-index: 20; + width: var(--usable-area); + padding: calc(var(--x3-padding) - 9px) var(--unusable-padding); + background: var(--white); + display: flex; } #main-nav ul.hidden-menu { - display: none; + display: none; } #main-nav img { - margin: calc(var(--x3-padding) * -1) 0; - margin-top: -21px; - height: 60px; - padding: 16px 0; + margin: calc(var(--x3-padding) * -1) 0; + margin-top: -21px; + height: 60px; + padding: 16px 0; } #main-nav > i { - display: none !important; + display: none !important; } #main-nav > ul { - margin-left: auto; + margin-left: auto; } #main-nav > ul li{ - display: inline-block; - margin: 0 7px; - color: var(--black); + display: inline-block; + margin: 0 7px; + color: var(--black); } #main-nav > ul:not(.hidden-menu) li:last-child{ - margin:0; + margin:0; } #main-nav > ul:not(.hidden-menu) li > a:not(.btn) { - text-decoration: none; - padding: 38px 8px 35px; + text-decoration: none; + padding: 38px 8px 35px; } #main-nav > ul li a { - text-decoration: none; + text-decoration: none; } #main-nav > ul:not(.hidden-menu) li > a.active { - border-bottom: var(--nav-border-bottom) solid var(--dark-green); - padding-bottom: 31px; - color: var(--dark-green); - font-weight: 500; + border-bottom: var(--nav-border-bottom) solid var(--dark-green); + padding-bottom: 31px; + color: var(--dark-green); + font-weight: 500; } #main-nav > ul.hidden-menu li > a.active { - color: var(--dark-green); - font-weight: 500; + color: var(--dark-green); + font-weight: 500; } #main-nav ul li > a:hover { - color: var(--dark-green); + color: var(--dark-green); } /* HEADER > LEAD */ .lead { - grid-area: lead; + grid-area: lead; } header .lead h1 { - font-family: "Source Sans Pro Black", "Source Sans Pro", sans-serif; - font-weight: 900; - font-size: 60px; - color: var(--dark-green); - margin-bottom: 40px; + font-family: "Source Sans Pro Black", "Source Sans Pro", sans-serif; + font-weight: 900; + font-size: 60px; + color: var(--dark-green); + margin-bottom: 40px; } header .lead ul { - margin-bottom: 30px; + margin-bottom: 30px; } header .lead ul li:before { - content: var(--la-check); - font-family: "Line Awesome Free"; - font-weight: 900; - margin-right: 7px; - font-size: 32px; + content: var(--la-check); + font-family: "Line Awesome Free"; + font-weight: 900; + margin-right: 7px; + font-size: 32px; } header .lead ul li { - font-size: 30px; - margin-bottom: 3px; - list-style: none; + font-size: 30px; + margin-bottom: 3px; + list-style: none; } /* HEADER > VIDEO */ header .video { - display: grid; - grid-template-columns: repeat(6, 1fr); - gap: var(--grid-gap); - grid-area: video; + display: grid; + grid-template-columns: repeat(6, 1fr); + gap: var(--grid-gap); + grid-area: video; } header .video .backplate { - background-color: var(--light-green); - grid-column: 3 / 6; - grid-row: 1 / 3; + background-color: var(--light-green); + grid-column: 3 / 6; + grid-row: 1 / 3; } header .video img { - grid-column: 2 / 6; - grid-row: 1; - margin-left: calc(var(--grid-gap) * -1); - margin-top: var(--grid-gap); - filter: var(--image-shadow); - width: 100%; + grid-column: 2 / 6; + grid-row: 1; + margin-left: calc(var(--grid-gap) * -1); + margin-top: var(--grid-gap); + filter: var(--image-shadow); + width: 100%; } header .video:after { - content: var(--la-play); - font-size: 64px; - font-family: "Line Awesome Free"; - font-weight: 900; - grid-row: 1; - grid-column: 2 / 6; - z-index: 5; - background: var(--light-gray); - border-radius: 50px; - align-self: center; - margin: var(--grid-gap) var(--grid-gap) 0 calc(var(--grid-gap) * -1); - justify-self: center; - color: var(--dark-green); - cursor: pointer; - pointer-events: none; + content: var(--la-play); + font-size: 64px; + font-family: "Line Awesome Free"; + font-weight: 900; + grid-row: 1; + grid-column: 2 / 6; + z-index: 5; + background: var(--light-gray); + border-radius: 50px; + align-self: center; + margin: var(--grid-gap) var(--grid-gap) 0 calc(var(--grid-gap) * -1); + justify-self: center; + color: var(--dark-green); + cursor: pointer; + pointer-events: none; } header .video a { - grid-column: 1 / 6; - justify-self: end; - grid-row: 2; - margin-bottom: var(--grid-gap); - margin-right: var(--grid-gap); + grid-column: 1 / 6; + justify-self: end; + grid-row: 2; + margin-bottom: var(--grid-gap); + margin-right: var(--grid-gap); } /* S FEATURES */ #features { - background-image: linear-gradient(to top, var(--dark-green), var(--dark-green) 50%, transparent 50%, transparent); - padding-top: 0; - margin-top: calc(var(--unusable-padding) * -1 - 10px); + background-image: linear-gradient(to top, var(--dark-green), var(--dark-green) 50%, transparent 50%, transparent); + padding-top: 0; + margin-top: calc(var(--unusable-padding) * -1 - 10px); } .feature-list div:nth-child(5):before { - content: ""; - position: absolute; - width: 100vw; - height: calc(var(--unusable-padding) * 2); - background-color: var(--dark-green); - margin: calc(var(--x3-padding) * -1 - 1px) calc(var(--unusable-padding) * -1 - var(--x3-padding) - 1px); - z-index: -100; + content: ""; + position: absolute; + width: 100vw; + height: calc(var(--unusable-padding) * 2); + background-color: var(--dark-green); + margin: calc(var(--x3-padding) * -1 - 1px) calc(var(--unusable-padding) * -1 - var(--x3-padding) - 1px); + z-index: -100; } .feature-list { - grid-column: 1 / 3; - display: grid; - grid-template-columns: repeat(4, 1fr); + grid-column: 1 / 3; + display: grid; + grid-template-columns: repeat(4, 1fr); } .feature-list div { - padding: var(--x3-padding); - border: 1px solid var(--trans-green); - background: var(--white); + padding: var(--x3-padding); + border: 1px solid var(--trans-green); + background: var(--white); } .feature-list > a { - grid-column: 1 / 5; - justify-self: end; - margin-right: var(--grid-gap); - margin-top: -20px; - filter: var(--light-shadow); + grid-column: 1 / 5; + justify-self: end; + margin-right: var(--grid-gap); + margin-top: -20px; + filter: var(--light-shadow); } /* S OUR MISSION*/ #mission { - grid-template-columns: repeat(6, 1fr); - padding: 0 var(--unusable-padding) var(--unusable-padding); - background: var(--dark-green); + grid-template-columns: repeat(6, 1fr); + padding: 0 var(--unusable-padding) var(--unusable-padding); + background: var(--dark-green); } #mission p { - color: white; - font-family: "Source Sans Pro Bold", "Source Sans Pro", sans-serif; - font-weight: 600; - font-size: 40px; - font-style: oblique; - text-align: center; - grid-column: 2/6; - padding: 0 var(--x3-padding); + color: white; + font-family: "Source Sans Pro Bold", "Source Sans Pro", sans-serif; + font-weight: 600; + font-size: 40px; + font-style: oblique; + text-align: center; + grid-column: 2/6; + padding: 0 var(--x3-padding); } /* S QUICK LINKS */ #quick-links { - background-image: url(/theme/images/kiwi-triangle.svg); - background-size: 100%; - background-repeat: no-repeat; - grid-template-columns: repeat(4, 1fr); - gap: var(--grid-gap); - padding: var(--x3-padding) var(--unusable-padding); + background-image: url(/theme/images/kiwi-triangle.svg); + background-size: 100%; + background-repeat: no-repeat; + grid-template-columns: repeat(4, 1fr); + gap: var(--grid-gap); + padding: var(--x3-padding) var(--unusable-padding); } #quick-links div > *{ - float:left; - grid-column: 1 / 2; + float:left; + grid-column: 1 / 2; } #quick-links div { - background: var(--white); - filter: var(--light-shadow); - padding: 30px; - display: flex; - flex-direction: column; - display: grid; - grid-template-columns: auto 1fr; - grid-template-rows: auto 1fr; - gap: 10px; - cursor: pointer; - grid-template-areas: - "icon title" - "icon description"; + background: var(--white); + filter: var(--light-shadow); + padding: 30px; + display: flex; + flex-direction: column; + display: grid; + grid-template-columns: auto 1fr; + grid-template-rows: auto 1fr; + gap: 10px; + cursor: pointer; + grid-template-areas: + "icon title" + "icon description"; } #quick-links a { - text-decoration: none; + text-decoration: none; } #quick-links div:hover { - color: var(--dark-green); + color: var(--dark-green); } #quick-links div i, blockquote i { - grid-area: icon; - align-self: start; - font-size: 64px; - width: fit-content; + grid-area: icon; + align-self: start; + font-size: 64px; + width: fit-content; } .quick-links div h3 { - font-family: "Rubik Bold", "Rubik", sans-serif; - font-weight: bold; - font-size: 25px; - grid-area: title; + font-family: "Rubik Bold", "Rubik", sans-serif; + font-weight: bold; + font-size: 25px; + grid-area: title; } .quick-links div p, blockquote p.quote { - font-size: 20px; - grid-area: description; + font-size: 20px; + grid-area: description; } /* S PRICING */ #pricing { - grid-template-columns: repeat(4, 1fr); - column-gap: var(--grid-gap); - row-gap: calc(var(--x3-padding) * 2); - background-image: url(/theme/images/kiwi-triangle-mg.svg), url(/theme/images/header-pattern.png); - background-size: 100% 300px, contain; - background-repeat: no-repeat; - background-position: bottom left, bottom right; + grid-template-columns: repeat(4, 1fr); + column-gap: var(--grid-gap); + row-gap: calc(var(--x3-padding) * 2); + background-image: url(/theme/images/kiwi-triangle-mg.svg), url(/theme/images/header-pattern.png); + background-size: 100% 300px, contain; + background-repeat: no-repeat; + background-position: bottom left, bottom right; } #pricing h1 { - grid-column: 1/5; + grid-column: 1/5; } #pricing .plan, #pricing .plans-modal { - background: var(--white); - filter: var(--lower-shadow); - align-self: start; - padding: var(--x3-padding); + background: var(--white); + filter: var(--lower-shadow); + align-self: start; + padding: var(--x3-padding); } #pricing .plan h3, #pricing .plans-modal h3 { - padding: var(--x3-padding); - margin: calc(var(--x3-padding) * -1) calc(var(--x3-padding) * -1) var(--x3-padding); - border-bottom: 2px solid var(--trans-green); - color: var(--dark-green); - display: flex; - font-size: 25px; + padding: var(--x3-padding); + margin: calc(var(--x3-padding) * -1) calc(var(--x3-padding) * -1) var(--x3-padding); + border-bottom: 2px solid var(--trans-green); + color: var(--dark-green); + display: flex; + font-size: 25px; } #pricing .plan.prefered h3 { - background-color: var(--dark-green); - color: var(--white); + background-color: var(--dark-green); + color: var(--white); } #pricing .plan > a { - display: block; - text-align: center; - font-size: 20px; - padding: 16px var(--x3-padding); - margin: var(--x3-padding) calc(var(--x3-padding) * -1) calc(var(--x3-padding) * -1); - background-color: var(--dark-green); - color: var(--white); - font-weight: 500; - text-decoration: none; + display: block; + text-align: center; + font-size: 20px; + padding: 16px var(--x3-padding); + margin: var(--x3-padding) calc(var(--x3-padding) * -1) calc(var(--x3-padding) * -1); + background-color: var(--dark-green); + color: var(--white); + font-weight: 500; + text-decoration: none; } #pricing .plan > a:hover, #pricing .plans-modal > a:hover { - background: var(--light-green); + background: var(--light-green); } #features a:not(.btn), #pricing .plan ul a, #pricing .plans-modal ul a { - color: var(--dark-green); + color: var(--dark-green); } #features a:not(.btn):hover, #pricing .plan ul a:hover, #pricing .plans-modal ul a:hover { - color: var(--light-green); + color: var(--light-green); } summary, #plans-modal h3{ - cursor: pointer; + cursor: pointer; } /* S PRICING > Details */ summary::-webkit-details-marker{ - display: none; + display: none; } summary::marker{ - display:none; + display:none; } ::-webkit-details-marker { display:none; } summary{ - list-style-image: none; + list-style-image: none; } #pricing summary:after { - height: 20px; - width: 20px; - float: right; - content: var(--fa-info); - font-family: "Font Awesome 5 Free", "FontAwesome"; - font-weight: 900; - color: var(--dark-green); + height: 20px; + width: 20px; + float: right; + content: var(--fa-info); + font-family: "Font Awesome 5 Free", "FontAwesome"; + font-weight: 900; + color: var(--dark-green); } #pricing details[open] summary:after { - color: var(--trans-green); + color: var(--trans-green); } #pricing details[open] summary:before { - content: var(--fa-caret-down); + content: var(--fa-caret-down); } #pricing details li { - padding-left: var(--x2-padding); + padding-left: var(--x2-padding); } #pricing details li > ul > li, body.page section ul > li > ul > li{ - padding-left: var(--x2-padding); - font-style: oblique; + padding-left: var(--x2-padding); + font-style: oblique; } details:focus, summary:focus { - outline: none; + outline: none; } /* S PRICING > Modal */ #pricing .plans-modal { - grid-column: 1/3; + grid-column: 1/3; } #pricing .plans-modal h3 { - margin: calc(var(--x3-padding) * -1); + margin: calc(var(--x3-padding) * -1); } #pricing .plans-modal h3:after { - content: "+"; - margin-left: auto; - text-align: right; - align-self: center; + content: "+"; + margin-left: auto; + text-align: right; + align-self: center; } #pricing .plans-modal div { - display: none; + display: none; } #pricing .plans-modal.show-modal div { - display: block; - margin: var(--x3-padding) calc(var(--x3-padding) * -1) calc(var(--x3-padding) * -1) calc(var(--x3-padding) * -1); - padding: var(--x3-padding); + display: block; + margin: var(--x3-padding) calc(var(--x3-padding) * -1) calc(var(--x3-padding) * -1) calc(var(--x3-padding) * -1); + padding: var(--x3-padding); } #pricing .plans-modal.show-modal h3:after { - content: "-"; + content: "-"; } /* S SCREENS */ #screens { - color: white; - background: var(--mid-green); - padding: var(--x3-padding) var(--unusable-padding); + color: white; + background: var(--mid-green); + padding: var(--x3-padding) var(--unusable-padding); } #screens h1 { - color: white; - margin-bottom: var(--x3-padding); - display: flex; + color: white; + margin-bottom: var(--x3-padding); + display: flex; } #screens h1 span { - margin-left: auto; - bottom: -10px; - position: relative; + margin-left: auto; + bottom: -10px; + position: relative; } #screens h1 span i { - cursor: pointer; + cursor: pointer; } #screens h3 { - font-family: "Rubik Bold", "Rubik", sans-serif; - font-weight: bold; - font-size: 25px; - margin: var(--x3-padding) 0; + font-family: "Rubik Bold", "Rubik", sans-serif; + font-weight: bold; + font-size: 25px; + margin: var(--x3-padding) 0; } #screens p { - font-size: 20px; + font-size: 20px; } /* S SCREENS > SLIDER CSS */ .tns-controls, .tns-nav { - display: none; + display: none; } #screens img { - max-width: 100%; - filter: var(--lower-shadow); + max-width: 100%; + filter: var(--lower-shadow); } .tns-outer { - margin: 0 calc(var(--unusable-padding) * -1); - width: 100vw; + margin: 0 calc(var(--unusable-padding) * -1); + width: 100vw; } .tns-inner { - margin: 0 var(--unusable-padding) !important; - padding-top: var(--x3-padding); + margin: 0 var(--unusable-padding) !important; + padding-top: var(--x3-padding); } .tns-slide-active, .tns-slide-active + .tns-slide-active + .tns-slide-active, .tns-slide-active + .tns-slide-active + .tns-slide-active + .tns-slide-active, .tns-slide-active + .tns-slide-active + .tns-slide-active + .tns-slide-active + .tns-slide-active { - width: calc((var(--usable-area)-11 * var(--grid-gap)) / 12 * 3) !important; - /* overwrite default */ + width: calc((var(--usable-area)-11 * var(--grid-gap)) / 12 * 3) !important; + /* overwrite default */ } .tns-slide-active + .tns-slide-active { - width: calc((var(--usable-area)-11 * var(--grid-gap)) / 12 * 5) !important; + width: calc((var(--usable-area)-11 * var(--grid-gap)) / 12 * 5) !important; } .tns-slide-active p, .tns-slide-active + .tns-slide-active + .tns-slide-active p, .tns-slide-active + .tns-slide-active + .tns-slide-active + .tns-slide-active p, .tns-slide-active + .tns-slide-active + .tns-slide-active + .tns-slide-active + .tns-slide-active p { - display: none; + display: none; } .tns-slide-active + .tns-slide-active p { - display: block; + display: block; } /* S TESTIMONIALS extends S QUICK LINKS */ #testimonials { - background-image: url(/theme/images/kiwi-triangle-mg-bottom.svg); - background-size: 100%; - background-repeat: no-repeat; - grid-template-columns: repeat(4, 1fr); - gap: var(--grid-gap); - padding: var(--x3-padding) var(--unusable-padding); + background-image: url(/theme/images/kiwi-triangle-mg-bottom.svg); + background-size: 100%; + background-repeat: no-repeat; + grid-template-columns: repeat(4, 1fr); + gap: var(--grid-gap); + padding: var(--x3-padding) var(--unusable-padding); } body.page_home blockquote { - background: var(--white); - filter: var(--light-shadow); - padding: var(--x3-padding) var(--x3-padding) var(--x3-padding) var(--x2-padding); - display: grid; - grid-template-columns: auto 1fr; - grid-template-rows: 1fr auto; - row-gap: var(--x1-padding); - column-gap: var(--x2-padding); - grid-template-areas: - "icon description" - "icon author"; + background: var(--white); + filter: var(--light-shadow); + padding: var(--x3-padding) var(--x3-padding) var(--x3-padding) var(--x2-padding); + display: grid; + grid-template-columns: auto 1fr; + grid-template-rows: 1fr auto; + row-gap: var(--x1-padding); + column-gap: var(--x2-padding); + grid-template-areas: + "icon description" + "icon author"; } blockquote .author { - font-family: "Rubik Bold", "Rubik", sans-serif; - grid-area: author; - text-decoration: none; - font-size: 20px; + font-family: "Rubik Bold", "Rubik", sans-serif; + grid-area: author; + text-decoration: none; + font-size: 20px; } blockquote .author span { - font-weight: bold; - display: block; + font-weight: bold; + display: block; } /* S TRUSTED BY @@ -751,19 +751,19 @@ blockquote .author span { #trusted-by, #seen-at, #awards { - display: grid; - grid-template-columns: repeat(6, 1fr); - gap: var(--grid-gap); - text-align: center; - align-items: center; - padding: calc(var(--x3-padding) * 2) var(--unusable-padding); + display: grid; + grid-template-columns: repeat(6, 1fr); + gap: var(--grid-gap); + text-align: center; + align-items: center; + padding: calc(var(--x3-padding) * 2) var(--unusable-padding); } #trusted-by h1, #seen-at h1, #awards h1{ - grid-column: 1/7; - text-align: left; - margin-bottom: var(--x3-padding); + grid-column: 1/7; + text-align: left; + margin-bottom: var(--x3-padding); } #trusted-by a img, @@ -772,438 +772,439 @@ blockquote .author span { #trusted-by img, #seen-at img, #awards img { - max-width: 100%; - justify-self: center; + max-width: 100%; + justify-self: center; } #trusted-by a, #seen-at a, #awards a{ - position: relative; + position: relative; } #trusted-by a:hover, #awards a:hover{ - background-color:var(--light-gray); + background-color:var(--light-gray); } #seen-at a:hover{ - background-color:var(--white); + background-color:var(--white); } a[iclink]:after, a[icvideo]:after{ - font-family: "Font Awesome 5 Free", "FontAwesome"; - font-weight: 900; - background: var(--dark-green); - color: var(--white); - cursor: pointer; - padding: 7px; - bottom: 0; - right: 0; - position: absolute; - pointer-events: none; + font-family: "Font Awesome 5 Free", "FontAwesome"; + font-weight: 900; + background: var(--dark-green); + color: var(--white); + cursor: pointer; + padding: 7px; + bottom: 0; + right: 0; + position: absolute; + pointer-events: none; } a[iclink]:after{ - content: var(--fa-link); + content: var(--fa-link); } a[icvideo]:after { - content: var(--fa-video); + content: var(--fa-video); } #seen-at { - background: var(--light-gray); + background: var(--light-gray); } /* S CALL TO ACTION extends SCREENS*/ #cta { - padding: calc(var(--x3-padding) * 1) var(--unusable-padding); - background: var(--dark-green); - grid-template-areas: - "cta-title cta-btn" - "cta-desc cta-btn"; + padding: calc(var(--x3-padding) * 1) var(--unusable-padding); + background: var(--dark-green); + grid-template-areas: + "cta-title cta-btn" + "cta-desc cta-btn"; } #cta h1 { - color: white; - margin-bottom: var(--x1-padding); - grid-area: cta-title; + color: white; + margin-bottom: var(--x1-padding); + grid-area: cta-title; } #cta h3 { - font-family: "Rubik Bold", "Rubik", sans-serif; - font-weight: bold; - font-size: 25px; - color: rgba(255, 255, 255, 0.7); - grid-area: cta-desc; + font-family: "Rubik Bold", "Rubik", sans-serif; + font-weight: bold; + font-size: 25px; + color: rgba(255, 255, 255, 0.7); + grid-area: cta-desc; } #cta .drop-btn { - grid-area: cta-btn; - align-self: center; - justify-self: end; + grid-area: cta-btn; + align-self: center; + justify-self: end; } /* FOOTER */ footer { - padding: calc(var(--x3-padding) + var(--x2-padding)) var(--unusable-padding); - background-color: var(--brown); - color: white; - font-size: 20px; - display: grid; - justify-items: start; - gap: var(--grid-gap); - grid-template-columns: 5fr 2fr 2fr 3fr; - grid-template-areas: - "logo fl-tw fl-yt mail" - "legal fl-gh fl-fb mail"; + padding: calc(var(--x3-padding) + var(--x2-padding)) var(--unusable-padding); + background-color: var(--brown); + color: white; + font-size: 20px; + display: grid; + justify-items: start; + gap: var(--grid-gap); + grid-template-columns: 5fr 2fr 2fr 3fr; + grid-template-areas: + "logo fl-tw fl-yt mail" + "legal fl-gh fl-fb mail"; } footer h3 { - font-family: "Rubik Bold", "Rubik", sans-serif; - font-weight: bold; - font-size: 25px; - grid-area: title; + font-family: "Rubik Bold", "Rubik", sans-serif; + font-weight: bold; + font-size: 25px; + grid-area: title; } footer img { - grid-area: logo; - max-width: 70%; - align-self: center; + grid-area: logo; + max-width: 70%; + align-self: center; } footer .legal { - grid-area: legal; + grid-area: legal; } footer .footer-block:not(.mail):hover a { - color: var(--light-green); + color: var(--light-green); } footer .footer-block a:hover { - color: var(--dark-green); + color: var(--dark-green); } footer .legal a { - color: var(--light-green); + color: var(--light-green); } footer .legal a:hover { - color: var(--dark-green); + color: var(--dark-green); } footer .fl-tw { - grid-area: fl-tw; + grid-area: fl-tw; } footer .fl-gh { - grid-area: fl-gh; + grid-area: fl-gh; } footer .fl-yt { - grid-area: fl-yt; + grid-area: fl-yt; } footer .fl-fb { - grid-area: fl-fb; + grid-area: fl-fb; } footer .footer-block { - display: grid; - gap: var(--x1-padding); - align-content: start; - grid-template-areas: - "icon title" - "icon link"; + display: grid; + gap: var(--x1-padding); + align-content: start; + grid-template-areas: + "icon title" + "icon link"; } footer .footer-block a { - grid-area: link; + grid-area: link; } footer .footer-block p { - grid-area: desc; + grid-area: desc; } footer .footer-block i { - grid-area: icon; - font-size: 64px; - font-family: "Line Awesome Free"; - font-weight: 400; - color: white; - font-style: normal; + grid-area: icon; + font-size: 64px; + font-family: "Line Awesome Free"; + font-weight: 400; + color: white; + font-style: normal; } footer .fl-tw i:before { - font-family: "Line Awesome Brands"; - content: var(--la-twitter); + font-family: "Line Awesome Brands"; + content: var(--la-twitter); } footer .fl-gh i:before { - font-family: "Line Awesome Brands"; - content: var(--la-github); + font-family: "Line Awesome Brands"; + content: var(--la-github); } footer .fl-yt i:before { - font-family: "Line Awesome Brands"; - content: var(--la-youtube); + font-family: "Line Awesome Brands"; + content: var(--la-youtube); } footer .fl-fb i:before { - font-family: "Line Awesome Brands"; - content: var(--la-facebook); + font-family: "Line Awesome Brands"; + content: var(--la-facebook); } footer .mail i:before { - content: var(--la-mail); + content: var(--la-mail); } footer .mail a { - justify-self: start; + justify-self: start; } footer .mail { - grid-area: mail; - grid-template-areas: - "icon title" - "icon desc" - "icon link"; + grid-area: mail; + grid-template-areas: + "icon title" + "icon desc" + "icon link"; } /* F VIDEO OVERLAY */ #vp-overlay { - display: none; - z-index: 25; - top: 0; - bottom: 0; - left: 0; - right: 0; - position: fixed; - padding: var(--x3-padding) var(--unusable-padding); - background-color: rgba(0, 0, 0, 0.8); - align-items: center; - justify-items: center; - grid-template-areas: "video"; + display: none; + z-index: 25; + top: 0; + bottom: 0; + left: 0; + right: 0; + position: fixed; + padding: var(--x3-padding) var(--unusable-padding); + background-color: rgba(0, 0, 0, 0.8); + align-items: center; + justify-items: center; + grid-template-areas: "video"; } #vp-overlay.vp-visible { - display: grid; + display: grid; } #vp-overlay i { - color: white; - font-size: 20px; - justify-self: end; - align-self: start; - grid-area: video; - cursor: pointer; + color: white; + font-size: 20px; + justify-self: end; + align-self: start; + grid-area: video; + cursor: pointer; } #vp-overlay i:before { - content: var(--la-close); - font-size: 32px; - font-family: "Line Awesome Free"; - font-weight: 900; + content: var(--la-close); + font-size: 32px; + font-family: "Line Awesome Free"; + font-weight: 900; } #vp-frame { - height: 700px; - max-height:calc(100vh - 2 * var(--x3-padding)); - width: 1120px; - max-width: calc(100vw - 2 * var(--unusable-padding)); - grid-area: video; + height: 700px; + max-height:calc(100vh - 2 * var(--x3-padding)); + width: 1120px; + max-width: calc(100vw - 2 * var(--unusable-padding)); + grid-area: video; } .green { - color: var(--dark-green); + color: var(--dark-green); } .yellow { - color: #ffcc00; + color: #ffcc00; } .red { - color: #cc0000; + color: #cc0000; } /* INNER PAGE STYLES */ body.page section{ - gap: var(--x3-padding); - padding-top: 150px; - background-image: linear-gradient(to top, var(--white), transparent), url(/theme/images/pattern-v2.png); - background-size: auto 500px, auto 500px; - background-position: top right; - background-repeat: no-repeat; + gap: var(--x3-padding); + padding-top: 150px; + background-image: linear-gradient(to top, var(--white), transparent), url(/theme/images/pattern-v2.png); + background-size: auto 500px, auto 500px; + background-position: top right; + background-repeat: no-repeat; } body.page section p, body.page section li, body.page section pre{ - font-size:20px; + font-size:20px; } body.page section a:not(.btn):not(.bio-link), section#blog-list a:not(.btn):not(.bio-link), section#blog-article a:not(.btn):not(.bio-link){ - color:var(--dark-green); + color:var(--dark-green); } body.page section a:not(.btn):not(.bio-link):hover, section#blog-list a:not(.btn):not(.bio-link):hover, section#blog-article a:not(.btn):not(.bio-link):hover{ - color:var(--light-green); + color:var(--light-green); } /* TEAM v1 */ img.rounded { - float: left; - margin-left: 0; - margin-right: 1.5rem; - margin-bottom: 0.2rem; - border: solid 0.2em var(--black); - border-radius: 100%; + float: left; + margin-left: 0; + margin-right: 1.5rem; + margin-bottom: 0.2rem; + border: solid 0.2em var(--black); + border-radius: 100%; } .member-bio { - height: auto; - width: 100%; - float: left; + height: auto; + width: 100%; + float: left; } div.drop-btn:not(#nav-drop){ - display:inline; - position: relative; + display:inline; + position: relative; } #nav-drop.drop-btn{ - display:inline; + display:inline; } div.drop-cnt > a{ - color: var(--white); - background-color:var(--light-green); - padding: 12px 16px; - text-decoration: none; - display: block; - font-size:20px; + color: var(--white); + background-color:var(--light-green); + padding: 12px 16px; + text-decoration: none; + display: block; + font-size:20px; } div.drop-cnt > a:hover{ - background-color:var(--dark-green); - color:var(--white); + background-color:var(--dark-green); + color:var(--white); } div.drop-cnt{ - display: none; - position: absolute; - background-color: var(--light-green); - min-width: 160px; - filter: var(--light-shadow); - /* margin-top: 6px; */ - right: 0; + display: none; + position: absolute; + background-color: var(--light-green); + min-width: 160px; + filter: var(--light-shadow); + /* margin-top: 6px; */ + right: 0; } #nav-drop.drop-btn.drop-down .drop-cnt{ - right: var(--unusable-padding); + right: var(--unusable-padding); } div.drop-btn.drop-down div.drop-cnt, div.drop-btn:hover div.drop-cnt{ - display:block; - width: intrinsic; /* Safari/WebKit uses a non-standard name */ - width: -moz-max-content; /* Firefox/Gecko */ - width: -webkit-max-content; /* Chrome */ - width: max-content; + display:block; + width: intrinsic; /* Safari/WebKit uses a non-standard name */ + width: -moz-max-content; /* Firefox/Gecko */ + width: -webkit-max-content; /* Chrome */ + width: max-content; } .drop-btn > .btn{ - display:inline-block; + display:inline-block; } /* TEAM */ .member-bio > strong{ font-size: 25px; } .member-bio > em{ - font-size: 20px; + font-size: 20px; } .member-bio a.bio-link{ - padding: 3px 5px; - display: inline-block; - background: var(--dark-green); - color: white; - font-size: 25px; - margin-top: var(--x1-padding); - margin-right: var(--x1-padding); + padding: 3px 5px; + display: inline-block; + background: var(--dark-green); + color: white; + font-size: 25px; + margin-top: var(--x1-padding); + margin-right: var(--x1-padding); } .member-bio a.bio-link:hover{ - background: var(--light-green); - color: white; + background: var(--light-green); + color: white; } /* BLOG > S BLOGLIST */ #blog-list, #blog-article{ - gap: var(--x3-padding); - padding-top: 150px; - background-image: linear-gradient(to top, var(--white), transparent), url(/theme/images/pattern-v2.png); - background-size: auto 500px, auto 500px; - background-position: top right; - background-repeat: no-repeat; + gap: var(--x3-padding); + padding-top: 150px; + background-image: linear-gradient(to top, var(--white), transparent), url(/theme/images/pattern-v2.png); + background-size: auto 500px, auto 500px; + background-position: top right; + background-repeat: no-repeat; } #blog-list article.blog-list, #blog-article article.content{ - display: grid; - gap: var(--x3-padding); - max-width: 1000px; - width: 86vw; - border-bottom: 2px solid var(--trans-green); + display: grid; + gap: var(--x3-padding); + max-width: 1000px; + width: 86vw; + border-bottom: 2px solid var(--trans-green); } #blog-article, #blog-article article.content{ - gap:unset; + gap:unset; } #blog-list article.blog-list h1{ - font-size:30px; + font-size:30px; } #blog-list article.blog-list h2{ - font-size:25px; + font-size:25px; } #blog-list article.blog-list h3{ - font-size:20px; + font-size:20px; } #blog-list article.blog-list .header h1{ - color:var(--dark-green); + color:var(--dark-green); } #blog-list article.blog-list .header .post-meta, #blog-article .post-meta{ - font-style: oblique; - opacity: .7; + font-style: oblique; + opacity: .7; } #blog-article .post-meta{ - margin-top:var(--x1-padding); + margin-top:var(--x1-padding); } #blog-list article.blog-list .content, #blog-article article.content{ - font-size:20px; - line-height: 1.6; + font-size:20px; + line-height: 1.6; } #blog-list article.blog-list .content *, #blog-article article.content *{ - margin-bottom:var(--x1-padding); - max-width: 86vw; - overflow-wrap: break-word; + margin-bottom:var(--x1-padding); + max-width: 86vw; + overflow-wrap: break-word; } #blog-list article.blog-list .content img, #blog-article article.content img{ - max-width: 100%; + max-width: 100%; } #blog-list article.blog-list .content pre, #blog-article article.content pre{ - font-family: "Source Code Pro", monospace; - overflow: scroll; - width: fit-content; - max-width: 86vw; - background: var(--light-gray); + font-family: "Source Code Pro", monospace; + overflow: scroll; + width: fit-content; + max-width: 86vw; + background: var(--light-gray); } #blog-list article.blog-list .content a, #blog-article article.content a{ - overflow-wrap: anywhere; - text-overflow: ellipsis; + overflow-wrap: anywhere; + text-overflow: ellipsis; } #blog-list article.blog-list .content .section, #blog-article article.content .section{ - max-width: 100%; - width: 86vw; + max-width: 100%; + width: 86vw; } #blog-list article.blog-list .content ul li ul li, #blog-article article.content ul li ul li{ - padding-left:var(--x2-padding); + padding-left:var(--x2-padding); } #blog-list article.blog-list .content ul li p, #blog-article article.content ul li p{ - display:inline; + display:inline; } #blog-article h2.top-subheader{ - font-size: 30px; - color:var(--dark-green); + font-size: 30px; + color:var(--dark-green); } #blog-list .content h1, #blog-article h1, #blog-list .content h2, #blog-article h2, #blog-list .content h3, #blog-article h3, #blog-list .content h4, #blog-article h4, #blog-list .content h5, #blog-article h5{ - margin-top: var(--x2-padding); + margin-top: var(--x2-padding); } #blog-article article.content{ - margin-top:var(--x3-padding); + margin-top:var(--x3-padding); } #pagination{ - padding: var(--x3-padding) 0 0; - display: flex; - justify-content: space-between; - align-items: center; + padding: var(--x3-padding) 0 0; + display: flex; + justify-content: space-between; + align-items: center; } + \ No newline at end of file From 78e67ce8c7b8fa51e01db0cede1664c4d8a0c8cb Mon Sep 17 00:00:00 2001 From: Emil Totev Date: Tue, 11 Aug 2020 12:54:40 +0300 Subject: [PATCH 6/6] Fixed spacing issues. --- theme/static/style/style.css | 102 +++++++++++++++++------------------ 1 file changed, 51 insertions(+), 51 deletions(-) diff --git a/theme/static/style/style.css b/theme/static/style/style.css index a7c0aa8c..03bea1a7 100644 --- a/theme/static/style/style.css +++ b/theme/static/style/style.css @@ -67,9 +67,9 @@ /* COMMON */ body{ - display: flex; - flex-direction: column; - place-content: start space-between; + display: flex; + flex-direction: column; + place-content: start space-between; height: 100vh; overflow-x: hidden; scroll-behavior: smooth; @@ -82,11 +82,11 @@ footer { } section#blog-article { - padding-bottom: calc(var(--unusable-padding) * 0.25); + padding-bottom: calc(var(--unusable-padding) * 0.25); } section.after-content { - padding-bottom: 0; - padding-top:0; + padding-bottom: 0; + padding-top:0; } h3 { @@ -121,8 +121,8 @@ p > code{ } pre > code { - border: none; - padding: 0; + border: none; + padding: 0; display:inline; } @@ -469,7 +469,7 @@ header .video a { filter: var(--light-shadow); padding: 30px; display: flex; - flex-direction: column; + flex-direction: column; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto 1fr; @@ -791,16 +791,16 @@ blockquote .author span { } a[iclink]:after, a[icvideo]:after{ - font-family: "Font Awesome 5 Free", "FontAwesome"; - font-weight: 900; - background: var(--dark-green); - color: var(--white); - cursor: pointer; - padding: 7px; - bottom: 0; - right: 0; - position: absolute; - pointer-events: none; + font-family: "Font Awesome 5 Free", "FontAwesome"; + font-weight: 900; + background: var(--dark-green); + color: var(--white); + cursor: pointer; + padding: 7px; + bottom: 0; + right: 0; + position: absolute; + pointer-events: none; } a[iclink]:after{ @@ -1011,12 +1011,12 @@ footer .mail { /* INNER PAGE STYLES */ body.page section{ - gap: var(--x3-padding); - padding-top: 150px; - background-image: linear-gradient(to top, var(--white), transparent), url(/theme/images/pattern-v2.png); - background-size: auto 500px, auto 500px; - background-position: top right; - background-repeat: no-repeat; + gap: var(--x3-padding); + padding-top: 150px; + background-image: linear-gradient(to top, var(--white), transparent), url(/theme/images/pattern-v2.png); + background-size: auto 500px, auto 500px; + background-position: top right; + background-repeat: no-repeat; } body.page section p, body.page section li, body.page section pre{ font-size:20px; @@ -1058,23 +1058,23 @@ div.drop-btn:not(#nav-drop){ } div.drop-cnt > a{ - color: var(--white); - background-color:var(--light-green); - padding: 12px 16px; - text-decoration: none; - display: block; - font-size:20px; + color: var(--white); + background-color:var(--light-green); + padding: 12px 16px; + text-decoration: none; + display: block; + font-size:20px; } div.drop-cnt > a:hover{ background-color:var(--dark-green); color:var(--white); } div.drop-cnt{ - display: none; - position: absolute; - background-color: var(--light-green); - min-width: 160px; - filter: var(--light-shadow); + display: none; + position: absolute; + background-color: var(--light-green); + min-width: 160px; + filter: var(--light-shadow); /* margin-top: 6px; */ right: 0; } @@ -1101,26 +1101,26 @@ font-size: 25px; } .member-bio a.bio-link{ - padding: 3px 5px; - display: inline-block; - background: var(--dark-green); - color: white; - font-size: 25px; - margin-top: var(--x1-padding); - margin-right: var(--x1-padding); + padding: 3px 5px; + display: inline-block; + background: var(--dark-green); + color: white; + font-size: 25px; + margin-top: var(--x1-padding); + margin-right: var(--x1-padding); } .member-bio a.bio-link:hover{ background: var(--light-green); - color: white; + color: white; } /* BLOG > S BLOGLIST */ #blog-list, #blog-article{ - gap: var(--x3-padding); - padding-top: 150px; - background-image: linear-gradient(to top, var(--white), transparent), url(/theme/images/pattern-v2.png); - background-size: auto 500px, auto 500px; - background-position: top right; - background-repeat: no-repeat; + gap: var(--x3-padding); + padding-top: 150px; + background-image: linear-gradient(to top, var(--white), transparent), url(/theme/images/pattern-v2.png); + background-size: auto 500px, auto 500px; + background-position: top right; + background-repeat: no-repeat; } #blog-list article.blog-list, #blog-article article.content{ display: grid; @@ -1203,7 +1203,7 @@ font-size: 25px; } #pagination{ padding: var(--x3-padding) 0 0; - display: flex; + display: flex; justify-content: space-between; align-items: center; }