├── site ├── blog │ ├── blog.json │ ├── index.md │ ├── post-1 │ │ └── index.md │ ├── post-2 │ │ └── index.md │ └── post-3 │ │ └── index.md ├── globals │ ├── helpers.js │ └── site.json ├── includes │ ├── components │ │ ├── logo.njk │ │ ├── header.njk │ │ ├── footer.njk │ │ ├── social-icons.njk │ │ ├── nav.njk │ │ ├── social-meta.njk │ │ └── mobile-nav.njk │ └── layouts │ │ ├── home.njk │ │ ├── category.njk │ │ ├── page.njk │ │ ├── contact.njk │ │ ├── base.njk │ │ ├── blog.njk │ │ └── post.njk ├── robots.njk ├── contact │ └── index.md ├── categories │ ├── category │ │ └── index.md │ └── index.md ├── 404.md ├── sitemap.njk ├── index.md └── about │ └── index.md ├── .gitignore ├── resources ├── scss │ ├── 04-layout │ │ ├── _hero.scss │ │ ├── _footer.scss │ │ ├── _index.scss │ │ ├── _main.scss │ │ ├── _header.scss │ │ ├── _nav.scss │ │ ├── _mobile-nav.scss │ │ └── _site.scss │ ├── 06-pages │ │ ├── _home.scss │ │ ├── _index.scss │ │ ├── _post.scss │ │ └── _blog.scss │ ├── 02-utilities │ │ ├── _mixins.scss │ │ ├── _index.scss │ │ ├── _functions.scss │ │ ├── _utilities.scss │ │ └── _variables.scss │ ├── 03-base │ │ ├── _index.scss │ │ ├── _links.scss │ │ ├── _typography.scss │ │ └── _reset.scss │ ├── 01-config │ │ ├── _index.scss │ │ └── _config.scss │ ├── 05-components │ │ ├── _index.scss │ │ ├── _pagination.scss │ │ ├── _forms.scss │ │ ├── _social-icons.scss │ │ └── _buttons.scss │ └── main.scss └── js │ ├── main.js │ ├── modules │ ├── mobile-nav │ │ └── index.js │ └── lazyload │ │ └── index.js │ └── utilities │ ├── helpers │ └── index.js │ └── selectors │ └── index.js ├── favicon.png ├── images ├── meta │ ├── og.jpg │ ├── twitter.jpg │ └── apple-touch-icon.png ├── post-1.jpg ├── post-2.jpg ├── post-3.jpg └── icons │ └── icon-library.svg ├── utilities ├── filters │ ├── helpers.js │ └── dates.js └── transforms │ └── htmlminify.js ├── mix-manifest.json ├── netlify.toml ├── favicon.svg ├── package.json ├── webpack.mix.js ├── js ├── main.js └── main.min.js ├── eleventy.config.js ├── README.md └── css ├── main.css └── main.min.css /site/blog/blog.json: -------------------------------------------------------------------------------- 1 | { 2 | "layout": "post" 3 | } 4 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules/ 3 | dist/ 4 | package-lock.json 5 | -------------------------------------------------------------------------------- /resources/scss/04-layout/_hero.scss: -------------------------------------------------------------------------------- 1 | 2 | //========== Hero ==========// 3 | -------------------------------------------------------------------------------- /resources/scss/06-pages/_home.scss: -------------------------------------------------------------------------------- 1 | 2 | //========== Homepage ==========// 3 | -------------------------------------------------------------------------------- /favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/josephdyer/skeleventy/HEAD/favicon.png -------------------------------------------------------------------------------- /images/meta/og.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/josephdyer/skeleventy/HEAD/images/meta/og.jpg -------------------------------------------------------------------------------- /images/post-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/josephdyer/skeleventy/HEAD/images/post-1.jpg -------------------------------------------------------------------------------- /images/post-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/josephdyer/skeleventy/HEAD/images/post-2.jpg -------------------------------------------------------------------------------- /images/post-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/josephdyer/skeleventy/HEAD/images/post-3.jpg -------------------------------------------------------------------------------- /resources/scss/02-utilities/_mixins.scss: -------------------------------------------------------------------------------- 1 | 2 | //========== Mixins ==========// 3 | 4 | -------------------------------------------------------------------------------- /images/meta/twitter.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/josephdyer/skeleventy/HEAD/images/meta/twitter.jpg -------------------------------------------------------------------------------- /resources/scss/06-pages/_index.scss: -------------------------------------------------------------------------------- 1 | 2 | @import 'post'; 3 | @import 'blog'; 4 | @import 'home'; 5 | -------------------------------------------------------------------------------- /resources/scss/03-base/_index.scss: -------------------------------------------------------------------------------- 1 | 2 | @import 'reset'; 3 | @import 'typography'; 4 | @import 'links'; 5 | -------------------------------------------------------------------------------- /utilities/filters/helpers.js: -------------------------------------------------------------------------------- 1 | 2 | module.exports.spaceless = str => ( 3 | str.replace(/\s/g, '') 4 | ) 5 | -------------------------------------------------------------------------------- /resources/js/main.js: -------------------------------------------------------------------------------- 1 | 2 | // Import local modules 3 | import '@modules/mobile-nav' 4 | import '@modules/lazyload' 5 | -------------------------------------------------------------------------------- /resources/scss/01-config/_index.scss: -------------------------------------------------------------------------------- 1 | 2 | @import 'config'; 3 | @import '../../../node_modules/gorko/gorko.scss'; 4 | -------------------------------------------------------------------------------- /images/meta/apple-touch-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/josephdyer/skeleventy/HEAD/images/meta/apple-touch-icon.png -------------------------------------------------------------------------------- /site/globals/helpers.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | 3 | // environment helper 4 | 'environment': process.env.ELEVENTY_ENV 5 | }; 6 | -------------------------------------------------------------------------------- /site/includes/components/logo.njk: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /resources/scss/02-utilities/_index.scss: -------------------------------------------------------------------------------- 1 | 2 | @import 'variables'; 3 | @import 'functions'; 4 | @import 'mixins'; 5 | @import 'utilities'; 6 | -------------------------------------------------------------------------------- /resources/scss/05-components/_index.scss: -------------------------------------------------------------------------------- 1 | 2 | @import 'buttons'; 3 | @import 'pagination'; 4 | @import 'forms'; 5 | @import 'social-icons'; 6 | -------------------------------------------------------------------------------- /resources/scss/04-layout/_footer.scss: -------------------------------------------------------------------------------- 1 | 2 | //========== Footer ==========// 3 | 4 | .footer-inner { 5 | align-items: center; 6 | justify-content: space-between; 7 | } 8 | -------------------------------------------------------------------------------- /resources/scss/04-layout/_index.scss: -------------------------------------------------------------------------------- 1 | 2 | @import 'site'; 3 | @import 'header'; 4 | @import 'nav'; 5 | @import 'mobile-nav'; 6 | @import 'hero'; 7 | @import 'main'; 8 | @import 'footer'; 9 | -------------------------------------------------------------------------------- /mix-manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "/js/main.js": "/js/main.js", 3 | "/css/main.css": "/css/main.css", 4 | "/css/main.min.css": "/css/main.min.css", 5 | "/js/main.min.js": "/js/main.min.js" 6 | } 7 | -------------------------------------------------------------------------------- /site/robots.njk: -------------------------------------------------------------------------------- 1 | --- 2 | permalink: robots.txt 3 | eleventyExcludeFromCollections: true 4 | hide_from_sitemap: true 5 | --- 6 | 7 | User-agent: * 8 | Disallow: 9 | 10 | Sitemap: {{ site.url }}/sitemap.xml 11 | -------------------------------------------------------------------------------- /netlify.toml: -------------------------------------------------------------------------------- 1 | [build] 2 | command = "npm run production" 3 | publish = "public" 4 | 5 | [[headers]] 6 | for = "/*" 7 | [headers.values] 8 | X-Frame-Options = "SAMEORIGIN" 9 | X-XSS-Protection = "1; mode=block" 10 | -------------------------------------------------------------------------------- /resources/scss/05-components/_pagination.scss: -------------------------------------------------------------------------------- 1 | 2 | //========== Pagination ==========// 3 | 4 | .pagination { 5 | --gap: #{get-size('1000')}; 6 | 7 | .items { 8 | justify-content: space-between; 9 | padding: 0; 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /site/includes/components/header.njk: -------------------------------------------------------------------------------- 1 | 2 | 10 | 11 | -------------------------------------------------------------------------------- /resources/scss/05-components/_forms.scss: -------------------------------------------------------------------------------- 1 | 2 | //========== Forms ==========// 3 | 4 | .textarea, 5 | .input { 6 | border: 0; 7 | border-radius: v(border-radius); 8 | padding: 0 .5rem; 9 | } 10 | 11 | .input { 12 | height: get-size('800'); 13 | } 14 | 15 | .textarea { 16 | height: get-size('1100'); 17 | } 18 | -------------------------------------------------------------------------------- /site/contact/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: contact 3 | meta_title: Contact 4 | meta_description: The contact page 5 | title: Get in touch 6 | sub_heading: We'd love to hear from you. 7 | eleventyNavigation: 8 | key: Contact 9 | order: 4 10 | --- 11 | 12 | Simply fill out the form below and we'll gladly ignore it. 13 | 14 | 15 | -------------------------------------------------------------------------------- /site/blog/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: blog 3 | meta_title: Blog 4 | meta_description: The Skeleventy blog - a place to voice our useless opinions. 5 | hide_from_sitemap: true 6 | robots: noindex,follow 7 | title: The blog 8 | eleventyNavigation: 9 | key: Blog 10 | order: 3 11 | --- 12 | 13 | A place to voice our useless opinions. 14 | -------------------------------------------------------------------------------- /site/categories/category/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: category 3 | hide_from_sitemap: true 4 | robots: noindex,follow 5 | eleventyComputed: 6 | title: Category "{{ category | capitalize }}" 7 | meta_title: Category {{ category | capitalize }} 8 | meta_description: The "{{ category | capitalize }}" category page 9 | --- 10 | 11 | 12 | -------------------------------------------------------------------------------- /site/includes/components/footer.njk: -------------------------------------------------------------------------------- 1 | 2 | 13 | 14 | -------------------------------------------------------------------------------- /resources/scss/main.scss: -------------------------------------------------------------------------------- 1 | 2 | //========== Imports ==========// 3 | 4 | // Config 5 | @import '01-config'; 6 | 7 | // Utilities 8 | @import '02-utilities'; 9 | 10 | // Base 11 | @import '03-base'; 12 | 13 | // Layout 14 | @import '04-layout'; 15 | 16 | // Components 17 | @import '05-components'; 18 | 19 | // Pages 20 | @import '06-pages'; 21 | 22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /utilities/transforms/htmlminify.js: -------------------------------------------------------------------------------- 1 | const htmlmin = require('html-minifier') 2 | 3 | module.exports = (content, outputPath = '.html') => { 4 | 5 | if ( !String(outputPath).endsWith('.html') ) return content; 6 | 7 | return htmlmin.minify(content, { 8 | useShortDoctype: true, 9 | removeComments: true, 10 | collapseWhitespace: true 11 | }) 12 | 13 | } 14 | -------------------------------------------------------------------------------- /site/404.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: page 3 | hide_from_sitemap: true 4 | robots: noindex,nofollow 5 | eleventyExcludeFromCollections: true 6 | permalink: 404.html 7 | meta_title: Error 404! 8 | meta_description: Sorry, the page you're looking for can't be found. 9 | title: Oops! We can't find that page 10 | --- 11 | 12 | The link you followed may be broken or the page may have been removed. [Take me back to the homepage](/) 13 | -------------------------------------------------------------------------------- /site/categories/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: page 3 | meta_title: Categories 4 | meta_description: Browse all categories 5 | hide_from_sitemap: true 6 | robots: noindex,follow 7 | title: Categories 8 | permalink: /categories/ 9 | --- 10 | 11 | 16 | -------------------------------------------------------------------------------- /resources/scss/05-components/_social-icons.scss: -------------------------------------------------------------------------------- 1 | 2 | //========== Social icons ==========// 3 | 4 | .social-icons { 5 | 6 | .icon-link { 7 | 8 | &:hover { 9 | @include apply-utility('color', 'secondary'); 10 | } 11 | } 12 | 13 | .icon { 14 | --social-icon-size: #{get-size('500')}; 15 | width: v(social-icon-size); 16 | height: v(social-icon-size); 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /resources/scss/02-utilities/_functions.scss: -------------------------------------------------------------------------------- 1 | 2 | //========== Functions ==========// 3 | 4 | // declare CSS variables quicker in SCSS 5 | // SCSS: v(bg-color); 6 | // output CSS: var(--bg-color); 7 | // also accepts fallbacks 8 | @function v($var, $fallback: null) { 9 | 10 | @if($fallback) { 11 | @return var(--#{$var}, #{$fallback}); 12 | } 13 | 14 | @else { 15 | @return var(--#{$var}); 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /resources/scss/04-layout/_main.scss: -------------------------------------------------------------------------------- 1 | 2 | //========== Main ==========// 3 | 4 | .main { 5 | flex-direction: column; 6 | flex: 1; 7 | 8 | &:focus { 9 | outline: 0; 10 | } 11 | } 12 | 13 | // page header 14 | .page-header { 15 | --gap: #{get-size('800')}; 16 | margin-bottom: v(gap); 17 | } 18 | 19 | @include media-query('tablet') { 20 | 21 | .page-header { 22 | --gap: #{get-size('900')}; 23 | } 24 | } 25 | 26 | -------------------------------------------------------------------------------- /site/sitemap.njk: -------------------------------------------------------------------------------- 1 | --- 2 | permalink: sitemap.xml 3 | hide_from_sitemap: true 4 | eleventyExcludeFromCollections: true 5 | --- 6 | 7 | 8 | {%- for page in collections.all %} 9 | {%- if not page.data.hide_from_sitemap %} 10 | 11 | {{ site.url }}{{ page.url | url }} 12 | {{ page.date | timestamp }} 13 | 14 | {%- endif %} 15 | {%- endfor %} 16 | 17 | -------------------------------------------------------------------------------- /site/includes/layouts/home.njk: -------------------------------------------------------------------------------- 1 | --- 2 | layout: base 3 | --- 4 | 5 |
6 | 7 |
8 | 9 |

{{ title }}

10 | 11 | {% if sub_heading %} 12 | 13 |

{{ sub_heading }}

14 | 15 | {% endif %} 16 | 17 |
18 | 19 |
20 | 21 | {{ content | safe }} 22 | 23 |
24 | 25 |
26 | -------------------------------------------------------------------------------- /site/includes/layouts/category.njk: -------------------------------------------------------------------------------- 1 | --- 2 | layout: page 3 | pagination: 4 | data: collections 5 | size: 1 6 | alias: category 7 | filter: 8 | - all 9 | - blog 10 | permalink: /categories/{{ category }}/ 11 | hide_from_sitemap: true 12 | --- 13 | 14 | 19 | 20 |

Back to all categories

21 | -------------------------------------------------------------------------------- /resources/scss/05-components/_buttons.scss: -------------------------------------------------------------------------------- 1 | 2 | //========== Buttons ==========// 3 | 4 | .button { 5 | display: inline-block; 6 | background-color: get-color('secondary'); 7 | border: 0; 8 | border-radius: v(border-radius); 9 | color: get-color('primary'); 10 | padding: get-size('300') get-size('500'); 11 | transition: background-color v(transition-duration) v(transition-timing); 12 | @include apply-utility('weight', 'bold'); 13 | 14 | &:hover { 15 | @include apply-utility('bg', 'white'); 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /utilities/filters/dates.js: -------------------------------------------------------------------------------- 1 | 2 | const to_month = new Intl.DateTimeFormat('en', { month: 'long' }); 3 | 4 | // timestamp date to YYYY-MM-DD 5 | module.exports.timestamp = date => ( 6 | date instanceof Date ? `${date.getUTCFullYear()}-${String(date.getUTCMonth() + 1).padStart(2, '0')}-${String(date.getUTCDate()).padStart(2, '0')}` : '' 7 | ) 8 | 9 | // human readable date for blog posts (DD MM, YYYY) 10 | module.exports.friendly = date => ( 11 | date instanceof Date ? date.getUTCDate() + ' ' + to_month.format(date) + ', ' + date.getUTCFullYear() : '' 12 | ) 13 | -------------------------------------------------------------------------------- /resources/scss/03-base/_links.scss: -------------------------------------------------------------------------------- 1 | 2 | //========== Links ==========// 3 | 4 | a { 5 | text-decoration: none; 6 | transition: color v(transition-duration) v(transition-timing); 7 | 8 | &:not([class]) { 9 | color: currentColor; 10 | border-bottom: v(border-size) solid get-color('secondary'); 11 | padding-bottom: .1rem; 12 | text-decoration-skip-ink: auto; 13 | 14 | &:hover { 15 | @include apply-utility('color', 'secondary'); 16 | } 17 | } 18 | } 19 | 20 | :focus { 21 | outline: 1px solid get-color('secondary'); 22 | outline-offset: .25rem; 23 | } 24 | 25 | -------------------------------------------------------------------------------- /site/globals/site.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Skeleventy", 3 | "url": "https://skeleventy.netlify.app", 4 | "author": { 5 | "name": "Mill Burray", 6 | "handle": "@joe_dyer1" 7 | }, 8 | "images": { 9 | "favicon": "/favicon.png", 10 | "favicon_svg": "/favicon.svg", 11 | "apple_touch_icon": "/images/meta/apple-touch-icon.png", 12 | "twitter": "/images/meta/twitter.jpg", 13 | "og": "/images/meta/og.jpg" 14 | }, 15 | "social_links": { 16 | "github": "https://github.com/josephdyer/skeleventy", 17 | "twitter": "https://twitter.com/joe_dyer1" 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /resources/scss/04-layout/_header.scss: -------------------------------------------------------------------------------- 1 | 2 | //========== Header ==========// 3 | 4 | // logo 5 | .logo { 6 | --logo-size: #{get-size('500')}; 7 | font-size: v(logo-size); 8 | margin: 0 auto; 9 | 10 | &:hover { 11 | @include apply-utility('color', 'secondary'); 12 | } 13 | } 14 | 15 | @include media-query('mobileXL') { 16 | 17 | .logo { 18 | --logo-size: #{get-size('600')}; 19 | margin: 0 auto 0 0; 20 | } 21 | } 22 | 23 | @include media-query('mobileXL') { 24 | 25 | .header-inner { 26 | align-items: center; 27 | justify-content: space-between; 28 | } 29 | } 30 | 31 | 32 | -------------------------------------------------------------------------------- /site/includes/layouts/page.njk: -------------------------------------------------------------------------------- 1 | --- 2 | layout: base 3 | --- 4 | 5 |
6 | 7 |
8 | 9 |
10 | 11 |

