- {% capture _platform %} + {%- capture _platform -%} Jekyll - {% endcapture %} + {%- endcapture -%} - {% capture _theme %} + {%- capture _theme -%} Chirpy - {% endcapture %} + {%- endcapture -%} {{ site.data.locales[site.lang].meta - | default: 'Powered by :PLATFORM with :THEME theme.' + | default: 'Using the :PLATFORM theme :THEME.' | replace: ':PLATFORM', _platform | replace: ':THEME', _theme }}
diff --git a/_includes/head.html b/_includes/head.html index 03ab48f..e2f6336 100644 --- a/_includes/head.html +++ b/_includes/head.html @@ -24,20 +24,25 @@ {% if page.image %} {% assign img = page.image.path | default: page.image %} - {% assign img_path = page.img_path | append: '/' | append: img | replace: '//', '/' %} - {% capture target %}"{{ img | absolute_url }}"{% endcapture %} - {% if site.img_cdn contains '//' %} - - {% capture replacement %}"{{ site.img_cdn }}{{ img_path }}"{% endcapture %} - {% else %} - - {%- capture replacement -%} - "{{ site.img_cdn | append: '/' | append: img_path | replace: '//', '/' | absolute_url }}" - {%- endcapture -%} - {% endif %} + {% unless img contains '://' %} + {% assign img_path = page.img_path | append: '/' | append: img | replace: '//', '/' %} + {% capture target %}"{{ img | absolute_url }}"{% endcapture %} + + {% if site.img_cdn contains '//' %} + + {% capture replacement %}"{{ site.img_cdn }}{{ img_path }}"{% endcapture %} + {% else %} + + {%- capture replacement -%} + "{{ site.img_cdn | append: '/' | append: img_path | replace: '//', '/' | absolute_url }}" + {%- endcapture -%} + {% endif %} + + {% assign seo_tags = seo_tags | replace: target, replacement %} + + {% endunless %} - {% assign seo_tags = seo_tags | replace: target, replacement %} {% endif %} {{ seo_tags }} diff --git a/_includes/js-selector.html b/_includes/js-selector.html index 4285ff9..c760968 100644 --- a/_includes/js-selector.html +++ b/_includes/js-selector.html @@ -15,12 +15,11 @@ {% if page.layout == 'post' or page.layout == 'page' %} {% assign _urls = site.data.assets[origin].magnific-popup.js - | append: ',' | append: site.data.assets[origin].lozad.js + | append: ',' | append: site.data.assets[origin].lazysizes.js | append: ',' | append: site.data.assets[origin].clipboard.js %} {% include jsdelivr-combine.html urls=_urls %} - {% endif %} {% if page.layout == 'home' diff --git a/_includes/post-sharing.html b/_includes/post-sharing.html index a15fc03..7285c39 100644 --- a/_includes/post-sharing.html +++ b/_includes/post-sharing.html @@ -6,7 +6,6 @@ {% capture title %}{{ page.title }} - {{ site.title }}{% endcapture %} - {% assign title = title | url_encode %} {% assign url = page.url | absolute_url | url_encode %} {% for share in site.data.share.platforms %} diff --git a/_includes/refactor-content.html b/_includes/refactor-content.html index 6535e91..e98b991 100644 --- a/_includes/refactor-content.html +++ b/_includes/refactor-content.html @@ -51,31 +51,52 @@ {% assign _img_content = nil %} {% assign _img_snippets = _content | split: IMG_TAG %} + + {% if site.img_cdn %} + {% if site.img_cdn contains '//' %} + {% assign _path_prefix = site.img_cdn %} + {% else %} + {% assign _path_prefix = site.img_cdn | relative_url %} + {% endif %} + {% else %} + {% assign _path_prefix = site.baseurl %} + {% endif %} + + + {% if page.img_path %} + {% assign _path = page.img_path | append: '/' | replace: '//', '/' %} + {% assign _path_prefix = _path_prefix | append: _path %} + {% endif %} + {% for _img_snippet in _img_snippets %} {% if forloop.first %} {% assign _img_content = _img_snippet %} {% continue %} {% endif %} - {% assign _width = nil %} - {% assign _height = nil %} - {% assign _src = nil %} - {% assign _left = _img_snippet | split: '>' | first %} {% assign _right = _img_snippet | remove: _left %} - {% assign _left = _left | remove: ' /' %} - {% assign _left = _left | replace: ' w=', ' width=' | replace: ' h=', ' height=' %} - {% assign _attrs = _left | split: ' ' %} + {% unless _left contains 'src=' %} + {% continue %} + {% endunless %} + + {% assign _left = _left | remove: ' /' | replace: ' w=', ' width=' | replace: ' h=', ' height=' %} + {% assign _attrs = _left | split: '" ' %} + + {% assign _width = nil %} + {% assign _height = nil %} + {% assign _lqip = nil %} + {% assign _class = nil %} {% for _attr in _attrs %} - {% assign _pair = _attr | split: '=' %} - {% if _pair.size < 2 %} + {% unless _attr contains '=' %} {% continue %} - {% endif %} + {% endunless %} + {% assign _pair = _attr | remove: '"' | split: '=' %} {% capture _key %}{{ _pair | first }}{% endcapture %} - {% capture _value %}{{ _pair | last | replace: '"', '' }}{% endcapture %} + {% capture _value %}{{ _pair | last }}{% endcapture %} {% case _key %} {% when 'width' %} @@ -84,62 +105,91 @@ {% assign _height = _value %} {% when 'src' %} {% assign _src = _value %} + {% when 'lqip' %} + {% assign _lqip = _value %} + {% when 'class' %} + {% assign _class = _value %} {% endcase %} - {% if _width and _height and _src %} - {% break %} - {% endif %} {% endfor %} - {% if _src %} - {% unless _src contains '://' %} - - - {% if site.img_cdn %} - {% if site.img_cdn contains '//' %} - {% assign _src_prefix = site.img_cdn %} - {% else %} - {% assign _src_prefix = site.img_cdn | relative_url %} - {% endif %} - {% else %} - {% assign _src_prefix = site.baseurl %} - {% endif %} - - - {% if page.img_path %} - {% assign _path = page.img_path | append: '/' | replace: '//', '/' %} - {% assign _src_prefix = _src_prefix | append: _path %} - {% endif %} - - {% assign _final_src = _src_prefix | append: _src %} - {% assign _left = _left | replace: _src, _final_src %} - - {% endunless %} - - - - {% assign _left = _left | replace: 'src=', 'data-src=' %} - + + {% if _class %} + {% capture _old_class %}class="{{ _class }}"{% endcapture %} + {% assign _left = _left | remove: _old_class %} {% endif %} - + {% assign _final_src = nil %} - {% if _width and _height %} - {%- capture _svg -%} - src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 {{ _width }} {{ _height }}'%3E%3C/svg%3E" - {%- endcapture -%} + {% unless _src contains '//' %} + {% assign _final_src = _path_prefix | append: _src %} + {% capture _src_from %}"{{ _src }}"{% endcapture %} + {% capture _src_to %}"{{ _final_src }}"{% endcapture %} + {% assign _left = _left | replace: _src_from, _src_to %} + {% endunless %} - {% assign _left = _svg | append: ' ' | append: _left %} + {% if _lqip %} + {% unless _lqip contains ':' %} + {% assign _final_lqip = _path_prefix | append: _lqip %} + {% capture _lqip_from %}"{{ _lqip }}"{% endcapture %} + {% capture _lqip_to %}"{{ _final_lqip }}"{% endcapture %} + {% assign _left = _left | replace: _lqip_from, _lqip_to %} + {% endunless %} + {% endif %} + + + {% assign _left = _left | replace: 'src=', 'data-src=' %} + {% if _left contains 'class=' %} + {% assign _left = _left | replace: 'class="', 'class="lazyload '%} + {% else %} + {% assign _left = _left | append: ' class="lazyload"' %} + {% endif %} + + + {% if _lqip %} + {% assign _left = _left | replace: ' lqip=', ' data-lqip="true" src=' %} + {% else %} + {% if _width and _height %} + + {%- capture _svg -%} + src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 {{ _width }} {{ _height }}'%3E%3C/svg%3E" + {%- endcapture -%} + {% assign _left = _svg | append: ' ' | append: _left %} + {% assign _class = _class | append: ' shimmer' %} + {% endif %} {% endif %} {% assign _left = _left | append: ' data-proofer-ignore' %} + + {% assign _parent = _right | slice: 1, 4 %} + + {% if _parent == '' %} + + {% assign _size = _img_content | size | minus: 1 %} + {% capture _class %} + class="img-link{% unless _lqip %} shimmer{% endunless %}" + {% endcapture %} + {% assign _img_content = _img_content | slice: 0, _size | append: _class | append: '>' %} + + {% else %} + + {%- capture _wrapper_start -%} + + {%- endcapture -%} + {% assign _img_content = _img_content | append: _wrapper_start %} + {% assign _right = _right | prepend: '> {% assign _img_content = _img_content | append: IMG_TAG | append: _left | append: _right %} {% endfor %} - {% assign _content = _img_content %} + {% if _img_content %} + {% assign _content = _img_content %} + {% endif %} {% endif %} diff --git a/_includes/sidebar.html b/_includes/sidebar.html index 93c6749..c32efb3 100644 --- a/_includes/sidebar.html +++ b/_includes/sidebar.html @@ -81,7 +81,17 @@ {% if url %} + {% assign link_types = nil %} + {% unless entry.noblank %} + {% assign link_types = link_types | append: " noopener" %} + target="_blank" + {% endunless %} + + {% if entry.type == 'mastodon' %} + {% assign link_types = link_types | append: " me" %} + {% endif %} + + {% if link_types %}rel="{{ link_types | lstrip }}"{% endif %}> {% endif %} diff --git a/_javascript/copyright b/_javascript/copyright index a45813d..f63512d 100644 --- a/_javascript/copyright +++ b/_javascript/copyright @@ -1,5 +1,5 @@ /*! - * Chirpy v5.3.2 (https://github.com/cotes2020/jekyll-theme-chirpy/) + * Chirpy v5.4.0 (https://github.com/cotes2020/jekyll-theme-chirpy/) * © 2019 Cotes Chung * MIT Licensed */ diff --git a/_javascript/utils/img-extra.js b/_javascript/utils/img-extra.js index 528f867..90a3f49 100644 --- a/_javascript/utils/img-extra.js +++ b/_javascript/utils/img-extra.js @@ -1,33 +1,13 @@ /** - Lazy load images (https://github.com/ApoorvSaxena/lozad.js) - and popup when clicked (https://github.com/dimsemenov/Magnific-Popup) + * Set up image stuff */ -$(function () { - const IMG_SCOPE = '#main > div.row:first-child > div:first-child'; - - if ($(`${IMG_SCOPE} img`).length <= 0) { +(function() { + if ($('#core-wrapper img[data-src]') <= 0) { return; } - /* lazy loading */ - - const imgList = document.querySelectorAll(`${IMG_SCOPE} img[data-src]`); - const observer = lozad(imgList); - observer.observe(); - - /* popup */ - - $(`${IMG_SCOPE} p > img[data-src], ${IMG_SCOPE} img[data-src].preview-img`).each( - function () { - let nextTag = $(this).next(); - const title = nextTag.prop('tagName') === 'EM' ? nextTag.text() : ''; - const src = $(this).attr('data-src'); // created by lozad.js - - $(this).wrap(``); - } - ); - + /* See:
- 
-
- {% if page.image.alt %}
+ ![]()
+ {%- if page.image.alt -%}
{{ page.image.alt }}
- {% endif %}
-
+ {%- endif -%}
{% endif %}
diff --git a/_posts/2019-08-08-text-and-typography.md b/_posts/2019-08-08-text-and-typography.md
index 55e65c3..7cacc70 100644
--- a/_posts/2019-08-08-text-and-typography.md
+++ b/_posts/2019-08-08-text-and-typography.md
@@ -8,14 +8,12 @@ math: true
mermaid: true
image:
path: /commons/devices-mockup.png
- width: 800
- height: 500
+ lqip: data:image/webp;base64,UklGRpoAAABXRUJQVlA4WAoAAAAQAAAADwAABwAAQUxQSDIAAAARL0AmbZurmr57yyIiqE8oiG0bejIYEQTgqiDA9vqnsUSI6H+oAERp2HZ65qP/VIAWAFZQOCBCAAAA8AEAnQEqEAAIAAVAfCWkAALp8sF8rgRgAP7o9FDvMCkMde9PK7euH5M1m6VWoDXf2FkP3BqV0ZYbO6NA/VFIAAAA
alt: Responsive rendering of Chirpy theme on multiple devices.
---
This post is to show Markdown syntax rendering on [**Chirpy**](https://github.com/cotes2020/jekyll-theme-chirpy/fork), you can also use it as an example of writing. Now, let's start looking at text and typography.
-
## Titles
---
# H1 - heading
@@ -26,7 +24,6 @@ This post is to show Markdown syntax rendering on [**Chirpy**](https://github.co
-
- {% if page.image.alt %}
+ H4 - heading
--- -## Paragraph @@ -95,56 +92,6 @@ Moon Click the hook will locate the footnote[^footnote], and here is another footnote[^fn-nth-2]. -## Images - -- Default (with caption) - -{: width="972" height="589" } -_Full screen width and center alignment_ - -
- -- Shadow - -{: .shadow width="1548" height="864" .w-75 } -_shadow effect (visible in light mode)_ - -
- -- Left aligned - -{: width="972" height="589" .w-75 .normal} - -- Float to left - - {: width="972" height="589" .w-50 .left} - Praesent maximus aliquam sapien. Sed vel neque in dolor pulvinar auctor. Maecenas pharetra, sem sit amet interdum posuere, tellus lacus eleifend magna, ac lobortis felis ipsum id sapien. Proin ornare rutrum metus, ac convallis diam volutpat sit amet. Phasellus volutpat, elit sit amet tincidunt mollis, felis mi scelerisque mauris, ut facilisis leo magna accumsan sapien. In rutrum vehicula nisl eget tempor. Nullam maximus ullamcorper libero non maximus. Integer ultricies velit id convallis varius. Praesent eu nisl eu urna finibus ultrices id nec ex. Mauris ac mattis quam. Fusce aliquam est nec sapien bibendum, vitae malesuada ligula condimentum. Phasellus a tortor aliquam, tristique felis sit amet, elementum enim. Integer vestibulum vitae nulla nec pretium. - -- Float to right - - {: width="972" height="589" .w-50 .right} - Praesent maximus aliquam sapien. Sed vel neque in dolor pulvinar auctor. Maecenas pharetra, sem sit amet interdum posuere, tellus lacus eleifend magna, ac lobortis felis ipsum id sapien. Proin ornare rutrum metus, ac convallis diam volutpat sit amet. Phasellus volutpat, elit sit amet tincidunt mollis, felis mi scelerisque mauris, ut facilisis leo magna accumsan sapien. In rutrum vehicula nisl eget tempor. Nullam maximus ullamcorper libero non maximus. Integer ultricies velit id convallis varius. Praesent eu nisl eu urna finibus ultrices id nec ex. Mauris ac mattis quam. Fusce aliquam est nec sapien bibendum, vitae malesuada ligula condimentum. Phasellus a tortor aliquam, tristique felis sit amet, elementum enim. Integer vestibulum vitae nulla nec pretium. - -## Mermaid SVG - -```mermaid - gantt - title Adding GANTT diagram functionality to mermaid - apple :a, 2017-07-20, 1w - banana :crit, b, 2017-07-23, 1d - cherry :active, c, after b a, 1d -``` - -## Mathematics - -The mathematics powered by [**MathJax**](https://www.mathjax.org/): - -$$ \sum_{n=1}^\infty 1/n^2 = \frac{\pi^2}{6} $$ - -When $a \ne 0$, there are two solutions to $ax^2 + bx + c = 0$ and they are - -$$ x = {-b \pm \sqrt{b^2-4ac} \over 2a} $$ - ## Inline code This is an example of `Inline Code`. @@ -153,7 +100,7 @@ This is an example of `Inline Code`. Here is the `/path/to/the/file.extend`{: .filepath}. -## Code block +## Code blocks ### Common @@ -161,22 +108,12 @@ Here is the `/path/to/the/file.extend`{: .filepath}. This is a common code snippet, without syntax highlight and line number. ``` -### Specific Languages - -#### Console - -```console -$ env |grep SHELL -SHELL=/usr/local/bin/bash -PYENV_SHELL=bash -``` - -#### Shell +### Specific Language ```bash if [ $? -ne 0 ]; then - echo "The command was not successful."; - #do the needful / exit + echo "The command was not successful."; + #do the needful / exit fi; ``` @@ -189,6 +126,58 @@ fi; ``` {: file='_sass/jekyll-theme-chirpy.scss'} +## Mathematics + +The mathematics powered by [**MathJax**](https://www.mathjax.org/): + +$$ \sum_{n=1}^\infty 1/n^2 = \frac{\pi^2}{6} $$ + +When $a \ne 0$, there are two solutions to $ax^2 + bx + c = 0$ and they are + +$$ x = {-b \pm \sqrt{b^2-4ac} \over 2a} $$ + +## Mermaid SVG + +```mermaid + gantt + title Adding GANTT diagram functionality to mermaid + apple :a, 2017-07-20, 1w + banana :crit, b, 2017-07-23, 1d + cherry :active, c, after b a, 1d +``` + +## Images + +### Default (with caption) + +{: width="972" height="589" } +_Full screen width and center alignment_ + +### Left aligned + +{: width="972" height="589" .w-75 .normal} + +### Float to left + +{: width="972" height="589" .w-50 .left} +Praesent maximus aliquam sapien. Sed vel neque in dolor pulvinar auctor. Maecenas pharetra, sem sit amet interdum posuere, tellus lacus eleifend magna, ac lobortis felis ipsum id sapien. Proin ornare rutrum metus, ac convallis diam volutpat sit amet. Phasellus volutpat, elit sit amet tincidunt mollis, felis mi scelerisque mauris, ut facilisis leo magna accumsan sapien. In rutrum vehicula nisl eget tempor. Nullam maximus ullamcorper libero non maximus. Integer ultricies velit id convallis varius. Praesent eu nisl eu urna finibus ultrices id nec ex. Mauris ac mattis quam. Fusce aliquam est nec sapien bibendum, vitae malesuada ligula condimentum. + +### Float to right + +{: width="972" height="589" .w-50 .right} +Praesent maximus aliquam sapien. Sed vel neque in dolor pulvinar auctor. Maecenas pharetra, sem sit amet interdum posuere, tellus lacus eleifend magna, ac lobortis felis ipsum id sapien. Proin ornare rutrum metus, ac convallis diam volutpat sit amet. Phasellus volutpat, elit sit amet tincidunt mollis, felis mi scelerisque mauris, ut facilisis leo magna accumsan sapien. In rutrum vehicula nisl eget tempor. Nullam maximus ullamcorper libero non maximus. Integer ultricies velit id convallis varius. Praesent eu nisl eu urna finibus ultrices id nec ex. Mauris ac mattis quam. Fusce aliquam est nec sapien bibendum, vitae malesuada ligula condimentum. + +### Dark/Light mode & Shadow + +The image below will toggle dark/light mode based on theme preference, notice it has shadows. + +{: .light .w-75 .shadow .rounded-10 w='1212' h='668' } +{: .dark .w-75 .shadow .rounded-10 w='1212' h='668' } + +## Video + +{% include embed/youtube.html id='Balreaj8Yqs' %} + ## Reverse Footnote [^footnote]: The footnote source diff --git a/_posts/2019-08-08-write-a-new-post.md b/_posts/2019-08-08-write-a-new-post.md index 1395ece..a1c41c2 100644 --- a/_posts/2019-08-08-write-a-new-post.md +++ b/_posts/2019-08-08-write-a-new-post.md @@ -7,7 +7,7 @@ tags: [writing] render_with_liquid: false --- -This post will guide you how to write a post on _Chirpy_ theme. Even if you have previous experience with Jekyll, this article is worth reading, because many features require specific variables to be set. +This tutorial will guide you how to write a post in the _Chirpy_ template, and it's worth reading even if you've used Jekyll before, as many features require specific variables to be set. ## Naming and Path @@ -177,9 +177,18 @@ By default, the image is centered, but you can specify the position by using one ``` {: .nolineno} +### Dark/Light mode + +You can make images follow theme preferences in dark/light mode. This requires you to prepare two images, one for dark mode and one for light mode, and then assign them a specific class (`dark` or `light`): + +```markdown +{: .light } +{: .dark } +``` + ### Shadow -The screenshots of the program window can be considered to show the shadow effect, and the shadow will be visible in the `light` mode: +The screenshots of the program window can be considered to show the shadow effect: ```markdown {: .shadow } @@ -209,7 +218,7 @@ The parsing result will automatically add the CDN prefix `https://cdn.com` befor ```html
```
-{: .nolineno}
+{: .nolineno }
### Image Path
@@ -220,7 +229,6 @@ When a post contains many images, it will be a time-consuming task to repeatedly
img_path: /img/path/
---
```
-{: .nolineno }
And then, the image source of Markdown can write the file name directly:
@@ -238,28 +246,49 @@ The output will be:
### Preview Image
-If you want to add an image to the top of the post contents, specify the attribute `path`, `width`, `height`, and `alt` for the image:
+If you want to add an image at the top of the article, please provide an image with a resolution of `1200 x 630`. Please note that if the image aspect ratio does not meet `1.91 : 1`, the image will be scaled and cropped.
+
+Knowing these prerequisites, you can start setting the image's attribute:
```yaml
---
image:
path: /path/to/image
- width: 1000 # in pixels
- height: 400 # in pixels
alt: image alternative text
---
```
-Except for `alt`, all other options are necessary, especially the `width` and `height`, which are related to user experience and web page loading performance. The above section "[Size](#size)" also mentions this.
-
Starting from _Chirpy v5.0.0_, the attributes `height` and `width` can be abbreviated: `height` → `h`, `width` → `w`. In addition, the [`img_path`](#image-path) can also be passed to the preview image, that is, when it has been set, the attribute `path` only needs the image file name.
For simple use, you can also just use `image` to define the path.
```yml
+---
image: /path/to/image
+---
```
+### LQIP
+
+For preview images:
+
+```yaml
+---
+image:
+ lqip: /path/to/lqip-file # or base64 URI
+---
+```
+
+> You can observe LQIP in the preview image of post [_Text and Typography_](/posts/text-and-typography/).
+
+
+For normal images:
+
+```markdown
+{: lqip="/path/to/lqip-file" }
+```
+{: .nolineno }
+
## Pinned Posts
You can pin one or more posts to the top of the home page, and the fixed posts are sorted in reverse order according to their release date. Enable by:
@@ -357,6 +386,24 @@ If you want to display the **Liquid** snippet, surround the liquid code with `{%
Or adding `render_with_liquid: false` (Requires Jekyll 4.0 or higher) to the post's YAML block.
+## Videos
+
+You can embed a video with the following syntax:
+
+```liquid
+{% include embed/{Platform}.html id='{ID}' %}
+```
+Where `Platform` is the lowercase of the platform name, and `ID` is the video ID.
+
+The following table shows how to get the two parameters we need in a given video URL, and you can also know the currently supported video platforms.
+
+| Video URL | Platform | ID |
+|----------------------------------------------------------------------------------------------------|-----------|:--------------|
+| [https://www.**youtube**.com/watch?v=**H-B46URT4mg**](https://www.youtube.com/watch?v=H-B46URT4mg) | `youtube` | `H-B46URT4mg` |
+| [https://www.**twitch**.tv/videos/**1634779211**](https://www.twitch.tv/videos/1634779211) | `twitch` | `1634779211` |
+
+
+
## Learn More
For more knowledge about Jekyll posts, visit the [Jekyll Docs: Posts](https://jekyllrb.com/docs/posts/).
diff --git a/_posts/2019-08-09-getting-started.md b/_posts/2019-08-09-getting-started.md
index 19645fa..d5eb9c5 100644
--- a/_posts/2019-08-09-getting-started.md
+++ b/_posts/2019-08-09-getting-started.md
@@ -39,15 +39,13 @@ $ bash tools/init.sh
The above command will:
-1. Removes some files or directories from your repository:
- - `.travis.yml`{: .filepath}
- - files under `_posts`{: .filepath}
+1. Remove the files in `_posts`{: .filepath} from your repository.
2. If the option `--no-gh` is provided, the directory `.github`{: .filepath} will be deleted. Otherwise, set up the GitHub Action workflow by removing the extension `.hook`{: .filepath} of `.github/workflows/pages-deploy.yml.hook`{: .filepath}, and then remove the other files and directories in the folder `.github`{: .filepath}.
-3. Removes item `Gemfile.lock` from `.gitignore`{: .filepath}.
+3. Remove item `Gemfile.lock` from `.gitignore`{: .filepath}.
-4. Creates a new commit to save the changes automatically.
+4. Create a new commit to save the changes automatically.
### Installing Dependencies
diff --git a/_sass/addon/commons.scss b/_sass/addon/commons.scss
index 1b9b4f1..9e1b1f1 100644
--- a/_sass/addon/commons.scss
+++ b/_sass/addon/commons.scss
@@ -83,6 +83,47 @@ a {
img {
max-width: 100%;
height: auto;
+
+ &[data-src] {
+ &.lazyloaded {
+ z-index: 1;
+ -webkit-animation: fade-in 0.4s ease-in;
+ animation: fade-in 0.4s ease-in;
+ }
+
+ &[data-lqip="true"] {
+ &.lazyload,
+ &.lazyloading {
+ -webkit-filter: blur(20px);
+ filter: blur(20px);
+ }
+ }
+
+ &:not([data-lqip="true"]) {
+ &.lazyload,
+ &.lazyloading {
+ background: var(--img-bg);
+ }
+ }
+
+ &.shadow {
+ -webkit-filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.08));
+ filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.08));
+ box-shadow: none !important; /* cover the Bootstrap 4.6.1 styles */
+ }
+
+ @extend %img-caption;
+ }
+
+ @-webkit-keyframes fade-in {
+ from { opacity: 0; }
+ to { opacity: 1; }
+ }
+
+ @keyframes fade-in {
+ from { opacity: 0; }
+ to { opacity: 1; }
+ }
}
blockquote {
@@ -93,15 +134,19 @@ blockquote {
&[class^="prompt-"] {
display: flex;
border-left: 0;
- border-radius: 6px;
padding: 1rem;
color: var(--prompt-text-color);
+ @extend %rounded;
+
&::before {
- font-family: "Font Awesome 5 Free";
text-align: center;
width: 1.25rem;
margin-right: 0.75rem;
+ position: relative;
+ top: 0.4rem;
+ text-rendering: auto;
+ -webkit-font-smoothing: antialiased;
}
> div {
@@ -113,7 +158,7 @@ blockquote {
}
}
- @include prompt("tip", "\f0eb", 400);
+ @include prompt("tip", "\f0eb", "regular");
@include prompt("info", "\f06a");
@include prompt("warning", "\f06a");
@include prompt("danger", "\f071");
@@ -180,43 +225,6 @@ i { /* fontawesome icons */
}
}
-@-webkit-keyframes fade-in {
- from { opacity: 0; }
- to { opacity: 1; }
-}
-
-@keyframes fade-in {
- from { opacity: 0; }
- to { opacity: 1; }
-}
-
-img[data-src] {
- margin: 0.5rem 0;
-
- &[data-loaded="true"] {
- -webkit-animation: fade-in linear 0.5s;
- animation: fade-in linear 0.5s;
- }
-
- &.left {
- float: left;
- margin: 0.75rem 1rem 1rem 0;
- }
-
- &.right {
- float: right;
- margin: 0.75rem 0 1rem 1rem;
- }
-
- &.shadow {
- -webkit-filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.08));
- filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.08));
- box-shadow: none !important; /* cover the Bootstrap 4.6.1 styles */
- }
-
- @extend %img-caption;
-}
-
/* --- Panels --- */
.access {
@@ -397,26 +405,14 @@ img[data-src] {
margin-bottom: 1.5rem;
}
- a {
- &.img-link {
- @extend %no-cursor;
- }
-
- /* created by `_includes/img-extra.html` */
- &.popup {
- cursor: zoom-in;
-
- > img[data-src]:not(.normal):not(.left):not(.right) {
+ p {
+ > img[data-src],
+ > a.popup {
+ &:not(.normal):not(.left):not(.right) {
@include align-center;
}
}
-
- &:hover {
- code {
- @extend %link-hover;
- }
- }
- } /* a */
+ }
}
.pageviews .fa-spinner {
@@ -448,6 +444,14 @@ img[data-src] {
overflow-wrap: break-word;
a {
+ &.popup {
+ @extend %no-cursor;
+ @extend %img-caption;
+ @include mt-mb(0.5rem);
+
+ cursor: zoom-in;
+ }
+
&:not(.img-link) {
@extend %link-underline;
@@ -455,10 +459,6 @@ img[data-src] {
@extend %link-hover;
}
}
-
- &.img-link {
- @extend %img-caption;
- }
}
ol,
@@ -544,6 +544,58 @@ img[data-src] {
}
}
+.rounded-10 {
+ border-radius: 10px !important;
+}
+
+.img-link {
+ color: transparent;
+ display: inline-flex;
+ overflow: hidden;
+}
+
+.shimmer {
+ overflow: hidden;
+ position: relative;
+ background: var(--img-bg);
+
+ &::before {
+ content: "";
+ position: absolute;
+ background: var(--shimmer-bg);
+ height: 100%;
+ width: 100%;
+ -webkit-animation: shimmer 1s infinite;
+ animation: shimmer 1s infinite;
+ }
+
+ @-webkit-keyframes shimmer {
+ 0% { -webkit-transform: translateX(-100%); transform: translateX(-100%); }
+ 100% { -webkit-transform: translateX(100%); transform: translateX(100%); }
+ }
+
+ @keyframes shimmer {
+ 0% { -webkit-transform: translateX(-100%); transform: translateX(-100%); }
+ 100% { -webkit-transform: translateX(100%); transform: translateX(100%); }
+ }
+}
+
+.embed-video {
+ width: 100%;
+ height: 100%;
+ margin-bottom: 1rem;
+
+ @extend %rounded;
+
+ &.youtube {
+ aspect-ratio: 16 / 9;
+ }
+
+ &.twitch {
+ aspect-ratio: 310 / 189;
+ }
+}
+
/* --- buttons --- */
.btn-lang {
border: 1px solid !important;
@@ -613,6 +665,16 @@ img[data-src] {
transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}
+.left {
+ float: left;
+ margin: 0.75rem 1rem 1rem 0 !important;
+}
+
+.right {
+ float: right;
+ margin: 0.75rem 0 1rem 1rem !important;
+}
+
/* --- Overriding --- */
/* magnific-popup */
@@ -754,7 +816,7 @@ $sidebar-display: "sidebar-display";
&:last-child {
a {
position: relative;
- left: $cursor-width / 2;
+ left: calc($cursor-width / 2);
width: 100%;
}
@@ -780,7 +842,7 @@ $sidebar-display: "sidebar-display";
@for $i from 1 through $tab-count {
$offset: $tab-count - $i;
- $top: -$offset * $tab-height + ($tab-height - $tab-cursor-height) / 2;
+ $top: -$offset * $tab-height + calc(($tab-height - $tab-cursor-height) / 2);
@if $i < $tab-count {
> li.active:nth-child(#{$i}),
@@ -1193,6 +1255,7 @@ $sidebar-display: "sidebar-display";
div.d-flex {
padding: 1.5rem 0;
+ line-height: 1.65;
flex-wrap: wrap;
justify-content: space-around !important;
}
diff --git a/_sass/addon/module.scss b/_sass/addon/module.scss
index 9f1c986..1fc9ae5 100644
--- a/_sass/addon/module.scss
+++ b/_sass/addon/module.scss
@@ -90,6 +90,10 @@
font-style: normal;
}
+%rounded {
+ border-radius: 6px;
+}
+
%img-caption {
+ em {
display: block;
@@ -114,6 +118,11 @@
text-decoration: none;
}
+@mixin mt-mb($value) {
+ margin-top: $value;
+ margin-bottom: $value;
+}
+
@mixin ml-mr($value) {
margin-left: $value;
margin-right: $value;
@@ -141,14 +150,14 @@
transform: translateX(-50%);
}
-@mixin prompt($type, $fw-icon, $icon-weight: 900) {
+@mixin prompt($type, $fa-content, $fa-style: "solid") {
&.prompt-#{$type} {
background-color: var(--prompt-#{$type}-bg);
&::before {
- content: $fw-icon;
+ content: $fa-content;
color: var(--prompt-#{$type}-icon-color);
- font-weight: $icon-weight;
+ font: var(--fa-font-#{$fa-style});
}
}
}
diff --git a/_sass/addon/syntax.scss b/_sass/addon/syntax.scss
index 361fe08..78f1d09 100644
--- a/_sass/addon/syntax.scss
+++ b/_sass/addon/syntax.scss
@@ -29,18 +29,12 @@ html {
}
}
-/* -- Codes Snippet -- */
-
-$code-radius: 6px;
+/* -- code snippets -- */
%code-snippet-bg {
background: var(--highlight-bg-color);
}
-%code-snippet-radius {
- border-radius: $code-radius;
-}
-
%code-snippet-padding {
padding-left: 1rem;
padding-right: 1.5rem;
@@ -48,7 +42,7 @@ $code-radius: 6px;
.highlighter-rouge {
@extend %code-snippet-bg;
- @extend %code-snippet-radius;
+ @extend %rounded;
color: var(--highlighter-rouge-color);
margin-top: 0.5rem;
@@ -56,7 +50,7 @@ $code-radius: 6px;
}
.highlight {
- @extend %code-snippet-radius;
+ @extend %rounded;
@extend %code-snippet-bg;
@at-root figure#{&} {
@@ -173,8 +167,6 @@ div {
$code-header-height: 2.25rem;
- border-top-left-radius: $code-radius;
- border-top-right-radius: $code-radius;
display: flex;
justify-content: space-between;
align-items: center;
@@ -226,9 +218,9 @@ div {
/* clipboard */
button {
@extend %cursor-pointer;
+ @extend %rounded;
border: 1px solid transparent;
- border-radius: $code-radius;
height: $code-header-height;
width: $code-header-height;
padding: 0;
diff --git a/_sass/colors/dark-typography.scss b/_sass/colors/dark-typography.scss
index 7b7a39f..761a903 100644
--- a/_sass/colors/dark-typography.scss
+++ b/_sass/colors/dark-typography.scss
@@ -26,6 +26,14 @@
--label-color: rgb(108, 117, 125);
--checkbox-color: rgb(118, 120, 121);
--checkbox-checked-color: var(--link-color);
+ --img-bg: radial-gradient(circle, rgb(22, 22, 24) 0%, rgb(32, 32, 32) 100%);
+ --shimmer-bg:
+ linear-gradient(
+ 90deg,
+ rgba(255, 255, 255, 0) 0%,
+ rgba(58, 55, 55, 0.4) 50%,
+ rgba(255, 255, 255, 0) 100%
+ );
/* Sidebar */
--sidebar-bg: radial-gradient(circle, #242424 0%, #1d1f27 100%);
@@ -65,7 +73,6 @@
--card-bg: rgb(39, 40, 43);
--card-border-color: rgb(53, 53, 60);
--card-box-shadow: var(--main-bg);
- --preview-img-bg: radial-gradient(circle, rgb(22, 22, 24) 0%, rgb(32, 32, 32) 100%);
--kbd-wrap-color: #6a6a6a;
--kbd-text-color: #d3d3d3;
--kbd-bg-color: #242424;
@@ -96,8 +103,14 @@
--timeline-year-dot-color: var(--timeline-color);
.post img[data-src] {
- -webkit-filter: brightness(95%);
- filter: brightness(95%);
+ &.lazyloaded {
+ -webkit-filter: brightness(95%);
+ filter: brightness(95%);
+ }
+ }
+
+ .light {
+ display: none;
}
hr {
diff --git a/_sass/colors/light-typography.scss b/_sass/colors/light-typography.scss
index 5e653f9..7bfb514 100644
--- a/_sass/colors/light-typography.scss
+++ b/_sass/colors/light-typography.scss
@@ -24,6 +24,14 @@
--btn-box-shadow: #eaeaea;
--checkbox-color: #c5c5c5;
--checkbox-checked-color: #07a8f7;
+ --img-bg: radial-gradient(circle, rgb(255, 255, 255) 0%, rgb(249, 249, 249) 100%);
+ --shimmer-bg:
+ linear-gradient(
+ 90deg,
+ rgba(250, 250, 250, 0) 0%,
+ rgba(232, 230, 230, 1) 50%,
+ rgba(250, 250, 250, 0) 100%
+ );
/* Sidebar */
--sidebar-bg: #eeeeee;
@@ -64,7 +72,6 @@
--tb-odd-bg: #fbfcfd;
--tb-border-color: #eaeaea;
--dash-color: silver;
- --preview-img-bg: radial-gradient(circle, rgb(255, 255, 255) 0%, rgb(249, 249, 249) 100%);
--kbd-wrap-color: #bdbdbd;
--kbd-text-color: var(--text-color);
--kbd-bg-color: white;
@@ -82,6 +89,10 @@
--link-underline-color: rgb(219, 216, 216);
}
+ .dark {
+ display: none;
+ }
+
/* Categories */
--categories-hover-bg: var(--btn-border-color);
--categories-icon-hover-color: darkslategray;
diff --git a/_sass/jekyll-theme-chirpy.scss b/_sass/jekyll-theme-chirpy.scss
index e1c42bc..f87f2bb 100644
--- a/_sass/jekyll-theme-chirpy.scss
+++ b/_sass/jekyll-theme-chirpy.scss
@@ -1,7 +1,7 @@
/*!
* The styles for Jekyll theme Chirpy
*
- * Chirpy v5.3.2 (https://github.com/cotes2020/jekyll-theme-chirpy)
+ * Chirpy v5.4.0 (https://github.com/cotes2020/jekyll-theme-chirpy)
* © 2019 Cotes Chung
* MIT Licensed
*/
diff --git a/_sass/layout/post.scss b/_sass/layout/post.scss
index 5d9c0f9..ac445d7 100644
--- a/_sass/layout/post.scss
+++ b/_sass/layout/post.scss
@@ -26,12 +26,30 @@
color: var(--text-color);
}
-img.preview-img {
+%preview-margin {
margin: 0;
- border-radius: 6px;
+}
- &.bg[data-loaded="true"] {
- background: var(--preview-img-bg);
+.preview-img {
+ @include align-center;
+ @extend %preview-margin;
+ @extend %rounded;
+
+ max-width: 100%;
+
+ &:not(.no-bg) {
+ img.lazyloaded {
+ background: var(--img-bg);
+ }
+ }
+
+ img {
+ aspect-ratio: 40 / 21;
+ -o-object-fit: cover;
+ object-fit: cover;
+
+ @extend %preview-margin;
+ @extend %rounded;
}
}
diff --git a/assets/feed.xml b/assets/feed.xml
index b36f4af..358d44f 100644
--- a/assets/feed.xml
+++ b/assets/feed.xml
@@ -15,7 +15,7 @@ permalink: /feed.xml