diff options
| author | Kai Dinghofer <kdevo@users.noreply.github.com> | 2021-04-30 01:22:20 +0300 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2021-04-30 01:22:20 +0300 |
| commit | 9b1fea2b45dc73e9ee45b477ea3011cb879de510 (patch) | |
| tree | df2b802fd7fb0bbe266014989ad935dbbf891dd2 | |
| parent | 88cb0ee6f2456cb08c8858f089a69ab2ac4b66d9 (diff) | |
| parent | 4d87b67853a711153e7cbf1d5cd77e63f750b2a1 (diff) | |
Merge pull request #10 from kdevo/devv4.0.0
Release v4.0.0
96 files changed, 3026 insertions, 1800 deletions
@@ -1,7 +1,7 @@ /public/ /exampleSite/public/ -/exampleSite/resources/_gen/ +/exampleSite/resources/_gen/* workspace diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md new file mode 100644 index 0000000..d0552ae --- /dev/null +++ b/CONTRIBUTING.md @@ -0,0 +1,12 @@ +## Contributing + +Contributions are welcome! Fork this repo and create a merge request if you implemented a feature or a bug fix that everyone can profit from. + +The necessary requirements for merge requests are: +1. Theme should be kept leightweight +2. Keep it modular: New features should be made optional if possible or if they influence performance in any way +3. Document your changes; most importantly your config changes in **config.toml** (if there are any) + +## License + +This theme is released under the Apache 2.0 license, just like its predecessor. For more information read the [license](https://github.com/kdevo/osprey-delight/blob/master/LICENSE.md).
\ No newline at end of file diff --git a/CUSTOMIZING.md b/CUSTOMIZING.md new file mode 100644 index 0000000..8e97abe --- /dev/null +++ b/CUSTOMIZING.md @@ -0,0 +1,36 @@ +# Customizing + +Osprey Delight makes heavy use of various Hugo features, e.g. directly benefits from Hugo's virtual file system and [directory structure](https://gohugo.io/getting-started/directory-structure/), [partials](https://gohugo.io/templates/partials/), as well as using the awesome [Hugo Pipes](https://gohugo.io/hugo-pipes/) whenever it makes sense. + +This also means that you normally do not need to maintain a separate fork. If you have built something nice, don't be afraid to share the customization via [PR](https://github.com/kdevo/osprey-delight/pulls), so that others can profit from it, too. :rocket: + +## Custom SCSS + +Place a file named `_custom.scss` in your `assets/sass/` folder (create the directories if needed). This will override the theme's `_custom.scss` which is loaded in the internal main SCSS. + +> The theme's built-in `_custom.scss` contains useful customization examples, so don't be afraid to copy, override and experiment with it. + +### Theming + +Coming soon. +Take a look at [the themes directory](themes/osprey-delight/assets/sass/themes) for a sneak peek! + +### Syntax Highlighting (for Blog) + +Limiting external dependencies is important when it comes performance, therefore only Hugo's internal [Chroma Syntax Highlighting](https://gohugo.io/content-management/syntax-highlighting/) is supported. Here's how to use it: + +1. Generate a Chromastyle of your choice (in this case `solarized-dark`) as `_custom.scss` in project root: `hugo gen chromastyles --style=solarized-dark > _custom.scss` +2. Move the file to `assets/sass/` folder +3. Add `pygmentsUseClasses = true` to your config.yaml + +> Refer to [the official Hugo documentation](https://gohugo.io/content-management/syntax-highlighting/) for more info. + +## Custom templates + +### Extent the head + +In case you want to load custom HTML for additional scripts etc. inside the page's `head`: Place a file named `head-extended.html` in your `layouts/partials/` folder (create the directories if needed). This file can e.g. contain additional `<script>` or `<link>` tags. + +### Build your own sections + +Coming soon.
\ No newline at end of file @@ -1,68 +1,59 @@ <a href="https://git.io/osprey-delight" target="_blank"> <img alt="Osprey Delight Logo" src="https://raw.githubusercontent.com/kdevo/osprey-delight/master/images/osprey-delight-logo.png" width="250"> </a> - <a href="https://kdevo.netlify.app/" target="_blank"> <img align="right" alt="Nelify Continous Deployment Status" src="https://api.netlify.com/api/v1/badges/aff9a674-45e1-4437-89f7-2aabb281780f/deploy-status"> </a> --- [](https://github.com/kdevo/osprey-delight/releases/latest) -[](https://github.com/gohugoio/hugo/releases) +[](https://github.com/gohugoio/hugo/releases) [](#keep-it-up) -# Osprey Delight - -Osprey **De**light is a sugar-free version of the [awesome Osprey theme](https://github.com/tomanistor/osprey) by [Toma Nistor](https://tomanistor.com/) for [Hugo](https://gohugo.io/), a fast static site generator. - -It's a [blazingly fast](https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fkdevo.github.io%2F) minimalistic single page portfolio perfectly suited to show off your awesome work! - -> 💡 The theme tastes a bit different than the original (hence the *light* in the name) but also adds great new functionality - hopefully to your ***delight***. Read more about the motivation and differences of the fork [here](./MOTIVATION.md), but also check out the feature summary below! - -## Features - -- Gallery items with different types - - `normal`: Just as you are used to with the original Osprey theme - - `github`: Magic GitHub API integration -- Gallery images can optionally be normalized with Hugo's [amazing image processing](https://gohugo.io/content-management/image-processing/) -- Blazingly fast loading speeds - - Minified JS/CSS/icon bundles using Hugo Pipes - - Lazy-loading of images using lazysizes -- Contact form using Basin with Honeypot protection -- Fancy UX - - Smooth scrolling plus scroll-spy - - Nice CSS animations - - Awesome icons in the footer -- Modular theme, enable features as you want -- Intelli-404: Automatically searches for suitable matches - never loose the link to your content -- SEO-optimized - - High PageSpeed Insights score - - Automatically generated structured data ensures that everyone finds you - -In general, many [open issues](https://github.com/tomanistor/osprey/issues) of the original theme have been resolved. +## Overview +Osprey Delight is the free-minded artist's choice for a clutter-free and blazingly fast single-page portfolio. -## Keep it up +It's perfectly suited to show off your awesome work! -There are multiple ways to show your support if you like this project: -- Start [contributing](#Contributing) if you are familiar with Hugo themes/templating -- [Donate anything to my non-profit organization](https://pyotek.dev/donate) via various options -- Push the  button - a small gesture with huge effect +> It tastes a bit different than [the original great Osprey theme](https://github.com/tomanistor/osprey) and adds awesome new functionality to your **delight**. -## Screenshots +### Showcase -Osprey Delight works with gallery items which are organized in a Flexbox grid: +Check out how Osprey Delight performs in the real-world: - +- [Protonaut Music](https://protonautmusic.com/) - Musician and top contributor whose highly individualized site got kickstarted by Osprey Delight. +- [KDEVO](https://kdevo.github.io/) - The maintainer's site. It wouldn't be me if I would not run this theme personally. It's basically in the vanilla version. +### Features -The items can be opened and a modal will show up: +- Single page made out of extensible section building blocks + - About: Introduce yourself + - Gallery: Show your work using a grid-based gallery with interactive modal boxes + - Blog: Lightweight blog features + - Contact: Contact form with Basin support and built-in spambot protection +- Images are [asset-driven](https://gohugo.io/categories/asset-management). Use your high-quality images without the hassle of manually resizing them! + - Image lazy-loading via [lazySizes](https://github.com/aFarkas/lazysizes) + - Blur-up technique using automatic low-quality image placeholders (LQIP) +- SEO-optimized + - [Score 100 at PageSpeed Insights](https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fkdevo.github.io%2F). Every bit is fine-tuned for performance + - Auto-generated structured ensures that everyone finds you +- Delightful UX + - Smooth scrolling plus scroll-spy + - Awesome social icons in footer + - Automatically fetches GitHub repo data for you + - Sane fallbacks for No-Script/No-JS users + - Intelli-404: Automatically searches for suitable matches - never loose the link to your content +- Heavily [customizable](#customize-it) - no need to maintain a fork! - +In general, many [open issues](https://github.com/tomanistor/osprey/issues) of the original theme have been resolved. +### Contribute -> If you've used the original Osprey theme before, this looks pretty familiar, right? -> To taste the differences, it's best to simply try Osprey Delight out! +There are multiple ways to show your support if you like this project: +- Start [contributing](https://github.com/kdevo/osprey-delight/blob/master/CONTRIBUTING.md) +- Become a sponsor or [donate anything to my non-profit organization](https://pyotek.dev/donate) via various options +- Push the [](https://github.com/kdevo/osprey-delight/stargazers) button - a small gesture with huge effect ## Quickstart @@ -92,9 +83,23 @@ git pull ## Configuration and Usage -It's best if you simply check out the commented **[exampleSite/config.toml](/exampleSite/config.toml)**! +It's best if you simply check out the fully commented [config file](/exampleSite/config.yaml). This theme follows a learning-by-doing approach. +### Images + +This theme is asset-driven! It "knows" how to handle your precious assets, and there usually is no need for manual resizing. +Therefore, the recommended approach for images is to provide high-res images in the [`assets` directory](https://gohugo.io/hugo-pipes/introduction/#asset-directory). + +The following table shows some guidelines regarding the assets: + +Image Type | Config Key | Minimum Width | Note +--------------------|---------------------------------- |------------------------|--------------------------------------------------- +Logo | `logoBig` (config.yaml) | 200px | Transparent, minimum margin top/bottom +Navbar-Logo | `logoSmall` (config.yaml) | 96px | Transparent, small margin top/bottom, prefer square format +Gallery | `image` (content/gallery/*) | 400px | Transparent, medium margin top/bottom/left/right, prefer square format +Background | `background` (config.yaml) | 1200px | Optional, use a high-quality JPG + ### Content files #### About section @@ -117,53 +122,26 @@ This is very helpful for the first time since you will get a fully documented fi > ⚠️ Please make sure that `item-name` is unique on the whole page because it will be used as an anchor/identifier! +### Contact form -### Custom (S)CSS - -Place a file named `_custom.scss` in your local `assets/sass/` folder (create the directories). This will override the theme's (empty) `_custom.scss` which is loaded in the internal main SCSS. - -#### Syntax Highlighting - -Limiting external dependencies is important when it comes to privacy as well as performance, therefore only Hugo's internal [Chroma Syntax Highlighting](https://gohugo.io/content-management/syntax-highlighting/) is supported. Here's how to use it: - -1. Generate a Chromastyle of your choice (in this case `solarized-dark`) as `_custom.scss` in project root: `hugo gen chromastyles --style=solarized-dark > _custom.scss` -2. Move the file to `assets/sass/` folder -3. Add `pygmentsUseClasses = true` to your config.toml - -> Refer to [the official Hugo documentation](https://gohugo.io/content-management/syntax-highlighting/) for more info. - -### Data directory (optional) - -Optionally, Osprey Delight makes use of the [Hugo's data folder](https://gohugo.io/templates/data-templates/#the-data-folder). -Currently, the following files can be used to configure the theme in more detail: - -- **terminal.json**: Configure several parameters for optional Termynal (see **config.toml** for an explanation) - -### Contact form: Basin - -Basin is a free AJAX contact form service. To use Basin, [sign up for a free account](https://usebasin.com/users/sign_up) and create a form. Copy and paste your form's URL endpoint to the `ajaxBasin` config.toml parameter. Select the `Submit this form via AJAX` option on your Basin dashboard. +Basin is a free AJAX contact form service that is used by this theme. To use set it up, [sign up for a free account](https://usebasin.com/users/sign_up) and create a form. Copy and paste your form's URL endpoint to the `ajaxBasin` config.yaml parameter. Select the `Submit this form via AJAX` option on your Basin dashboard.  #### Spambot protection Under Setup/"Set a Custom Honeypot Field", enter `_anti_spam_honeypot`. -Basin will [ignore all messages that contain this specific field](https://usebasin.com/docs/features/spam-filtering). This will work since there is a hidden field that users normally do not use, but spambots will blindly input their data. +Basin will [ignore all messages that contain this specific field](https://usebasin.com/docs/features/spam-filtering). This should work since there is a hidden field that users normally do not use, but spambots will blindly input their data.  -Feel free to open an issue if the protection did not work for you. - - -## Contributing +## Next -Contributions are welcome! Fork this repo and create a merge request if you implemented a feature or a bug fix that everyone can profit from. +### Help wanted -The necessary requirements for merge requests are: -1. Theme should be kept leightweight -2. Keep it modular: New features should be made optional if possible or if they influence performance in any way -3. Document your changes; most importantly your config changes in **config.toml** (if there are any) +This README probably needs some documentation improvements for the latest features. +Any PR regarding this is welcome and please also check out [how to contribute](CONTRIBUTING.md)! -## License +### Customize it -This theme is released under the Apache 2.0 license, just like its predecessor. For more information read the [license](https://github.com/kdevo/osprey-delight/blob/master/LICENSE.md). +Want to have full control over appearance? Check out [how to customize the theme more granularly](https://github.com/kdevo/osprey-delight/blob/master/CUSTOMIZING.md).
\ No newline at end of file diff --git a/archetypes/default.md b/archetypes/default.md index 2661a12..45f8b88 100644 --- a/archetypes/default.md +++ b/archetypes/default.md @@ -1,6 +1,6 @@ -+++ -title = "{{ replace .TranslationBaseName "-" " " | title }}" -date = {{ .Date }} -draft = true -description = "" -+++ +--- +title: "{{ replace .TranslationBaseName "-" " " | title }}" +date: "{{ .Date }}" +draft: true +description: "" +--- diff --git a/archetypes/gallery.md b/archetypes/gallery.md index 48a4196..e5037e7 100644 --- a/archetypes/gallery.md +++ b/archetypes/gallery.md @@ -14,29 +14,22 @@ date: "{{ .Date }}" # If the specified image is found in the 'assets' directory the image will be normalized to a specified height. # If ommited AND type is 'github' (see below), will attempt to fetch from '{repo_url}/.github/logo.png'. image: "" -# [str] Alternatively, you can specify an absolute image URL (comment out the following line). -# imageUrl: "" # [str] Alternative (image) description. # If ommited with type 'github', will use 'description' field from GitHub API. alt: "" # [css] Background color of the gallery item. color: "#fff" -# [enum] Possible types: -# - normal: Just as in the original Osprey theme -# - github: Fetch repo data using GitHub API -type: "normal" -# [str] Link to view the project. -linkView: "" -# [str] Link to show the project's code. -# If ommited with type 'github', will use 'html_url' field from GitHub API. -linkCode: "" -# [map] Configure 'github'-type specific options here: +# [css] Optional gallery item hover color to set it individually. +#hoverColor: "#fff" +# [map] Configure github specific options here: github: # [str] Repo is a combination of "{user_or_org}/{repository_name}", e.g. "kdevo/osprey-delight. - repo: "YOUR-GITHUB-NAME/{{ .TranslationBaseName }}" + #repo: "YOUR-GITHUB-NAME/{{ .TranslationBaseName }}" # [bool] Show repository information such project language below the buttons. showInfo: true + showButtons: true # [map] Configure optional terminal to be displayed when opening up the gallery item: +# Example (set "useTermynal" to true in config.yaml and comment out to test it): terminal: # lines: # - type: input @@ -47,6 +40,14 @@ terminal: # wait: 200 # - data: ls: cannot access 'dummy/' directory. # wait: 75 +buttons: + - i18n: view # i18n key (see i18n directory, see https://gohugo.io/functions/i18n/) + icon: angle-circled-right # optional: use an icon (in this case arrow right) + newTab: false # optional: controls if url should be opened in new tab + url: "" + - i18n: code + icon: code + url: "" # [bool] Draft mode will decide if file will be published to 'public/' directory. draft: true --- diff --git a/assets/fontello/config.json b/assets/fontello/config.json new file mode 100644 index 0000000..9c328ed --- /dev/null +++ b/assets/fontello/config.json @@ -0,0 +1,462 @@ +{ + "name": "", + "css_prefix_text": "icon-", + "css_use_suffix": false, + "hinting": true, + "units_per_em": 1000, + "ascent": 850, + "glyphs": [ + { + "uid": "872d9516df93eb6b776cc4d94bd97dac", + "css": "video", + "code": 59397, + "src": "fontawesome" + }, + { + "uid": "43ab845088317bd348dee1d975700c48", + "css": "ok", + "code": 59395, + "src": "fontawesome" + }, + { + "uid": "e15f0d620a7897e2035c18c80142f6d9", + "css": "link-ext", + "code": 61582, + "src": "fontawesome" + }, + { + "uid": "0ddd3e8201ccc7d41f7b7c9d27eca6c1", + "css": "link", + "code": 59399, + "src": "fontawesome" + }, + { + "uid": "9a76bc135eac17d2c8b8ad4a5774fc87", + "css": "download", + "code": 59402, + "src": "fontawesome" + }, + { + "uid": "7034e4d22866af82bef811f52fb1ba46", + "css": "code", + "code": 61729, + "src": "fontawesome" + }, + { + "uid": "4aad6bb50b02c18508aae9cbe14e784e", + "css": "share", + "code": 61920, + "src": "fontawesome" + }, + { + "uid": "0133387f2069a1b3168942b84d81dd3a", + "css": "gamepad", + "code": 61723, + "src": "fontawesome" + }, + { + "uid": "0d08dbb1dd648a43bdea81b7e6c9e036", + "css": "location", + "code": 59404, + "src": "fontawesome" + }, + { + "uid": "1d2b426ab6db81a58547ba13d8701ad8", + "css": "paypal", + "code": 61933, + "src": "fontawesome" + }, + { + "uid": "2f284155d03813f26d71fa0cf5fee0e5", + "css": "ethereum", + "code": 59409, + "src": "custom_icons", + "selected": true, + "svg": { + "path": "M609.2 509.4L312.5 690.6 15.6 509.4 312.5 0 609.2 509.4ZM312.5 748.8L15.6 567.6 312.5 1000 609.4 567.6 312.5 748.8Z", + "width": 625 + }, + "search": [ + "ethereum" + ] + }, + { + "uid": "e1597911f34fea0a188ae51fe4a2d9a9", + "css": "stackoverflow", + "code": 61804, + "src": "fontawesome" + }, + { + "uid": "fb4794d89b77ab712ad56c0dc4c76c6b", + "css": "spotify", + "code": 61884, + "src": "fontawesome" + }, + { + "uid": "0f4cae16f34ae243a6144c18a003f2d8", + "css": "cancel", + "code": 59406, + "src": "fontawesome" + }, + { + "uid": "a3f89e106175a5c5c4e9738870b12e55", + "css": "tags", + "code": 59410, + "src": "fontawesome" + }, + { + "uid": "559647a6f430b3aeadbecd67194451dd", + "css": "menu", + "code": 61641, + "src": "fontawesome" + }, + { + "uid": "fa10777b2d88cc64cd6e4f26ef0e5264", + "css": "terminal", + "code": 61728, + "src": "fontawesome" + }, + { + "uid": "8aa99bc60f3553bb3e31b73dd6e744c8", + "css": "rocket", + "code": 61749, + "src": "fontawesome" + }, + { + "uid": "d650df2fd7c4e27d9185d90a1c12a881", + "css": "space-shuttle", + "code": 61847, + "src": "fontawesome" + }, + { + "uid": "7155df8e6f3d21f91092ac69f94ff0b0", + "css": "google-play", + "code": 59416, + "src": "custom_icons", + "selected": true, + "svg": { + "path": "M635.4 457.6L204.3 25.4 752.7 340.2 635.4 457.6ZM91.8 0C66.4 13.3 49.4 37.5 49.4 68.9V930.9C49.4 962.3 66.4 986.5 91.8 999.8L593 499.8 91.8 0ZM922.3 440.6L807.2 374 678.9 500 807.2 626 924.6 559.4C959.8 531.4 959.8 468.6 922.3 440.6ZM204.3 974.6L752.7 659.8 635.4 542.4 204.3 974.6Z", + "width": 1000 + }, + "search": [ + "google-play" + ] + }, + { + "uid": "0f30389d65ceeceb63c3f2a6828bdd92", + "css": "itunes", + "code": 59417, + "src": "custom_icons", + "selected": true, + "svg": { + "path": "M745.9 758.2C733.4 811.7 692.8 841.8 638.3 852 590.4 860.7 550.6 862.9 512.3 832 465.6 792.8 465 727.7 507 686.7 540.2 655.1 586.9 648.6 657 636.3 668.8 634.2 678.9 631.4 687.5 621.9 700 607.8 696.1 613.9 696.1 303.1 696.1 281.3 685.4 275.2 662.9 279.1 646.9 281.8 300.2 346.7 300.2 346.7 280.3 351 274 356.8 274 379.3 274 837.7 276.2 816.6 269.1 847.1 260.9 882.6 239.1 909.4 210.2 924.2 177.3 942.4 118 950.4 86.3 944.5 2 928.7-27.7 831.3 29.5 775.4 62.7 743.8 109.4 737.3 179.5 725 191.2 722.9 201.4 720.1 210 710.5 229.7 688.1 213.5 209.4 220.1 182.8 221.7 172.7 226 164.1 234 157.6 242.2 150.8 257 146.9 260.2 146.9 658.6 72.3 707.2 62.7 714.1 62.7 736.5 61.1 749.4 74.4 749.4 97.1 749.8 769.9 751.6 733.8 745.9 758.2Z", + "width": 750 + }, + "search": [ + "itunes-note" + ] + }, + { + "uid": "9eced25536f55fa37d8da51b3b850608", + "css": "ravelry", + "code": 59418, + "src": "custom_icons", + "selected": true, + "svg": { + "path": "M973.1 457.5C970.8 437.3 969.8 416.8 965.8 396.9A606.1 606.1 0 0 0 947 325.4 359.5 359.5 0 0 0 886.7 213.1 490.5 490.5 0 0 0 850 170.8 463.6 463.6 0 0 0 758 100.2 470.3 470.3 0 0 0 647.2 52.1C625.7 46 603.7 41.4 581.7 37.2 568.5 34.6 554.9 33.9 541.4 32.3 540.8 32.3 540.3 31.6 539.7 31.2Q508.1 31.3 476.6 31.3C471.9 32 467.2 33.1 462.5 33.5A350.3 350.3 0 0 0 395.6 47.4 432.6 432.6 0 0 0 317.9 79.3 549.6 549.6 0 0 0 243.5 126.5C231.5 135.5 219.6 144.8 208.4 154.9 188.6 172.8 168.6 190.9 150 210.1A476.3 476.3 0 0 0 84.3 295.9 403.3 403.3 0 0 0 44.2 383 387.1 387.1 0 0 0 29.2 450.9 392.8 392.8 0 0 0 26.2 520.3 585.4 585.4 0 0 0 34.8 598.9 443.1 443.1 0 0 0 67.5 703 411.2 411.2 0 0 0 114.4 780.2 417.2 417.2 0 0 0 165.8 835.7 490.8 490.8 0 0 0 247.5 895.4 562.2 562.2 0 0 0 356.6 944.8 526.4 526.4 0 0 0 436 964C447.9 966 460 966.4 472 967.7A8.1 8.1 0 0 1 474.3 968.7H537.4C542.3 968 547.1 966.9 552.1 966.5 584 963.9 614.8 956.1 644.8 945.6A429.7 429.7 0 0 0 740.4 899.1C759.5 886.5 778.3 873.5 796.6 859.8 807.9 851.3 818 841.3 828.4 831.6 836.1 824.3 843.6 816.8 850.9 809.1A453.4 453.4 0 0 0 912.3 727.8C930.9 696.4 946.2 663.5 955.8 628.3 961.4 608 965.5 587.2 969.5 566.5 971.5 556.2 972 545.6 973.2 535.1 973.2 534.5 973.9 533.9 974.2 533.3V460.9A19.1 19.1 0 0 1 973.1 457.5ZM658.5 455.2S626.1 449.4 602.9 449.4C549.7 449.4 537.3 478.5 537.3 521.7V704.7H393.7V332.2H537.3V394.5C554.7 342.1 589.6 323.8 658.5 323.8Z", + "width": 1000 + }, + "search": [ + "ravelry" + ] + }, + { + "uid": "dfd77965a44ad847782e5f8f70c72b25", + "css": "tiktok", + "code": 59421, + "src": "custom_icons", + "selected": true, + "svg": { + "path": "M875 410A410.3 410.3 0 0 1 635.2 333.3V682.4A317.5 317.5 0 1 1 361.3 367.8V543.4A145.7 145.7 0 1 0 463.3 682.4V0L635.2 0A236.7 236.7 0 0 0 638.8 43.3H638.8A238.6 238.6 0 0 0 744.1 200 237.2 237.2 0 0 0 875 239.3Z", + "width": 875 + }, + "search": [ + "tiktok" + ] + }, + { + "uid": "1de28537d941e1ce5561cc384e7fc19a", + "css": "raspberry-pi", + "code": 59422, + "src": "custom_icons", + "selected": true, + "svg": { + "path": "M726.6 454.1L719.3 441.4C719.5 350.8 677.5 313.9 628.5 285.7 643.4 281.8 658.6 278.7 662.9 260 688.5 253.5 693.8 241.6 696.3 229.1 702.9 224.6 725.2 212.1 722.9 190.6 735.4 182 742.4 170.9 738.7 155.3 752.1 140.6 755.7 128.5 750 117.4 766.2 97.3 759 86.9 752.1 76.6 764.3 54.7 753.5 31.3 719.7 35.2 706.3 15.4 677 19.9 672.5 19.9 667.4 13.7 660.7 8.2 640.2 10.7 627-1.2 612.1 1 596.7 6.6 578.5-7.6 566.4 3.9 552.5 8.2 530.5 1.2 525.4 10.7 514.6 14.8 490.6 9.8 483.2 20.7 471.7 32.2L458.2 32C421.9 53.1 403.9 96.1 397.5 118.2 391 96.1 373 53.1 336.7 32L323.2 32.2C311.7 20.7 304.3 9.8 280.3 14.8 269.3 10.9 264.5 1.2 242.4 8.2 233.4 5.5 225-0.4 215.2-0.2 210.2 0 204.5 1.8 198.2 6.6 182.8 0.8 168-1.2 154.7 10.7 134.2 8.2 127.3 13.5 122.5 19.9 118 19.9 88.7 15.4 75.2 35.2 41.4 31.3 30.9 54.7 43 76.6 36.1 87.1 28.9 97.5 45.1 117.4 39.5 128.5 43 140.6 56.4 155.3 52.9 170.9 60 182 72.3 190.6 69.9 212.1 92.2 224.6 98.8 229.1 101.4 241.6 106.6 253.3 132.2 260 136.5 278.5 151.8 281.8 166.6 285.7 117.6 313.9 75.6 350.8 75.8 441.4L68.6 454.1C12.3 487.7-38.3 596.1 40.8 684 45.9 711.5 54.7 731.3 62.3 753.1 73.8 841.4 149.2 882.6 168.9 887.5 198 909.4 229.1 930.1 270.9 944.5 310.5 984.8 353.5 1000 396.5 1000H398.4C441.6 1000 484.4 984.8 523.8 944.5 565.8 930.1 596.7 909.4 625.8 887.5 645.7 882.6 720.9 841.4 732.4 753.1 740 731.3 748.8 711.5 753.9 684 833.2 595.9 782.6 487.7 726.6 454.1ZM683.2 438.5C680.3 475 490 311.3 522.9 305.9 612.1 291.2 686.1 343.4 683.2 438.5ZM599.2 620.3C551.4 651.2 482.4 631.3 445.3 575.8S416.8 450.4 464.6 419.5C512.5 388.7 581.4 408.6 618.6 464.1S647.1 589.5 599.2 620.3ZM466.6 57.2C468.2 65.4 470.1 70.5 472.3 72.1 482.8 60.7 491.4 49.2 505.1 38.3 505.1 44.7 501.8 51.6 510 56.6 517.2 46.9 527.1 38.1 540.2 30.7 534 41.6 539.1 44.9 542.6 49.4 552.5 40.8 562.1 32.2 580.5 25.4 575.4 31.4 568.4 37.5 575.8 44.5 586.1 38.1 596.5 31.6 620.9 27.1 615.4 33.2 603.9 39.5 610.9 45.5 623.8 40.6 638.3 36.9 654.1 35 646.5 41.2 640.2 47.3 646.5 52.1 660.4 47.9 679.5 42.2 698 47.1L686.3 59C685 60.5 713.9 60.2 733 60.5 726 70.3 718.9 79.5 714.8 96.1 716.8 98 726.2 96.9 735.2 96.1 726 115.4 710.2 120.1 706.4 128.5 712.1 132.8 719.7 131.6 728.3 128.7 721.7 142.2 708 151.6 697.1 162.5 699.8 164.5 704.7 165.6 716 164.3 705.9 175 693.8 184.8 679.3 193.6 681.8 196.5 690.6 196.5 698.8 196.7 685.7 209.4 668.9 216 653.1 224.4 660.9 229.7 666.6 228.5 672.7 228.5 661.5 237.7 642.6 242.4 625 248 628.3 253.3 631.6 254.7 638.9 256.1 620.3 266.4 593.6 261.7 586.1 267 587.9 272.3 593.2 275.6 599.2 278.3 569.1 280.1 487.3 277.1 471.5 215.2 502.1 181.4 558.2 142 654.5 93 579.5 118 511.9 151.6 455.3 197.5 388.3 166.4 434.2 88.3 466.6 57.2ZM399.4 281.1C446.7 280.5 505.1 315.8 504.9 348.8 504.7 378.1 463.9 401.8 399.8 401.4 337.1 400.6 294.9 371.7 295.1 343.2 295.1 319.9 346.3 279.7 399.4 281.1ZM159.2 256.1C166.4 254.7 169.7 253.1 173 248 155.5 242.6 136.5 237.7 125.4 228.5 131.4 228.5 137.1 229.9 144.9 224.4 129.1 216 112.3 209.4 99.2 196.7 107.4 196.5 116.2 196.7 118.7 193.6 104.3 184.8 92.2 175 82 164.3 93.4 165.6 98.2 164.5 101 162.5 90 151.6 76.2 142.2 69.7 128.7 78.1 131.6 85.9 132.6 91.6 128.5 87.9 120.3 72.1 115.4 62.9 96.1 71.9 96.9 81.2 98 83.2 96.1 79.1 79.5 71.9 70.1 65 60.5 84.2 60.4 113.1 60.5 111.7 59L100 47.1C118.6 42.2 137.7 47.9 151.6 52.1 157.8 47.3 151.4 41.2 143.9 35 159.8 37.1 174 40.6 187.1 45.5 193.9 39.5 182.6 33.2 177.1 27.1 201.6 31.6 211.9 38.1 222.3 44.5 229.7 37.5 222.7 31.4 217.6 25.4 235.9 32 245.5 40.8 255.5 49.4 258.8 44.9 264.1 41.6 257.8 30.7 270.9 38.1 280.9 46.9 288.1 56.6 296.1 51.6 293 44.5 293 38.3 306.6 49.2 315.2 60.7 325.8 72.1 327.9 70.5 329.7 65.4 331.4 57.2 363.9 88.3 409.8 166.4 343.2 197.5 286.5 151.6 218.9 118 143.9 93 240.2 141.8 296.3 181.4 327 215.2 311.3 277.3 229.3 280.1 199.2 278.3 205.3 275.6 210.5 272.1 212.3 267 204.5 261.5 177.9 266.2 159.2 256.1ZM276.6 303.1C309.4 308.6 119.1 472.1 116.2 435.7 113.3 340.6 187.5 288.3 276.6 303.1ZM74.6 668C28.3 631.3 13.5 524 99.2 476 151 462.3 116.8 686.5 74.6 668ZM252.3 859.8C226.4 875.2 162.9 868.9 118 805.3 87.7 751.8 91.6 697.5 112.9 681.4 144.7 662.3 193.9 688.1 231.8 731.4 264.8 770.5 279.9 839.5 252.3 859.8ZM200.8 626C152.9 595.1 144.3 525.2 181.4 469.7S287.5 394.3 335.4 425.2 391.8 526 354.7 581.4C317.4 636.9 248.4 656.8 200.8 626ZM400.4 968.8C343 971.1 286.7 922.5 287.5 905.7 286.7 880.9 357.4 861.5 403.3 862.7 449.6 860.7 511.9 877.3 512.1 899.6 513.1 921.1 455.9 969.7 400.4 968.7ZM515.4 724.8C515.8 782.8 464.3 829.9 400.6 830.3 336.9 830.7 285 783.8 284.6 726V724.8C284.2 666.8 335.7 619.7 399.4 619.3 463.1 618.9 515 665.8 515.4 723.6V724.8ZM676 808.2C626.6 875.8 559.6 878.3 534.8 859.6 508.8 835.4 528.5 760.2 564.3 718.9 605.1 673.4 648.8 643.8 679.3 667 699.8 687.1 711.9 762.9 676 808.2ZM720.7 665.2C678.7 683.6 644.5 459.6 696.1 473.2 781.8 521.5 767 628.7 720.7 665.2Z", + "width": 795 + }, + "search": [ + "raspberry-pi" + ] + }, + { + "uid": "1d2f79b2cc57ba2647da0eceefeaabf9", + "css": "btc", + "code": 59425, + "src": "custom_icons", + "selected": true, + "svg": { + "path": "M605.9 473.9C660 446.2 694.5 397 686.5 315.1 676 203.1 584 165.6 462.2 155.1V0H367.4V150.8C342.8 150.8 317.5 151.4 292.3 152V0H197.5V155.1C162.7 156.1 122.1 155.6 7.4 155.1V256C82.2 254.7 121.4 249.9 130.4 297.9V722.5C124.7 760.6 94.3 755.1 26.4 753.9L7.4 866.6C180.2 866.6 197.5 867.2 197.5 867.2V1000H292.3V869C318.2 869.6 343.4 869.6 367.4 869.6V1000H462.2V867.2C621 858.6 727.1 818.6 741.3 669 752.3 549 695.7 495.4 605.9 473.9ZM294.2 262.8C347.7 262.8 515.1 246.2 515.1 357.6 515.1 464.1 347.7 451.7 294.2 451.7V262.8ZM294.2 754.5V546.5C358.2 546.5 554.2 528.7 554.2 650.5 554.2 768.1 358.2 754.5 294.2 754.5Z", + "width": 750 + }, + "search": [ + "btc" + ] + }, + { + "uid": "9bb6724274d0420267594840bb098153", + "css": "facebook", + "code": 59426, + "src": "custom_icons", + "selected": true, + "svg": { + "path": "M984.4 500C984.4 232.4 767.6 15.6 500 15.6S15.6 232.4 15.6 500C15.6 741.8 192.8 942.1 424.3 978.5V640H301.3V500H424.3V393.3C424.3 271.9 496.6 204.8 607.3 204.8 660.3 204.8 715.7 214.3 715.7 214.3V333.4H654.6C594.5 333.4 575.7 370.8 575.7 409.1V500H710L688.5 640H575.7V978.5C807.2 942.1 984.4 741.8 984.4 500Z", + "width": 1000 + }, + "search": [ + "facebook" + ] + }, + { + "uid": "71bdf05fbdf6d83772c1f5c4662121ce", + "css": "medium", + "code": 59427, + "src": "custom_icons", + "selected": true, + "svg": { + "path": "M0 62.5V937.5H875V62.5H0ZM727 269.7L680.1 314.6C676 317.8 674 322.9 674.8 327.7V658.4C674 663.5 676 668.6 680.1 671.5L726 716.4V726.4H495.5V716.8L543 670.7C547.7 666 547.7 664.6 547.7 657.6V390.2L415.6 725.4H397.9L244.1 390.2V614.8C242.8 624.2 246.1 633.8 252.7 640.6L314.5 715.4V725.4H139.1V715.4L200.8 640.6C207.4 633.8 210.4 624.2 208.8 614.8V355.1C209.6 347.9 206.8 340.8 201.4 335.9L146.5 269.7V259.8H317L448.6 548.8 564.5 260H727V269.7Z", + "width": 875 + }, + "search": [ + "medium" + ] + }, + { + "uid": "a598b7bf911e21bb0156dff39602dcef", + "css": "etsy", + "code": 59428, + "src": "custom_icons", + "selected": true, + "svg": { + "path": "M750 679.7C746.6 700.7 723.1 894.5 719.7 937.5 489.5 929.1 290.2 928.2 0 937.5V887.7C88.8 870.2 118.4 872 119.1 818.8 122.6 677.6 126 342 119.1 189.9 117.1 134.4 95.4 137.7 0 119.6V69.8C144.3 74.4 499.9 86.5 709 62.5 702.1 137.2 693.8 309.6 693.8 309.6H648.4C626.8 225.9 611.8 132.8 541.5 132.8H273.9C253.9 132.8 252.9 139.6 252.9 151.9V471.7C366.2 472.7 425.8 466.8 425.8 466.8 483.9 464.9 479.6 450.2 505.4 339.4H555.7C547.1 537.3 548 460.1 552.2 652.3H502C484.1 574 484.2 533.1 424.8 532.2 424.8 532.2 382.8 528.3 252.9 528.3V799.8C252.9 850.6 280.8 874.5 339.4 874.5H513.7C638 874.5 643.7 825.7 706.5 679.7H750Z", + "width": 750 + }, + "search": [ + "etsy" + ] + }, + { + "uid": "de5f0a564ccf8816325330e292e11533", + "css": "rss", + "code": 61763, + "src": "fontawesome" + }, + { + "uid": "ff70f7b3228702e0d590e60ed3b90bea", + "css": "magic", + "code": 61648, + "src": "fontawesome" + }, + { + "uid": "f85affb51c357be83d187344c8c6e35c", + "css": "diamond", + "code": 61977, + "src": "fontawesome" + }, + { + "uid": "9bd60140934a1eb9236fd7a8ab1ff6ba", + "css": "spin", + "code": 59444, + "src": "fontelico" + }, + { + "uid": "41087bc74d4b20b55059c60a33bf4008", + "css": "edit", + "code": 59403, + "src": "fontawesome" + }, + { + "uid": "567e3e257f2cc8fba2c12bf691c9f2d8", + "css": "moon", + "code": 61830, + "src": "fontawesome" + }, + { + "uid": "e82cedfa1d5f15b00c5a81c9bd731ea2", + "css": "info", + "code": 59394, + "src": "fontawesome" + }, + { + "uid": "f27bba41a700af51a4dd23cf4edea61d", + "css": "headphones", + "code": 59407, + "src": "fontawesome" + }, + { + "uid": "28f308aa0a07a67433f54c089c400d82", + "css": "gift", + "code": 59411, + "src": "fontawesome" + }, + { + "uid": "d7271d490b71df4311e32cdacae8b331", + "css": "home", + "code": 59400, + "src": "fontawesome" + }, + { + "uid": "9daa1fdf0838118518a7e22715e83abc", + "css": "file-pdf", + "code": 61889, + "src": "fontawesome" + }, + { + "uid": "b035c28eba2b35c6ffe92aee8b0df507", + "css": "attention", + "code": 59405, + "src": "fontawesome" + }, + { + "uid": "5278ef7773e948d56c4d442c8c8c98cf", + "css": "lightbulb", + "code": 61675, + "src": "fontawesome" + }, + { + "uid": "531bc468eecbb8867d822f1c11f1e039", + "css": "calendar", + "code": 59396, + "src": "fontawesome" + }, + { + "uid": "ccc2329632396dc096bb638d4b46fb98", + "css": "mail", + "code": 61664, + "src": "fontawesome" + }, + { + "uid": "474656633f79ea2f1dad59ff63f6bf07", + "css": "star", + "code": 59392, + "src": "fontawesome" + }, + { + "uid": "d73eceadda1f594cec0536087539afbf", + "css": "heart", + "code": 59393, + "src": "fontawesome" + }, + { + "uid": "7cca4643f1e938c673e91c0c78058ddf", + "css": "gitlab", + "code": 62102, + "src": "fontawesome" + }, + { + "uid": "f7dff44258aa565cbe35565be350b58d", + "css": "xing", + "code": 61801, + "src": "fontawesome" + }, + { + "uid": "f3d95e13eb43f3f6b8efe1eb424a1e3b", + "css": "vkontakte", + "code": 61833, + "src": "fontawesome" + }, + { + "uid": "1f66490bf24c99e2c56b866d8fbd0372", + "css": "vimeo", + "code": 61844, + "src": "fontawesome" + }, + { + "uid": "627abcdb627cb1789e009c08e2678ef9", + "css": "twitter", + "code": 61593, + "src": "fontawesome" + }, + { + "uid": "1145676a91138011729fa2909997af66", + "css": "linkedin", + "code": 62220, + "src": "fontawesome" + }, + { + "uid": "47a35af762c8e06f3d152750134c8750", + "css": "linux", + "code": 61820, + "src": "fontawesome" + }, + { + "uid": "5e0a374728ffa8d0ae1f331a8f648231", + "css": "github-octocat", + "code": 61715, + "src": "fontawesome" + }, + { + "uid": "0f6a2573a7b6df911ed199bb63717e27", + "css": "github", + "code": 61595, + "src": "fontawesome" + }, + { + "uid": "4c1ef492f1d2c39a2250ae457cee2a6e", + "css": "instagram", + "code": 61805, + "src": "fontawesome" + }, + { + "uid": "9121e3eb89863f67c8bda378eea01a93", + "css": "reddit", + "code": 61857, + "src": "fontawesome" + }, + { + "uid": "da851b7c1f84ee83f93b29ae613558dc", + "css": "pinterest", + "code": 61650, + "src": "fontawesome" + }, + { + "uid": "e70df9acbabaebfbbf9c1dbc3e52ab13", + "css": "twitch", + "code": 61928, + "src": "fontawesome" + }, + { + "uid": "47a1f80457068fbeab69fdb83d7d0817", + "css": "youtube", + "code": 61802, + "src": "fontawesome" + }, + { + "uid": "8933c2579166c2ee56ae40dc6a0b4dc6", + "css": "angle-circled-left", + "code": 61751, + "src": "fontawesome" + }, + { + "uid": "94089b37297572e936b0943bcfa041d3", + "css": "angle-circled-right", + "code": 61752, + "src": "fontawesome" + }, + { + "uid": "5717236f6134afe2d2a278a5c9b3927a", + "css": "play-circled", + "code": 61764, + "src": "fontawesome" + } + ] +}
\ No newline at end of file diff --git a/assets/js/src/misc.js b/assets/js/src/base.js index aac31db..0679a2a 100644 --- a/assets/js/src/misc.js +++ b/assets/js/src/base.js @@ -1,6 +1,7 @@ +document.documentElement.className = "js" + var $ = document.querySelector.bind(document), $$ = document.querySelectorAll.bind(document) - /** * * @param {Element} e Element for DOM modification @@ -22,5 +23,3 @@ function setVisibility(e, visible, useAttr = true) { e.classList.add(visible ? 'show' : 'hide') e.classList.remove(visible ? 'hide' : 'show') } - -function onLogoClick() { } diff --git a/assets/js/src/contact.js b/assets/js/src/contact.js index 89de1bb..5f1a176 100644 --- a/assets/js/src/contact.js +++ b/assets/js/src/contact.js @@ -1,5 +1,6 @@ -(function () { +(() => { var realmsg = $('textarea[name=message2]') + // For spam protection, we use "message" as a honeypot field: var honeypotmsg = $('textarea[name=message]') if (realmsg === null) { @@ -8,33 +9,29 @@ setVisibility(realmsg, true) setVisibility(honeypotmsg, false) - // For spam protection, we use "message" as a honeypot field: honeypotmsg.removeAttribute("required") - $('#form-contact').addEventListener('submit', function (e) { + $('#form-contact').addEventListener('submit', (e) => { e.preventDefault() - // Store form field values - var name = $('input[name=name]').value, - email = $('input[name=email]').value, - subject = $('input[name=_subject]').value, - matter = $('select[name=matter]').value, - message = realmsg.value, - honeypot = honeypotmsg.value - + var email = $('input[name=email]').value // AJAX request var request = new XMLHttpRequest(), data = { - name: name, + name: $('input[name=name]').value, _replyto: email, email: email, - _subject: subject, - _matter: matter, - message: message, + _subject: $('input[name=_subject]').value, + message: realmsg.value, } + var honeypot = honeypotmsg.value if (honeypot !== "") { data._anti_spam_honeypot = honeypot } + matter = $('select[name=matter]') + if (matter) { + data._matter = matter.value + } var sending = $('#form-sending'), submit = $('#form-submit'), @@ -49,7 +46,7 @@ request.setRequestHeader('Content-Type', 'application/json') request.setRequestHeader('Accept', 'application/json') // Call function when the state changes - request.onreadystatechange = function () { + request.onreadystatechange = () => { if (request.readyState === XMLHttpRequest.DONE) { if (request.status === 200) { // Reset form @@ -69,13 +66,11 @@ thankYouFadeIn() } else { - // Reset form - $('#form-contact').reset() - + setVisibility(sending, false) setVisibility(error, true) } } } request.send(JSON.stringify(data)) }) -})() +})()
\ No newline at end of file diff --git a/assets/js/src/home.js b/assets/js/src/home.js new file mode 100644 index 0000000..2facf47 --- /dev/null +++ b/assets/js/src/home.js @@ -0,0 +1,58 @@ +(() => { + // Nav starts at bottom then is fixed to top + // Logo and hamburger menus fade in and out + const ITEMS = [...$$(".nav-item")] + const SECTIONS = [...$$("main > section")].reverse() + const THRESHOLD = 330 + var oldIdx = -1 + + function changeNavHeader(idx) { + ITEMS.forEach((itm) => { itm.classList.remove("nav-item-active") }) + if (idx < SECTIONS.length) { + ITEMS[idx].classList.add("nav-item-active") + } + oldIdx = idx + } + + window.addEventListener("scroll", () => { + var scrollPosition = window.scrollY || window.pageYOffset + windowHeight = window.innerHeight + navHeight = nav.clientHeight + + if (scrollPosition > windowHeight - navHeight) { + if (!navFixed) { requestAnimationFrame(() => fixNav(true)) } + } else { + if (navFixed) { requestAnimationFrame(() => fixNav(false)) } + } + const idx = SECTIONS.length - 1 - SECTIONS.findIndex( + (sec) => scrollPosition > sec.offsetTop - THRESHOLD + ) + if (idx != oldIdx) { + requestAnimationFrame(() => { changeNavHeader(idx) }) + } + }); + + /* + var header = $('header') + var oldViewportHeight = 0; + const heightChangeThreshold = 120; // approximate address bar height fits for Chrome (100) and Brave (104) + // Viewport size in mobile is impaired by address bar that automatically collapses on scroll. + // This updates it to the "real dynamic viewport size" + function updateViewportToInner() { + // Adapted from: https://css-tricks.com/the-trick-to-viewport-units-on-mobile/ + // let vh = window.innerHeight * 0.01; + // document.documentElement.style.setProperty('--vh', `${vh}px`); + + // The following is a nasty hack and definitely not perfect: + // We only want to change the height if the user directly resizes the window, + // hence we aim to ignore "auto-collapse" address bar resize events by only resizing if guessed threshold was exceeded. + if (Math.abs(oldViewportHeight - window.innerHeight) > heightChangeThreshold) { + // header.style.maxHeight = window.innerHeight + 'px' + header.style.height = window.innerHeight + 'px' + oldViewportHeight = window.innerHeight + } + } + updateViewportToInner() + window.addEventListener('resize', updateViewportToInner) + */ +})()
\ No newline at end of file diff --git a/assets/js/src/modal.js b/assets/js/src/modal.js index 3c9190b..e6406f7 100644 --- a/assets/js/src/modal.js +++ b/assets/js/src/modal.js @@ -1,62 +1,70 @@ -(function () { +(() => { var ANIMATION_TIME = 500 - var modal, - modalBoxes = $$('.modal-box'), - // Link that opens modal - openLinks = $$('.gallery-modal-link'), - // Link that closes modal - closeLinks = $$('.close') - // Modal open animation - function openModal() { - modalBoxes.forEach(function (box) { - box.classList.add('scale-in-center') - box.classList.remove('scale-out-center') - }) - } + window.addEventListener('popstate', (event) => { + if (event.state == null) { + active = $('div.modal.active') + if (active) { + close(active) + } + } else if ('modal' in event.state) { + open($(`#modal-${event.state.modal}`)) + } + }) + + function close(modal) { + history.replaceState(null, "", "") + box = modal.firstElementChild + box.classList.remove('scale-in-center') + box.classList.add('scale-out-center') - // Modal close animation - function closeModal() { - modalBoxes.forEach(function (box) { - box.classList.remove('scale-in-center') - box.classList.add('scale-out-center') - // Remove active class from modal after modal-box animation is done - // box.addEventListener('animationend', function() { - // console.log('animation ended') - // modal.classList.remove('active') - // }) - setTimeout(function () { modal.classList.remove('active') }, ANIMATION_TIME) - }) + setTimeout(() => modal.classList.remove('active'), ANIMATION_TIME) } + {{ if .Site.Params.Feat.useTermynal -}} var terms = {}; var termOptions = {}; {{ range where .Site.RegularPages "Section" "gallery" }} {{ if .Params.terminal -}} {{ if .Params.terminal.options -}} - termOptions["{{ .File.BaseFileName }}"] = JSON.parse('{{ .Params.terminal.options | jsonify }}') - {{- else -}} - termOptions["{{ .File.BaseFileName }}"] = {} + termOptions["{{ .File.BaseFileName }}"] = JSON.parse('{{ .Params.terminal.options | jsonify }}') + {{- else -}} + termOptions["{{ .File.BaseFileName }}"] = {} {{- end }} {{- end }} {{- end }} {{- end }} - function open(modalElement) { - modal = modalElement + function open(modal) { + const modalID = modal.getAttribute('id') modal.classList.add('active') - openModal() + + box = modal.firstElementChild + box.classList.remove('scale-out-center') + box.classList.add('scale-in-center') + + $(`#${modalID} .close`).onclick = (_) => { close(modal) } + window.onclick = (e) => { + if (e.target === modal) { + close(modal) + } + } + document.onkeydown = (e) => { + if (e.key === 'Escape') { + close(modal) + } + } {{ if .Site.Params.Feat.useTermynal -}} - var termKey = modal.getAttribute('id').replace('modal-', '') + var termKey = modalID.replace('modal-', '') var term = $(`#term-${termKey}`) if (term !== null && typeof terms[termKey] === 'undefined') { var options = termOptions[termKey] - options.onExitCommand = function () { + options.onExitCommand = () => { term.classList.add('scale-out-center') - setTimeout(function () { + setTimeout(() => { $(`#content-${termKey}`).removeAttribute("hidden") term.setAttribute("hidden", true) }, ANIMATION_TIME + 10) @@ -68,37 +76,20 @@ // Open modal on link click - openLinks.forEach(function (link) { - link.onclick = function (e) { - e.preventDefault() - open($(`#modal-${e.target.getAttribute('href').substr(1)}`)) + $$('.gallery-modal-link').forEach((link) => { + link.onclick = (e) => { + e.preventDefault() // omit auto scroll to anchor link + id = e.target.getAttribute('href').substr(1) + history.pushState({modal: id}, "", `#${id}`) + open($(`#modal-${id}`)) } const loc = window.location.href const seg = loc.substring(loc.lastIndexOf('/') + 1) if (link.getAttribute('href') == seg) { - open($(`#modal-${link.getAttribute('href').substr(1)}`)) + // TODO(kdevo): Add check if actually arrived at gallery item + setTimeout(() => { + open($(`#modal-${link.getAttribute('href').substr(1)}`)) + }, ANIMATION_TIME * 2) } }) - - // Close modal on close link - closeLinks.forEach(function (link) { - link.onclick = function (e) { - e.preventDefault() - closeModal() - } - }) - - // Close modal on click outside modal - window.onclick = function (e) { - if (e.target === modal) { - closeModal() - } - } - - // Close modal on ESC key press - document.onkeydown = function (e) { - if (e.key === 'Escape') { - closeModal() - } - } })() diff --git a/assets/js/src/nav.js b/assets/js/src/nav.js index dcc1e79..a9ad7d8 100644 --- a/assets/js/src/nav.js +++ b/assets/js/src/nav.js @@ -1,130 +1,65 @@ -function handleNavBar(isMainPage) { - menuActive = false - var nav = $('nav') - - function setFixedNav(isFixed) { - if (isFixed) { - // Fixed to top - nav.classList.add('nav-fixed') - nav.classList.add('nav-shadow') - - $$('nav > .logo, nav > .nav-toggle').forEach(function (el) { - setVisibility(el, true, false) - }) - } else { - // Not fixed, at bottom - nav.classList.remove('nav-fixed') - nav.classList.remove('nav-shadow') - - $$('nav > .logo, nav > .nav-toggle').forEach(function (el) { - setVisibility(el, false, false) - }) - } - } - - if (isMainPage) { - // Nav starts at bottom then is fixed to top - // Logo and hamburger menus fade in and out - // Scrollspy partly adapted from https://medium.com/p/-3131c114abdc - document.addEventListener('DOMContentLoaded', function () { - const ITEMS = [...$$(".nav-item")] - const SECTIONS = [...$$("main > section")].reverse() - const THRESHOLD = 340 - var oldIdx = -1 - - window.addEventListener("scroll", () => { - var scrollPosition = window.scrollY || window.pageYOffset || document.documentElement.scrollTop, - windowHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight, - navHeight = nav.clientHeight - - if (scrollPosition > windowHeight - navHeight) { - setFixedNav(true) - } else { - setFixedNav(false) - } - const idx = SECTIONS.length - 1 - SECTIONS.findIndex( - (sec) => scrollPosition > sec.offsetTop - THRESHOLD - ) - if (idx != oldIdx) { - ITEMS.forEach((itm) => itm.classList.remove("nav-item-active")) - ITEMS[idx].classList.add("nav-item-active") - oldIdx = idx - } - }); - }, false); +var menuActive = false +var navFixed = false +var nav = $('nav') + navToggleAndLogo = $$('nav > .logo, nav > .nav-toggle') + +function fixNav(setFixed) { + if (setFixed) { + nav.classList.add('nav-fixed') + navToggleAndLogo.forEach((el) => { + setVisibility(el, true, false) + }) } else { - setFixedNav(true) + nav.classList.remove('nav-fixed') + navToggleAndLogo.forEach((el) => { + setVisibility(el, false, false) + }) } + navFixed = setFixed +} - function toggle() { - if (menuActive) { - $('#open').classList.remove('icon-active') - menuActive = false - } else { - $('#open').classList.add('icon-active') - menuActive = true - } +function toggleMenu() { + if (menuActive) { + $('.nav-icon').classList.remove('icon-active') + } else { + $('.nav-icon').classList.add('icon-active') } + menuActive = !menuActive +} - // Full screen nav open on click - $('.nav-icon').addEventListener('click', function () { - toggle() - $$('.nav-full, main').forEach(function (el) { - el.classList.toggle('active') - }) +// Full screen nav open on click +$('.nav-icon').addEventListener('click', () => { + toggleMenu() + $$('.nav-full, main').forEach((el) => { + el.classList.toggle('active') }) +}) - // Full screen nav close on click - $$('.nav-full a').forEach(function (links) { - links.addEventListener('click', function () { - toggle() - $$('.nav-full, main').forEach(function (el) { - el.classList.toggle('active') - }) +// Full screen nav close on click +$$('.nav-full a').forEach((links) => { + links.addEventListener('click', () => { + toggleMenu() + $$('.nav-full, main').forEach((el) => { + el.classList.toggle('active') }) }) +}) - // Fix logoBig drawing over nav when click on logoSmall while nav open - $('.logo').addEventListener('click', function () { - toggle() - if ($('.nav-full').classList.contains('active')) { - $$('.nav-full, main').forEach(function (el) { - el.classList.toggle('active') - }) - } - }) - - // Disable scroll when full screen nav is open - $('body').addEventListener('click', function () { - if ($('.nav-full').classList.contains('active')) { - $('html').style.overflowY = 'hidden' - } else { - $('html').style.overflowY = 'scroll' - } - }) - - // Mobile browsers viewport height bug fix - // TODO(kdevo): Verify relevance - function fullMobileViewport() { - var element = this, - viewportHeight = window.innerHeight, - heightChangeTolerance = 100 // Approximate address bar height in Chrome - - $(window).resize(function () { - if (Math.abs(viewportHeight - window.innerHeight) > heightChangeTolerance) { - viewportHeight = window.innerHeight - update() - } +// Fix logoBig drawing over nav when click on logoSmall while nav open +$('.logo').addEventListener('click', () => { + if ($('.nav-full').classList.contains('active')) { + toggleMenu() + $$('.nav-full, main').forEach((el) => { + el.classList.toggle('active') }) - - function update() { - element.style.height = (viewportHeight + 'px') - } - - update() } +}) - $$('header').forEach(function () { - fullMobileViewport - }) -} +// Disable scroll when full screen nav is open +$('body').addEventListener('click', () => { + if ($('.nav-full').classList.contains('active')) { + $('html').style.overflowY = 'hidden' + } else { + $('html').style.overflowY = 'scroll' + } +}) diff --git a/assets/js/src/termynal.js b/assets/js/src/termynal.js index cf2912c..4d55fe9 100644 --- a/assets/js/src/termynal.js +++ b/assets/js/src/termynal.js @@ -10,8 +10,6 @@ * @license MIT */ -'use strict'; - /** Generate a terminal widget. */ class Termynal { /** diff --git a/assets/js/vendor/lazysizes.min.js b/assets/js/vendor/lazysizes.min.js index 0b08698..59b0e8f 100644 --- a/assets/js/vendor/lazysizes.min.js +++ b/assets/js/vendor/lazysizes.min.js @@ -1,2 +1,2 @@ -/*! lazysizes - v5.1.2 */ -!function(a,b){var c=b(a,a.document);a.lazySizes=c,"object"==typeof module&&module.exports&&(module.exports=c)}("undefined"!=typeof window?window:{},function(a,b){"use strict";var c,d;if(function(){var b,c={lazyClass:"lazyload",loadedClass:"lazyloaded",loadingClass:"lazyloading",preloadClass:"lazypreload",errorClass:"lazyerror",autosizesClass:"lazyautosizes",srcAttr:"data-src",srcsetAttr:"data-srcset",sizesAttr:"data-sizes",minSize:40,customMedia:{},init:!0,expFactor:1.5,hFac:.8,loadMode:2,loadHidden:!0,ricTimeout:0,throttleDelay:125};d=a.lazySizesConfig||a.lazysizesConfig||{};for(b in c)b in d||(d[b]=c[b])}(),!b||!b.getElementsByClassName)return{init:function(){},cfg:d,noSupport:!0};var e=b.documentElement,f=a.Date,g=a.HTMLPictureElement,h="addEventListener",i="getAttribute",j=a[h],k=a.setTimeout,l=a.requestAnimationFrame||k,m=a.requestIdleCallback,n=/^picture$/i,o=["load","error","lazyincluded","_lazyloaded"],p={},q=Array.prototype.forEach,r=function(a,b){return p[b]||(p[b]=new RegExp("(\\s|^)"+b+"(\\s|$)")),p[b].test(a[i]("class")||"")&&p[b]},s=function(a,b){r(a,b)||a.setAttribute("class",(a[i]("class")||"").trim()+" "+b)},t=function(a,b){var c;(c=r(a,b))&&a.setAttribute("class",(a[i]("class")||"").replace(c," "))},u=function(a,b,c){var d=c?h:"removeEventListener";c&&u(a,b),o.forEach(function(c){a[d](c,b)})},v=function(a,d,e,f,g){var h=b.createEvent("Event");return e||(e={}),e.instance=c,h.initEvent(d,!f,!g),h.detail=e,a.dispatchEvent(h),h},w=function(b,c){var e;!g&&(e=a.picturefill||d.pf)?(c&&c.src&&!b[i]("srcset")&&b.setAttribute("srcset",c.src),e({reevaluate:!0,elements:[b]})):c&&c.src&&(b.src=c.src)},x=function(a,b){return(getComputedStyle(a,null)||{})[b]},y=function(a,b,c){for(c=c||a.offsetWidth;c<d.minSize&&b&&!a._lazysizesWidth;)c=b.offsetWidth,b=b.parentNode;return c},z=function(){var a,c,d=[],e=[],f=d,g=function(){var b=f;for(f=d.length?e:d,a=!0,c=!1;b.length;)b.shift()();a=!1},h=function(d,e){a&&!e?d.apply(this,arguments):(f.push(d),c||(c=!0,(b.hidden?k:l)(g)))};return h._lsFlush=g,h}(),A=function(a,b){return b?function(){z(a)}:function(){var b=this,c=arguments;z(function(){a.apply(b,c)})}},B=function(a){var b,c=0,e=d.throttleDelay,g=d.ricTimeout,h=function(){b=!1,c=f.now(),a()},i=m&&g>49?function(){m(h,{timeout:g}),g!==d.ricTimeout&&(g=d.ricTimeout)}:A(function(){k(h)},!0);return function(a){var d;(a=!0===a)&&(g=33),b||(b=!0,d=e-(f.now()-c),d<0&&(d=0),a||d<9?i():k(i,d))}},C=function(a){var b,c,d=99,e=function(){b=null,a()},g=function(){var a=f.now()-c;a<d?k(g,d-a):(m||e)(e)};return function(){c=f.now(),b||(b=k(g,d))}},D=function(){var g,l,m,o,p,y,D,F,G,H,I,J,K=/^img$/i,L=/^iframe$/i,M="onscroll"in a&&!/(gle|ing)bot/.test(navigator.userAgent),N=0,O=0,P=0,Q=-1,R=function(a){P--,(!a||P<0||!a.target)&&(P=0)},S=function(a){return null==J&&(J="hidden"==x(b.body,"visibility")),J||!("hidden"==x(a.parentNode,"visibility")&&"hidden"==x(a,"visibility"))},T=function(a,c){var d,f=a,g=S(a);for(F-=c,I+=c,G-=c,H+=c;g&&(f=f.offsetParent)&&f!=b.body&&f!=e;)(g=(x(f,"opacity")||1)>0)&&"visible"!=x(f,"overflow")&&(d=f.getBoundingClientRect(),g=H>d.left&&G<d.right&&I>d.top-1&&F<d.bottom+1);return g},U=function(){var a,f,h,j,k,m,n,p,q,r,s,t,u=c.elements;if((o=d.loadMode)&&P<8&&(a=u.length)){for(f=0,Q++;f<a;f++)if(u[f]&&!u[f]._lazyRace)if(!M||c.prematureUnveil&&c.prematureUnveil(u[f]))aa(u[f]);else if((p=u[f][i]("data-expand"))&&(m=1*p)||(m=O),r||(r=!d.expand||d.expand<1?e.clientHeight>500&&e.clientWidth>500?500:370:d.expand,c._defEx=r,s=r*d.expFactor,t=d.hFac,J=null,O<s&&P<1&&Q>2&&o>2&&!b.hidden?(O=s,Q=0):O=o>1&&Q>1&&P<6?r:N),q!==m&&(y=innerWidth+m*t,D=innerHeight+m,n=-1*m,q=m),h=u[f].getBoundingClientRect(),(I=h.bottom)>=n&&(F=h.top)<=D&&(H=h.right)>=n*t&&(G=h.left)<=y&&(I||H||G||F)&&(d.loadHidden||S(u[f]))&&(l&&P<3&&!p&&(o<3||Q<4)||T(u[f],m))){if(aa(u[f]),k=!0,P>9)break}else!k&&l&&!j&&P<4&&Q<4&&o>2&&(g[0]||d.preloadAfterLoad)&&(g[0]||!p&&(I||H||G||F||"auto"!=u[f][i](d.sizesAttr)))&&(j=g[0]||u[f]);j&&!k&&aa(j)}},V=B(U),W=function(a){var b=a.target;if(b._lazyCache)return void delete b._lazyCache;R(a),s(b,d.loadedClass),t(b,d.loadingClass),u(b,Y),v(b,"lazyloaded")},X=A(W),Y=function(a){X({target:a.target})},Z=function(a,b){try{a.contentWindow.location.replace(b)}catch(c){a.src=b}},$=function(a){var b,c=a[i](d.srcsetAttr);(b=d.customMedia[a[i]("data-media")||a[i]("media")])&&a.setAttribute("media",b),c&&a.setAttribute("srcset",c)},_=A(function(a,b,c,e,f){var g,h,j,l,o,p;(o=v(a,"lazybeforeunveil",b)).defaultPrevented||(e&&(c?s(a,d.autosizesClass):a.setAttribute("sizes",e)),h=a[i](d.srcsetAttr),g=a[i](d.srcAttr),f&&(j=a.parentNode,l=j&&n.test(j.nodeName||"")),p=b.firesLoad||"src"in a&&(h||g||l),o={target:a},s(a,d.loadingClass),p&&(clearTimeout(m),m=k(R,2500),u(a,Y,!0)),l&&q.call(j.getElementsByTagName("source"),$),h?a.setAttribute("srcset",h):g&&!l&&(L.test(a.nodeName)?Z(a,g):a.src=g),f&&(h||l)&&w(a,{src:g})),a._lazyRace&&delete a._lazyRace,t(a,d.lazyClass),z(function(){var b=a.complete&&a.naturalWidth>1;p&&!b||(b&&s(a,"ls-is-cached"),W(o),a._lazyCache=!0,k(function(){"_lazyCache"in a&&delete a._lazyCache},9)),"lazy"==a.loading&&P--},!0)}),aa=function(a){if(!a._lazyRace){var b,c=K.test(a.nodeName),e=c&&(a[i](d.sizesAttr)||a[i]("sizes")),f="auto"==e;(!f&&l||!c||!a[i]("src")&&!a.srcset||a.complete||r(a,d.errorClass)||!r(a,d.lazyClass))&&(b=v(a,"lazyunveilread").detail,f&&E.updateElem(a,!0,a.offsetWidth),a._lazyRace=!0,P++,_(a,b,f,e,c))}},ba=C(function(){d.loadMode=3,V()}),ca=function(){3==d.loadMode&&(d.loadMode=2),ba()},da=function(){if(!l){if(f.now()-p<999)return void k(da,999);l=!0,d.loadMode=3,V(),j("scroll",ca,!0)}};return{_:function(){p=f.now(),c.elements=b.getElementsByClassName(d.lazyClass),g=b.getElementsByClassName(d.lazyClass+" "+d.preloadClass),j("scroll",V,!0),j("resize",V,!0),a.MutationObserver?new MutationObserver(V).observe(e,{childList:!0,subtree:!0,attributes:!0}):(e[h]("DOMNodeInserted",V,!0),e[h]("DOMAttrModified",V,!0),setInterval(V,999)),j("hashchange",V,!0),["focus","mouseover","click","load","transitionend","animationend"].forEach(function(a){b[h](a,V,!0)}),/d$|^c/.test(b.readyState)?da():(j("load",da),b[h]("DOMContentLoaded",V),k(da,2e4)),c.elements.length?(U(),z._lsFlush()):V()},checkElems:V,unveil:aa,_aLSL:ca}}(),E=function(){var a,c=A(function(a,b,c,d){var e,f,g;if(a._lazysizesWidth=d,d+="px",a.setAttribute("sizes",d),n.test(b.nodeName||""))for(e=b.getElementsByTagName("source"),f=0,g=e.length;f<g;f++)e[f].setAttribute("sizes",d);c.detail.dataAttr||w(a,c.detail)}),e=function(a,b,d){var e,f=a.parentNode;f&&(d=y(a,f,d),e=v(a,"lazybeforesizes",{width:d,dataAttr:!!b}),e.defaultPrevented||(d=e.detail.width)&&d!==a._lazysizesWidth&&c(a,f,e,d))},f=function(){var b,c=a.length;if(c)for(b=0;b<c;b++)e(a[b])},g=C(f);return{_:function(){a=b.getElementsByClassName(d.autosizesClass),j("resize",g)},checkElems:g,updateElem:e}}(),F=function(){!F.i&&b.getElementsByClassName&&(F.i=!0,E._(),D._())};return k(function(){d.init&&F()}),c={cfg:d,autoSizer:E,loader:D,init:F,uP:w,aC:s,rC:t,hC:r,fire:v,gW:y,rAF:z}});
\ No newline at end of file +/*! lazysizes - v5.3.2 */ +!function(e){var t=function(u,D,f){"use strict";var k,H;if(function(){var e;var t={lazyClass:"lazyload",loadedClass:"lazyloaded",loadingClass:"lazyloading",preloadClass:"lazypreload",errorClass:"lazyerror",autosizesClass:"lazyautosizes",fastLoadedClass:"ls-is-cached",iframeLoadMode:0,srcAttr:"data-src",srcsetAttr:"data-srcset",sizesAttr:"data-sizes",minSize:40,customMedia:{},init:true,expFactor:1.5,hFac:.8,loadMode:2,loadHidden:true,ricTimeout:0,throttleDelay:125};H=u.lazySizesConfig||u.lazysizesConfig||{};for(e in t){if(!(e in H)){H[e]=t[e]}}}(),!D||!D.getElementsByClassName){return{init:function(){},cfg:H,noSupport:true}}var O=D.documentElement,i=u.HTMLPictureElement,P="addEventListener",$="getAttribute",q=u[P].bind(u),I=u.setTimeout,U=u.requestAnimationFrame||I,o=u.requestIdleCallback,j=/^picture$/i,r=["load","error","lazyincluded","_lazyloaded"],a={},G=Array.prototype.forEach,J=function(e,t){if(!a[t]){a[t]=new RegExp("(\\s|^)"+t+"(\\s|$)")}return a[t].test(e[$]("class")||"")&&a[t]},K=function(e,t){if(!J(e,t)){e.setAttribute("class",(e[$]("class")||"").trim()+" "+t)}},Q=function(e,t){var a;if(a=J(e,t)){e.setAttribute("class",(e[$]("class")||"").replace(a," "))}},V=function(t,a,e){var i=e?P:"removeEventListener";if(e){V(t,a)}r.forEach(function(e){t[i](e,a)})},X=function(e,t,a,i,r){var n=D.createEvent("Event");if(!a){a={}}a.instance=k;n.initEvent(t,!i,!r);n.detail=a;e.dispatchEvent(n);return n},Y=function(e,t){var a;if(!i&&(a=u.picturefill||H.pf)){if(t&&t.src&&!e[$]("srcset")){e.setAttribute("srcset",t.src)}a({reevaluate:true,elements:[e]})}else if(t&&t.src){e.src=t.src}},Z=function(e,t){return(getComputedStyle(e,null)||{})[t]},s=function(e,t,a){a=a||e.offsetWidth;while(a<H.minSize&&t&&!e._lazysizesWidth){a=t.offsetWidth;t=t.parentNode}return a},ee=function(){var a,i;var t=[];var r=[];var n=t;var s=function(){var e=n;n=t.length?r:t;a=true;i=false;while(e.length){e.shift()()}a=false};var e=function(e,t){if(a&&!t){e.apply(this,arguments)}else{n.push(e);if(!i){i=true;(D.hidden?I:U)(s)}}};e._lsFlush=s;return e}(),te=function(a,e){return e?function(){ee(a)}:function(){var e=this;var t=arguments;ee(function(){a.apply(e,t)})}},ae=function(e){var a;var i=0;var r=H.throttleDelay;var n=H.ricTimeout;var t=function(){a=false;i=f.now();e()};var s=o&&n>49?function(){o(t,{timeout:n});if(n!==H.ricTimeout){n=H.ricTimeout}}:te(function(){I(t)},true);return function(e){var t;if(e=e===true){n=33}if(a){return}a=true;t=r-(f.now()-i);if(t<0){t=0}if(e||t<9){s()}else{I(s,t)}}},ie=function(e){var t,a;var i=99;var r=function(){t=null;e()};var n=function(){var e=f.now()-a;if(e<i){I(n,i-e)}else{(o||r)(r)}};return function(){a=f.now();if(!t){t=I(n,i)}}},e=function(){var v,m,c,h,e;var y,z,g,p,C,b,A;var n=/^img$/i;var d=/^iframe$/i;var E="onscroll"in u&&!/(gle|ing)bot/.test(navigator.userAgent);var _=0;var w=0;var M=0;var N=-1;var L=function(e){M--;if(!e||M<0||!e.target){M=0}};var x=function(e){if(A==null){A=Z(D.body,"visibility")=="hidden"}return A||!(Z(e.parentNode,"visibility")=="hidden"&&Z(e,"visibility")=="hidden")};var W=function(e,t){var a;var i=e;var r=x(e);g-=t;b+=t;p-=t;C+=t;while(r&&(i=i.offsetParent)&&i!=D.body&&i!=O){r=(Z(i,"opacity")||1)>0;if(r&&Z(i,"overflow")!="visible"){a=i.getBoundingClientRect();r=C>a.left&&p<a.right&&b>a.top-1&&g<a.bottom+1}}return r};var t=function(){var e,t,a,i,r,n,s,o,l,u,f,c;var d=k.elements;if((h=H.loadMode)&&M<8&&(e=d.length)){t=0;N++;for(;t<e;t++){if(!d[t]||d[t]._lazyRace){continue}if(!E||k.prematureUnveil&&k.prematureUnveil(d[t])){R(d[t]);continue}if(!(o=d[t][$]("data-expand"))||!(n=o*1)){n=w}if(!u){u=!H.expand||H.expand<1?O.clientHeight>500&&O.clientWidth>500?500:370:H.expand;k._defEx=u;f=u*H.expFactor;c=H.hFac;A=null;if(w<f&&M<1&&N>2&&h>2&&!D.hidden){w=f;N=0}else if(h>1&&N>1&&M<6){w=u}else{w=_}}if(l!==n){y=innerWidth+n*c;z=innerHeight+n;s=n*-1;l=n}a=d[t].getBoundingClientRect();if((b=a.bottom)>=s&&(g=a.top)<=z&&(C=a.right)>=s*c&&(p=a.left)<=y&&(b||C||p||g)&&(H.loadHidden||x(d[t]))&&(m&&M<3&&!o&&(h<3||N<4)||W(d[t],n))){R(d[t]);r=true;if(M>9){break}}else if(!r&&m&&!i&&M<4&&N<4&&h>2&&(v[0]||H.preloadAfterLoad)&&(v[0]||!o&&(b||C||p||g||d[t][$](H.sizesAttr)!="auto"))){i=v[0]||d[t]}}if(i&&!r){R(i)}}};var a=ae(t);var S=function(e){var t=e.target;if(t._lazyCache){delete t._lazyCache;return}L(e);K(t,H.loadedClass);Q(t,H.loadingClass);V(t,B);X(t,"lazyloaded")};var i=te(S);var B=function(e){i({target:e.target})};var T=function(e,t){var a=e.getAttribute("data-load-mode")||H.iframeLoadMode;if(a==0){e.contentWindow.location.replace(t)}else if(a==1){e.src=t}};var F=function(e){var t;var a=e[$](H.srcsetAttr);if(t=H.customMedia[e[$]("data-media")||e[$]("media")]){e.setAttribute("media",t)}if(a){e.setAttribute("srcset",a)}};var s=te(function(t,e,a,i,r){var n,s,o,l,u,f;if(!(u=X(t,"lazybeforeunveil",e)).defaultPrevented){if(i){if(a){K(t,H.autosizesClass)}else{t.setAttribute("sizes",i)}}s=t[$](H.srcsetAttr);n=t[$](H.srcAttr);if(r){o=t.parentNode;l=o&&j.test(o.nodeName||"")}f=e.firesLoad||"src"in t&&(s||n||l);u={target:t};K(t,H.loadingClass);if(f){clearTimeout(c);c=I(L,2500);V(t,B,true)}if(l){G.call(o.getElementsByTagName("source"),F)}if(s){t.setAttribute("srcset",s)}else if(n&&!l){if(d.test(t.nodeName)){T(t,n)}else{t.src=n}}if(r&&(s||l)){Y(t,{src:n})}}if(t._lazyRace){delete t._lazyRace}Q(t,H.lazyClass);ee(function(){var e=t.complete&&t.naturalWidth>1;if(!f||e){if(e){K(t,H.fastLoadedClass)}S(u);t._lazyCache=true;I(function(){if("_lazyCache"in t){delete t._lazyCache}},9)}if(t.loading=="lazy"){M--}},true)});var R=function(e){if(e._lazyRace){return}var t;var a=n.test(e.nodeName);var i=a&&(e[$](H.sizesAttr)||e[$]("sizes"));var r=i=="auto";if((r||!m)&&a&&(e[$]("src")||e.srcset)&&!e.complete&&!J(e,H.errorClass)&&J(e,H.lazyClass)){return}t=X(e,"lazyunveilread").detail;if(r){re.updateElem(e,true,e.offsetWidth)}e._lazyRace=true;M++;s(e,t,r,i,a)};var r=ie(function(){H.loadMode=3;a()});var o=function(){if(H.loadMode==3){H.loadMode=2}r()};var l=function(){if(m){return}if(f.now()-e<999){I(l,999);return}m=true;H.loadMode=3;a();q("scroll",o,true)};return{_:function(){e=f.now();k.elements=D.getElementsByClassName(H.lazyClass);v=D.getElementsByClassName(H.lazyClass+" "+H.preloadClass);q("scroll",a,true);q("resize",a,true);q("pageshow",function(e){if(e.persisted){var t=D.querySelectorAll("."+H.loadingClass);if(t.length&&t.forEach){U(function(){t.forEach(function(e){if(e.complete){R(e)}})})}}});if(u.MutationObserver){new MutationObserver(a).observe(O,{childList:true,subtree:true,attributes:true})}else{O[P]("DOMNodeInserted",a,true);O[P]("DOMAttrModified",a,true);setInterval(a,999)}q("hashchange",a,true);["focus","mouseover","click","load","transitionend","animationend"].forEach(function(e){D[P](e,a,true)});if(/d$|^c/.test(D.readyState)){l()}else{q("load",l);D[P]("DOMContentLoaded",a);I(l,2e4)}if(k.elements.length){t();ee._lsFlush()}else{a()}},checkElems:a,unveil:R,_aLSL:o}}(),re=function(){var a;var n=te(function(e,t,a,i){var r,n,s;e._lazysizesWidth=i;i+="px";e.setAttribute("sizes",i);if(j.test(t.nodeName||"")){r=t.getElementsByTagName("source");for(n=0,s=r.length;n<s;n++){r[n].setAttribute("sizes",i)}}if(!a.detail.dataAttr){Y(e,a.detail)}});var i=function(e,t,a){var i;var r=e.parentNode;if(r){a=s(e,r,a);i=X(e,"lazybeforesizes",{width:a,dataAttr:!!t});if(!i.defaultPrevented){a=i.detail.width;if(a&&a!==e._lazysizesWidth){n(e,r,i,a)}}}};var e=function(){var e;var t=a.length;if(t){e=0;for(;e<t;e++){i(a[e])}}};var t=ie(e);return{_:function(){a=D.getElementsByClassName(H.autosizesClass);q("resize",t)},checkElems:t,updateElem:i}}(),t=function(){if(!t.i&&D.getElementsByClassName){t.i=true;re._();e._()}};return I(function(){H.init&&t()}),k={cfg:H,autoSizer:re,loader:e,init:t,uP:Y,aC:K,rC:Q,hC:J,fire:X,gW:s,rAF:ee}}(e,e.document,Date);e.lazySizes=t,"object"==typeof module&&module.exports&&(module.exports=t)}("undefined"!=typeof window?window:{});
\ No newline at end of file diff --git a/assets/person.json b/assets/person.json index 037cff3..51c8663 100644 --- a/assets/person.json +++ b/assets/person.json @@ -1,50 +1,39 @@ -{ - "@context": "http://www.schema.org", - "@type": "Person", - "@id": "{{ .Site.BaseURL }}", - "name": "{{ .Site.Params.author }}", - "url": "{{ .Site.BaseURL }}", - "description": "{{ .Site.Params.Description }}", - - {{ with .Site.Params.Feat.structuredDataFromGithub }} +{{ $base := dict + "@context" "http://www.schema.org" + "@type" "Person" + "@id" .Site.BaseURL + "name" .Site.Params.author + "url" .Site.BaseURL + "description" .Site.Params.Description }} +{{ with .Site.Params.Feat.structuredDataGitHubUser }} {{ with (getJSON "https://api.github.com/users/" .) }} - "image": "{{ .avatar_url }}", + {{ $github := dict + "image" .avatar_url + "email" .email + "address" .location }} {{ if ne .login .Site.Params.author }} - "alternateName": "{{ .login }}", - {{ end }} - {{ with .email }} - "email": "{{ . }}", + {{ $github = merge (dict "alternateName" .login) $github }} {{ end }} - {{ with .location }} - "address": "{{ . }}", - {{ end }} - "affiliation": [ - {{ $count := 0 }} - {{ $orgs := (getJSON .organizations_url) }} - {{ range $key, $val := $orgs }} - {{ $count = add $count 1 }} - - {{ with (getJSON .url) }} - { - "@type": "Organization", - "name": "{{ .name }}", - "sameAs": [ - "{{ .blog }}", - "{{ .html_url }}" - ] - }{{ if lt $count (len $orgs) }},{{ end}} - {{- end }} - - ], - {{- end }} - {{ end }} - {{ end }} - "sameAs": [ - {{ $count := 0 }} - {{ range $key, $val := .Site.Params.Social -}} - {{ $count = add $count 1 }} - "{{ $val }}"{{ if lt $count (len $.Site.Params.Social) }},{{ end}} + {{ $affiliation := slice }} + {{ with (getJSON .organizations_url) }} + {{ range $i, $org := . -}} + {{ with (getJSON .url) -}} + {{ $org := dict + "@type" "Organization" + "name" .name + "sameAs" (slice .blog .html_url) }} + {{ $affiliation = append $org $affiliation }} + {{ end }} + {{- end }} {{- end }} - ] -}
\ No newline at end of file + {{ $github = merge (dict "affiliation" $affiliation) $github }} + {{ $base = merge $github $base }} + {{ end }} +{{ end }} +{{ $sameAs := slice }} +{{ range $i, $url := .Site.Params.Social -}} + {{ $sameAs = append .url $sameAs }} +{{- end }} +{{ $base = merge (dict "sameAs" $sameAs) $base }} +{{ jsonify $base }}
\ No newline at end of file diff --git a/assets/sass/_about.scss b/assets/sass/_about.scss index faf4d67..2e80ec3 100644 --- a/assets/sass/_about.scss +++ b/assets/sass/_about.scss @@ -1,6 +1,6 @@ .about { width: 100%; - background-color: $smoke; + background-color: $secondary-bg-color; p { @include size(h3); @@ -8,21 +8,21 @@ } a { - background-image: linear-gradient($accent, $accent); + background-image: linear-gradient($accent-color, $accent-color); background-repeat: repeat-x; background-position: 0 95%; background-size: 2px 3px; text-decoration: none; - text-shadow: .03em 0 $white, -.03em 0 $white, 0 .03em $white, 0 -.03em $white, - .06em 0 $white, -.06em 0 $white, .09em 0 $white, -.09em 0 $white, - .12em 0 $white, -.12em 0 $white, .15em 0 $white, -.15em 0 $white, - .03em .075em $white, -.03em .075em $white, .06em .075em $white, - -.06em .075em $white, .09em .075em $white, -.09em .075em $white, - .12em .075em $white, -.12em .075em $white, .15em .075em $white, - -.15em .075em $white; + text-shadow: .03em 0 $link-shadow-color, -.03em 0 $link-shadow-color, 0 .03em $link-shadow-color, 0 -.03em $link-shadow-color, + .06em 0 $link-shadow-color, -.06em 0 $link-shadow-color, .09em 0 $link-shadow-color, -.09em 0 $link-shadow-color, + .12em 0 $link-shadow-color, -.12em 0 $link-shadow-color, .15em 0 $link-shadow-color, -.15em 0 $link-shadow-color, + .03em .075em $link-shadow-color, -.03em .075em $link-shadow-color, .06em .075em $link-shadow-color, + -.06em .075em $link-shadow-color, .09em .075em $link-shadow-color, -.09em .075em $link-shadow-color, + .12em .075em $link-shadow-color, -.12em .075em $link-shadow-color, .15em .075em $link-shadow-color, + -.15em .075em $link-shadow-color; &:hover { - color: $accent; + color: $accent-color; } } } diff --git a/assets/sass/_animation.scss b/assets/sass/_animation.scss index aa93432..2430019 100644 --- a/assets/sass/_animation.scss +++ b/assets/sass/_animation.scss @@ -5,7 +5,7 @@ } 50% { - color: $black; + color: $primary-fg-color; } } @@ -33,6 +33,14 @@ } } +.scale-in-center { + animation: scale-in-center .3s cubic-bezier(.25, .46, .45, .94) both; +} + +.scale-out-center { + animation: scale-out-center .4s cubic-bezier(.895, .03, .685, .22) both; +} + // .cursor { // animation: 1s blink step-end infinite; // } @@ -41,10 +49,22 @@ animation: 1.2s blink infinite; } -.scale-in-center { - animation: scale-in-center .3s cubic-bezier(.25, .46, .45, .94) both; +.blur-up { + -webkit-filter: blur(3px); + filter: blur(3px); + transition: filter 600ms, -webkit-filter 600ms; } -.scale-out-center { - animation: scale-out-center .4s cubic-bezier(.895, .03, .685, .22) both; +.blur-up.lazyloaded { + -webkit-filter: blur(0); + filter: blur(0); } + +// Show or hide elements TODO(kdevo): Refactor +.show { + transition: opacity 600ms; +} + +.hide { + opacity: 0; +}
\ No newline at end of file diff --git a/assets/sass/_base.scss b/assets/sass/_base.scss index 80d6d03..bd9ec20 100644 --- a/assets/sass/_base.scss +++ b/assets/sass/_base.scss @@ -22,10 +22,15 @@ a { } &:hover { - color: $accent; + color: $accent-color; } } +small { + font-size: 0.8em; + color: $alt-text-color; +} + // Images img { display: inline-block; @@ -41,22 +46,28 @@ ol { li { margin-left: 1.25em; - code { - font-family: $font-code; - } } } +code { + font-family: $font-code; +} ul li { list-style-type: disc; } -// Show or hide elements -.show { - transition: opacity 600ms; +p { + margin-bottom: $vertical-rhythm; +} + + +// Lazysizes +.no-js img.lazyload { + display: none; } -.hide { - opacity: 0; +// Prevent "broken image" icon from showing up +img.lazyload:not([src]) { + visibility: hidden; } diff --git a/assets/sass/_blog.scss b/assets/sass/_blog.scss index b38d9d5..fee00d1 100644 --- a/assets/sass/_blog.scss +++ b/assets/sass/_blog.scss @@ -1,10 +1,8 @@ // Code pre code { - // font-size: 100%; color: inherit; font-family: $font-code; - // background-color: transparent; } pre { @@ -17,7 +15,7 @@ pre { word-wrap: normal; // color: white; // line-height: 1.45; or inherit - // background-color: $smoke; + // background-color: $secondary-bg-color; } .mono, @@ -41,9 +39,10 @@ q { %blockquote { content: "\201C"; - color: $accent; + color: $accent-color; font-family: $font-header; font-size: 35px; + float: left; } blockquote { @@ -63,6 +62,7 @@ blockquote { &::after { @extend %blockquote; content: "\201D"; + float: right; } } @@ -75,7 +75,7 @@ blockquote { time { @include size(p); margin-bottom: $vertical-rhythm; - color: $storm; + color: $alt-text-color; } .content { @@ -86,34 +86,30 @@ time { margin-left: 3px; } - // a { - // background-image: linear-gradient($accent, $accent); - // background-repeat: repeat-x; - // background-position: 0 95%; - // background-size: 1px 2px; - // text-decoration: none; - // text-shadow: .03em 0 $white, -.03em 0 $white, 0 .03em $white, 0 -.03em $white, - // .06em 0 $white, -.06em 0 $white, .09em 0 $white, -.09em 0 $white, - // .12em 0 $white, -.12em 0 $white, .15em 0 $white, -.15em 0 $white, - // .03em .075em $white, -.03em .075em $white, .06em .075em $white, - // -.06em .075em $white, .09em .075em $white, -.09em .075em $white, - // .12em .075em $white, -.12em .075em $white, .15em .075em $white, - // -.15em .075em $white; - - // &:hover { - // color: $accent; - // } - // } + a { + background-image: linear-gradient($accent-color, $accent-color); + background-repeat: repeat-x; + background-position: 0 95%; + background-size: 1px 2px; + text-decoration: none; + text-shadow: .03em 0 $link-shadow-color, -.03em 0 $link-shadow-color, 0 .03em $link-shadow-color, 0 -.03em $link-shadow-color, + .06em 0 $link-shadow-color, -.06em 0 $link-shadow-color, .09em 0 $link-shadow-color, -.09em 0 $link-shadow-color, + .12em 0 $link-shadow-color, -.12em 0 $link-shadow-color, .15em 0 $link-shadow-color, -.15em 0 $link-shadow-color, + .03em .075em $link-shadow-color, -.03em .075em $link-shadow-color, .06em .075em $link-shadow-color, + -.06em .075em $link-shadow-color, .09em .075em $link-shadow-color, -.09em .075em $link-shadow-color, + .12em .075em $link-shadow-color, -.12em .075em $link-shadow-color, .15em .075em $link-shadow-color, + -.15em .075em $link-shadow-color; + + &:hover { + color: $accent-color; + } + } } -// .highlight { -// margin: 10px 0; -// } - .pagination { margin: 50px 0 0; - &:nth-child(2) { + & :nth-child(2) { float: right; } } @@ -121,7 +117,7 @@ time { .blog { display: flex; min-height: 100vh; - background-color: $white; + background-color: $primary-bg-color; h2 { margin-bottom: 0; @@ -131,4 +127,6 @@ time { margin: 0 0 $vertical-rhythm * 2; font-family: $font-body; } -}
\ No newline at end of file +} + +// TODO(kdevo): Add responsive table CSS
\ No newline at end of file diff --git a/assets/sass/_colors.scss b/assets/sass/_colors.scss index 1f94511..7e5238f 100644 --- a/assets/sass/_colors.scss +++ b/assets/sass/_colors.scss @@ -1,8 +1 @@ -// https://coolors.co/1e1e1e-4e6b6c-f7f7f7-ffffff-da784d - -$black: #212121; -$storm: #4E6B6C; -$smoke: #F7F7F7; -$accent: $accent_color; -$white: #FFFFFF; -$grey: grey;
\ No newline at end of file +@import "themes/delight-colors"
\ No newline at end of file diff --git a/assets/sass/_contact.scss b/assets/sass/_contact.scss new file mode 100644 index 0000000..57730e6 --- /dev/null +++ b/assets/sass/_contact.scss @@ -0,0 +1,69 @@ +.contact { + width: 100%; + padding-bottom: $vertical-rhythm * 2; + background-color: $secondary-bg-color; + + form { + margin-top: $vertical-rhythm; + } + + .contact-submit { + position: relative; + } + + #form-submit { + display: block; + width: 50%; + margin: 0 auto; + } + + #form-thankyou, #form-sending, #form-error { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + } +} + +input, button, select { + width: 100%; + margin: 8px 0; + padding: 10px; + border-width: 1px; + border-style: solid; + border-radius: 3px; + border-color: $secondary-bg-color; + background-color: $primary-bg-color; + color: $primary-fg-color; + + &[type="submit"] { + transition: .4s ease-out; + background-color: $button-bg-color; + color: $button-fg-color; + + &:hover { + background-color: $accent-color; + color: $primary-bg-color; + cursor: pointer; + } + } + + .icon { + color: $button-fg-color; + } + + &:focus { + outline: $accent-color solid 2px; + } +} + +button { + white-space: nowrap; +} + +textarea { + @extend input; + min-height: $vertical-rhythm * 4; + overflow: auto; + resize: vertical; +} diff --git a/assets/sass/_custom.scss b/assets/sass/_custom.scss index e69de29..794c7fa 100644 --- a/assets/sass/_custom.scss +++ b/assets/sass/_custom.scss @@ -0,0 +1,60 @@ +// Original Osprey text aligning on main page +/* +.about { + .center-xs:nth-child(2) { + text-align: left; + } +} +.blog { + .center-xs:nth-child(2) { + text-align: left; + } +} +*/ + + +// Customized scrollbar based on color-scheme +/* +::-webkit-scrollbar { + width: 3px; +} +::-webkit-scrollbar-track { + background: $primary-bg-color; +} + +::-webkit-scrollbar-thumb { + background: $primary-fg-color; +} + +::-webkit-scrollbar-thumb:hover { + background: $accent-color; +} +*/ + + +// Show navbar only after scroll on mobile +/* +nav { + @media (max-width: $mobile-breakpoint) { + opacity: 0; + } +} +*/ + + +// If using background, attach it on mobile devices to increase performance (down-side: no parallax effect anymore) +/* +@media (max-width: $mobile-breakpoint) { + .bg { + background-attachment: scroll; + } +} +*/ + + +// Home logo animation as soon as page loads +/* +.home-logo { + animation: scale-in-center .8s cubic-bezier(.25, .46, .45, .94) both; +} +*/ diff --git a/assets/sass/_flexboxgrid-stripped.scss b/assets/sass/_flexboxgrid-stripped.scss new file mode 100644 index 0000000..d161924 --- /dev/null +++ b/assets/sass/_flexboxgrid-stripped.scss @@ -0,0 +1,211 @@ +// From https://raw.githubusercontent.com/kristoferjoseph/flexboxgrid/6762e02/dist/flexboxgrid.css +.container-fluid, +.container { + margin-right: auto; + margin-left: auto; +} + +.row { + box-sizing: border-box; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-flex: 0; + -ms-flex: 0 1 auto; + flex: 0 1 auto; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-direction: row; + flex-direction: row; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + // margin-right: -0.5rem; + // margin-left: -0.5rem; +} + +.col-xs, +.col-xs-1, +.col-xs-2, +.col-xs-3, +.col-xs-6, +.col-xs-12 { + box-sizing: border-box; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; + padding-right: 0.5rem; + padding-left: 0.5rem; +} + +.col-xs { + -webkit-box-flex: 1; + -ms-flex-positive: 1; + flex-grow: 1; + -ms-flex-preferred-size: 0; + flex-basis: 0; + max-width: 100%; +} + +.col-xs-1 { + -ms-flex-preferred-size: 8.33333333%; + flex-basis: 8.33333333%; + max-width: 8.33333333%; +} + +.col-xs-2 { + -ms-flex-preferred-size: 16.66666667%; + flex-basis: 16.66666667%; + max-width: 16.66666667%; +} + +.col-xs-3 { + -ms-flex-preferred-size: 25%; + flex-basis: 25%; + max-width: 25%; +} + +.col-xs-6 { + -ms-flex-preferred-size: 50%; + flex-basis: 50%; + max-width: 50%; +} + +.col-xs-12 { + -ms-flex-preferred-size: 100%; + flex-basis: 100%; + max-width: 100%; +} + +.center-xs { + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + text-align: center; +} + +.middle-xs { + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} + +@media only screen and (min-width: 48em) { + .container { + width: 49rem; + } + + .col-sm, + .col-sm-1, + .col-sm-2, + .col-sm-6 { + box-sizing: border-box; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; + padding-right: 0.5rem; + padding-left: 0.5rem; + } + + .col-sm { + -webkit-box-flex: 1; + -ms-flex-positive: 1; + flex-grow: 1; + -ms-flex-preferred-size: 0; + flex-basis: 0; + max-width: 100%; + } + + .col-sm-1 { + -ms-flex-preferred-size: 8.33333333%; + flex-basis: 8.33333333%; + max-width: 8.33333333%; + } + + .col-sm-2 { + -ms-flex-preferred-size: 16.66666667%; + flex-basis: 16.66666667%; + max-width: 16.66666667%; + } + + .col-sm-6 { + -ms-flex-preferred-size: 50%; + flex-basis: 50%; + max-width: 50%; + } +} + +@media only screen and (min-width: 64em) { + .container { + width: 65rem; + } + + .col-md, + .col-md-4, + .col-md-6 { + box-sizing: border-box; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; + padding-right: 0.5rem; + padding-left: 0.5rem; + } + + .col-md { + -webkit-box-flex: 1; + -ms-flex-positive: 1; + flex-grow: 1; + -ms-flex-preferred-size: 0; + flex-basis: 0; + max-width: 100%; + } + + .col-md-4 { + -ms-flex-preferred-size: 33.33333333%; + flex-basis: 33.33333333%; + max-width: 33.33333333%; + } + + .col-md-6 { + -ms-flex-preferred-size: 50%; + flex-basis: 50%; + max-width: 50%; + } +} + +@media only screen and (min-width: 75em) { + .container { + width: 76rem; + } + + .col-lg, + .col-lg-3, + .col-lg-4 { + box-sizing: border-box; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; + padding-right: 0.5rem; + padding-left: 0.5rem; + } + + .col-lg { + -webkit-box-flex: 1; + -ms-flex-positive: 1; + flex-grow: 1; + -ms-flex-preferred-size: 0; + flex-basis: 0; + max-width: 100%; + } + + .col-lg-3 { + -ms-flex-preferred-size: 25%; + flex-basis: 25%; + max-width: 25%; + } + + .col-lg-4 { + -ms-flex-preferred-size: 33.33333333%; + flex-basis: 33.33333333%; + max-width: 33.33333333%; + } +}
\ No newline at end of file diff --git a/assets/sass/_flexboxgrid.scss b/assets/sass/_flexboxgrid.scss index 4595efe..db80c73 100644 --- a/assets/sass/_flexboxgrid.scss +++ b/assets/sass/_flexboxgrid.scss @@ -1,882 +1,961 @@ -//column-base selectors -//.col-xs, .col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-offset-0, .col-xs-offset-1, .col-xs-offset-2, .col-xs-offset-3, .col-xs-offset-4, .col-xs-offset-5, .col-xs-offset-6, .col-xs-offset-7, .col-xs-offset-8, .col-xs-offset-9, .col-xs-offset-10, .col-xs-offset-11, .col-xs-offset-12 -%column-base { - box-sizing: border-box; - flex: 0 0 auto; - padding-right: 0.5rem; - padding-left: 0.5rem; -} -.container-fluid { +// From https://raw.githubusercontent.com/kristoferjoseph/flexboxgrid/6762e02/dist/flexboxgrid.css +.container-fluid, +.container { margin-right: auto; margin-left: auto; +} + +.container-fluid { padding-right: 2rem; padding-left: 2rem; } -.container { - margin-right: auto; - margin-left: auto; -} + .row { box-sizing: border-box; + display: -webkit-box; + display: -ms-flexbox; display: flex; + -webkit-box-flex: 0; + -ms-flex: 0 1 auto; flex: 0 1 auto; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-direction: row; flex-direction: row; + -ms-flex-wrap: wrap; flex-wrap: wrap; // margin-right: -0.5rem; // margin-left: -0.5rem; - &.reverse { - flex-direction: row-reverse; - } } + +.row.reverse { + -webkit-box-orient: horizontal; + -webkit-box-direction: reverse; + -ms-flex-direction: row-reverse; + flex-direction: row-reverse; +} + +.col.reverse { + -webkit-box-orient: vertical; + -webkit-box-direction: reverse; + -ms-flex-direction: column-reverse; + flex-direction: column-reverse; +} + +.col-xs, +.col-xs-1, +.col-xs-2, +.col-xs-3, +.col-xs-4, +.col-xs-5, +.col-xs-6, +.col-xs-7, +.col-xs-8, +.col-xs-9, +.col-xs-10, +.col-xs-11, +.col-xs-12, +.col-xs-offset-0, +.col-xs-offset-1, +.col-xs-offset-2, +.col-xs-offset-3, +.col-xs-offset-4, +.col-xs-offset-5, +.col-xs-offset-6, +.col-xs-offset-7, +.col-xs-offset-8, +.col-xs-offset-9, +.col-xs-offset-10, +.col-xs-offset-11, +.col-xs-offset-12 { + box-sizing: border-box; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; + padding-right: 0.5rem; + padding-left: 0.5rem; +} + .col-xs { - @extend %column-base; + -webkit-box-flex: 1; + -ms-flex-positive: 1; flex-grow: 1; + -ms-flex-preferred-size: 0; flex-basis: 0; max-width: 100%; } + .col-xs-1 { - @extend %column-base; + -ms-flex-preferred-size: 8.33333333%; flex-basis: 8.33333333%; max-width: 8.33333333%; } + .col-xs-2 { - @extend %column-base; + -ms-flex-preferred-size: 16.66666667%; flex-basis: 16.66666667%; max-width: 16.66666667%; } + .col-xs-3 { - @extend %column-base; + -ms-flex-preferred-size: 25%; flex-basis: 25%; max-width: 25%; } + .col-xs-4 { - @extend %column-base; + -ms-flex-preferred-size: 33.33333333%; flex-basis: 33.33333333%; max-width: 33.33333333%; } + .col-xs-5 { - @extend %column-base; + -ms-flex-preferred-size: 41.66666667%; flex-basis: 41.66666667%; max-width: 41.66666667%; } + .col-xs-6 { - @extend %column-base; + -ms-flex-preferred-size: 50%; flex-basis: 50%; max-width: 50%; } + .col-xs-7 { - @extend %column-base; + -ms-flex-preferred-size: 58.33333333%; flex-basis: 58.33333333%; max-width: 58.33333333%; } + .col-xs-8 { - @extend %column-base; + -ms-flex-preferred-size: 66.66666667%; flex-basis: 66.66666667%; max-width: 66.66666667%; } + .col-xs-9 { - @extend %column-base; + -ms-flex-preferred-size: 75%; flex-basis: 75%; max-width: 75%; } + .col-xs-10 { - @extend %column-base; + -ms-flex-preferred-size: 83.33333333%; flex-basis: 83.33333333%; max-width: 83.33333333%; } + .col-xs-11 { - @extend %column-base; + -ms-flex-preferred-size: 91.66666667%; flex-basis: 91.66666667%; max-width: 91.66666667%; } + .col-xs-12 { - @extend %column-base; + -ms-flex-preferred-size: 100%; flex-basis: 100%; max-width: 100%; } + .col-xs-offset-0 { - @extend %column-base; margin-left: 0; } + .col-xs-offset-1 { - @extend %column-base; margin-left: 8.33333333%; } + .col-xs-offset-2 { - @extend %column-base; margin-left: 16.66666667%; } + .col-xs-offset-3 { - @extend %column-base; margin-left: 25%; } + .col-xs-offset-4 { - @extend %column-base; margin-left: 33.33333333%; } + .col-xs-offset-5 { - @extend %column-base; margin-left: 41.66666667%; } + .col-xs-offset-6 { - @extend %column-base; margin-left: 50%; } + .col-xs-offset-7 { - @extend %column-base; margin-left: 58.33333333%; } + .col-xs-offset-8 { - @extend %column-base; margin-left: 66.66666667%; } + .col-xs-offset-9 { - @extend %column-base; margin-left: 75%; } + .col-xs-offset-10 { - @extend %column-base; margin-left: 83.33333333%; } + .col-xs-offset-11 { - @extend %column-base; margin-left: 91.66666667%; } -.col-xs-offset-12 { - @extend %column-base; -} + .start-xs { + -webkit-box-pack: start; + -ms-flex-pack: start; justify-content: flex-start; text-align: start; } + .center-xs { + -webkit-box-pack: center; + -ms-flex-pack: center; justify-content: center; text-align: center; } + .end-xs { + -webkit-box-pack: end; + -ms-flex-pack: end; justify-content: flex-end; text-align: end; } + .top-xs { + -webkit-box-align: start; + -ms-flex-align: start; align-items: flex-start; } + .middle-xs { + -webkit-box-align: center; + -ms-flex-align: center; align-items: center; } + .bottom-xs { + -webkit-box-align: end; + -ms-flex-align: end; align-items: flex-end; } + .around-xs { + -ms-flex-pack: distribute; justify-content: space-around; } + .between-xs { + -webkit-box-pack: justify; + -ms-flex-pack: justify; justify-content: space-between; } + .first-xs { + -webkit-box-ordinal-group: 0; + -ms-flex-order: -1; order: -1; } + .last-xs { + -webkit-box-ordinal-group: 2; + -ms-flex-order: 1; order: 1; } -@media only screen and(min-width: 48em) { + +@media only screen and (min-width: 48em) { .container { width: 49rem; } - .col-sm { + + .col-sm, + .col-sm-1, + .col-sm-2, + .col-sm-3, + .col-sm-4, + .col-sm-5, + .col-sm-6, + .col-sm-7, + .col-sm-8, + .col-sm-9, + .col-sm-10, + .col-sm-11, + .col-sm-12, + .col-sm-offset-0, + .col-sm-offset-1, + .col-sm-offset-2, + .col-sm-offset-3, + .col-sm-offset-4, + .col-sm-offset-5, + .col-sm-offset-6, + .col-sm-offset-7, + .col-sm-offset-8, + .col-sm-offset-9, + .col-sm-offset-10, + .col-sm-offset-11, + .col-sm-offset-12 { box-sizing: border-box; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; flex: 0 0 auto; padding-right: 0.5rem; padding-left: 0.5rem; + } + + .col-sm { + -webkit-box-flex: 1; + -ms-flex-positive: 1; flex-grow: 1; + -ms-flex-preferred-size: 0; flex-basis: 0; max-width: 100%; } + .col-sm-1 { - box-sizing: border-box; - flex: 0 0 auto; - padding-right: 0.5rem; - padding-left: 0.5rem; + -ms-flex-preferred-size: 8.33333333%; flex-basis: 8.33333333%; max-width: 8.33333333%; } + .col-sm-2 { - box-sizing: border-box; - flex: 0 0 auto; - padding-right: 0.5rem; - padding-left: 0.5rem; + -ms-flex-preferred-size: 16.66666667%; flex-basis: 16.66666667%; max-width: 16.66666667%; } + .col-sm-3 { - box-sizing: border-box; - flex: 0 0 auto; - padding-right: 0.5rem; - padding-left: 0.5rem; + -ms-flex-preferred-size: 25%; flex-basis: 25%; max-width: 25%; } + .col-sm-4 { - box-sizing: border-box; - flex: 0 0 auto; - padding-right: 0.5rem; - padding-left: 0.5rem; + -ms-flex-preferred-size: 33.33333333%; flex-basis: 33.33333333%; max-width: 33.33333333%; } + .col-sm-5 { - box-sizing: border-box; - flex: 0 0 auto; - padding-right: 0.5rem; - padding-left: 0.5rem; + -ms-flex-preferred-size: 41.66666667%; flex-basis: 41.66666667%; max-width: 41.66666667%; } + .col-sm-6 { - box-sizing: border-box; - flex: 0 0 auto; - padding-right: 0.5rem; - padding-left: 0.5rem; + -ms-flex-preferred-size: 50%; flex-basis: 50%; max-width: 50%; } + .col-sm-7 { - box-sizing: border-box; - flex: 0 0 auto; - padding-right: 0.5rem; - padding-left: 0.5rem; + -ms-flex-preferred-size: 58.33333333%; flex-basis: 58.33333333%; max-width: 58.33333333%; } + .col-sm-8 { - box-sizing: border-box; - flex: 0 0 auto; - padding-right: 0.5rem; - padding-left: 0.5rem; + -ms-flex-preferred-size: 66.66666667%; flex-basis: 66.66666667%; max-width: 66.66666667%; } + .col-sm-9 { - box-sizing: border-box; - flex: 0 0 auto; - padding-right: 0.5rem; - padding-left: 0.5rem; + -ms-flex-preferred-size: 75%; flex-basis: 75%; max-width: 75%; } + .col-sm-10 { - box-sizing: border-box; - flex: 0 0 auto; - padding-right: 0.5rem; - padding-left: 0.5rem; + -ms-flex-preferred-size: 83.33333333%; flex-basis: 83.33333333%; max-width: 83.33333333%; } + .col-sm-11 { - box-sizing: border-box; - flex: 0 0 auto; - padding-right: 0.5rem; - padding-left: 0.5rem; + -ms-flex-preferred-size: 91.66666667%; flex-basis: 91.66666667%; max-width: 91.66666667%; } + .col-sm-12 { - box-sizing: border-box; - flex: 0 0 auto; - padding-right: 0.5rem; - padding-left: 0.5rem; + -ms-flex-preferred-size: 100%; flex-basis: 100%; max-width: 100%; } + .col-sm-offset-0 { - box-sizing: border-box; - flex: 0 0 auto; - padding-right: 0.5rem; - padding-left: 0.5rem; margin-left: 0; } + .col-sm-offset-1 { - box-sizing: border-box; - flex: 0 0 auto; - padding-right: 0.5rem; - padding-left: 0.5rem; margin-left: 8.33333333%; } + .col-sm-offset-2 { - box-sizing: border-box; - flex: 0 0 auto; - padding-right: 0.5rem; - padding-left: 0.5rem; margin-left: 16.66666667%; } + .col-sm-offset-3 { - box-sizing: border-box; - flex: 0 0 auto; - padding-right: 0.5rem; - padding-left: 0.5rem; margin-left: 25%; } + .col-sm-offset-4 { - box-sizing: border-box; - flex: 0 0 auto; - padding-right: 0.5rem; - padding-left: 0.5rem; margin-left: 33.33333333%; } + .col-sm-offset-5 { - box-sizing: border-box; - flex: 0 0 auto; - padding-right: 0.5rem; - padding-left: 0.5rem; margin-left: 41.66666667%; } + .col-sm-offset-6 { - box-sizing: border-box; - flex: 0 0 auto; - padding-right: 0.5rem; - padding-left: 0.5rem; margin-left: 50%; } + .col-sm-offset-7 { - box-sizing: border-box; - flex: 0 0 auto; - padding-right: 0.5rem; - padding-left: 0.5rem; margin-left: 58.33333333%; } + .col-sm-offset-8 { - box-sizing: border-box; - flex: 0 0 auto; - padding-right: 0.5rem; - padding-left: 0.5rem; margin-left: 66.66666667%; } + .col-sm-offset-9 { - box-sizing: border-box; - flex: 0 0 auto; - padding-right: 0.5rem; - padding-left: 0.5rem; margin-left: 75%; } + .col-sm-offset-10 { - box-sizing: border-box; - flex: 0 0 auto; - padding-right: 0.5rem; - padding-left: 0.5rem; margin-left: 83.33333333%; } + .col-sm-offset-11 { - box-sizing: border-box; - flex: 0 0 auto; - padding-right: 0.5rem; - padding-left: 0.5rem; margin-left: 91.66666667%; } - .col-sm-offset-12 { - box-sizing: border-box; - flex: 0 0 auto; - padding-right: 0.5rem; - padding-left: 0.5rem; - } + .start-sm { + -webkit-box-pack: start; + -ms-flex-pack: start; justify-content: flex-start; text-align: start; } + .center-sm { + -webkit-box-pack: center; + -ms-flex-pack: center; justify-content: center; text-align: center; } + .end-sm { + -webkit-box-pack: end; + -ms-flex-pack: end; justify-content: flex-end; text-align: end; } + .top-sm { + -webkit-box-align: start; + -ms-flex-align: start; align-items: flex-start; } + .middle-sm { + -webkit-box-align: center; + -ms-flex-align: center; align-items: center; } + .bottom-sm { + -webkit-box-align: end; + -ms-flex-align: end; align-items: flex-end; } + .around-sm { + -ms-flex-pack: distribute; justify-content: space-around; } + .between-sm { + -webkit-box-pack: justify; + -ms-flex-pack: justify; justify-content: space-between; } + .first-sm { + -webkit-box-ordinal-group: 0; + -ms-flex-order: -1; order: -1; } + .last-sm { + -webkit-box-ordinal-group: 2; + -ms-flex-order: 1; order: 1; } } -@media only screen and(min-width: 64em) { + +@media only screen and (min-width: 64em) { .container { width: 65rem; } - .col-md { + + .col-md, + .col-md-1, + .col-md-2, + .col-md-3, + .col-md-4, + .col-md-5, + .col-md-6, + .col-md-7, + .col-md-8, + .col-md-9, + .col-md-10, + .col-md-11, + .col-md-12, + .col-md-offset-0, + .col-md-offset-1, + .col-md-offset-2, + .col-md-offset-3, + .col-md-offset-4, + .col-md-offset-5, + .col-md-offset-6, + .col-md-offset-7, + .col-md-offset-8, + .col-md-offset-9, + .col-md-offset-10, + .col-md-offset-11, + .col-md-offset-12 { box-sizing: border-box; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; flex: 0 0 auto; padding-right: 0.5rem; padding-left: 0.5rem; + } + + .col-md { + -webkit-box-flex: 1; + -ms-flex-positive: 1; flex-grow: 1; + -ms-flex-preferred-size: 0; flex-basis: 0; max-width: 100%; } + .col-md-1 { - box-sizing: border-box; - flex: 0 0 auto; - padding-right: 0.5rem; - padding-left: 0.5rem; + -ms-flex-preferred-size: 8.33333333%; flex-basis: 8.33333333%; max-width: 8.33333333%; } + .col-md-2 { - box-sizing: border-box; - flex: 0 0 auto; - padding-right: 0.5rem; - padding-left: 0.5rem; + -ms-flex-preferred-size: 16.66666667%; flex-basis: 16.66666667%; max-width: 16.66666667%; } + .col-md-3 { - box-sizing: border-box; - flex: 0 0 auto; - padding-right: 0.5rem; - padding-left: 0.5rem; + -ms-flex-preferred-size: 25%; flex-basis: 25%; max-width: 25%; } + .col-md-4 { - box-sizing: border-box; - flex: 0 0 auto; - padding-right: 0.5rem; - padding-left: 0.5rem; + -ms-flex-preferred-size: 33.33333333%; flex-basis: 33.33333333%; max-width: 33.33333333%; } + .col-md-5 { - box-sizing: border-box; - flex: 0 0 auto; - padding-right: 0.5rem; - padding-left: 0.5rem; + -ms-flex-preferred-size: 41.66666667%; flex-basis: 41.66666667%; max-width: 41.66666667%; } + .col-md-6 { - box-sizing: border-box; - flex: 0 0 auto; - padding-right: 0.5rem; - padding-left: 0.5rem; + -ms-flex-preferred-size: 50%; flex-basis: 50%; max-width: 50%; } + .col-md-7 { - box-sizing: border-box; - flex: 0 0 auto; - padding-right: 0.5rem; - padding-left: 0.5rem; + -ms-flex-preferred-size: 58.33333333%; flex-basis: 58.33333333%; max-width: 58.33333333%; } + .col-md-8 { - box-sizing: border-box; - flex: 0 0 auto; - padding-right: 0.5rem; - padding-left: 0.5rem; + -ms-flex-preferred-size: 66.66666667%; flex-basis: 66.66666667%; max-width: 66.66666667%; } + .col-md-9 { - box-sizing: border-box; - flex: 0 0 auto; - padding-right: 0.5rem; - padding-left: 0.5rem; + -ms-flex-preferred-size: 75%; flex-basis: 75%; max-width: 75%; } + .col-md-10 { - box-sizing: border-box; - flex: 0 0 auto; - padding-right: 0.5rem; - padding-left: 0.5rem; + -ms-flex-preferred-size: 83.33333333%; flex-basis: 83.33333333%; max-width: 83.33333333%; } + .col-md-11 { - box-sizing: border-box; - flex: 0 0 auto; - padding-right: 0.5rem; - padding-left: 0.5rem; + -ms-flex-preferred-size: 91.66666667%; flex-basis: 91.66666667%; max-width: 91.66666667%; } + .col-md-12 { - box-sizing: border-box; - flex: 0 0 auto; - padding-right: 0.5rem; - padding-left: 0.5rem; + -ms-flex-preferred-size: 100%; flex-basis: 100%; max-width: 100%; } + .col-md-offset-0 { - box-sizing: border-box; - flex: 0 0 auto; - padding-right: 0.5rem; - padding-left: 0.5rem; margin-left: 0; } + .col-md-offset-1 { - box-sizing: border-box; - flex: 0 0 auto; - padding-right: 0.5rem; - padding-left: 0.5rem; margin-left: 8.33333333%; } + .col-md-offset-2 { - box-sizing: border-box; - flex: 0 0 auto; - padding-right: 0.5rem; - padding-left: 0.5rem; margin-left: 16.66666667%; } + .col-md-offset-3 { - box-sizing: border-box; - flex: 0 0 auto; - padding-right: 0.5rem; - padding-left: 0.5rem; margin-left: 25%; } + .col-md-offset-4 { - box-sizing: border-box; - flex: 0 0 auto; - padding-right: 0.5rem; - padding-left: 0.5rem; margin-left: 33.33333333%; } + .col-md-offset-5 { - box-sizing: border-box; - flex: 0 0 auto; - padding-right: 0.5rem; - padding-left: 0.5rem; margin-left: 41.66666667%; } + .col-md-offset-6 { - box-sizing: border-box; - flex: 0 0 auto; - padding-right: 0.5rem; - padding-left: 0.5rem; margin-left: 50%; } + .col-md-offset-7 { - box-sizing: border-box; - flex: 0 0 auto; - padding-right: 0.5rem; - padding-left: 0.5rem; margin-left: 58.33333333%; } + .col-md-offset-8 { - box-sizing: border-box; - flex: 0 0 auto; - padding-right: 0.5rem; - padding-left: 0.5rem; margin-left: 66.66666667%; } + .col-md-offset-9 { - box-sizing: border-box; - flex: 0 0 auto; - padding-right: 0.5rem; - padding-left: 0.5rem; margin-left: 75%; } + .col-md-offset-10 { - box-sizing: border-box; - flex: 0 0 auto; - padding-right: 0.5rem; - padding-left: 0.5rem; margin-left: 83.33333333%; } + .col-md-offset-11 { - box-sizing: border-box; - flex: 0 0 auto; - padding-right: 0.5rem; - padding-left: 0.5rem; margin-left: 91.66666667%; } - .col-md-offset-12 { - box-sizing: border-box; - flex: 0 0 auto; - padding-right: 0.5rem; - padding-left: 0.5rem; - } + .start-md { + -webkit-box-pack: start; + -ms-flex-pack: start; justify-content: flex-start; text-align: start; } + .center-md { + -webkit-box-pack: center; + -ms-flex-pack: center; justify-content: center; text-align: center; } + .end-md { + -webkit-box-pack: end; + -ms-flex-pack: end; justify-content: flex-end; text-align: end; } + .top-md { + -webkit-box-align: start; + -ms-flex-align: start; align-items: flex-start; } + .middle-md { + -webkit-box-align: center; + -ms-flex-align: center; align-items: center; } + .bottom-md { + -webkit-box-align: end; + -ms-flex-align: end; align-items: flex-end; } + .around-md { + -ms-flex-pack: distribute; justify-content: space-around; } + .between-md { + -webkit-box-pack: justify; + -ms-flex-pack: justify; justify-content: space-between; } + .first-md { + -webkit-box-ordinal-group: 0; + -ms-flex-order: -1; order: -1; } + .last-md { + -webkit-box-ordinal-group: 2; + -ms-flex-order: 1; order: 1; } } -@media only screen and(min-width: 75em) { + +@media only screen and (min-width: 75em) { .container { width: 76rem; } - .col-lg { + + .col-lg, + .col-lg-1, + .col-lg-2, + .col-lg-3, + .col-lg-4, + .col-lg-5, + .col-lg-6, + .col-lg-7, + .col-lg-8, + .col-lg-9, + .col-lg-10, + .col-lg-11, + .col-lg-12, + .col-lg-offset-0, + .col-lg-offset-1, + .col-lg-offset-2, + .col-lg-offset-3, + .col-lg-offset-4, + .col-lg-offset-5, + .col-lg-offset-6, + .col-lg-offset-7, + .col-lg-offset-8, + .col-lg-offset-9, + .col-lg-offset-10, + .col-lg-offset-11, + .col-lg-offset-12 { box-sizing: border-box; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; flex: 0 0 auto; padding-right: 0.5rem; padding-left: 0.5rem; + } + + .col-lg { + -webkit-box-flex: 1; + -ms-flex-positive: 1; flex-grow: 1; + -ms-flex-preferred-size: 0; flex-basis: 0; max-width: 100%; } + .col-lg-1 { - box-sizing: border-box; - flex: 0 0 auto; - padding-right: 0.5rem; - padding-left: 0.5rem; + -ms-flex-preferred-size: 8.33333333%; flex-basis: 8.33333333%; max-width: 8.33333333%; } + .col-lg-2 { - box-sizing: border-box; - flex: 0 0 auto; - padding-right: 0.5rem; - padding-left: 0.5rem; + -ms-flex-preferred-size: 16.66666667%; flex-basis: 16.66666667%; max-width: 16.66666667%; } + .col-lg-3 { - box-sizing: border-box; - flex: 0 0 auto; - padding-right: 0.5rem; - padding-left: 0.5rem; + -ms-flex-preferred-size: 25%; flex-basis: 25%; max-width: 25%; } + .col-lg-4 { - box-sizing: border-box; - flex: 0 0 auto; - padding-right: 0.5rem; - padding-left: 0.5rem; + -ms-flex-preferred-size: 33.33333333%; flex-basis: 33.33333333%; max-width: 33.33333333%; } + .col-lg-5 { - box-sizing: border-box; - flex: 0 0 auto; - padding-right: 0.5rem; - padding-left: 0.5rem; + -ms-flex-preferred-size: 41.66666667%; flex-basis: 41.66666667%; max-width: 41.66666667%; } + .col-lg-6 { - box-sizing: border-box; - flex: 0 0 auto; - padding-right: 0.5rem; - padding-left: 0.5rem; + -ms-flex-preferred-size: 50%; flex-basis: 50%; max-width: 50%; } + .col-lg-7 { - box-sizing: border-box; - flex: 0 0 auto; - padding-right: 0.5rem; - padding-left: 0.5rem; + -ms-flex-preferred-size: 58.33333333%; flex-basis: 58.33333333%; max-width: 58.33333333%; } + .col-lg-8 { - box-sizing: border-box; - flex: 0 0 auto; - padding-right: 0.5rem; - padding-left: 0.5rem; + -ms-flex-preferred-size: 66.66666667%; flex-basis: 66.66666667%; max-width: 66.66666667%; } + .col-lg-9 { - box-sizing: border-box; - flex: 0 0 auto; - padding-right: 0.5rem; - padding-left: 0.5rem; + -ms-flex-preferred-size: 75%; flex-basis: 75%; max-width: 75%; } + .col-lg-10 { - box-sizing: border-box; - flex: 0 0 auto; - padding-right: 0.5rem; - padding-left: 0.5rem; + -ms-flex-preferred-size: 83.33333333%; flex-basis: 83.33333333%; max-width: 83.33333333%; } + .col-lg-11 { - box-sizing: border-box; - flex: 0 0 auto; - padding-right: 0.5rem; - padding-left: 0.5rem; + -ms-flex-preferred-size: 91.66666667%; flex-basis: 91.66666667%; max-width: 91.66666667%; } + .col-lg-12 { - box-sizing: border-box; - flex: 0 0 auto; - padding-right: 0.5rem; - padding-left: 0.5rem; + -ms-flex-preferred-size: 100%; flex-basis: 100%; max-width: 100%; } + .col-lg-offset-0 { - box-sizing: border-box; - flex: 0 0 auto; - padding-right: 0.5rem; - padding-left: 0.5rem; margin-left: 0; } + .col-lg-offset-1 { - box-sizing: border-box; - flex: 0 0 auto; - padding-right: 0.5rem; - padding-left: 0.5rem; margin-left: 8.33333333%; } + .col-lg-offset-2 { - box-sizing: border-box; - flex: 0 0 auto; - padding-right: 0.5rem; - padding-left: 0.5rem; margin-left: 16.66666667%; } + .col-lg-offset-3 { - box-sizing: border-box; - flex: 0 0 auto; - padding-right: 0.5rem; - padding-left: 0.5rem; margin-left: 25%; } + .col-lg-offset-4 { - box-sizing: border-box; - flex: 0 0 auto; - padding-right: 0.5rem; - padding-left: 0.5rem; margin-left: 33.33333333%; } + .col-lg-offset-5 { - box-sizing: border-box; - flex: 0 0 auto; - padding-right: 0.5rem; - padding-left: 0.5rem; margin-left: 41.66666667%; } + .col-lg-offset-6 { - box-sizing: border-box; - flex: 0 0 auto; - padding-right: 0.5rem; - padding-left: 0.5rem; margin-left: 50%; } + .col-lg-offset-7 { - box-sizing: border-box; - flex: 0 0 auto; - padding-right: 0.5rem; - padding-left: 0.5rem; margin-left: 58.33333333%; } + .col-lg-offset-8 { - box-sizing: border-box; - flex: 0 0 auto; - padding-right: 0.5rem; - padding-left: 0.5rem; margin-left: 66.66666667%; } + .col-lg-offset-9 { - box-sizing: border-box; - flex: 0 0 auto; - padding-right: 0.5rem; - padding-left: 0.5rem; margin-left: 75%; } + .col-lg-offset-10 { - box-sizing: border-box; - flex: 0 0 auto; - padding-right: 0.5rem; - padding-left: 0.5rem; margin-left: 83.33333333%; } + .col-lg-offset-11 { - box-sizing: border-box; - flex: 0 0 auto; - padding-right: 0.5rem; - padding-left: 0.5rem; margin-left: 91.66666667%; } - .col-lg-offset-12 { - box-sizing: border-box; - flex: 0 0 auto; - padding-right: 0.5rem; - padding-left: 0.5rem; - } + .start-lg { + -webkit-box-pack: start; + -ms-flex-pack: start; justify-content: flex-start; text-align: start; } + .center-lg { + -webkit-box-pack: center; + -ms-flex-pack: center; justify-content: center; text-align: center; } + .end-lg { + -webkit-box-pack: end; + -ms-flex-pack: end; justify-content: flex-end; text-align: end; } + .top-lg { + -webkit-box-align: start; + -ms-flex-align: start; align-items: flex-start; } + .middle-lg { + -webkit-box-align: center; + -ms-flex-align: center; align-items: center; } + .bottom-lg { + -webkit-box-align: end; + -ms-flex-align: end; align-items: flex-end; } + .around-lg { + -ms-flex-pack: distribute; justify-content: space-around; } + .between-lg { + -webkit-box-pack: justify; + -ms-flex-pack: justify; justify-content: space-between; } + .first-lg { + -webkit-box-ordinal-group: 0; + -ms-flex-order: -1; order: -1; } + .last-lg { + -webkit-box-ordinal-group: 2; + -ms-flex-order: 1; order: 1; } -} -.col.reverse { - flex-direction: column-reverse; -} +}
\ No newline at end of file diff --git a/assets/sass/_fontface.scss b/assets/sass/_fontface.scss new file mode 100644 index 0000000..5456af2 --- /dev/null +++ b/assets/sass/_fontface.scss @@ -0,0 +1,32 @@ +@font-face { + font-family: 'Roboto'; + font-style: normal; + font-weight: 400; + src: local('Roboto'), local('Roboto-Regular'), + url('./fonts/roboto/roboto-v20-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */ + url('./fonts/roboto/roboto-v20-latin-regular.woff') format('woff'); /* Chrome 26+, Opera 23+, Firefox 39+ */ +} + +@font-face { + font-family: 'Roboto Slab'; + font-style: normal; + font-weight: 400; + src: local('Roboto Slab Regular'), local('RobotoSlab-Regular'), + url('./fonts/roboto/roboto-slab-v9-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */ + url('./fonts/roboto/roboto-slab-v9-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ +} + +@font-face { + font-family: 'icons'; + font-display: swap; + font-weight: normal; + font-style: normal; + src: url('./fonts/icons/icons.woff2?61') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */ + url('./fonts/icons/icons.woff?61') format('woff'); /* Chrome 26+, Opera 23+, Firefox 39+ */ +} + +$font-header: "Roboto Slab", "Bitter", "Ubuntu", Georgia, serif; +$font-body: "Roboto", "Rubic", "Poppins", "Helvetica", Arial, sans-serif; +$font-code: "Roboto Mono", "Menlo", "Monaco", "Andale Mono", "lucida console", "Courier New", monospace; +$font-tagline: $font-header; +$nav-font: $font-body;
\ No newline at end of file diff --git a/assets/sass/_typography.scss b/assets/sass/_fontsizing.scss index 0622b2a..2185459 100644 --- a/assets/sass/_typography.scss +++ b/assets/sass/_fontsizing.scss @@ -1,7 +1,3 @@ -$font-header: "Roboto Slab", "Bitter", "Ubuntu", Georgia, serif; -$font-body: "Roboto", "Rubic", "Poppins", "Helvetica", Arial, sans-serif; -$font-code: "Roboto Mono", "Menlo", "Monaco", "Andale Mono", "lucida console", "Courier New", monospace; - // Modular font scale // Large: http://www.modularscale.com/?1.25&em&1.333&web&text // Medium: http://www.modularscale.com/?1.25&em&1.25&web&text @@ -57,7 +53,3 @@ h3 { @include size(h3); } -small { - font-size: 0.8em; - color: $grey; -} diff --git a/assets/sass/_gallery.scss b/assets/sass/_gallery.scss index 682b86e..36eb6a7 100644 --- a/assets/sass/_gallery.scss +++ b/assets/sass/_gallery.scss @@ -29,19 +29,25 @@ height: 100%; transition: .25s ease-out; opacity: 0; - background-color: $black; cursor: pointer; + background-color: $gallery-overlay-bg-color; + cursor: pointer; - a { - color: $white; + // a { + // color: $primary-bg-color; - &:hover { - color: $accent; - } - } + // &:hover { + // color: $accent-color; + // } + // } h2 { margin: $vertical-rhythm; - color: $white; + margin-bottom: 0.5 * $vertical-rhythm; + color: $gallery-overlay-title-color; + } + + h3 { + color: $gallery-overlay-subtitle-color; } } @@ -52,13 +58,13 @@ justify-content: center; width: 100%; height: 100%; - } - img { - padding: $vertical-rhythm * 3; + img { + padding: $vertical-rhythm * 3; + max-height: 100%; + } } - .gallery-modal-link { display: flex; position: absolute; @@ -67,15 +73,4 @@ width: 100%; height: 100%; } -} - -// Prevent "broken image" icon from showing up -img.lazyload:not([src]) { - visibility: hidden; -} - -// .lazyload, .lazyloading { -// object-fit: contain; -// width: 100%; -// height: 400px; -// }
\ No newline at end of file +}
\ No newline at end of file diff --git a/assets/sass/_icons.scss b/assets/sass/_icons.scss index 743a167..524d9da 100644 --- a/assets/sass/_icons.scss +++ b/assets/sass/_icons.scss @@ -8,10 +8,6 @@ // color: inherit } -.icon-active { - color: $accent -} - span.icon { margin-right: .3em } @@ -20,40 +16,69 @@ span.icon { /* .icon-3x {font-size: 3em} */ -/* Misc */ -.icon-heart:before { content: '\e800'; } /* '' */ -.icon-attention-circled:before { content: '\e801'; } /* '' */ -.icon-link:before { content: '\e802'; } /* '' */ -.icon-ok-circled:before { content: '\e803'; } /* '' */ -.icon-info-circled:before { content: '\e804'; } /* '' */ -.icon-cancel-circled:before { content: '\e805'; } /* '' */ - -.icon-download:before { content: '\e806'; } /* '' */ -.icon-tags:before { content: '\e807'; } /* '' */ +/* Copied from fontello-codes.css */ +.icon-star:before { content: '\e800'; } /* '' */ +.icon-heart:before { content: '\e801'; } /* '' */ +.icon-info:before { content: '\e802'; } /* '' */ +.icon-ok:before { content: '\e803'; } /* '' */ +.icon-calendar:before { content: '\e804'; } /* '' */ +.icon-video:before { content: '\e805'; } /* '' */ +.icon-link:before { content: '\e807'; } /* '' */ +.icon-home:before { content: '\e808'; } /* '' */ +.icon-download:before { content: '\e80a'; } /* '' */ +.icon-edit:before { content: '\e80b'; } /* '' */ +.icon-location:before { content: '\e80c'; } /* '' */ +.icon-attention:before { content: '\e80d'; } /* '' */ +.icon-cancel:before { content: '\e80e'; } /* '' */ +.icon-headphones:before { content: '\e80f'; } /* '' */ +.icon-ethereum:before { content: '\e811'; } /* '' */ +.icon-tags:before { content: '\e812'; } /* '' */ +.icon-gift:before { content: '\e813'; } /* '' */ +.icon-google-play:before { content: '\e818'; } /* '' */ +.icon-itunes:before { content: '\e819'; } /* '' */ +.icon-ravelry:before { content: '\e81a'; } /* '' */ +.icon-tiktok:before { content: '\e81d'; } /* '' */ +.icon-raspberry-pi:before { content: '\e81e'; } /* '' */ +.icon-btc:before { content: '\e821'; } /* '' */ +.icon-facebook:before { content: '\e822'; } /* '' */ +.icon-medium:before { content: '\e823'; } /* '' */ +.icon-etsy:before { content: '\e824'; } /* '' */ +.icon-spin:before { content: '\e834'; } /* '' */ .icon-link-ext:before { content: '\f08e'; } /* '' */ -.icon-left-circled:before { content: '\f0a8'; } /* '' */ -.icon-right-circled:before { content: '\f0a9'; } /* '' */ +.icon-twitter:before { content: '\f099'; } /* '' */ +.icon-github:before { content: '\f09b'; } /* '' */ .icon-menu:before { content: '\f0c9'; } /* '' */ -.icon-money:before { content: '\f0d6'; } /* '' */ -.icon-mail-alt:before { content: '\f0e0'; } /* '' */ +.icon-magic:before { content: '\f0d0'; } /* '' */ +.icon-pinterest:before { content: '\f0d2'; } /* '' */ +.icon-mail:before { content: '\f0e0'; } /* '' */ +.icon-lightbulb:before { content: '\f0eb'; } /* '' */ +.icon-github-octocat:before { content: '\f113'; } /* '' */ +.icon-gamepad:before { content: '\f11b'; } /* '' */ .icon-terminal:before { content: '\f120'; } /* '' */ +.icon-code:before { content: '\f121'; } /* '' */ .icon-rocket:before { content: '\f135'; } /* '' */ -.icon-space-shuttle:before { content: '\f197'; } /* '' */ -.icon-address-card:before { content: '\f2bb'; } /* '' */ -.icon-share:before { content: '\f1e0'; } /* '' */ - -/* External services */ -.icon-github:before { content: '\f09b'; } /* was .icon-github-circled before! '' */ -.icon-github-cat:before { content: '\f113'; } /* '' */ -.icon-twitter:before { content: '\f304'; } /* '' */ -.icon-facebook:before { content: '\f308'; } /* '' */ -.icon-linkedin:before { content: '\f30c'; } /* '' */ -.icon-reddit:before { content: '\f1a2'; } /* '' */ +.icon-angle-circled-left:before { content: '\f137'; } /* '' */ +.icon-angle-circled-right:before { content: '\f138'; } /* '' */ .icon-rss:before { content: '\f143'; } /* '' */ -.icon-youtube:before { content: '\f166'; } /* '' */ +.icon-play-circled:before { content: '\f144'; } /* '' */ +.icon-xing:before { content: '\f169'; } /* '' */ +.icon-youtube:before { content: '\f16a'; } /* '' */ .icon-stackoverflow:before { content: '\f16c'; } /* '' */ .icon-instagram:before { content: '\f16d'; } /* '' */ +.icon-linux:before { content: '\f17c'; } /* '' */ +.icon-moon:before { content: '\f186'; } /* '' */ +.icon-vkontakte:before { content: '\f189'; } /* '' */ +.icon-vimeo:before { content: '\f194'; } /* '' */ +.icon-space-shuttle:before { content: '\f197'; } /* '' */ +.icon-reddit:before { content: '\f1a1'; } /* '' */ +.icon-spotify:before { content: '\f1bc'; } /* '' */ +.icon-file-pdf:before { content: '\f1c1'; } /* '' */ +.icon-share:before { content: '\f1e0'; } /* '' */ +.icon-twitch:before { content: '\f1e8'; } /* '' */ .icon-paypal:before { content: '\f1ed'; } /* '' */ +.icon-diamond:before { content: '\f219'; } /* '' */ +.icon-gitlab:before { content: '\f296'; } /* '' */ +.icon-linkedin:before { content: '\f30c'; } /* '' */ .icon-pulse-slow { animation: color 8s infinite; @@ -68,6 +93,15 @@ span.icon { } @keyframes color { - from {color: $accent;} - to {color: $black;} - }
\ No newline at end of file + from {color: $accent-color;} + to {color: $primary-fg-color;} +} + +a > .icon { + color: $primary-fg-color; + transition: color .2s ease-out; + + &:not(.icon-menu):hover, &:not(.icon-menu):focus { + color: $accent-color; + } +}
\ No newline at end of file diff --git a/assets/sass/_layout.scss b/assets/sass/_layout.scss index a310054..aabbfbb 100644 --- a/assets/sass/_layout.scss +++ b/assets/sass/_layout.scss @@ -1,37 +1,124 @@ + +$mobile-breakpoint: 47.99em; + +* { + box-sizing: border-box; + margin: 0; + padding: 0; + border: 0; + font: inherit; + color: inherit; + vertical-align: baseline; + + &::before, + &::after { + box-sizing: border-box; + } +} + +html { + box-sizing: inherit; + overflow-x: hidden; + scroll-behavior: smooth; + height: 100%; +} + +::selection { + background: $accent-color +} + body { @include size(p); display: flex; flex-direction: column; justify-content: space-between; - min-height: 100vh; - color: $black; + height: 100%; + color: $primary-fg-color; font-family: $font-body; line-height: $base-line-height; + + background-color: $secondary-bg-color; +} + +main { + transition: .4s ease-in; + + &::before { + background-color: $primary-bg-color; + } + + &.active { + transform: translate(-100vw, 0); + opacity: 0.4; + } } header { - height: 100vh; - background-color: $white; + height: 100%; + min-height: 100%; + background-color: $primary-bg-color; + color: $primary-fg-color; div { z-index: 101; } + h1, h2, h3 { + font-family: $font-tagline; + color: $tagline-color; + } + img { - max-height: $vertical-rhythm * 6; + // max-height: $vertical-rhythm * 6; + // max-width: 100%; + height: auto; + // Actually not needed, but in case some CSS is overwritten for bad: + object-fit: contain; } +} + +.container { + max-width: 43.75rem; // 700px + margin: auto; + padding: $vertical-rhythm * 4 0 $vertical-rhythm * 4; +} - h1 { - font-family: $font-body; +@media (max-width: 25em) { + body .container { + padding: $vertical-rhythm * 4 $vertical-rhythm; } } -footer { - height: $vertical-rhythm * 7; - background-color: $black; +@media (max-width: $mobile-breakpoint) { + body .container { + padding: $vertical-rhythm * 4 $vertical-rhythm; + } - div, - a, .icon { - color: $white; + .mobile-hidden { + visibility: hidden; } } + +footer { + height: $vertical-rhythm * 8; + background-color: $footer-bg-color; + // display: block; + padding-bottom: 2em; + // overflow: hidden; + + // a { + // color: $footer-icon-color; + // } + .social { + margin-top: $vertical-rhythm * 2; + margin-bottom: $vertical-rhythm * 2; + .icon { + color: $footer-icon-color; + font-size: 2em; + } + } + + small { + color: $footer-text-color; + } +}
\ No newline at end of file diff --git a/assets/sass/_modal.scss b/assets/sass/_modal.scss index f875620..79065a8 100644 --- a/assets/sass/_modal.scss +++ b/assets/sass/_modal.scss @@ -21,25 +21,25 @@ a { &:hover { - color: $accent; + color: $accent-color; } } article { a { - color: $accent + color: $accent-color } } } .modal-box { position: relative; - width: 80%; - max-width: 1000px; + width: 85%; + max-width: 1200px; max-height: 85vh; margin: auto; border-radius: 9px; - background-color: $smoke; + background-color: $secondary-bg-color; box-shadow: 0 0 50px 0 rgba(33, 33, 33, 1); } @@ -62,10 +62,12 @@ align-items: center; justify-content: center; height: 100%; - padding: 40px; + padding: 4%; img { max-height: 100%; + // TODO(kdevo): Temporary fix to prevent image stretching in modal header + object-fit: contain; } } @@ -75,36 +77,31 @@ overflow-y: auto; } -.term-content { - max-height: calc(80vh - 20vh); - overflow-y: auto; -} - .close { position: absolute; - top: 10px; - right: -4px; - color: $smoke; - font-size: 30px; + top: 4px; + right: -3px; + color: $gallery-modal-close-color; + font-size: 1.75em; font-weight: bold; - line-height: .5; + z-index: 100; transition: color .2s ease-out; &:hover, &:focus { - color: $accent; + color: $accent-color; text-decoration: none; cursor: pointer; } } .repo-info { - color: $grey; + color: $alt-text-color; a { - color: $grey + color: $alt-text-color } font-size: 0.65em; .icon { - color: $grey; + color: $alt-text-color; } }
\ No newline at end of file diff --git a/assets/sass/_nav.scss b/assets/sass/_nav.scss new file mode 100644 index 0000000..4ccf56d --- /dev/null +++ b/assets/sass/_nav.scss @@ -0,0 +1,114 @@ +@media (max-width: $mobile-breakpoint) { + nav { + // Hide menu links between logo and menu icon + div:not(:first-child):not(:last-child) { + display: none; + } + + div.nav-toggle a { + display: inline-block; + } + + div.logo { + padding-right: 30%; + } + + div.nav-toggle { + padding-left: 30%; + } + // opacity: 0; + } +} + +@media (max-width: 25em) { + nav { + .logo, + .nav-toggle { + max-width: 50% !important; + } + } +} + +nav { + position: absolute; + z-index: 100; + bottom: 0; + width: 100%; + height: $vertical-rhythm * 2; + background-color: $primary-bg-color; + text-align: center; + + h3 { + margin: 0; + font-family: $nav-font; + font-weight: 600; + letter-spacing: 2px; + text-transform: uppercase; + } + + img { + display: inline-block; + max-width: 10em; + max-height: 2.5em; + width: auto; + vertical-align: middle; + } + + .logo, + .nav-toggle { + visibility: hidden; + } + + .nav-toggle a { + display: none; + } + + .nav-item-active a { + color: $accent-color; + } +} + +.nav-fixed { + position: fixed; + top: 0; + bottom: auto; + box-shadow: 0 3px 4px rgba(0, 0, 0, .2); + + @media (max-width: $mobile-breakpoint) { + opacity: 1; + transition: opacity 200ms; + } + a.icon-active > .icon { + color: $full-nav-bg-color; + } +} + +.nav-full { + position: fixed; + top: 0; + right: -100vw; + bottom: 0; + width: 100vw; + height: 100%; + + transform: translate(0, 0); + transition: .3s ease-out; + + + a, .icon { + color: $full-nav-fg-color; + + &:hover { + color: $accent-color; + } + } +} + + +// Animation to translate in the font +.nav-full.active { + transform: translate(-100vw, 0); + transition: .45s ease-in; + // background: $accent-color; + background: $full-nav-bg-color; +} diff --git a/assets/sass/_spinner.scss b/assets/sass/_spinner.scss new file mode 100644 index 0000000..ac5a956 --- /dev/null +++ b/assets/sass/_spinner.scss @@ -0,0 +1,85 @@ +/* + Animation example, for spinners +*/ +.animate-spin { + -moz-animation: spin 2s infinite linear; + -o-animation: spin 2s infinite linear; + -webkit-animation: spin 2s infinite linear; + animation: spin 2s infinite linear; + display: inline-block; +} +@-moz-keyframes spin { + 0% { + -moz-transform: rotate(0deg); + -o-transform: rotate(0deg); + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + + 100% { + -moz-transform: rotate(359deg); + -o-transform: rotate(359deg); + -webkit-transform: rotate(359deg); + transform: rotate(359deg); + } +} +@-webkit-keyframes spin { + 0% { + -moz-transform: rotate(0deg); + -o-transform: rotate(0deg); + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + + 100% { + -moz-transform: rotate(359deg); + -o-transform: rotate(359deg); + -webkit-transform: rotate(359deg); + transform: rotate(359deg); + } +} +@-o-keyframes spin { + 0% { + -moz-transform: rotate(0deg); + -o-transform: rotate(0deg); + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + + 100% { + -moz-transform: rotate(359deg); + -o-transform: rotate(359deg); + -webkit-transform: rotate(359deg); + transform: rotate(359deg); + } +} +@-ms-keyframes spin { + 0% { + -moz-transform: rotate(0deg); + -o-transform: rotate(0deg); + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + + 100% { + -moz-transform: rotate(359deg); + -o-transform: rotate(359deg); + -webkit-transform: rotate(359deg); + transform: rotate(359deg); + } +} +@keyframes spin { + 0% { + -moz-transform: rotate(0deg); + -o-transform: rotate(0deg); + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + + 100% { + -moz-transform: rotate(359deg); + -o-transform: rotate(359deg); + -webkit-transform: rotate(359deg); + transform: rotate(359deg); + } +} diff --git a/assets/sass/_termynal.scss b/assets/sass/_termynal.scss index d4f416d..6a30d0d 100644 --- a/assets/sass/_termynal.scss +++ b/assets/sass/_termynal.scss @@ -6,9 +6,9 @@ * @license MIT */ -$color-bg: $black; -$color-text: $smoke; -$color-text-subtle: $storm; +$color-bg: $primary-fg-color; +$color-text: $secondary-bg-color; +$color-text-subtle: $alt-text-color; [data-termynal] { // width: 750px; @@ -36,8 +36,8 @@ $color-text-subtle: $storm; border-radius: 50%; /* A little hack to display the window buttons in one pseudo element. */ background: #d9515d; - -webkit-box-shadow: 25px 0 0 #f4c025, 50px 0 0 $accent; - box-shadow: 25px 0 0 #f4c025, 50px 0 0 $accent; + -webkit-box-shadow: 25px 0 0 #f4c025, 50px 0 0 $accent-color; + box-shadow: 25px 0 0 #f4c025, 50px 0 0 $accent-color; } [data-termynal]:after { diff --git a/assets/sass/main.scss b/assets/sass/main.scss index 4c2096e..7ec6365 100644 --- a/assets/sass/main.scss +++ b/assets/sass/main.scss @@ -1,36 +1,7 @@ -@font-face { - font-family: 'Roboto'; - font-style: normal; - font-weight: 400; - src: local('Roboto'), local('Roboto-Regular'), - url('./fonts/roboto/roboto-v20-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */ - url('./fonts/roboto/roboto-v20-latin-regular.woff') format('woff'); /* Chrome 26+, Opera 23+, Firefox 39+ */ -} -@font-face { - font-family: 'Roboto Slab'; - font-style: normal; - font-weight: 400; - src: local('Roboto Slab Regular'), local('RobotoSlab-Regular'), - url('./fonts/roboto/roboto-slab-v9-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */ - url('./fonts/roboto/roboto-slab-v9-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ -} -@font-face { - font-family: 'icons'; - font-display: swap; - font-weight: normal; - font-style: normal; - src: url('./fonts/icons/icons.woff2?30') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */ - url('./fonts/icons/icons.woff?30') format('woff'); /* Chrome 26+, Opera 23+, Firefox 39+ */ -} - -@import "flexboxgrid"; -{{ with .Site.Params.accentColor -}} -$accent_color: {{ . }}; -{{- else -}} -$accent_color: #0097a7; -{{- end }} +@import "flexboxgrid-stripped"; @import "colors"; -@import "typography"; +@import "fontface"; +@import "fontsizing"; @import "icons"; @import "animation"; @import "layout"; @@ -38,189 +9,10 @@ $accent_color: #0097a7; @import "modal"; @import "about"; @import "gallery"; -@import "custom"; - - -{{ if .Site.Params.Feat.useBlog -}} +{{ if (.Page.Scratch.Get "blog") -}} @import "blog"; {{- end }} -{{ if .Site.Params.Feat.useTermynal -}} -$term_title: "{{ .Site.Data.terminal.title }}"; -@import "termynal"; -{{- end }} - -* { - box-sizing: border-box; - margin: 0; - padding: 0; - border: 0; - font: inherit; - color: inherit; - // color: black; - vertical-align: baseline; - - &::before, - &::after { - box-sizing: border-box; - } -} - -html { - box-sizing: inherit; - overflow-x: hidden; - scroll-behavior: smooth; -} - -footer { - padding-bottom: 1em; - .icon { - margin-top: 1em; - margin-bottom: 1em; - font-size: 2em; - } - a > .icon { - color: $white; - } -} - -@media (max-width: 47.99em) { - body .container { - padding: $vertical-rhythm * 4 $vertical-rhythm; - } - - nav { - // Hide menu links between logo and hamburger menu - div:not(:first-child):not(:last-child) { - display: none; - } - - div.nav-toggle a { - display: inline-block; - } - } - - .mobile-hidden { - visibility: hidden; - } -} - -@media (max-width: 25em) { - body .container { - padding: $vertical-rhythm * 4 $vertical-rhythm; - } - - nav { - div.logo, - div.nav-toggle { - max-width: 50% !important; - } - } -} - -nav { - position: absolute; - z-index: 100; - bottom: 0; - width: 100%; - height: $vertical-rhythm * 2; - background-color: $white; - // box-shadow: 0 2px 2px rgba(0, 0, 0, .2); - text-align: center; - - h3 { - margin: 0; - font-family: $font-body; - font-weight: 600; - letter-spacing: 2px; - text-transform: uppercase; - } - - img { - display: inline-block; - max-width: 10em; - max-height: 2.5em; - vertical-align: middle; - } - - .logo, - .nav-toggle { - visibility: hidden; - } - - .nav-toggle a { - display: none; - } - - .nav-item-active a { - color: $accent; - } -} - -// @media (min-width: 47.99) { -// nav { -// box-shadow: none; -// } -// } - -.nav-shadow { - box-shadow: 0 3px 4px rgba(0, 0, 0, .2); -} - - -.nav-fixed { - position: fixed; - top: 0; - bottom: auto; -} - -.nav-full { - position: fixed; - top: 0; - right: -100vw; - bottom: 0; - width: 100vw; - height: 100%; - transform: translate(0, 0); - transition: .3s ease-out; - background-color: $black; - - a, .icon { - color: $white; - - &:hover { - color: $accent; - } - } -} - -.nav-full.active { - transform: translate(-100vw, 0); -} - -main { - transition: .3s ease-in; - background-color: $smoke; - - &.active { - transform: translate(-100vw, 0); - } -} - -.container { - max-width: 43.75rem; // 700px - margin: auto; - padding: $vertical-rhythm * 4 0 $vertical-rhythm * 4; -} - -p { - margin-bottom: $vertical-rhythm; - - code { - font-family: $font-code; - } -} - h1, h2, h3 { @@ -235,86 +27,74 @@ h3 { } .home-logo { + max-height: 10 * $vertical-rhythm; margin-bottom: $vertical-rhythm; } -a > .icon { - color: $black; - transition: color .2s ease-out; - - &:not(.icon-menu):hover, &:not(.icon-menu):focus { - color: $accent; - } +{{ if .Site.Params.Feat.useTermynal -}} +$term_title: "{{ .Site.Data.terminal.title }}"; +@import "termynal"; +.term-content { + max-height: calc(80vh - 20vh); + overflow-y: auto; } +{{- end }} +@import "nav"; + +// TODO(kdevo): only used in 404, refactor! .full { top: 0; bottom: 0; height: 100vh; } -.contact { - width: 100%; - padding-bottom: $vertical-rhythm * 2; - // TODO(kdevo): Maybe consider to change this to white if blog is not enabled: - background-color: $smoke; - - form { - margin-top: $vertical-rhythm; - } - - .contact-submit { - position: relative; - } - - #form-submit { - display: block; - width: 50%; - margin: 0 auto; - } - - #form-thankyou, #form-sending, #form-error { - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - } -} - -input, button, select { - width: 100%; - margin: 8px 0; - padding: 10px; - border-width: 1px; - border-style: solid; - border-radius: 3px; - border-color: $smoke; - background-color: $white; - color: $black; - - &[type="submit"] { - transition: .4s ease-out; - background-color: $storm; - color: $white; - - &:hover { - background-color: $accent; - color: $white; - cursor: pointer; - } - } - - .icon { - color: $white - } -} - -button { - white-space: nowrap; -} - -textarea { - @extend input; - min-height: $vertical-rhythm * 4; - overflow: auto; -} +@import "contact"; + + +{{ if .Site.Params.background -}} + {{ $scratch := newScratch }} + {{ $imgSize := default "1920x" .Site.Params.Image.Background.resize }} + {{ $lqipSize := default "500x" .Site.Params.Image.Background.resizeLQIP }} + {{ $useLQIP := default true .Site.Params.Image.Background.useLQIP }} + {{ $resizeOptions := default "jpg q90 Lanczos" .Site.Params.Image.Background.resizeOptions }} + {{ with (resources.Get .Site.Params.background) -}} + {{ $image := .Resize (printf "%s %s" $imgSize $resizeOptions) }} + {{ $scratch.Set "img" $image.Permalink }} + {{ $scratch.Set "imgW" $image.Width }} + {{ $scratch.Set "imgH" $image.Height }} + + {{ if $useLQIP -}} + {{ $lqip := $image.Resize (printf "%s %s" $lqipSize $resizeOptions) }} + {{ $scratch.Set "imgPreview" $lqip.Permalink }} + {{ $scratch.Set "imgPlaceholderRes" $lqip }} + {{- end }} + {{- else -}} + {{ $scratch.Set "img" .Site.Params.background }} + {{- end }} + + .bg { + {{ with $scratch.Get "imgPlaceholderRes" }} + background-image: url("{{ .Permalink }}"); + {{- else -}} + background-image: url("{{ $scratch.Get "img" }}"); + {{- end }} + background-repeat: no-repeat; + background-position: center; + background-attachment: fixed; + -webkit-background-size: cover; + -moz-background-size: cover; + -o-background-size: cover; + background-size: cover; + } + + {{ with $scratch.Get "imgPlaceholderRes" -}} + @media (min-width: {{ .Width }}px) { + .bg.lazyloaded { + transition: background-image 1.5s; + background-image: url("{{ $scratch.Get "img" }}"), url("{{ .Permalink }}"); + } + } + {{- end }} +{{ end }} +@import "custom"; diff --git a/assets/sass/themes/_color-map-dark.scss b/assets/sass/themes/_color-map-dark.scss new file mode 100644 index 0000000..635de8a --- /dev/null +++ b/assets/sass/themes/_color-map-dark.scss @@ -0,0 +1,20 @@ +//-- Fine-tuning -- +$tagline-color: $primary-fg-color; + +$button-fg-color: $primary-bg-color; +// Nav color of the full nav which shows up when pressing the burger on mobile viewports. +// Regular colors are swapped by default (i.e. fg -> bg and vice versa). This aims to create a "b-side" or "flip-side" feeling. +$full-nav-bg-color: $primary-fg-color; +$full-nav-fg-color: $primary-bg-color; + +// The links have some shadow effect. It usually makes sense to leave this as is. +$link-shadow-color: $secondary-bg-color; + +$gallery-overlay-bg-color: $primary-bg-color; +$gallery-overlay-title-color: $primary-fg-color; +$gallery-overlay-subtitle-color: $alt-text-color; +$gallery-modal-close-color: $primary-fg-color; + +$footer-bg-color: $primary-fg-color; +$footer-icon-color: $primary-bg-color; +$footer-text-color: $alt-text-color; diff --git a/assets/sass/themes/_color-map-light.scss b/assets/sass/themes/_color-map-light.scss new file mode 100644 index 0000000..041e493 --- /dev/null +++ b/assets/sass/themes/_color-map-light.scss @@ -0,0 +1,20 @@ +//-- Fine-tuning -- +$tagline-color: $primary-fg-color; + +$button-fg-color: $primary-bg-color; +// Nav color of the full nav which shows up when pressing the burger on mobile viewports. +// Regular colors are swapped by default (i.e. fg -> bg and vice versa). This aims to create a "b-side" or "flip-side" feeling. +$full-nav-bg-color: $primary-fg-color; +$full-nav-fg-color: $primary-bg-color; + +// The links have some shadow effect. It usually makes sense to leave this as is. +$link-shadow-color: $secondary-bg-color; + +$gallery-overlay-bg-color: $primary-fg-color; +$gallery-overlay-title-color: $primary-bg-color; +$gallery-overlay-subtitle-color: $alt-text-color; +$gallery-modal-close-color: $secondary-bg-color; + +$footer-bg-color: $primary-fg-color; +$footer-icon-color: $primary-bg-color; +$footer-text-color: $alt-text-color;
\ No newline at end of file diff --git a/assets/sass/themes/dedark-colors.scss b/assets/sass/themes/dedark-colors.scss new file mode 100644 index 0000000..cfb1566 --- /dev/null +++ b/assets/sass/themes/dedark-colors.scss @@ -0,0 +1,8 @@ +$primary-fg-color: #fafafa; +$primary-bg-color: #0f0f0f; +$button-bg-color: #324A5F; +$secondary-bg-color: #000303; +$accent-color: #0097A7; +$alt-text-color: #9e9e9e; + +@import "color-map-dark"
\ No newline at end of file diff --git a/assets/sass/themes/delight-colors.scss b/assets/sass/themes/delight-colors.scss new file mode 100644 index 0000000..1038a89 --- /dev/null +++ b/assets/sass/themes/delight-colors.scss @@ -0,0 +1,8 @@ +$primary-fg-color: #212121; +$primary-bg-color: #FFFFFF; +$button-bg-color: #4E6B6C; +$secondary-bg-color: #F7F7F7; +$accent-color: #0097A7; +$alt-text-color: #898989; + +@import "color-map-light"
\ No newline at end of file diff --git a/assets/sass/themes/origin-colors.scss b/assets/sass/themes/origin-colors.scss new file mode 100644 index 0000000..721f0de --- /dev/null +++ b/assets/sass/themes/origin-colors.scss @@ -0,0 +1,10 @@ +// https://coolors.co/1e1e1e-4e6b6c-f7f7f7-ffffff-da784d + +$primary-fg-color: #212121; +$primary-bg-color: #FFFFFF; +$button-bg-color: #4E6B6C; +$secondary-bg-color: #F7F7F7; +$accent-color:#DA784D; +$alt-text-color: #757575; + +@import "color-map-light";
\ No newline at end of file diff --git a/exampleSite/data/terminal.json b/data/terminal.json index 68a511b..5bfae45 100644 --- a/exampleSite/data/terminal.json +++ b/data/terminal.json @@ -1,6 +1,6 @@ { - "startDelay": 600, - "lineDelay": 900, + "startDelay": 800, + "lineDelay": 1400, "typeDelay": 40, "progressChar": "█", "showPercent": true, diff --git a/exampleSite/static/images/kd.png b/exampleSite/assets/kd.png Binary files differindex 7d4bf68..7d4bf68 100644 --- a/exampleSite/static/images/kd.png +++ b/exampleSite/assets/kd.png diff --git a/exampleSite/assets/osprey-delight-logo.png b/exampleSite/assets/osprey-delight-logo.png Binary files differnew file mode 100644 index 0000000..07606f0 --- /dev/null +++ b/exampleSite/assets/osprey-delight-logo.png diff --git a/exampleSite/assets/osprey-delight.png b/exampleSite/assets/osprey-delight.png Binary files differnew file mode 100644 index 0000000..48ec38c --- /dev/null +++ b/exampleSite/assets/osprey-delight.png diff --git a/exampleSite/assets/osprey-logo.png b/exampleSite/assets/osprey-logo.png Binary files differnew file mode 100644 index 0000000..64fdca7 --- /dev/null +++ b/exampleSite/assets/osprey-logo.png diff --git a/exampleSite/assets/sass/_custom.scss b/exampleSite/assets/sass/_custom.scss index 8e37fe9..2392b73 100644 --- a/exampleSite/assets/sass/_custom.scss +++ b/exampleSite/assets/sass/_custom.scss @@ -1,3 +1,4 @@ +/* This file has been generated via hugo gen chromastyles. See README for more information */ /* Background */ .chroma { color: #93a1a1; background-color: #002b36 } /* Other */ .chroma .x { color: #cb4b16 } /* Error */ .chroma .err { } diff --git a/exampleSite/config.toml b/exampleSite/config.toml deleted file mode 100644 index 4a5e50c..0000000 --- a/exampleSite/config.toml +++ /dev/null @@ -1,103 +0,0 @@ -title = "Osprey Delight Demo" -baseURL = "https://example.com" -languageCode = "en-US" -theme = "osprey-delight" -tags = ["personal", "homepage", "portfolio"] -# canonifyURLS = true -# googleAnalytics = "" -disableKinds = ["taxonomy", "taxonomyTerm"] # This theme does not currently use "tag" and "category" taxonomies -enableEmoji = true -pygmentsUseClasses = true - -## Generic theme parameters: -[Params] - author = "kdevo" - email = "" - description = "osprey-delight example site" - tagline = "Hi there! Check out this theme." - logoBig = "/images/osprey-delight-logo.png" - # [str] This is the logo that will be shown in the left corner of the nav bar. - # Usually, you would like to use something bigger than a favicon - but not too big either. - # Make sure that the image does not overlay the nav links. Don't be afraid of experimenting! - logoSmall = "favicon.png" - favicon = "favicon.png" - opengraphImage = "/images/osprey-delight.png" - googleTagManager = "" - # [bool] The following will enforce redirection to the baseURL for all sub-directories/-pages. - # Example: If you create about.md, Hugo will also create a '/about/index.html'. - # This file will contain only a redirect directive if this switch is enabled. - # Make sure that you do not enable this switch if you also set useBlog to true. - enforceSinglePage = false - # [bool] Will generate copyright notice in footer for your site. - copyright = true - # [bool] Your credit is much appreciated. It will be displayed in a small way in your footer. - # Anyways, of course you're free to uncomment the following line to disable the credit. - # credit = false - -## Social media links in footer: -[Params.Social] - # [str] Link to your Twitter. - twitter = "" - # [str] Link to your LinkedIn. - linkedin = "" - # [str] Link to your GitHub. - github = "https://github.com/kdevo/osprey-delight" - # [str] Link to your Facebook. - facebook = "" - # [str] Link to your Instagram. - # instagram = "" - # [str] Link to your StackOverflow. - stackoverflow = "" - - -## Theme features: -[Params.Feat] - # [bool] Termynal (https://github.com/ines/termynal) is a small JS library for showing a terminal "animation" from within your gallery item. - # The library has been stripped-down to a minimum to only have the necessary functionality. - useTermynal = true - # [bool] Lazy loading of images with lazysizes (SEO-friendly). - lazyloading = true - # [str] Use Basin contact form. - ajaxBasin = "https://usebasin.com/f/{YOUR-12-CHAR-FORM-KEY-HERE}" - googleTagManager = "" - # [bool] Enable usage of your own 'assets/scss/_custom.css'. - customCSS = false - # [bool] Use structured data for your own https://schema.org/Person (SEO-friendly). - # The theme attempts to "guess" your information by using the information you give it in the configuration. - # For more specific usage, you can override the JSON-LD by supplying your own 'person.json' under 'assets/' - structuredData = true - # [str] Tell your GitHub username so that the GitHub API is used to fetch more information for structured data. - # This will use information that is publically available about your GitHub user profile at https://api.github.com/users/{USERNAME}. - # structuredDataFromGithub = "USERNAME" - # [bool] Enable the optional blog module - useBlog = true - -## Configure contact form: -[Params.Contact] - # [str[]] i18n keys used to display in an additional select box. - # Comment out if you want to disable it. - select = ["generic", "coop", "business", "project"] - - -[[menu.main]] - name = "About" - url = "/#about" - weight = 1 -[[menu.main]] - name = "Work" - url = "/#work" - weight = 2 -[[menu.main]] - name = "Blog" - url = "/#blog" - weight = 3 -[[menu.main]] - name = "Contact" - url = "/#contact" - weight = 4 -[[menu.main]] - # Use icon here to neatly back reference an external site/blog/whatever: - pre = "<i class='icon icon-link-ext'></i> " - name = "" - url = "https://pyotek.dev" - weight = 5 diff --git a/exampleSite/config.yaml b/exampleSite/config.yaml new file mode 100644 index 0000000..96baa34 --- /dev/null +++ b/exampleSite/config.yaml @@ -0,0 +1,113 @@ +title: "Osprey Delight Demo" +baseURL: "https://example.com" +languageCode: "en-US" +theme: "osprey-delight" +tags: ["personal", "homepage", "portfolio"] +#canonifyURLS: true +#googleAnalytics: "" +disableKinds: ["taxonomy", "taxonomyTerm"] +enableEmoji: true +pygmentsUseClasses: true + +## Generic theme parameters: +Params: + author: "kdevo" + description: "Osprey Delight - Example Site" + + # logoBig appears at the top of the page. Use a path relative to the assets dir for auto-resizing. + logoBig: "osprey-delight.png" + + # logoSmall is the logo that will be shown in the left corner of the nav bar. + # Use a path relative to the assets dir for auto-resizing. + logoSmall: "favicon.png" + + # tagline (followed by a cursor) is shown at the top, below the logo + #tagline: "Welcome!" + + # mdTagline can be used instead to specify the tagline in Markdown for more customizability. + # Note that {cursor} is a placeholder and will be replaced by the actual cursor HTML when rendering. + mdTagline: "# Welcome!\n ## This is Osprey Delight{cursor}" + favicon: "favicon.png" + + opengraphImage: "/images/osprey-delight.png" + + # enforceSinglePage will enforce redirection to the baseURL for all sub-directories/-pages. + # Example: If you create about.md, Hugo will also create a '/about/index.html'. This file will contain only a redirect directive if this switch is enabled. + enforceSinglePage: false + + # copyright flag generates a copyright notice in footer for your site. + copyright: true + +## Social links in footer: + Social: + - type: twitter # the icon to use. can be anything mentioned in "assets/sass/_icons.scss" + url: "" + - type: linkedin + url: "" + - type: github + url: github = "https://github.com/kdevo/osprey-delight" + - type: stackoverflow + url: "" + - type: spotify + url: https://open.spotify.com/artist/5NhBOdJh6T1tgtM5Au1Opl + + +## Theme features: + Feat: + # useLazySizes to lazy load images with lazysizes (recommended) + useLazySizes: true + + # ajaxBasin uses Basin for a functional contact form. + ajaxBasin: "https://usebasin.com/f/{YOUR-12-CHAR-FORM-KEY-HERE}" + + # useStructuredData for your own https://schema.org/Person (SEO-friendly). + # This will be auto-generated dependent on the information you provide in this configuration. + useStructuredData: false + + # structuredDataGitHubUser needs your USERNAME so that the GitHub API is used to fetch more information for structured data. + # This will use information that is publically available about your GitHub user profile at https://api.github.com/users/{USERNAME}. + #structuredDataGitHubUser = "USERNAME" + + # useTermynal enables Termynal (https://github.com/ines/termynal), a small JS library for showing a terminal "animation" from within your gallery item. + # The cool thing is that the library has been stripped-down to a minimum to only have the necessary functionality. + useTermynal: true + + googleTagManager: "" + + # Expert mode: Configure image resizing (some of the settings are not yet publicly documented) + Image: + Logo: + resize: "300x" + + Gallery: + resize: "400x" + + # Background: + # resize: "1920x" + + +## The menu items are automatically added to navbar. Use content files for more advanced usage. +## See: https://gohugo.io/content-management/menus/#add-content-to-menus +Menu: + Main: + - name: "About" + identifier: about # the identifier controls the section type (and therewith the appearence). + url: "/#about" + weight: 1 + - name: "Work" + identifier: gallery + url: "/#work" + weight: 2 + - name: "Blog" + identifier: blog + url: "/#blog" + weight: 3 + - name: "Contact" + identifier: contact + url: "/#contact" + weight: 4 + # Use icon here to back reference an external site: + - pre: "<i class='icon icon-link-ext'></i> " + name: "" + url: "https://pyotek.dev" + weight: 5 diff --git a/exampleSite/content/about.md b/exampleSite/content/about.md index 715e3c0..2ea1d23 100644 --- a/exampleSite/content/about.md +++ b/exampleSite/content/about.md @@ -1,13 +1,11 @@ +++ -title = "It's the Osprey Delight demo site." +title = "About" date = "2017-06-27T17:39:21-07:00" draft = false +++ -## And [here's my repo!](https://github.com/kdevo/osprey-delight) +Osprey Delight is the free-minded artist's choice for a clutter-free and fast single-page portfolio. -Osprey **De**light is a sugar-free version of the [awesome Osprey theme](https://github.com/tomanistor/osprey) by [Toma Nistor](https://tomanistor.com/) for [Hugo](https://gohugo.io/). +It tastes a bit different than [the original great Osprey theme](https://github.com/tomanistor/osprey) and adds awesome new functionality to your Delight. -It tastes a bit different than the original (hence the "light" in the name) but also adds some new functionality -- hopefully to your **delight**. - -Have fun using it! {{< icon "rocket icon-pulse-fast" >}}
\ No newline at end of file +It's perfectly suited to show off your awesome work! {{< icon "rocket icon-pulse-fast" >}}
\ No newline at end of file diff --git a/exampleSite/content/blog/rich-content.md b/exampleSite/content/blog/rich-content.md index 5ff41d7..407c539 100644 --- a/exampleSite/content/blog/rich-content.md +++ b/exampleSite/content/blog/rich-content.md @@ -13,14 +13,6 @@ Hugo ships with several [Built-in Shortcodes](https://gohugo.io/content-manageme <!--more--> --- -## Instagram Simple Shortcode - -{{< instagram_simple BGvuInzyFAe hidecaption >}} - -<br> - ---- - ## YouTube Privacy Enhanced Shortcode {{< youtube ZJthWmvUzzc >}} diff --git a/exampleSite/content/gallery/hugo.md b/exampleSite/content/gallery/hugo.md index afd3891..8dcd05c 100644 --- a/exampleSite/content/gallery/hugo.md +++ b/exampleSite/content/gallery/hugo.md @@ -1,13 +1,18 @@ -+++ -weight = 1 -date = "2017-05-12T22:25:02-07:00" -title = "Hugo" -image = "hugo.png" -alt = "Hugo - a fast and modern static website engine" -color = "#0a1922" -linkView = "http://gohugo.io/" -linkCode = "https://github.com/spf13/hugo" -+++ +--- +weight: 10 +date: "2017-05-12T22:25:02-07:00" +title: "Hugo" +image: "hugo.png" +alt: "Hugo - a fast and modern static website engine" +color: "#0a1922" +buttons: + - icon: gift + i18n: download + url: https://gohugo.io/ + - icon: code + i18n: code + url: "https://github.com/spf13/hugo" +--- Hugo is one of the most popular open-source static site generators. With its amazing speed and flexibility, Hugo makes building websites fun again.
\ No newline at end of file diff --git a/exampleSite/content/gallery/kdevo.md b/exampleSite/content/gallery/kdevo.md index 76abfaa..eea02f4 100644 --- a/exampleSite/content/gallery/kdevo.md +++ b/exampleSite/content/gallery/kdevo.md @@ -1,13 +1,15 @@ -+++ -weight = 20 -date = "2019-05-17T22:25:16-07:00" -title = "kdevo" -# Note that this image will be loaded from the static directory because it is not available under 'assets/': -image = "images/kd.png" -alt = "kdevo" -color = "#263238" -linkView = "https://kdevo.github.io" -linkCode = "https://github.com/kdevo/" -+++ +--- +weight: 10 +date: "2019-05-17T22:25:16-07:00" +title: "KDEVO" +image: "kd.png" +alt: "kdevo" +color: "#263238" +buttons: + - i18n: view + url: "https://kdevo.github.io" + - i18n: code + url: "https://github.com/kdevo/" +--- Author of Osprey Delight.
\ No newline at end of file diff --git a/exampleSite/content/gallery/osprey-delight.md b/exampleSite/content/gallery/osprey-delight.md index b4f7bf5..e263674 100644 --- a/exampleSite/content/gallery/osprey-delight.md +++ b/exampleSite/content/gallery/osprey-delight.md @@ -1,9 +1,9 @@ --- -weight: 20 +weight: 1 date: "2019-09-18T21:57:17-07:00" title: "Osprey Delight" -image: "images/osprey-delight.png" -color: "#C0C0C0 " +image: "osprey-delight-logo.png" +color: "#ffffff" type: "github" github: repo: "kdevo/osprey" @@ -29,6 +29,5 @@ terminal: wait: 500 --- -{{! github-description !}} - -Check it out.
\ No newline at end of file +{github-description} +Check it out!
\ No newline at end of file diff --git a/exampleSite/content/gallery/osprey.md b/exampleSite/content/gallery/osprey.md index 3a1ab2f..11ba86e 100644 --- a/exampleSite/content/gallery/osprey.md +++ b/exampleSite/content/gallery/osprey.md @@ -1,12 +1,11 @@ -+++ -weight = 10 -date = "2017-05-15T21:57:17-07:00" -title = "Osprey" -imageUrl = "images/osprey.png" -color = "#F7F7F7" -linkView = "https://themes.gohugo.io/theme/osprey/" -type = "github" -[github] - repo = "tomanistor/osprey" - showInfo = true -+++ +--- +weight: 40 +date: "2017-05-15T21:57:17-07:00" +title: "Osprey" +image: "osprey-logo.png" +color: "#F7F7F7" +type: "github" +github: + repo: "tomanistor/osprey" + showInfo: true +--- diff --git a/exampleSite/content/gallery/toma-nistor.md b/exampleSite/content/gallery/toma-nistor.md index 7acf5ca..858a069 100644 --- a/exampleSite/content/gallery/toma-nistor.md +++ b/exampleSite/content/gallery/toma-nistor.md @@ -1,12 +1,15 @@ -+++ -weight = 10 -date = "2017-05-15T20:00:16-07:00" -title = "Toma Nistor" -image = "toma-nistor.png" -alt = "Toma Nistor" -color = "#212121" -linkView = "https://tomanistor.com" -linkCode = "https://github.com/tomanistor/tomanistor.com" -+++ +--- +weight: 30 +date: "2017-05-15T20:00:16-07:00" +title: "Toma Nistor" +image: "toma-nistor.png" +alt: "Toma Nistor" +color: "#212121" +buttons: + - i18n: view + url: "https://tomanistor.com" + - i18n: code + url: "https://github.com/tomanistor/tomanistor.com" +--- Author of the original Osprey theme.
\ No newline at end of file diff --git a/exampleSite/resources/_gen/assets/scss/sass/main.scss_97bc3a74098849226ebef999cbcdad23.content b/exampleSite/resources/_gen/assets/scss/sass/main.scss_97bc3a74098849226ebef999cbcdad23.content deleted file mode 100644 index 22ec9f4..0000000 --- a/exampleSite/resources/_gen/assets/scss/sass/main.scss_97bc3a74098849226ebef999cbcdad23.content +++ /dev/null @@ -1 +0,0 @@ -@font-face{font-family:'Roboto';font-style:normal;font-weight:400;src:local("Roboto"),local("Roboto-Regular"),url("./fonts/roboto/roboto-v20-latin-regular.woff2") format("woff2"),url("./fonts/roboto/roboto-v20-latin-regular.woff") format("woff")}@font-face{font-family:'Roboto Slab';font-style:normal;font-weight:400;src:local("Roboto Slab Regular"),local("RobotoSlab-Regular"),url("./fonts/roboto/roboto-slab-v9-latin-regular.woff2") format("woff2"),url("./fonts/roboto/roboto-slab-v9-latin-regular.woff") format("woff")}@font-face{font-family:'icons';font-display:swap;font-weight:normal;font-style:normal;src:url("./fonts/icons/icons.woff2?30") format("woff2"),url("./fonts/icons/icons.woff?30") format("woff")}.col-xs-offset-12,.col-xs-offset-11,.col-xs-offset-10,.col-xs-offset-9,.col-xs-offset-8,.col-xs-offset-7,.col-xs-offset-6,.col-xs-offset-5,.col-xs-offset-4,.col-xs-offset-3,.col-xs-offset-2,.col-xs-offset-1,.col-xs-offset-0,.col-xs-12,.col-xs-11,.col-xs-10,.col-xs-9,.col-xs-8,.col-xs-7,.col-xs-6,.col-xs-5,.col-xs-4,.col-xs-3,.col-xs-2,.col-xs-1,.col-xs{box-sizing:border-box;flex:0 0 auto;padding-right:0.5rem;padding-left:0.5rem}.container-fluid{margin-right:auto;margin-left:auto;padding-right:2rem;padding-left:2rem}.container{margin-right:auto;margin-left:auto}.row{box-sizing:border-box;display:flex;flex:0 1 auto;flex-direction:row;flex-wrap:wrap}.row.reverse{flex-direction:row-reverse}.col-xs{flex-grow:1;flex-basis:0;max-width:100%}.col-xs-1{flex-basis:8.33333333%;max-width:8.33333333%}.col-xs-2{flex-basis:16.66666667%;max-width:16.66666667%}.col-xs-3{flex-basis:25%;max-width:25%}.col-xs-4{flex-basis:33.33333333%;max-width:33.33333333%}.col-xs-5{flex-basis:41.66666667%;max-width:41.66666667%}.col-xs-6{flex-basis:50%;max-width:50%}.col-xs-7{flex-basis:58.33333333%;max-width:58.33333333%}.col-xs-8{flex-basis:66.66666667%;max-width:66.66666667%}.col-xs-9{flex-basis:75%;max-width:75%}.col-xs-10{flex-basis:83.33333333%;max-width:83.33333333%}.col-xs-11{flex-basis:91.66666667%;max-width:91.66666667%}.col-xs-12{flex-basis:100%;max-width:100%}.col-xs-offset-0{margin-left:0}.col-xs-offset-1{margin-left:8.33333333%}.col-xs-offset-2{margin-left:16.66666667%}.col-xs-offset-3{margin-left:25%}.col-xs-offset-4{margin-left:33.33333333%}.col-xs-offset-5{margin-left:41.66666667%}.col-xs-offset-6{margin-left:50%}.col-xs-offset-7{margin-left:58.33333333%}.col-xs-offset-8{margin-left:66.66666667%}.col-xs-offset-9{margin-left:75%}.col-xs-offset-10{margin-left:83.33333333%}.col-xs-offset-11{margin-left:91.66666667%}.start-xs{justify-content:flex-start;text-align:start}.center-xs{justify-content:center;text-align:center}.end-xs{justify-content:flex-end;text-align:end}.top-xs{align-items:flex-start}.middle-xs{align-items:center}.bottom-xs{align-items:flex-end}.around-xs{justify-content:space-around}.between-xs{justify-content:space-between}.first-xs{order:-1}.last-xs{order:1}@media only screen and (min-width: 48em){.container{width:49rem}.col-sm{box-sizing:border-box;flex:0 0 auto;padding-right:0.5rem;padding-left:0.5rem;flex-grow:1;flex-basis:0;max-width:100%}.col-sm-1{box-sizing:border-box;flex:0 0 auto;padding-right:0.5rem;padding-left:0.5rem;flex-basis:8.33333333%;max-width:8.33333333%}.col-sm-2{box-sizing:border-box;flex:0 0 auto;padding-right:0.5rem;padding-left:0.5rem;flex-basis:16.66666667%;max-width:16.66666667%}.col-sm-3{box-sizing:border-box;flex:0 0 auto;padding-right:0.5rem;padding-left:0.5rem;flex-basis:25%;max-width:25%}.col-sm-4{box-sizing:border-box;flex:0 0 auto;padding-right:0.5rem;padding-left:0.5rem;flex-basis:33.33333333%;max-width:33.33333333%}.col-sm-5{box-sizing:border-box;flex:0 0 auto;padding-right:0.5rem;padding-left:0.5rem;flex-basis:41.66666667%;max-width:41.66666667%}.col-sm-6{box-sizing:border-box;flex:0 0 auto;padding-right:0.5rem;padding-left:0.5rem;flex-basis:50%;max-width:50%}.col-sm-7{box-sizing:border-box;flex:0 0 auto;padding-right:0.5rem;padding-left:0.5rem;flex-basis:58.33333333%;max-width:58.33333333%}.col-sm-8{box-sizing:border-box;flex:0 0 auto;padding-right:0.5rem;padding-left:0.5rem;flex-basis:66.66666667%;max-width:66.66666667%}.col-sm-9{box-sizing:border-box;flex:0 0 auto;padding-right:0.5rem;padding-left:0.5rem;flex-basis:75%;max-width:75%}.col-sm-10{box-sizing:border-box;flex:0 0 auto;padding-right:0.5rem;padding-left:0.5rem;flex-basis:83.33333333%;max-width:83.33333333%}.col-sm-11{box-sizing:border-box;flex:0 0 auto;padding-right:0.5rem;padding-left:0.5rem;flex-basis:91.66666667%;max-width:91.66666667%}.col-sm-12{box-sizing:border-box;flex:0 0 auto;padding-right:0.5rem;padding-left:0.5rem;flex-basis:100%;max-width:100%}.col-sm-offset-0{box-sizing:border-box;flex:0 0 auto;padding-right:0.5rem;padding-left:0.5rem;margin-left:0}.col-sm-offset-1{box-sizing:border-box;flex:0 0 auto;padding-right:0.5rem;padding-left:0.5rem;margin-left:8.33333333%}.col-sm-offset-2{box-sizing:border-box;flex:0 0 auto;padding-right:0.5rem;padding-left:0.5rem;margin-left:16.66666667%}.col-sm-offset-3{box-sizing:border-box;flex:0 0 auto;padding-right:0.5rem;padding-left:0.5rem;margin-left:25%}.col-sm-offset-4{box-sizing:border-box;flex:0 0 auto;padding-right:0.5rem;padding-left:0.5rem;margin-left:33.33333333%}.col-sm-offset-5{box-sizing:border-box;flex:0 0 auto;padding-right:0.5rem;padding-left:0.5rem;margin-left:41.66666667%}.col-sm-offset-6{box-sizing:border-box;flex:0 0 auto;padding-right:0.5rem;padding-left:0.5rem;margin-left:50%}.col-sm-offset-7{box-sizing:border-box;flex:0 0 auto;padding-right:0.5rem;padding-left:0.5rem;margin-left:58.33333333%}.col-sm-offset-8{box-sizing:border-box;flex:0 0 auto;padding-right:0.5rem;padding-left:0.5rem;margin-left:66.66666667%}.col-sm-offset-9{box-sizing:border-box;flex:0 0 auto;padding-right:0.5rem;padding-left:0.5rem;margin-left:75%}.col-sm-offset-10{box-sizing:border-box;flex:0 0 auto;padding-right:0.5rem;padding-left:0.5rem;margin-left:83.33333333%}.col-sm-offset-11{box-sizing:border-box;flex:0 0 auto;padding-right:0.5rem;padding-left:0.5rem;margin-left:91.66666667%}.col-sm-offset-12{box-sizing:border-box;flex:0 0 auto;padding-right:0.5rem;padding-left:0.5rem}.start-sm{justify-content:flex-start;text-align:start}.center-sm{justify-content:center;text-align:center}.end-sm{justify-content:flex-end;text-align:end}.top-sm{align-items:flex-start}.middle-sm{align-items:center}.bottom-sm{align-items:flex-end}.around-sm{justify-content:space-around}.between-sm{justify-content:space-between}.first-sm{order:-1}.last-sm{order:1}}@media only screen and (min-width: 64em){.container{width:65rem}.col-md{box-sizing:border-box;flex:0 0 auto;padding-right:0.5rem;padding-left:0.5rem;flex-grow:1;flex-basis:0;max-width:100%}.col-md-1{box-sizing:border-box;flex:0 0 auto;padding-right:0.5rem;padding-left:0.5rem;flex-basis:8.33333333%;max-width:8.33333333%}.col-md-2{box-sizing:border-box;flex:0 0 auto;padding-right:0.5rem;padding-left:0.5rem;flex-basis:16.66666667%;max-width:16.66666667%}.col-md-3{box-sizing:border-box;flex:0 0 auto;padding-right:0.5rem;padding-left:0.5rem;flex-basis:25%;max-width:25%}.col-md-4{box-sizing:border-box;flex:0 0 auto;padding-right:0.5rem;padding-left:0.5rem;flex-basis:33.33333333%;max-width:33.33333333%}.col-md-5{box-sizing:border-box;flex:0 0 auto;padding-right:0.5rem;padding-left:0.5rem;flex-basis:41.66666667%;max-width:41.66666667%}.col-md-6{box-sizing:border-box;flex:0 0 auto;padding-right:0.5rem;padding-left:0.5rem;flex-basis:50%;max-width:50%}.col-md-7{box-sizing:border-box;flex:0 0 auto;padding-right:0.5rem;padding-left:0.5rem;flex-basis:58.33333333%;max-width:58.33333333%}.col-md-8{box-sizing:border-box;flex:0 0 auto;padding-right:0.5rem;padding-left:0.5rem;flex-basis:66.66666667%;max-width:66.66666667%}.col-md-9{box-sizing:border-box;flex:0 0 auto;padding-right:0.5rem;padding-left:0.5rem;flex-basis:75%;max-width:75%}.col-md-10{box-sizing:border-box;flex:0 0 auto;padding-right:0.5rem;padding-left:0.5rem;flex-basis:83.33333333%;max-width:83.33333333%}.col-md-11{box-sizing:border-box;flex:0 0 auto;padding-right:0.5rem;padding-left:0.5rem;flex-basis:91.66666667%;max-width:91.66666667%}.col-md-12{box-sizing:border-box;flex:0 0 auto;padding-right:0.5rem;padding-left:0.5rem;flex-basis:100%;max-width:100%}.col-md-offset-0{box-sizing:border-box;flex:0 0 auto;padding-right:0.5rem;padding-left:0.5rem;margin-left:0}.col-md-offset-1{box-sizing:border-box;flex:0 0 auto;padding-right:0.5rem;padding-left:0.5rem;margin-left:8.33333333%}.col-md-offset-2{box-sizing:border-box;flex:0 0 auto;padding-right:0.5rem;padding-left:0.5rem;margin-left:16.66666667%}.col-md-offset-3{box-sizing:border-box;flex:0 0 auto;padding-right:0.5rem;padding-left:0.5rem;margin-left:25%}.col-md-offset-4{box-sizing:border-box;flex:0 0 auto;padding-right:0.5rem;padding-left:0.5rem;margin-left:33.33333333%}.col-md-offset-5{box-sizing:border-box;flex:0 0 auto;padding-right:0.5rem;padding-left:0.5rem;margin-left:41.66666667%}.col-md-offset-6{box-sizing:border-box;flex:0 0 auto;padding-right:0.5rem;padding-left:0.5rem;margin-left:50%}.col-md-offset-7{box-sizing:border-box;flex:0 0 auto;padding-right:0.5rem;padding-left:0.5rem;margin-left:58.33333333%}.col-md-offset-8{box-sizing:border-box;flex:0 0 auto;padding-right:0.5rem;padding-left:0.5rem;margin-left:66.66666667%}.col-md-offset-9{box-sizing:border-box;flex:0 0 auto;padding-right:0.5rem;padding-left:0.5rem;margin-left:75%}.col-md-offset-10{box-sizing:border-box;flex:0 0 auto;padding-right:0.5rem;padding-left:0.5rem;margin-left:83.33333333%}.col-md-offset-11{box-sizing:border-box;flex:0 0 auto;padding-right:0.5rem;padding-left:0.5rem;margin-left:91.66666667%}.col-md-offset-12{box-sizing:border-box;flex:0 0 auto;padding-right:0.5rem;padding-left:0.5rem}.start-md{justify-content:flex-start;text-align:start}.center-md{justify-content:center;text-align:center}.end-md{justify-content:flex-end;text-align:end}.top-md{align-items:flex-start}.middle-md{align-items:center}.bottom-md{align-items:flex-end}.around-md{justify-content:space-around}.between-md{justify-content:space-between}.first-md{order:-1}.last-md{order:1}}@media only screen and (min-width: 75em){.container{width:76rem}.col-lg{box-sizing:border-box;flex:0 0 auto;padding-right:0.5rem;padding-left:0.5rem;flex-grow:1;flex-basis:0;max-width:100%}.col-lg-1{box-sizing:border-box;flex:0 0 auto;padding-right:0.5rem;padding-left:0.5rem;flex-basis:8.33333333%;max-width:8.33333333%}.col-lg-2{box-sizing:border-box;flex:0 0 auto;padding-right:0.5rem;padding-left:0.5rem;flex-basis:16.66666667%;max-width:16.66666667%}.col-lg-3{box-sizing:border-box;flex:0 0 auto;padding-right:0.5rem;padding-left:0.5rem;flex-basis:25%;max-width:25%}.col-lg-4{box-sizing:border-box;flex:0 0 auto;padding-right:0.5rem;padding-left:0.5rem;flex-basis:33.33333333%;max-width:33.33333333%}.col-lg-5{box-sizing:border-box;flex:0 0 auto;padding-right:0.5rem;padding-left:0.5rem;flex-basis:41.66666667%;max-width:41.66666667%}.col-lg-6{box-sizing:border-box;flex:0 0 auto;padding-right:0.5rem;padding-left:0.5rem;flex-basis:50%;max-width:50%}.col-lg-7{box-sizing:border-box;flex:0 0 auto;padding-right:0.5rem;padding-left:0.5rem;flex-basis:58.33333333%;max-width:58.33333333%}.col-lg-8{box-sizing:border-box;flex:0 0 auto;padding-right:0.5rem;padding-left:0.5rem;flex-basis:66.66666667%;max-width:66.66666667%}.col-lg-9{box-sizing:border-box;flex:0 0 auto;padding-right:0.5rem;padding-left:0.5rem;flex-basis:75%;max-width:75%}.col-lg-10{box-sizing:border-box;flex:0 0 auto;padding-right:0.5rem;padding-left:0.5rem;flex-basis:83.33333333%;max-width:83.33333333%}.col-lg-11{box-sizing:border-box;flex:0 0 auto;padding-right:0.5rem;padding-left:0.5rem;flex-basis:91.66666667%;max-width:91.66666667%}.col-lg-12{box-sizing:border-box;flex:0 0 auto;padding-right:0.5rem;padding-left:0.5rem;flex-basis:100%;max-width:100%}.col-lg-offset-0{box-sizing:border-box;flex:0 0 auto;padding-right:0.5rem;padding-left:0.5rem;margin-left:0}.col-lg-offset-1{box-sizing:border-box;flex:0 0 auto;padding-right:0.5rem;padding-left:0.5rem;margin-left:8.33333333%}.col-lg-offset-2{box-sizing:border-box;flex:0 0 auto;padding-right:0.5rem;padding-left:0.5rem;margin-left:16.66666667%}.col-lg-offset-3{box-sizing:border-box;flex:0 0 auto;padding-right:0.5rem;padding-left:0.5rem;margin-left:25%}.col-lg-offset-4{box-sizing:border-box;flex:0 0 auto;padding-right:0.5rem;padding-left:0.5rem;margin-left:33.33333333%}.col-lg-offset-5{box-sizing:border-box;flex:0 0 auto;padding-right:0.5rem;padding-left:0.5rem;margin-left:41.66666667%}.col-lg-offset-6{box-sizing:border-box;flex:0 0 auto;padding-right:0.5rem;padding-left:0.5rem;margin-left:50%}.col-lg-offset-7{box-sizing:border-box;flex:0 0 auto;padding-right:0.5rem;padding-left:0.5rem;margin-left:58.33333333%}.col-lg-offset-8{box-sizing:border-box;flex:0 0 auto;padding-right:0.5rem;padding-left:0.5rem;margin-left:66.66666667%}.col-lg-offset-9{box-sizing:border-box;flex:0 0 auto;padding-right:0.5rem;padding-left:0.5rem;margin-left:75%}.col-lg-offset-10{box-sizing:border-box;flex:0 0 auto;padding-right:0.5rem;padding-left:0.5rem;margin-left:83.33333333%}.col-lg-offset-11{box-sizing:border-box;flex:0 0 auto;padding-right:0.5rem;padding-left:0.5rem;margin-left:91.66666667%}.col-lg-offset-12{box-sizing:border-box;flex:0 0 auto;padding-right:0.5rem;padding-left:0.5rem}.start-lg{justify-content:flex-start;text-align:start}.center-lg{justify-content:center;text-align:center}.end-lg{justify-content:flex-end;text-align:end}.top-lg{align-items:flex-start}.middle-lg{align-items:center}.bottom-lg{align-items:flex-end}.around-lg{justify-content:space-around}.between-lg{justify-content:space-between}.first-lg{order:-1}.last-lg{order:1}}.col.reverse{flex-direction:column-reverse}h1{font-size:2.961rem}@media (max-width: 49.99em){h1{font-size:2.441rem}}@media (max-width: 25em){h1{font-size:2.148rem}}h2{font-size:2.221rem}@media (max-width: 49.99em){h2{font-size:1.953em}}@media (max-width: 25em){h2{font-size:1.719rem}}h3{font-size:1.666rem}@media (max-width: 49.99em){h3{font-size:1.563rem}}@media (max-width: 25em){h3{font-size:1.375rem}}small{font-size:0.8em;color:grey}.icon{font:normal normal normal 14px/1 icons;display:inline-block;font-size:inherit;text-rendering:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.icon-active{color:#0097a7}span.icon{margin-right:.3em}.icon-2x{font-size:2em}.icon-heart:before{content:'\e800'}.icon-attention-circled:before{content:'\e801'}.icon-link:before{content:'\e802'}.icon-ok-circled:before{content:'\e803'}.icon-info-circled:before{content:'\e804'}.icon-cancel-circled:before{content:'\e805'}.icon-download:before{content:'\e806'}.icon-tags:before{content:'\e807'}.icon-link-ext:before{content:'\f08e'}.icon-left-circled:before{content:'\f0a8'}.icon-right-circled:before{content:'\f0a9'}.icon-menu:before{content:'\f0c9'}.icon-money:before{content:'\f0d6'}.icon-mail-alt:before{content:'\f0e0'}.icon-terminal:before{content:'\f120'}.icon-rocket:before{content:'\f135'}.icon-space-shuttle:before{content:'\f197'}.icon-address-card:before{content:'\f2bb'}.icon-share:before{content:'\f1e0'}.icon-github:before{content:'\f09b'}.icon-github-cat:before{content:'\f113'}.icon-twitter:before{content:'\f304'}.icon-facebook:before{content:'\f308'}.icon-linkedin:before{content:'\f30c'}.icon-reddit:before{content:'\f1a2'}.icon-rss:before{content:'\f143'}.icon-youtube:before{content:'\f166'}.icon-stackoverflow:before{content:'\f16c'}.icon-instagram:before{content:'\f16d'}.icon-paypal:before{content:'\f1ed'}.icon-pulse-slow{animation:color 8s infinite;animation-direction:alternate}.icon-pulse-fast{animation:color 2s infinite;animation-direction:alternate}@keyframes color{from{color:#0097a7}to{color:#212121}}@keyframes blink{from,to{color:transparent}50%{color:#212121}}@keyframes scale-in-center{0%{transform:scale(0);opacity:1}100%{transform:scale(1);opacity:1}}@keyframes scale-out-center{0%{transform:scale(1);opacity:1}100%{transform:scale(0);opacity:1}}.cursor{animation:1.2s blink infinite}.scale-in-center{animation:scale-in-center 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both}.scale-out-center{animation:scale-out-center 0.4s cubic-bezier(0.895, 0.03, 0.685, 0.22) both}body{font-size:1.25rem;display:flex;flex-direction:column;justify-content:space-between;min-height:100vh;color:#212121;font-family:"Roboto","Rubic","Poppins","Helvetica",Arial,sans-serif;line-height:1.6}@media (max-width: 49.99em){body{font-size:1.25rem}}@media (max-width: 25em){body{font-size:1.1rem}}header{height:100vh;background-color:#fff}header div{z-index:101}header img{max-height:12rem}header h1{font-family:"Roboto","Rubic","Poppins","Helvetica",Arial,sans-serif}footer{height:14rem;background-color:#212121}footer div,footer a,footer .icon{color:#fff}strong{font-weight:600}del,s{text-decoration:line-through}em,q,dfn{font-style:italic}a{transition:color .2s ease-out;text-decoration:none}a img{border:0}a:hover{color:#0097a7}img{display:inline-block;max-width:100%;vertical-align:middle}ul,ol{margin-bottom:2rem}ul li,ol li{margin-left:1.25em}ul li code,ol li code{font-family:"Roboto Mono","Menlo","Monaco","Andale Mono","lucida console","Courier New",monospace}ul li{list-style-type:disc}.show{transition:opacity 600ms}.hide{opacity:0}.modal{display:flex;visibility:hidden;position:fixed;z-index:-1000;top:0;left:0;width:100%;height:100%;overflow:hidden;overflow-x:hidden;transition:opacity .1s ease-out;background-color:rgba(33,33,33,0.75)}.modal.active{visibility:visible;z-index:1000}.modal a:hover{color:#0097a7}.modal article a{color:#0097a7}.modal-box{position:relative;width:80%;max-width:1000px;max-height:85vh;margin:auto;border-radius:9px;background-color:#F7F7F7;box-shadow:0 0 50px 0 #212121}.modal-container{overflow:hidden;border-radius:7px}.modal-header{height:20vh;border-radius:7px}.modal-header-img-container{display:flex;align-items:center;justify-content:center;height:100%;padding:40px}.modal-header-img-container img{max-height:100%}.modal-content{max-height:calc(80vh - 20vh);padding:30px;overflow-y:auto}.term-content{max-height:calc(80vh - 20vh);overflow-y:auto}.close{position:absolute;top:10px;right:-4px;color:#F7F7F7;font-size:30px;font-weight:bold;line-height:.5;transition:color .2s ease-out}.close:hover,.close:focus{color:#0097a7;text-decoration:none;cursor:pointer}.repo-info{color:grey;font-size:0.65em}.repo-info a{color:grey}.repo-info .icon{color:grey}.about{width:100%;background-color:#F7F7F7}.about p{font-size:1.666rem;margin-top:2rem}@media (max-width: 49.99em){.about p{font-size:1.563rem}}@media (max-width: 25em){.about p{font-size:1.375rem}}.about a{background-image:linear-gradient(#0097a7, #0097a7);background-repeat:repeat-x;background-position:0 95%;background-size:2px 3px;text-decoration:none;text-shadow:0.03em 0 #fff,-0.03em 0 #fff,0 0.03em #fff,0 -0.03em #fff,0.06em 0 #fff,-0.06em 0 #fff,0.09em 0 #fff,-0.09em 0 #fff,0.12em 0 #fff,-0.12em 0 #fff,0.15em 0 #fff,-0.15em 0 #fff,0.03em 0.075em #fff,-0.03em 0.075em #fff,0.06em 0.075em #fff,-0.06em 0.075em #fff,0.09em 0.075em #fff,-0.09em 0.075em #fff,0.12em 0.075em #fff,-0.12em 0.075em #fff,0.15em 0.075em #fff,-0.15em 0.075em #fff}.about a:hover{color:#0097a7}.gallery .gallery-item{position:relative;width:50%;padding:0}.gallery .gallery-item::after{content:"";display:block;padding-bottom:100%}.gallery .gallery-item:hover .overlay{visibility:visible;opacity:1}.gallery .overlay{visibility:hidden;position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;transition:.25s ease-out;opacity:0;background-color:#212121;cursor:pointer}.gallery .overlay a{color:#fff}.gallery .overlay a:hover{color:#0097a7}.gallery .overlay h2{margin:2rem;color:#fff}.gallery .gallery-img-container{display:flex;position:absolute;align-items:center;justify-content:center;width:100%;height:100%}.gallery img{padding:6rem}.gallery .gallery-modal-link{display:flex;position:absolute;align-items:center;justify-content:center;width:100%;height:100%}img.lazyload:not([src]){visibility:hidden}.chroma{color:#93a1a1;background-color:#002b36}.chroma .x{color:#cb4b16}.chroma .lntd{vertical-align:top;padding:0;margin:0;border:0}.chroma .lntable{border-spacing:0;padding:0;margin:0;border:0;width:auto;overflow:auto;display:block}.chroma .hl{display:block;width:100%;background-color:#ffffcc}.chroma .lnt{margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#495050}.chroma .ln{margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#495050}.chroma .k{color:#719e07}.chroma .kc{color:#cb4b16}.chroma .kd{color:#268bd2}.chroma .kn{color:#719e07}.chroma .kp{color:#719e07}.chroma .kr{color:#268bd2}.chroma .kt{color:#dc322f}.chroma .nb{color:#b58900}.chroma .bp{color:#268bd2}.chroma .nc{color:#268bd2}.chroma .no{color:#cb4b16}.chroma .nd{color:#268bd2}.chroma .ni{color:#cb4b16}.chroma .ne{color:#cb4b16}.chroma .nf{color:#268bd2}.chroma .nt{color:#268bd2}.chroma .nv{color:#268bd2}.chroma .s{color:#2aa198}.chroma .sa{color:#2aa198}.chroma .sb{color:#586e75}.chroma .sc{color:#2aa198}.chroma .dl{color:#2aa198}.chroma .s2{color:#2aa198}.chroma .se{color:#cb4b16}.chroma .si{color:#2aa198}.chroma .sx{color:#2aa198}.chroma .sr{color:#dc322f}.chroma .s1{color:#2aa198}.chroma .ss{color:#2aa198}.chroma .m{color:#2aa198}.chroma .mb{color:#2aa198}.chroma .mf{color:#2aa198}.chroma .mh{color:#2aa198}.chroma .mi{color:#2aa198}.chroma .il{color:#2aa198}.chroma .mo{color:#2aa198}.chroma .o{color:#719e07}.chroma .ow{color:#719e07}.chroma .c{color:#586e75}.chroma .ch{color:#586e75}.chroma .cm{color:#586e75}.chroma .c1{color:#586e75}.chroma .cs{color:#719e07}.chroma .cp{color:#719e07}.chroma .cpf{color:#719e07}.chroma .gd{color:#dc322f}.chroma .ge{font-style:italic}.chroma .gr{color:#dc322f;font-weight:bold}.chroma .gh{color:#cb4b16}.chroma .gi{color:#719e07}.chroma .gs{font-weight:bold}.chroma .gu{color:#268bd2}pre code{color:inherit;font-family:"Roboto Mono","Menlo","Monaco","Andale Mono","lucida console","Courier New",monospace}pre{margin-top:8px;padding:16px;border-radius:4px;margin-bottom:2rem;overflow:auto;word-wrap:normal}.mono,tt{font-family:"Roboto Mono","Menlo","Monaco","Andale Mono","lucida console","Courier New",monospace}q::before{content:"\201C"}q::after{content:"\201D"}blockquote::after,blockquote::before{content:"\201C";color:#0097a7;font-family:"Roboto Slab","Bitter","Ubuntu",Georgia,serif;font-size:35px}blockquote{padding:25px;font-family:"Roboto Slab","Bitter","Ubuntu",Georgia,serif;text-align:center}blockquote p{display:inline-block;font-style:italic}blockquote::after{content:"\201D"}.posts-list{margin:0 0 2rem}.sub-header,time{font-size:1.25rem;margin-bottom:2rem;color:#4E6B6C}@media (max-width: 49.99em){.sub-header,time{font-size:1.25rem}}@media (max-width: 25em){.sub-header,time{font-size:1.1rem}}.content{width:100%;text-align:left}.content time{margin-left:3px}.pagination{margin:50px 0 0}.pagination:nth-child(2){float:right}.blog{display:flex;min-height:100vh;background-color:#fff}.blog h2{margin-bottom:0}.blog h3{margin:0 0 4rem;font-family:"Roboto","Rubic","Poppins","Helvetica",Arial,sans-serif}[data-termynal]{max-width:100%;background:#212121;color:#F7F7F7;font-size:0.8em;font-family:"Roboto Mono","Menlo","Monaco","Andale Mono","lucida console","Courier New",monospace;padding:75px 45px 35px;position:relative;-webkit-box-sizing:border-box;box-sizing:border-box}[data-termynal]:before{content:'';position:absolute;top:15px;left:15px;display:inline-block;width:15px;height:15px;border-radius:50%;background:#d9515d;-webkit-box-shadow:25px 0 0 #f4c025,50px 0 0 #0097a7;box-shadow:25px 0 0 #f4c025,50px 0 0 #0097a7}[data-termynal]:after{content:"term";position:absolute;color:#4E6B6C;top:5px;left:0;width:100%;text-align:center}[data-ty]{display:block;line-height:2;color:#F7F7F7}[data-ty]:before{content:'';display:inline-block;vertical-align:middle}[data-ty="input"]:before,[data-ty-prompt]:before{margin-right:0.75em;color:#4E6B6C}[data-ty="input"]:before{content:'$'}[data-ty][data-ty-prompt]:before{content:attr(data-ty-prompt)}[data-ty-cursor]:after{content:attr(data-ty-cursor);font-family:monospace;margin-left:0.5em;-webkit-animation:blink 1s infinite;animation:blink 1s infinite}@-webkit-keyframes blink{50%{opacity:0}}@keyframes blink{50%{opacity:0}}*{box-sizing:border-box;margin:0;padding:0;border:0;font:inherit;color:inherit;vertical-align:baseline}*::before,*::after{box-sizing:border-box}html{box-sizing:inherit;overflow-x:hidden;scroll-behavior:smooth}footer{padding-bottom:1em}footer .icon{margin-top:1em;margin-bottom:1em;font-size:2em}footer a>.icon{color:#fff}@media (max-width: 47.99em){body .container{padding:8rem 2rem}nav div:not(:first-child):not(:last-child){display:none}nav div.nav-toggle a{display:inline-block}.mobile-hidden{visibility:hidden}}@media (max-width: 25em){body .container{padding:8rem 2rem}nav div.logo,nav div.nav-toggle{max-width:50% !important}}nav{position:absolute;z-index:100;bottom:0;width:100%;height:4rem;background-color:#fff;text-align:center}nav h3{margin:0;font-family:"Roboto","Rubic","Poppins","Helvetica",Arial,sans-serif;font-weight:600;letter-spacing:2px;text-transform:uppercase}nav img{display:inline-block;max-width:10em;max-height:2.5em;vertical-align:middle}nav .logo,nav .nav-toggle{visibility:hidden}nav .nav-toggle a{display:none}nav .nav-item-active a{color:#0097a7}.nav-shadow{box-shadow:0 3px 4px rgba(0,0,0,0.2)}.nav-fixed{position:fixed;top:0;bottom:auto}.nav-full{position:fixed;top:0;right:-100vw;bottom:0;width:100vw;height:100%;transform:translate(0, 0);transition:.3s ease-out;background-color:#212121}.nav-full a,.nav-full .icon{color:#fff}.nav-full a:hover,.nav-full .icon:hover{color:#0097a7}.nav-full.active{transform:translate(-100vw, 0)}main{transition:.3s ease-in;background-color:#F7F7F7}main.active{transform:translate(-100vw, 0)}.container{max-width:43.75rem;margin:auto;padding:8rem 0 8rem}p{margin-bottom:2rem}p code{font-family:"Roboto Mono","Menlo","Monaco","Andale Mono","lucida console","Courier New",monospace}h1,h2,h3{margin-bottom:2rem;font-family:"Roboto Slab","Bitter","Ubuntu",Georgia,serif;letter-spacing:2px;line-height:1.45}h1 a,h2 a,h3 a{text-decoration:none}.home-logo{margin-bottom:2rem}a>.icon{color:#212121;transition:color .2s ease-out}a>.icon:not(.icon-menu):hover,a>.icon:not(.icon-menu):focus{color:#0097a7}.full{top:0;bottom:0;height:100vh}.contact{width:100%;padding-bottom:4rem;background-color:#F7F7F7}.contact form{margin-top:2rem}.contact .contact-submit{position:relative}.contact #form-submit{display:block;width:50%;margin:0 auto}.contact #form-thankyou,.contact #form-sending,.contact #form-error{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%)}input,textarea,button,select{width:100%;margin:8px 0;padding:10px;border-width:1px;border-style:solid;border-radius:3px;border-color:#F7F7F7;background-color:#fff;color:#212121}input[type="submit"],textarea[type="submit"],button[type="submit"],select[type="submit"]{transition:.4s ease-out;background-color:#4E6B6C;color:#fff}input[type="submit"]:hover,textarea[type="submit"]:hover,button[type="submit"]:hover,select[type="submit"]:hover{background-color:#0097a7;color:#fff;cursor:pointer}input .icon,textarea .icon,button .icon,select .icon{color:#fff}button{white-space:nowrap}textarea{min-height:8rem;overflow:auto} diff --git a/exampleSite/resources/_gen/assets/scss/sass/main.scss_97bc3a74098849226ebef999cbcdad23.json b/exampleSite/resources/_gen/assets/scss/sass/main.scss_97bc3a74098849226ebef999cbcdad23.json deleted file mode 100644 index 9971233..0000000 --- a/exampleSite/resources/_gen/assets/scss/sass/main.scss_97bc3a74098849226ebef999cbcdad23.json +++ /dev/null @@ -1 +0,0 @@ -{"Target":"style.8bf9e65afd7249b538482c017b52bc4aab6c35fb771c80a22694935428991e48.css","MediaType":"text/css","Data":{"Integrity":"sha256-i/nmWv1ySbU4SCwBe1K8SqtsNft3HICiJpSTVCiZHkg="}}
\ No newline at end of file diff --git a/MOTIVATION.md b/history.md index eb92256..eb92256 100644 --- a/MOTIVATION.md +++ b/history.md diff --git a/i18n/de.toml b/i18n/de.toml index fe13f23..6c05f34 100644 --- a/i18n/de.toml +++ b/i18n/de.toml @@ -1,42 +1,43 @@ [view] -other = "Anzeigen" +other = "Ansehen" [code] other = "Code" +[repo] +other = "Repository" +[download] +other = "Herunterladen" [viewAll] -other = "Alles anzeigen" +other = "Alles ansehen" [letsChat] other = "Kontakt" [name] -other = "Name" +other = "Dein Name" [email] -other = "Email" +other = "E-Mail Adresse" [subject] other = "Betreff" [message] -other = "Nachricht" +other = "Deine Nachricht" [send] -other = "Sende" +other = "Senden" [thanksForYourEmail] other = "Danke für deine Nachricht!" +[errorWhileSendingEmail] +other = "Sorry, die Nachricht konnte nicht gesendet werden. Bitte Seite neu laden." +[sendingEmail] +other = "Nachricht wird geliefert..." [minuteRead] -one = "Eine Minute zu lesen" -other = "{{.Count}} Minuten zu lesen" +one = "Eine Minute Lesezeit" +other = "{{.Count}} Minuten Lesezeit" [latestPosts] -other = "Letzte Posts" +other = "Neueste Beiträge" [enableJavaScript] other = "Bitte aktiviere JavaScript um die Kommentare anzuzeigen von" -[404Message] -other = "WAS HAST DU GETAN?!" [themeDevelopedBy] other = "Theme entwickelt von" [copyright] other = "Copyright" - -[generic] -other = "Generic request" -[coop] -other = "Cooperation" -[business] -other = "Business-related" -[project] -other = "Project"
\ No newline at end of file +[noJsMsg] +other = "Aktivieren Sie bitte JavaScript für die bestmögliche Erfahrung." +[nojsForm] +other = "Bitte aktivieren Sie JavaScript um das Kontaktformular zu nutzen."
\ No newline at end of file diff --git a/i18n/en.toml b/i18n/en.toml index 9ff16d0..029bb87 100644 --- a/i18n/en.toml +++ b/i18n/en.toml @@ -23,7 +23,7 @@ other = "Send" [thanksForYourEmail] other = "Thanks for your message!" [errorWhileSendingEmail] -other = "Oops, we couldn't send your message. Please reload." +other = "Sorry, we couldn't send your message! Please reload." [sendingEmail] other = "Deploying your message..." [minuteRead] @@ -33,25 +33,11 @@ other = "{{.Count}} minutes read" other = "Latest Posts" [enableJavaScript] other = "Please enable JavaScript to view comments powered by" -[404Message] -other = "WHAT DID YOU DO?!" [themeDevelopedBy] other = "Theme developed by" [copyright] other = "Copyright" -[facebook] -other = "Facebook" -[github] -other = "GitHub" -[linkedin] -other = "LinkedIn" -[twitter] -other = "Twitter" -[instagram] -other = "Instagram" -[stackoverflow] -other = "StackOverflow" [noJsMsg] -other = "Oh, but first - please enable JavaScript in your browser. Otherwise, your expierence will be very limited!" +other = "Please enable JavaScript for the full experience!" [nojsForm] other = "Please enable JavaScript to use the contact form."
\ No newline at end of file diff --git a/layouts/_default/single.html b/layouts/_default/single.html index ec488c6..01da386 100644 --- a/layouts/_default/single.html +++ b/layouts/_default/single.html @@ -30,7 +30,9 @@ </div> </section> <br> + {{ if .Site.DisqusShortname -}} {{ partial "disqus" . }} + {{- end }} </section> </main> diff --git a/layouts/gallery/list.html b/layouts/gallery/list.html index cd213cf..f58dc46 100644 --- a/layouts/gallery/list.html +++ b/layouts/gallery/list.html @@ -1 +1 @@ -<meta http-equiv="refresh" content="0; url={{ .Site.BaseURL }}"> +<meta http-equiv="refresh" content="0; url={{ (index (where .Site.Menus.main "Identifier" "==" "gallery") 0).URL }}"/> diff --git a/layouts/gallery/single.html b/layouts/gallery/single.html index cd213cf..9dee0ae 100644 --- a/layouts/gallery/single.html +++ b/layouts/gallery/single.html @@ -1 +1 @@ -<meta http-equiv="refresh" content="0; url={{ .Site.BaseURL }}"> +<meta http-equiv="refresh" content="0; url={{ (printf "%s#%s" .Site.BaseURL .File.BaseFileName) }}"/> diff --git a/layouts/index.html b/layouts/index.html index 0fb7787..a842d47 100644 --- a/layouts/index.html +++ b/layouts/index.html @@ -1,32 +1,26 @@ <!DOCTYPE html> -<html lang="{{ .Site.LanguageCode }}"> +<html lang="{{ .Site.LanguageCode }}" class="no-js"> {{ partial "head.html" . }} <body> {{ partial "body-top" . }} <main> - <!-- About --> - {{ partial "about.html" . }} - - <!-- Gallery --> - {{ if not (eq (len (where .Site.RegularPages "Section" "gallery")) 0) }} - {{ partial "gallery.html" . }} - {{ partial "modals.html" . }} - {{ end }} - - <!-- Blog --> - {{ if .Site.Params.Feat.useBlog -}} - {{ if not (eq (len (where .Site.RegularPages "Section" "blog")) 0) }} - {{ partial "blog.html" . }} - {{ if .Site.Params.enforceSinglePage -}} - {{ warnf "enforceSinglePage and useBlog are both set to true. This is very likely not what you want (blog posts will always redirect to main page)"}} - + {{ range $i, $m := .Site.Menus.main -}} + {{ $partial := printf "partials/sections/%s.html" $m.Identifier }} + {{ if templates.Exists $partial }} + <section class="{{ .Identifier }}" id="{{ replace (replace .URL "/" "") "#" "" }}"> + {{ $page := $m.Page }} + {{ if eq $page nil -}} + {{ $page = $.Site.GetPage .Identifier }} + {{- end }} + {{ partial $partial $page }} + </section> + {{ else if .Page }} + <section class="default" id="{{ replace (replace .URL "/" "") "#" "" }}"> + {{ partial "partials/sections/default.html" $m.Page }} + </section> {{- end }} - {{ end }} - {{ end }} - - <!-- Contact --> - {{ partial "contact.html" . }} + {{- end }} </main> {{ partial "footer.html" . }} diff --git a/layouts/partials/about.html b/layouts/partials/about.html deleted file mode 100644 index 78b98bd..0000000 --- a/layouts/partials/about.html +++ /dev/null @@ -1,20 +0,0 @@ -{{ $directory := "content/" }} -{{ $filename := "about.md" }} -{{ if (where (readDir $directory) "Name" $filename) -}} - <section class="about" id="about"> - <div class="container middle-xs"> - <div class="row center-xs"> - <div class="col-xs-12"> - <h1>{{ with $.Site.GetPage "page" "about" }}{{ .Title }}{{ end }}</h1> - </div> - </div> - <div class="row center-xs"> - <div class="col-xs-12 middle-xs"> - {{ with $.Site.GetPage "page" "about" -}} - {{ .Content }} - {{- end }} - </div> - </div> - </div> - </section> -{{- end }} diff --git a/layouts/partials/blog.html b/layouts/partials/blog.html deleted file mode 100644 index 374ef0d..0000000 --- a/layouts/partials/blog.html +++ /dev/null @@ -1,22 +0,0 @@ -<section class="blog" id="blog"> - <div class="container"> - <div class="row center-xs"> - <div class="col-xs-12"><h1>{{ i18n "latestPosts" }}</h1></div> - </div> - <div class="row center-xs"> - <div class="col-xs-12 posts-list"> - {{ range first 5 (where .Site.RegularPages "Section" "blog") }} - <article> - <h2><a href="{{ .Permalink }}">{{ .Title }}</a></h2> - <div class=sub-header> - {{ .Date.Format (.Site.Params.dateform | default "January 2, 2006") }} · {{ i18n "minuteRead" .ReadingTime }} - </div> - </article> - {{ end }} - </div> - </div> - <div class="row center-xs"> - <div class="col-xs-12"><h3><a href="{{ "blog/" | relLangURL }}">{{ i18n "viewAll" }}</a></h3></div> - </div> - </div> -</section> diff --git a/layouts/partials/body-bottom.html b/layouts/partials/body-bottom.html index 71610b4..f09ba75 100644 --- a/layouts/partials/body-bottom.html +++ b/layouts/partials/body-bottom.html @@ -1,23 +1,27 @@ -{{ $scripts := slice }} -{{ $scripts = $scripts | append (resources.Get "js/src/misc.js") }} -{{ if .Site.Params.Feat.useTermynal -}} -{{ $scripts = $scripts | append (resources.Get "js/src/termynal.js" | resources.ExecuteAsTemplate "js/src/termynal.js" .) }} -{{- end }} -{{ if not (eq (len (where .Site.RegularPages "Section" "gallery")) 0) -}} - {{ $scripts = $scripts | append (resources.Get "js/src/modal.js" | resources.ExecuteAsTemplate "js/src/modal.js" .) }} -{{- end }} -{{ $scripts = $scripts | append (resources.Get "js/src/nav.js" | resources.ExecuteAsTemplate "js/src/nav.js" .) }} -{{ if (.Site.Params.Feat.ajaxBasin) -}} -{{ $scripts = $scripts | append (resources.Get "js/src/contact.js" | resources.ExecuteAsTemplate "js/src/contact.js" .) }} -{{- end }} -{{ if .Site.Params.Feat.useBlog -}} - <!-- If using the blog, it is probably worth it to serve a fingerprinted bundle (more page navigations/reloads) --> - <script src="{{ ($scripts | resources.Concat "js/bundle.js" | minify | fingerprint).Permalink }}" type="text/javascript"></script> - <script>handleNavBar({{ .IsHome }})</script> +{{ $buildOptions := dict "minify" true "target" "es2015" }} +{{ if .IsHome }} + {{ $scripts := slice }} + {{ $scripts = $scripts | append (resources.Get "js/src/base.js") }} + + {{ if .Site.Params.Feat.useTermynal -}} + {{ $scripts = $scripts | append (resources.Get "js/src/termynal.js" | resources.ExecuteAsTemplate "js/src/termynal.js" .) }} + {{- end }} + + {{ if not (eq (len (where .Site.RegularPages "Section" "gallery")) 0) -}} + {{ $scripts = $scripts | append (resources.Get "js/src/modal.js" | resources.ExecuteAsTemplate "js/src/modal.js" .) }} + {{- end }} + + {{ $scripts = $scripts | append (resources.Get "js/src/nav.js" | resources.ExecuteAsTemplate "js/src/nav.js" .) }} + {{ $scripts = $scripts | append (resources.Get "js/src/home.js") }} + + {{ if (.Site.Params.Feat.ajaxBasin) -}} + {{ $scripts = $scripts | append (resources.Get "js/src/contact.js" | resources.ExecuteAsTemplate "js/src/contact.js" .) }} + {{- end }} + {{ $content := ($scripts | resources.Concat "js/bundle-home.js" | js.Build $buildOptions).Content }} + {{ if (gt (len $content) 6144) -}} {{ warnf "Performance: inlined JS is %dKB" (len $content) }} {{- end }} + <script>{{ $content | safeJS }}</script> {{- else -}} - <!-- If not using the blog at all, serving the JS inline will reduce the request count and is probably the best option --> - <script> - {{ ($scripts | resources.Concat "js/bundle.js" | minify).Content | safeJS }} - handleNavBar({{ .IsHome }}) - </script> -{{- end }} + {{ $scripts := slice (resources.Get "js/src/base.js") (resources.Get "js/src/nav.js") }} + {{ $content := ($scripts | resources.Concat "js/bundle-blog.js" | js.Build $buildOptions).Content }} + <script>{{ $content | safeJS }}</script> +{{ end }} diff --git a/layouts/partials/body-top.html b/layouts/partials/body-top.html index 787ecb2..fa854a6 100644 --- a/layouts/partials/body-top.html +++ b/layouts/partials/body-top.html @@ -6,36 +6,58 @@ {{ end }} {{ if .IsHome }} - <header class="row middle-xs center-xs"> + <header class="row middle-xs center-xs bg lazyload"> <div class="col-xs-12"> - <div class="row middle-xs center-xs"> - <div class="col-xs-12"><img {{ if .Site.Params.Feat.lazyLoading }}data-src="{{ .Site.Params.logoBig }}" onclick="onLogoClick()" lazyload="on"{{ else }}src="{{ .Site.Params.logoBig }}"{{ end }} alt="{{ .Site.Title }}" class="home-logo {{ if .Site.Params.Feat.lazyLoading }}lazyload{{ end }}"></div> - </div> - <div class="row middle-xs center-xs"> - <div class="col-xs-12"> - <h1>{{ .Site.Params.tagline | markdownify }}<span class="cursor">|</span></h1> + {{ partial "logo-img.html" . }} + {{ with .Site.Params.mdTagline -}} + {{ (replace (. | markdownify) "{cursor}" "<span class=\"cursor\">|</span>") | safeHTML }} + {{- else -}} + <h1>{{ .Site.Params.tagline }}<span class="cursor">|</span></h1> + {{- end }} <noscript> - <span class="icon icon-attention-circled icon-2x" style="color:red"></span> - <h1>{{ i18n "noJsMsg" }}</h1> + <span class="icon icon-attention icon-2x" style="color:red"></span> + <h2>{{ i18n "noJsMsg" }}</h2> </noscript> </div> - </div> - </div> </header> {{ end }} -<nav class="row middle-xs center-xs"> - <div class="col-xs-6 col-sm-1 logo"> - <a href="{{ "#" | relLangURL }}"><img {{ if .Site.Params.Feat.lazyLoading }}data-src="{{ .Site.Params.logoSmall }}" class="lazyload" lazyload="on"{{ else }}src="{{ .Site.Params.logoSmall }}"{{ end }} alt="{{ .Site.Title }}"></a> +<nav class="row middle-xs center-xs {{ if not .IsHome -}} nav-fixed nav-shadow {{- end }}"> + <div class="col-xs-6 col-sm-1 logo" style="{{ if not .IsHome }}visibility: visible;{{- end }}"> + <a href="{{ "#" | relLangURL }}"> + {{ $scratch := newScratch }} + {{ $imgSize := default "96x" .Site.Params.Image.NavLogo.resize }} + {{ $resizeOptions := default "q90 Gaussian" .Site.Params.Image.NavLogo.resizeOptions }} + {{ with (resources.Get .Site.Params.logoSmall) -}} + {{ $img := (slice (.Resize (printf "%s %s" $imgSize $resizeOptions))) | resources.Concat (printf "navlogo%s" (path.Ext .)) }} + {{ $scratch.Set "img" $img.Permalink }} + {{ $scratch.Set "imgW" .Width }} + {{ $scratch.Set "imgH" .Height }} + {{- else -}} + {{ $scratch.Set "img" .Site.Params.logoSmall }} + {{- end }} + <img + {{ if .Site.Params.Feat.useLazySizes }} + data-src="{{ $scratch.Get "img" }}" + class="lazyload" + {{ else }} + src="{{ $scratch.Get "img" }}" + loading="lazy" + {{ end }} + alt="Home" + {{ with $scratch.Get "imgH" -}} height="{{ . }}" {{- end }} + {{ with $scratch.Get "imgW" }} width="{{ . }}" {{ end }} + > + </a> </div> {{ range .Site.Menus.main }} <div class="col-xs-3 col-sm-2 nav-item"> <h3><a href="{{ .URL }}">{{ .Pre }}{{ .Name }}</a></h3> </div> {{ end }} - <div class="col-xs-6 col-sm-1 nav-toggle"> + <div class="col-xs-6 col-sm-1 nav-toggle" style="{{ if not .IsHome -}} visibility: visible; {{- end }}"> <a href="" class="nav-icon" onclick="return false"> - <i id="open" class="icon icon-2x icon-menu"></i> + <i class="icon icon-2x icon-menu"></i> </a> </div> </nav> diff --git a/layouts/partials/contact.html b/layouts/partials/contact.html deleted file mode 100644 index 3c89d0a..0000000 --- a/layouts/partials/contact.html +++ /dev/null @@ -1,43 +0,0 @@ -{{ if (.Site.Params.Feat.ajaxBasin) }} -<section class="contact" id="contact"> - <div class="container"> - - <div class="row center-xs"> - <div class="col-xs-12"> - <h1><span class="icon icon-mail-alt"></span>{{ i18n "letsChat" }}</h1> - <noscript>{{ i18n "nojsForm" }}</noscript> - </div> - </div> - - <form id="form-contact" action="https://formspree.io" method="POST"> - <div class="row center-xs"> - <div class="col-xs-12 col-sm-6"><input type="text" name="name" aria-label="name" placeholder="{{ i18n "name" }}" required></div> - <div class="col-xs-12 col-sm-6"><input type="email" id="email" name="email" aria-label="email address" placeholder="{{ i18n "email" }}" required></div> - {{ if isset .Site.Params.Contact "select" -}} - <div class="col-xs-12 col-sm-6"> - <select name="matter" required aria-label="email matter"> - {{ range .Site.Params.Contact.select -}} - <option value="{{ . }}">{{ i18n . }}</option> - {{- end }} - </select> - </div> - {{- end }} - <div class="col-xs-12{{ if isset .Site.Params.Contact "select" }} col-sm-6{{ end }}"><input type="text" name="_subject" aria-label="email subject" placeholder="{{ i18n "subject" }}" required></div> - <div class="col-xs-12"> - <textarea name="message" aria-label="Please enable JS" required></textarea> - </div> - <div class="col-xs-12"> - <textarea name="message2" aria-label="email message" placeholder="{{ i18n "message" }}" required hidden></textarea> - </div> - <div class="col-xs-12 contact-submit"> - <input id="form-submit" type="submit" value="{{ i18n "send" }}"> - <span id="form-sending" hidden><span class="icon icon-rocket"></span>{{ i18n "sendingEmail" }}</span> - <span id="form-thankyou" hidden><span class="icon icon-ok-circled"></span>{{ i18n "thanksForYourEmail" }}</span> - <span id="form-error" hidden><span class="icon icon-attention-circled"></span>{{ i18n "errorWhileSendingEmail" }}</span> - </div> - </div> - </form> - - </div> -</section> -{{ end }} diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html index 58d9ff0..a42e3d0 100644 --- a/layouts/partials/footer.html +++ b/layouts/partials/footer.html @@ -1,21 +1,25 @@ -<footer class="row middle-xs center-xs"> - {{ range $name, $url := .Site.Params.Social -}} +<footer> + <div class="row center-xs social"> + {{ range .Site.Params.Social -}} <div class="col-xs-2"> - <a target="_blank" rel="noopener" href="{{ $url }}"><i class="icon icon-{{ $name }}"></i></a> + <a target="_blank" rel="noopener" href="{{ .url }}"><i class="icon icon-{{ .type }}"></i></a> </div> {{- end }} + </div> {{ if (.Site.Params.copyright) -}} - <div class="col-xs-12"> + <div class="row center-xs"> + <div class="col-xs"> <small> {{ if .Site.Params.copyright }} - {{ i18n "copyright" }} © {{ now.Format "2006" }} {{ .Site.Title }} + {{ i18n "copyright" }} © {{ now.Format "2006" }} {{ .Site.Title }} {{ end }} {{ if or (.Site.Params.credit) (eq (isset .Site.Params "credit") false) -}} - <div class="col-xs-12"> - <small>Theme: <a href="https://github.com/kdevo/osprey-delight" target="_blank">osprey-delight</a> (fork of <a href="https://github.com/tomanistor/osprey" target="_blank">osprey</a>).</small> + <div class="col-xs"> + <small>Theme: <a href="https://github.com/kdevo/osprey-delight" target="_blank" rel="noopener">Osprey Delight</a></small> </div> {{- end }} </small> </div> + </div> {{- end }} </footer> diff --git a/layouts/partials/gallery-box.html b/layouts/partials/gallery-box.html deleted file mode 100644 index b6326b8..0000000 --- a/layouts/partials/gallery-box.html +++ /dev/null @@ -1,10 +0,0 @@ -<div class="gallery-img-container">{{ partial "gallery-img" . }}</div> - <div class="row middle-xs center-xs overlay"> - {{ partial "gallery-link.html" . }} - <h2>{{ .Title }} - {{ with .Params.subtitle }} - <br> - <small>{{ . }}</small> - {{- end }} - </h2> - </div>
\ No newline at end of file diff --git a/layouts/partials/gallery-img.html b/layouts/partials/gallery-img.html deleted file mode 100644 index 775c9a8..0000000 --- a/layouts/partials/gallery-img.html +++ /dev/null @@ -1,27 +0,0 @@ -{{ $scratch := newScratch }} -{{ with .Params.image -}} - {{ with (resources.Get .) -}} - {{/* TODO(kdevo): Make normalizing configurable */}} - {{ $image := .Resize "x300" }} - {{ $scratch.Set "img" $image.Permalink }} - {{/* $preview := .Fit "50x50 q25" */}} - {{/* $scratch.Set "imgPreview" $preview.Permalink */}} - {{- else -}} - {{ $scratch.Set "img" (. | absURL) }} - {{- end }} -{{- else -}} - {{ with .Params.imageUrl }} - {{ $scratch.Set "img" (. | absURL) }} - {{- else -}} - {{ with .Params.github.repo -}} - {{ $scratch.Set "img" ((printf "https://raw.githubusercontent.com/%s/master/.github/logo.png" .) | absURL) }} - {{- end }} - {{- end }} -{{- end }} -<img -{{ if .Site.Params.Feat.lazyLoading }} -data-src="{{ $scratch.Get "img" }}" class="lazyload" src="{{ $scratch.Get "imgPreview" }}" -{{ else }} -src="{{ $scratch.Get "img" }}" -{{ end }} -{{ if .Params.alt }}alt="{{ .Params.alt }}"{{ end }}>
\ No newline at end of file diff --git a/layouts/partials/gallery-link.html b/layouts/partials/gallery-link.html deleted file mode 100644 index 77904eb..0000000 --- a/layouts/partials/gallery-link.html +++ /dev/null @@ -1 +0,0 @@ -<a href="#{{ .Scratch.Get "$modalID" }}" data-modal="{{ .Scratch.Get "$modal" }}" class="gallery-modal-link" id="{{ .Scratch.Get "$modalID" }}"></a>
\ No newline at end of file diff --git a/layouts/partials/gallery.html b/layouts/partials/gallery.html deleted file mode 100644 index 9431ae2..0000000 --- a/layouts/partials/gallery.html +++ /dev/null @@ -1,67 +0,0 @@ -<section class="gallery" id="work"> - <div class="row"> - - - {{ $gallery := (where .Site.RegularPages "Section" "gallery") }} - {{ $galleryTotal := len $gallery }} - {{ range $gallery }} - <!-- Scratch is used to set page-scoped variable outside of this loop--> - {{ .Scratch.Set "$modalID" .File.BaseFileName }} - {{ end }} - - - {{ if modBool $galleryTotal 2 }} - <!-- If gallery is an even total, all items display evenly in grid columns and rows: --> - {{ range $gallery }} - <!-- If gallery items are greater than 7 and are divisible by 4, - they will appear in columns of 4, else in columns of 2 or 3 --> - <div class="gallery-item col-xs-12 - {{- if gt $galleryTotal 1 }} col-md-6 - {{- if gt $galleryTotal 7 }} - {{- if modBool $galleryTotal 4 }} col-lg-3 - {{- else }} col-lg-4 - {{- end }} - {{- end }} - {{- end }}" onclick {{ if .Params.color }}style="background-color:{{ .Params.color }}"{{ end }}> - {{ partial "gallery-box.html" . }} - </div> - {{ end }} - {{ else }} - <!-- If gallery is an odd total --> - - <!-- If gallery is only one item, display it fully --> - {{ if eq $galleryTotal 1 -}} - {{ range first 3 $gallery }} - <div class="gallery-item col-xs-12" onclick {{ if .Params.color }}style="background-color:{{ .Params.color }}"{{ end }}> - {{ partial "gallery-box.html" . }} - </div> - {{ end }} - {{- end }} - - <!-- If gallery is greater than 2 items, first 3 items display together on first row --> - {{ if gt $galleryTotal 2 -}} - {{ range first 3 $gallery }} - <div class="gallery-item col-xs-12 col-md-4" onclick {{ if .Params.color }}style="background-color:{{ .Params.color }}"{{ end }}> - {{ partial "gallery-box.html" . }} - </div> - {{ end }} - {{- end }} - - <!-- If gallery is greater than 3 items, all items after the first 3 display evenly in grid columns and rows --> - {{ if gt $galleryTotal 3 -}} - {{ range after 3 $gallery }} - <!-- If gallery items are divisible by 3, they will appear in columns of 3 --> - {{ $col := (mod $galleryTotal 3) }} - <div class="gallery-item col-xs-12 col-md-6 - {{- if gt $galleryTotal 5 }} - {{- if eq $col 0 }} col-lg-4 - {{- else }} col-lg-3 - {{- end }} - {{- end }}" onclick {{ if .Params.color }}style="background-color:{{ .Params.color }}"{{ end }}> - {{ partial "gallery-box.html" . }} - </div> - {{ end }} - {{- end }} - {{ end }} - </div> -</section> diff --git a/layouts/partials/head-extended.html b/layouts/partials/head-extended.html new file mode 100644 index 0000000..e69de29 --- /dev/null +++ b/layouts/partials/head-extended.html diff --git a/layouts/partials/head.html b/layouts/partials/head.html index 07b3039..aa19ca7 100644 --- a/layouts/partials/head.html +++ b/layouts/partials/head.html @@ -1,37 +1,21 @@ +{{ if .IsHome -}} + {{ .Scratch.Set "title" .Site.Title }} +{{- else if .Params.heading -}} + {{ .Scratch.Set "title" .Params.heading }} +{{- else -}} + {{ .Scratch.Set "title" (printf "%s | %s" .Title .Site.Title) }} +{{- end }} +{{ range .Site.Menus.main -}} + {{ $.Page.Scratch.Set .Identifier . }} +{{- end }} <head> - {{ if .Site.Params.Feat.googleTagManager }} - <!-- Google Tag Manager --> - <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': - new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], - j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= - 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); - })(window,document,'script','dataLayer','{{ .Site.Params.Feat.googleTagManager }}');</script> - <!-- End Google Tag Manager --> - {{ end }} + <title>{{ .Scratch.Get "title" }}</title> - {{ if .Site.GoogleAnalytics }} - {{ template "_internal/google_analytics_async.html" . }} - {{ end }} - - <title> - {{ $url := replace .Permalink ( printf "%s" .Site.BaseURL) "" }} - {{ if .IsHome -}} - {{ .Site.Title }} - {{- else if .Params.heading -}} - {{ .Params.heading }} - {{- else -}} - {{ .Title }} | {{ .Site.Title }} - {{- end }} - </title> - - <meta name="title" content="{{ if .IsHome }}{{ .Site.Title }}{{ else if .Params.heading }}{{ .Params.heading }}{{ else }}{{ .Title }} | {{ .Site.Title }}{{ end}}"> + <meta name="title" content="{{ .Scratch.Get "title" }}"> <meta charset="utf-8"> - <!-- <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> --> - <meta name="HandheldFriendly" content="True"> - <meta name="MobileOptimized" content="320"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> - <meta name="referrer" content="no-referrer-when-downgrade"> + <meta name="referrer" content="strict-origin-when-cross-origin"> <base href="{{ .Site.BaseURL }}"> {{ if .Description -}} @@ -46,18 +30,34 @@ <meta name="author" content="{{ .Site.Params.author }}"> {{- end }} - {{ if .Site.Params.Social.twitter -}} + {{ $twitter := index (where .Site.Params.Social "type" "==" "twitter") 0 }} + {{ with $twitter }} <meta name="twitter:card" content="summary_large_image"> - <meta name="twitter:site" content="@{{ .Site.Params.twitter }}"> - <meta name="twitter:creator" content="@{{ .Site.Params.twitter }}"> + <meta name="twitter:site" content="@{{ default $.Site.Params.author .name }}"> + <meta name="twitter:creator" content="@{{ default $.Site.Params.author .name }}"> {{- end }} <meta property="og:title" content="{{ if .IsHome }}{{ .Site.Title }}{{ else if .Params.heading }}{{ .Params.heading }}{{ else }}{{ .Title }} | {{ .Site.Title }}{{ end }}"> <meta property="og:type" content="website"> - <meta property="og:url" content="{{ .Site.BaseURL }}"> - - {{ if .Site.Params.opengraphImage -}} - <meta property="og:image" content="{{ .Site.BaseURL }}{{ .Site.Params.opengraphImage}}"> + <meta property="og:url" content="{{ .Permalink }}"> + {{ with .Site.Params.opengraphImage -}} + {{ with resources.Get . -}} + {{ $img := .Fill "1280x640 Lanczos Center" }} + {{ $img = slice $img | resources.Concat (printf "opengraph%s" (path.Ext .)) }} + <meta property="og:image" content="{{ $img.Permalink }}"> + <meta property="og:image:width" content="{{ $img.Width }}"> + <meta property="og:image:height" content="{{ $img.Height }}"> + {{- else -}} + <meta property="og:image" content="{{ . | absURL }}"> + {{- end }} + {{- end }} + {{ with .Site.Params.favicon -}} + {{ with (resources.Get .) -}} + {{ $img := slice (.Fill "192x192 png Lanczos Center") | resources.Concat "favicon.png" }} + <link rel="icon" type="image/png" href="{{ $img.Permalink }}"> + {{- else -}} + <link rel="icon" type="image/png" href="{{ . | absURL }}"> + {{- end }} {{- end }} {{ if .Description -}} @@ -68,15 +68,9 @@ <meta name="og:description" content="{{ .Summary }}"> {{- end }} - {{ if .Site.Params.favicon -}} - <link rel="icon" type="image/png" href="{{ .Site.Params.favicon }}"> - {{- end }} - - {{ with .Site.Params.themeColor -}} + {{ with .Site.Params.themeColor }} <meta name="theme-color" content="{{ . }}"> - {{- else -}} - <meta name="theme-color" content="{{ with .Site.Params.accentColor }}{{ .}}{{ else }}#0097a7{{ end }}"> - {{- end }} + {{ end }} <link rel="canonical" href="{{ .Permalink }}"> @@ -84,16 +78,36 @@ <link href="{{ .Permalink }}" rel="alternate" type="application/rss+xml" title="{{ $.Site.Title }}"> {{- end }} - <link rel="stylesheet" href="{{ (resources.Get "sass/main.scss" | resources.ExecuteAsTemplate "sass/main.scss" . | resources.ToCSS (dict "targetPath" "style.css" "outputStyle" "compressed") | resources.Fingerprint).Permalink }}" type="text/css"> - - {{ if .Site.Params.Feat.structuredData -}} - <script type="application/ld+json"> - {{ (resources.Get "person.json" | resources.ExecuteAsTemplate "person.json" . | resources.Minify).Content | safeJS }} - </script> + <link rel="stylesheet" href="{{ (resources.Get "sass/main.scss" | resources.ExecuteAsTemplate "sass/main.scss" . | resources.ToCSS (dict "targetPath" "style.css" "outputStyle" "compressed") | resources.Fingerprint).Permalink }}"> + <!-- <link rel="stylesheet" href="critical.css"> --> + <!-- <link rel="stylesheet" href="{{ (resources.Get "sass/main.scss" | resources.ExecuteAsTemplate "sass/main.scss" . | resources.ToCSS (dict "targetPath" "style.css" "outputStyle" "compressed") | resources.Fingerprint).Permalink }}" media="print" onload="this.media='all'"> --> + + {{ if .Site.Params.Feat.useStructuredData -}} + {{ $s := (resources.Get "person.json" | resources.ExecuteAsTemplate "person.json" .).Content }} + <script type="application/ld+json"> + {{ $s | safeJS }} + </script> + {{/* Validate what we have rendered to prevent bad surprises */}} + {{ $_ := unmarshal $s }} {{- end }} - {{ if .Site.Params.Feat.lazyLoading -}} - <style>.lazyload{opacity:.0001;}.logo .lazyload{min-width:10em;}</style> + {{ if .Site.Params.Feat.useLazySizes -}} <script src="{{ (resources.Get "js/vendor/lazysizes.min.js").Permalink }}" async></script> {{- end }} + + {{ if .Site.Params.Feat.googleTagManager }} + <!-- Google Tag Manager --> + <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': + new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], + j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= + 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); + })(window,document,'script','dataLayer','{{ .Site.Params.Feat.googleTagManager }}');</script> + <!-- End Google Tag Manager --> + {{ end }} + + {{ if .Site.GoogleAnalytics }} + {{ template "_internal/google_analytics_async.html" . }} + {{ end }} + + {{ partial "head-extended.html" . }} </head> diff --git a/layouts/partials/logo-img.html b/layouts/partials/logo-img.html new file mode 100644 index 0000000..803cd26 --- /dev/null +++ b/layouts/partials/logo-img.html @@ -0,0 +1,99 @@ +{{ $scratch := newScratch }} +{{ with (resources.Get .Site.Params.logoBig) -}} + {{ $resize := default (printf "%dx" (cond (lt .Width 1200) .Width 1200)) $.Site.Params.Image.Logo.resize }} + {{ $resizeOptions := default "MitchellNetravali q85" $.Site.Params.Image.Logo.resizeOptions }} + {{ $resizeLQIP := default "200x" $.Site.Params.Image.Logo.resizeLQIP }} + {{ $useLQIP := default true $.Site.Params.Image.Logo.useLQIP }} + {{ $responsive := default true $.Site.Params.Image.Logo.responsive }} + {{ $name := default "homelogo" $.Site.Params.Image.Logo.name }} + + <!-- Image resizing --> + {{ $img := .Resize (printf "%s %s" $resize $resizeOptions) }} + {{ $img := slice $img | resources.Concat (printf "%s-%d%s" $name . (path.Ext $img.Permalink)) }} + {{ $scratch.Set "img" $img.Permalink }} + {{ $scratch.Set "imgW" $img.Width }} + {{ $scratch.Set "imgH" $img.Height }} + + + {{ if $useLQIP -}} + {{ $lqip := .Resize (printf "%s %s" $resizeLQIP $resizeOptions) }} + {{ $scratch.Set "lqipRes" $lqip }} + {{- end }} + + {{ if and $responsive (gt $img.Width 200) -}} + <!-- Responsive dynamic resizing from $lqipSize to $resize --> + {{ $startWidth := (default 100 ($scratch.Get "lqipRes").Width) }} + {{ $sizes := seq $startWidth 50 $img.Width }} + {{ $n := 5 }} + {{ if gt $n (len $sizes) -}} + {{ $n = len $sizes }} + {{- end }} + {{ $part := int (div (len $sizes) $n) }} + {{ $wset := slice }} + {{ range (seq 1 (sub $n 1)) -}} + {{ $wset = append (index $sizes (mul $part .)) $wset }} + {{- end }} + {{ $wset = (uniq (append (int $img.Width) $wset)) }} + + {{ $image := . }} + {{ $srcset := slice }} + {{ range $wset }} + <!-- Resize image and rename image --> + {{ $img := $image.Resize (printf "%dx %s" . $resizeOptions) }} + {{ $img := slice $img | resources.Concat (printf "%s-%d%s" $name . (path.Ext $img.Permalink)) }} + {{ $scratch.Set "img" $img.Permalink }} + {{ $scratch.Set "imgW" $img.Width }} + {{ $scratch.Set "imgH" $img.Height }} + {{ $srcset = append (printf "%s %dw" $img.Permalink .) $srcset }} + {{- end }} + {{ $scratch.Set "srcset" (delimit $srcset ",\n") }} + {{ else if $responsive }} + {{ warnf "%s is too small (width: %dpx) to be resized to a responsive srcset!" . .Width }} + {{- end }} +{{- else -}} + {{ $scratch.Set "img" .Site.Params.logoBig }} +{{- end }} +{{ if .Site.Params.Feat.useLazySizes }} +<noscript> + <img + src="{{ $scratch.Get "img" }}" + alt="{{ .Site.Title }}" + class="home-logo" + loading="lazy" + {{ with $scratch.Get "imgH" -}} + height="{{ . }}" + {{- end }} + {{ with $scratch.Get "imgW" }} + width="{{ . }}" + {{ end }} + > +</noscript> +{{ end }} +<img +{{ if .Site.Params.Feat.useLazySizes }} + {{ with $scratch.Get "lqipRes" }} + {{ $placeholderB64 := .Content | base64Encode }} + {{ if gt (len $placeholderB64) 3072 -}} + src="{{ .Permalink }}" + {{- else -}} + src="data:{{ .MediaType }};base64,{{ $placeholderB64 }}" + {{- end }} + {{- end }} + data-src="{{ $scratch.Get "img" }}" + alt="{{ .Site.Title }}" + class="home-logo blur-up lazyload" +{{ else }} + src="{{ $scratch.Get "img" }}" + class="home-logo" +{{ end }} +{{ with ($scratch.Get "srcset") }} + data-sizes="auto" + data-srcset="{{ . }}" +{{ end }} +{{ with $scratch.Get "imgH" -}} + height="{{ . }}" +{{- end }} +{{ with $scratch.Get "imgW" }} + width="{{ . }}" +{{ end }} +>
\ No newline at end of file diff --git a/layouts/partials/sections/about.html b/layouts/partials/sections/about.html new file mode 100644 index 0000000..6a6b0a6 --- /dev/null +++ b/layouts/partials/sections/about.html @@ -0,0 +1,12 @@ +<div class="container middle-xs"> + <div class="row center-xs"> + <div class="col-xs-12"> + <h1>{{ .Title }}</h1> + </div> + </div> + <div class="row center-xs"> + <div class="col-xs-12 middle-xs"> + {{ .Content }} + </div> + </div> +</div> diff --git a/layouts/partials/sections/blog.html b/layouts/partials/sections/blog.html new file mode 100644 index 0000000..adc9906 --- /dev/null +++ b/layouts/partials/sections/blog.html @@ -0,0 +1,23 @@ +{{ if .Site.Params.enforceSinglePage -}} + {{ warnf "enforceSinglePage is set to true. This is very likely not what you want for blog posts which will always redirect to main page with this option!"}} +{{- end }} +<div class="container"> + <div class="row center-xs"> + <div class="col-xs-12"><h1>{{ i18n "latestPosts" }}</h1></div> + </div> + <div class="row center-xs"> + <div class="col-xs-12 posts-list"> + {{ range first 5 (where site.RegularPages "Section" "blog") }} + <article> + <h2><a href="{{ .Permalink }}">{{ .Title }}</a></h2> + <div class=sub-header> + {{ .Date.Format (.Site.Params.dateform | default "January 2, 2006") }} · {{ i18n "minuteRead" .ReadingTime }} + </div> + </article> + {{ end }} + </div> + </div> + <div class="row center-xs"> + <div class="col-xs-12"><h3><a href="{{ "blog/" | relLangURL }}"><span class="icon icon-angle-circled-right"></span>{{ i18n "viewAll" }}</a></h3></div> + </div> +</div> diff --git a/layouts/partials/sections/contact.html b/layouts/partials/sections/contact.html new file mode 100644 index 0000000..6206e80 --- /dev/null +++ b/layouts/partials/sections/contact.html @@ -0,0 +1,40 @@ +{{ if not site.Params.Feat.ajaxBasin }} + {{ warnf "Please set site.Params.Feat.ajaxBasin in order to use the contact form!" }} +{{ end }} +<div class="container"> + <div class="row center-xs"> + <div class="col-xs-12"> + <h1><span class="icon icon-mail"></span>{{ i18n "letsChat" }}</h1> + <noscript>{{ i18n "nojsForm" }}</noscript> + </div> + </div> + + <form id="form-contact" action="https://formspree.io" method="POST"> + <div class="row center-xs"> + <div class="col-xs-12 col-sm-6"><input type="text" name="name" aria-label="name" placeholder="{{ i18n "name" }}" required></div> + <div class="col-xs-12 col-sm-6"><input type="email" id="email" name="email" aria-label="email address" placeholder="{{ i18n "email" }}" required></div> + {{ if .Page.Params.selectKeys -}} + <div class="col-xs-12 col-sm-6"> + <select name="matter" required aria-label="email matter"> + {{ range .Page.Params.selectKeys -}} + <option value="{{ . }}">{{ i18n . }}</option> + {{- end }} + </select> + </div> + {{- end }} + <div class="col-xs-12{{ if .Page.Params.selectKeys }} col-sm-6{{ end }}"><input type="text" name="_subject" aria-label="email subject" placeholder="{{ i18n "subject" }}" required></div> + <div class="col-xs-12"> + <textarea name="message" aria-label="Please enable JS" required></textarea> + </div> + <div class="col-xs-12"> + <textarea name="message2" aria-label="email message" placeholder="{{ i18n "message" }}" required hidden></textarea> + </div> + <div class="col-xs-12 contact-submit"> + <input id="form-submit" type="submit" value="{{ i18n "send" }}"> + <span id="form-sending" hidden><span class="icon icon-rocket"></span>{{ i18n "sendingEmail" }}</span> + <span id="form-thankyou" hidden><span class="icon icon-ok"></span>{{ i18n "thanksForYourEmail" }}</span> + <span id="form-error" hidden><span class="icon icon-attention"></span>{{ i18n "errorWhileSendingEmail" }}</span> + </div> + </div> + </form> +</div> diff --git a/layouts/partials/sections/default.html b/layouts/partials/sections/default.html new file mode 100644 index 0000000..6a6b0a6 --- /dev/null +++ b/layouts/partials/sections/default.html @@ -0,0 +1,12 @@ +<div class="container middle-xs"> + <div class="row center-xs"> + <div class="col-xs-12"> + <h1>{{ .Title }}</h1> + </div> + </div> + <div class="row center-xs"> + <div class="col-xs-12 middle-xs"> + {{ .Content }} + </div> + </div> +</div> diff --git a/layouts/partials/disqus.html b/layouts/partials/sections/disqus.html index 8608efe..b30f78e 100644 --- a/layouts/partials/disqus.html +++ b/layouts/partials/sections/disqus.html @@ -1,16 +1,20 @@ +<!-- Adapted from https://gohugo.io/templates/internal/#disqus --> <section class="disqus"> <div id="disqus_thread"></div> <script type="text/javascript"> - (function() { + + (function() { // Don't ever inject Disqus on localhost--it creates unwanted // discussions from 'localhost:1313' on your Disqus account... if (window.location.hostname == "localhost") - return; - var disqus_shortname = '{{ .Site.DisqusShortname }}'; + return; + var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true; + var disqus_shortname = '{{ .Site.DisqusShortname }}'; dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js'; (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq); - })(); + })(); </script> <noscript>{{ i18n "enableJavaScript" }} <a href="http://disqus.com/?ref_noscript">Disqus</a>.</noscript> + <a href="https://disqus.com/" class="dsq-brlink">comments powered by <span class="logo-disqus">Disqus</span></a> </section> diff --git a/layouts/partials/sections/gallery.html b/layouts/partials/sections/gallery.html new file mode 100644 index 0000000..a320234 --- /dev/null +++ b/layouts/partials/sections/gallery.html @@ -0,0 +1,4 @@ +{{ if gt (len (where site.RegularPages "Section" "gallery")) 0 }} + {{ partial "sections/gallery/gallery.html" . }} + {{ partial "sections/gallery/modals.html" . }} +{{ end }}
\ No newline at end of file diff --git a/layouts/partials/sections/gallery/box.html b/layouts/partials/sections/gallery/box.html new file mode 100644 index 0000000..8fb1bc4 --- /dev/null +++ b/layouts/partials/sections/gallery/box.html @@ -0,0 +1,15 @@ +{{ $split := split .Params.github.repo "/" }} +{{ .Scratch.Set "ghUser" (index $split 0) }} +{{ .Scratch.Set "ghRepo" (index $split 1) }} +<div class="gallery-img-container">{{ partial "sections/gallery/img" . }}</div> +<div class="row center-xs middle-xs overlay" {{ with .Params.hoverColor }}style="background-color: {{ . }}"{{ end }}> + {{ partial "sections/gallery/link.html" . }} + <div class="col-xs"> + + <h2>{{ .Title }}</h2> + {{ with .Params.subtitle }} + <h3>{{ . }}</h3> + {{- end }} + + </div> +</div>
\ No newline at end of file diff --git a/layouts/partials/sections/gallery/gallery.html b/layouts/partials/sections/gallery/gallery.html new file mode 100644 index 0000000..aca0f46 --- /dev/null +++ b/layouts/partials/sections/gallery/gallery.html @@ -0,0 +1,58 @@ +<div class="row"> + {{ $gallery := (where site.RegularPages "Section" "gallery") }} + {{ $galleryTotal := len $gallery }} + + {{ if modBool $galleryTotal 2 }} + <!-- If gallery is an even total, all items display evenly in grid columns and rows: --> + {{ range $gallery }} + <!-- If gallery items are greater than 7 and are divisible by 4, + they will appear in columns of 4, else in columns of 2 or 3 --> + <div class="gallery-item col-xs-12 + {{- if gt $galleryTotal 1 }} col-md-6 + {{- if gt $galleryTotal 7 }} + {{- if modBool $galleryTotal 4 }} col-lg-3 + {{- else }} col-lg-4 + {{- end }} + {{- end }} + {{- end }}" onclick {{ if .Params.color }}style="background-color:{{ .Params.color }}"{{ end }}> + {{ partial "sections/gallery/box.html" . }} + </div> + {{ end }} + {{ else }} + <!-- If gallery is an odd total --> + + <!-- If gallery is only one item, display it fully --> + {{ if eq $galleryTotal 1 -}} + {{ range first 3 $gallery }} + <div class="gallery-item col-xs-12" onclick {{ if .Params.color }}style="background-color:{{ .Params.color }}"{{ end }}> + {{ partial "sections/gallery/box.html" . }} + </div> + {{ end }} + {{- end }} + + <!-- If gallery is greater than 2 items, first 3 items display together on first row --> + {{ if gt $galleryTotal 2 -}} + {{ range first 3 $gallery }} + <div class="gallery-item col-xs-12 col-md-4" onclick {{ if .Params.color }}style="background-color:{{ .Params.color }}"{{ end }}> + {{ partial "sections/gallery/box.html" . }} + </div> + {{ end }} + {{- end }} + + <!-- If gallery is greater than 3 items, all items after the first 3 display evenly in grid columns and rows --> + {{ if gt $galleryTotal 3 -}} + {{ range after 3 $gallery }} + <!-- If gallery items are divisible by 3, they will appear in columns of 3 --> + {{ $col := (mod $galleryTotal 3) }} + <div class="gallery-item col-xs-12 col-md-6 + {{- if gt $galleryTotal 5 }} + {{- if eq $col 0 }} col-lg-4 + {{- else }} col-lg-3 + {{- end }} + {{- end }}" onclick {{ if .Params.color }}style="background-color:{{ .Params.color }}"{{ end }}> + {{ partial "sections/gallery/box.html" . }} + </div> + {{ end }} + {{- end }} + {{ end }} +</div> diff --git a/layouts/partials/sections/gallery/img.html b/layouts/partials/sections/gallery/img.html new file mode 100644 index 0000000..2adc500 --- /dev/null +++ b/layouts/partials/sections/gallery/img.html @@ -0,0 +1,68 @@ +{{ $scratch := newScratch }} +{{ $imgSize := default "500x" .Site.Params.Image.Gallery.resize }} +{{ $lqipSize := default "6x" .Site.Params.Image.Gallery.resizeLQIP }} +{{ $useLQIP := default true .Site.Params.Image.Gallery.useLQIP }} +{{ $resizeOptions := default "MitchellNetravali q85" .Site.Params.Image.Gallery.resizeOptions }} +{{ with .Params.image -}} + {{ with (resources.Get .) -}} + {{ $image := .Resize (printf "%s %s" $imgSize $resizeOptions) }} + {{ $scratch.Set "img" $image.Permalink }} + {{ $scratch.Set "imgW" $image.Width }} + {{ $scratch.Set "imgH" $image.Height }} + + {{ if $useLQIP -}} + {{ $lqip := $image }} + {{ $lqip := $image | images.Filter (images.GaussianBlur 10) }} + {{ $lqip = $lqip.Resize (printf "%s png" $lqipSize) }} + {{ $scratch.Set "imgPlaceholderRes" $lqip }} + {{- end }} + {{- else -}} + {{ $scratch.Set "img" (. | absURL) }} + {{- end }} +{{- else -}} + {{ with .Params.github.repo -}} + {{ $scratch.Set "img" ((printf "https://raw.githubusercontent.com/%s/master/.github/logo.png" .) | absURL) }} + {{ else }} + {{ warnf "no gallery image set for %s" .File.FileName }} + {{- end }} +{{- end }} +{{ if .Site.Params.Feat.useLazySizes }} +<noscript> + <img + src="{{ $scratch.Get "img" }}" + alt="{{ default .Params.title .Params.alt }}" + loading="lazy" + {{ with $scratch.Get "imgH" -}} + height="{{ . }}" + {{- end }} + {{ with $scratch.Get "imgW" }} + width="{{ . }}" + style="width: {{ . }}px; height: auto;" + {{ end }} + > +</noscript> +{{ end }} +<img +{{ if .Site.Params.Feat.useLazySizes }} + {{ with $scratch.Get "imgPlaceholderRes" }} + {{ $placeholderB64 := .Content | base64Encode }} + {{ if gt (len $placeholderB64) 3072 -}} + src="{{ .Permalink }}" + {{- else -}} + src="data:image/png;base64,{{ $placeholderB64 }}" + {{- end }} + {{- end }} + data-src="{{ $scratch.Get "img" }}" + class="blur-up lazyload" +{{ else }} + src="{{ $scratch.Get "img" }}" + loading="lazy" +{{ end }} +alt="{{ default .Params.title .Params.alt }}" +{{ with $scratch.Get "imgH" -}} height="{{ . }}" {{- end }} +{{ with $scratch.Get "imgW" }} width="{{ . }}" {{ end }} +{{ with $scratch.Get "imgW" -}} + {{/* TODO(kdevo): Refactor this in SCSS */}} + style="width: {{ . }}px; height: auto;" +{{- end }} +>
\ No newline at end of file diff --git a/layouts/partials/sections/gallery/link.html b/layouts/partials/sections/gallery/link.html new file mode 100644 index 0000000..5b79ce7 --- /dev/null +++ b/layouts/partials/sections/gallery/link.html @@ -0,0 +1,2 @@ +{{ $modalID := .File.BaseFileName }} +<a href="#{{ $modalID }}" class="gallery-modal-link" id="{{ $modalID }}"></a>
\ No newline at end of file diff --git a/layouts/partials/modals.html b/layouts/partials/sections/gallery/modals.html index 3154200..5152fae 100644 --- a/layouts/partials/modals.html +++ b/layouts/partials/sections/gallery/modals.html @@ -1,23 +1,21 @@ -{{ range where .Site.RegularPages "Section" "gallery" }} +{{ range where site.RegularPages "Section" "gallery" }} - <!-- First 4 characters of each gallery page's unique ID --> - <!-- {{ $modalID := (slicestr .File.UniqueID 0 4) }} --> {{ $modalID := .File.BaseFileName }} {{ $scratch := newScratch }} - {{ if eq .Params.type "github" -}} - {{ $scratch.Set "repo" (getJSON "https://api.github.com/repos/" .Params.github.repo) }} + {{ if .Params.github.repo -}} + {{ $scratch.Set "repo" (getJSON "https://api.github.com/repos/" .Params.github.repo) }} {{- end }} <div id="modal-{{ $modalID }}" class="modal"> <!-- Modal box --> <div class="modal-box"> - <span class="close icon icon-cancel-circled"></span> + <span class="close icon icon-cancel"></span> <div class="modal-container"> <div class="modal-header"> <div class="modal-header-img-container" {{ if .Params.color }}style="background-color:{{ .Params.color }}"{{ end }}> - {{ partial "gallery-img" . }} + {{ partial "sections/gallery/img" . }} </div> </div> @@ -30,52 +28,47 @@ <p>{{ with $scratch.Get "repo" }}{{ .description }}{{ end }}</p> {{- else -}} {{ if $scratch.Get "repo" }} - {{ replace .Content "{{! github-description !}}" ($scratch.Get "repo").description | safeHTML }} + {{ replace .Content "{github-description}" ($scratch.Get "repo").description | safeHTML }} {{- else -}} {{ .Content }} {{- end }} {{- end }} </article> - <!-- Links --> + + <!-- Buttons --> <div class="row center-xs"> - {{ if .Params.linkView -}} + <!-- The following two params are left for backward-compatibility --> + {{ with .Params.linkView }} <div class="col-xs"> - <div class="box"> - <a href="{{ .Params.linkView }}"> - <button type="submit"><span class="icon icon-right-circled"></span> {{ i18n "view" }}</button> - </a> - </div> + <a href="{{ . }}"><button type="submit"><span class="icon icon-angle-circled-right"></span> {{ i18n "view" }}</button></a> </div> - {{- end }} - {{ if .Params.linkCode -}} + {{ end }} + {{ with .Params.linkCode }} <div class="col-xs"> - <div class="box"> - <a href="{{ .Params.linkCode }}" target="_blank"> - <button type="submit"><span class="icon icon-terminal"></span>{{ i18n "code" }}</button> - </a> - </div> + <a href="{{ . }}"><button type="submit"><span class="icon icon-terminal"></span> {{ i18n "code" }}</button></a> </div> - {{- else -}} - {{ with $scratch.Get "repo" -}} + {{ end }} + {{ range .Params.buttons -}} <div class="col-xs"> - <div class="box"> - <a href="{{ replace (replace .archive_url "{/ref}" "") "{archive_format}" "zipball" }}" target="_blank"> - <button type="submit"><span class="icon icon-download"></span>{{ i18n "download" }}</button> - </a> - </div> + <a href="{{ .url }}" {{ if default false .newTab -}}target="_blank" rel="noopener"{{- end }}> + <button type="submit">{{ with .icon }}<span class="icon icon-{{ . }}"></span>{{ end }} {{ i18n (default "view" .i18n) }}</button> + </a> </div> - {{- end }} + {{ end }} + {{ if (default true .Params.github.showButtons) }} {{ with $scratch.Get "repo" -}} - <div class="col-xs"> - <div class="box"> - <a href="{{ .html_url }}" target="_blank"> - <button type="submit"><span class="icon icon-terminal"></span>{{ i18n "code" }}</button> - </a> - </div> - </div> - {{- end }} + <div class="col-xs"> + <a href="{{ replace (replace .archive_url "{/ref}" "") "{archive_format}" "zipball" }}" target="_blank"> + <button type="submit"><span class="icon icon-download"></span>{{ i18n "download" }}</button> + </a> + </div> + <div class="col-xs"> + <a href="{{ .html_url }}" target="_blank" rel="noopener"> + <button type="submit"><span class="icon icon-terminal"></span>{{ i18n "code" }}</button> + </a> + </div> {{- end }} - + {{- end }} </div> {{ if .Params.github.showInfo }} @@ -87,7 +80,7 @@ {{ $scratch.Set "repo-lang-main" (math.Round (mul 100 (div (index . ($scratch.Get "repo").language) $sum))) }} {{- end }} {{ with $scratch.Get "repo" }}<div class="row center-xs"><div class="repo-info"> - <a href="{{ .html_url }}/pulse"><span class="icon icon-github-cat"></span></a> + <a href="{{ .html_url }}/pulse"><span class="icon icon-github-octocat"></span></a> <a href="{{ .languages_url }}">{{ .language }}{{ with ($scratch.Get "repo-lang-main") }}{{ if lt . 100.0 }} ({{ . }}%) {{ end }}{{ end }}</a> {{ with .license }}{{ with (getJSON .url) }} • <a href="{{ .html_url }}">{{ .spdx_id }}</a> {{ end }} {{ end }} {{ if gt .stargazers_count 0 }} • <a href="{{ .html_url }}/stargazers"> {{ .stargazers_count }} stars </a>{{ end }} @@ -96,7 +89,6 @@ </div></div>{{ end }}{{ end }} </div> - {{ if .Params.terminal.lines -}} <div class="term-content"> <div id="term-{{ $modalID }}" data-termynal> diff --git a/layouts/shortcodes/img.html b/layouts/shortcodes/img.html new file mode 100644 index 0000000..cde817e --- /dev/null +++ b/layouts/shortcodes/img.html @@ -0,0 +1,31 @@ +{{ $res := resources.Get (.Get 0) }} +{{ $img := $res.Resize (.Get 1) }} +{{ $width := $img.Width }} +{{ $height := $img.Height }} +{{ $alt := default "" (.Get 2) }} + +{{ if .Site.Params.Feat.useLazySizes }} +<noscript> +<img +src="{{ $img.Permalink }}" +loading="lazy" +alt="{{ $alt }}" +style="width: {{ $width }}px; height: auto" +height="{{ $height }}" +width="{{ $width }}" +> +</noscript> +{{ end }} +<img +{{ if .Site.Params.Feat.useLazySizes }} +data-src="{{ $img.Permalink }}" +class="lazyload" +{{ else }} +src="{{ $img.Permalink }}" +loading="lazy" +{{ end }} +alt="{{ $alt }}" +style="width: {{ $width }}px; height: auto" +height="{{ $height }}" +width="{{ $width }}" +>
\ No newline at end of file diff --git a/layouts/shortcodes/spotify.html b/layouts/shortcodes/spotify.html new file mode 100644 index 0000000..0c82694 --- /dev/null +++ b/layouts/shortcodes/spotify.html @@ -0,0 +1,16 @@ +{{ $split := split (.Get 0) ":" }} +{{ $type := index $split 1 }} +{{ $id := index $split 2 }} +{{ $height := default "300px" (.Get "height") }} +{{ $loading := default "lazysizes" (.Get "loading") }} +<iframe + {{- if eq $loading "lazysizes" }} + data-src="https://open.spotify.com/embed/{{ $type }}/{{ $id }}" + class="lazyload" + {{- else -}} + src="https://open.spotify.com/embed/{{ $type }}/{{ $id }}" + loading="{{ $loading }}" + {{- end }} + style="width: 100%; height: {{ $height }}" + frameborder="0" allowtransparency="true" allow="encrypted-media"> +</iframe> diff --git a/static/fonts/icons/LICENSE.md b/static/fonts/icons/LICENSE.md index 5ee6d86..f33f165 100644 --- a/static/fonts/icons/LICENSE.md +++ b/static/fonts/icons/LICENSE.md @@ -1,11 +1,10 @@ ## Font Awesome - Copyright (C) 2016 by Dave Gandy - -- Author: Dave Gandy -- License: [SIL OFL 1.1](http://scripts.sil.org/OFL) -- Homepage: https://fontawesome.com/v4.7.0/ +Copyright (C) 2016-2021 by Dave Gandy +- Author: Dave Gandy +- License: SIL (https://fontawesome.com/license/free) +- Homepage: https://fontawesome.com/ ### Note on Brand Icons diff --git a/static/fonts/icons/icons.eot b/static/fonts/icons/icons.eot Binary files differdeleted file mode 100644 index 4e8e5f8..0000000 --- a/static/fonts/icons/icons.eot +++ /dev/null diff --git a/static/fonts/icons/icons.svg b/static/fonts/icons/icons.svg deleted file mode 100644 index 81a0339..0000000 --- a/static/fonts/icons/icons.svg +++ /dev/null @@ -1,70 +0,0 @@ -<?xml version="1.0" standalone="no"?> -<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> -<svg xmlns="http://www.w3.org/2000/svg"> -<metadata>Copyright (C) 2019 by original authors @ fontello.com</metadata> -<defs> -<font id="icons" horiz-adv-x="1000" > -<font-face font-family="icons" font-weight="400" font-stretch="normal" units-per-em="1000" ascent="850" descent="-150" /> -<missing-glyph horiz-adv-x="1000" /> -<glyph glyph-name="heart" unicode="" d="M500-79q-14 0-25 10l-348 336q-5 5-15 15t-31 37-38 54-30 67-13 77q0 123 71 192t196 70q34 0 70-12t67-33 54-38 42-38q20 20 42 38t54 38 67 33 70 12q125 0 196-70t71-192q0-123-128-251l-347-335q-10-10-25-10z" horiz-adv-x="1000" /> - -<glyph glyph-name="attention-circled" unicode="" d="M429 779q116 0 215-58t156-156 57-215-57-215-156-156-215-58-216 58-155 156-58 215 58 215 155 156 216 58z m71-696v106q0 8-5 13t-12 5h-107q-8 0-13-5t-6-13v-106q0-8 6-13t13-6h107q7 0 12 6t5 13z m-1 192l10 346q0 7-6 10-5 5-13 5h-123q-8 0-13-5-6-3-6-10l10-346q0-6 5-10t14-4h103q8 0 13 4t6 10z" horiz-adv-x="857.1" /> - -<glyph glyph-name="link" unicode="" d="M813 171q0 23-16 38l-116 116q-16 16-38 16-24 0-40-18 1-1 10-10t12-12 9-11 7-14 2-15q0-23-16-38t-38-16q-8 0-15 2t-14 7-11 9-12 12-10 10q-19-17-19-40 0-23 16-38l115-116q15-15 38-15 22 0 38 15l82 81q16 16 16 37z m-393 394q0 22-15 38l-115 115q-16 16-38 16-22 0-38-15l-82-82q-16-15-16-37 0-22 16-38l116-116q15-15 38-15 23 0 40 17-2 2-11 11t-12 12-8 10-7 14-2 16q0 22 15 38t38 15q9 0 16-2t14-7 11-8 12-12 10-11q18 17 18 41z m500-394q0-66-48-113l-82-81q-46-47-113-47-68 0-114 48l-115 115q-46 47-46 114 0 68 49 116l-49 49q-48-49-116-49-67 0-114 47l-116 116q-47 47-47 114t47 113l82 82q47 46 114 46 67 0 114-47l115-116q46-46 46-113 0-69-49-117l49-49q48 49 116 49 67 0 114-47l116-116q47-47 47-114z" horiz-adv-x="928.6" /> - -<glyph glyph-name="ok-circled" unicode="" d="M717 440q0 16-10 26l-51 50q-11 11-25 11t-25-11l-228-227-126 126q-11 11-25 11t-25-11l-51-50q-10-10-10-26 0-15 10-25l202-202q10-10 25-10 15 0 26 10l303 303q10 10 10 25z m140-90q0-117-57-215t-156-156-215-58-216 58-155 156-58 215 58 215 155 156 216 58 215-58 156-156 57-215z" horiz-adv-x="857.1" /> - -<glyph glyph-name="info-circled" unicode="" d="M571 82v89q0 8-5 13t-12 5h-54v286q0 8-5 13t-13 5h-178q-8 0-13-5t-5-13v-89q0-8 5-13t13-5h53v-179h-53q-8 0-13-5t-5-13v-89q0-8 5-13t13-5h250q7 0 12 5t5 13z m-71 500v89q0 8-5 13t-13 5h-107q-8 0-13-5t-5-13v-89q0-8 5-13t13-5h107q8 0 13 5t5 13z m357-232q0-117-57-215t-156-156-215-58-216 58-155 156-58 215 58 215 155 156 216 58 215-58 156-156 57-215z" horiz-adv-x="857.1" /> - -<glyph glyph-name="cancel-circled" unicode="" d="M641 224q0 14-10 25l-101 101 101 101q10 11 10 25 0 15-10 26l-51 50q-10 11-25 11-15 0-25-11l-101-101-101 101q-11 11-25 11-16 0-26-11l-50-50q-11-11-11-26 0-14 11-25l101-101-101-101q-11-11-11-25 0-15 11-26l50-50q10-11 26-11 14 0 25 11l101 101 101-101q10-11 25-11 15 0 25 11l51 50q10 11 10 26z m216 126q0-117-57-215t-156-156-215-58-216 58-155 156-58 215 58 215 155 156 216 58 215-58 156-156 57-215z" horiz-adv-x="857.1" /> - -<glyph glyph-name="download" unicode="" d="M714 100q0 15-10 25t-25 11-25-11-11-25 11-25 25-11 25 11 10 25z m143 0q0 15-10 25t-26 11-25-11-10-25 10-25 25-11 26 11 10 25z m72 125v-179q0-22-16-37t-38-16h-821q-23 0-38 16t-16 37v179q0 22 16 38t38 16h259l75-76q33-32 76-32t76 32l76 76h259q22 0 38-16t16-38z m-182 318q10-23-8-39l-250-250q-10-11-25-11t-25 11l-250 250q-17 16-8 39 10 21 33 21h143v250q0 15 11 25t25 11h143q14 0 25-11t10-25v-250h143q24 0 33-21z" horiz-adv-x="928.6" /> - -<glyph glyph-name="tags" unicode="" d="M250 600q0 30-21 51t-50 20-51-20-21-51 21-50 51-21 50 21 21 50z m595-321q0-30-20-51l-274-274q-22-21-51-21-30 0-50 21l-399 399q-21 21-36 57t-15 65v232q0 29 21 50t50 22h233q29 0 65-15t57-36l399-399q20-21 20-50z m215 0q0-30-21-51l-274-274q-22-21-51-21-20 0-33 8t-29 25l262 262q21 21 21 51 0 29-21 50l-399 399q-21 21-57 36t-65 15h125q29 0 65-15t57-36l399-399q21-21 21-50z" horiz-adv-x="1071.4" /> - -<glyph glyph-name="link-ext" unicode="" d="M786 332v-178q0-67-47-114t-114-47h-464q-67 0-114 47t-47 114v464q0 66 47 113t114 48h393q7 0 12-5t5-13v-36q0-8-5-13t-12-5h-393q-37 0-63-26t-27-63v-464q0-37 27-63t63-27h464q37 0 63 27t26 63v178q0 8 5 13t13 5h36q8 0 13-5t5-13z m214 482v-285q0-15-11-25t-25-11-25 11l-98 98-364-364q-5-6-13-6t-12 6l-64 64q-6 5-6 12t6 13l364 364-98 98q-11 11-11 25t11 25 25 11h285q15 0 25-11t11-25z" horiz-adv-x="1000" /> - -<glyph glyph-name="github-circled" unicode="" d="M429 779q116 0 215-58t156-156 57-215q0-140-82-252t-211-155q-15-3-22 4t-7 17q0 1 0 43t0 75q0 54-29 79 32 3 57 10t53 22 45 37 30 58 11 84q0 67-44 115 21 51-4 114-16 5-46-6t-51-25l-21-13q-52 15-107 15t-108-15q-8 6-23 15t-47 22-47 7q-25-63-5-114-44-48-44-115 0-47 12-83t29-59 45-37 52-22 57-10q-21-20-27-58-12-5-25-8t-32-3-36 12-31 35q-11 18-27 29t-28 14l-11 1q-12 0-16-2t-3-7 5-8 7-6l4-3q12-6 24-21t18-29l6-13q7-21 24-34t37-17 39-3 31 1l13 3q0-22 0-50t1-30q0-10-8-17t-22-4q-129 43-211 155t-82 252q0 117 58 215t155 156 216 58z m-267-616q2 4-3 7-6 1-8-1-1-4 4-7 5-3 7 1z m18-19q4 3-1 9-6 5-9 2-4-3 1-9 5-6 9-2z m16-25q6 4 0 11-4 7-9 3-5-3 0-10t9-4z m24-23q4 4-2 10-7 7-11 2-5-5 2-11 6-6 11-1z m32-14q1 6-8 9-8 2-10-4t7-9q8-3 11 4z m35-3q0 7-10 6-9 0-9-6 0-7 10-6 9 0 9 6z m32 5q-1 7-10 5-9-1-8-8t10-4 8 7z" horiz-adv-x="857.1" /> - -<glyph glyph-name="left-circled" unicode="" d="M714 314v72q0 14-10 25t-25 10h-281l106 106q11 11 11 25t-11 25l-51 51q-10 10-25 10t-25-10l-202-202-51-51q-10-10-10-25t10-25l51-51 202-202q10-10 25-10t25 10l51 51q10 10 10 25t-10 25l-106 106h281q14 0 25 10t10 25z m143 36q0-117-57-215t-156-156-215-58-216 58-155 156-58 215 58 215 155 156 216 58 215-58 156-156 57-215z" horiz-adv-x="857.1" /> - -<glyph glyph-name="right-circled" unicode="" d="M717 350q0 15-10 25l-51 51-202 202q-10 10-25 10t-25-10l-51-51q-10-10-10-25t10-25l106-106h-280q-15 0-25-10t-11-25v-72q0-14 11-25t25-10h280l-106-106q-10-10-10-25t10-25l51-51q10-10 25-10t25 10l202 202 51 51q10 10 10 25z m140 0q0-117-57-215t-156-156-215-58-216 58-155 156-58 215 58 215 155 156 216 58 215-58 156-156 57-215z" horiz-adv-x="857.1" /> - -<glyph glyph-name="menu" unicode="" d="M857 100v-71q0-15-10-25t-26-11h-785q-15 0-25 11t-11 25v71q0 15 11 25t25 11h785q15 0 26-11t10-25z m0 286v-72q0-14-10-25t-26-10h-785q-15 0-25 10t-11 25v72q0 14 11 25t25 10h785q15 0 26-10t10-25z m0 285v-71q0-14-10-25t-26-11h-785q-15 0-25 11t-11 25v71q0 15 11 26t25 10h785q15 0 26-10t10-26z" horiz-adv-x="857.1" /> - -<glyph glyph-name="money" unicode="" d="M429 207h214v54h-72v250h-63l-83-77 43-44q24 20 31 31h1v-160h-71v-54z m285 143q0-39-11-79t-34-75-56-56-77-22-77 22-57 56-33 75-12 79 12 79 33 75 57 56 77 22 77-22 56-56 34-75 11-79z m286-143v286q-59 0-101 42t-42 101h-643q0-59-42-101t-101-42v-286q60 0 101-42t42-101h643q0 59 42 101t101 42z m71 464v-642q0-15-10-25t-25-11h-1000q-15 0-25 11t-11 25v642q0 15 11 26t25 10h1000q14 0 25-10t10-26z" horiz-adv-x="1071.4" /> - -<glyph glyph-name="mail-alt" unicode="" d="M1000 454v-443q0-37-26-63t-63-27h-822q-36 0-63 27t-26 63v443q25-27 56-49 202-137 278-192 32-24 51-37t53-27 61-13h2q28 0 61 13t53 27 51 37q95 68 278 192 32 22 56 49z m0 164q0-44-27-84t-68-69q-210-146-262-181-5-4-23-17t-30-22-29-18-32-15-28-5h-2q-12 0-27 5t-32 15-30 18-30 22-23 17q-51 35-147 101t-114 80q-35 23-65 64t-31 77q0 43 23 72t66 29h822q36 0 63-26t26-63z" horiz-adv-x="1000" /> - -<glyph glyph-name="github" unicode="" d="M357 171q0-22-7-45t-24-43-40-19-41 19-24 43-7 45 7 46 24 43 41 19 40-19 24-43 7-46z m357 0q0-22-7-45t-24-43-40-19-41 19-24 43-7 45 7 46 24 43 41 19 40-19 24-43 7-46z m90 0q0 67-39 114t-104 47q-23 0-109-12-40-6-88-6t-87 6q-85 12-109 12-66 0-104-47t-39-114q0-49 18-85t45-58 68-33 78-17 83-4h94q46 0 83 4t78 17 69 33 45 58 18 85z m125 99q0-116-34-185-22-43-59-74t-79-48-95-27-96-12-93-3q-43 0-79 2t-82 7-85 17-77 29-67 45-48 64q-35 69-35 185 0 132 76 221-15 45-15 95 0 64 28 121 61 0 106-22t106-69q82 20 172 20 83 0 157-18 58 46 104 67t105 22q29-57 29-121 0-49-15-94 76-89 76-222z" horiz-adv-x="928.6" /> - -<glyph glyph-name="terminal" unicode="" d="M327 302l-261-261q-5-5-12-5t-13 5l-28 28q-6 6-6 13t6 13l219 219-219 220q-6 5-6 12t6 13l28 28q5 6 13 6t12-6l261-260q5-5 5-13t-5-12z m602-256v-35q0-8-5-13t-13-5h-536q-8 0-13 5t-5 13v35q0 8 5 13t13 5h536q8 0 13-5t5-13z" horiz-adv-x="928.6" /> - -<glyph glyph-name="rocket" unicode="" d="M804 600q0 22-16 38t-38 16-38-16-16-38 16-38 38-16 38 16 16 38z m125 161q0-139-43-240t-141-202q-45-44-109-98l-11-211q-1-9-9-15l-214-125q-4-2-9-2-7 0-13 5l-36 36q-7 7-4 17l47 155-156 156-154-47q-2-1-6-1-7 0-12 5l-36 36q-10 11-3 22l125 214q6 8 15 9l211 11q54 64 98 109 105 104 200 144t241 40q7 0 13-6t6-12z" horiz-adv-x="928.6" /> - -<glyph glyph-name="rss-squared" unicode="" d="M286 136q0 29-21 50t-51 21-50-21-21-50 21-51 50-21 51 21 21 51z m196-53q-8 130-99 222t-221 98q-8 1-14-5t-5-13v-71q0-7 5-12t12-6q86-6 147-68t67-147q1-7 6-12t12-5h72q7 0 13 6t5 13z m214 0q-3 86-31 166t-78 145-115 114-145 78-166 31q-7 1-13-5-5-5-5-13v-71q0-7 5-12t12-6q114-4 211-62t156-155 62-211q0-8 5-13t13-5h71q7 0 13 6 6 5 5 13z m161 535v-536q0-66-47-113t-114-48h-535q-67 0-114 48t-47 113v536q0 66 47 113t114 48h535q67 0 114-48t47-113z" horiz-adv-x="857.1" /> - -<glyph glyph-name="youtube-squared" unicode="" d="M513 123v88q0 27-16 27-10 0-19-8v-125q9-9 19-9 16 0 16 27z m103 68h36v19q0 28-18 28t-18-28v-19z m-319 148v-39h-45v-236h-41v236h-44v39h130z m112-70v-205h-37v23q-22-25-43-25-18 0-23 15-3 10-3 30v162h36v-151q0-13 1-14 0-8 8-8 11 0 24 17v156h37z m141-62v-81q0-29-4-41-7-23-30-23-19 0-38 22v-20h-37v275h37v-89q18 22 38 22 23 0 30-24 4-11 4-41z m140-72v-5q0-16-1-24-2-12-9-22-15-22-44-22-29 0-46 21-11 15-11 48v72q0 33 11 48 16 21 45 21t43-21q12-16 12-48v-43h-74v-36q0-28 19-28 13 0 16 14 0 1 1 4t0 9v12h38z m-252 460v-87q0-28-18-28t-18 28v87q0 29 18 29t18-29z m298-398q0 99-11 145-6 25-24 41t-42 20q-76 8-230 8-154 0-230-8-24-3-42-20t-24-41q-11-48-11-145 0-98 11-145 5-24 24-41t42-19q76-9 230-9t230 9q24 2 42 19t23 41q12 47 12 145z m-422 363l50 166h-41l-29-109-29 109h-44q4-13 13-39l13-38q20-58 26-89v-112h41v112z m161-45v73q0 32-11 48-16 22-44 22-28 0-43-22-12-16-12-48v-73q0-32 12-48 15-22 43-22 28 0 44 22 11 15 11 48z m102-67h37v207h-37v-158q-13-17-24-17-8 0-9 8 0 2 0 15v152h-38v-164q0-20 4-30 6-16 24-16 20 0 43 26v-23z m280 170v-536q0-66-47-113t-114-48h-535q-67 0-114 48t-47 113v536q0 66 47 113t114 48h535q67 0 114-48t47-113z" horiz-adv-x="857.1" /> - -<glyph glyph-name="stackoverflow" unicode="" d="M719-61h-624v268h-89v-357h803v357h-90v-268z m-525 293l18 87 437-92-18-87z m57 208l38 82 404-189-37-81z m112 199l57 69 343-287-57-68z m222 211l266-358-71-53-267 357z m-401-821v89h447v-89h-447z" horiz-adv-x="857.1" /> - -<glyph glyph-name="instagram" unicode="" d="M571 350q0 59-41 101t-101 42-101-42-42-101 42-101 101-42 101 42 41 101z m77 0q0-91-64-156t-155-64-156 64-64 156 64 156 156 64 155-64 64-156z m61 229q0-21-15-36t-37-15-36 15-15 36 15 36 36 15 37-15 15-36z m-280 123q-4 0-43 0t-59 0-54-2-57-5-40-11q-28-11-49-32t-33-49q-6-16-10-40t-6-58-1-53 0-59 0-43 0-43 0-59 1-53 6-58 10-40q12-28 33-49t49-32q16-6 40-11t57-5 54-2 59 0 43 0 42 0 59 0 54 2 58 5 39 11q28 11 50 32t32 49q6 16 10 40t6 58 1 53 0 59 0 43 0 43 0 59-1 53-6 58-10 40q-11 28-32 49t-50 32q-16 6-39 11t-58 5-54 2-59 0-42 0z m428-352q0-128-3-177-5-116-69-180t-179-69q-50-3-177-3t-177 3q-116 6-180 69t-69 180q-3 49-3 177t3 177q5 116 69 180t180 69q49 3 177 3t177-3q116-6 179-69t69-180q3-49 3-177z" horiz-adv-x="857.1" /> - -<glyph glyph-name="space-shuttle" unicode="" d="M346 225q-61-36-150-36h-71v36h-36q-7 0-12 13t-6 32q0 13 4 27-32 1-53 6t-22 11 22 12 53 6q-4 14-4 27 0 18 6 32t12 13h36v35h71q89 0 150-35h621q24-4 60-10t44-8q50-9 84-23t47-26 12-23-12-22-47-26-84-23q-8-2-44-8t-60-10h-621z m624 141q30-20 30-52t-30-51l46-17q38 27 38 68t-38 68z m-621-150h566q-121-21-254-45-32 0-63-13t-47-27l-15-13-161-161q-14-14-39-25t-50-11h-54l-52 259h16q88 0 153 36z m-153 232h-16l52 259h54q25 0 50-10t39-26l161-160q2-2 6-6t17-13 27-16 34-13 41-6l254-44h-566q-65 35-153 35z" horiz-adv-x="1214.3" /> - -<glyph glyph-name="reddit-squared" unicode="" d="M524 220q7-7 0-14-30-30-95-30t-96 30q-7 7 0 14 3 3 7 3t8-3q23-23 81-23t81 23q2 3 7 3t7-3z m-147 87q0-17-13-30t-30-13-30 13-13 30q0 18 13 30t30 13 31-13 12-30z m189 0q0-17-13-30t-30-13-30 13-13 30q0 18 13 30t30 13 30-13 13-30z m120 58q0 23-17 40t-41 16q-23 0-40-17-63 44-149 46l30 136 95-22q1-18 13-30t30-13q18 0 31 13t12 30-12 31-31 12q-27 0-38-24l-106 24q-9 3-11-8l-34-149q-86-3-148-46-17 17-41 17-24 0-41-16t-17-40q0-17 9-31t24-21q-3-14-3-27 0-68 67-116t161-49q95 0 162 49t67 116q0 14-3 27 14 7 22 21t9 31z m171 253v-536q0-66-47-113t-114-48h-535q-67 0-114 48t-47 113v536q0 66 47 113t114 48h535q67 0 114-48t47-113z" horiz-adv-x="857.1" /> - -<glyph glyph-name="share" unicode="" d="M679 279q74 0 126-53t52-126-52-126-126-53-127 53-52 126q0 7 1 19l-201 100q-51-48-121-48-75 0-127 53t-52 126 52 126 127 53q70 0 121-48l201 100q-1 12-1 19 0 74 52 126t127 53 126-53 52-126-52-126-126-53q-71 0-122 48l-201-100q1-12 1-19t-1-19l201-100q51 48 122 48z" horiz-adv-x="857.1" /> - -<glyph glyph-name="paypal" unicode="" d="M848 490q10-47-3-114-48-248-315-248h-24q-14 0-25-9t-13-24l-3-11-30-193-1-8q-3-15-14-24t-25-9h-140q-12 0-18 8t-5 20q5 32 14 94t15 94 15 93 15 94q3 21 24 21h73q75-2 132 11 98 22 160 81 57 53 87 137 13 39 19 74 1 4 2 4t2 1 3-2q44-33 55-90z m-96 157q0-60-26-132-45-130-168-176-64-22-141-23 0-1-50-1l-51 1q-55 0-65-54-2-4-48-295 0-6-7-6h-164q-12 0-21 9t-6 22l130 821q2 16 15 26t29 11h333q19 0 55-7t62-18q60-23 91-69t32-109z" horiz-adv-x="857.1" /> - -<glyph glyph-name="address-card" unicode="" d="M571 219q0 36-5 65t-16 58-34 43-54 16q-3-2-17-10t-21-12-19-9-24-9-24-2-23 2-24 9-20 9-21 12-17 10q-32 0-54-16t-34-43-16-58-5-65 21-60 50-23h286q30 0 51 23t20 60z m-87 290q0 53-37 90t-90 37-89-37-37-90 37-89 89-38 90 38 37 89z m516-284v36q0 8-5 13t-13 5h-321q-8 0-13-5t-5-13v-36q0-8 5-13t13-5h321q8 0 13 5t5 13z m0 145v31q0 9-6 15t-14 5h-317q-8 0-14-5t-6-15v-31q0-8 6-14t14-6h317q8 0 14 6t6 14z m0 141v35q0 8-5 13t-13 5h-321q-8 0-13-5t-5-13v-35q0-8 5-13t13-5h321q8 0 13 5t5 13z m143 178v-678q0-37-26-63t-63-27h-197v54q0 8-5 13t-13 5h-35q-8 0-13-5t-5-13v-54h-429v54q0 8-5 13t-13 5h-35q-8 0-13-5t-5-13v-54h-197q-36 0-63 27t-26 63v678q0 37 26 63t63 27h965q36 0 63-27t26-63z" horiz-adv-x="1142.9" /> - -<glyph glyph-name="twitter-squared" unicode="" d="M714 510q-31-14-67-19 38 22 52 65-37-21-75-28-34 36-85 36-49 0-83-34t-35-83q0-16 3-27-72 4-135 37t-107 86q-16-28-16-59 0-64 51-98-27 1-56 15v-1q0-42 28-75t68-40q-16-5-28-5-7 0-22 3 12-36 42-59t67-23q-64-50-145-50-15 0-28 2 82-53 180-53 62 0 117 20t94 53 67 76 42 91 13 94q0 10 0 15 35 25 58 61z m143 108v-536q0-66-47-113t-114-48h-535q-67 0-114 48t-47 113v536q0 66 47 113t114 48h535q67 0 114-48t47-113z" horiz-adv-x="857.1" /> - -<glyph glyph-name="facebook-squared" unicode="" d="M696 779q67 0 114-48t47-113v-536q0-66-47-113t-114-48h-104v333h111l16 129h-127v83q0 31 13 46t51 16l68 1v115q-35 5-100 5-75 0-121-44t-45-127v-95h-112v-129h112v-333h-297q-67 0-114 48t-47 113v536q0 66 47 113t114 48h535z" horiz-adv-x="857.1" /> - -<glyph glyph-name="linkedin-squared" unicode="" d="M132 61h129v387h-129v-387z m138 507q-1 29-21 48t-51 19-53-19-21-48q0-29 20-48t52-19h0q33 0 53 19t21 48z m326-507h129v222q0 86-41 130t-107 44q-76 0-117-65h1v56h-129q2-37 0-387h129v217q0 21 4 31 8 19 25 33t41 14q65 0 65-88v-207z m261 557v-536q0-66-47-113t-114-48h-535q-67 0-114 48t-47 113v536q0 66 47 113t114 48h535q67 0 114-48t47-113z" horiz-adv-x="857.1" /> -</font> -</defs> -</svg>
\ No newline at end of file diff --git a/static/fonts/icons/icons.ttf b/static/fonts/icons/icons.ttf Binary files differdeleted file mode 100644 index f33ed13..0000000 --- a/static/fonts/icons/icons.ttf +++ /dev/null diff --git a/static/fonts/icons/icons.woff b/static/fonts/icons/icons.woff Binary files differindex 7528cb9..1e82e1c 100644 --- a/static/fonts/icons/icons.woff +++ b/static/fonts/icons/icons.woff diff --git a/static/fonts/icons/icons.woff2 b/static/fonts/icons/icons.woff2 Binary files differindex ad2b0e7..5fd410b 100644 --- a/static/fonts/icons/icons.woff2 +++ b/static/fonts/icons/icons.woff2 @@ -3,9 +3,9 @@ license = "Apache License 2.0" licenselink = "https://github.com/kdevo/osprey-delight/blob/master/LICENSE.md" description = "Osprey Delight is a sugar-free version of the Osprey theme by Toma Nistor functioning as a blazingly fast single page portfolio perfectly suited to show off your awesome work!" homepage = "https://github.com/kdevo/osprey-delight" -tags = ["portfolio", "gallery", "minimalist", "responsive", "flexbox", "fast", "projects", "onepage", "fast"] -features = ["portfolio", "contact-form", "github", "lazyloading"] -min_version = "0.65.0" +tags = ["portfolio", "gallery", "minimalist", "responsive", "flexbox", "projects", "onepage", "fast"] +features = ["portfolio", "contact-form", "github", "lazyload", "blog"] +min_version = "0.80.0" authors = [ {name = "kdevo", homepage = "https://kdevo.github.io/"} |