{{ title }}

12 | 13 | {% if sub_heading %} 14 | 15 |

{{ sub_heading }}

16 | 17 | {% endif %} 18 | 19 |
20 | 21 |
22 | 23 | {{ content | safe }} 24 | 25 |
26 | 27 |
28 | 29 |
30 | -------------------------------------------------------------------------------- /resources/scss/04-layout/_nav.scss: -------------------------------------------------------------------------------- 1 | 2 | //========== Nav ==========// 3 | 4 | .nav { 5 | 6 | .link { 7 | height: get-size('900'); 8 | line-height: get-size('900'); 9 | 10 | &.active, 11 | &:hover { 12 | @include apply-utility('color', 'secondary'); 13 | } 14 | 15 | &-get-started { 16 | border-radius: v(border-radius); 17 | transition: background-color v(transition-duration) v(transition-timing); 18 | 19 | &:hover { 20 | @include apply-utility('bg', 'white'); 21 | @include apply-utility('color', 'primary'); 22 | } 23 | } 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /resources/scss/06-pages/_post.scss: -------------------------------------------------------------------------------- 1 | 2 | //========== Post page ==========// 3 | 4 | .type-post { 5 | 6 | .length-optimal { 7 | margin-left: auto; 8 | margin-right: auto; 9 | } 10 | 11 | .categories { 12 | 13 | .category { 14 | 15 | &:first-child { 16 | 17 | &:before { 18 | content: '\00a0\00a0/\00a0\00a0'; 19 | } 20 | } 21 | } 22 | } 23 | } 24 | 25 | .post-image { 26 | border-radius: v(border-radius); 27 | } 28 | 29 | // blog post title 30 | .post-title { 31 | font-size: v(text-1100); 32 | } 33 | 34 | .post-image-caption { 35 | text-align: center; 36 | } 37 | -------------------------------------------------------------------------------- /resources/js/modules/mobile-nav/index.js: -------------------------------------------------------------------------------- 1 | import $$ from '@utilities/selectors' 2 | 3 | const MobileNav = function MobileNav() 4 | { 5 | 6 | $$.mobileNavToggle.addEventListener('click', function() { 7 | 8 | this.classList.toggle('expanded') 9 | $$.mobileNav.classList.toggle('menu-visible') 10 | 11 | // set aria-expanded attribute on menu toggle button 12 | if ( this.getAttribute('aria-expanded') === 'false' ) 13 | { 14 | 15 | this.setAttribute('aria-expanded', 'true') 16 | 17 | } else { 18 | 19 | this.setAttribute('aria-expanded', 'false') 20 | 21 | } 22 | 23 | }) 24 | 25 | }() 26 | 27 | export default MobileNav 28 | -------------------------------------------------------------------------------- /site/includes/components/social-icons.njk: -------------------------------------------------------------------------------- 1 | 2 | 23 | 24 | -------------------------------------------------------------------------------- /favicon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /resources/js/utilities/helpers/index.js: -------------------------------------------------------------------------------- 1 | import $$ from '@utilities/selectors' 2 | 3 | /** 4 | * @description Test if the body id is something 5 | * @param {string} 6 | * @return {bool} 7 | * 8 | */ 9 | 10 | const page = function(name) { 11 | 12 | if (!name) { 13 | return $$.body.getAttribute('id') 14 | } 15 | 16 | return ($$.body.getAttribute('id') == name) 17 | 18 | } 19 | 20 | 21 | /** 22 | * @description Check if element exists the page 23 | * @param {string} Element selector 24 | * @param {string} Minimum number of elements 25 | * @return {bool} 26 | */ 27 | 28 | const exists = function(el, limit) { 29 | 30 | return (el.length > 0) 31 | 32 | } 33 | 34 | export { 35 | page, 36 | exists 37 | } 38 | 39 | 40 | -------------------------------------------------------------------------------- /resources/scss/03-base/_typography.scss: -------------------------------------------------------------------------------- 1 | 2 | //========== Typography ==========// 3 | 4 | // set base font size 5 | body { 6 | font-size: v(text-500); 7 | } 8 | 9 | // headings 10 | h1, 11 | h2, 12 | h3 { 13 | @include apply-utility('leading', 'tight'); 14 | letter-spacing: -.01rem; 15 | } 16 | 17 | h1 { 18 | --gap: #{get-size('700')}; 19 | font-size: v(text-900); 20 | margin: 0 0 v(gap); 21 | } 22 | 23 | h2 { 24 | font-size: v(text-800); 25 | } 26 | 27 | h3 { 28 | font-size: v(text-700); 29 | } 30 | 31 | .content { 32 | word-wrap: break-word; 33 | } 34 | 35 | // sub-heading 36 | .sub-heading { 37 | font-size: v(text-700); 38 | line-height: 1.5; 39 | } 40 | 41 | // lists 42 | ol, 43 | ul { 44 | padding: 0 0 0 get-size('500'); 45 | } 46 | 47 | -------------------------------------------------------------------------------- /site/includes/components/nav.njk: -------------------------------------------------------------------------------- 1 | 2 | 23 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "skeleventy", 3 | "version": "3.0.0", 4 | "description": "Skeleventy gives you a rock solid foundation to build fast and accessible static websites", 5 | "scripts": { 6 | "dev": "ELEVENTY_ENV=development npx @11ty/eleventy --config=eleventy.config.js --serve --quiet & mix watch", 7 | "production": "mix --production & npx @11ty/eleventy --config=eleventy.config.js" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "https://github.com/josephdyer/skeleventy.git" 12 | }, 13 | "author": "Joe Dyer", 14 | "license": "MIT", 15 | "devDependencies": { 16 | "@11ty/eleventy": "^0.11.1", 17 | "@11ty/eleventy-navigation": "^0.1.6", 18 | "gorko": "^0.2.3", 19 | "html-minifier": "^4.0.0", 20 | "laravel-mix": "^6.0.11", 21 | "laravel-mix-purgecss": "^6.0.0", 22 | "postcss": "^8.2.6", 23 | "resolve-url-loader": "^3.1.2", 24 | "sass-loader": "^11.0.1" 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /resources/js/utilities/selectors/index.js: -------------------------------------------------------------------------------- 1 | 2 | const $$ = { 3 | 4 | body : document.querySelector('body'), 5 | 6 | wrapper : document.getElementById('wrapper'), 7 | 8 | header : document.getElementById('header'), 9 | 10 | nav : document.getElementById('nav'), 11 | 12 | hero : document.getElementById('hero'), 13 | 14 | main : document.getElementById('main'), 15 | 16 | containerCentre : document.getElementById('container-centre'), 17 | 18 | containerRight : document.getElementById('container-right'), 19 | 20 | preFooter : document.getElementById('pre-footer'), 21 | 22 | footer : document.getElementById('footer'), 23 | 24 | mobileNav : document.getElementById('mobile-nav'), 25 | 26 | mobileNavToggle : document.getElementById('mobile-nav-toggle') 27 | 28 | } 29 | 30 | export default $$ 31 | -------------------------------------------------------------------------------- /resources/scss/02-utilities/_utilities.scss: -------------------------------------------------------------------------------- 1 | 2 | //========== Utilities ==========// 3 | 4 | // container 5 | .inner { 6 | @include apply-utility('width', 'full'); 7 | margin: 0 auto; 8 | max-width: v(max-width); 9 | @include apply-utility('pl', '600'); 10 | @include apply-utility('pr', '600'); 11 | } 12 | 13 | // better vertical rhythm 14 | .flow > * + * { 15 | margin-top: v(gap); 16 | 17 | @include media-query('tablet') { 18 | --gap: #{get-size('700')}; 19 | } 20 | } 21 | 22 | // subtle fade in to lazyloaded images 23 | [data-src] { 24 | opacity: 0; 25 | } 26 | 27 | .loaded { 28 | opacity: 1; 29 | transition: opacity v(transition-duration) v(transition-timing); 30 | } 31 | 32 | // content only for screen readers 33 | .sr-only { 34 | position: absolute; 35 | width: 1px; 36 | height: 1px; 37 | padding: 0; 38 | margin: -1px; 39 | overflow: hidden; 40 | clip: rect(0, 0, 0, 0); 41 | white-space: nowrap; 42 | border-width: 0; 43 | } 44 | 45 | -------------------------------------------------------------------------------- /site/includes/components/social-meta.njk: -------------------------------------------------------------------------------- 1 | 2 | {# Twitter #} 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | {# Open Graph #} 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /resources/scss/02-utilities/_variables.scss: -------------------------------------------------------------------------------- 1 | 2 | //========== Variables ==========// 3 | 4 | :root { 5 | 6 | // site 7 | --max-width: 80rem; 8 | 9 | // spacing 10 | --gap: #{get-size('600')}; 11 | 12 | // typography 13 | --base-font-size: #{$gorko-base-size}; 14 | --ratio: 1.1; 15 | --text-300: calc((var(--base-font-size) / var(--ratio)) / var(--ratio)); 16 | --text-400: calc(var(--text-300) * var(--ratio)); 17 | --text-500: calc(var(--text-400) * var(--ratio) * var(--ratio)); 18 | --text-600: calc(var(--text-500) * var(--ratio)); 19 | --text-700: calc(var(--text-600) * var(--ratio)); 20 | --text-800: calc(var(--text-700) * var(--ratio)); 21 | --text-900: calc(var(--text-800) * var(--ratio)); 22 | --text-1000: calc(var(--text-900) * var(--ratio)); 23 | --text-1100: calc(var(--text-1000) * var(--ratio)); 24 | 25 | // borders 26 | --border-radius: .25rem; 27 | --border-size: .15rem; 28 | 29 | // transitions 30 | --transition-duration: .25s; 31 | --transition-timing: ease-out; 32 | 33 | @include media-query('tablet') { 34 | --ratio: 1.2; 35 | } 36 | 37 | @include media-query('laptop') { 38 | --ratio: 1.25; 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /site/includes/components/mobile-nav.njk: -------------------------------------------------------------------------------- 1 | 20 | 21 | 32 | 33 | -------------------------------------------------------------------------------- /webpack.mix.js: -------------------------------------------------------------------------------- 1 | 2 | //========== Laravel Mix ==========// 3 | 4 | const mix = require('laravel-mix') 5 | const path = require('path') 6 | require('laravel-mix-purgecss') 7 | 8 | // Run Mix 9 | mix 10 | 11 | // cleaner aliases for js module imports (optional) 12 | .webpackConfig({ 13 | resolve: { 14 | alias: { 15 | '@utilities': path.resolve(__dirname, 'resources/js/utilities'), 16 | '@modules': path.resolve(__dirname, 'resources/js/modules') 17 | } 18 | } 19 | }) 20 | 21 | // Compile Javascript 22 | .js('resources/js/main.js', 'js/') 23 | 24 | // Compile SCSS 25 | .sass('resources/scss/main.scss', 'css/') 26 | .options({ processCssUrls: false }) 27 | 28 | 29 | // Production only 30 | if ( mix.inProduction() ) 31 | { 32 | 33 | // Purge our CSS 34 | // mix minifies CSS & JS by default 35 | // I prefer to add the `.min` suffix on the output files just for convention 36 | mix.purgeCss({ 37 | content: ['site/**/*.njk'], 38 | safelist: ['menu-visible', 'loaded', 'expanded', /^type-/, /^page-/, /[data-src]/], 39 | extractorPattern: [/[^<>"'`\s]*[^<>"'`\s:]/g] 40 | }) 41 | .minify('css/main.css') 42 | .minify('js/main.js') 43 | 44 | } 45 | 46 | 47 | -------------------------------------------------------------------------------- /resources/js/modules/lazyload/index.js: -------------------------------------------------------------------------------- 1 | import $$ from '@utilities/selectors' 2 | import { exists } from '@utilities/helpers' 3 | 4 | const Lazyload = function Lazyload() 5 | { 6 | 7 | // lazyload our images 8 | const images = $$.wrapper.querySelectorAll('[data-src]') 9 | 10 | if ( exists(images) ) 11 | { 12 | 13 | // options 14 | const options = { 15 | threshold: 0.5 16 | } 17 | 18 | const preloadImage = (img) => { 19 | 20 | // find and store the image's data-load attribute 21 | const src = img.dataset.src 22 | 23 | img.src = src 24 | 25 | // add a class of loaded 26 | // we can then use this as a hook for fade-in animations etc 27 | img.classList.add('loaded') 28 | img.removeAttribute('data-src') 29 | 30 | } 31 | 32 | const lazyLoad = new IntersectionObserver((entries, lazyLoad) => { 33 | 34 | entries.forEach(entry => { 35 | 36 | if (entry.isIntersecting) { 37 | 38 | preloadImage(entry.target) 39 | lazyLoad.unobserve(entry.target) 40 | 41 | } 42 | 43 | }) 44 | 45 | }, options) 46 | 47 | images.forEach(image => { 48 | lazyLoad.observe(image) 49 | }) 50 | 51 | } 52 | 53 | }() 54 | 55 | export default Lazyload 56 | -------------------------------------------------------------------------------- /resources/scss/03-base/_reset.scss: -------------------------------------------------------------------------------- 1 | 2 | //========== Modern CSS reset inspired by https://github.com/hankchizljaw/modern-css-reset ==========// 3 | 4 | /* Box sizing rules */ 5 | *, 6 | *::before, 7 | *::after { 8 | box-sizing: border-box; 9 | } 10 | 11 | /* Set core root defaults */ 12 | html { 13 | min-height: 100%; 14 | scroll-behavior: smooth; 15 | } 16 | 17 | /* Set core body defaults */ 18 | body { 19 | overflow-x: hidden; 20 | text-rendering: optimizeLegibility; 21 | -webkit-font-smoothing: antialiased; 22 | } 23 | 24 | /* Remove default margin */ 25 | body, 26 | h1, 27 | h2, 28 | h3, 29 | h4, 30 | p, 31 | ul, 32 | ol, 33 | figure, 34 | blockquote, 35 | dl, 36 | dd { 37 | margin: 0; 38 | } 39 | 40 | /* Make images easier to work with */ 41 | img { 42 | display: block; 43 | max-width: 100%; 44 | height: auto; 45 | } 46 | 47 | /* Inherit fonts for inputs and buttons */ 48 | input, 49 | button, 50 | textarea, 51 | select { 52 | font: inherit; 53 | } 54 | 55 | /* Remove all animations and transitions for people that prefer not to see them */ 56 | @media (prefers-reduced-motion: reduce) { 57 | * { 58 | animation-duration: 0.01ms !important; 59 | animation-iteration-count: 1 !important; 60 | transition-duration: 0.01ms !important; 61 | scroll-behavior: auto !important; 62 | } 63 | } 64 | 65 | /* Remove default padding and list styles on ul, ol elements with a class attribute */ 66 | ul[class], 67 | ol[class] { 68 | list-style: none; 69 | padding: 0; 70 | } 71 | -------------------------------------------------------------------------------- /site/blog/post-1/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2018-09-30 3 | meta_description: A meeting is a gathering of two or more people that has been convened for the purpose of achieving a common goal through verbal interaction. 4 | title: 7 steps to more productive meetings 5 | sub_heading: A meeting is a gathering of two or more people that has been convened for the purpose of achieving a common goal through verbal interaction. 6 | post_image: /images/post-1.jpg 7 | image_alt: Photo by Dylan Gillis on Unsplash 8 | tags: 9 | - blog 10 | - business 11 | --- 12 | 13 | Such as sharing information or reaching an agreement. Meetings may occur face-to-face or virtually, as mediated by communications technology, such as a telephone conference call, a Skype conference call or a video conference. 14 | 15 | One can distinguish a meeting from other gatherings, such as a chance encounter (not convened), a sports game or a concert (verbal interaction is incidental), a party or the company of friends (no common goal is to be achieved) and a demonstration (whose common goal is achieved mainly through the number of demonstrators present, not through verbal interaction). 16 | 17 | ## Meeting planners 18 | 19 | Meeting planners and other meeting professionals may use the term “meeting” to denote an event booked at a hotel, convention center or any other venue dedicated to such gatherings. 20 | 21 | In this sense, the term meeting covers a lecture, seminar, conference, congress, exhibition or trade show, training course, or a team-building session and kick-off event. 22 | -------------------------------------------------------------------------------- /resources/scss/06-pages/_blog.scss: -------------------------------------------------------------------------------- 1 | 2 | //========== Blog page ==========// 3 | 4 | .posts { 5 | --gap: #{get-size('1100')}; 6 | align-items: stretch; 7 | grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); 8 | gap: v(gap); 9 | padding-bottom: 15vh; 10 | } 11 | 12 | .card { 13 | position: relative; 14 | 15 | &-header { 16 | position: relative; 17 | } 18 | 19 | &-image { 20 | border-radius: v(border-radius); 21 | } 22 | 23 | &-categories { 24 | position: absolute; 25 | bottom: 0; 26 | left: get-size('300'); 27 | transform: translateY(50%); 28 | 29 | .category { 30 | --border-radius: .15rem; 31 | border-radius: v(border-radius); 32 | padding: .25rem .5rem; 33 | } 34 | } 35 | 36 | &-title-link { 37 | border-bottom: v(border-size) solid get-color('secondary'); 38 | transition: border-color v(transition-duration) v(transition-timing); 39 | 40 | &:hover { 41 | border-bottom-color: get-color('primary'); 42 | } 43 | } 44 | 45 | .datetime { 46 | position: absolute; 47 | bottom: 0; 48 | } 49 | } 50 | 51 | 52 | @include media-query('tablet') { 53 | 54 | .card { 55 | 56 | &-title-link { 57 | font-size: v(text-700); 58 | } 59 | } 60 | } 61 | 62 | @include media-query('laptop') { 63 | 64 | .posts { 65 | grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr)); 66 | } 67 | } 68 | -------------------------------------------------------------------------------- /site/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: home 3 | meta_title: Home 4 | meta_description: Skeleventy gives you a rock solid foundation to build fast and accessible static websites. 5 | title: An Eleventy starter skeleton 6 | sub_heading: Skeleventy gives you a rock solid foundation to build fast and accessible static websites. 7 | eleventyNavigation: 8 | key: Home 9 | order: 1 10 | --- 11 | 12 | ## Features 13 | 14 | - Clean, understated design - a good starting point for a portfolio or blog 15 | - A minimal build pipeline with [Laravel Mix](https://laravel-mix.com/docs/5.0/basic-example) 16 | - [Gorko](https://github.com/hankchizljaw/gorko), a smart little Sass-powered utility class generator 17 | - [Purgecss](https://purgecss.com/) to remove unused CSS 18 | - HTML minifier 19 | - Supports ES2017 JavaScript, with Babel compilation 20 | - SEO friendly page meta, including Open Graph and Twitter 21 | - Image lazy loading 22 | - Responsive navigation 23 | - XML Sitemap 24 | 25 | ## Getting started 26 | 27 | ### Prerequisites 28 | Node `v10+` 29 | 30 | ### Installation 31 | 32 | 1. Clone the repo `git clone https://github.com/josephdyer/skeleventy.git` 33 | 2. `cd` into the project folder and run `npm install` 34 | 3. Start the local development server by running `npm run dev` **Tip:** _Eleventy has live reload baked in!_ 35 | 36 | ## Ready to deploy? 37 | 38 | The ```npm run production``` command will remove any unused CSS with Purgecss and minify the CSS and JS files. 39 | 40 | I highly recommend using [Netlify](https://www.netlify.com) to host your site on, so I've included a ```netlify.toml``` configuration file for your convenience. 41 | 42 | -------------------------------------------------------------------------------- /site/blog/post-2/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2019-10-30 3 | title: Five things you need to know to run a podcast 4 | meta_description: A Podcast is an episodic series of digital audio files which a user can subscribe to so that new episodes are automatically downloaded via web syndication to the user’s own local computer, mobile application, or portable media player. 5 | post_image: /images/post-2.jpg 6 | image_alt: Photo by Jonathan Velasquez on Unsplash 7 | sub_heading: A Podcast is an episodic series of digital audio files which a user can subscribe to so that new episodes are automatically downloaded via web syndication to the user’s own local computer, mobile application, or portable media player. 8 | tags: 9 | - blog 10 | - digital 11 | --- 12 | 13 | The word arose as a portmanteau of “iPod” and “broadcast”. Thus, the files distributed are in audio format, but may sometimes include other file formats such as PDF or ePub. Videos which are shared following a podcast model are called video podcasts or vodcasts. 14 | 15 | The distributor of a podcast maintains a central list of the files on a server as a web feed that can be accessed through the Internet. The listener or viewer uses special client application software on a computer or media player, known as a podcatcher, which accesses this web feed, checks it for updates, and downloads any new files in the series. 16 | 17 | This process can be automated so that new files are downloaded automatically, which may seem to the user as though new episodes are broadcast or “pushed” to them. Files are stored locally on the user’s device, ready for offline use. 18 | 19 | There are many different mobile applications available for people to use to subscribe and listen to podcasts. Many of these applications allow users to download podcasts or stream them on demand as an alternative to downloading. Many podcast players allow listeners to skip around the podcast and control the playback speed. 20 | -------------------------------------------------------------------------------- /js/main.js: -------------------------------------------------------------------------------- 1 | (()=>{"use strict";var e={995:()=>{const e={body:document.querySelector("body"),wrapper:document.getElementById("wrapper"),header:document.getElementById("header"),nav:document.getElementById("nav"),hero:document.getElementById("hero"),main:document.getElementById("main"),containerCentre:document.getElementById("container-centre"),containerRight:document.getElementById("container-right"),preFooter:document.getElementById("pre-footer"),footer:document.getElementById("footer"),mobileNav:document.getElementById("mobile-nav"),mobileNavToggle:document.getElementById("mobile-nav-toggle")};e.mobileNavToggle.addEventListener("click",(function(){this.classList.toggle("expanded"),e.mobileNav.classList.toggle("menu-visible"),"false"===this.getAttribute("aria-expanded")?this.setAttribute("aria-expanded","true"):this.setAttribute("aria-expanded","false")}));!function(){var t=e.wrapper.querySelectorAll("[data-src]");if(t.length>0){var n=new IntersectionObserver((function(e,t){e.forEach((function(e){var n,r;e.isIntersecting&&(n=e.target,r=n.dataset.src,n.src=r,n.classList.add("loaded"),n.removeAttribute("data-src"),t.unobserve(e.target))}))}),{threshold:.5});t.forEach((function(e){n.observe(e)}))}}()},617:()=>{}},t={};function n(r){if(t[r])return t[r].exports;var o=t[r]={exports:{}};return e[r](o,o.exports,n),o.exports}n.m=e,n.x=e=>{},n.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),(()=>{var e={522:0},t=[[995],[617]],r=e=>{},o=(o,a)=>{for(var l,i,[s,d,c,u]=a,m=0,g=[];m{}),r}a.forEach(o.bind(null,0)),a.push=o.bind(null,a.push.bind(a));var i=n.x;n.x=()=>(n.x=i||(e=>{}),(r=l)())})(),n.x()})(); -------------------------------------------------------------------------------- /js/main.min.js: -------------------------------------------------------------------------------- 1 | (()=>{"use strict";var e={995:()=>{const e={body:document.querySelector("body"),wrapper:document.getElementById("wrapper"),header:document.getElementById("header"),nav:document.getElementById("nav"),hero:document.getElementById("hero"),main:document.getElementById("main"),containerCentre:document.getElementById("container-centre"),containerRight:document.getElementById("container-right"),preFooter:document.getElementById("pre-footer"),footer:document.getElementById("footer"),mobileNav:document.getElementById("mobile-nav"),mobileNavToggle:document.getElementById("mobile-nav-toggle")};e.mobileNavToggle.addEventListener("click",(function(){this.classList.toggle("expanded"),e.mobileNav.classList.toggle("menu-visible"),"false"===this.getAttribute("aria-expanded")?this.setAttribute("aria-expanded","true"):this.setAttribute("aria-expanded","false")})),function(){var t=e.wrapper.querySelectorAll("[data-src]");if(t.length>0){var n=new IntersectionObserver((function(e,t){e.forEach((function(e){var n,r;e.isIntersecting&&(r=(n=e.target).dataset.src,n.src=r,n.classList.add("loaded"),n.removeAttribute("data-src"),t.unobserve(e.target))}))}),{threshold:.5});t.forEach((function(e){n.observe(e)}))}}()},617:()=>{}},t={};function n(r){if(t[r])return t[r].exports;var o=t[r]={exports:{}};return e[r](o,o.exports,n),o.exports}n.m=e,n.x=e=>{},n.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),(()=>{var e={522:0},t=[[995],[617]],r=e=>{},o=(o,a)=>{for(var l,i,[s,d,c,u]=a,m=0,g=[];m{}),r}a.forEach(o.bind(null,0)),a.push=o.bind(null,a.push.bind(a));var i=n.x;n.x=()=>(n.x=i||(e=>{}),(r=l)())})(),n.x()})(); 2 | -------------------------------------------------------------------------------- /resources/scss/04-layout/_mobile-nav.scss: -------------------------------------------------------------------------------- 1 | 2 | //========== Mobile Nav ==========// 3 | 4 | .mobile-nav { 5 | --transition-duration: .3s; 6 | position: fixed; 7 | top: 0; 8 | left: 0; 9 | overflow-y: auto; 10 | transform: translate3d(-100%, 0, 0); 11 | transition: transform v(transition-duration) cubic-bezier(.77, 0, .175, 1); 12 | transition-delay: .1s; 13 | will-change: transform; 14 | 15 | // when menu is visible 16 | &.menu-visible { 17 | transform: translate3d(0, 0, 0); 18 | } 19 | 20 | .link { 21 | --gap: .25rem; 22 | padding: v(gap) 0; 23 | 24 | &.active, 25 | &:hover { 26 | color: get-color('secondary'); 27 | } 28 | } 29 | } 30 | 31 | // Mobile menu 32 | .mobile-nav-toggle { 33 | position: fixed; 34 | bottom: 0; 35 | height: get-size('900'); 36 | align-items: center; 37 | justify-content: center; 38 | border: 0; 39 | outline: none; 40 | 41 | .mobile-nav-icon { 42 | flex-direction: column; 43 | } 44 | 45 | .icon-line { 46 | --transition-duration: .2s; 47 | --transition-timing: cubic-bezier(0, 0, .2, 1); 48 | height: 2px; 49 | width: get-size('500'); 50 | transform-origin: 7px 1px; 51 | transition: transform v(transition-duration) v(transition-timing), 52 | opacity v(transition-duration) v(transition-timing); 53 | 54 | &:not(:last-child) { 55 | margin-bottom: .25rem; 56 | } 57 | } 58 | 59 | // when menu toggle is clicked 60 | &.expanded { 61 | 62 | .icon-line { 63 | margin: 0; 64 | 65 | &:first-child { 66 | transform: rotate(45deg); 67 | } 68 | 69 | &:nth-child(2) { 70 | opacity: 0; 71 | } 72 | 73 | &:last-child { 74 | transform: rotate(-45deg); 75 | } 76 | } 77 | } 78 | } 79 | -------------------------------------------------------------------------------- /site/includes/layouts/contact.njk: -------------------------------------------------------------------------------- 1 | --- 2 | layout: base 3 | --- 4 | 5 |
6 | 7 |
8 | 9 |
10 | 11 |

