opravit syntax

* Fix js for correct theme load

* Use dataTheme directly instead ternary operator

.github/workflows/build-jekyll.yml

@@ -23,11 +23,11 @@ jobs:
       - uses: jeffreytse/jekyll-deploy-action@master
         with:
           provider: 'github'
-          token: ${{ secrets.GH_TOKEN }} # It's your Personal Access Token(PAT)
+          token: ${{ secrets.GITHUB_TOKEN }} # It's your Personal Access Token(PAT)
           repository: ''             # Default is current repository
           branch: 'gh-pages'         # Default is gh-pages for github provider
           jekyll_src: './'           # Default is root directory
           jekyll_cfg: '_config.yml'  # Default is _config.yml
-          jekyll_baseurl: '/jekyll-theme-yat'  # Default is empty
-          cname: ''                  # Default is to not use a cname
+          jekyll_baseurl: ''  # Default is empty
+          cname: 'caras.cafe'                  # Default is to not use a cname
           actor: ''                  # Default is the GITHUB_ACTOR

Gemfile

@@ -2,3 +2,4 @@
 
 source "https://rubygems.org"
 gemspec
+

README.md

@@ -1,150 +1,54 @@
-# jekyll-theme-yat
-[![Github Pages](https://github.com/jeffreytse/jekyll-theme-yat/workflows/Github%20Pages/badge.svg)](https://jeffreytse.github.io/jekyll-theme-yat)
-[![Gem Version](https://badge.fury.io/rb/jekyll-theme-yat.svg)](http://badge.fury.io/rb/jekyll-theme-yat)
-[![License: MIT](https://img.shields.io/badge/License-MIT-brightgreen.svg)](https://opensource.org/licenses/MIT)
-[![Donate (Liberapay)](http://img.shields.io/liberapay/goal/jeffreytse.svg?logo=liberapay)](https://liberapay.com/jeffreytse)
-[![Donate (Patreon)](https://img.shields.io/badge/support-patreon-F96854.svg?style=flat-square)](https://patreon.com/jeffreytse)
-<a href="https://ko-fi.com/jeffreytse">
+<div align="center">
+  <br>
+
+  <a href="https://github.com/jeffreytse/jekyll-theme-yat">
+    <img alt="jekyll-theme-yat →~ jekyll" src="https://user-images.githubusercontent.com/9413601/106478481-346fdf00-64e4-11eb-9385-1ab5329c3234.png" width="600">
+  </a>
+
+  <h1>JEKYLL YAT THEME</h1>
+
+</div>
+
+<h4 align="center">
+  <a href="https://jekyllrb.com/" target="_blank"><code>Jekyll</code></a> theme for elegant writers.
+</h4>
+
+<p align="center">
+  <a href="https://jeffreytse.github.io/jekyll-theme-yat">
+    <img src="https://github.com/jeffreytse/jekyll-theme-yat/workflows/Github%20Pages/badge.svg"
+      alt="Github Pages" />
+  </a>
+
+  <a href="https://badge.fury.io/rb/jekyll-theme-yat">
+    <img src="https://badge.fury.io/rb/jekyll-theme-yat.svg"
+      alt="Gem Version" />
+  </a>
+
+  <a href="https://opensource.org/licenses/MIT">
+    <img src="https://img.shields.io/badge/License-MIT-brightgreen.svg"
+      alt="License: MIT" />
+  </a>
+
+  <a href="https://liberapay.com/jeffreytse">
+    <img src="https://img.shields.io/liberapay/goal/jeffreytse.svg?logo=liberapay"
+      alt="Donate (Liberapay)" />
+  </a>
+
+  <a href="https://patreon.com/jeffreytse">
+    <img src="https://img.shields.io/badge/support-patreon-F96854.svg?style=flat-square"
+      alt="Donate (Patreon)" />
+  </a>
+
+  <a href="https://ko-fi.com/jeffreytse">
   <img height="20" src="https://www.ko-fi.com/img/githubbutton_sm.svg"
-    alt="Donate (Ko-fi)" />
-</a>
-
-Hey, nice to meet you, you found this [Jekyll][jekyll] theme. Here the
-**Yet Another Theme** is a modern responsive theme, and it's quiet clear,
-clean and neat for writers and posts. **If you like the theme, give it
-a star!**
-
-
-<p align="center">
-
-  <img src="https://user-images.githubusercontent.com/9413601/91842897-6a840b00-ec87-11ea-95ca-52abcc1ac063.png" alt="demo-screenshot" width="780px"/>
-
+  alt="Donate (Ko-fi)" />
+  </a>
 </p>
 
-<h3 align="center">🌌 Night Mode</h3>
+<div align="center">
+  <sub>Built with ❤︎ by
+  <a href="https://jeffreytse.net">jeffreytse</a> and
+  <a href="https://github.com/jeffreytse/jekyll-theme-yat/graphs/contributors">contributors </a>
+  </sub>
+</div>
 
-<p align="center">
-
-  <img src="https://user-images.githubusercontent.com/9413601/94983351-760f6e00-0574-11eb-9494-5303ad6228dc.gif" alt="demo-screenshot" width="780px"/>
-
-</p>
-
-## Features
-
-- Support beautiful __Night Mode__.
-- Modern responsive web design.
-- Full layouts `home`, `post`, `tags`, `archive` and `about`.
-- Uses font awesome 5 for icons.
-- Beautiful Syntax Highlight using [hilight.js][hilight-js].
-- RSS support using [Jekyll Feed][jekyll-feed] gem.
-- Optimized for search engines using [Jekyll Seo Tag][jekyll-seo-tag] gem.
-- Sitemap support using [Jekyll Sitemap][jekyll-sitemap] gem.
-- Complex and flexible table support using [Jekyll Spaceship][jekyll-spaceship] gem.
-- MathJAX and LaTeX optional support using [Jekyll Spaceship][jekyll-spaceship] gem.
-- Media (Youtube, Spotify, etc.) support using [Jekyll Spaceship][jekyll-spaceship] gem.
-- Diagram (PlantUML, Mermaid) support using [Jekyll Spaceship][jekyll-spaceship] gem.
-- Google Translation support.
-- New post tag support.
-
-Also, visit the [Live Demo][yat-live-demo] site for the theme.
-
-## Installation
-
-There are three ways to install:
-
-- As a [gem-based theme](https://jekyllrb.com/docs/themes/#understanding-gem-based-themes).
-- As a [remote theme](https://blog.github.com/2017-11-29-use-any-theme-with-github-pages/) (GitHub Pages compatible).
-- Forking/directly copying all of the theme files into your project.
-
-### Gem-based Theme Method
-
-Add this line to your Jekyll site's `Gemfile`:
-
-```ruby
-gem "jekyll-theme-yat"
-```
-
-And add this line to your Jekyll site's `_config.yml`:
-
-```yaml
-theme: jekyll-theme-yat
-```
-
-And then execute:
-
-```bash
-$ bundle
-```
-
-Or install it yourself as:
-
-```bash
-$ gem install jekyll-theme-yat
-```
-
-### Remote Theme Method with GitHub Pages
-
-Remote themes are similar to Gem-based themes, but do not require `Gemfile` changes or whitelisting making them ideal for sites hosted with GitHub Pages.
-
-To install:
-
-Add this line to your Jekyll site's `Gemfile`:
-
-```ruby
-gem "github-pages", group: :jekyll_plugins
-```
-
-And add this line to your Jekyll site's `_config.yml`:
-
-```yaml
-# theme: owner/name --> Don't forget to remove/comment the gem-based theme option
-remote_theme: "jeffreytse/jekyll-theme-yat"
-```
-
-And then execute:
-
-```bash
-$ bundle
-```
-
-## GitHub Pages without limitation
-
-GitHub Pages runs in `safe` mode and only allows [a set of whitelisted plugins/themes](https://pages.github.com/versions/). __In other words, the third-party gems will not work normally__.
-
-To use the third-party gem in GitHub Pages without limitation:
-
-Here is a GitHub Action named [jekyll-deploy-action](https://github.com/jeffreytse/jekyll-deploy-action) for Jekyll site deployment conveniently. 👍
-
-
-## Usage
-
-Add or update your available layouts, includes, sass and/or assets.
-
-## Development
-
-To set up your environment to develop this theme, run `bundle install`.
-
-Your theme is setup just like a normal Jekyll site! To test your theme, run `bundle exec jekyll serve` and open your browser at `http://localhost:4000`. This starts a Jekyll server using your theme. Add pages, documents, data, etc. like normal to test your theme's contents. As you make modifications to your theme and to your content, your site will regenerate and you should see the changes in the browser after a refresh, just like normal.
-
-When your theme is released, only the files in `_data`, `_layouts`, `_includes`, `_sass` and `assets` tracked with Git will be bundled.
-To add a custom directory to your theme-gem, please edit the regexp in `jekyll-theme-yat.gemspec` accordingly.
-
-## Contributing
-
-Issues and Pull Requests are greatly appreciated. If you've never contributed to an open source project before I'm more than happy to walk you through how to create a pull request.
-
-You can start by [opening an issue](https://github.com/jeffreytse/jekyll-theme-yat/issues/new) describing the problem that you're looking to resolve and we'll go from there.
-
-## License
-
-This theme is licensed under the [MIT license](https://opensource.org/licenses/mit-license.php) © JeffreyTse.
-
-<!-- External links -->
-[jekyll]: https://jekyllrb.com/
-[yat-git-repo]: https://github.com/jeffreytse/jekyll-theme-yat/
-[yat-live-demo]: https://jeffreytse.github.io/jekyll-theme-yat/
-[jekyll-spaceship]: https://github.com/jeffreytse/jekyll-spaceship
-[jekyll-seo-tag]: https://github.com/jekyll/jekyll-seo-tag
-[jekyll-sitemap]: https://github.com/jekyll/jekyll-sitemap
-[jekyll-feed]: https://github.com/jekyll/jekyll-feed
-[hilight-js]: https://github.com/highlightjs/highlight.js

_config.yml

@@ -24,17 +24,29 @@
 # You can create any custom variable you would like, and they will be accessible
 # in the templates via {{ site.myvariable }}.
 
-title: Your awesome title
-email: your-email@domain.com
-author: GitHub User
-copyright: Copyright © 1970-2010
+title: Matyáš Caras
+email: matyas@caras.cafe
+author: hernikplays
+
+# Copyright setting
+# You can use any html code, currently below placeholders are available:
+# * current year: {currentYear}
+# * author: {author} (Value is the same as site.author)
+# * copyright: (c) - ©
+# * copyleft: (cleft)
+# * sound recording copyright: (p) - ℗
+#
+# For example:
+#   "Copyright (c) 2017-{currentYear} <a href="https://example.com">{author}</a>"
+#   "Copyright © 2017-2021 Foobar"
+#
+copyright: 'Copyright (c) 2021-{currentYear} {author}, obsah dostupný pod licencí <a href="http://creativecommons.org/licenses/by-sa/4.0/" target="_blank" rel="license noopener noreferrer" style="display:inline-block;">CC BY-SA 4.0<img style="height:22px!important;margin-left:3px;vertical-align:text-bottom;" src="https://mirrors.creativecommons.org/presskit/icons/cc.svg"><img style="height:22px!important;margin-left:3px;vertical-align:text-bottom;" src="https://mirrors.creativecommons.org/presskit/icons/by.svg"><img style="height:22px!important;margin-left:3px;vertical-align:text-bottom;" src="https://mirrors.creativecommons.org/presskit/icons/sa.svg"></a>'
+
 description: >- # this means to ignore newlines until "baseurl:"
-  Write an awesome description for your new site here. You can edit this
-  line in _config.yml. It will appear in your document head meta (for
-  Google search results) and in your feed.xml site description.
+  Mít blog je dnes trendy
 
 baseurl: "" # the subpath of your site, e.g. /blog
-url: "" # the base hostname & protocol for your site, e.g. http://example.com
+url: "https://blog.caras.cafe" # the base hostname & protocol for your site, e.g. https://example.com
 favicon: "" # the favicon for your site
 
 # Yat date format
@@ -48,6 +60,9 @@ yat:
 # If you don't want transparent header, you can set false
 # header_transparent: true
 
+# If you want to change the content width, you can set to another value
+# content_width: "920px"
+
 # Google analytics
 # google_analytics: [Tracking ID]
 
@@ -61,31 +76,28 @@ yat:
 # langs refer to https://cloud.google.com/translate/docs/languages
 # translate_langs:
 #   - lang: en
+#     img: https://cdn.countryflags.com/thumbs/united-states-of-america/flag-400.png
 #     text: English
 #
 #   - lang: fr
-#     img: https://www.countryflags.io/fr/flat/64.png
-#     text: Franch
+#     img: https://cdn.countryflags.com/thumbs/france/flag-400.png
+#     text: French
 #
 #   - lang: zh-CN
-#     img: https://www.countryflags.io/cn/flat/64.png
+#     img: https://cdn.countryflags.com/thumbs/china/flag-400.png
 #     text: Chinese(Simple)
 #
-#   - lang: zh-TW
-#     img: https://www.countryflags.io/tw/flat/64.png
-#     text: Chinese(Traditional)
-#
 #   - lang: ja
-#     img: https://www.countryflags.io/jp/flat/64.png
-#     text: Japan
+#     img: https://cdn.countryflags.com/thumbs/japan/flag-400.png
+#     text: Japanese
 #
 #   - lang: ko
-#     img: https://www.countryflags.io/kr/flat/64.png
+#     img: https://cdn.countryflags.com/thumbs/south-korea/flag-400.png
 #     text: Korean
 #
 #   - lang: ru
-#     img: https://www.countryflags.io/ru/flat/64.png
-#     text: Russia
+#     img: https://cdn.countryflags.com/thumbs/russia/flag-400.png
+#     text: Russian
 
 # You can choose a theme color
 # Default theme colors as below:
@@ -98,6 +110,17 @@ yat:
 # Custom color as below:
 # theme_color: "#882250"
 
+# You can choose a brand color
+# Default brand colors as below:
+# orangered: #ff5100
+# greatgold: #f2cb05
+# greenblue: #389092
+#
+# brand_color: orangered
+#
+# Custom color as below:
+# brand_color: "#1a8e42"
+
 # Night/Dark mode
 # Default mode is "auto", "auto" is for auto nightshift
 # (19:00 - 07:00), "manual" is for manual toggle, and
@@ -135,6 +158,25 @@ yat:
 #     subheading: "Your awesome subheading"
 #     banner: "Your image url"
 
+# Banner default settings
+# These banner settings are for global banner default, but you can also
+# config it by the front matter for one specific post
+# banner:
+#   video: null             # Video banner source
+#   loop: true              # Video loop
+#   volume: 0               # Video volume (100% is 1.0)
+#   start_at: 0             # Video start time
+#   image: null             # Image banner source
+#   opacity: 1.0            # Banner opacity (100% is 1.0)
+#   background: "rgba(0, 0, 0, 0.8)"  # Banner background (Could be a image)
+#   height: "640px"         # Banner default height
+#   min_height: null        # Banner minimum height
+#   heading_style: null     # Custom heading style (e.g. "font-weight: bold; text-decoration: underline")
+#   subheading_style: null  # Custom subheading style (e.g. color: gold)
+
+# Excerpt size setting
+# excerpt_size: 350
+
 # Pagination setting
 # paginate: 5
 
@@ -150,6 +192,17 @@ yat:
 #   client_secret: "Your client secret"
 #   redirect_uri: "Your redirect url"   # If you use a custom domain name
 
+# Utterances comments
+# See https://utteranc.es/
+# set follow_site_theme true to make utterances' theme follow the site's
+
+# utterances:
+#   repo: "owner/repo"
+#   issue_term: "title"
+#   label: "utterances comment"
+#   theme: "github-light"
+#   follow_site_theme: true
+
 # Build settings
 # highlighter: none
 markdown: kramdown

_data/defaults.yml

@@ -1,4 +1,3 @@
 home:
-  heading: "Your awesome heading"
-  subheading: "Your awesome subheading"
-  banner: "Your image url"
+  heading: "Hernikův Blog"
+  subheading: "Kecy a bláboly"

_data/translate_langs.yml

@@ -1,26 +0,0 @@
-# Translate languges
-# langs refer to https://cloud.google.com/translate/docs/languages
-
-- lang: en
-  img: https://www.countryflags.io/us/flat/64.png
-  text: English
-
-- lang: fr
-  img: https://www.countryflags.io/fr/flat/64.png
-  text: Franch
-
-- lang: zh-CN
-  img: https://www.countryflags.io/cn/flat/64.png
-  text: Chinese(Simple)
-
-- lang: ja
-  img: https://www.countryflags.io/jp/flat/64.png
-  text: Japan
-
-- lang: ko
-  img: https://www.countryflags.io/kr/flat/64.png
-  text: Korean
-
-- lang: ru
-  img: https://www.countryflags.io/ru/flat/64.png
-  text: Russia

_includes/custom-head.html

@@ -0,0 +1,6 @@
+{% comment %}
+  Placeholder to allow defining custom head, in principle, you can add anything here, e.g. favicons:
+
+  1. Head over to https://realfavicongenerator.net/ to add your own favicons.
+  2. Customize default _includes/custom-head.html in your source directory and insert the given code snippet.
+{% endcomment %}

_includes/extensions/click-to-top.html

@@ -0,0 +1,18 @@
+<div id="click-to-top" class="click-to-top">
+  <i class="fa fa-arrow-up"></i>
+</div>
+<script>
+  (function () {
+    const clickToTop = document.getElementById('click-to-top');
+    window.addEventListener('scroll', () => {
+      if (window.scrollY > 100) {
+        clickToTop.classList.add('show')
+      }else {
+        clickToTop.classList.remove('show')
+      }
+    });
+    clickToTop.addEventListener('click', () => {
+      window.smoothScrollTo(0);
+    });
+  })();
+</script>

_includes/extensions/comments/gitment.html

@@ -1,15 +1,19 @@
-  <div id="gitment_thread"></div>
+  <div id="gitment_thread" class="giscus"></div>
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/theme-next/theme-next-gitment@1/default.css"/>
   <script src="https://cdn.jsdelivr.net/gh/theme-next/theme-next-gitment@1/gitment.browser.js"></script>
-  <script>
-    var gitment = new Gitment({
-      id: '{{ page.id }}',
-      owner: '{{ site.gitment.username }}',
-      repo: '{{ site.gitment.repo }}',
-      oauth: {
-        client_id: '{{ site.gitment.client_id }}',
-        client_secret: '{{ site.gitment.client_secret }}',
-      },
-    });
-    gitment.render('gitment_thread')
-  </script>
+  <script src="https://giscus.app/client.js"
+        data-repo="hernikplays/blog"
+        data-repo-id="R_kgDOHr2B6w"
+        data-category="General"
+        data-category-id="DIC_kwDOHr2B684CSIhA"
+        data-mapping="pathname"
+        data-strict="0"
+        data-reactions-enabled="1"
+        data-emit-metadata="0"
+        data-input-position="top"
+        data-theme="transparent_dark"
+        data-lang="en"
+        data-loading="lazy"
+        crossorigin="anonymous"
+        async>
+</script>

_includes/extensions/comments/utterances.html

@@ -0,0 +1,51 @@
+{%- if site.utterances.follow_site_theme -%}
+<div id="utterances-placeholder"></div>
+<script>
+  const utterancesThemeFromDataTheme = () => {
+    const dataTheme = document.documentElement.getAttribute('data-theme');
+    return `github-${dataTheme}`;
+  };
+
+  const setUtterancesTheme = () => {
+    const iframe = document.querySelector('.utterances-frame');
+    if (iframe) {
+      const message = {
+        type: 'set-theme',
+        theme: utterancesThemeFromDataTheme()
+      };
+      iframe.contentWindow.postMessage(message, 'https://utteranc.es');
+    }
+  }
+
+  // dynamic change
+  const observer = new MutationObserver((mutationsList, observer) => {
+    for (let mutation of mutationsList) {
+      if (mutation.type === 'attributes' && mutation.attributeName === 'data-theme') {
+        setUtterancesTheme();
+      }
+    }
+  });
+  observer.observe(document.documentElement, { attributes: true, childList: false, subtree: false });
+
+  let utterancesScript = document.createElement('script');
+  utterancesScript.async = true;
+  utterancesScript.src = 'https://utteranc.es/client.js';
+  utterancesScript.crossOrigin = 'anonymous';
+  utterancesScript.setAttribute('issue-term', '{{ site.utterances.issue_term }}');
+  utterancesScript.setAttribute('label', '{{ site.utterances.label }}');
+  utterancesScript.setAttribute('repo', '{{ site.utterances.repo }}');
+  utterancesScript.setAttribute('theme', utterancesThemeFromDataTheme());
+
+  const placeholder = document.getElementById('utterances-placeholder');
+  placeholder.parentNode.replaceChild(utterancesScript, placeholder);
+</script>
+{%- else -%}
+<script async
+        crossorigin="anonymous"
+        issue-term="{{ site.utterances.issue_term }}"
+        label="{{ site.utterances.label }}"
+        repo="{{ site.utterances.repo }}"
+        src="https://utteranc.es/client.js"
+        theme="{{ site.utterances.theme }}">
+ </script>
+{%- endif -%}

_includes/extensions/google-analytics.html

@@ -14,6 +14,6 @@
       ga('send', 'pageview');
     }
   }
-  initGoogleAnalytics();
+  window.addEventListener("load", initGoogleAnalytics);
 </script>
 

_includes/extensions/google-translate.html

@@ -2,6 +2,10 @@
   {% assign translate_langs = include.translate_langs %}
 {% endif %}
 
+{% if include.lang %}
+  {% assign lang = include.lang %}
+{% endif %}
+
 <div id="google_translate_element" style="display: none;">
 </div>
 
@@ -24,11 +28,17 @@
 <script type="text/javascript">
 function googleTranslateElementInit() {
   new google.translate.TranslateElement({
-    pageLanguage: '',
+    pageLanguage: '{{ lang }}',
     autoDisplay: false,
     layout: google.translate.TranslateElement.InlineLayout.VERTICAL
   }, 'google_translate_element');
 
+  // Links to cross-origin destinations are unsafe
+  var gll = document.getElementsByClassName('goog-logo-link')[0];
+  if (gll) {
+    gll.setAttribute('rel', 'noopener');
+  }
+
   function restoreLang() {
     var iframe = document.getElementsByClassName('goog-te-banner-frame')[0];
     if (!iframe) return;

_includes/extensions/hashlocate.html

@@ -1,6 +1,7 @@
 <script>
   function hashLocate(hashValue) {
     hashValue = hashValue.replace(/^.*#h-/, '');
+    hashValue = decodeURIComponent(hashValue);
     var element = document.getElementById(hashValue);
 
     if (!element) {

_includes/functions.html

@@ -16,6 +16,10 @@
   {%- include {{ include_path }} params=params-%}
 {%- endif -%}
 
+{%- if return == nil -%}
+  {%- assign return = include.default -%}
+{%- endif -%}
+
 {%- if func != 'log' -%}
   {%- assign msg = '[function]['
     | append: {{func}}

_includes/functions/get_article_excerpt.html

@@ -0,0 +1,39 @@
+{% if include.params.article %}
+  {% assign article = include.params.article %}
+{% endif %}
+
+{% if include.params.lang %}
+  {% assign lang = include.params.lang %}
+{% else %}
+  {% assign lang = lang | default: site.lang | default: "en" %}
+{% endif %}
+
+{% if include.params.excerpt_size %}
+  {% assign excerpt_size = include.params.excerpt_size %}
+{% else %}
+  {% assign excerpt_size = excerpt_size
+    | default: site.excerpt_size
+    | default: 350 %}
+{% endif %}
+
+{%- include functions.html func='get_article_words' -%}
+{% assign words = return %}
+
+{% assign _article = article | strip_html %}
+{% assign _words = _article | size %}
+
+{% assign _size = excerpt_size %}
+
+{% if lang != "en" %}
+  {% assign _size = words
+    | times: 1.0
+    | divided_by: _words
+    | times: _size
+    | round %}
+{% endif %}
+
+{% if _size > excerpt_size %}
+  {% assign _size = excerpt_size %}
+{% endif %}
+
+{% assign return = _article | truncate: _size %}

_includes/functions/get_article_words.html

@@ -0,0 +1,26 @@
+{% if include.params.article %}
+  {% assign article = include.params.article %}
+{% endif %}
+
+{% if include.params.lang %}
+  {% assign lang = include.params.lang %}
+{% else %}
+  {% assign lang = lang | default: site.lang | default: "en" %}
+{% endif %}
+
+{% assign words = article | number_of_words %}
+
+{% if lang != "en" %}
+  {% assign words = words
+    | times: 0.6
+    | round %}
+  {% assign words = article
+    | strip_html
+    | strip_newlines
+    | size
+    | times: 0.4
+    | plus: words
+    | round %}
+{% endif %}
+
+{% assign return = words %}

_includes/functions/get_banner.html

@@ -0,0 +1,68 @@
+{%- include functions.html func='log' level='debug' msg='Get banner value' -%}
+{% assign name = 'banner' %}
+{%- include functions.html func='get_value' -%}
+{% assign banner = return %}
+
+{%- if banner.first -%}
+  {%- include functions.html func='log' level='debug' msg='Get banner_image value' -%}
+  {% assign name = 'banner.image' %}
+  {%- include functions.html func='get_value' -%}
+  {% assign banner_image = return | relative_url %}
+{%- else -%}
+  {% assign banner_image = banner | relative_url %}
+{%- endif -%}
+
+{%- include functions.html func='log' level='debug' msg='Get banner_background value' -%}
+{% assign name = 'banner.background' %}
+{%- include functions.html func='get_value' -%}
+{% assign banner_background = return %}
+
+{%- include functions.html func='log' level='debug' msg='Get banner_opacity value' -%}
+{% assign name = 'banner.opacity' %}
+{%- include functions.html func='get_value' -%}
+{% assign banner_opacity = return %}
+
+{%- include functions.html func='log' level='debug' msg='Get banner_height value' -%}
+{% assign name = 'banner.height' %}
+{%- include functions.html func='get_value' -%}
+{% assign banner_height = return %}
+
+{%- include functions.html func='log' level='debug' msg='Get banner_min_height value' -%}
+{% assign name = 'banner.min_height' %}
+{%- include functions.html func='get_value' -%}
+{% assign banner_min_height = return %}
+
+{%- include functions.html func='log' level='debug' msg='Get banner_heading_style value' -%}
+{% assign name = 'banner.heading_style' %}
+{%- include functions.html func='get_value' -%}
+{% assign banner_heading_style = return %}
+
+{%- include functions.html func='log' level='debug' msg='Get banner_subheading_style value' -%}
+{% assign name = 'banner.subheading_style' %}
+{%- include functions.html func='get_value' -%}
+{% assign banner_subheading_style = return %}
+
+{%- include functions.html func='log' level='debug' msg='Get banner_video value' -%}
+{% assign name = 'banner.video' %}
+{%- include functions.html func='get_value' -%}
+{% assign banner_video = return %}
+
+{%- include functions.html func='log' level='debug' msg='Get banner_loop value' -%}
+{% assign name = 'banner.loop' %}
+{%- include functions.html func='get_value' default=true -%}
+{% assign banner_loop = return %}
+
+{%- include functions.html func='log' level='debug' msg='Get banner_volume value' -%}
+{% assign name = 'banner.volume' %}
+{%- include functions.html func='get_value' default=0 -%}
+{% assign banner_volume = return %}
+
+{%- include functions.html func='log' level='debug' msg='Get banner_start_at value' -%}
+{% assign name = 'banner.start_at' %}
+{%- include functions.html func='get_value' default=0 -%}
+{% assign banner_start_at = return %}
+
+{% if banner_image or banner_video %}
+  {% assign has_banner = true %}
+{% endif %}
+

_includes/functions/get_reading_time.html

@@ -2,14 +2,22 @@
   {% assign article = include.params.article %}
 {% endif %}
 
+{% if include.params.lang %}
+  {% assign lang = include.params.lang %}
+{% else %}
+  {% assign lang = lang | default: site.lang | default: "en" %}
+{% endif %}
+
 {% if include.params.speed %}
   {% assign speed = include.params.speed %}
 {% else %}
   {% assign speed = 160 %}
 {% endif %}
 
-{% assign total_mins = article
-  | number_of_words
+{%- include functions.html func='get_article_words' -%}
+{% assign words = return %}
+
+{% assign total_mins = words
   | divided_by: speed
   | at_least: 1 %}
 

_includes/functions/get_value.html

@@ -2,31 +2,41 @@
   {%- assign name = include.params.name -%}
 {%- endif -%}
 
-{%- assign keys = name | split:'.'- %}
+{%- assign return = nil -%}
+
+{%- assign keys = name | split:'.' -%}
 {%- assign name = keys.first -%}
-
-{%- if page[name] != nil -%}
-  {%- assign return = page[name] -%}
-{%- elsif site[name] != nil -%}
-  {%- assign return = site[name] -%}
-{%- elsif site.data[name] != nil -%}
-  {%- assign return = site.data[name] -%}
-{%- elsif site.defaults[page.layout][name] != nil -%}
-  {%- assign return = site.defaults[page.layout][name] -%}
-{%- elsif site.data.defaults[page.layout][name] != nil -%}
-  {%- assign return = site.data.defaults[page.layout][name] -%}
-{%- elsif layout[name] != nil -%}
-  {%- assign return = layout[name] -%}
-{%- else -%}
-  {%- assign return = include.params.default -%}
-{%- endif -%}
-
 {%- assign keys = keys | shift -%}
-{%- for key in keys -%}
-  {%- assign return = return[key] -%}
-  {%- if return == nil -%}
-    {%- assign return = include.params.default -%}
+
+{%- for step in (1..7) -%}
+
+  {%- case step -%}
+    {%- when 1 -%}
+      {%- assign return = page[name] -%}
+    {%- when 2 -%}
+      {%- assign return = site[name] -%}
+    {%- when 3 -%}
+      {%- assign return = site.data[name] -%}
+    {%- when 4 -%}
+      {%- assign return = site.defaults[page.layout][name] -%}
+    {%- when 5 -%}
+      {%- assign return = site.data.defaults[page.layout][name] -%}
+    {%- when 6 -%}
+      {%- assign return = layout[name] -%}
+    {%- else -%}
+      {%- assign return = include.params.default -%}
+  {%- endcase -%}
+
+  {%- for key in keys -%}
+    {%- assign return = return[key] -%}
+    {%- if return == nil -%}
+      {%- break -%}
+    {%- endif -%}
+  {%- endfor -%}
+
+  {%- if return != nil -%}
     {%- break -%}
   {%- endif -%}
+
 {%- endfor -%}
 

_includes/head.html

@@ -2,7 +2,7 @@
   <meta charset="utf-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1">
-  <meta name="google-translate-customization" content="108d9124921d80c3-80e20d618ff053c8-g4f02ec6f3dba68b7-c"></meta>
+  <meta name="google-translate-customization" content="108d9124921d80c3-80e20d618ff053c8-g4f02ec6f3dba68b7-c">
   {%- seo -%}
   <link rel="shortcut icon" href="{{ site.favicon }}">
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
@@ -14,4 +14,5 @@
   {%- include extensions/google-analytics.html -%}
   {%- endif -%}
   {%- include extensions/code-highlight.html -%}
+  {%- include custom-head.html -%}
 </head>

_includes/views/banner.html

@@ -3,11 +3,6 @@
 {%- include functions.html func='get_value' -%}
 {% assign banner_html = return %}
 
-{%- include functions.html func='log' level='debug' msg='Get banner value' -%}
-{% assign name = 'banner' %}
-{%- include functions.html func='get_value' -%}
-{% assign banner = return %}
-
 {%- include functions.html func='log' level='debug' msg='Get heading value' -%}
 {% assign name = 'heading' %}
 {%- include functions.html func='get_value' -%}
@@ -18,10 +13,96 @@
 {%- include functions.html func='get_value' -%}
 {% assign subheading = return %}
 
-{% if banner %}
+{%- include functions.html func='get_banner' -%}
+
+{%- if has_banner -%}
+  {%- if banner_background -%}
+  <style>
+    html .page-banner {
+      background: {{ banner_background }};
+    }
+  </style>
+  {%- endif -%}
+  {%- if banner_height -%}
+  <style>
+    {%- assign num = banner_height | times: 1 -%}
+    {%- assign unit = banner_height | replace_first: num -%}
+    {%- assign banner_min_height = banner_min_height | default: banner_height -%}
+    html .page-banner {
+      height:  {{ banner_height | times: 0.368 | append: unit }};
+      min-height: {{ banner_min_height }};
+    }
+    html[data-scroll-status="top"] .page-banner {
+      height: {{ banner_height }};
+    }
+  </style>
+  {%- endif -%}
+
+  {%- if banner_opacity -%}
+  <style>
+    html .page-banner .page-banner-img > *:first-child {
+      opacity: {{ banner_opacity }};
+    }
+
+    html[data-theme="dark"] .page-banner .page-banner-img > *:first-child {
+      opacity: {{ banner_opacity | times: 0.718 }};
+    }
+  </style>
+  {%- endif -%}
+  {%- if banner_heading_style -%}
+  <style>
+    html .page-banner .page-banner-inner > *:first-child > *:nth-child(1) {
+      {{ banner_heading_style }}
+    }
+  </style>
+  {%- endif -%}
+  {%- if banner_subheading_style -%}
+  <style>
+    html .page-banner .page-banner-inner > *:first-child > *:nth-child(2) {
+      {{ banner_subheading_style }}
+    }
+  </style>
+  {%- endif -%}
   <section class="page-banner">
     <div class="page-banner-img">
-      <div style="background-image: url({{ banner | relative_url }})"></div>
+      {%- if banner_video -%}
+        <video
+          autoplay=""
+          poster="{{ banner_image }}"
+          playsinline
+        >
+          <source src="{{ banner_video }}">
+        </video>
+        <script>
+          (function() {
+            var video = document.querySelector('.page-banner .page-banner-img > video');
+            var videoPlay = function() {
+              video.play().catch (function() {
+                  video.muted = true;
+                  video.play();
+                });
+            }
+
+            video.onloadstart = function() {
+              video.currentTime = {{ banner_start_at }};
+              video.volume = {{ banner_volume }};
+              video.muted = (video.volume == 0);
+              videoPlay();
+            }
+
+            video.onended = function() {
+              video.currentTime = {{ banner_start_at }};
+              video.volume = 0;
+            {%- if banner_loop -%}
+              video.play();
+            {%- endif -%}
+            }
+          })();
+        </script>
+      {%- else -%}
+        <div style="background-image: url({{ banner_image }})"></div>
+        <img class="img-placeholder" src="{{ banner_image }}">
+      {%- endif -%}
     </div>
     <div class="wrapper">
       <div class="page-banner-inner">

_includes/views/footer.html

@@ -3,10 +3,19 @@
 
   <div class="wrapper">
     <div class="site-footer-inner">
-      <div>{{ site.copyright }} {% if site.author %}@{{ site.author | escape }}{% endif %}</div>
+        {%- assign currentYear = 'now' | date: "%Y" -%}
+        {%- assign copyright = site.copyright
+            | replace: '{currentYear}', currentYear
+            | replace: '{author}', site.author
+            | replace: '(c)', '&copy;'
+            | replace: '(p)', '℗'
+            | replace: '(cleft)', '<span class="copyleft">&copy;</span>'
+        -%}
+      <div>{{ copyright }}</div>
       <div>Powered by <a title="Jekyll is a simple, blog-aware, static site
-      generator." href="http://jekyllrb.com/">Jekyll</a> &amp; <a title="Yat, yet
+      generator." href="https://jekyllrb.com/">Jekyll</a> &amp; <a title="Yat, yet
       another theme." href="https://github.com/jeffreytse/jekyll-theme-yat">Yat Theme</a>.</div>
+      <div><a rel="me" href="https://social.linux.pizza/@hernik">Mastodon</a></div>
       <div class="footer-col rss-subscribe">Subscribe <a href="{{ "/feed.xml" | relative_url }}">via RSS</a></div>
     </div>
   </div>

_includes/views/header.html

@@ -1,15 +1,12 @@
 
-{%- include functions.html func='log' level='debug' msg='Get banner value' -%}
-{%- assign name = 'banner' -%}
-{%- include functions.html func='get_value' -%}
-{% assign banner = return %}
+{%- include functions.html func='get_banner' -%}
 
 {%- include functions.html func='log' level='debug' msg='Get header_transparent value' -%}
 {%- assign name = 'header_transparent' -%}
 {%- include functions.html func='get_value' default=true -%}
 {%- assign header_transparent = return -%}
 
-{%- if banner and header_transparent -%}
+{%- if has_banner and header_transparent -%}
   {%- assign header_transparent_class = "site-header-transparent" -%}
 {%- endif -%}
 
@@ -47,6 +44,9 @@
             {%- include functions.html func='get_value' -%}
             {%- assign translate_langs = return -%}
             {%- if translate_langs.size > 0 -%}
+              {%- assign name = 'lang' -%}
+              {%- include functions.html func='get_value' default='en' -%}
+              {%- assign lang = return -%}
               <span class="page-link">
                   {%- include extensions/google-translate.html -%}
               </span>
@@ -59,7 +59,7 @@
 </header>
 
 <script>
-  (function() {
+  function initHeader() {
     var lastScrollY = getScrollPos().y;
     var documentElement = document.documentElement;
 
@@ -90,5 +90,6 @@
     });
 
     storeScrollData();
-  })();
+  }
+  document.addEventListener('DOMContentLoaded', initHeader);
 </script>

_includes/views/pagination.html

@@ -13,11 +13,14 @@
       {%- assign date_format = site.yat.date_format | default: "%b %-d, %Y" -%}
 
       {% assign article = post.content %}
+      {% assign lang = post.lang %}
       {%- include functions.html func='get_reading_time' -%}
       {% assign reading_time = return %}
+      {%- include functions.html func='get_article_excerpt' -%}
+      {% assign excerpt = return %}
+      {%- assign post_url = post.url | relative_url -%}
 
       <h2 class="post-title">
-        {%- assign post_url = post.url | relative_url -%}
         <a class="post-link" href="{{ post_url }}">
           {{ post.title | escape }}
         </a>
@@ -26,12 +29,14 @@
         <span class="post-date"><i class="fa fa-calendar"></i> {{ post.date | date: date_format }}</span>
         <span class="post-reading-time left-vsplit"><i class="fa fa-clock-o"></i> {{ reading_time }}</span>
       </div>
-      <p class="post-excerpt">
-        {{ post.content | strip_html | truncatewords: 50 }}
-      </p>
+      <a class="post-excerpt" href="{{ post_url }}">
+        <p>
+        {{ excerpt }} <span class="read_more">Read More</span>
+        </p>
+      </a>
       <div class="post-tags">
         {%- for tag in post.tags -%}
-        <a class="post-tag" href="/tags.html#{{tag}}">#{{tag}}</a>
+        <a class="post-tag" href="{{ '/tags.html ' | relative_url }}#{{tag}}">#{{tag}}</a>
         {%- endfor -%}
       </div>
     </li>

_includes/views/post-header.html

@@ -1,6 +1,6 @@
 <header class="post-header">
   <h1 class="post-title p-name" itemprop="name headline">{{ heading | default: page.title | escape }}</h1>
-  <h3 class="post-subtitle">{{ subheading | default: page.subtitle | escape }}</h3>
+  <h2 class="post-subtitle">{{ subheading | default: page.subtitle | escape }}</h2>
 
   <p class="post-meta">
     <time class="dt-published" datetime="{{ page.date | date_to_xmlschema }}" itemprop="datePublished">
@@ -9,6 +9,7 @@
     </time>
 
     {% assign article = page.content %}
+    {% assign lang = page.lang %}
     {%- include functions.html func='get_reading_time' -%}
     {% assign reading_time = return %}
     <span class="post-reading-time left-vsplit"><i class="fa fa-clock-o"></i> {{ reading_time }}</span>

_layouts/default.html

@@ -13,6 +13,8 @@
 
     {%- include extensions/theme-toggle.html -%}
 
+    {%- include extensions/click-to-top.html -%}
+
     <main class="page-content" aria-label="Content">
       <div class="wrapper">
         {{ content }}

_layouts/post.html

@@ -65,8 +65,8 @@ sidebar:
       {%- include extensions/comments/disqus.html -%}
       {%- endif -%}
 
-      {%- if site.gitment.username -%}
-      {%- include extensions/comments/gitment.html -%}
+      {%- if site.utterances.repo -%}
+      {%- include extensions/comments/utterances.html -%}
       {%- endif -%}
 
       {%- endif -%}

_posts/2015-02-28-test-markdown.md

@@ -1,76 +0,0 @@
----
-layout: post
-title: Test markdown
-subtitle: Each post also has a subtitle
-categories: markdown
-tags: [test]
----
-
-You can write regular [markdown](http://markdowntutorial.com/) here and Jekyll will automatically convert it to a nice webpage.  I strongly encourage you to [take 5 minutes to learn how to write in markdown](http://markdowntutorial.com/) - it'll teach you how to transform regular text into bold/italics/headings/tables/etc.
-
-**Here is some bold text**
-
-## Here is a secondary heading
-
-Here's a useless table:
-
-| Number | Next number | Previous number |
-| :------ |:--- | :--- |
-| Five | Six | Four |
-| Ten | Eleven | Nine |
-| Seven | Eight | Six |
-| Two | Three | One |
-
-
-How about a yummy crepe?
-
-![Crepe](https://s3-media3.fl.yelpcdn.com/bphoto/cQ1Yoa75m2yUFFbY2xwuqw/348s.jpg)
-
-It can also be centered!
-
-![Crepe](https://s3-media3.fl.yelpcdn.com/bphoto/cQ1Yoa75m2yUFFbY2xwuqw/348s.jpg){: .center-block :}
-
-Here's a code chunk:
-
-~~~
-var foo = function(x) {
-  return(x + 5);
-}
-foo(3)
-~~~
-
-And here is the same code with syntax highlighting:
-
-```javascript
-var foo = function(x) {
-  return(x + 5);
-}
-foo(3)
-```
-
-And here is the same code yet again but with line numbers:
-
-{% highlight javascript linenos %}
-var foo = function(x) {
-  return(x + 5);
-}
-foo(3)
-{% endhighlight %}
-
-## Boxes
-You can add notification, warning and error boxes like this:
-
-### Notification
-
-{: .box-note}
-**Note:** This is a notification box.
-
-### Warning
-
-{: .box-warning}
-**Warning:** This is a warning box.
-
-### Error
-
-{: .box-error}
-**Error:** This is an error box.

_posts/2016-01-01-another-test-markdown.md

@@ -1,217 +0,0 @@
----
-layout: post
-title: Another test markdown
-subtitle: Each post also has a subtitle
-categories: markdown
-tags: [test]
----
-
-Put the math expression within <span>$</span>...\$:
-
-\\(\LaTeX{}\\)
-
-$\Pi$
-
-$ a * b = c ^ b $
-
-$ 2^{\frac{n-1}{3}} $
-
-$ \int\_a^b f(x)\,dx. $
-
-\\( \int\_a^b f(x)\,dx. \\)
-
-$ \rho {\rm{FOD}} = \sum\limits{\sigma ,i} {(\delta _1 - \delta _2 n_i^\sigma )|\phi _i^\sigma ({\bf{r}})|^2} $
-
-$$ \rho {\rm{FOD}} = \sum\limits{\sigma ,i} {(\delta _1 - \delta _2 n_i^\sigma )|\phi _i^\sigma ({\bf{r}})|^2} $$
-
-
-{{ "here is a liquid filter." | capitalize }}
-
-{% capture test %}
-\`escape inline code\`  
-`inline code`  
-Here is a **capture block**.
-{% endcapture %}
-
-{{ test | markdownify }}
-
-{% assign x = 100 %} {% assign x = x | divided_by: 3 %}
-100 / 3 = {{ x }}
-
-:+1:
-:bolivia:
-
-\1. 21312  
-\2. 21312  
-\4. 4214  
-
-{% highlight python wl linenos %}
-import networkx as nx
-from collections import Counter
-
-diagrams = defaultdict(list)
-particle_counts = defaultdict(Counter)
-
-for (a, b), neighbors in common_neighbors.items():
-    # Build up the graph of connections between the
-    # common neighbors of a and b.
-    g = nx.Graph()
-    for i in neighbors:
-        for j in set(nl.point_indices[
-            nl.query_point_indices == i]).intersection(neighbors):
-            g.add_edge(i, j)
-
-    # Define the identifiers for a CNA diagram:
-    # The first integer is 1 if the particles are bonded, otherwise 2
-    # The second integer is the number of shared neighbors
-    # The third integer is the number of bonds among shared neighbors
-    # The fourth integer is an index, just to ensure uniqueness of diagrams
-    diagram_type = 2-int(b in nl.point_indices[nl.query_point_indices == a])
-    key = (diagram_type, len(neighbors), g.number_of_edges())
-    # If we've seen any neighborhood graphs with this signature,
-    # we explicitly check if the two graphs are identical to
-    # determine whether to save this one. Otherwise, we add
-    # the new graph immediately.
-    if key in diagrams:
-        isomorphs = [nx.is_isomorphic(g, h) for h in diagrams[key]]
-        if any(isomorphs):
-            idx = isomorphs.index(True)
-        else:
-            diagrams[key].append(g)
-            idx = diagrams[key].index(g)
-    else:
-        diagrams[key].append(g)
-        idx = diagrams[key].index(g)
-    cna_signature = key + (idx,)
-    particle_counts[a].update([cna_signature])
-{% endhighlight %}
-
-|:                        |:                  :|: $$O_3 + C_2H_2 \rightarrow $$         :|||:  $$O_3 + C_2H_4 \rightarrow $$ :|||:       :| 
-|:  ^^ Method            :| ^^ $$\lambda^a$$  |    vdW |    TS |    cycloadd.           |  vdW  |  TS  |  cycloadd.           | ^^ MAE    |
-|-------------------------|-------------------|--------|-------|------------------------|-------|------|----------------------|-----------|
-| $$\lambda$$-tPBE        |   0.20            | -0.40  | 7.69  | -68.00                 | -1.86 | 4.87 | -57.57               | 1.29      |
-|-------------------------|-------------------|--------|-------|------------------------|-------|------|----------------------|-----------|
-| MC1H-PBE $$^b$$         |   0.25            | -1.08  | 3.66  | -70.97                 | -1.25 | 0.13 | -61.26               | 3.35      |
-|-------------------------|-------------------|--------|-------|------------------------|-------|------|----------------------|-----------|
-| Reference values $$^c$$ |   ---------       | -1.90  | 7.74  | -63.80                 | -1.94 | 3.37 | -57.15               | --------- |
-|=========================|===================|========|=======|========================|=======|======|======================|===========|
-| $$^a$$ The optimal mixing parameter.$$\~$$ $$^b$$ From Ref. .$$\~$$  $$^c$$ Best estimates from Ref. . ||||||||
-
-
-|   1   |  2     |   3   |   4   |  5   |  6   |  7  |
-| spancell1     ||   spancell2  || cell | spancell3 ||
-|^^ spancell1   ||   spancell2  || cell | spancell3 ||
-{:class="custom-table"}
-
-<script>
-|:-----:|:-----:|:-----:|:-----:|
-| (0,0) | (0,1) | (0,2) | (0,3) |
-|     (1,0)    || ^^    | (1,3) |
-</script>
-
-
-|:-----:|:-----:|:-----:|:-----:| ---- |
-| (0,0) | (0,1) | (0,2) | (0,3) |      |
-|     (1,0)    || ^^    | (1,3) |      |
-
-
-|:-----:|:-----:|:-----:|:-----:| ---- |
-| (0,0) | (0,1) | (0,2) | (0,3) |      |
-|     (1,0)           ||| (1,3)       ||
-
-
-|:-----:|:-----:|:-----:|:-----:| ---- |
-| (0,0) | (0,1) | (0,2) | (0,3) |      |
-|     (1,0)           ||| ^^    |      |
-
-|:-----:|:-----:|:-----:|:-----:| ---- |
-| (0,0) | (0,1) | (0,2) | (0,3) |      \
-|     (1,0)           ||| ^^    |      |
-
-
-# Table
-
-| Stage | Direct Products | ATP Yields |
-| ----: | --------------: | ---------: |
-|Glycolysis | 2 ATP                   ||
-|^^         | 2 NADH      | 3--5 ATP   |
-|Pyruvaye oxidation | 2 NADH | 5 ATP   |
-|Citric acid cycle  | 2 ATP           ||
-|^^                 | 6 NADH | 15 ATP  |
-|^^                 | 2 FADH | 3 ATP   |
-|                        30--32 ATP  |||
-
-
-{:color-style: style="background: black;" }
-{:color-style: style="color: white;" }
-{:font-style: style="font-weight: 900; text-decoration: underline;" }
-
-|:             Here's a Inline Attribute Lists example                 :||||
-| ------- | ------------------------- | -------------------- | ----------- |
-|:       :|:  <div style="color: red;"> &lt; Normal HTML Block > </div> :|||
-| ^^      |   Red    {: .cls style="background: orange" }                |||
-| ^^ IALs |   Green  {: #id style="background: green; color: white" }    |||
-| ^^      |   Blue   {: style="background: blue; color: white" }         |||
-| ^^      |   Black  {: color-style font-style}                          |||
-
-
-[cell image]: https://jekyllrb.com/img/octojekyll.png "An exemplary image"
-
-| Heading            | Column 1      | Column 2                           |
-|--------------------|---------------|------------------------------------|
-| Row 1              | Apple[^1]     | Orange                             |
-| Row 2 (merged)     | Blueberry     | Strawberry                         |
-| ^^         | [Plum](https://example.com) | Raspberry ![example][cell image]   |
-
-[^1]: Footnote
-
-Not in table: `<Mail Gateway>`
-
-In table:
-
-Decision Point | Design Decision
---- | ---
-Authoritative DNS MX Record | `<Mail Gateway>`
-
-9 \* 9
-
-| 1 \* 1 = 1 |
-| 1 \* 2 = 2 | 2 \* 2 = 4 |
-| 1 \* 3 = 3 | 2 \* 3 = 6 | 3 \* 3 = 9  |
-| 1 \* 3 = 3 | 2 \* 3 = 6 | 3 \* 4 = 12 | 4 \* 4 = 16 |
-
-# Emoji
-:+1:
-
-# Mathjax
-
-$\LaTeX{}$
-
-# PlantUML
-
-@startuml
-Bob -> Alice : hello
-@enduml
-
-# Video
-
-![](//www.youtube.com/watch?v=Ptk_1Dc2iPY)
-
-![](https://avatars3.githubusercontent.com/hubot?v=3&amp;s=40)
-
-[\[video link\]](//www.youtube.com/watch?v=Ptk_1Dc2iPY)
-
-
-# Special media links
-
-![]( {{ "/assets/devstories.webm" | relative_url }} )
-
-[![w:1100](https://i.imgur.com/bc9HOJU.png)](https://www.youtube.com/watch?v=kCHGDRHZ4eU)
-
-Tips:
-* Use pipes {% raw %}(`|`){% endraw %} to delineate columns, and dashes to delineate the header row from the rest of the table.
-* Spacing doesn't matter to the markdown processor, any extra white space is removed, but it can really help with readability.
-The two markdown examples below both create this table.
-
-Use pipes `{% raw %}(`|`){% endraw %}` to delineate columns, and dashes to delineate the header row from the rest of the table.
-

_posts/2016-05-19-super-short-article.md

@@ -1,7 +0,0 @@
----
-layout: post
-title: "Some articles are just so short that we have to make the footer stick"
-categories: misc
----
-
-Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

_posts/2016-05-20-super-long-article.md

@@ -1,11 +0,0 @@
----
-layout: post
-title: "Some articles are just so long they deserve a really long title to see if things will break well"
-categories: misc
----
-
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce bibendum neque eget nunc mattis eu sollicitudin enim tincidunt. Vestibulum lacus tortor, ultricies id dignissim ac, bibendum in velit. Proin convallis mi ac felis pharetra aliquam. Curabitur dignissim accumsan rutrum. In arcu magna, aliquet vel pretium et, molestie et arcu. Mauris lobortis nulla et felis ullamcorper bibendum. Phasellus et hendrerit mauris. Proin eget nibh a massa vestibulum pretium. Suspendisse eu nisl a ante aliquet bibendum quis a nunc. Praesent varius interdum vehicula. Aenean risus libero, placerat at vestibulum eget, ultricies eu enim. Praesent nulla tortor, malesuada adipiscing adipiscing sollicitudin, adipiscing eget est.
-
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce bibendum neque eget nunc mattis eu sollicitudin enim tincidunt. Vestibulum lacus tortor, ultricies id dignissim ac, bibendum in velit. Proin convallis mi ac felis pharetra aliquam. Curabitur dignissim accumsan rutrum. In arcu magna, aliquet vel pretium et, molestie et arcu. Mauris lobortis nulla et felis ullamcorper bibendum. Phasellus et hendrerit mauris. Proin eget nibh a massa vestibulum pretium. Suspendisse eu nisl a ante aliquet bibendum quis a nunc. Praesent varius interdum vehicula. Aenean risus libero, placerat at vestibulum eget, ultricies eu enim. Praesent nulla tortor, malesuada adipiscing adipiscing sollicitudin, adipiscing eget est.
-
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce bibendum neque eget nunc mattis eu sollicitudin enim tincidunt. Vestibulum lacus tortor, ultricies id dignissim ac, bibendum in velit. Proin convallis mi ac felis pharetra aliquam. Curabitur dignissim accumsan rutrum. In arcu magna, aliquet vel pretium et, molestie et arcu. Mauris lobortis nulla et felis ullamcorper bibendum. Phasellus et hendrerit mauris. Proin eget nibh a massa vestibulum pretium. Suspendisse eu nisl a ante aliquet bibendum quis a nunc. Praesent varius interdum vehicula. Aenean risus libero, placerat at vestibulum eget, ultricies eu enim. Praesent nulla tortor, malesuada adipiscing adipiscing sollicitudin, adipiscing eget est.

_posts/2016-08-12-my-example-post.md

@@ -1,13 +0,0 @@
----
-layout: post
-categories: junk
----
-
-Eos eu docendi tractatos sapientem, brute option menandri in vix, quando vivendo accommodare te ius. Nec melius fastidii constituam id, viderer theophrastus ad sit, hinc semper periculis cum id. Noluisse postulant assentior est in, no choro sadipscing repudiandae vix. Vis in euismod delenit dignissim. Ex quod nostrum sit, suas decore animal id ius, nobis solet detracto quo te.
-
-{% comment %}
-Might you have an include in your theme? Why not try it here!
-{% include my-themes-great-include.html %}
-{% endcomment %}
-
-No laudem altera adolescens has, volumus lucilius eum no. Eam ei nulla audiam efficiantur. Suas affert per no, ei tale nibh sea. Sea ne magna harum, in denique scriptorem sea, cetero alienum tibique ei eos. Labores persequeris referrentur eos ei.

_posts/2017-05-20-this-post-demonstrates-post-content-styles.md

@@ -1,100 +0,0 @@
----
-layout: post
-title: "This post demonstrates post content styles"
-categories: junk
-author: "Bart Simpson"
-meta: "Springfield"
----
-
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce bibendum neque eget nunc mattis eu sollicitudin enim tincidunt. Vestibulum lacus tortor, ultricies id dignissim ac, bibendum in velit.
-
-## Some great heading (h2)
-
-Proin convallis mi ac felis pharetra aliquam. Curabitur dignissim accumsan rutrum. In arcu magna, aliquet vel pretium et, molestie et arcu.
-
-Mauris lobortis nulla et felis ullamcorper bibendum. Phasellus et hendrerit mauris. Proin eget nibh a massa vestibulum pretium. Suspendisse eu nisl a ante aliquet bibendum quis a nunc. Praesent varius interdum vehicula. Aenean risus libero, placerat at vestibulum eget, ultricies eu enim. Praesent nulla tortor, malesuada adipiscing adipiscing sollicitudin, adipiscing eget est.
-
-## Another great heading (h2)
-
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce bibendum neque eget nunc mattis eu sollicitudin enim tincidunt. Vestibulum lacus tortor, ultricies id dignissim ac, bibendum in velit.
-
-### Some great subheading (h3)
-
-Proin convallis mi ac felis pharetra aliquam. Curabitur dignissim accumsan rutrum. In arcu magna, aliquet vel pretium et, molestie et arcu. Mauris lobortis nulla et felis ullamcorper bibendum.
-
-Phasellus et hendrerit mauris. Proin eget nibh a massa vestibulum pretium. Suspendisse eu nisl a ante aliquet bibendum quis a nunc.
-
-### Some great subheading (h3)
-
-Praesent varius interdum vehicula. Aenean risus libero, placerat at vestibulum eget, ultricies eu enim. Praesent nulla tortor, malesuada adipiscing adipiscing sollicitudin, adipiscing eget est.
-
-> This quote will change your life. It will reveal the secrets of the universe, and all the wonders of humanity. Don't misuse it.
-
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce bibendum neque eget nunc mattis eu sollicitudin enim tincidunt.
-
-### Some great subheading (h3)
-
-Vestibulum lacus tortor, ultricies id dignissim ac, bibendum in velit. Proin convallis mi ac felis pharetra aliquam. Curabitur dignissim accumsan rutrum.
-
-```html
-<html>
-  <head> </head>
-  <body>
-    <p>Hello, World!</p>
-  </body>
-</html>
-```
-
-In arcu magna, aliquet vel pretium et, molestie et arcu. Mauris lobortis nulla et felis ullamcorper bibendum. Phasellus et hendrerit mauris.
-
-#### You might want a sub-subheading (h4)
-
-In arcu magna, aliquet vel pretium et, molestie et arcu. Mauris lobortis nulla et felis ullamcorper bibendum. Phasellus et hendrerit mauris.
-
-In arcu magna, aliquet vel pretium et, molestie et arcu. Mauris lobortis nulla et felis ullamcorper bibendum. Phasellus et hendrerit mauris.
-
-#### But it's probably overkill (h4)
-
-In arcu magna, aliquet vel pretium et, molestie et arcu. Mauris lobortis nulla et felis ullamcorper bibendum. Phasellus et hendrerit mauris.
-
-### Oh hai, an unordered list!!
-
-In arcu magna, aliquet vel pretium et, molestie et arcu. Mauris lobortis nulla et felis ullamcorper bibendum. Phasellus et hendrerit mauris.
-
-- First item, yo
-- Second item, dawg
-- Third item, what what?!
-- Fourth item, fo sheezy my neezy
-
-### Oh hai, an ordered list!!
-
-In arcu magna, aliquet vel pretium et, molestie et arcu. Mauris lobortis nulla et felis ullamcorper bibendum. Phasellus et hendrerit mauris.
-
-1. First item, yo
-2. Second item, dawg
-3. Third item, what what?!
-4. Fourth item, fo sheezy my neezy
-
-## Headings are cool! (h2)
-
-Proin eget nibh a massa vestibulum pretium. Suspendisse eu nisl a ante aliquet bibendum quis a nunc. Praesent varius interdum vehicula. Aenean risus libero, placerat at vestibulum eget, ultricies eu enim. Praesent nulla tortor, malesuada adipiscing adipiscing sollicitudin, adipiscing eget est.
-
-Praesent nulla tortor, malesuada adipiscing adipiscing sollicitudin, adipiscing eget est.
-
-Proin eget nibh a massa vestibulum pretium. Suspendisse eu nisl a ante aliquet bibendum quis a nunc.
-
-### Tables
-
-| Title 1               | Title 2               | Title 3               | Title 4               |
-| --------------------- | --------------------- | --------------------- | --------------------- |
-| lorem                 | lorem ipsum           | lorem ipsum dolor     | lorem ipsum dolor sit |
-| lorem ipsum dolor sit | lorem ipsum dolor sit | lorem ipsum dolor sit | lorem ipsum dolor sit |
-| lorem ipsum dolor sit | lorem ipsum dolor sit | lorem ipsum dolor sit | lorem ipsum dolor sit |
-| lorem ipsum dolor sit | lorem ipsum dolor sit | lorem ipsum dolor sit | lorem ipsum dolor sit |
-
-| Title 1                    | Title 2                                | Title 3                    | Title 4                                |
-| -------------------------- | -------------------------------------- | -------------------------- | -------------------------------------- |
-| lorem                      | lorem ipsum                            | lorem ipsum dolor          | lorem ipsum dolor sit                  |
-| lorem ipsum dolor sit amet | lorem ipsum dolor sit amet consectetur | lorem ipsum dolor sit amet | lorem ipsum dolor sit                  |
-| lorem ipsum dolor          | lorem ipsum                            | lorem                      | lorem ipsum                            |
-| lorem ipsum dolor          | lorem ipsum dolor sit                  | lorem ipsum dolor sit amet | lorem ipsum dolor sit amet consectetur |

_posts/2017-06-10-quick-mardown-example.md

@@ -1,164 +0,0 @@
----
-layout: post
-title: Quick markdown example
-subtitle: This is a quick markdown example
-categories: markdown
-tags: [example]
----
-
-Paragraphs are separated by a blank line.
-
-2nd paragraph. *Italic*, **bold**, and `monospace`. Itemized lists
-look like:
-
-  * this one
-  * that one
-  * the other one
-
-Note that --- not considering the asterisk --- the actual text
-content starts at 4-columns in.
-
-> Block quotes are
-> written like so.
->
-> They can span multiple paragraphs,
-> if you like.
-
-Use 3 dashes for an em-dash. Use 2 dashes for ranges (ex., "it's all
-in chapters 12--14"). Three dots ... will be converted to an ellipsis.
-Unicode is supported. ☺
-
-
-
-An h2 header
-------------
-
-Here's a numbered list:
-
- 1. first item
- 2. second item
- 3. third item
-
-Note again how the actual text starts at 4 columns in (4 characters
-from the left side). Here's a code sample:
-
-    # Let me re-iterate ...
-    for i in 1 .. 10 { do-something(i) }
-
-As you probably guessed, indented 4 spaces. By the way, instead of
-indenting the block, you can use delimited blocks, if you like:
-
-~~~
-define foobar() {
-    print "Welcome to flavor country!";
-}
-~~~
-
-(which makes copying & pasting easier). You can optionally mark the
-delimited block for Pandoc to syntax highlight it:
-
-~~~python
-import time
-# Quick, count to ten!
-for i in range(10):
-    # (but not *too* quick)
-    time.sleep(0.5)
-    print(i)
-~~~
-
-
-
-### An h3 header ###
-
-Now a nested list:
-
- 1. First, get these ingredients:
-
-      * carrots
-      * celery
-      * lentils
-
- 2. Boil some water.
-
- 3. Dump everything in the pot and follow
-    this algorithm:
-
-        find wooden spoon
-        uncover pot
-        stir
-        cover pot
-        balance wooden spoon precariously on pot handle
-        wait 10 minutes
-        goto first step (or shut off burner when done)
-
-    Do not bump wooden spoon or it will fall.
-
-Notice again how text always lines up on 4-space indents (including
-that last line which continues item 3 above).
-
-Here's a link to [a website](http://foo.bar), to a [local
-doc](local-doc.html), and to a [section heading in the current
-doc](#an-h2-header). Here's a footnote [^1].
-
-[^1]: Some footnote text.
-
-Tables can look like this:
-
-Name           Size  Material      Color
-------------- -----  ------------  ------------
-All Business      9  leather       brown
-Roundabout       10  hemp canvas   natural
-Cinderella       11  glass         transparent
-
-Table: Shoes sizes, materials, and colors.
-
-(The above is the caption for the table.) Pandoc also supports
-multi-line tables:
-
---------  -----------------------
-Keyword   Text
---------  -----------------------
-red       Sunsets, apples, and
-          other red or reddish
-          things.
-
-green     Leaves, grass, frogs
-          and other things it's
-          not easy being.
---------  -----------------------
-
-A horizontal rule follows.
-
-***
-
-Here's a definition list:
-
-apples
-  : Good for making applesauce.
-
-oranges
-  : Citrus!
-
-tomatoes
-  : There's no "e" in tomatoe.
-
-Again, text is indented 4 spaces. (Put a blank line between each
-term and  its definition to spread things out more.)
-
-Here's a "line block" (note how whitespace is honored):
-
-| Line one
-|   Line too
-| Line tree
-
-and images can be specified like so:
-
-![example image](http://www.unexpected-vortices.com/sw/rippledoc/example-image.jpg "An exemplary image")
-
-Inline math equation: $\omega = d\phi / dt$. Display
-math should get its own line like so:
-
-$$I = \int \rho R^{2} dV$$
-
-And note that you can backslash-escape any punctuation characters
-which you wish to be displayed literally, ex.: \`foo\`, \*bar\*, etc.

_posts/2017-12-04-plantuml-example.md

@@ -1,66 +0,0 @@
----
-layout: post
-title: Plantuml example
-categories: example
-tags: [plantuml]
----
-
-## My First PlantUML
-
-### PlantUML Block-1
-@startuml
-Bob -> Alice : hello
-@enduml
-
-
-### PlantUML Block-2
-``` plantuml!
-Bob -> Alice : hello world
-```
-
-
-### PlantUML Block-3
-@startuml
-(*) --> "Initialization"
-
-if "Some Test" then
-  -->[true] "Some Activity"
-  --> "Another activity"
-  -right-> (*)
-else
-  ->[false] "Something else"
-  -->[Ending process] (*)
-endif
-@enduml
-
-
-### PlantUML Block-4
-
-@startuml
-skinparam handwritten true
-
-skinparam usecase {
-  BackgroundColor DarkSeaGreen
-  BorderColor DarkSlateGray
-
-  BackgroundColor<< Main >> YellowGreen
-  BorderColor<< Main >> YellowGreen
-
-  ArrowColor Olive
-  ActorBorderColor black
-  ActorFontName Courier
-
-  ActorBackgroundColor<< Human >> Gold
-}
-
-User << Human >>
-:Main Database: as MySql << Application >>
-(Start) << One Shot >>
-(Use the application) as (Use) << Main >>
-
-User -> (Start)
-User --> (Use)
-
-MySql --> (Use)
-
-@enduml

_posts/2017-12-08-mermaid-example.md

@@ -1,75 +0,0 @@
----
-layout: post
-title: Mermaid example
-categories: example
-tags: [mermaid]
----
-
-### 1. Pie chart
-
-```mermaid!
-pie title Pets adopted by volunteers
-  "Dogs" : 386
-  "Cats" : 85
-  "Rats" : 35
-```
-
-### 2. sequence diagram
-
-@startmermaid
-sequenceDiagram
-  Alice ->> Bob: Hello Bob, how are you?
-  Bob-->>John: How about you John?
-  Bob--x Alice: I am good thanks!
-  Bob-x John: I am good thanks!
-  Note right of John: Bob thinks a long<br/>long time, so long<br/>that the text does<br/>not fit on a row.
-  
-  Bob-->Alice: Checking with John...
-  Alice->John: Yes... John, how are you?
-@endmermaid
-
-```mermaid!
-graph TD
-A[Christmas] -->|Get money| B(Go shopping)
-  B --> C{Let me think}
-  C -->|One| D[Laptop]
-  C -->|Two| E[iPhone]
-  C -->|Three| F[fa:fa-car Car]
-```
-
-### 3. Class diagram
-```mermaid!
-classDiagram
-Animal <|-- Duck
-Animal <|-- Fish
-Animal <|-- Zebra
-Animal : +int age
-Animal : +String gender
-Animal: +isMammal()
-Animal: +mate()
-class Duck{
-  +String beakColor
-    +swim()
-    +quack()
-}
-class Fish{
-  -int sizeInFeet
-    -canEat()
-}
-class Zebra{
-  +bool is_wild
-    +run()
-}
-```
-
-### 4. State diagram
-```mermaid!
-stateDiagram
-[*] --> Still
-Still --> [*]
-
-Still --> Moving
-Moving --> Still
-Moving --> Crash
-Crash --> [*]
-```

_posts/2017-12-15-table-example.md

@@ -1,111 +0,0 @@
----
-layout: post
-title: Table example
-subtitle:
-categories: example
-tags: [table]
----
-
-## Table example as below
-
-**For now, these extended features are provided:**
-
-* Cells spanning multiple columns
-* Cells spanning multiple rows
-* Cells text align separately
-* Table header not required
-* Grouped table header rows or data rows
-
-### Rowspan and Colspan
-^^ in a cell indicates it should be merged with the cell above.  
-This feature is contributed by [pmccloghrylaing](https://github.com/pmccloghrylaing).  
-
-| Stage | Direct Products | ATP Yields |
-| ----: | --------------: | ---------: |
-|Glycolysis | 2 ATP                   ||
-|^^         | 2 NADH      | 3--5 ATP   |
-|Pyruvaye oxidation | 2 NADH | 5 ATP   |
-|Citric acid cycle  | 2 ATP           ||
-|^^                 | 6 NADH | 15 ATP  |
-|^^                 | 2 FADH | 3 ATP   |
-| 30--32 ATP                         |||
-
-[ Net ATP yields per hexose]
-
-### Multiline
-A backslash at end to join cell contents with the following lines.  
-This feature is contributed by [Lucas-C](https://github.com/Lucas-C).
-
-|:     Easy Multiline     :|||
-|:------ |:------ |:-------- |
-| Apple  | Banana |  Orange  \
-| Apple  | Banana |  Orange  \
-| Apple  | Banana |  Orange
-| Apple  | Banana |  Orange  \
-| Apple  | Banana |  Orange  |
-| Apple  | Banana |  Orange  |
-
-
-### Headerless
-Table header can be eliminated.
-
-|--|--|--|--|--|--|--|--|
-|♜ |  |♝ |♛ |♚ |♝ |♞ |♜ |
-|  |♟ |♟ |♟ |  |♟ |♟ |♟ |
-|♟ |  |♞ |  |  |  |  |  |
-|  |♗ |  |  |♟ |  |  |  |
-|  |  |  |  |♙ |  |  |  |
-|  |  |  |  |  |♘ |  |  |
-|♙ |♙ |♙ |♙ |  |♙ |♙ |♙ |
-|♖ |♘ |♗ |♕ |♔ |  |  |♖ |
-
-
-```markdown
-|:     Fruits \|\| Food           :|||
-|:-------- |:-------- |:------------ |
-| Apple    |: Apple  :|    Apple     \
-| Banana   |  Banana  |    Banana    \
-| Orange   |  Orange  |    Orange    |
-|:   Rowspan is 5   :||:  How's it? :|
-|^^   A. Peach       ||^^ 1. Fine    |
-|^^   B. Orange      ||^^ 2. Bad  $I = \int \rho R^{2} dV$     |
-|^^   C. Banana      ||   It's OK! ![example image][my-image]  |
-```
-
-### Text Alignment
-Table cell can be set alignment separately.
-
-| \:Fruits         ||  Food   :|
-|:-------- |:------ |:-------- |
-| Apple    | Banana |  Orange  |
-| Apple    | Banana |  Orange  |
-
-
-|          | Fruits\::        ||
-|:-------- |:------ |:-------- |
-| Apple    | Banana |  Orange  |
-| Apple    | Banana |  Orange  |
-
-
-|: \:Fruits       :||          |:       Food     :||
-|:-------- |:------ |:-------- |:-------- |:------ |
-| Apple    | Banana |  Orange  |:   Strawberry    :|
-| Apple  &  Banana || ^^       |    Peach        :||
-
-
-|: \:Fruits       :||          |:       Food     :||
-| Apple    | Banana |  Orange  |:   Strawberry    :|
-
-
-|:     Fruits \|\| Food           :|||
-|:-------- |:-------- |:------------ |
-| Apple    |: Apple  :|    Apple     \
-| Banana   |  Banana  |    Banana    \
-| Orange   |  Orange  |    Orange    |
-|:   Rowspan is 5   :||:  How's it? :|
-|^^   A. Peach       ||^^ 1. Fine    |
-|^^   B. Orange      ||^^ 2. Bad  $I = \int \rho R^{2} dV$     |
-|^^   C. Banana      ||   It's OK! ![example image][my-image]  |
-
-[my-image]: http://www.unexpected-vortices.com/sw/rippledoc/example-image.jpg "An exemplary image"
-

_posts/2017-12-18-video-example.md

@@ -1,37 +0,0 @@
----
-layout: post
-title: Video example
-subtitle:
-categories: example
-tags: [video]
----
-
-## Canon in D (Pachelbel's Canon) - Cello & Piano [BEST WEDDING VERSION]
-Some of you know that we occasionally play for weddings. As you can imagine, we get a LOT of requests for Canon in D, and we discovered that there were no good arrangements available anywhere for piano and cello! Hard to believe given its popularity. So we decided to make our own! We tried to stick as closely to the original as possible (which was written for three violins and basso continuo), and we performed it *not* at a snail's pace so the bride can actually make it down the aisle without putting everyone to sleep. 🙊(Yeah, we said it! Nobody likes a slow processional!) Also, the number one complaint about this piece from cellists is always how booooring it is to play because they literally have to play the same 8 bass notes over and over for the entire piece. Problem solved with this arrangement because the cello never has to play the bass! 🙌(The piano does, but we get lots of other fun stuff too so it's ok!) So for all you musicians out there playing weddings, we hope you enjoy playing this arrangement a little more than the ones you were used to...You can get it from www.musicnotes.com. 😊Be sure to let us know in the comments if you do!
-
-![](//www.youtube.com/watch?v=Ptk_1Dc2iPY)
-
-## GUCCI HALLUCINATION / THE LINE ANIMATION / GUCCI
-BACKGROUND /
-
-Gucci share their creative vision through a series of surreal animated paintings by acclaimed artist Ignasi Monreal and The Line Animation studio. The animations make up part of a larger campaign shared via social media, above the line and print.
-
-APPROACH /
-
-Our aim was to ground and accentuate the outlandish scenarios with ambient sound design. Neither proclaiming to be positive or negative, the sound conveys a sense of the uncanny and leaves the audience with nothing but their own interpretations. their creative vision through a series of surreal animated paintings by acclaimed artist Ignasi Monreal and The Line Animation studio. The animations make up part of a larger campaign shared via social media, above the line and print.
-
-![](https://vimeo.com/263856289)
-
-
-## FINNEAS Demos How He Builds Songs For Billie Eilish
-Grammy Award-winning musician and producer FINNEAS sits down with Pitchfork and closely examines his creative process while working on some of the biggest hit songs of the past couple years. FINNEAS explores the sounds that brought upon 
-some of his greatest musical breakthroughs in songs such as bad guy, bury a friend, ocean eyes, when the party's over, I Lost a Friend, Used to This and much more.
-
-![][demo]  
-
-[demo]: https://dai.ly/x7tgcev
-
-## This is the poster image
-In modern browsers, adding a video to your page is as easy as adding an image. No longer do you need to deal with special plug-ins or require crazy markup, you can do it with a single element.
-![video](//www.html5rocks.com/en/tutorials/video/basics/devstories.webm)
-

_posts/2018-12-05-an-exhibit-of-markdown.md

@@ -1,94 +0,0 @@
----
-layout: post
-title: An exhibit of Markdown
-subtitle: Each post also has a subtitle
-categories: markdown
-tags: [example, markdown]
----
-
-This note demonstrates some of what [Markdown][1] is capable of doing.
-
-## An exhibit of Markdown
-
-
-
-*Note: Feel free to play with this page. Unlike regular notes, this doesn't automatically save itself.*
-
-## Basic formatting
-
-Paragraphs can be written like so. A paragraph is the basic block of Markdown. A paragraph is what text will turn into when there is no reason it should become anything else.
-
-Paragraphs must be separated by a blank line. Basic formatting of *italics* and **bold** is supported. This *can be **nested** like* so.
-
-## Lists
-
-### Ordered list
-
-1. Item 1
-2. A second item
-3. Number 3
-4. Ⅳ
-
-*Note: the fourth item uses the Unicode character for [Roman numeral four][2].*
-
-### Unordered list
-
-* An item
-* Another item
-* Yet another item
-* And there's more...
-
-## Paragraph modifiers
-
-### Code block
-
-    Code blocks are very useful for developers and other people who look at code or other things that are written in plain text. As you can see, it uses a fixed-width font.
-
-You can also make `inline code` to add code into other things.
-
-### Quote
-
-> Here is a quote. What this is should be self explanatory. Quotes are automatically indented when they are used.
-
-## Headings
-
-There are six levels of headings. They correspond with the six levels of HTML headings. You've probably noticed them already in the page. Each level down uses one more hash character.
-
-### Headings *can* also contain **formatting**
-
-### They can even contain `inline code`
-
-Of course, demonstrating what headings look like messes up the structure of the page.
-
-I don't recommend using more than three or four levels of headings here, because, when you're smallest heading isn't too small, and you're largest heading isn't too big, and you want each size up to look noticeably larger and more important, there there are only so many sizes that you can use.
-
-## URLs
-
-URLs can be made in a handful of ways:
-
-* A named link to [MarkItDown][3]. The easiest way to do these is to select what you want to make a link and hit `Ctrl+L`.
-* Another named link to [MarkItDown](http://www.markitdown.net/)
-* Sometimes you just want a URL like <http://www.markitdown.net/>.
-
-## Horizontal rule
-
-A horizontal rule is a line that goes across the middle of the page.
-
----
-
-It's sometimes handy for breaking things up.
-
-## Images
-
-Markdown can also contain images. I'll need to add something here sometime.
-
-## Finally
-
-There's actually a lot more to Markdown than this. See the official [introduction][4] and [syntax][5] for more information. However, be aware that this is not using the official implementation, and this might work subtly differently in some of the little things.
-
-
-  [1]: http://daringfireball.net/projects/markdown/
-  [2]: http://www.fileformat.info/info/unicode/char/2163/index.htm
-  [3]: http://www.markitdown.net/
-  [4]: http://daringfireball.net/projects/markdown/basics
-  [5]: http://daringfireball.net/projects/markdown/syntax

_posts/2018-12-07-welcome-to-jekyll.md

@@ -1,62 +0,0 @@
----
-layout: post
-title: Welcome to Jekyll!
-subheading: hello world!
-author: Jeffrey
-categories: jekyll
-banner: https://bit.ly/32PAjtM
-tags: jekyll theme yat
-sidebar: []
----
-
-You’ll find this post in your `_posts` directory. Go ahead and edit it and re-build the site to see your changes. You can rebuild the site in many different ways, but the most common way is to run `jekyll serve`, which launches a web server and auto-regenerates your site when a file is updated.
-
-To add new posts, simply add a file in the `_posts` directory that follows the convention `YYYY-MM-DD-name-of-post.ext` and includes the necessary front matter. Take a look at the source for this post to get an idea about how it works.
-
-## section 1
-Jekyll also offers powerful support for code snippets:
-
-{% highlight ruby %}
-def print_hi(name)
-puts "Hi, #{name}"
-end
-print_hi('Tom')
-#=> prints 'Hi, Tom' to STDOUT.
-{% endhighlight %}
-
-## section 2
-
-Check out the [Jekyll docs][jekyll-docs] for more info on how to get the most out of Jekyll. File all bugs/feature requests at [Jekyll’s GitHub repo][jekyll-gh]. If you have questions, you can ask them on [Jekyll Talk][jekyll-talk].
-
-[jekyll-docs]: https://jekyllrb.com/docs/home
-[jekyll-gh]: https://github.com/jekyll/jekyll
-[jekyll-talk]: https://talk.jekyllrb.com/
-
-$ a * b = c ^ b $
-
-$ 2^{\frac{n-1}{3}} $
-
-$ \int\_a^b f(x)\,dx. $
-
-```cpp
-#include <iostream>
-using namespace std;
-
-int main() {
-  cout << "Hello World!";
-  return 0;
-}
-// prints 'Hi, Tom' to STDOUT.
-```
-
-```python
-class Person:
-  def __init__(self, name, age):
-    self.name = name
-    self.age = age
-
-p1 = Person("John", 36)
-
-print(p1.name)
-print(p1.age)
-```

_posts/2022-05-22-automatizace.md

@@ -0,0 +1,24 @@
+---
+layout: post
+title: Automatizace, automatizace, automatizace
+subtitle: Ulehčujeme si život
+categories: programování
+tags: automatizace technologie
+sidebar: []
+---
+
+Roboti nám brzo vezmou práci, ale mně to (prozatím) nevadí. Já nechávám robůtky pracovat za mě a ulehčovat mi práci. A vy byste měli taky! Pokud teda programujete, jinak nevím.
+
+Nedávno jsem objevil krásy zvané GitHub Actions a musím říct, že je to opravdu radost. Nikdy předtím jsem nedokázal pochopit jejich praktičnost, než jsem pracoval na [OpenCanteen](https://github.com/hernikplays/opencanteen). Sestavovat, podepisovat a nahrávat mě opravdu nebavilo a ještě s mým pomalým PC v kombinaci s pomalým internetem to nešlo zrovna rychle. Pak jsem si vzpomněl na GitHub Actions. Místo toho, abych dělal cokoliv produktivního, jsem strávil celé odpoledne nastavováním Actions, aby mi při novém tagu automaticky sestavil a publikoval vydání aplikace do Google Play.
+
+Ta první část šla skvěle, avšak nahrávání do Google Play bylo o něco složitější, dokud jsem neobjevil hotové a, prozatím bezplatné, řešení [CodeMagic](https://codemagic.io/start/). 
+
+Jednoduše jsem napojil repozitář, nastavil podepisovací a nahrávací údaje a všechno hned jelo! Byla to radost pro někoho tak líného jako jsem já. I přesto, že jsem sám reálně nic neudělal, cítil jsem, že jsem dosáhl něčeho úžasného.
+
+A určitě to lze dotáhnout ještě dál, už teď používám Actions pro automatickou analýzu kódu, a kdybych si vytvořil testy tak by mi to určitě i otestovalo celou aplikaci.
+
+Pak jsem si řekl, že by možná mohl někdo chtít do mé aplikace přispět svým kódem. Protože chci v tom mít pořádek, hned jsem začal projíždět GitHub Marketplace pro nějaké akce na pull requesty. Hned jsem jich několik objevil.
+
+Velice jsem ocenil akci, která mi automaticky přidala labely podle souboru, který byl v PR upraven.
+
+Určitě nepotřebujete nutně automatizovat všechno, pokud máte např. soukromý či malý projekt. Nicméně si to můžete aspoň otestovat a případně využít v budoucnu tak se do toho pusťte! Automatizovat můžete všechno možné. Určitě budete mít dobrý pocit, když se vaše akce spustí a úspěšně se dokončí.

_posts/2022-05-31-codespaces.md

@@ -0,0 +1,34 @@
+---
+layout: post
+title: GitHub Codespaces aneb VS Code na VPS
+subtitle: Dopřejte si trochu luxusu
+categories: vychytávky
+tags: github vps
+sidebar: []
+---
+
+Nedávno mi přišel e-mail, že jsem byl přidán do beta testování funkce Codespaces na GitHubu. Stručně, Codespaces má být systém ve kterém si vytvoříte vlastní prostředí pro váš repozitář, do kterého si nainstalujete všechny potřebné knihovny, SDK a balíky. Server, na kterém to všechno běží, si platíte u GitHubu a můžete na něj kdekoliv a kdykoliv přejít přes web do webové, narozdíl od výchozího webového VS Code plně vybavené, verzi VS Code nebo nainstalovaný VS Code a upravovat nebo testovat kód.
+
+Hodí se pro lidi, kteří nechtějí tahat např. do školy nebo do práce, kde nesmí instalovat externí aplikace, svůj vlastní notebook.
+Parametry
+
+V betě je možné testovat pouze výchozí možnost 4 jádra + 8GB RAM + 32GB úložiště, což definitivně stačí pro osobní a malé projekty. Do konce bety neplatíte nic, ale 4 jádra vyjdou na $0.36 (asi 8,3 kč) za hodinu, tj za hodinu aktivního používání. Codespace se vám automaticky vypne, pokud není po stanovenou dobu nepoužíván, takže můžete předejít placení katastrofických částek.
+![Ceny Codespaces](/assets/images/codespaces/1.jpg)
+
+Je to určitě výhodnější, než si platit např. hotové VPS, pokud ho tedy nepoužíváte i na něco smysluplnějšího.
+Moje zkušenost
+
+Samozřejmě jsem nemohl odolat a na OpenCanteen jsem si jeden nechal vytvořit, aniž bych věděl do čeho se vrhám.
+
+Codespace se vytváří jednoduše kliknutím na tlačítko "Code" ve vašem repozitáří, kde se vám nově zobrazí možnost si Codespace vytvořit.
+
+Ve výchozím stavu běží server na Ubuntu. Pokud nenajdete docker obraz nebo devcontainer konfigurační soubor, musíte si samozřejmě vše nainstalovat sami, což zas tolik nevadí, protože to nejspíš budete dělat jen jednou, pokud si nebudete s obrazem stroje nějak zahrávat.
+
+Instalace všeho však probíhá svižně, jelikož asi v Microsoftu mají na rychlejší internet, než já. Samozřejmě vše musíte instalovat skrze terminál (což mě celkem ranilo, jelikož instalovat Android SDK pro flutter byla celkem fuška).
+
+Pokud používáte Settings Sync ve VS Code, automaticky se vám synchronizují nastavení a rozšíření. Pro pokročilé upravení prostředí slouží konfigurační soubor devcontainer.json
+![Ceny Codespaces](/assets/images/codespaces/2.jpg)
+
+Jakmile máte všechno nastavené, už stačí jen využít starého známého Visual Studio Code, které funguje úplně stejně jako na lokálním zařízení. Na Codespace se můžete kdykoli připojit přes webovou adresu.
+
+Za mě velice praktické pro dříve uvedené typy lidí, už jen záleží, jestli se to zrovna vám za ty peníze vyplatí. Dokumentace je možná trochu chaotická, alespoň pro uživatele co se nevyznají v technologiích jako kontejnery či docker a většiny funkcí využije jen skutečný poweruser (což já určitě nejsem).

_posts/2022-07-19-nordvpn.md

@@ -0,0 +1,126 @@
+---
+layout: post
+title: NordVPN - Jste opravdu v takovém nebezpečí?
+subtitle: Ale je to špatná služba?
+categories: bezpečí
+tags: vpn youtube reklamy
+sidebar: []
+---
+Pokud sledujete YouTube, určite jste už narazili na nespočet videí, které sponzoruje nějaký poskytovatel tzv. **VPN**. Většinou se dozvíte něco jako „vaše data jsou v nebezpečí“ a/nebo „použijte naše služby pro zabezpečení vašich dat před hackery“. Toto se samozřejmě netýká *jen* NordVPN, ale myslím, že ti mají tu nejagresivnější marketingovou strategii snad ze všech.
+# ČÁST I: Kecy
+## Kdo stojí za NordVPN
+NordVPN vzniklo v roce 2012 jako produkt Toma Okmana, Eimantase Sabaliauskase a Jonase Karklyse. Služba má sloužit jako tzv. __Virtual Private Network__ neboli virtuální soukromá síť. Můžete se tak skrze NordVPN servery připojovat na internet třeba z Německa. Dle zvoleného protokolu je síťový provoz šifrován. NordVPN vlastní společnost [Nord Security](https://nordsecurity.com/), která zastřešuje i ostatní produkty značky Nord. Sídlo má ve Velké Británii. Nord Security kromě VPN nabízí i vlastního správce hesel a šifrovaný cloud.
+
+## NordVPN a reklamy YouTuberů
+Reklamy uvnitř obsahu, tedy reklamy, které tvůrce přidává přímo do videa výměnou za přímou platbu od společnosti, jsou tu s námi celkem dlouho. Jsou **efektivnější** než běžné reklamy, protože je s běžným blokovačem reklam nepřeskočíte a často je tvůrci tvoří zábavným způsobem, aby je sledující sám nepřeskočil. Je to **stabilnější příjem** pro tvůrce obsahu, jelikož se nemusí spoléhat na výdělek z reklam, které YouTube často omezuje svými pravidli demonetizace. To je také jeden z důvodů, proč často youtubeři těmto druhům reklam vyjdou vstříc, i když nemusí mít o daném produktu žádnou znalost. Často tak ve svých videích poskytují nepravdivé či přímo zavádějící tvrzení. Než uvedu příklady, je nutné si uvědomit, že **ne každý takový YouTuber poskytuje zavádějící informace** nebo že **NordVPN nejsou žádní podvodníci**. Nejsem žádný „samozvaný IT expert“, takže mě neváhejte případně opravit. A o tvrzení „NordVPN je nejlepší VPN“ se bavit ani nebudu, o tom si udělejte obrázek sami.
+
+### Tvrzení č. 1:
+**[Veřejné WiFi jsou nebezpečné a kdokoliv může sledovat, co na nich děláte](https://youtu.be/51TNTCAD8fQ?t=68)**
+
+Zalíbila se mi [odpověď Scotta Helmse](https://www.quora.com/Is-it-safe-to-use-internet-from-open-public-WiFi-hotspots/answer/Scott-Helms-8), který přirovnává veřejné WiFi sítě k veřejným ulicím. Pokud budete dělat hlouposti, jako je chození s přilepenou platební kartou na čele, samozřejmě vaše údaje budou odcizeny. Proto určitě není dobrý nápad dělat nákupy či se přihlašovat do bankovnictví skrz veřejné sítě. Když se na to podíváme realisticky, je relativně malá šance, že si zrovna k vám v mekáči sedl chlapec či dívka s laptopem, na kterém projíždí vaši historii vyhledávání. Navíc většina webů je zabezpečená pomocí SSL, takže přenos dat je šifrovaný. Takže při používání VPN to vlastně šifrujete ještě jednou (?), což už ale tak užitečné není. Jak [píše](https://www.eff.org/deeplinks/2020/01/why-public-wi-fi-lot-safer-you-think) EFF, tyto hrozby jsou díky HTTPS/SSL spíše minulostí. Váš poskytovatel internetu může sledovat např. jakou stránku otevíráte (třeba github.com), nicméně neuvidí žádné parametry, které odesíláte, ani jestli navštěvujete github.com/hernikplays nebo github.com/ytdl. A to stejné mohou lidé, kteří jsou kolem vás připojení na veřejné WiFi. „V životě se bojíte spousty věcí, veřejné WiFi si můžete ze seznamu odškrtnout“.
+
+### Tvrzení č. 2:
+**[[NordVPN poskytuje] maximální internetové bezpečí](https://youtu.be/a_LiGXtXXNQ?t=1642)**
+
+Jak už jsem řekl v předchozí části, před vlastní blbostí vás ani to nejlepší VPN nezachrání. Pokud máte selský rozum, tak poznáte, kam zadávat a nezadávat svoje osobní údaje, což se s rostoucí popularitou sociálního inženýrství o něco zhoršuje. A pokud si vás přecijen nějaký špičkový, státem placený hacker najde, tak mu VPN určitě nebude dělat problém.
+
+### Tvrzení č. 3:
+**[Zatímco [bez VPN] ti může jakýkoliv útočník vcelku jednoduše tvé zařízení nabourat, s ním jsi prakticky neviditelný […] smaže za tebou tvou stopu](https://youtu.be/sB8vHDS1Tcg?t=380)**
+
+Toto tvrzení je možná pravdivé pro NordVPN, jelikož nabízejí službu „[Threat Protection](https://nordvpn.com/features/threat-protection/)“, která slouží k blokování reklam, sledovacích prvků a nebezpečných webů, nicméně může vzbudit dojem, že takhle operuje každé VPN. Pokud vám jde o vaše bezpečí, neměli byste sázet na řešení jedním kliknutím, ale [prozkoumat různé možnosti a nástroje](https://mullvad.net/en/help/first-steps-towards-online-privacy/), včetně VPN. Pokud používáte např. služby od Googlu, už tak jim o sobě poskytujete dostatek údajů. 
+Útočník také nemůže „vcelku jednoduše“ vaše zařízení nabourat, to lze pouze pokud jste se rozhodli používat Windows 10 a nenainstalovali jste žádné aktualizace. V tom případě je váš systém děravý jak ementál a to už asi nikdo, kromě vás, nespraví. Takže aktualizujte svůj systém a aplikace jak to jen půjde!
+
+### Tvrzení č. 4:
+**Můžeš sledovat obsah uzamknutý pro určité země**
+
+To je samozřejmě pravda, nicméně některé služby se aktivně pokouší zamezit přístup uživatelům s VPN identifikováním IP adresy daného VPN serveru.
+
+### Tvrzení č. 5:
+**[[NordVPN] ti zrychlí internet](https://youtu.be/sB8vHDS1Tcg?t=436)**
+
+Když máte od poskytovatele internetu omezené stahování na 10 MB/s, nemůžete očekávat, že když budete ze serveru, kde může být zároveň napojeno X tisíc lidí a je někde v tramtárii, stahovat soubor, že se bude stahovat rychleji. [Pouze ve specifických případech](https://www.cloudflare.com/learning/access-management/vpn-speed/), kdy například poskytovatel internetu záměrně zpomaluje připojení např. k Netflixu, můžete pocítit zrychlení.
+
+## NordVPN a ještě divnější praktiky
+Zavádějícími tvrzeními to však nekončí, věděli jste, že na mnoha webech s hodnoceními VPN služeb si můžete určitou pozici **jednoduše koupit**? Ano, dostáváme se do takzvaného **provizního systému**, tedy systému, ve kterém firma proplatí provizi z provedeného nákupu jistému zprostředkovateli. Vtipná věc je, že některé tyto firmy [vlastní](https://blog.windscribe.com/consolidation-of-the-vpn-industry-spells-trouble-for-the-consumer-57e638634cf0/) zároveň takovéto *„publikace“* a samotné VPN služby, jako např. Kape Technologies, která se původně **zabývala adwarem**, nyní vlastní např. ExpressVPN a zároveň web VPNmentor. NordVPN není výjimkou s jejich provizním systémem nabízejícím až 40% část z ceny nákupu.  Dá se těmto „hodnocením“ vůbec věřit? Některým nejspíš ano, je dobré však zkontrolovat, jestli publikaci nevlastní nějaká mediální společnost.
+
+Dále můžeme na webu NordVPN, služby, která vám má pomoct chránit vaše soukromí a *„zneviditelnit se“*, **najít spoustu sledovacích prvků**, jako např. sledovací prvky Twitter Ads, Google Ads, Analytics a Bing.
+
+![Ukázka sledovacích prvků na stránce NordVPN](/assets/images/vpn/14.png)
+
+# Část II: Vzhůru dolů
+Ano, je čas, abych se vydal do králičí nory a NordVPN otestoval. Hned na úvodní stránce na vás vyskočí tuny slev. „Nakupte do X hodin a získejte slevu X%“. No tak to abych si pohnul, co? Samozřejmě, že ne. Úplně stejná stránka s úplně stejným odpočtem se mi zobrazila i včera. Navíc tato sleva platí jen na roční plány a já s NordVPN chci strávit co nejméně času. Takže beru jejich standardních 10,49 eur na měsíc, které naštěstí také nabízejí s garancí vrácení peněz. Samozřejmě k tomu ještě musíte přičíst daně, z čehož máme 12,69 *(nice)*. Použil jsem jejich [(ne)](https://www.theregister.com/2020/03/06/nordvpn_no_auth_needed_view_user_payments/)bezpečnou bránu a vzdal se svých těžce vydělaných peněz.
+Jejich stránka, ze které jsem měl stáhnout klienta, se chvástala „online zabezpečením pro všechny velké linuxové distribuce“, takže je super, že nabízejí stažení pouze pro distribuce založené na Debianu a RHEL, když jsem na Archu. Samozřejmě nic, co by Arch komunita nevyřešila.
+
+Nemůžu hodnotit jednoduchost prostředí, protože *to na linuxu ani není*. Nicméně se podíváme na rychlost.
+## Rychlosti (velmi stručně)
+![Výchozí rychlost (bez VPN, WiFi)](/assets/images/vpn/13.png)
+
+Výchozí rychlost (bez VPN, WiFi)
+
+![NordVPN Germany #1078](/assets/images/vpn/12.png)
+
+NordVPN Germany #1078
+
+![Rychlost stahování torrentů na serverech v Německu](/assets/images/vpn/11.png)
+
+Pokles rychlosti, úplně normální, protože pakety urazí větší vzdálenost. Streamování YouTube ve Full HD má pocititelné zpomalení/zasekávání. Rychlosti stahování torrentů se držely v průměru mezi 600 a 700 KB/s. 
+
+![NordVPN USA #9363](/assets/images/vpn/10.png)
+
+NordVPN USA #9363
+
+![Rychlost stahování torrentů na serverech v USA](/assets/images/vpn/9.png)
+
+Tady už změnu pocítíte víc. Zajímavé však je, že se videa z YouTube ve Full HD načítají rychleji. Nicméně rychlosti stahování torrentů skákaly nahorů a dolů.
+
+## Threat Protection Lite
+Další funkce dostupná pro linux je [TPL](https://support.nordvpn.com/General-info/Features/1047407402/What-are-Threat-Protection-and-Threat-Protection-Lite.htm), který má blokovat reklamy, nebezpečné stránky a pochybná připojení během připojení na VPN.
+
+Na webu NordVPN zablokoval sledovací prvky Twitteru, Bingu a Googlu, nicméně vynechal Google Analytics (což je asi pochopitelné, když o blokování sledujících prvků není ani zmínka).
+
+![Zablokované sledovací prvky na NordVPN.com](/assets/images/vpn/8.png)
+
+Na YouTube neblokuje reklamy vůbec,
+![Blokování reklam s TPL na YouTube](/assets/images/vpn/7.png)
+
+ale na jiných webech ano.
+![Blokování reklam s TPL na jiných webech](/assets/images/vpn/6.png)
+
+Takže nahradí blokovače jako [uBlock Origin](https://github.com/gorhill/uBlock#readme)? Řekl bych, že ne.
+# Část III: Opouštíme králičí noru
+Dobře, mám trochu NordVPN na vlastní kůži, ale teď se ho chci zbavit. Takže jdeme žádat zpět peníze.
+Zrušení obnovení předplatného bylo relativně snadné, v nastavení účtu stačilo kliknout na „Zrušit“.
+
+![Zrušení obnovení předplatného](/assets/images/vpn/5.png)
+
+Teď přijde ta bolestivější část, a to žádání o vrácení peněz. Dle podmínek máte 30 dní od prvního nákupu nárok na vrácení peněz.
+NordVPN říká, že podpora funguje 24/7. Na začátku jste spojeni s robotem, který vás postupně přepojí na živého člověka.
+
+![Robot na podpoře](/assets/images/vpn/4.png)
+
+Člověk se skutečně objevil.
+
+![Chat s podporu část 1](/assets/images/vpn/3.png)
+
+Chvilku mu to trvalo, takže jsem ho popostrčil.
+
+![Chat s podporu část 2](/assets/images/vpn/2.png)
+
+Řekl jsem mu slušně „Ne, díky“, po čemž mi nastavil vrácení peněz.
+
+![Chat s podporu část 3](/assets/images/vpn/1.png)
+
+Celkem rychle vyřízeno, dobrá práce. Zvláštní mi přišlo jen, že si mě nijak neověřil, pouze jsem na začátku poskytl e-mail, z čehož (doufám) vydedukoval, že to patří k mému účtu.
+Další den mi skutečně odebrali přístup k jejich službě, nicméně peníze jsou stále zablokované, tak snad si banka pohne.
+
+# Část V: Závěr
+Takže na závěr:
+**Je VPN úplně zbytečný nástroj?** Určitě ne.
+
+**Můžou youtubeři za to, že někdy neříkají pravdivé věci?** Spíš ne, nemůžete čekat každého youtubera, že je expert přes sítě, jenom se snaží se uživit a vyloženě lži říkají opravdu málokdy.
+
+**Snaží se NordVPN prodat hadí olej a moje děti na darknetu?** Nejspíš ne, ale měli by víc sjednotit prezentování co se týče sponzorování youtuberů.
+
+**Můžu důvěřovat NordVPN?** S jejich velikostí nejspíš ano.
+
+**Doporučil bych NordVPN?** Ne. Pokud chcete opravdu 100% anonymitu a hlavně no-bullshit produkt, použijte něco jako Mullvad *(toto není sponzorováno, sám ho používám a je fajn)*, který nenabízí žádné posrané slevy kvůli všemu možnému a kde dokonce můžete platit v hotovosti, ale nezapomeňte, že VPNkem to nekončí. Podívejte se na [Surveillance Self-Defense](https://ssd.eff.org/) od EFF pro více tipů na ochranu vašeho soukromí.

_posts/2022-10-22-rpi-arch.md

@@ -0,0 +1,102 @@
+---
+layout: post
+title: Instalujeme Arch Linux ARM na Raspberry Pi 3
+subtitle: Protože proč ne
+categories: tutoriál
+tags: návod rpi arch
+sidebar: []
+---
+![Arch Linux ARM logo](https://archlinuxarm.org/public/images/alarm.png)
+
+Raspbian OS už je ohraný. Pojďme si nainstalovat [ARM verzi Arch Linuxu](https://archlinuxarm.org/platforms/armv8/broadcom/raspberry-pi-3) na Raspberry Pi 3. Proces je relativně prostý.
+
+# Připravujeme SD kartu
+Nejdřív je nutné SD kartu naformátovat a rozdělit oddíly. Můžete to udělat svým oblíbeným způsobem, já použiji GUI nástroj GParted.
+
+Odstraníme všechny oddíly skrz kontextové menu pravého kliknutí a potvrzení fajfkou.
+
+![Odstraněné oddíly v GParted](/assets/images/rpi-arch/01.png)
+
+Následně vytvoříme jeden FAT32 oddíl, který bude sloužit jako bootovací. Bude stačit 128 MiB.
+
+![Vytváření FAT32 oddílu v GParted](/assets/images/rpi-arch/02.png)
+
+Druhý oddíl bude náš systémový, který bude ext4.
+
+![Vytváření ext4 oddílu v GParted](/assets/images/rpi-arch/03.png)
+
+Jakmile fajfkou potvrdíme a necháme oddíly vytvořit, můžete je ještě zformátovat, nicméně je nejdůležitější nastavit `boot` příznak na našem boot oddílu skrz kontextové menu.
+
+![Výběr příznaků v GParted](/assets/images/rpi-arch/04.png)
+
+Tak je všechno hotovo v GParted.
+
+# Přesouváme systém
+Dále připojíme naše oddíly podle jejich identifikátoru a čísla připojíme.
+
+Nejdřív si vytvoříme složky, `sudo mkdir -p /mnt/archpi/{root,boot}` nám vytvoří složky `root` a `boot` pro naše oddíly.
+
+Dále příkazem `sudo mount /dev/sdc1 /mnt/archpi/root` připojíme náš FAT32 bootovácí oddíl (**Označení `sdc1` se u vás může lišit, podívejte se do GPartedu nebo skrz příkaz `lsblk` na označení jednotlivých oddílů**) a příkazem `sudo mount /dev/sdc2 /mnt/archpi/boot` připojíme systémový oddíl.
+
+Dle oficiální [dokumentace](https://archlinuxarm.org/platforms/armv8/broadcom/raspberry-pi-3) se další proces má dělat skrz root uživatele, takže se přepneme příkazem `sudo su`.
+
+Příkazem `wget http://os.archlinuxarm.org/os/ArchLinuxARM-rpi-armv7-latest.tar.gz` stáhneme archiv a příkazem `tar -xf ArchLinuxARM-rpi-armv7-latest.tar.gz -C /mnt/archpi/root` ho rozbalíme.
+
+Pak musíme přesunout bootovací soubory do bootovacího oddílu: `mv /mnt/archpi/root/boot/* boot` a tím jsme hotovi, stačí oddíly odpojit příkazem `umount /mnt/archpi/root` a `umount /mnt/archpi/boot`. Jakmile se příkazy dokončí, můžete SD kartu vložit do RPi a zapnout.
+
+Výchozí jméno a zároveň heslo uživatele je `alarm` a roota `root`. Než bude systém nastavený, doporučuji použít `root` účet.
+
+# Připojení k Wi-Fi síti
+*Pokud používáte kabelové připojení, tak můžete přeskočit*
+Nyní se připojíme skrz terminál k Wi-Fi síti. Předpokládám, že název (SSID) sítě a heslo znáte a že zabezpečení je WPA2 Personal. Jinak si můžete prohlédnout [Arch Wiki](https://wiki.archlinux.org/title/Network_configuration/Wireless) pro více návodů.
+
+Příkazem `iw dev` zjistíte název vašeho interfacu (např. já mám `wlan0`). Zapneme ho pomocí `ip link wlan0 up` (místo `wlan0` tedy použijte váš název interfacu).
+
+Dále se tedy připojíme k nějaké Wi-Fi síti. Nejdřív musíme vytvořit konfigurační soubor pro `wpa_supplicant`, který slouží jako [suplikant](https://cs.wikipedia.org/wiki/Suplikant) s podporou WPA, WPA2 a WPA3.
+
+Pomocí příkazu `nano /etc/wpa_supplicant/wpa_supplicant.conf` vstoupíme do editace konfiguračního souboru. Do něj vložíme následující dva řádky:
+
+```
+ctrl_interface=/run/wpa_supplicant
+update_config=1
+```
+
+Klávesovou zkratkou `Ctrl+X`, zadáním `y` a potvrzením enterem uložíme soubor a opustíme editaci. wpa_supplicant teď můžeme spustit příkazem `wpa_supplicant -B -i wlan0 -c /etc/wpa_supplicant/wpa_supplicant.conf`.
+
+S běžícím wpa_supplicant můžeme použít příkaz `wpa_cli`, kde můžeme konfigurovat síť.
+
+Sítě zde můžete hledat příkazem [`scan`](https://wiki.archlinux.org/title/Wpa_supplicant#Connecting_with_wpa_cli), následováný `scan_results`.
+
+Pro přidání sítě použijeme příkaz `add_network`. Terminál vrátí `0`, což je ID sítě, které můžeme konfigurovat. Příkazem `set_network 0 ssid "MYSSID"` nastavíme SSID (název) sítě na `MYSSID`. Příkazem `set_network 0 psk "passphrase"` nastavíme heslo na `passphrase`. Jakmile je nastaveno, můžeme povolit síť pomocí `enable_network 0`. Konfiguraci uložíme příkazem `save_config` a opustíme pomocí `quit`.
+
+Jelikož ale právě teď nemáme IP adresu, musíme nastavit službu DHCP (pokud ji samozřejmě váš router má). Stačí zapnout službu `dhcpcd` pomocí příkazu `systemctl enable dhcpcd`. Abychom při každém zapnutí nemuseli síť manuálně zapínat, můžeme do `dhcpcd` přidat [hook](https://wiki.archlinux.org/title/Dhcpcd#10-wpa_supplicant), který ji automaticky zapne, stačí použít `ln -s /usr/share/dhcpcd/hooks/10-wpa_supplicant /usr/lib/dhcpcd/dhcpcd-hooks/`.
+
+V tomto stádiu doporučuji restartovat příkazem `reboot`.
+
+# Nastavujeme správce balíků
+Aktuálně bychom měli mít funkční síť, nicméně je potřeba pár dalších příkazů pokud chceme používat `pacman` správce balíků.
+
+Nejdřív musíme vytvořit klíčenku příkazem `pacman-key --init`, poté přidáme klíče Arch ARM repozitářů příkazem `pacman-key --populate archlinuxarm`. Teď můžete příkazem `pacman -Sy` repozitáře synchronizovat.
+
+Jako první balík bychom měli stáhnout [`sudo`](https://wiki.archlinux.org/title/sudo), abychom nemuseli používat `root` uživatele pro všechno nastavování. Nainstalujeme ho příkazem `pacman -S sudo`. Dále příkazem `nano /etc/sudoers` upravíme konfiguraci. Najdeme následující řádky (`Ctrl+W` pro hledání):
+```
+## Uncomment to allow members of group wheel to execute any command
+#%wheel ALL=(ALL:ALL) ALL
+```
+a odstraníme mřížku před `%` pro odstranění komentáře. Tím umožníme uživatelům v uživatelské skupině `wheel` používat příkaz `sudo`.
+
+Nyní přidáme uživatele `alarm` do skupiny `wheel` příkazem `gpasswd -a alarm wheel`. A teď už můžeme používat uživatele `alarm` pro různé administrativní operace místo roota.
+
+# Nastavení SSH přístupu
+Možná vás nebaví zapojovat RPi do monitoru nebo u něj klapat věci do klávesnice v terminálu nebo jen chcete vzdálený přístup. SSH lze povolit skrz OpenSSH, které je na Archu předinstalované. Stačí povolit službu pomocí `systemctl enable sshd`. Pro nějakou pokročilou konfiguraci si prohlédněte [Arch Wiki](https://wiki.archlinux.org/title/OpenSSH#Server_usage).
+
+Nyní se stačí připojit skrz nějaký SSH klient na vaše zařízení (pokud neznáte IP, podívejte se skrz příkaz `ip a`), třeba skrz `ssh alarm@vase.ip.adresa`.
+
+# HTTPS problémy
+Pokud máte problémy s SSL nebo komunikací se zabezpečenými servery, zkuste nainstalovat balík `ca-certificates` a nastavit systémový čas skrz `timedatectl set-time "2022-10-29 15:00:00` (samozřejmě vaše datum).
+
+# Závěr
+
+![Arch neofetch](/assets/images/rpi-arch/05.png)
+
+Instalace je opravdu prostý a snadný proces (i když jsem ho sám dělal asi 5x než mi to nabootovalo), takže určitě zkoušejte a zkoušejte.

_posts/2023-02-26-portable-linux.md

@@ -0,0 +1,102 @@
+---
+layout: post
+title: Jak si vytvořit přenosný Arch Linux systém na USB
+subtitle: Protože občas je Linux nutný na cestách
+categories: tutoriál
+tags: návod arch
+sidebar: []
+---
+# Co bude potřeba
+- Systém s Linuxem
+- USB s alespoň 4 GB místa
+
+{: .box-note}
+**Poznámka:** Instalaci můžete provést i na Windows či macOS, stačí si nainstalovat VirtualBox, na kterém spustíte nějaký linux systém skrz live ISO a následně řeknete VirtualBoxu, aby přesměroval vaše přenosné USB do virtuálního počítače.
+
+# 1. Příprava USB
+{: .box-note}
+**Poznámka:** Pokud instalujete systém, který má GUI instalátor, můžete nejdřív zkusit systém nainstalovat přes něj.
+
+## 1.1 Rozdělení na oddíly
+Pro jednoduchost budu používat nástroj GParted, který je dostupný snad na všech distribucích. Skrz něj si na USB v záložce `Zařízení` vytvoříme novou tabulku oddílů. Jako typ zvolíme `gpt` a dáme `Použít`.
+
+Dále si vytvoříme naše systémové oddíly. Pokud používáte UEFI (což dnes asi ano), vytvoříme na disku oddíl ve formátu FAT32 o velikosti ~500 MiB (to je [**MiB**](https://simple.wikipedia.org/wiki/Mebibyte), **nikoli MB**; pokud plánujete používat více jader tak třeba 800 MiB). Ten bude sloužit jako [EFI systémový oddílový](https://wiki.archlinux.org/title/EFI_system_partition). Ze zbytku vytvoříme nový EXT4 oddíl, na kterém bude náš systém.
+
+Naše rozdělení pak bude vypadat asi takto:
+
+![GParted zobrazení oddílů na USB](/assets/images/portable-arch/01.png)
+
+Nyní je třeba naše oddíly připojit k našemu již běžícímu systému.
+
+## 1.2 Připojení
+Nejdřív si zjistíme označení našich oddílů. Na to stačí příkaz `lsblk`.
+
+![Výpis lsblk](/assets/images/portable-arch/02.png)
+
+V mém případě je USB označeno jako `sdb`, kde EFI oddíl je `sdb1` a sýstemový oddíl je `sdb2`.
+
+V `/mnt` si vytvoříme složku, kam naše oddíly připojíme. Nejdřív připojíme náš systémový oddíl.
+
+```sh
+sudo mount --mkdir /dev/sdb2 /mnt/usb
+```
+
+Poté vytvoříme složku v `/mnt/usb`, do které připojíme náš EFI oddíl. Složka by se měla jmenovat vždy `boot`.
+
+```sh
+sudo mount --mkdir /dev/sdb1 /mnt/usb/boot
+```
+
+# 2. Instalace Arch Linuxu
+## 2.1 Instalace nutných balíků
+Přípravu systému provedeme příkazem `pacstrap`, který je dostupný v balíku `arch-install-scripts`. Příkaz nám nainstaluje základní balíky a linuxové jádro.
+
+```sh
+pacstrap -K /mnt/usb base linux linux-firmware coreutils bash grep gawk file tar gzip systemd sed sudo nano
+```
+
+Pokud chcete použít jiné jádro, stačí nahradit `linux` za jádro vašeho výběru.
+
+## 2.2 Nastavení GRUB
+GRUB nám bude sloužit k nabootování. Instalovat ho budeme už přímo na náš přenosný systém, takže se v našem nepřenosném systému přeneseme do jeho prostředí pomocí príkazu `arch-chroot` (součástí `arch-install-scripts`).
+
+{: .box-note}
+**Poznámka:** Pokud jste nenásledovali UEFI instrukce, bude se tento krok lišit, vizte [Arch Wiki návod](https://wiki.archlinux.org/title/GRUB#BIOS_systems)
+
+```sh
+sudo arch-chroot /mnt/usb/
+```
+
+Nejdříve nainstalujeme balíky `grub` a `efibootmgr` příkazem `pacman -S grub efibootmgr`. Jelikož není úplně ideální používat Secure Boot s linuxem a nastavovat ho je celkem otrava, bude v tomto návodu přeskočen. Budete-li ho potřebovat, následujte [oficiální Arch Wiki návod](https://wiki.archlinux.org/title/GRUB#Secure_Boot_support).
+
+Nasměrujeme GRUB instalaci na náš EFI oddíl. Protože jsme uvnitř našeho přenosného systému, nesměrujeme na `/mnt/usb` ale přímo `/` (v případě nejistoty zkontrolujte lokaci EFI oddílu příkazem `lsblk`).
+
+```sh
+grub-install --target=x86_64-efi --efi-directory=/boot --bootloader-id=GRUB --removable
+```
+
+Po instalaci ještě musíme vytvořit základní konfigurační soubor.
+
+```sh
+grub-mkconfig -o /boot/grub/grub.cfg
+```
+
+## 2.3 Vytvoření prvního uživatele
+Uživatele přidáme příkazem `useradd`. Pro vytvoření uživatele s domovskou složkou použijeme `useradd -m jmenouzivatele`. Pro vytvoření hesla použijeme příkaz `passwd`: `passwd jmenouzivatele`.
+
+Uživatele rovnou přidáme do skupiny sudařů, abychom nemuseli používat roota na administrátorské procesy. Nejdříve ale musíme umožnit skupině, aby příkaz `sudo` mohla používat. Otevřeme si konfiguraci příkazem `visudo` a kombinací `Ctrl+W` vyhledáme `%sudo`. Sekce by měla v souboru vypadat takto:
+
+```
+## Uncomment to allow members of group sudo to execute any command
+# %sudo ALL=(ALL:ALL) ALL
+```
+
+Odstraníme mřížku před `%` a soubor uložíme stisknutím kombinace `Ctrl+X`, poté klávesy `y` a `enter`. Teď stačí skupinu vytvořit příkazem `groupadd sudo` a uživatele přidat do skupiny příkazem `usermod -aG sudo jmenouzivatele`.
+
+## 2.4 Nainstalujte, co je třeba
+Nejlépe následujte návod na [Arch Wiki](https://wiki.archlinux.org/title/Installation_guide#Time_zone) pro doinstalování všeho, co je potřeba pro funkční systém.
+
+## 3. Konec
+Nyní stačí jen nabootovat a nainstalovat vše co jen potřebujete.
+
+Adaptováno z [Install Arch Linux on a removable medium](https://wiki.archlinux.org/title/Install_Arch_Linux_on_a_removable_medium) od autorů Arch Wiki pod licencí [CC-BY-SA 3.0](https://creativecommons.org/licenses/by-sa/3.0/)

_sass/misc/article-menu.scss

@@ -23,7 +23,7 @@
       @for $i from 2 to 7 {
         .h-h#{$i} {
           padding-inline-start: $indent + ($i - 2) * $base-font-size * 1.3;
-          font-size: $base-font-size * 1.2;
+          font-size: $base-font-size * 1.1;
           line-height: 1.4;
         }
       }

_sass/misc/click-to-top.scss

@@ -0,0 +1,46 @@
+.click-to-top {
+  transition: 0.3s;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: fixed;
+  width: 64px;
+  height: 64px;
+  border-radius: 32px;
+  right: 60px;
+  bottom: 48px;
+  background: white;
+  cursor: pointer;
+  opacity: 0;
+  transform: translateY(10px);
+  box-shadow: 0 2px 15px rgba(0, 0, 0, 0.15);
+  font-size: 24px;
+  user-select: none;
+
+  @include media-query(1024px) {
+    width: 48px;
+    height: 48px;
+    border-radius: 24px;
+    right: 35px;
+    font-size: 20px;
+  }
+
+  @include media-query($on-palm) {
+    width: 36px;
+    height: 36px;
+    border-radius: 18px;
+    right: 20px;
+    font-size: 16px;
+  }
+}
+
+.click-to-top.show {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+html[data-theme="dark"] {
+  .click-to-top {
+    background: #34323D;
+  }
+}

_sass/misc/gitment.scss

@@ -2,6 +2,10 @@
   color: #787878 !important;
 }
 
+.gitment-editor-header {
+  background-color: #fefefe;
+}
+
 .gitment-comment-main, .gitment-editor-main {
   background-color: #fff;
   border-radius: 3px !important;

_sass/yat.scss

@@ -2,7 +2,7 @@
 
 // Define defaults for each variable.
 
-$base-font-family: "Noto Sans Light", AppleSDGothicNeo-Regular, "Malgun Gothic", "Apple Color Emoji", Helvetica, Arial, Oswald, sans-serif, !default;
+$base-font-family: Helvetica, Arial, Oswald, sans-serif, !default;
 $base-font-size: 14px !default;
 $base-font-weight: 400 !default;
 $small-font-size:  $base-font-size * 0.875 !default;
@@ -12,7 +12,6 @@ $spacing-unit:     30px !default;
 
 $text-color:       #454545 !default;
 $background-color: #fff !default;
-$brand-color:      #ff5100 !default;
 
 $grey-color:       #828282 !default;
 $grey-color-light: lighten($grey-color, 40%) !default;
@@ -35,7 +34,7 @@ $banner-text-color: lighten($white-color, 0%) !default;
 $banner-background: rgba(0,0,0,0.8) !default;
 
 // Width of the content area
-$content-width:    920px !default;
+// $content-width:    920px !default;
 
 $on-palm:          600px !default;
 $on-laptop:        800px !default;
@@ -66,5 +65,6 @@ $on-laptop:        800px !default;
   "misc/article-menu",
   "misc/common-list",
   "misc/google-translate",
-  "misc/gitment"
+  "misc/gitment",
+  "misc/click-to-top"
 ;

_sass/yat/_base.scss

@@ -17,6 +17,7 @@ body {
   font-family: $base-font-family;
   font-weight: $base-font-weight;
   font-size: #{$base-font-size};
+  font-display: swap;
   line-height: #{$base-line-height};
   color: $text-color;
   background-color: $background-color;

_sass/yat/_dark.scss

@@ -2,11 +2,22 @@ $dark-background-color:       #0e0e0e !default;
 $dark-text-color: #bbb !default;
 
 html[data-theme="dark"]  {
-
   &[data-scroll-status='top'] {
-    .site-footer-inner {
-      border-top: solid 1px #2f2f2f !important;
-      transition: 0s;
+    header.site-header-transparent {
+      &.site-header {
+        @include media-query($on-laptop) {
+          .page-link {
+            color: #f8f8f8;
+          }
+        }
+      }
+    }
+
+    footer.site-footer {
+      .site-footer-inner {
+        border-top: solid 1px #2f2f2f !important;
+        transition: 0s;
+      }
     }
   }
 
@@ -20,6 +31,10 @@ html[data-theme="dark"]  {
     background-color: #454545;
   }
 
+  blockquote {
+    border-left: 4px solid #484848;
+  }
+
   table {
     color: #9d9d9d;
 
@@ -80,7 +95,7 @@ html[data-theme="dark"]  {
   .page-banner {
     .page-banner-img {
       & > *:first-child {
-        opacity: 0.8;
+        opacity: 0.718;
       }
     }
   }

_sass/yat/_layout.scss

@@ -23,7 +23,7 @@ html {
 
         @include media-query($on-laptop) {
           .page-link {
-            color: unset;
+            color: $header-text-color;
           }
 
           .menu-icon {
@@ -36,6 +36,7 @@ html {
     }
 
     footer.site-footer {
+      color: unset;
       background-color: transparent;
 
       .site-footer-inner {
@@ -209,6 +210,11 @@ html {
   }
 }
 
+.copyleft {
+  display: inline-block;
+  transform: rotate(180deg);
+}
+
 /**
  * Post header
  */
@@ -274,7 +280,7 @@ html {
   }
 
   .post-title {
-    margin-bottom: 2px;
+    margin-bottom: $spacing-unit * 0.2;
     transition: 0.2s all;
 
     a {
@@ -306,24 +312,28 @@ html {
   }
 
   .post-link {
-    @include relative-font-size(1.5);
+    @include relative-font-size(1.65);
     font-weight: $base-font-weight * 1.5;
-    color: #15171a;
+    color: #333;
   }
 
   .post-excerpt {
     color: #777;
+    word-break: break-word;
+    overflow-wrap: break-word;
   }
 
   .post-tags .post-tag {
+    display: inline-block;
     text-decoration: none;
     border: 1px solid;
     padding: 2px 4px;
     border-radius: 2px;
     transition: color 0.2s;
+    margin-bottom: 8px;
 
-    &:not(:first-child) {
-      margin-left: 8px;
+    &:not(:last-child) {
+      margin-right: 8px;
     }
 
     &:hover {
@@ -379,7 +389,11 @@ html {
     border-bottom: 1px solid #ebebeb;
 
     .post-title {
-      margin-bottom: 2px;
+      margin-bottom: 6px;
+    }
+
+    .post-subtitle {
+      font-weight: lighter;
     }
 
     .post-meta {
@@ -569,6 +583,15 @@ html {
       @include center-image;
       transition: 0.1s all ease-in-out;
     }
+
+    & > video {
+      width: 100vw;
+      object-fit: cover;
+    }
+
+    & > img.img-placeholder {
+      display: none;
+    }
   }
 
   .wrapper {
@@ -588,18 +611,23 @@ html {
       > :nth-child(1) {
         @include relative-font-size(3.9);
         letter-spacing: -1px;
-        margin-bottom: 16px;
+        margin-bottom: 0.1em;
         font-weight: normal;
         transition: 0.2s all;
 
         @include media-query($on-palm) {
-          @include relative-font-size(2.425);
+          @include relative-font-size(1.975);
         }
       }
 
       > :nth-child(2) {
-        font-weight: normal;
-        margin-bottom: 0;
+        font-weight: lighter;
+        margin-bottom: 0.8em;
+        transition: 0.2s all;
+
+        @include media-query($on-palm) {
+          @include relative-font-size(1.175);
+        }
       }
 
       > :last-child {

about.html

@@ -6,12 +6,5 @@ title: About
 <h2>About</h2>
 
 <p>
-:art:&nbsp;Yet another theme for elegant writers with modern flat style
-and beautiful night mode.
-</p>
-
-<p>
-Hey, nice to meet you, you found this Jekyll theme. Here the yet another
-theme is a modern theme, and it's quiet clear, clean and neat for writers
-and posts.
+I'm Matyáš Caras, I study IT in the Czech Republic and create software projects.
 </p>

assets/css/main.scss

@@ -4,13 +4,22 @@
 
 // Default theme colors
 $theme-colors: (
-  coolblack: #090a0b,
-  spacegrey: #353535,
-  snowwhite: #ffffff,
+  "coolblack": #090a0b,
+  "spacegrey": #353535,
+  "snowwhite": #ffffff,
+);
+
+// Default brand colors
+$brand-colors: (
+  "orangered": #ff5100,
+  "greatgold": #f2cb05,
+  "greenblue": #389092,
 );
 
 $theme-name: "{{ site.theme_color }}";
+$brand-name: "{{ site.brand_color }}";
 $theme-color: map-get($theme-colors, "snowwhite");
+$brand-color: map-get($brand-colors, "orangered");
 
 @if map-has-key($theme-colors, $theme-name) {
   $theme-color: map-get($theme-colors, $theme-name);
@@ -18,4 +27,12 @@ $theme-color: map-get($theme-colors, "snowwhite");
   $theme-color: {{ site.theme_color | default: '#ffffff' }};
 }
 
+@if map-has-key($brand-colors, $brand-name) {
+  $brand-color: map-get($brand-colors, $brand-name);
+} @else if str-index($brand-name, "#") == 1 {
+  $brand-color: {{ site.brand_color | default: '#ff5100' }};
+}
+
+$content-width: {{ site.content_width | default: '920px' }};
+
 @import "yat";

index.html

@@ -4,5 +4,5 @@
 
 layout: home
 title: Home
-banner: "/assets/images/banners/home.jpeg"
+banner: "/assets/images/banners/home.jpg"
 ---

jekyll-theme-yat.gemspec

@@ -2,7 +2,7 @@
 
 Gem::Specification.new do |spec|
   spec.name          = "jekyll-theme-yat"
-  spec.version       = "1.7.0"
+  spec.version       = "1.8.0"
   spec.authors       = ["jeffreytse"]
   spec.email         = ["jeffreytse.mail@gmail.com"]