{{ title }}

12 | 13 | {% if sub_heading %} 14 | 15 |

{{ sub_heading }}

16 | 17 | {% endif %} 18 | 19 |
20 | 21 |
22 | 23 | {{ content | safe }} 24 | 25 |
26 | 27 |
28 | 29 | 30 |
31 | 32 |
33 | 34 | 35 |
36 | 37 |
38 | 39 | 40 |
41 | 42 |
43 | 44 | 45 |
46 | 47 |
48 | 49 |
50 | 51 |
52 | 53 |
54 | 55 |
56 | 57 |
58 | -------------------------------------------------------------------------------- /images/icons/icon-library.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /site/includes/layouts/base.njk: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | {{ meta_title if meta_title else title }} | {{ site.name }} 7 | 8 | {# include main.css if in development mode #} 9 | {% if helpers.environment === 'development' %} 10 | 11 | {% else %} 12 | 13 | {% endif %} 14 | 15 | {# include javascript #} 16 | 17 | 18 | {# page meta #} 19 | 20 | 21 | 22 | 23 | 24 | {# include social meta tags #} 25 | {% include "components/social-meta.njk" %} 26 | 27 | {# include favicon, fonts, etc #} 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | Skip to content 37 | 38 |
39 | 40 | {# include header #} 41 | {% include "components/header.njk" %} 42 | 43 | {# include content #} 44 | {{ content | safe }} 45 | 46 | {# include footer #} 47 | {% include "components/footer.njk" %} 48 | 49 |
50 | 51 | {# include mobile nav #} 52 | {% include "components/mobile-nav.njk" %} 53 | 54 | 55 | 56 | -------------------------------------------------------------------------------- /site/includes/layouts/blog.njk: -------------------------------------------------------------------------------- 1 | --- 2 | layout: base 3 | pagination: 4 | data: collections.blog 5 | size: 3 6 | alias: blogs 7 | --- 8 | 9 |
10 | 11 |
12 | 13 |
14 | 15 |

{{ title }}

16 | 17 | {% if content %} 18 | 19 |
{{ content | safe }}
20 | 21 | {% endif %} 22 | 23 |
24 | 25 |
26 | 27 |
28 | 29 |
30 | 31 | {% for post in blogs %} 32 | 33 | 75 | 76 | {% endfor %} 77 | 78 |
79 | 80 |
81 | 82 |
83 | -------------------------------------------------------------------------------- /eleventy.config.js: -------------------------------------------------------------------------------- 1 | const navigation = require('@11ty/eleventy-navigation') 2 | const dates = require('./utilities/filters/dates') 3 | const helpers = require('./utilities/filters/helpers') 4 | const path = require('path') 5 | 6 | module.exports = config => { 7 | 8 | // navigation plugin 9 | config.addPlugin(navigation) 10 | 11 | // Human readable date for posts 12 | config.addFilter('dateDisplay', dates.friendly) 13 | 14 | // Timestamp for datetime element 15 | config.addFilter('timestamp', dates.timestamp) 16 | 17 | // Remove whitespace from a string 18 | config.addNunjucksFilter('spaceless', helpers.spaceless) 19 | 20 | // Minify our HTML 21 | config.addTransform('htmlminify', require('./utilities/transforms/htmlminify')) 22 | 23 | // Collections 24 | config.addCollection('blog', collection => { 25 | 26 | const blogs = collection.getFilteredByTag('blog') 27 | 28 | for ( let i = 0; i < blogs.length; i++ ) { 29 | 30 | const previous_post = blogs[i - 1] 31 | const next_post = blogs[i + 1] 32 | 33 | blogs[i].data['previous_post'] = previous_post 34 | blogs[i].data['next_post'] = next_post 35 | 36 | } 37 | 38 | return blogs.reverse() 39 | 40 | }) 41 | 42 | // Categories collection 43 | config.addCollection('categories', collection => { 44 | 45 | const list = new Set() 46 | 47 | collection.getAll().forEach(item => { 48 | 49 | if (!item.data.tags) return 50 | 51 | item.data.tags 52 | .filter(category => !['blog', 'all'].includes(category)) 53 | .forEach(category => list.add(category)) 54 | 55 | }) 56 | 57 | return Array.from(list).sort() 58 | 59 | }) 60 | 61 | // Layout aliases 62 | config.addLayoutAlias('base', 'layouts/base.njk') 63 | config.addLayoutAlias('home', 'layouts/home.njk') 64 | config.addLayoutAlias('page', 'layouts/page.njk') 65 | config.addLayoutAlias('blog', 'layouts/blog.njk') 66 | config.addLayoutAlias('post', 'layouts/post.njk') 67 | config.addLayoutAlias('contact', 'layouts/contact.njk') 68 | config.addLayoutAlias('category', 'layouts/category.njk') 69 | 70 | // Include our static assets 71 | config.addPassthroughCopy('css') 72 | config.addPassthroughCopy('js') 73 | config.addPassthroughCopy('images') 74 | config.addPassthroughCopy('favicon.png') 75 | config.addPassthroughCopy('favicon.svg') 76 | 77 | return { 78 | markdownTemplateEngine: 'njk', 79 | dir: { 80 | input: 'site', 81 | output: 'public', 82 | includes: 'includes', 83 | data: 'globals' 84 | } 85 | } 86 | 87 | } 88 | -------------------------------------------------------------------------------- /site/blog/post-3/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2019-11-15 3 | meta_description: Running is a method of terrestrial locomotion allowing humans and other animals to move rapidly on foot. This is in contrast to walking, where one foot is always in contact with the ground, the legs are kept mostly straight. 4 | title: Why running is incredible medicine for your brain 5 | sub_heading: Running is a method of terrestrial locomotion allowing humans and other animals to move rapidly on foot. This is in contrast to walking, where one foot is always in contact with the ground, the legs are kept mostly straight. 6 | post_image: /images/post-3.jpg 7 | image_alt: Photo by Spencer Dahl on Unsplash 8 | tags: 9 | - blog 10 | - health 11 | --- 12 | 13 | It is a type of gait characterized by an aerial phase in which all feet are above the ground. This is in contrast to walking, where one foot is always in contact with the ground, the legs are kept mostly straight and the center of gravity vaults over the stance leg or legs in an inverted pendulum fashion. A characteristic feature of a running body from the viewpoint of spring-mass mechanics is that changes in kinetic and potential energy within a stride occur simultaneously, with energy storage accomplished by springy tendons and passive muscle elasticity. The term running can refer to any of a variety of speeds ranging from jogging to sprinting. 14 | 15 | It is assumed that the ancestors of mankind developed the ability to run for long distances about 2.6 million years ago, probably in order to hunt animals. Competitive running grew out of religious festivals in various areas. Records of competitive racing date back to the Tailteann Games in Ireland in 1829 BCE,[citation needed] while the first recorded Olympic Games took place in 776 BCE. Running has been described as the world’s most accessible sport. 16 | 17 | ## History 18 | 19 | A scene depicting long distance runners, originally found on a Panathenaic amphora from Ancient Greece, circa 333 B.C. 20 | It is thought that human running evolved at least four and a half million years ago out of the ability of the ape-like Australopithecus, an early ancestor of humans, to walk upright on two legs. 21 | 22 | The theory proposed considered to be the most likely evolution of running is of early humans’ developing as endurance runners from the practice of persistence hunting of animals, the activity of following and chasing until a prey is too exhausted to flee, succumbing to “chase myopathy” of the Nariokotome Skeleton provided further evidence for the Carrier theory. 23 | 24 | ## Cardiovascular benefits 25 | 26 | While there exists the potential for injury while running, possible strengthening of the immune system and an improved self-esteem and emotional state. Running, like all forms of regular exercise can effectively slow or reverse the effects of aging. 27 | 28 | Whereby an optimal amount of vigorous aerobic exercise such as running might bring benefits related to lower cardiovascular disease and life extension, it should be noted that in an excessive dose it might have an opposite effect associated with cardiotoxicity. 29 | -------------------------------------------------------------------------------- /site/about/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: page 3 | meta_title: About 4 | meta_description: About Skeleventy 5 | title: About 6 | sub_heading: Skeleventy is more opinionated than your typical 'barebones' starter kit. It's minimal design is a good basis to build upon for your blog or portfolio. 7 | eleventyNavigation: 8 | key: About 9 | order: 2 10 | --- 11 | 12 | It's simple and flexible enough to change if you want to, but takes away the design headache for those who just want to get something up and running. 13 | 14 | ## Folder structure 15 | 16 | ### Eleventy 17 | 18 | - `site/` contains all the global data, templates and content 19 | - `utilities/` contains Eleventy helper `filters` and `transforms` 20 | - Each page should have it's own respective folder containing an `index.md` file 21 | - You can then choose the most appropriate layout for each page (or create more if you need to) 22 | - The navigation is powered by the official [Eleventy navigation plugin](https://www.11ty.dev/docs/plugins/navigation/) 23 | 24 | ### Assets 25 | 26 | - `css/` for compiled CSS 27 | - `js/` for compiled JavaScript 28 | - `images/` contains our site's images, an SVG icon sprite and a folder for meta images (OG, Twitter etc) 29 | 30 | ## The build pipeline 31 | 32 | [Laravel Mix](https://laravel-mix.com/docs/5.0/basic-example) gives us a nice API layer on top of Webpack. Skeleventy uses a simplistic set up, but you _can_ take advantage of extending Mix with custom Webpack configurations, code splitting and plugins such as PostCSS, if you so wish. 33 | 34 | You'll find the site's uncompiled SCSS and JS within `resources/` where Mix will be watching these directories for any changes. **Tip:** _it's best to always restart the server when creating any new partials or folders_ 35 | 36 | ### SCSS 37 | 38 | - `scss/` is structured into opinionated sub folders 39 | - The `_config.scss` file is where you can change the site's colours and the utility classes generated by Gorko 40 | - A typographic scale has already been set up using my personal favourite _Major Third_ scale. 41 | - **Tip:** *for more scales, check out [Type Scale](https://type-scale.com/)* 42 | 43 | ### Gorko 44 | 45 | I decided to remove Tailwind in favour of Gorko, purely for its simplicity and maintainability (especially for newer developers). Not having _too much_ to begin with and adding in what you need, will lead to a simpler, more maintainable codebase. Gorko lets you add a sprinkle of reusable utility classes to help keep your code DRY. _Credit to [Andy Bell](https://piccalil.li/) for making this handy little tool_ 46 | 47 | ### JavaScript 48 | 49 | - `utilities/` contains any global utility/helper functions 50 | - `modules/` contains your site's actual JavaScript, all kept neat and tidy within their respective _modular_ subfolders 51 | - You can import these subfolders into `main.js` using `import '@modules/example-module'` 52 | - **Tip:** *you can set up optional import aliases via the `webpack.mix.js` file* 53 | 54 | ### A note on responsive images 55 | 56 | Skeleventy doesn't have responsive images baked in, the main reason being: it's best using [CDN](https://cloudinary.com/invites/lpov9zyyucivvxsnalc5/zsykhj88yzvi0i8kugfs). Check out this [tutorial on setting up Eleventy with Cloudinary](https://sia.codes/posts/eleventy-and-cloudinary-images/). 57 | -------------------------------------------------------------------------------- /site/includes/layouts/post.njk: -------------------------------------------------------------------------------- 1 | --- 2 | layout: base 3 | --- 4 | 5 |
6 | 7 |
8 | 9 |
10 | 11 |

{{ title }}

12 | 13 | {% if sub_heading %} 14 | 15 |

{{ sub_heading }}

16 | 17 | {% endif %} 18 | 19 |
20 | 21 | 22 | 23 | {% if tags %} 24 | 25 |
26 | 27 |
    28 | 29 | {# this will create a comma for multiple category links #} 30 | {% set comma = joiner() %} 31 | 32 | {% for item in tags %} 33 | 34 | {%- if item !== 'blog' -%} 35 | 36 |
  • {{ comma() }} {{ item | capitalize }}
    • 37 | 38 | {%- endif -%} 39 | 40 | {% endfor %} 41 | 42 |
43 | 44 |
45 | 46 | {% endif %} 47 | 48 |
49 | 50 |
51 | 52 | {# featured post image #} 53 | {% if post_image %} 54 | 55 |
56 | 57 | {{ image_alt }} 58 | 59 | {% if image_alt %} 60 |
{{ image_alt }}
61 | {% endif %} 62 | 63 |
64 | 65 | {% endif %} 66 | 67 |
68 | 69 | {{ content | safe }} 70 | 71 | 77 | 78 |
79 | 80 |
81 | 82 | {# schema #} 83 | 107 | 108 |
109 | 110 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | [![Netlify Status](https://api.netlify.com/api/v1/badges/f4455669-0ce8-40ea-8ff5-5c31f0aadfa5/deploy-status)](https://app.netlify.com/sites/skeleventy/deploys) 2 | 3 | # An Eleventy starter skeleton 4 | 5 | Skeleventy gives you a rock solid foundation to build fast and accessible static websites. [View the demo site](http://skeleventy.netlify.app/). 6 | 7 | ## Features 8 | 9 | - A clean, minimal build pipeline with SCSS and [Laravel Mix](https://laravel-mix.com/docs/5.0/basic-example) for compiling assets 10 | - [Gorko](https://github.com/hankchizljaw/gorko), a smart little Sass-powered utility class generator 11 | - [Purgecss](https://purgecss.com/) to remove unused CSS 12 | - HTML minifier 13 | - Supports ES2017 JavaScript, with Babel compilation 14 | - SEO friendly page meta, including Open Graph and Twitter 15 | - Image lazy loading 16 | - Mobile navigation 17 | - XML Sitemap 18 | - Clean and simple blog, with categories and featured images 19 | 20 | ## Getting started 21 | 22 | ### Prerequisites 23 | Node `v10+` 24 | 25 | ### Installation 26 | 27 | 1. Clone the repo `git clone https://github.com/josephdyer/skeleventy.git` 28 | 2. `cd` into the project folder and run `npm install` 29 | 3. Start the local development server by running `npm run dev` **Tip:** _Eleventy has live reload baked in!_ 30 | 31 | ## Folder structure 32 | 33 | ### Eleventy 34 | 35 | - `site/` contains all the global data, templates and content 36 | - `utilities/` contains Eleventy helper `filters` and `transforms` 37 | - Each page should have it's own respective folder containing an `index.md` file 38 | - You can then choose the most appropriate layout for each page (or create more if you need to) 39 | - The navigation is powered by the official [Eleventy navigation plugin](https://www.11ty.dev/docs/plugins/navigation/) 40 | 41 | ### Assets 42 | 43 | - `css/` for compiled CSS 44 | - `js/` for compiled JavaScript 45 | - `images/` contains our site's images, an SVG icon sprite and a folder for meta images (OG, Twitter etc) 46 | 47 | ## The build pipeline 48 | 49 | [Laravel Mix](https://laravel-mix.com/docs/5.0/basic-example) gives us a nice API layer on top of Webpack. Skeleventy uses a simplistic set up, but you _can_ take advantage of extending Mix with custom Webpack configurations, code splitting and plugins such as PostCSS, if you so wish. 50 | 51 | You'll find the site's uncompiled SCSS and JS within `resources/` where Mix will be watching these directories for any changes. **Tip:** _it's best to always restart the server when creating any new partials or folders_ 52 | 53 | ### SCSS 54 | 55 | - `scss/` is structured into opinionated sub folders 56 | - The `_config.scss` file is where you can change the site's colours and the utility classes generated by Gorko 57 | - A typographic scale has already been set up using my personal favourite _Major Third_ scale. 58 | - **Tip:** *for more scales, check out [Type Scale](https://type-scale.com/)* 59 | 60 | ### Gorko 61 | 62 | I decided to remove Tailwind in favour of Gorko, purely for its simplicity and maintainability (especially for newer developers). Not having _too much_ to begin with and adding in what you need, will lead to a simpler, more maintainable codebase. Gorko lets you add a sprinkle of reusable utility classes to help keep your code DRY. _Credit to [Andy Bell](https://piccalil.li/) for making this handy little tool_ 63 | 64 | ### JavaScript 65 | 66 | - `utilities/` contains any global utility/helper functions 67 | - `modules/` contains your site's actual JavaScript, all kept neat and tidy within their respective _modular_ subfolders 68 | - You can import these subfolders into `main.js` using `import '@modules/example-module'` 69 | - **Tip:** *you can set up optional import aliases via the `webpack.mix.js` file* 70 | 71 | ### A note on responsive images 72 | 73 | Skeleventy doesn't have responsive images baked in, the main reason being: it's best using [CDN](https://cloudinary.com/invites/lpov9zyyucivvxsnalc5/zsykhj88yzvi0i8kugfs). Check out this [tutorial on setting up Eleventy with Cloudinary](https://sia.codes/posts/eleventy-and-cloudinary-images/). 74 | -------------------------------------------------------------------------------- /resources/scss/01-config/_config.scss: -------------------------------------------------------------------------------- 1 | 2 | //========== Gorko CSS Config ==========// 3 | 4 | /** 5 | * BASE SIZE 6 | * All calculations are based on this. It’s recommended that 7 | * you keep it at 1rem because that is the root font size. You 8 | * can set it to whatever you like and whatever unit you like. 9 | */ 10 | $gorko-base-size: 1rem; 11 | 12 | /** 13 | * SIZE SCALE 14 | * This is a Major Third scale that powers all the utilities that 15 | * it is relevant for (font-size, margin, padding). All items are 16 | * calcuated off the base size, so change that and cascade across 17 | * your whole project. 18 | */ 19 | $gorko-size-scale: ( 20 | '300': $gorko-base-size * 0.8, 21 | '400': $gorko-base-size, 22 | '500': $gorko-base-size * 1.25, 23 | '600': $gorko-base-size * 1.56, 24 | '700': $gorko-base-size * 1.95, 25 | '800': $gorko-base-size * 2.44, 26 | '900': $gorko-base-size * 3.05, 27 | '1000': $gorko-base-size * 3.81, 28 | '1100': $gorko-base-size * 4.76 29 | ); 30 | 31 | /** 32 | * COLORS 33 | * Colors are shared between backgrounds and text by default. 34 | * You can also use them to power borders, fills or shadows, for example. 35 | */ 36 | $gorko-colors: ( 37 | 'primary': #01093c, 38 | 'secondary': #24e0d0, 39 | 'grey': #4e5b71, 40 | 'white': #fff 41 | ); 42 | 43 | /** 44 | * CORE CONFIG 45 | * This powers everything from utility class generation to breakpoints 46 | * to enabling/disabling pre-built components/utilities. 47 | */ 48 | $gorko-config: ( 49 | 'bg': ( 50 | 'items': $gorko-colors, 51 | 'output': 'standard', 52 | 'property': 'background' 53 | ), 54 | 'color': ( 55 | 'items': $gorko-colors, 56 | 'output': 'standard', 57 | 'property': 'color' 58 | ), 59 | 'font': ( 60 | 'items': ( 61 | 'base': 'ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif', 62 | 'heading': 'ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif' 63 | ), 64 | 'output': 'standard', 65 | 'property': 'font-family' 66 | ), 67 | 'box': ( 68 | 'items': ( 69 | 'block': 'block', 70 | 'inline-block': 'inline-block', 71 | 'flex': 'flex', 72 | 'grid': 'grid', 73 | 'hidden': 'none' 74 | ), 75 | 'output': 'responsive', 76 | 'property': 'display' 77 | ), 78 | 'mt': ( 79 | 'items': $gorko-size-scale, 80 | 'output': 'standard', 81 | 'property': 'margin-top' 82 | ), 83 | 'mb': ( 84 | 'items': $gorko-size-scale, 85 | 'output': 'standard', 86 | 'property': 'margin-bottom' 87 | ), 88 | 'ml': ( 89 | 'items': $gorko-size-scale, 90 | 'output': 'standard', 91 | 'property': 'margin-left' 92 | ), 93 | 'mr': ( 94 | 'items': $gorko-size-scale, 95 | 'output': 'standard', 96 | 'property': 'margin-right' 97 | ), 98 | 'pt': ( 99 | 'items': $gorko-size-scale, 100 | 'output': 'standard', 101 | 'property': 'padding-top' 102 | ), 103 | 'pb': ( 104 | 'items': $gorko-size-scale, 105 | 'output': 'standard', 106 | 'property': 'padding-bottom' 107 | ), 108 | 'pl': ( 109 | 'items': $gorko-size-scale, 110 | 'output': 'standard', 111 | 'property': 'padding-left' 112 | ), 113 | 'pr': ( 114 | 'items': $gorko-size-scale, 115 | 'output': 'standard', 116 | 'property': 'padding-right' 117 | ), 118 | 'text': ( 119 | 'items': $gorko-size-scale, 120 | 'output': 'standard', 121 | 'property': 'font-size' 122 | ), 123 | 'leading': ( 124 | 'items': ( 125 | 'tight': '1.1', 126 | 'normal': '1.6', 127 | 'loose': '2' 128 | ), 129 | 'output': 'standard', 130 | 'property': 'line-height' 131 | ), 132 | 'weight': ( 133 | 'items': ( 134 | 'thin': '300', 135 | 'regular': '400', 136 | 'bold': '700' 137 | ), 138 | 'output': 'standard', 139 | 'property': 'font-weight' 140 | ), 141 | 'width': ( 142 | 'items': ( 143 | 'full': '100%', 144 | 'screen': '100vw', 145 | 'half': percentage(1/2), 146 | 'quarter': percentage(1/4), 147 | 'third': percentage(1/3) 148 | ), 149 | 'output': 'responsive', 150 | 'property': 'width' 151 | ), 152 | 'height': ( 153 | 'items': ( 154 | 'full': '100%', 155 | 'screen': '100vh' 156 | ), 157 | 'output': 'standard', 158 | 'property': 'height' 159 | ), 160 | 'length': ( 161 | 'items': ( 162 | 'compact': 25ch, 163 | 'optimal': 75ch 164 | ), 165 | 'output': 'standard', 166 | 'property': 'max-width' 167 | ), 168 | 'z': ( 169 | 'items': ( 170 | '-1': -1, 171 | '1': 1, 172 | '2': 2, 173 | '10': 10, 174 | '20': 20 175 | ), 176 | 'output': 'standard', 177 | 'property': 'z-index' 178 | ), 179 | 'breakpoints': ( 180 | 'mobileL' : '(min-width : 22.5em)', // 360px 181 | 'mobileXL' : '(min-width : 40em)', // 640px 182 | 'tablet' : '(min-width : 48em)', // 768px 183 | 'laptop' : '(min-width : 64em)', // 1024px 184 | 'desktop' : '(min-width : 80em)', // 1280px 185 | 'desktopL' : '(min-width : 90em)', // 1440px 186 | 'desktopXL' : '(min-width : 120em)' // 1920px 187 | ) 188 | ); 189 | 190 | 191 | -------------------------------------------------------------------------------- /resources/scss/04-layout/_site.scss: -------------------------------------------------------------------------------- 1 | 2 | //========== Site ==========// 3 | 4 | // wrapper 5 | .wrapper { 6 | min-height: 100vh; 7 | flex-direction: column; 8 | background-attachment: fixed; 9 | background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='674' height='337' viewBox='0 0 1600 800'%3E%3Cpath fill='%23010338' d='M1102.5 734.8c2.5-1.2 24.8-8.6 25.6-7.5.5.7-3.9 23.8-4.6 24.5C1123.3 752.1 1107.5 739.5 1102.5 734.8zM1226.3 229.1c0-.1-4.9-9.4-7-14.2-.1-.3-.3-1.1-.4-1.6-.1-.4-.3-.7-.6-.9-.3-.2-.6-.1-.8.1l-13.1 12.3c0 0 0 0 0 0-.2.2-.3.5-.4.8 0 .3 0 .7.2 1 .1.1 1.4 2.5 2.1 3.6 2.4 3.7 6.5 12.1 6.5 12.2.2.3.4.5.7.6.3 0 .5-.1.7-.3 0 0 1.8-2.5 2.7-3.6 1.5-1.6 3-3.2 4.6-4.7 1.2-1.2 1.6-1.4 2.1-1.6.5-.3 1.1-.5 2.5-1.9C1226.5 230.4 1226.6 229.6 1226.3 229.1zM33 770.3C33 770.3 33 770.3 33 770.3c0-.7-.5-1.2-1.2-1.2-.1 0-.3 0-.4.1-1.6.2-14.3.1-22.2 0-.3 0-.6.1-.9.4-.2.2-.4.5-.4.9 0 .2 0 4.9.1 5.9l.4 13.6c0 .3.2.6.4.9.2.2.5.3.8.3 0 0 .1 0 .1 0 7.3-.7 14.7-.9 22-.6.3 0 .7-.1.9-.3.2-.2.4-.6.4-.9C32.9 783.3 32.9 776.2 33 770.3z'/%3E%3Cpath fill='%23010338' d='M171.1 383.4c1.3-2.5 14.3-22 15.6-21.6.8.3 11.5 21.2 11.5 22.1C198.1 384.2 177.9 384 171.1 383.4zM596.4 711.8c-.1-.1-6.7-8.2-9.7-12.5-.2-.3-.5-1-.7-1.5-.2-.4-.4-.7-.7-.8-.3-.1-.6 0-.8.3L574 712c0 0 0 0 0 0-.2.2-.2.5-.2.9 0 .3.2.7.4.9.1.1 1.8 2.2 2.8 3.1 3.1 3.1 8.8 10.5 8.9 10.6.2.3.5.4.8.4.3 0 .5-.2.6-.5 0 0 1.2-2.8 2-4.1 1.1-1.9 2.3-3.7 3.5-5.5.9-1.4 1.3-1.7 1.7-2 .5-.4 1-.7 2.1-2.4C596.9 713.1 596.8 712.3 596.4 711.8zM727.5 179.9C727.5 179.9 727.5 179.9 727.5 179.9c.6.2 1.3-.2 1.4-.8 0-.1 0-.2 0-.4.2-1.4 2.8-12.6 4.5-19.5.1-.3 0-.6-.2-.8-.2-.3-.5-.4-.8-.5-.2 0-4.7-1.1-5.7-1.3l-13.4-2.7c-.3-.1-.7 0-.9.2-.2.2-.4.4-.5.6 0 0 0 .1 0 .1-.8 6.5-2.2 13.1-3.9 19.4-.1.3 0 .6.2.9.2.3.5.4.8.5C714.8 176.9 721.7 178.5 727.5 179.9zM728.5 178.1c-.1-.1-.2-.2-.4-.2C728.3 177.9 728.4 178 728.5 178.1z'/%3E%3Cg fill-opacity='0.06' fill='%23FFF'%3E%3Cpath d='M699.6 472.7c-1.5 0-2.8-.8-3.5-2.3-.8-1.9 0-4.2 1.9-5 3.7-1.6 6.8-4.7 8.4-8.5 1.6-3.8 1.7-8.1.2-11.9-.3-.9-.8-1.8-1.2-2.8-.8-1.7-1.8-3.7-2.3-5.9-.9-4.1-.2-8.6 2-12.8 1.7-3.1 4.1-6.1 7.6-9.1 1.6-1.4 4-1.2 5.3.4 1.4 1.6 1.2 4-.4 5.3-2.8 2.5-4.7 4.7-5.9 7-1.4 2.6-1.9 5.3-1.3 7.6.3 1.4 1 2.8 1.7 4.3.5 1.1 1 2.2 1.5 3.3 2.1 5.6 2 12-.3 17.6-2.3 5.5-6.8 10.1-12.3 12.5C700.6 472.6 700.1 472.7 699.6 472.7zM740.4 421.4c1.5-.2 3 .5 3.8 1.9 1.1 1.8.4 4.2-1.4 5.3-3.7 2.1-6.4 5.6-7.6 9.5-1.2 4-.8 8.4 1.1 12.1.4.9 1 1.7 1.6 2.7 1 1.7 2.2 3.5 3 5.7 1.4 4 1.2 8.7-.6 13.2-1.4 3.4-3.5 6.6-6.8 10.1-1.5 1.6-3.9 1.7-5.5.2-1.6-1.4-1.7-3.9-.2-5.4 2.6-2.8 4.3-5.3 5.3-7.7 1.1-2.8 1.3-5.6.5-7.9-.5-1.3-1.3-2.7-2.2-4.1-.6-1-1.3-2.1-1.9-3.2-2.8-5.4-3.4-11.9-1.7-17.8 1.8-5.9 5.8-11 11.2-14C739.4 421.6 739.9 421.4 740.4 421.4zM261.3 590.9c5.7 6.8 9 15.7 9.4 22.4.5 7.3-2.4 16.4-10.2 20.4-3 1.5-6.7 2.2-11.2 2.2-7.9-.1-12.9-2.9-15.4-8.4-2.1-4.7-2.3-11.4 1.8-15.9 3.2-3.5 7.8-4.1 11.2-1.6 1.2.9 1.5 2.7.6 3.9-.9 1.2-2.7 1.5-3.9.6-1.8-1.3-3.6.6-3.8.8-2.4 2.6-2.1 7-.8 9.9 1.5 3.4 4.7 5 10.4 5.1 3.6 0 6.4-.5 8.6-1.6 4.7-2.4 7.7-8.6 7.2-15-.5-7.3-5.3-18.2-13-23.9-4.2-3.1-8.5-4.1-12.9-3.1-3.1.7-6.2 2.4-9.7 5-6.6 5.1-11.7 11.8-14.2 19-2.7 7.7-2.1 15.8 1.9 23.9.7 1.4.1 3.1-1.3 3.7-1.4.7-3.1.1-3.7-1.3-4.6-9.4-5.4-19.2-2.2-28.2 2.9-8.2 8.6-15.9 16.1-21.6 4.1-3.1 8-5.1 11.8-6 6-1.4 12 0 17.5 4C257.6 586.9 259.6 588.8 261.3 590.9z'/%3E%3Ccircle cx='1013.7' cy='153.9' r='7.1'/%3E%3Ccircle cx='1024.3' cy='132.1' r='7.1'/%3E%3Ccircle cx='1037.3' cy='148.9' r='7.1'/%3E%3Cpath d='M1508.7 297.2c-4.8-5.4-9.7-10.8-14.8-16.2 5.6-5.6 11.1-11.5 15.6-18.2 1.2-1.7.7-4.1-1-5.2-1.7-1.2-4.1-.7-5.2 1-4.2 6.2-9.1 11.6-14.5 16.9-4.8-5-9.7-10-14.7-14.9-1.5-1.5-3.9-1.5-5.3 0-1.5 1.5-1.5 3.9 0 5.3 4.9 4.8 9.7 9.8 14.5 14.8-1.1 1.1-2.3 2.2-3.5 3.2-4.1 3.8-8.4 7.8-12.4 12-1.4 1.5-1.4 3.8 0 5.3 0 0 0 0 0 0 1.5 1.4 3.9 1.4 5.3-.1 3.9-4 8.1-7.9 12.1-11.7 1.2-1.1 2.3-2.2 3.5-3.3 4.9 5.3 9.8 10.6 14.6 15.9.1.1.1.1.2.2 1.4 1.4 3.7 1.5 5.2.2C1510 301.2 1510.1 298.8 1508.7 297.2zM327.6 248.6l-.4-2.6c-1.5-11.1-2.2-23.2-2.3-37 0-5.5 0-11.5.2-18.5 0-.7 0-1.5 0-2.3 0-5 0-11.2 3.9-13.5 2.2-1.3 5.1-1 8.5.9 5.7 3.1 13.2 8.7 17.5 14.9 5.5 7.8 7.3 16.9 5 25.7-3.2 12.3-15 31-30 32.1L327.6 248.6zM332.1 179.2c-.2 0-.3 0-.4.1-.1.1-.7.5-1.1 2.7-.3 1.9-.3 4.2-.3 6.3 0 .8 0 1.7 0 2.4-.2 6.9-.2 12.8-.2 18.3.1 12.5.7 23.5 2 33.7 11-2.7 20.4-18.1 23-27.8 1.9-7.2.4-14.8-4.2-21.3l0 0C347 188.1 340 183 335 180.3 333.6 179.5 332.6 179.2 332.1 179.2zM516.3 60.8c-.1 0-.2 0-.4-.1-2.4-.7-4-.9-6.7-.7-.7 0-1.3-.5-1.4-1.2 0-.7.5-1.3 1.2-1.4 3.1-.2 4.9 0 7.6.8.7.2 1.1.9.9 1.6C517.3 60.4 516.8 60.8 516.3 60.8zM506.1 70.5c-.5 0-1-.3-1.2-.8-.8-2.1-1.2-4.3-1.3-6.6 0-.7.5-1.3 1.2-1.3.7 0 1.3.5 1.3 1.2.1 2 .5 3.9 1.1 5.8.2.7-.1 1.4-.8 1.6C506.4 70.5 506.2 70.5 506.1 70.5zM494.1 64.4c-.4 0-.8-.2-1-.5-.4-.6-.3-1.4.2-1.8 1.8-1.4 3.7-2.6 5.8-3.6.6-.3 1.4 0 1.7.6.3.6 0 1.4-.6 1.7-1.9.9-3.7 2-5.3 3.3C494.7 64.3 494.4 64.4 494.1 64.4zM500.5 55.3c-.5 0-.9-.3-1.2-.7-.5-1-1.2-1.9-2.4-3.4-.3-.4-.7-.9-1.1-1.4-.4-.6-.3-1.4.2-1.8.6-.4 1.4-.3 1.8.2.4.5.8 1 1.1 1.4 1.3 1.6 2.1 2.6 2.7 3.9.3.6 0 1.4-.6 1.7C500.9 55.3 500.7 55.3 500.5 55.3zM506.7 55c-.3 0-.5-.1-.8-.2-.6-.4-.7-1.2-.3-1.8 1.2-1.7 2.3-3.4 3.3-5.2.3-.6 1.1-.9 1.7-.5.6.3.9 1.1.5 1.7-1 1.9-2.2 3.8-3.5 5.6C507.4 54.8 507.1 55 506.7 55zM1029.3 382.8c-.1 0-.2 0-.4-.1-2.4-.7-4-.9-6.7-.7-.7 0-1.3-.5-1.4-1.2 0-.7.5-1.3 1.2-1.4 3.1-.2 4.9 0 7.6.8.7.2 1.1.9.9 1.6C1030.3 382.4 1029.8 382.8 1029.3 382.8zM1019.1 392.5c-.5 0-1-.3-1.2-.8-.8-2.1-1.2-4.3-1.3-6.6 0-.7.5-1.3 1.2-1.3.7 0 1.3.5 1.3 1.2.1 2 .5 3.9 1.1 5.8.2.7-.1 1.4-.8 1.6C1019.4 392.5 1019.2 392.5 1019.1 392.5zM1007.1 386.4c-.4 0-.8-.2-1-.5-.4-.6-.3-1.4.2-1.8 1.8-1.4 3.7-2.6 5.8-3.6.6-.3 1.4 0 1.7.6.3.6 0 1.4-.6 1.7-1.9.9-3.7 2-5.3 3.3C1007.7 386.3 1007.4 386.4 1007.1 386.4zM1013.5 377.3c-.5 0-.9-.3-1.2-.7-.5-1-1.2-1.9-2.4-3.4-.3-.4-.7-.9-1.1-1.4-.4-.6-.3-1.4.2-1.8.6-.4 1.4-.3 1.8.2.4.5.8 1 1.1 1.4 1.3 1.6 2.1 2.6 2.7 3.9.3.6 0 1.4-.6 1.7C1013.9 377.3 1013.7 377.3 1013.5 377.3zM1019.7 377c-.3 0-.5-.1-.8-.2-.6-.4-.7-1.2-.3-1.8 1.2-1.7 2.3-3.4 3.3-5.2.3-.6 1.1-.9 1.7-.5.6.3.9 1.1.5 1.7-1 1.9-2.2 3.8-3.5 5.6C1020.4 376.8 1020.1 377 1019.7 377zM1329.7 573.4c-1.4 0-2.9-.2-4.5-.7-8.4-2.7-16.6-12.7-18.7-20-.4-1.4-.7-2.9-.9-4.4-8.1 3.3-15.5 10.6-15.4 21 0 1.5-1.2 2.7-2.7 2.8 0 0 0 0 0 0-1.5 0-2.7-1.2-2.7-2.7-.1-6.7 2.4-12.9 7-18 3.6-4 8.4-7.1 13.7-8.8.5-6.5 3.1-12.9 7.4-17.4 7-7.4 18.2-8.9 27.3-10.1l.7-.1c1.5-.2 2.9.9 3.1 2.3.2 1.5-.9 2.9-2.3 3.1l-.7.1c-8.6 1.2-18.4 2.5-24 8.4-3 3.2-5 7.7-5.7 12.4 7.9-1 17.7 1.3 24.3 5.7 4.3 2.9 7.1 7.8 7.2 12.7.2 4.3-1.7 8.3-5.2 11.1C1335.2 572.4 1332.6 573.4 1329.7 573.4zM1311 546.7c.1 1.5.4 3 .8 4.4 1.7 5.8 8.7 14.2 15.1 16.3 2.8.9 5.1.5 7.2-1.1 2.7-2.1 3.2-4.8 3.1-6.6-.1-3.2-2-6.4-4.8-8.3C1326.7 547.5 1317.7 545.6 1311 546.7z'/%3E%3C/g%3E%3C/svg%3E"); 10 | } 11 | 12 | @include media-query('mobileXL') { 13 | 14 | .wrapper { 15 | padding-bottom: 0; 16 | } 17 | } 18 | 19 | -------------------------------------------------------------------------------- /css/main.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8";.bg-primary{background:#01093c}.bg-secondary{background:#24e0d0}.bg-grey{background:#4e5b71}.bg-white{background:#fff}.color-primary{color:#01093c}.color-secondary{color:#24e0d0}.color-grey{color:#4e5b71}.color-white{color:#fff}.font-base,.font-heading{font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,sans-serif}.box-block{display:block}.box-inline-block{display:inline-block}.box-flex{display:flex}.box-grid{display:grid}.box-hidden{display:none}.mt-300{margin-top:.8rem}.mt-400{margin-top:1rem}.mt-500{margin-top:1.25rem}.mt-600{margin-top:1.56rem}.mt-700{margin-top:1.95rem}.mt-800{margin-top:2.44rem}.mt-900{margin-top:3.05rem}.mt-1000{margin-top:3.81rem}.mt-1100{margin-top:4.76rem}.mb-300{margin-bottom:.8rem}.mb-400{margin-bottom:1rem}.mb-500{margin-bottom:1.25rem}.mb-600{margin-bottom:1.56rem}.mb-700{margin-bottom:1.95rem}.mb-800{margin-bottom:2.44rem}.mb-900{margin-bottom:3.05rem}.mb-1000{margin-bottom:3.81rem}.mb-1100{margin-bottom:4.76rem}.ml-300{margin-left:.8rem}.ml-400{margin-left:1rem}.ml-500{margin-left:1.25rem}.ml-600{margin-left:1.56rem}.ml-700{margin-left:1.95rem}.ml-800{margin-left:2.44rem}.ml-900{margin-left:3.05rem}.ml-1000{margin-left:3.81rem}.ml-1100{margin-left:4.76rem}.mr-300{margin-right:.8rem}.mr-400{margin-right:1rem}.mr-500{margin-right:1.25rem}.mr-600{margin-right:1.56rem}.mr-700{margin-right:1.95rem}.mr-800{margin-right:2.44rem}.mr-900{margin-right:3.05rem}.mr-1000{margin-right:3.81rem}.mr-1100{margin-right:4.76rem}.pt-300{padding-top:.8rem}.pt-400{padding-top:1rem}.pt-500{padding-top:1.25rem}.pt-600{padding-top:1.56rem}.pt-700{padding-top:1.95rem}.pt-800{padding-top:2.44rem}.pt-900{padding-top:3.05rem}.pt-1000{padding-top:3.81rem}.pt-1100{padding-top:4.76rem}.pb-300{padding-bottom:.8rem}.pb-400{padding-bottom:1rem}.pb-500{padding-bottom:1.25rem}.pb-600{padding-bottom:1.56rem}.pb-700{padding-bottom:1.95rem}.pb-800{padding-bottom:2.44rem}.pb-900{padding-bottom:3.05rem}.pb-1000{padding-bottom:3.81rem}.pb-1100{padding-bottom:4.76rem}.pl-300{padding-left:.8rem}.pl-400{padding-left:1rem}.pl-500{padding-left:1.25rem}.pl-600{padding-left:1.56rem}.pl-700{padding-left:1.95rem}.pl-800{padding-left:2.44rem}.pl-900{padding-left:3.05rem}.pl-1000{padding-left:3.81rem}.pl-1100{padding-left:4.76rem}.pr-300{padding-right:.8rem}.pr-400{padding-right:1rem}.pr-500{padding-right:1.25rem}.pr-600{padding-right:1.56rem}.pr-700{padding-right:1.95rem}.pr-800{padding-right:2.44rem}.pr-900{padding-right:3.05rem}.pr-1000{padding-right:3.81rem}.pr-1100{padding-right:4.76rem}.text-300{font-size:.8rem}.text-400{font-size:1rem}.text-500{font-size:1.25rem}.text-600{font-size:1.56rem}.text-700{font-size:1.95rem}.text-800{font-size:2.44rem}.text-900{font-size:3.05rem}.text-1000{font-size:3.81rem}.text-1100{font-size:4.76rem}.leading-tight{line-height:1.1}.leading-normal{line-height:1.6}.leading-loose{line-height:2}.weight-thin{font-weight:300}.weight-regular{font-weight:400}.weight-bold{font-weight:700}.width-full{width:100%}.width-screen{width:100vw}.width-half{width:50%}.width-quarter{width:25%}.width-third{width:33.3333333333%}.height-full{height:100%}.height-screen{height:100vh}.length-compact{max-width:25ch}.length-optimal{max-width:75ch}.z-20{z-index:20}@media screen and (min-width:22.5em){.mobileL\:box-block{display:block}.mobileL\:box-inline-block{display:inline-block}.mobileL\:box-flex{display:flex}.mobileL\:box-grid{display:grid}.mobileL\:box-hidden{display:none}.mobileL\:width-full{width:100%}.mobileL\:width-screen{width:100vw}.mobileL\:width-half{width:50%}.mobileL\:width-quarter{width:25%}.mobileL\:width-third{width:33.3333333333%}}@media screen and (min-width:40em){.mobileXL\:box-block{display:block}.mobileXL\:box-inline-block{display:inline-block}.mobileXL\:box-flex{display:flex}.mobileXL\:box-grid{display:grid}.mobileXL\:box-hidden{display:none}.mobileXL\:width-full{width:100%}.mobileXL\:width-screen{width:100vw}.mobileXL\:width-half{width:50%}.mobileXL\:width-quarter{width:25%}.mobileXL\:width-third{width:33.3333333333%}}@media screen and (min-width:48em){.tablet\:box-block{display:block}.tablet\:box-inline-block{display:inline-block}.tablet\:box-flex{display:flex}.tablet\:box-grid{display:grid}.tablet\:box-hidden{display:none}.tablet\:width-full{width:100%}.tablet\:width-screen{width:100vw}.tablet\:width-half{width:50%}.tablet\:width-quarter{width:25%}.tablet\:width-third{width:33.3333333333%}}@media screen and (min-width:64em){.laptop\:box-block{display:block}.laptop\:box-inline-block{display:inline-block}.laptop\:box-flex{display:flex}.laptop\:box-grid{display:grid}.laptop\:box-hidden{display:none}.laptop\:width-full{width:100%}.laptop\:width-screen{width:100vw}.laptop\:width-half{width:50%}.laptop\:width-quarter{width:25%}.laptop\:width-third{width:33.3333333333%}}@media screen and (min-width:80em){.desktop\:box-block{display:block}.desktop\:box-inline-block{display:inline-block}.desktop\:box-flex{display:flex}.desktop\:box-grid{display:grid}.desktop\:box-hidden{display:none}.desktop\:width-full{width:100%}.desktop\:width-screen{width:100vw}.desktop\:width-half{width:50%}.desktop\:width-quarter{width:25%}.desktop\:width-third{width:33.3333333333%}}@media screen and (min-width:90em){.desktopL\:box-block{display:block}.desktopL\:box-inline-block{display:inline-block}.desktopL\:box-flex{display:flex}.desktopL\:box-grid{display:grid}.desktopL\:box-hidden{display:none}.desktopL\:width-full{width:100%}.desktopL\:width-screen{width:100vw}.desktopL\:width-half{width:50%}.desktopL\:width-quarter{width:25%}.desktopL\:width-third{width:33.3333333333%}}@media screen and (min-width:120em){.desktopXL\:box-block{display:block}.desktopXL\:box-inline-block{display:inline-block}.desktopXL\:box-flex{display:flex}.desktopXL\:box-grid{display:grid}.desktopXL\:box-hidden{display:none}.desktopXL\:width-full{width:100%}.desktopXL\:width-screen{width:100vw}.desktopXL\:width-half{width:50%}.desktopXL\:width-quarter{width:25%}.desktopXL\:width-third{width:33.3333333333%}}:root{--max-width:80rem;--gap:1.56rem;--base-font-size:1rem;--ratio:1.1;--text-300:calc(var(--base-font-size)/var(--ratio)/var(--ratio));--text-400:calc(var(--text-300)*var(--ratio));--text-500:calc(var(--text-400)*var(--ratio)*var(--ratio));--text-600:calc(var(--text-500)*var(--ratio));--text-700:calc(var(--text-600)*var(--ratio));--text-800:calc(var(--text-700)*var(--ratio));--text-900:calc(var(--text-800)*var(--ratio));--text-1000:calc(var(--text-900)*var(--ratio));--text-1100:calc(var(--text-1000)*var(--ratio));--border-radius:.25rem;--border-size:.15rem;--transition-duration:.25s;--transition-timing:ease-out}@media (min-width:48em){:root{--ratio:1.2}}@media (min-width:64em){:root{--ratio:1.25}}.inner{width:100%;margin:0 auto;max-width:var(--max-width);padding-left:1.56rem;padding-right:1.56rem}.flow>*+*{margin-top:var(--gap)}@media (min-width:48em){.flow>*+*{--gap:1.95rem}}[data-src]{opacity:0}.loaded{opacity:1;transition:opacity var(--transition-duration) var(--transition-timing)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}*,:after,:before{box-sizing:border-box}html{min-height:100%;scroll-behavior:smooth}body{overflow-x:hidden;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}blockquote,body,dd,dl,figure,h1,h2,h3,h4,ol,p,ul{margin:0}img{display:block;max-width:100%;height:auto}button,input,select,textarea{font:inherit}@media (prefers-reduced-motion:reduce){*{-webkit-animation-duration:.01ms!important;animation-duration:.01ms!important;-webkit-animation-iteration-count:1!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}ol[class],ul[class]{list-style:none;padding:0}body{font-size:var(--text-500)}h1,h2,h3{line-height:1.1;letter-spacing:-.01rem}h1{--gap:1.95rem;font-size:var(--text-900);margin:0 0 var(--gap)}h2{font-size:var(--text-800)}h3{font-size:var(--text-700)}.content{word-wrap:break-word}.sub-heading{font-size:var(--text-700);line-height:1.5}ol,ul{padding:0 0 0 1.25rem}a{text-decoration:none;transition:color var(--transition-duration) var(--transition-timing)}a:not([class]){color:currentColor;border-bottom:var(--border-size) solid #24e0d0;padding-bottom:.1rem;-webkit-text-decoration-skip:ink;text-decoration-skip-ink:auto}a:not([class]):hover{color:#24e0d0}:focus{outline:1px solid #24e0d0;outline-offset:.25rem}.wrapper{min-height:100vh;flex-direction:column;background-attachment:fixed;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='674' height='337' viewBox='0 0 1600 800'%3E%3Cpath fill='%23010338' d='M1102.5 734.8c2.5-1.2 24.8-8.6 25.6-7.5.5.7-3.9 23.8-4.6 24.5-.2.3-16-12.3-21-17zm123.8-505.7c0-.1-4.9-9.4-7-14.2-.1-.3-.3-1.1-.4-1.6-.1-.4-.3-.7-.6-.9-.3-.2-.6-.1-.8.1l-13.1 12.3c-.2.2-.3.5-.4.8 0 .3 0 .7.2 1 .1.1 1.4 2.5 2.1 3.6 2.4 3.7 6.5 12.1 6.5 12.2.2.3.4.5.7.6.3 0 .5-.1.7-.3 0 0 1.8-2.5 2.7-3.6 1.5-1.6 3-3.2 4.6-4.7 1.2-1.2 1.6-1.4 2.1-1.6.5-.3 1.1-.5 2.5-1.9.4-.5.5-1.3.2-1.8zM33 770.3c0-.7-.5-1.2-1.2-1.2-.1 0-.3 0-.4.1-1.6.2-14.3.1-22.2 0-.3 0-.6.1-.9.4-.2.2-.4.5-.4.9 0 .2 0 4.9.1 5.9l.4 13.6c0 .3.2.6.4.9.2.2.5.3.8.3h.1c7.3-.7 14.7-.9 22-.6.3 0 .7-.1.9-.3.2-.2.4-.6.4-.9-.1-6.1-.1-13.2 0-19.1zM171.1 383.4c1.3-2.5 14.3-22 15.6-21.6.8.3 11.5 21.2 11.5 22.1-.1.3-20.3.1-27.1-.5zm425.3 328.4c-.1-.1-6.7-8.2-9.7-12.5-.2-.3-.5-1-.7-1.5-.2-.4-.4-.7-.7-.8-.3-.1-.6 0-.8.3L574 712c-.2.2-.2.5-.2.9 0 .3.2.7.4.9.1.1 1.8 2.2 2.8 3.1 3.1 3.1 8.8 10.5 8.9 10.6.2.3.5.4.8.4.3 0 .5-.2.6-.5 0 0 1.2-2.8 2-4.1 1.1-1.9 2.3-3.7 3.5-5.5.9-1.4 1.3-1.7 1.7-2 .5-.4 1-.7 2.1-2.4.3-.3.2-1.1-.2-1.6zm131.1-531.9c.6.2 1.3-.2 1.4-.8v-.4c.2-1.4 2.8-12.6 4.5-19.5.1-.3 0-.6-.2-.8-.2-.3-.5-.4-.8-.5-.2 0-4.7-1.1-5.7-1.3l-13.4-2.7c-.3-.1-.7 0-.9.2-.2.2-.4.4-.5.6v.1c-.8 6.5-2.2 13.1-3.9 19.4-.1.3 0 .6.2.9.2.3.5.4.8.5 5.8 1.3 12.7 2.9 18.5 4.3zm1-1.8c-.1-.1-.2-.2-.4-.2.2 0 .3.1.4.2z'/%3E%3Cg fill-opacity='.06' fill='%23FFF'%3E%3Cpath d='M699.6 472.7c-1.5 0-2.8-.8-3.5-2.3-.8-1.9 0-4.2 1.9-5 3.7-1.6 6.8-4.7 8.4-8.5 1.6-3.8 1.7-8.1.2-11.9-.3-.9-.8-1.8-1.2-2.8-.8-1.7-1.8-3.7-2.3-5.9-.9-4.1-.2-8.6 2-12.8 1.7-3.1 4.1-6.1 7.6-9.1 1.6-1.4 4-1.2 5.3.4 1.4 1.6 1.2 4-.4 5.3-2.8 2.5-4.7 4.7-5.9 7-1.4 2.6-1.9 5.3-1.3 7.6.3 1.4 1 2.8 1.7 4.3l1.5 3.3c2.1 5.6 2 12-.3 17.6-2.3 5.5-6.8 10.1-12.3 12.5-.4.2-.9.3-1.4.3zm40.8-51.3c1.5-.2 3 .5 3.8 1.9 1.1 1.8.4 4.2-1.4 5.3-3.7 2.1-6.4 5.6-7.6 9.5-1.2 4-.8 8.4 1.1 12.1.4.9 1 1.7 1.6 2.7 1 1.7 2.2 3.5 3 5.7 1.4 4 1.2 8.7-.6 13.2-1.4 3.4-3.5 6.6-6.8 10.1-1.5 1.6-3.9 1.7-5.5.2-1.6-1.4-1.7-3.9-.2-5.4 2.6-2.8 4.3-5.3 5.3-7.7 1.1-2.8 1.3-5.6.5-7.9-.5-1.3-1.3-2.7-2.2-4.1-.6-1-1.3-2.1-1.9-3.2-2.8-5.4-3.4-11.9-1.7-17.8 1.8-5.9 5.8-11 11.2-14 .4-.4.9-.6 1.4-.6zM261.3 590.9c5.7 6.8 9 15.7 9.4 22.4.5 7.3-2.4 16.4-10.2 20.4-3 1.5-6.7 2.2-11.2 2.2-7.9-.1-12.9-2.9-15.4-8.4-2.1-4.7-2.3-11.4 1.8-15.9 3.2-3.5 7.8-4.1 11.2-1.6 1.2.9 1.5 2.7.6 3.9-.9 1.2-2.7 1.5-3.9.6-1.8-1.3-3.6.6-3.8.8-2.4 2.6-2.1 7-.8 9.9 1.5 3.4 4.7 5 10.4 5.1 3.6 0 6.4-.5 8.6-1.6 4.7-2.4 7.7-8.6 7.2-15-.5-7.3-5.3-18.2-13-23.9-4.2-3.1-8.5-4.1-12.9-3.1-3.1.7-6.2 2.4-9.7 5-6.6 5.1-11.7 11.8-14.2 19-2.7 7.7-2.1 15.8 1.9 23.9.7 1.4.1 3.1-1.3 3.7-1.4.7-3.1.1-3.7-1.3-4.6-9.4-5.4-19.2-2.2-28.2 2.9-8.2 8.6-15.9 16.1-21.6 4.1-3.1 8-5.1 11.8-6 6-1.4 12 0 17.5 4 2.1 1.7 4.1 3.6 5.8 5.7z'/%3E%3Ccircle cx='1013.7' cy='153.9' r='7.1'/%3E%3Ccircle cx='1024.3' cy='132.1' r='7.1'/%3E%3Ccircle cx='1037.3' cy='148.9' r='7.1'/%3E%3Cpath d='M1508.7 297.2c-4.8-5.4-9.7-10.8-14.8-16.2 5.6-5.6 11.1-11.5 15.6-18.2 1.2-1.7.7-4.1-1-5.2-1.7-1.2-4.1-.7-5.2 1-4.2 6.2-9.1 11.6-14.5 16.9-4.8-5-9.7-10-14.7-14.9-1.5-1.5-3.9-1.5-5.3 0-1.5 1.5-1.5 3.9 0 5.3 4.9 4.8 9.7 9.8 14.5 14.8-1.1 1.1-2.3 2.2-3.5 3.2-4.1 3.8-8.4 7.8-12.4 12-1.4 1.5-1.4 3.8 0 5.3 1.5 1.4 3.9 1.4 5.3-.1 3.9-4 8.1-7.9 12.1-11.7 1.2-1.1 2.3-2.2 3.5-3.3 4.9 5.3 9.8 10.6 14.6 15.9l.2.2c1.4 1.4 3.7 1.5 5.2.2 1.7-1.2 1.8-3.6.4-5.2zM327.6 248.6l-.4-2.6c-1.5-11.1-2.2-23.2-2.3-37 0-5.5 0-11.5.2-18.5v-2.3c0-5 0-11.2 3.9-13.5 2.2-1.3 5.1-1 8.5.9 5.7 3.1 13.2 8.7 17.5 14.9 5.5 7.8 7.3 16.9 5 25.7-3.2 12.3-15 31-30 32.1l-2.4.3zm4.5-69.4c-.2 0-.3 0-.4.1-.1.1-.7.5-1.1 2.7-.3 1.9-.3 4.2-.3 6.3v2.4c-.2 6.9-.2 12.8-.2 18.3.1 12.5.7 23.5 2 33.7 11-2.7 20.4-18.1 23-27.8 1.9-7.2.4-14.8-4.2-21.3-3.9-5.5-10.9-10.6-15.9-13.3-1.4-.8-2.4-1.1-2.9-1.1zM516.3 60.8c-.1 0-.2 0-.4-.1-2.4-.7-4-.9-6.7-.7-.7 0-1.3-.5-1.4-1.2 0-.7.5-1.3 1.2-1.4 3.1-.2 4.9 0 7.6.8.7.2 1.1.9.9 1.6-.2.6-.7 1-1.2 1zm-10.2 9.7c-.5 0-1-.3-1.2-.8-.8-2.1-1.2-4.3-1.3-6.6 0-.7.5-1.3 1.2-1.3s1.3.5 1.3 1.2c.1 2 .5 3.9 1.1 5.8.2.7-.1 1.4-.8 1.6 0 .1-.2.1-.3.1zm-12-6.1c-.4 0-.8-.2-1-.5-.4-.6-.3-1.4.2-1.8 1.8-1.4 3.7-2.6 5.8-3.6.6-.3 1.4 0 1.7.6.3.6 0 1.4-.6 1.7-1.9.9-3.7 2-5.3 3.3-.2.2-.5.3-.8.3zm6.4-9.1c-.5 0-.9-.3-1.2-.7-.5-1-1.2-1.9-2.4-3.4-.3-.4-.7-.9-1.1-1.4-.4-.6-.3-1.4.2-1.8.6-.4 1.4-.3 1.8.2.4.5.8 1 1.1 1.4 1.3 1.6 2.1 2.6 2.7 3.9.3.6 0 1.4-.6 1.7-.1.1-.3.1-.5.1zm6.2-.3c-.3 0-.5-.1-.8-.2-.6-.4-.7-1.2-.3-1.8 1.2-1.7 2.3-3.4 3.3-5.2.3-.6 1.1-.9 1.7-.5.6.3.9 1.1.5 1.7-1 1.9-2.2 3.8-3.5 5.6-.2.2-.5.4-.9.4zm522.6 327.8c-.1 0-.2 0-.4-.1-2.4-.7-4-.9-6.7-.7-.7 0-1.3-.5-1.4-1.2 0-.7.5-1.3 1.2-1.4 3.1-.2 4.9 0 7.6.8.7.2 1.1.9.9 1.6-.2.6-.7 1-1.2 1zm-10.2 9.7c-.5 0-1-.3-1.2-.8-.8-2.1-1.2-4.3-1.3-6.6 0-.7.5-1.3 1.2-1.3s1.3.5 1.3 1.2c.1 2 .5 3.9 1.1 5.8.2.7-.1 1.4-.8 1.6 0 .1-.2.1-.3.1zm-12-6.1c-.4 0-.8-.2-1-.5-.4-.6-.3-1.4.2-1.8 1.8-1.4 3.7-2.6 5.8-3.6.6-.3 1.4 0 1.7.6.3.6 0 1.4-.6 1.7-1.9.9-3.7 2-5.3 3.3-.2.2-.5.3-.8.3zm6.4-9.1c-.5 0-.9-.3-1.2-.7-.5-1-1.2-1.9-2.4-3.4-.3-.4-.7-.9-1.1-1.4-.4-.6-.3-1.4.2-1.8.6-.4 1.4-.3 1.8.2.4.5.8 1 1.1 1.4 1.3 1.6 2.1 2.6 2.7 3.9.3.6 0 1.4-.6 1.7-.1.1-.3.1-.5.1zm6.2-.3c-.3 0-.5-.1-.8-.2-.6-.4-.7-1.2-.3-1.8 1.2-1.7 2.3-3.4 3.3-5.2.3-.6 1.1-.9 1.7-.5.6.3.9 1.1.5 1.7-1 1.9-2.2 3.8-3.5 5.6-.2.2-.5.4-.9.4zm310 196.4c-1.4 0-2.9-.2-4.5-.7-8.4-2.7-16.6-12.7-18.7-20-.4-1.4-.7-2.9-.9-4.4-8.1 3.3-15.5 10.6-15.4 21 0 1.5-1.2 2.7-2.7 2.8-1.5 0-2.7-1.2-2.7-2.7-.1-6.7 2.4-12.9 7-18 3.6-4 8.4-7.1 13.7-8.8.5-6.5 3.1-12.9 7.4-17.4 7-7.4 18.2-8.9 27.3-10.1l.7-.1c1.5-.2 2.9.9 3.1 2.3.2 1.5-.9 2.9-2.3 3.1l-.7.1c-8.6 1.2-18.4 2.5-24 8.4-3 3.2-5 7.7-5.7 12.4 7.9-1 17.7 1.3 24.3 5.7 4.3 2.9 7.1 7.8 7.2 12.7.2 4.3-1.7 8.3-5.2 11.1-2.4 1.6-5 2.6-7.9 2.6zm-18.7-26.7c.1 1.5.4 3 .8 4.4 1.7 5.8 8.7 14.2 15.1 16.3 2.8.9 5.1.5 7.2-1.1 2.7-2.1 3.2-4.8 3.1-6.6-.1-3.2-2-6.4-4.8-8.3-5.7-3.9-14.7-5.8-21.4-4.7z'/%3E%3C/g%3E%3C/svg%3E")}@media (min-width:40em){.wrapper{padding-bottom:0}}.logo{--logo-size:1.25rem;font-size:var(--logo-size);margin:0 auto}.logo:hover{color:#24e0d0}@media (min-width:40em){.logo{--logo-size:1.56rem;margin:0 auto 0 0}}@media (min-width:40em){.header-inner{align-items:center;justify-content:space-between}}.nav .link{height:3.05rem;line-height:3.05rem}.nav .link.active,.nav .link:hover{color:#24e0d0}.nav .link-get-started{border-radius:var(--border-radius);transition:background-color var(--transition-duration) var(--transition-timing)}.nav .link-get-started:hover{background:#fff;color:#01093c}.mobile-nav{--transition-duration:.3s;position:fixed;top:0;left:0;overflow-y:auto;transform:translate3d(-100%,0,0);transition:transform var(--transition-duration) cubic-bezier(.77,0,.175,1);transition-delay:.1s;will-change:transform}.mobile-nav.menu-visible{transform:translateZ(0)}.mobile-nav .link{--gap:.25rem;padding:var(--gap) 0}.mobile-nav .link.active,.mobile-nav .link:hover{color:#24e0d0}.mobile-nav-toggle{position:fixed;bottom:0;height:3.05rem;align-items:center;justify-content:center;border:0;outline:none}.mobile-nav-toggle .mobile-nav-icon{flex-direction:column}.mobile-nav-toggle .icon-line{--transition-duration:.2s;--transition-timing:cubic-bezier(0,0,.2,1);height:2px;width:1.25rem;transform-origin:7px 1px;transition:transform var(--transition-duration) var(--transition-timing),opacity var(--transition-duration) var(--transition-timing)}.mobile-nav-toggle .icon-line:not(:last-child){margin-bottom:.25rem}.mobile-nav-toggle.expanded .icon-line{margin:0}.mobile-nav-toggle.expanded .icon-line:first-child{transform:rotate(45deg)}.mobile-nav-toggle.expanded .icon-line:nth-child(2){opacity:0}.mobile-nav-toggle.expanded .icon-line:last-child{transform:rotate(-45deg)}.main{flex-direction:column;flex:1}.main:focus{outline:0}.page-header{--gap:2.44rem;margin-bottom:var(--gap)}@media (min-width:48em){.page-header{--gap:3.05rem}}.footer-inner{align-items:center;justify-content:space-between}.button{display:inline-block;background-color:#24e0d0;border:0;border-radius:var(--border-radius);color:#01093c;padding:.8rem 1.25rem;transition:background-color var(--transition-duration) var(--transition-timing);font-weight:700}.button:hover{background:#fff}.pagination{--gap:3.81rem}.pagination .items{justify-content:space-between;padding:0}.input,.textarea{border:0;border-radius:var(--border-radius);padding:0 .5rem}.input{height:2.44rem}.textarea{height:4.76rem}.social-icons .icon-link:hover{color:#24e0d0}.social-icons .icon{--social-icon-size:1.25rem;width:var(--social-icon-size);height:var(--social-icon-size)}.type-post .length-optimal{margin-left:auto;margin-right:auto}.type-post .categories .category:first-child:before{content:"  /  "}.post-image{border-radius:var(--border-radius)}.post-title{font-size:var(--text-1100)}.post-image-caption{text-align:center}.posts{--gap:4.76rem;align-items:stretch;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));gap:var(--gap);padding-bottom:15vh}.card,.card-header{position:relative}.card-image{border-radius:var(--border-radius)}.card-categories{position:absolute;bottom:0;left:.8rem;transform:translateY(50%)}.card-categories .category{--border-radius:.15rem;border-radius:var(--border-radius);padding:.25rem .5rem}.card-title-link{border-bottom:var(--border-size) solid #24e0d0;transition:border-color var(--transition-duration) var(--transition-timing)}.card-title-link:hover{border-bottom-color:#01093c}.card .datetime{position:absolute;bottom:0}@media (min-width:48em){.card-title-link{font-size:var(--text-700)}}@media (min-width:64em){.posts{grid-template-columns:repeat(auto-fill,minmax(20rem,1fr))}} 2 | -------------------------------------------------------------------------------- /css/main.min.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8";.bg-primary{background:#01093c}.bg-secondary{background:#24e0d0}.bg-grey{background:#4e5b71}.bg-white{background:#fff}.color-primary{color:#01093c}.color-secondary{color:#24e0d0}.color-grey{color:#4e5b71}.color-white{color:#fff}.font-base,.font-heading{font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,sans-serif}.box-block{display:block}.box-inline-block{display:inline-block}.box-flex{display:flex}.box-grid{display:grid}.box-hidden{display:none}.mt-300{margin-top:.8rem}.mt-400{margin-top:1rem}.mt-500{margin-top:1.25rem}.mt-600{margin-top:1.56rem}.mt-700{margin-top:1.95rem}.mt-800{margin-top:2.44rem}.mt-900{margin-top:3.05rem}.mt-1000{margin-top:3.81rem}.mt-1100{margin-top:4.76rem}.mb-300{margin-bottom:.8rem}.mb-400{margin-bottom:1rem}.mb-500{margin-bottom:1.25rem}.mb-600{margin-bottom:1.56rem}.mb-700{margin-bottom:1.95rem}.mb-800{margin-bottom:2.44rem}.mb-900{margin-bottom:3.05rem}.mb-1000{margin-bottom:3.81rem}.mb-1100{margin-bottom:4.76rem}.ml-300{margin-left:.8rem}.ml-400{margin-left:1rem}.ml-500{margin-left:1.25rem}.ml-600{margin-left:1.56rem}.ml-700{margin-left:1.95rem}.ml-800{margin-left:2.44rem}.ml-900{margin-left:3.05rem}.ml-1000{margin-left:3.81rem}.ml-1100{margin-left:4.76rem}.mr-300{margin-right:.8rem}.mr-400{margin-right:1rem}.mr-500{margin-right:1.25rem}.mr-600{margin-right:1.56rem}.mr-700{margin-right:1.95rem}.mr-800{margin-right:2.44rem}.mr-900{margin-right:3.05rem}.mr-1000{margin-right:3.81rem}.mr-1100{margin-right:4.76rem}.pt-300{padding-top:.8rem}.pt-400{padding-top:1rem}.pt-500{padding-top:1.25rem}.pt-600{padding-top:1.56rem}.pt-700{padding-top:1.95rem}.pt-800{padding-top:2.44rem}.pt-900{padding-top:3.05rem}.pt-1000{padding-top:3.81rem}.pt-1100{padding-top:4.76rem}.pb-300{padding-bottom:.8rem}.pb-400{padding-bottom:1rem}.pb-500{padding-bottom:1.25rem}.pb-600{padding-bottom:1.56rem}.pb-700{padding-bottom:1.95rem}.pb-800{padding-bottom:2.44rem}.pb-900{padding-bottom:3.05rem}.pb-1000{padding-bottom:3.81rem}.pb-1100{padding-bottom:4.76rem}.pl-300{padding-left:.8rem}.pl-400{padding-left:1rem}.pl-500{padding-left:1.25rem}.pl-600{padding-left:1.56rem}.pl-700{padding-left:1.95rem}.pl-800{padding-left:2.44rem}.pl-900{padding-left:3.05rem}.pl-1000{padding-left:3.81rem}.pl-1100{padding-left:4.76rem}.pr-300{padding-right:.8rem}.pr-400{padding-right:1rem}.pr-500{padding-right:1.25rem}.pr-600{padding-right:1.56rem}.pr-700{padding-right:1.95rem}.pr-800{padding-right:2.44rem}.pr-900{padding-right:3.05rem}.pr-1000{padding-right:3.81rem}.pr-1100{padding-right:4.76rem}.text-300{font-size:.8rem}.text-400{font-size:1rem}.text-500{font-size:1.25rem}.text-600{font-size:1.56rem}.text-700{font-size:1.95rem}.text-800{font-size:2.44rem}.text-900{font-size:3.05rem}.text-1000{font-size:3.81rem}.text-1100{font-size:4.76rem}.leading-tight{line-height:1.1}.leading-normal{line-height:1.6}.leading-loose{line-height:2}.weight-thin{font-weight:300}.weight-regular{font-weight:400}.weight-bold{font-weight:700}.width-full{width:100%}.width-screen{width:100vw}.width-half{width:50%}.width-quarter{width:25%}.width-third{width:33.3333333333%}.height-full{height:100%}.height-screen{height:100vh}.length-compact{max-width:25ch}.length-optimal{max-width:75ch}.z-20{z-index:20}@media screen and (min-width:22.5em){.mobileL\:box-block{display:block}.mobileL\:box-inline-block{display:inline-block}.mobileL\:box-flex{display:flex}.mobileL\:box-grid{display:grid}.mobileL\:box-hidden{display:none}.mobileL\:width-full{width:100%}.mobileL\:width-screen{width:100vw}.mobileL\:width-half{width:50%}.mobileL\:width-quarter{width:25%}.mobileL\:width-third{width:33.3333333333%}}@media screen and (min-width:40em){.mobileXL\:box-block{display:block}.mobileXL\:box-inline-block{display:inline-block}.mobileXL\:box-flex{display:flex}.mobileXL\:box-grid{display:grid}.mobileXL\:box-hidden{display:none}.mobileXL\:width-full{width:100%}.mobileXL\:width-screen{width:100vw}.mobileXL\:width-half{width:50%}.mobileXL\:width-quarter{width:25%}.mobileXL\:width-third{width:33.3333333333%}}@media screen and (min-width:48em){.tablet\:box-block{display:block}.tablet\:box-inline-block{display:inline-block}.tablet\:box-flex{display:flex}.tablet\:box-grid{display:grid}.tablet\:box-hidden{display:none}.tablet\:width-full{width:100%}.tablet\:width-screen{width:100vw}.tablet\:width-half{width:50%}.tablet\:width-quarter{width:25%}.tablet\:width-third{width:33.3333333333%}}@media screen and (min-width:64em){.laptop\:box-block{display:block}.laptop\:box-inline-block{display:inline-block}.laptop\:box-flex{display:flex}.laptop\:box-grid{display:grid}.laptop\:box-hidden{display:none}.laptop\:width-full{width:100%}.laptop\:width-screen{width:100vw}.laptop\:width-half{width:50%}.laptop\:width-quarter{width:25%}.laptop\:width-third{width:33.3333333333%}}@media screen and (min-width:80em){.desktop\:box-block{display:block}.desktop\:box-inline-block{display:inline-block}.desktop\:box-flex{display:flex}.desktop\:box-grid{display:grid}.desktop\:box-hidden{display:none}.desktop\:width-full{width:100%}.desktop\:width-screen{width:100vw}.desktop\:width-half{width:50%}.desktop\:width-quarter{width:25%}.desktop\:width-third{width:33.3333333333%}}@media screen and (min-width:90em){.desktopL\:box-block{display:block}.desktopL\:box-inline-block{display:inline-block}.desktopL\:box-flex{display:flex}.desktopL\:box-grid{display:grid}.desktopL\:box-hidden{display:none}.desktopL\:width-full{width:100%}.desktopL\:width-screen{width:100vw}.desktopL\:width-half{width:50%}.desktopL\:width-quarter{width:25%}.desktopL\:width-third{width:33.3333333333%}}@media screen and (min-width:120em){.desktopXL\:box-block{display:block}.desktopXL\:box-inline-block{display:inline-block}.desktopXL\:box-flex{display:flex}.desktopXL\:box-grid{display:grid}.desktopXL\:box-hidden{display:none}.desktopXL\:width-full{width:100%}.desktopXL\:width-screen{width:100vw}.desktopXL\:width-half{width:50%}.desktopXL\:width-quarter{width:25%}.desktopXL\:width-third{width:33.3333333333%}}:root{--max-width:80rem;--gap:1.56rem;--base-font-size:1rem;--ratio:1.1;--text-300:calc(var(--base-font-size)/var(--ratio)/var(--ratio));--text-400:calc(var(--text-300)*var(--ratio));--text-500:calc(var(--text-400)*var(--ratio)*var(--ratio));--text-600:calc(var(--text-500)*var(--ratio));--text-700:calc(var(--text-600)*var(--ratio));--text-800:calc(var(--text-700)*var(--ratio));--text-900:calc(var(--text-800)*var(--ratio));--text-1000:calc(var(--text-900)*var(--ratio));--text-1100:calc(var(--text-1000)*var(--ratio));--border-radius:.25rem;--border-size:.15rem;--transition-duration:.25s;--transition-timing:ease-out}@media (min-width:48em){:root{--ratio:1.2}}@media (min-width:64em){:root{--ratio:1.25}}.inner{width:100%;margin:0 auto;max-width:var(--max-width);padding-left:1.56rem;padding-right:1.56rem}.flow>*+*{margin-top:var(--gap)}@media (min-width:48em){.flow>*+*{--gap:1.95rem}}[data-src]{opacity:0}.loaded{opacity:1;transition:opacity var(--transition-duration) var(--transition-timing)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}*,:after,:before{box-sizing:border-box}html{min-height:100%;scroll-behavior:smooth}body{overflow-x:hidden;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}blockquote,body,dd,dl,figure,h1,h2,h3,h4,ol,p,ul{margin:0}img{display:block;max-width:100%;height:auto}button,input,select,textarea{font:inherit}@media (prefers-reduced-motion:reduce){*{-webkit-animation-duration:NaNs!important;animation-duration:NaNs!important;-webkit-animation-iteration-count:1!important;animation-iteration-count:1!important;transition-duration:NaNs!important;scroll-behavior:auto!important}}ol[class],ul[class]{list-style:none;padding:0}body{font-size:var(--text-500)}h1,h2,h3{line-height:1.1;letter-spacing:-.01rem}h1{--gap:1.95rem;font-size:var(--text-900);margin:0 0 var(--gap)}h2{font-size:var(--text-800)}h3{font-size:var(--text-700)}.content{word-wrap:break-word}.sub-heading{font-size:var(--text-700);line-height:1.5}ol,ul{padding:0 0 0 1.25rem}a{text-decoration:none;transition:color var(--transition-duration) var(--transition-timing)}a:not([class]){color:currentColor;border-bottom:var(--border-size) solid #24e0d0;padding-bottom:.1rem;-webkit-text-decoration-skip:ink;text-decoration-skip-ink:auto}a:not([class]):hover{color:#24e0d0}:focus{outline:1px solid #24e0d0;outline-offset:.25rem}.wrapper{min-height:100vh;flex-direction:column;background-attachment:fixed;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='674' height='337' viewBox='0 0 1600 800'%3E%3Cpath fill='%23010338' d='M1102.5 734.8c2.5-1.2 24.8-8.6 25.6-7.5.5.7-3.9 23.8-4.6 24.5-.2.3-16-12.3-21-17zm123.8-505.7c0-.1-4.9-9.4-7-14.2-.1-.3-.3-1.1-.4-1.6-.1-.4-.3-.7-.6-.9-.3-.2-.6-.1-.8.1l-13.1 12.3c-.2.2-.3.5-.4.8 0 .3 0 .7.2 1 .1.1 1.4 2.5 2.1 3.6 2.4 3.7 6.5 12.1 6.5 12.2.2.3.4.5.7.6.3 0 .5-.1.7-.3 0 0 1.8-2.5 2.7-3.6 1.5-1.6 3-3.2 4.6-4.7 1.2-1.2 1.6-1.4 2.1-1.6.5-.3 1.1-.5 2.5-1.9.4-.5.5-1.3.2-1.8zM33 770.3c0-.7-.5-1.2-1.2-1.2-.1 0-.3 0-.4.1-1.6.2-14.3.1-22.2 0-.3 0-.6.1-.9.4-.2.2-.4.5-.4.9 0 .2 0 4.9.1 5.9l.4 13.6c0 .3.2.6.4.9.2.2.5.3.8.3h.1c7.3-.7 14.7-.9 22-.6.3 0 .7-.1.9-.3.2-.2.4-.6.4-.9-.1-6.1-.1-13.2 0-19.1zM171.1 383.4c1.3-2.5 14.3-22 15.6-21.6.8.3 11.5 21.2 11.5 22.1-.1.3-20.3.1-27.1-.5zm425.3 328.4c-.1-.1-6.7-8.2-9.7-12.5-.2-.3-.5-1-.7-1.5-.2-.4-.4-.7-.7-.8-.3-.1-.6 0-.8.3L574 712c-.2.2-.2.5-.2.9 0 .3.2.7.4.9.1.1 1.8 2.2 2.8 3.1 3.1 3.1 8.8 10.5 8.9 10.6.2.3.5.4.8.4.3 0 .5-.2.6-.5 0 0 1.2-2.8 2-4.1 1.1-1.9 2.3-3.7 3.5-5.5.9-1.4 1.3-1.7 1.7-2 .5-.4 1-.7 2.1-2.4.3-.3.2-1.1-.2-1.6zm131.1-531.9c.6.2 1.3-.2 1.4-.8v-.4c.2-1.4 2.8-12.6 4.5-19.5.1-.3 0-.6-.2-.8-.2-.3-.5-.4-.8-.5-.2 0-4.7-1.1-5.7-1.3l-13.4-2.7c-.3-.1-.7 0-.9.2-.2.2-.4.4-.5.6v.1c-.8 6.5-2.2 13.1-3.9 19.4-.1.3 0 .6.2.9.2.3.5.4.8.5 5.8 1.3 12.7 2.9 18.5 4.3zm1-1.8c-.1-.1-.2-.2-.4-.2.2 0 .3.1.4.2z'/%3E%3Cg fill-opacity='.06' fill='%23FFF'%3E%3Cpath d='M699.6 472.7c-1.5 0-2.8-.8-3.5-2.3-.8-1.9 0-4.2 1.9-5 3.7-1.6 6.8-4.7 8.4-8.5 1.6-3.8 1.7-8.1.2-11.9-.3-.9-.8-1.8-1.2-2.8-.8-1.7-1.8-3.7-2.3-5.9-.9-4.1-.2-8.6 2-12.8 1.7-3.1 4.1-6.1 7.6-9.1 1.6-1.4 4-1.2 5.3.4 1.4 1.6 1.2 4-.4 5.3-2.8 2.5-4.7 4.7-5.9 7-1.4 2.6-1.9 5.3-1.3 7.6.3 1.4 1 2.8 1.7 4.3l1.5 3.3c2.1 5.6 2 12-.3 17.6-2.3 5.5-6.8 10.1-12.3 12.5-.4.2-.9.3-1.4.3zm40.8-51.3c1.5-.2 3 .5 3.8 1.9 1.1 1.8.4 4.2-1.4 5.3-3.7 2.1-6.4 5.6-7.6 9.5-1.2 4-.8 8.4 1.1 12.1.4.9 1 1.7 1.6 2.7 1 1.7 2.2 3.5 3 5.7 1.4 4 1.2 8.7-.6 13.2-1.4 3.4-3.5 6.6-6.8 10.1-1.5 1.6-3.9 1.7-5.5.2-1.6-1.4-1.7-3.9-.2-5.4 2.6-2.8 4.3-5.3 5.3-7.7 1.1-2.8 1.3-5.6.5-7.9-.5-1.3-1.3-2.7-2.2-4.1-.6-1-1.3-2.1-1.9-3.2-2.8-5.4-3.4-11.9-1.7-17.8 1.8-5.9 5.8-11 11.2-14 .4-.4.9-.6 1.4-.6zM261.3 590.9c5.7 6.8 9 15.7 9.4 22.4.5 7.3-2.4 16.4-10.2 20.4-3 1.5-6.7 2.2-11.2 2.2-7.9-.1-12.9-2.9-15.4-8.4-2.1-4.7-2.3-11.4 1.8-15.9 3.2-3.5 7.8-4.1 11.2-1.6 1.2.9 1.5 2.7.6 3.9-.9 1.2-2.7 1.5-3.9.6-1.8-1.3-3.6.6-3.8.8-2.4 2.6-2.1 7-.8 9.9 1.5 3.4 4.7 5 10.4 5.1 3.6 0 6.4-.5 8.6-1.6 4.7-2.4 7.7-8.6 7.2-15-.5-7.3-5.3-18.2-13-23.9-4.2-3.1-8.5-4.1-12.9-3.1-3.1.7-6.2 2.4-9.7 5-6.6 5.1-11.7 11.8-14.2 19-2.7 7.7-2.1 15.8 1.9 23.9.7 1.4.1 3.1-1.3 3.7-1.4.7-3.1.1-3.7-1.3-4.6-9.4-5.4-19.2-2.2-28.2 2.9-8.2 8.6-15.9 16.1-21.6 4.1-3.1 8-5.1 11.8-6 6-1.4 12 0 17.5 4 2.1 1.7 4.1 3.6 5.8 5.7z'/%3E%3Ccircle cx='1013.7' cy='153.9' r='7.1'/%3E%3Ccircle cx='1024.3' cy='132.1' r='7.1'/%3E%3Ccircle cx='1037.3' cy='148.9' r='7.1'/%3E%3Cpath d='M1508.7 297.2c-4.8-5.4-9.7-10.8-14.8-16.2 5.6-5.6 11.1-11.5 15.6-18.2 1.2-1.7.7-4.1-1-5.2-1.7-1.2-4.1-.7-5.2 1-4.2 6.2-9.1 11.6-14.5 16.9-4.8-5-9.7-10-14.7-14.9-1.5-1.5-3.9-1.5-5.3 0-1.5 1.5-1.5 3.9 0 5.3 4.9 4.8 9.7 9.8 14.5 14.8-1.1 1.1-2.3 2.2-3.5 3.2-4.1 3.8-8.4 7.8-12.4 12-1.4 1.5-1.4 3.8 0 5.3 1.5 1.4 3.9 1.4 5.3-.1 3.9-4 8.1-7.9 12.1-11.7 1.2-1.1 2.3-2.2 3.5-3.3 4.9 5.3 9.8 10.6 14.6 15.9l.2.2c1.4 1.4 3.7 1.5 5.2.2 1.7-1.2 1.8-3.6.4-5.2zM327.6 248.6l-.4-2.6c-1.5-11.1-2.2-23.2-2.3-37 0-5.5 0-11.5.2-18.5v-2.3c0-5 0-11.2 3.9-13.5 2.2-1.3 5.1-1 8.5.9 5.7 3.1 13.2 8.7 17.5 14.9 5.5 7.8 7.3 16.9 5 25.7-3.2 12.3-15 31-30 32.1l-2.4.3zm4.5-69.4c-.2 0-.3 0-.4.1-.1.1-.7.5-1.1 2.7-.3 1.9-.3 4.2-.3 6.3v2.4c-.2 6.9-.2 12.8-.2 18.3.1 12.5.7 23.5 2 33.7 11-2.7 20.4-18.1 23-27.8 1.9-7.2.4-14.8-4.2-21.3-3.9-5.5-10.9-10.6-15.9-13.3-1.4-.8-2.4-1.1-2.9-1.1zM516.3 60.8c-.1 0-.2 0-.4-.1-2.4-.7-4-.9-6.7-.7-.7 0-1.3-.5-1.4-1.2 0-.7.5-1.3 1.2-1.4 3.1-.2 4.9 0 7.6.8.7.2 1.1.9.9 1.6-.2.6-.7 1-1.2 1zm-10.2 9.7c-.5 0-1-.3-1.2-.8-.8-2.1-1.2-4.3-1.3-6.6 0-.7.5-1.3 1.2-1.3s1.3.5 1.3 1.2c.1 2 .5 3.9 1.1 5.8.2.7-.1 1.4-.8 1.6 0 .1-.2.1-.3.1zm-12-6.1c-.4 0-.8-.2-1-.5-.4-.6-.3-1.4.2-1.8 1.8-1.4 3.7-2.6 5.8-3.6.6-.3 1.4 0 1.7.6.3.6 0 1.4-.6 1.7-1.9.9-3.7 2-5.3 3.3-.2.2-.5.3-.8.3zm6.4-9.1c-.5 0-.9-.3-1.2-.7-.5-1-1.2-1.9-2.4-3.4-.3-.4-.7-.9-1.1-1.4-.4-.6-.3-1.4.2-1.8.6-.4 1.4-.3 1.8.2.4.5.8 1 1.1 1.4 1.3 1.6 2.1 2.6 2.7 3.9.3.6 0 1.4-.6 1.7-.1.1-.3.1-.5.1zm6.2-.3c-.3 0-.5-.1-.8-.2-.6-.4-.7-1.2-.3-1.8 1.2-1.7 2.3-3.4 3.3-5.2.3-.6 1.1-.9 1.7-.5.6.3.9 1.1.5 1.7-1 1.9-2.2 3.8-3.5 5.6-.2.2-.5.4-.9.4zm522.6 327.8c-.1 0-.2 0-.4-.1-2.4-.7-4-.9-6.7-.7-.7 0-1.3-.5-1.4-1.2 0-.7.5-1.3 1.2-1.4 3.1-.2 4.9 0 7.6.8.7.2 1.1.9.9 1.6-.2.6-.7 1-1.2 1zm-10.2 9.7c-.5 0-1-.3-1.2-.8-.8-2.1-1.2-4.3-1.3-6.6 0-.7.5-1.3 1.2-1.3s1.3.5 1.3 1.2c.1 2 .5 3.9 1.1 5.8.2.7-.1 1.4-.8 1.6 0 .1-.2.1-.3.1zm-12-6.1c-.4 0-.8-.2-1-.5-.4-.6-.3-1.4.2-1.8 1.8-1.4 3.7-2.6 5.8-3.6.6-.3 1.4 0 1.7.6.3.6 0 1.4-.6 1.7-1.9.9-3.7 2-5.3 3.3-.2.2-.5.3-.8.3zm6.4-9.1c-.5 0-.9-.3-1.2-.7-.5-1-1.2-1.9-2.4-3.4-.3-.4-.7-.9-1.1-1.4-.4-.6-.3-1.4.2-1.8.6-.4 1.4-.3 1.8.2.4.5.8 1 1.1 1.4 1.3 1.6 2.1 2.6 2.7 3.9.3.6 0 1.4-.6 1.7-.1.1-.3.1-.5.1zm6.2-.3c-.3 0-.5-.1-.8-.2-.6-.4-.7-1.2-.3-1.8 1.2-1.7 2.3-3.4 3.3-5.2.3-.6 1.1-.9 1.7-.5.6.3.9 1.1.5 1.7-1 1.9-2.2 3.8-3.5 5.6-.2.2-.5.4-.9.4zm310 196.4c-1.4 0-2.9-.2-4.5-.7-8.4-2.7-16.6-12.7-18.7-20-.4-1.4-.7-2.9-.9-4.4-8.1 3.3-15.5 10.6-15.4 21 0 1.5-1.2 2.7-2.7 2.8-1.5 0-2.7-1.2-2.7-2.7-.1-6.7 2.4-12.9 7-18 3.6-4 8.4-7.1 13.7-8.8.5-6.5 3.1-12.9 7.4-17.4 7-7.4 18.2-8.9 27.3-10.1l.7-.1c1.5-.2 2.9.9 3.1 2.3.2 1.5-.9 2.9-2.3 3.1l-.7.1c-8.6 1.2-18.4 2.5-24 8.4-3 3.2-5 7.7-5.7 12.4 7.9-1 17.7 1.3 24.3 5.7 4.3 2.9 7.1 7.8 7.2 12.7.2 4.3-1.7 8.3-5.2 11.1-2.4 1.6-5 2.6-7.9 2.6zm-18.7-26.7c.1 1.5.4 3 .8 4.4 1.7 5.8 8.7 14.2 15.1 16.3 2.8.9 5.1.5 7.2-1.1 2.7-2.1 3.2-4.8 3.1-6.6-.1-3.2-2-6.4-4.8-8.3-5.7-3.9-14.7-5.8-21.4-4.7z'/%3E%3C/g%3E%3C/svg%3E")}@media (min-width:40em){.wrapper{padding-bottom:0}}.logo{--logo-size:1.25rem;font-size:var(--logo-size);margin:0 auto}.logo:hover{color:#24e0d0}@media (min-width:40em){.logo{--logo-size:1.56rem;margin:0 auto 0 0}}@media (min-width:40em){.header-inner{align-items:center;justify-content:space-between}}.nav .link{height:3.05rem;line-height:3.05rem}.nav .link.active,.nav .link:hover{color:#24e0d0}.nav .link-get-started{border-radius:var(--border-radius);transition:background-color var(--transition-duration) var(--transition-timing)}.nav .link-get-started:hover{background:#fff;color:#01093c}.mobile-nav{--transition-duration:.3s;position:fixed;top:0;left:0;overflow-y:auto;transform:translate3d(-100%,0,0);transition:transform var(--transition-duration) cubic-bezier(.77,0,.175,1);transition-delay:.1s;will-change:transform}.mobile-nav.menu-visible{transform:translateZ(0)}.mobile-nav .link{--gap:.25rem;padding:var(--gap) 0}.mobile-nav .link.active,.mobile-nav .link:hover{color:#24e0d0}.mobile-nav-toggle{position:fixed;bottom:0;height:3.05rem;align-items:center;justify-content:center;border:0;outline:0}.mobile-nav-toggle .mobile-nav-icon{flex-direction:column}.mobile-nav-toggle .icon-line{--transition-duration:.2s;--transition-timing:cubic-bezier(0,0,.2,1);height:2px;width:1.25rem;transform-origin:7px 1px;transition:transform var(--transition-duration) var(--transition-timing),opacity var(--transition-duration) var(--transition-timing)}.mobile-nav-toggle .icon-line:not(:last-child){margin-bottom:.25rem}.mobile-nav-toggle.expanded .icon-line{margin:0}.mobile-nav-toggle.expanded .icon-line:first-child{transform:rotate(45deg)}.mobile-nav-toggle.expanded .icon-line:nth-child(2){opacity:0}.mobile-nav-toggle.expanded .icon-line:last-child{transform:rotate(-45deg)}.main{flex-direction:column;flex:1}.main:focus{outline:0}.page-header{--gap:2.44rem;margin-bottom:var(--gap)}@media (min-width:48em){.page-header{--gap:3.05rem}}.footer-inner{align-items:center;justify-content:space-between}.button{display:inline-block;background-color:#24e0d0;border:0;border-radius:var(--border-radius);color:#01093c;padding:.8rem 1.25rem;transition:background-color var(--transition-duration) var(--transition-timing);font-weight:700}.button:hover{background:#fff}.pagination{--gap:3.81rem}.pagination .items{justify-content:space-between;padding:0}.input,.textarea{border:0;border-radius:var(--border-radius);padding:0 .5rem}.input{height:2.44rem}.textarea{height:4.76rem}.social-icons .icon-link:hover{color:#24e0d0}.social-icons .icon{--social-icon-size:1.25rem;width:var(--social-icon-size);height:var(--social-icon-size)}.type-post .length-optimal{margin-left:auto;margin-right:auto}.type-post .categories .category:first-child:before{content:"  /  "}.post-image{border-radius:var(--border-radius)}.post-title{font-size:var(--text-1100)}.post-image-caption{text-align:center}.posts{--gap:4.76rem;align-items:stretch;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));gap:var(--gap);padding-bottom:15vh}.card,.card-header{position:relative}.card-image{border-radius:var(--border-radius)}.card-categories{position:absolute;bottom:0;left:.8rem;transform:translateY(50%)}.card-categories .category{--border-radius:.15rem;border-radius:var(--border-radius);padding:.25rem .5rem}.card-title-link{border-bottom:var(--border-size) solid #24e0d0;transition:border-color var(--transition-duration) var(--transition-timing)}.card-title-link:hover{border-bottom-color:#01093c}.card .datetime{position:absolute;bottom:0}@media (min-width:48em){.card-title-link{font-size:var(--text-700)}}@media (min-width:64em){.posts{grid-template-columns:repeat(auto-fill,minmax(20rem,1fr))}} 2 | --------------------------------------------------------------------------------