mirror of
https://github.com/cotes2020/jekyll-theme-chirpy.git
synced 2025-12-21 23:25:25 +00:00
Compare commits
18 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
493e1d934b | ||
|
|
b9104d0f4c | ||
|
|
3c72298563 | ||
|
|
ca2194770c | ||
|
|
08fbd06c63 | ||
|
|
a20fd5bf6f | ||
|
|
7a88347c63 | ||
|
|
813443b206 | ||
|
|
c381353f86 | ||
|
|
aa6c33526a | ||
|
|
081e77d462 | ||
|
|
bca7a2a634 | ||
|
|
505da84a26 | ||
|
|
dfba411d61 | ||
|
|
fa310d3190 | ||
|
|
ef0c9ce770 | ||
|
|
7429ef3539 | ||
|
|
6d4abcc437 |
1
.github/ISSUE_TEMPLATE/bug_report.md
vendored
1
.github/ISSUE_TEMPLATE/bug_report.md
vendored
@@ -1,7 +1,6 @@
|
||||
---
|
||||
name: Bug Report
|
||||
about: Create a report to help us improve
|
||||
labels: suspect
|
||||
---
|
||||
|
||||
<!-- NOTE: Please maintain all sections, otherwise the issue will be automatically closed :) -->
|
||||
|
||||
4
.github/workflows/issue-pr-interceptor.yml
vendored
4
.github/workflows/issue-pr-interceptor.yml
vendored
@@ -2,9 +2,9 @@ name: "Intercept bad issue/PRs"
|
||||
|
||||
on:
|
||||
issues:
|
||||
types: [opened]
|
||||
types: [opened, reopened]
|
||||
pull_request:
|
||||
types: [opened]
|
||||
types: [opened, reopened]
|
||||
|
||||
jobs:
|
||||
autoclose:
|
||||
|
||||
21
.github/workflows/pages-deploy.yml.hook
vendored
21
.github/workflows/pages-deploy.yml.hook
vendored
@@ -44,28 +44,25 @@ jobs:
|
||||
run: |
|
||||
baseurl="$(grep '^baseurl:' _config.yml | sed "s/.*: *//;s/['\"]//g;s/#.*//")"
|
||||
if [[ -n $baseurl ]]; then
|
||||
echo "SPEC_TEST=_site_no_baseurl" >> $GITHUB_ENV
|
||||
echo "BASE_URL=$baseurl" >> $GITHUB_ENV
|
||||
fi
|
||||
|
||||
- name: Build Site
|
||||
env:
|
||||
JEKYLL_ENV: production
|
||||
run: |
|
||||
bundle exec jekyll b
|
||||
|
||||
if [[ -n $SPEC_TEST ]]; then
|
||||
# Bypass the defects of htmlproofer
|
||||
bundle exec jekyll b -b "" -d "$SPEC_TEST"
|
||||
fi
|
||||
bundle exec jekyll b -d "_site$BASE_URL"
|
||||
|
||||
- name: Test Site
|
||||
run: |
|
||||
if [[ -n $SPEC_TEST ]]; then
|
||||
bash tools/test.sh -d "$SPEC_TEST"
|
||||
else
|
||||
bash tools/test.sh
|
||||
fi
|
||||
bash tools/test.sh
|
||||
|
||||
- name: Deploy
|
||||
run: |
|
||||
if [[ -n $BASE_URL ]]; then
|
||||
mv _site$BASE_URL _site-rename
|
||||
rm -rf _site
|
||||
mv _site-rename _site
|
||||
fi
|
||||
|
||||
bash tools/deploy.sh
|
||||
|
||||
2
Gemfile
2
Gemfile
@@ -1,6 +1,6 @@
|
||||
source "https://rubygems.org"
|
||||
|
||||
gem "jekyll", ">= 4.0.0", "< 5.0"
|
||||
gem "jekyll", ">= 4.1.0", "< 5.0"
|
||||
|
||||
# plugins
|
||||
group :jekyll_plugins do
|
||||
|
||||
20
Gemfile.lock
20
Gemfile.lock
@@ -11,9 +11,9 @@ GEM
|
||||
ethon (0.12.0)
|
||||
ffi (>= 1.3.0)
|
||||
eventmachine (1.2.7)
|
||||
ffi (1.13.1)
|
||||
ffi (1.14.2)
|
||||
forwardable-extended (2.6.0)
|
||||
html-proofer (3.17.4)
|
||||
html-proofer (3.18.3)
|
||||
addressable (~> 2.3)
|
||||
mercenary (~> 0.3)
|
||||
nokogumbo (~> 2.0)
|
||||
@@ -24,21 +24,21 @@ GEM
|
||||
http_parser.rb (0.6.0)
|
||||
i18n (1.8.5)
|
||||
concurrent-ruby (~> 1.0)
|
||||
jekyll (4.1.1)
|
||||
jekyll (4.2.0)
|
||||
addressable (~> 2.4)
|
||||
colorator (~> 1.0)
|
||||
em-websocket (~> 0.5)
|
||||
i18n (~> 1.0)
|
||||
jekyll-sass-converter (~> 2.0)
|
||||
jekyll-watch (~> 2.0)
|
||||
kramdown (~> 2.1)
|
||||
kramdown (~> 2.3)
|
||||
kramdown-parser-gfm (~> 1.0)
|
||||
liquid (~> 4.0)
|
||||
mercenary (~> 0.4.0)
|
||||
pathutil (~> 0.9)
|
||||
rouge (~> 3.0)
|
||||
safe_yaml (~> 1.0)
|
||||
terminal-table (~> 1.8)
|
||||
terminal-table (~> 2.0)
|
||||
jekyll-archives (2.2.1)
|
||||
jekyll (>= 3.6, < 5.0)
|
||||
jekyll-paginate (1.1.0)
|
||||
@@ -75,18 +75,18 @@ GEM
|
||||
rb-inotify (0.10.1)
|
||||
ffi (~> 1.0)
|
||||
rexml (3.2.4)
|
||||
rouge (3.25.0)
|
||||
rouge (3.26.0)
|
||||
safe_yaml (1.0.5)
|
||||
sassc (2.4.0)
|
||||
ffi (~> 1.9)
|
||||
terminal-table (1.8.0)
|
||||
terminal-table (2.0.0)
|
||||
unicode-display_width (~> 1.1, >= 1.1.1)
|
||||
thread_safe (0.3.6)
|
||||
typhoeus (1.4.0)
|
||||
ethon (>= 0.9.0)
|
||||
tzinfo (1.2.8)
|
||||
tzinfo (1.2.9)
|
||||
thread_safe (~> 0.1)
|
||||
tzinfo-data (1.2020.4)
|
||||
tzinfo-data (1.2020.6)
|
||||
tzinfo (>= 1.0.0)
|
||||
unicode-display_width (1.7.0)
|
||||
wdm (0.1.1)
|
||||
@@ -97,7 +97,7 @@ PLATFORMS
|
||||
|
||||
DEPENDENCIES
|
||||
html-proofer
|
||||
jekyll (>= 4.0.0, < 5.0)
|
||||
jekyll (>= 4.1.0, < 5.0)
|
||||
jekyll-archives
|
||||
jekyll-paginate
|
||||
jekyll-redirect-from
|
||||
|
||||
@@ -177,7 +177,7 @@ compress_html:
|
||||
profile: false
|
||||
blanklines: false
|
||||
ignore:
|
||||
envs: []
|
||||
envs: [development]
|
||||
|
||||
exclude:
|
||||
- vendor
|
||||
|
||||
@@ -1,3 +1,3 @@
|
||||
name: Chirpy
|
||||
version: 2.7.0
|
||||
version: 2.7.2
|
||||
homepage: https://github.com/cotes2020/jekyll-theme-chirpy/
|
||||
|
||||
@@ -47,13 +47,13 @@
|
||||
{% endif %}
|
||||
</div> <!-- .access -->
|
||||
|
||||
{% if page.layout == 'post' and site.toc and page.toc %}
|
||||
<div id="toc-wrapper" class="pl-0 pr-4 mb-5">
|
||||
<span class="pl-3 pt-2 mb-2">
|
||||
{% if include.toc %}
|
||||
<div id="toc-wrapper" class="pl-0 pr-4 mb-5">
|
||||
<span class="pl-3 pt-2 mb-2">
|
||||
{{- site.data.label.panel.toc -}}
|
||||
</span>
|
||||
<nav id="toc" data-toggle="toc"></nav>
|
||||
</div>
|
||||
</span>
|
||||
<nav id="toc" data-toggle="toc"></nav>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
</div> <!-- #panel-wrapper -->
|
||||
|
||||
@@ -4,7 +4,10 @@
|
||||
|
||||
{% assign _content = include.content %}
|
||||
|
||||
<!-- Suroundding the markdown table with '<div class="table-wrapper">. and '</div>' -->
|
||||
<!--
|
||||
In order to allow a wide table to scroll horizontally,
|
||||
we suround the markdown table with `<div class="table-wrapper">` and `</div>`
|
||||
-->
|
||||
{% if _content contains '<table>' %}
|
||||
{% assign _content = _content
|
||||
| replace: '<table>', '<div class="table-wrapper"><table>'
|
||||
|
||||
@@ -6,11 +6,11 @@
|
||||
MIT License
|
||||
-->
|
||||
|
||||
<div id="nav-wrapper">
|
||||
<div id="sidebar" class="d-flex flex-column align-items-end">
|
||||
|
||||
<div id="profile-wrapper" class="d-flex flex-column">
|
||||
<div id="avatar" class="d-flex justify-content-center">
|
||||
<a href="{{ site.baseurl }}/" alt="avatar">
|
||||
<div class="profile-wrapper text-center">
|
||||
<div id="avatar">
|
||||
<a href="{{ site.baseurl }}/" alt="avatar" class="mx-auto">
|
||||
{% assign avatar_url = site.avatar %}
|
||||
{% capture start %}{{ site.avatar | slice: 0 }}{% endcapture %}
|
||||
{% if start == '/' %}
|
||||
@@ -20,26 +20,26 @@
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="profile-text mt-3">
|
||||
<div class="site-title">
|
||||
<a href="{{ '/' | relative_url }}">{{- site.title -}}</a>
|
||||
</div>
|
||||
<div class="site-subtitle font-italic">{{- site.tagline -}}</div>
|
||||
<div class="site-title mt-3">
|
||||
<a href="{{ '/' | relative_url }}">{{- site.title -}}</a>
|
||||
</div>
|
||||
</div><!-- #profile-wrapper -->
|
||||
|
||||
<ul class="nav flex-column">
|
||||
<div class="site-subtitle font-italic">{{- site.tagline -}}</div>
|
||||
|
||||
</div><!-- .profile-wrapper -->
|
||||
|
||||
<ul class="w-100">
|
||||
<!-- home -->
|
||||
<li class="nav-item d-flex justify-content-center {% if page.layout == 'home' %}active{% endif %}">
|
||||
<a href="{{ '/' | relative_url }}" class="nav-link d-flex justify-content-center align-items-center w-100">
|
||||
<li class="nav-item{% if page.layout == 'home' %}{{ " active" }}{% endif %}">
|
||||
<a href="{{ '/' | relative_url }}" class="nav-link">
|
||||
<i class="fa-fw fas fa-home ml-xl-3 mr-xl-3 unloaded"></i>
|
||||
<span>{{ "HOME" }}</span>
|
||||
</a>
|
||||
</li>
|
||||
<!-- the real tabs -->
|
||||
{% for tab in site.tabs %}
|
||||
<li class="nav-item d-flex justify-content-center {% if tab.url == page.url %}active{% endif %}">
|
||||
<a href="{{ tab.url | relative_url }}" class="nav-link d-flex justify-content-center align-items-center w-100">
|
||||
<li class="nav-item{% if tab.url == page.url %}{{ " active" }}{% endif %}">
|
||||
<a href="{{ tab.url | relative_url }}" class="nav-link">
|
||||
<i class="fa-fw {{ tab.icon }} ml-xl-3 mr-xl-3 unloaded"></i>
|
||||
<span>{{ tab.title | upcase }}</span>
|
||||
</a>
|
||||
@@ -48,38 +48,44 @@
|
||||
|
||||
</ul> <!-- ul.nav.flex-column -->
|
||||
|
||||
</div><!-- #nav-wrapper -->
|
||||
<div class="sidebar-bottom mt-auto d-flex flex-wrap justify-content-center">
|
||||
|
||||
<div class="sidebar-bottom d-flex flex-wrap justify-content-around mt-4">
|
||||
{% for entry in site.data.contact %}
|
||||
{% capture url %}
|
||||
{%- if entry.type == 'github' -%}
|
||||
https://github.com/{{ site.github.username }}
|
||||
{%- elsif entry.type == 'twitter' -%}
|
||||
https://twitter.com/{{ site.twitter.username }}
|
||||
{%- elsif entry.type == 'email' -%}
|
||||
{% assign email = site.social.email | split: '@' %}
|
||||
javascript:location.href = 'mailto:' + ['{{ email[0] }}','{{ email[1] }}'].join('@')
|
||||
{%- elsif entry.type == 'rss' -%}
|
||||
{{ "/feed.xml" | relative_url }}
|
||||
{%- else -%}
|
||||
{{ entry.url }}
|
||||
{%- endif -%}
|
||||
{% endcapture %}
|
||||
|
||||
{% unless site.theme_mode %}
|
||||
<span id="mode-toggle-wrapper">
|
||||
{% include mode-toggle.html %}
|
||||
</span>
|
||||
<span class="icon-border"></span>
|
||||
{% endunless %}
|
||||
{% if url %}
|
||||
<a href="{{ url }}" aria-label="{{ entry.type }}"
|
||||
{% unless site.theme_mode %}class="order-{{ forloop.index | plus: 2 }}"{% endunless %}
|
||||
{% unless entry.noblank %}target="_blank" rel="noopener"{% endunless %}>
|
||||
<i class="{{ entry.icon }}"></i>
|
||||
</a>
|
||||
{% endif %}
|
||||
|
||||
{% for entry in site.data.contact %}
|
||||
{% capture url %}
|
||||
{%- if entry.type == 'github' -%}
|
||||
https://github.com/{{ site.github.username }}
|
||||
{%- elsif entry.type == 'twitter' -%}
|
||||
https://twitter.com/{{ site.twitter.username }}
|
||||
{%- elsif entry.type == 'email' -%}
|
||||
{% assign email = site.social.email | split: '@' %}
|
||||
javascript:location.href = 'mailto:' + ['{{ email[0] }}','{{ email[1] }}'].join('@')
|
||||
{%- elsif entry.type == 'rss' -%}
|
||||
{{ "/feed.xml" | relative_url }}
|
||||
{%- else -%}
|
||||
{{ entry.url }}
|
||||
{%- endif -%}
|
||||
{% endcapture %}
|
||||
{% endfor %}
|
||||
|
||||
{% if url %}
|
||||
<a href="{{ url }}" aria-label="{{ entry.type }}" {% unless entry.noblank %}target="_blank" rel="noopener"{% endunless %}>
|
||||
<i class="{{ entry.icon }}"></i>
|
||||
</a>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% unless site.theme_mode %}
|
||||
{% if site.data.contact.size > 0 %}
|
||||
<span class="icon-border order-2"></span>
|
||||
{% endif %}
|
||||
|
||||
</div>
|
||||
<span id="mode-toggle-wrapper" class="order-1">
|
||||
{% include mode-toggle.html %}
|
||||
</span>
|
||||
{% endunless %}
|
||||
|
||||
</div> <!-- .sidebar-bottom -->
|
||||
|
||||
</div><!-- #sidebar -->
|
||||
|
||||
@@ -21,9 +21,7 @@ layout: compress
|
||||
|
||||
<body data-spy="scroll" data-target="#toc">
|
||||
|
||||
<div id="sidebar" class="d-flex flex-column">
|
||||
{% include sidebar.html %}
|
||||
</div>
|
||||
{% include sidebar.html %}
|
||||
|
||||
{% include topbar.html %}
|
||||
|
||||
|
||||
@@ -49,9 +49,9 @@ layout: page
|
||||
{% for post in posts %}
|
||||
|
||||
<div class="post-preview">
|
||||
<a href="{{ post.url | relative_url }}">
|
||||
<h1>{{ post.title }}</h1>
|
||||
</a>
|
||||
<h1>
|
||||
<a href="{{ post.url | relative_url }}">{{ post.title }}</a>
|
||||
</h1>
|
||||
|
||||
<div class="post-content">
|
||||
<p>
|
||||
|
||||
@@ -111,7 +111,15 @@ layout: default
|
||||
|
||||
</div> <!-- #post-wrapper -->
|
||||
|
||||
{% include panel.html %}
|
||||
{% assign enable_toc = false %}
|
||||
|
||||
{% if site.toc and page.toc %}
|
||||
{% if content contains '<h2' or content contains '<h3' %}
|
||||
{% assign enable_toc = true %}
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
|
||||
{% include panel.html toc=enable_toc %}
|
||||
|
||||
</div> <!-- .row -->
|
||||
|
||||
|
||||
@@ -38,7 +38,7 @@ Beside the lake, beneath the trees,
|
||||
|
||||
Fluttering and dancing in the breeze.
|
||||
|
||||
## List
|
||||
## Lists
|
||||
|
||||
### Ordered list
|
||||
|
||||
@@ -52,7 +52,7 @@ Fluttering and dancing in the breeze.
|
||||
- Setcion
|
||||
- Paragraph
|
||||
|
||||
### Checkbox list
|
||||
### Task list
|
||||
|
||||
- [ ] TODO
|
||||
- [x] Completed
|
||||
@@ -62,26 +62,35 @@ Fluttering and dancing in the breeze.
|
||||
- [ ] Economic recovery
|
||||
- [ ] People smile again
|
||||
|
||||
### Description list
|
||||
|
||||
Sun
|
||||
: the star around which the earth orbits
|
||||
|
||||
Moon
|
||||
: the natural satellite of the earth, visible by reflected light from the sun
|
||||
|
||||
|
||||
## Block Quote
|
||||
|
||||
> This line to shows the Block Quote.
|
||||
|
||||
## Tables
|
||||
|
||||
| Company | contact | Country |
|
||||
| Company | Contact | Country |
|
||||
|:-----------------------------|:-----------------|--------:|
|
||||
| Alfreds Futterkiste | Maria Anders | Germany |
|
||||
| Island Trading | Helen Bennett | UK |
|
||||
| Magazzini Alimentari Riuniti | Giovanni Rovelli | Italy |
|
||||
|
||||
## Link
|
||||
## Links
|
||||
|
||||
<http://127.0.0.1:4000>
|
||||
|
||||
|
||||
## Footnote
|
||||
|
||||
Click the hook will locate the footnote[^footnote].
|
||||
Click the hook will locate the footnote[^footnote], and here is another footnote[^fn-nth-2].
|
||||
|
||||
|
||||
## Images
|
||||
@@ -130,9 +139,6 @@ _400px image width_
|
||||
cherry :active, c, after b a, 1d
|
||||
```
|
||||
|
||||
## Inline code
|
||||
|
||||
This is an example of `Inline Code`.
|
||||
|
||||
## Mathematics
|
||||
|
||||
@@ -144,7 +150,13 @@ When \\(a \ne 0\\), there are two solutions to \\(ax^2 + bx + c = 0\\) and they
|
||||
|
||||
$$ x = {-b \pm \sqrt{b^2-4ac} \over 2a} $$
|
||||
|
||||
## Code Snippet
|
||||
|
||||
## Inline code
|
||||
|
||||
This is an example of `Inline Code`.
|
||||
|
||||
|
||||
## Code block
|
||||
|
||||
### Common
|
||||
|
||||
@@ -157,14 +169,6 @@ This is a common code snippet, without syntax highlight and line number.
|
||||
#### Console
|
||||
|
||||
```console
|
||||
$ date
|
||||
Sun Nov 3 15:11:12 CST 2019
|
||||
```
|
||||
|
||||
|
||||
#### Terminal
|
||||
|
||||
```terminal
|
||||
$ env |grep SHELL
|
||||
SHELL=/usr/local/bin/bash
|
||||
PYENV_SHELL=bash
|
||||
@@ -198,23 +202,6 @@ fi;
|
||||
```
|
||||
{% endraw %}
|
||||
|
||||
#### Html
|
||||
|
||||
```html
|
||||
<div class="sidenav">
|
||||
<a href="#contact">Contact</a>
|
||||
<button class="dropdown-btn">Dropdown
|
||||
<i class="fa fa-caret-down"></i>
|
||||
</button>
|
||||
<div class="dropdown-container">
|
||||
<a href="#">Link 1</a>
|
||||
<a href="#">Link 2</a>
|
||||
<a href="#">Link 3</a>
|
||||
</div>
|
||||
<a href="#contact">Search</a>
|
||||
</div>
|
||||
```
|
||||
|
||||
#### Java
|
||||
|
||||
```java
|
||||
@@ -222,20 +209,11 @@ private void writeObject(java.io.ObjectOutputStream s)
|
||||
throws java.io.IOException {
|
||||
// Write out any hidden serialization magic
|
||||
s.defaultWriteObject();
|
||||
|
||||
// Write out HashMap capacity and load factor
|
||||
s.writeInt(map.capacity());
|
||||
s.writeFloat(map.loadFactor());
|
||||
|
||||
// Write out size
|
||||
s.writeInt(map.size());
|
||||
|
||||
// Write out all elements in the proper order.
|
||||
for (E e: map.keySet())
|
||||
s.writeObject(e);
|
||||
for (E e: map.keySet()) s.writeObject(e);
|
||||
}
|
||||
```
|
||||
|
||||
## Reverse Footnote
|
||||
|
||||
[^footnote]: The footnote source.
|
||||
[^footnote]: The footnote source
|
||||
[^fn-nth-2]: The 2nd footnote source
|
||||
|
||||
@@ -8,7 +8,7 @@ tags: [writing]
|
||||
|
||||
## Naming and Path
|
||||
|
||||
Create a new file named `YYYY-MM-DD-TITLE.EXTENSION` and put it in the `_post/` of the root directory. Please note that the `EXTENSION` must be one of `md` and `markdown`.
|
||||
Create a new file named `YYYY-MM-DD-TITLE.EXTENSION` and put it in the `_posts/` of the root directory. Please note that the `EXTENSION` must be one of `md` and `markdown`.
|
||||
|
||||
## Front Matter
|
||||
|
||||
@@ -78,7 +78,7 @@ mermaid: true
|
||||
---
|
||||
```
|
||||
|
||||
Then you can use it like other markdown language: surround the graph code with <code class="highlighter-rouge">```mermaid</code>.
|
||||
Then you can use it like other markdown language: surround the graph code with ```` ```mermaid ```` and ```` ``` ````.
|
||||
|
||||
## Images
|
||||
|
||||
@@ -147,7 +147,7 @@ pin: true
|
||||
|
||||
## Code Block
|
||||
|
||||
Markdown symbols <code class="highlighter-rouge">```</code> can easily create a code block as following examples.
|
||||
Markdown symbols ```` ``` ```` can easily create a code block as following examples.
|
||||
|
||||
```
|
||||
This is a common code snippet, without syntax highlight and line number.
|
||||
@@ -155,7 +155,7 @@ This is a common code snippet, without syntax highlight and line number.
|
||||
|
||||
## Specific Language
|
||||
|
||||
Using <code class="highlighter-rouge">```language</code> you will get code snippets with line numbers and syntax highlight.
|
||||
Using ```` ```language ```` you will get code snippets with line numbers and syntax highlight.
|
||||
|
||||
> **Note**: The Jekyll style `{% raw %}{%{% endraw %} highlight LANGUAGE {% raw %}%}{% endraw %}` or `{% raw %}{%{% endraw %} highlight LANGUAGE linenos {% raw %}%}{% endraw %}` are not allowed to be used in this theme !
|
||||
|
||||
|
||||
@@ -1,7 +0,0 @@
|
||||
/*
|
||||
* The field 'font-display' is added for Google-fonts.
|
||||
*
|
||||
* See: <https://fonts.google.com/>
|
||||
*/
|
||||
|
||||
@import url('https://fonts.googleapis.com/css2?family=Lato&family=Roboto+Condensed:wght@400;700&family=Source+Sans+Pro:wght@400;600;700;900&display=swap');
|
||||
@@ -6,12 +6,13 @@
|
||||
* MIT Licensed
|
||||
*/
|
||||
|
||||
@import "_addon/fonts";
|
||||
@import "_addon/module";
|
||||
@import "_addon/variables";
|
||||
@import "_colors/light-typography";
|
||||
@import "_colors/dark-typography";
|
||||
|
||||
@import url('https://fonts.googleapis.com/css2?family=Lato&family=Source+Sans+Pro:wght@400;600;900&display=swap');
|
||||
|
||||
|
||||
@mixin mode-toggle($dark-mode: false) {
|
||||
@if $dark-mode {
|
||||
@@ -45,7 +46,7 @@ html[mode=dark] {
|
||||
}
|
||||
}
|
||||
|
||||
html, body {
|
||||
:root {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
@@ -73,44 +74,45 @@ $sidebar-display: "sidebar-display";
|
||||
width: $sidebar-width-medium;
|
||||
z-index: 99;
|
||||
background: var(--sidebar-bg);
|
||||
|
||||
a {
|
||||
@include sidebar-links;
|
||||
&:hover {
|
||||
color: #fff;
|
||||
@include no-text-decoration;
|
||||
}
|
||||
}
|
||||
|
||||
.site-title {
|
||||
text-align: center;
|
||||
a {
|
||||
font-weight: 900;
|
||||
font-size: 1.5rem;
|
||||
letter-spacing: 0.5px;
|
||||
&:hover {
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.site-subtitle {
|
||||
font-size: 95%;
|
||||
text-align: center;
|
||||
color: #828282;
|
||||
line-height: 1.2rem;
|
||||
word-spacing: 1px;
|
||||
margin: 0.5rem 1.5rem 2rem 1.5rem;
|
||||
margin: 0.5rem 1.5rem 0.5rem 1.5rem;
|
||||
min-height: 3rem; // avoid vertical shifting in multi-line words
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.sidebar-bottom {
|
||||
.icon-border + a { // the icon behide mode-toggle
|
||||
margin-left: 0.1rem;
|
||||
}
|
||||
}
|
||||
.nav-link {
|
||||
border-radius: 0;
|
||||
font-size: 0.95rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: 1px;
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
text-align: center;
|
||||
display: table;
|
||||
height: $tab-height;
|
||||
&:hover {
|
||||
.nav-link {
|
||||
@@ -123,27 +125,38 @@ $sidebar-display: "sidebar-display";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
height: $tab-height * $tab-count;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
margin-bottom: 2rem;
|
||||
padding-left: 0;
|
||||
|
||||
> li:last-child {
|
||||
> a {
|
||||
margin-right: -3px;
|
||||
max-width: calc(100% - 3px);
|
||||
> li {
|
||||
width: 100%;
|
||||
|
||||
&:last-child {
|
||||
$cursor-width: 3px;
|
||||
|
||||
> a {
|
||||
position: relative;
|
||||
left: $cursor-width / 2;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&::after { // the cursor
|
||||
display: table;
|
||||
visibility: hidden;
|
||||
content: "";
|
||||
position: relative;
|
||||
right: 1px;
|
||||
width: $cursor-width;
|
||||
height: $tab-cursor-height;
|
||||
border-radius: 1px;
|
||||
background-color: var(--nav-cursor-color);
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
&::after { // the cursor
|
||||
visibility: hidden;
|
||||
content: "";
|
||||
position: relative;
|
||||
right: 1px;
|
||||
width: 3px;
|
||||
height: $tab-cursor-height;
|
||||
background-color: var(--nav-cursor-color);
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
} // li
|
||||
|
||||
@mixin fix-cursor($top) {
|
||||
top: $top;
|
||||
@@ -174,9 +187,18 @@ $sidebar-display: "sidebar-display";
|
||||
|
||||
.sidebar-bottom {
|
||||
font-size: 1.2rem;
|
||||
margin: 2rem 2.5rem 1.6rem;
|
||||
margin-bottom: 2.1rem;
|
||||
|
||||
@include ml-mr(auto);
|
||||
@include pl-pr(1rem);
|
||||
|
||||
%icon {
|
||||
width: 2.4rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
a {
|
||||
margin-bottom: 0.5rem; // icons may have multi lines
|
||||
@extend %icon;
|
||||
}
|
||||
|
||||
a:hover, #mode-toggle-wrapper > i:hover {
|
||||
@@ -184,6 +206,8 @@ $sidebar-display: "sidebar-display";
|
||||
}
|
||||
|
||||
#mode-toggle-wrapper {
|
||||
@extend %icon;
|
||||
|
||||
i {
|
||||
@include sidebar-links;
|
||||
margin: 0;
|
||||
@@ -192,16 +216,21 @@ $sidebar-display: "sidebar-display";
|
||||
position: relative;
|
||||
bottom: 1px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.icon-border {
|
||||
background: #525354;
|
||||
background-color: #525354;
|
||||
content: "";
|
||||
width: 3px;
|
||||
height: 3px;
|
||||
border-radius: 50%;
|
||||
margin-top: 0.75rem;
|
||||
position: relative;
|
||||
top: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
} // .sidebar-bottom
|
||||
|
||||
} // #sidebar
|
||||
|
||||
@media (hover: hover) {
|
||||
@@ -213,13 +242,9 @@ $sidebar-display: "sidebar-display";
|
||||
}
|
||||
}
|
||||
|
||||
#nav-wrapper {
|
||||
width: 100%;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
#profile-wrapper {
|
||||
.profile-wrapper {
|
||||
margin-top: 2rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#avatar {
|
||||
@@ -338,6 +363,7 @@ $sidebar-display: "sidebar-display";
|
||||
border-radius: 0;
|
||||
padding: 0.18rem 0.3rem;
|
||||
color: var(--text-color);
|
||||
font-size: 95%;
|
||||
}
|
||||
|
||||
#search-input {
|
||||
@@ -645,26 +671,19 @@ kbd {
|
||||
margin: 0 0.3rem;
|
||||
}
|
||||
|
||||
sup {
|
||||
z-index: 1;
|
||||
&:target {
|
||||
@extend %anchor;
|
||||
z-index: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.footnotes ol {
|
||||
.footnotes > ol {
|
||||
padding-left: 2rem;
|
||||
margin-top: 0.5rem;
|
||||
> li {
|
||||
padding-top: 0.2rem;
|
||||
margin-top: -0.2rem;
|
||||
> p {
|
||||
padding-left: 0.2em;
|
||||
}
|
||||
&:not(:last-child) {
|
||||
margin-bottom: -.8rem;
|
||||
margin-bottom: 0.3rem;
|
||||
}
|
||||
&:target > p {
|
||||
> p {
|
||||
margin-left: 0.25em;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
&:target:not([scroll-focus]), &[scroll-focus=true] > p { // [scroll-focus] added by `smooth-scroll.js`
|
||||
background-color: var(--footnote-target-bg);
|
||||
width: fit-content;
|
||||
-webkit-transition: background-color 1.5s ease-in-out;
|
||||
@@ -676,14 +695,14 @@ sup {
|
||||
|
||||
.footnote {
|
||||
@at-root a#{&} {
|
||||
margin: 0 0.2em;
|
||||
@include ml-mr(1px);
|
||||
@include pl-pr(2px);
|
||||
border-bottom-style: none !important;
|
||||
-webkit-transition: background-color 1.5s ease-in-out; /* Safari prior 6.1 */
|
||||
transition: background-color 1.5s ease-in-out;
|
||||
}
|
||||
@at-root sup:target > a#{&} {
|
||||
@at-root sup:target:not([scroll-focus]), sup[scroll-focus=true] > a#{&} { // [scroll-focus] added by `smooth-scroll.js`
|
||||
background-color: var(--footnote-target-bg);
|
||||
padding: 0 2px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -743,14 +762,15 @@ img {
|
||||
|
||||
|
||||
/*--- Begin of Markdown table style ---*/
|
||||
div.post-content .table-wrapper {
|
||||
|
||||
.table-wrapper { // it will be created by Liquid
|
||||
overflow-x: auto;
|
||||
margin-bottom: 1.5rem;
|
||||
|
||||
> table {
|
||||
min-width: 60%;
|
||||
min-width: 100%;
|
||||
overflow-x: auto;
|
||||
border-spacing: 0;
|
||||
margin-bottom: 1.5rem;
|
||||
|
||||
thead {
|
||||
border-bottom: solid 2px rgba(210, 215, 217, 0.75);
|
||||
@@ -806,16 +826,27 @@ div.post-content .table-wrapper {
|
||||
overflow-wrap: break-word;
|
||||
word-wrap: break-word;
|
||||
|
||||
img[data-src] {
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
@mixin img-caption {
|
||||
+ em {
|
||||
display: block;
|
||||
text-align: center;
|
||||
font-style: normal;
|
||||
font-size: 80%;
|
||||
padding: 0;
|
||||
color: #6d6c6c;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin img($caption: false) {
|
||||
|
||||
> img[data-src] {
|
||||
margin: 0.5rem 0;
|
||||
|
||||
&:not(.normal):not(.left):not(.right) {
|
||||
@include align-center;
|
||||
|
||||
@if $caption {
|
||||
@include img-caption;
|
||||
}
|
||||
@if $caption {
|
||||
@include img-caption;
|
||||
}
|
||||
|
||||
&.left {
|
||||
@@ -831,17 +862,6 @@ div.post-content .table-wrapper {
|
||||
}
|
||||
}
|
||||
|
||||
@mixin img-caption {
|
||||
+ em {
|
||||
display: block;
|
||||
text-align: center;
|
||||
font-style: normal;
|
||||
font-size: 80%;
|
||||
padding: 0;
|
||||
color: #6d6c6c;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
&:not(.img-hyperlink) {
|
||||
@extend %link-color;
|
||||
@@ -856,16 +876,18 @@ div.post-content .table-wrapper {
|
||||
}
|
||||
}
|
||||
|
||||
> p {
|
||||
> img[data-src]:not(.normal):not(.left):not(.right) {
|
||||
@include align-center;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 1.08rem;
|
||||
@include img(true);
|
||||
}// p
|
||||
}
|
||||
|
||||
ul {
|
||||
&.task-list, &:not([class]) {
|
||||
padding-left: 2rem;
|
||||
}
|
||||
|
||||
// attribute 'hide-bullet' was added by liquid
|
||||
.task-list-item[hide-bullet] {
|
||||
list-style-type: none;
|
||||
@@ -888,6 +910,32 @@ div.post-content .table-wrapper {
|
||||
|
||||
} // ul
|
||||
|
||||
> ol, > ul {
|
||||
padding-left: 2rem;
|
||||
|
||||
li {
|
||||
+ li {
|
||||
margin-top: 0.3rem;
|
||||
}
|
||||
|
||||
ol, ul { // sub list
|
||||
padding-left: 2rem;
|
||||
margin-top: 0.3rem;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
> ol {
|
||||
li {
|
||||
padding-left: 0.25em;
|
||||
}
|
||||
}
|
||||
|
||||
dl > dd {
|
||||
margin-left: 1rem;
|
||||
}
|
||||
|
||||
} // .post-content
|
||||
|
||||
.tag:hover {
|
||||
@@ -1045,7 +1093,6 @@ div.post-content .table-wrapper {
|
||||
transition: transform 0.4s ease;
|
||||
}
|
||||
|
||||
|
||||
html, body {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
@@ -1149,13 +1196,9 @@ div.post-content .table-wrapper {
|
||||
justify-content: center!important;
|
||||
}
|
||||
|
||||
sup:target {
|
||||
padding-top: 3.4rem;
|
||||
}
|
||||
|
||||
.footnotes ol > li {
|
||||
padding-top: 3.5rem;
|
||||
margin-top: -4.3rem;
|
||||
margin-top: -3.2rem;
|
||||
&:first-child {
|
||||
margin-top: -3.5rem;
|
||||
}
|
||||
@@ -1182,7 +1225,7 @@ div.post-content .table-wrapper {
|
||||
margin-left: $sidebar-width-medium;
|
||||
}
|
||||
|
||||
#profile-wrapper {
|
||||
.profile-wrapper {
|
||||
margin-top: 3rem;
|
||||
}
|
||||
|
||||
@@ -1191,6 +1234,10 @@ div.post-content .table-wrapper {
|
||||
min-width: 150px;
|
||||
}
|
||||
|
||||
div.post-content .table-wrapper > table {
|
||||
min-width: 70%;
|
||||
}
|
||||
|
||||
/* button 'back-to-Top' position */
|
||||
#back-to-top {
|
||||
bottom: 5.5rem;
|
||||
@@ -1227,9 +1274,11 @@ div.post-content .table-wrapper {
|
||||
#sidebar {
|
||||
width: $sidebar-width-small;
|
||||
.sidebar-bottom {
|
||||
@include ml-mr(1.5rem);
|
||||
a, span {
|
||||
width: 2rem;
|
||||
}
|
||||
.icon-border {
|
||||
@include ml-mr(.25rem);
|
||||
left: -3px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1409,112 +1458,123 @@ div.post-content .table-wrapper {
|
||||
margin-right: 3%;
|
||||
}
|
||||
|
||||
#profile-wrapper {
|
||||
margin: 4rem 2rem 3rem 4rem;
|
||||
-ms-flex-direction: column!important;
|
||||
|
||||
#avatar {
|
||||
-webkit-box-pack: normal !important;
|
||||
-ms-flex-pack: normal !important;
|
||||
justify-content: normal !important;
|
||||
> a {
|
||||
width: 6.2rem;
|
||||
height: 6.2rem;
|
||||
}
|
||||
}
|
||||
|
||||
.profile-text {
|
||||
margin-left: 0.5rem;
|
||||
/* .d-flex */
|
||||
display: -webkit-box!important;
|
||||
display: -ms-flexbox!important;
|
||||
display: flex!important;
|
||||
/* .flex-wrap */
|
||||
-ms-flex-wrap: wrap!important;
|
||||
flex-wrap: wrap!important;
|
||||
/* .align-content-center */
|
||||
-ms-flex-line-pack: center!important;
|
||||
align-content: center!important;
|
||||
> div {
|
||||
text-align: left !important;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#sidebar {
|
||||
width: $sidebar-width-large;
|
||||
|
||||
.site-title a {
|
||||
font-size: 1.7rem;
|
||||
letter-spacing: 1px;
|
||||
margin: 0;
|
||||
}
|
||||
.profile-wrapper {
|
||||
margin-top: 4rem;
|
||||
margin-bottom: 1rem;
|
||||
|
||||
.site-subtitle {
|
||||
word-spacing: 0;
|
||||
margin: 0.3rem 0 0 0;
|
||||
}
|
||||
&.text-center {
|
||||
text-align: left !important;
|
||||
}
|
||||
|
||||
%profile-ml {
|
||||
margin-left: 4.5rem;
|
||||
}
|
||||
|
||||
#avatar {
|
||||
@extend %profile-ml;
|
||||
|
||||
> a {
|
||||
width: 6.2rem;
|
||||
height: 6.2rem;
|
||||
&.mx-auto {
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.site-title {
|
||||
@extend %profile-ml;
|
||||
a {
|
||||
font-size: 1.7rem;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
.site-subtitle {
|
||||
@extend %profile-ml;
|
||||
word-spacing: 0;
|
||||
margin-top: 0.3rem;
|
||||
}
|
||||
|
||||
} // .profile-wrapper (min-width: 1650px)
|
||||
|
||||
ul {
|
||||
margin-left: 3%;
|
||||
> li > a {
|
||||
padding-left: 2.5rem;
|
||||
-webkit-box-pack: start!important;
|
||||
-ms-flex-pack: start!important;
|
||||
justify-content: flex-start!important;
|
||||
}
|
||||
}
|
||||
padding-left: 2.5rem;
|
||||
|
||||
.nav-link {
|
||||
> span {
|
||||
letter-spacing: 3px;
|
||||
> li:last-child {
|
||||
> a {
|
||||
position: static;
|
||||
}
|
||||
}
|
||||
> i {
|
||||
@include icon-round(1.65rem);
|
||||
line-height: 1rem;
|
||||
font-size: 0.6rem;
|
||||
padding: 0.5em 0 0 0.1em;
|
||||
display: inline-block!important;
|
||||
|
||||
.nav-item {
|
||||
text-align: left;
|
||||
|
||||
.nav-link {
|
||||
> span {
|
||||
letter-spacing: 3px;
|
||||
}
|
||||
|
||||
> i {
|
||||
@include icon-round(1.65rem);
|
||||
|
||||
line-height: 1.5rem;
|
||||
font-size: 0.6rem;
|
||||
padding-top: 1px;
|
||||
padding-left: 1px;
|
||||
position: relative;
|
||||
bottom: 1px;
|
||||
|
||||
&.unloaded {
|
||||
display: inline-block !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-bottom {
|
||||
margin-left: 3.5rem;
|
||||
margin-right: 3rem;
|
||||
font-size: 1.3rem;
|
||||
padding-left: 3.5rem;
|
||||
width: 100%;
|
||||
|
||||
&.justify-content-center {
|
||||
-webkit-box-pack: start!important;
|
||||
-ms-flex-pack: start!important;
|
||||
justify-content: flex-start!important;
|
||||
}
|
||||
|
||||
a {
|
||||
border: 1px solid;
|
||||
border-radius: 50%;
|
||||
font-size: 1rem;
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
text-align: center;
|
||||
i {
|
||||
text-align: center;
|
||||
width: 1.25em;
|
||||
padding-top: 0.44rem;
|
||||
}
|
||||
width: 3rem;
|
||||
}
|
||||
|
||||
i {
|
||||
@include icon-round(2rem);
|
||||
padding-top: 0.44rem;
|
||||
margin-top: .7rem; // multi line space
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
#mode-toggle-wrapper {
|
||||
font-size: 0.9rem;
|
||||
width: 3rem;
|
||||
|
||||
i {
|
||||
@include icon-round(2rem);
|
||||
padding-top: 0.44rem;
|
||||
bottom: 0;
|
||||
top: 11px;
|
||||
}
|
||||
}
|
||||
|
||||
.icon-border {
|
||||
@include ml-mr(.2rem);
|
||||
margin-top: 0.85rem;
|
||||
+a {
|
||||
margin-left: 0;
|
||||
}
|
||||
top: 26px;
|
||||
}
|
||||
|
||||
} // .sidebar-bottom
|
||||
|
||||
} // #sidebar
|
||||
|
||||
footer > div.d-flex {
|
||||
width: 87%;
|
||||
max-width: 1140px;
|
||||
|
||||
@@ -65,7 +65,6 @@
|
||||
color: $color;
|
||||
transition: color 0.35s ease-in-out;
|
||||
user-select: none;
|
||||
margin: 0 0.25rem;
|
||||
}
|
||||
|
||||
@mixin icon-round($diameter) {
|
||||
@@ -97,7 +96,6 @@
|
||||
color: $color;
|
||||
font-size: $font-size;
|
||||
font-weight: $font-weight;
|
||||
font-family: 'Roboto Condensed', 'Microsoft Yahei', sans-serif;
|
||||
}
|
||||
|
||||
@mixin panel-label {
|
||||
|
||||
@@ -56,6 +56,7 @@ div > pre {
|
||||
@extend %code-snippet-radius;
|
||||
|
||||
color: var(--highlighter-rouge-color);
|
||||
margin-top: 0.5rem;
|
||||
margin-bottom: 1.2em; /* Override BS Inline-code style */
|
||||
}
|
||||
|
||||
@@ -111,7 +112,6 @@ code {
|
||||
&.highlighter-rouge {
|
||||
font-size: $code-font-size;
|
||||
padding: 3px 5px;
|
||||
margin: 0 0.15rem;
|
||||
border-radius: 4px;
|
||||
background-color: var(--inline-code-bg);
|
||||
}
|
||||
@@ -149,7 +149,7 @@ div {
|
||||
}
|
||||
}
|
||||
|
||||
[class^='language-']::before {
|
||||
div[class^='language-']::before {
|
||||
content: attr(lang);
|
||||
position: absolute;
|
||||
right: 1.8rem;
|
||||
@@ -161,7 +161,7 @@ div {
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
[class^='language-']::before {
|
||||
div[class^='language-']::before {
|
||||
right: 3.1rem;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
|
||||
/* --- ↓ width and height ---- */
|
||||
|
||||
$tab-height: 3.3rem;
|
||||
$tab-height: 3.2rem;
|
||||
$tab-cursor-height: 1.6rem;
|
||||
|
||||
$sidebar-width-small: 210px;
|
||||
|
||||
@@ -25,7 +25,7 @@
|
||||
--btn-backtotop-color: #686868;
|
||||
--btn-backtotop-border-color: #f1f1f1;
|
||||
--btn-box-shadow: #eaeaea;
|
||||
--checkbox-color: darkgrey;
|
||||
--checkbox-color: #c5c5c5;
|
||||
--checkbox-checked-color: #07a8f7;
|
||||
|
||||
/* Sidebar */
|
||||
@@ -59,7 +59,7 @@
|
||||
--btn-share-hover-color: var(--link-color);
|
||||
--card-border-color: #f1f1f1;
|
||||
--card-box-shadow: rgba(234, 234, 234, 0.7686274509803922);
|
||||
--label-color: #808080;
|
||||
--label-color: #616161;
|
||||
--relate-post-date: rgba(30, 55, 70, 0.4);
|
||||
--tag-bg: rgba(0, 0, 0, 0.075);
|
||||
--tag-border: #dee2e6;
|
||||
|
||||
@@ -19,10 +19,6 @@
|
||||
background-color: var(--timeline-color);
|
||||
}
|
||||
|
||||
%date-font {
|
||||
font-family: 'Roboto Condensed', sans-serif;
|
||||
}
|
||||
|
||||
#archives {
|
||||
letter-spacing: 0.03rem;
|
||||
li {
|
||||
@@ -42,7 +38,6 @@
|
||||
|
||||
span.lead {
|
||||
font-size: 1.5rem;
|
||||
@extend %date-font;
|
||||
position: relative;
|
||||
left: 8px;
|
||||
|
||||
@@ -54,8 +49,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
&::after {
|
||||
/* Year dot */
|
||||
&::after { /* Year dot */
|
||||
content: "";
|
||||
display: block;
|
||||
position: relative;
|
||||
@@ -80,8 +74,8 @@
|
||||
&.month {
|
||||
width: 1.4rem;
|
||||
text-align: center;
|
||||
@extend %date-font;
|
||||
~a::before {
|
||||
|
||||
~ a::before {
|
||||
/* A dot for Month and Day */
|
||||
content: "";
|
||||
display: inline-block;
|
||||
|
||||
@@ -49,21 +49,6 @@ $prompt-newer: "{{ site.data.label.post.button.next }}";
|
||||
}
|
||||
|
||||
.post-content {
|
||||
> ol, > ul, > dl {
|
||||
padding-left: 2rem;
|
||||
li + li {
|
||||
margin-top: 0.3rem;
|
||||
}
|
||||
}
|
||||
li {
|
||||
> ol, > ul, > dl { // sub list
|
||||
padding-left: 2rem;
|
||||
margin-top: 0.3rem;
|
||||
}
|
||||
> p {
|
||||
margin: 1rem 0 0.8rem;
|
||||
}
|
||||
}
|
||||
.preview-img {
|
||||
margin-top: 0;
|
||||
margin-bottom: 2.5rem;
|
||||
@@ -182,7 +167,7 @@ $prompt-newer: "{{ site.data.label.post.button.next }}";
|
||||
@include label(1.1rem, 600);
|
||||
}
|
||||
.card {
|
||||
border: 1px solid var(--card-border-color);
|
||||
border-color: var(--card-border-color);
|
||||
background-color: var(--card-bg);
|
||||
box-shadow: 0 0 5px 0 var(--card-box-shadow);
|
||||
-webkit-transition: all 0.3s ease-in-out;
|
||||
@@ -194,7 +179,7 @@ $prompt-newer: "{{ site.data.label.post.button.next }}";
|
||||
&:hover {
|
||||
-webkit-transform: translate3d(0, -3px, 0);
|
||||
transform: translate3d(0, -3px, 0);
|
||||
box-shadow: 0 20px 35px -4px rgba(0, 0, 0, 0.15);
|
||||
box-shadow: 0 10px 15px -4px rgba(0,0,0,0.15);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,9 +1,8 @@
|
||||
/*
|
||||
Reference: https://bootsnipp.com/snippets/featured/link-to-top-page
|
||||
*/
|
||||
|
||||
$(function() {
|
||||
$(window).scroll(function() {
|
||||
$(window).scroll(() => {
|
||||
if ($(this).scrollTop() > 50 &&
|
||||
$("#sidebar-trigger").css("display") === "none") {
|
||||
$("#back-to-top").fadeIn();
|
||||
@@ -12,7 +11,7 @@ $(function() {
|
||||
}
|
||||
});
|
||||
|
||||
$("#back-to-top").click(function() {
|
||||
$("#back-to-top").click(() => {
|
||||
$("body,html").animate({
|
||||
scrollTop: 0
|
||||
}, 800);
|
||||
|
||||
80
assets/js/_utils/smooth-scroll.js
Normal file
80
assets/js/_utils/smooth-scroll.js
Normal file
@@ -0,0 +1,80 @@
|
||||
/*
|
||||
Safari doesn't support CSS `scroll-behavior: smooth`,
|
||||
so here is a compatible sollution for all browser to smooth scrolling
|
||||
|
||||
See: <https://css-tricks.com/snippets/jquery/smooth-scrolling/>
|
||||
|
||||
Warning: It must be called after all `<a>` tags (e.g., the dynamic TOC) are ready.
|
||||
*/
|
||||
|
||||
$(function() {
|
||||
$("a[href*='#']")
|
||||
.not("[href='#']")
|
||||
.not("[href='#0']")
|
||||
.click(function(event) {
|
||||
|
||||
if (location.pathname.replace(/^\//, "") === this.pathname.replace(/^\//, "")
|
||||
&& location.hostname === this.hostname) {
|
||||
|
||||
const REM = 16; /* 16px */
|
||||
|
||||
const hash = decodeURI(this.hash);
|
||||
let isFnRef = RegExp(/^#fnref:/).test(hash);
|
||||
let isFn = RegExp(/^#fn:/).test(hash);
|
||||
let selector = hash.includes(":") ? hash.replace(/\:/, "\\:") : hash;
|
||||
const target = $(selector);
|
||||
|
||||
if (target.length) {
|
||||
event.preventDefault();
|
||||
|
||||
if (history.pushState) { /* add hash to URL */
|
||||
history.pushState(null, null, hash);
|
||||
}
|
||||
|
||||
let curOffset = $(this).offset().top;
|
||||
let destOffset = target.offset().top;
|
||||
const scrollUp = (destOffset < curOffset);
|
||||
const topbarHeight = $("#topbar-wrapper").outerHeight();
|
||||
|
||||
if (scrollUp && isFnRef) {
|
||||
/* Avoid the top-bar covering `fnref` when scrolling up
|
||||
because `fnref` has no `%anchor`(see: module.scss) style. */
|
||||
destOffset -= (topbarHeight + REM / 2);
|
||||
}
|
||||
|
||||
$("html,body").animate({
|
||||
scrollTop: destOffset
|
||||
}, 800, () => {
|
||||
|
||||
var $target = $(target);
|
||||
$target.focus();
|
||||
|
||||
const SCROLL_MARK = "scroll-focus";
|
||||
|
||||
/* clean up old scroll mark */
|
||||
if ($(`[${ SCROLL_MARK }=true]`).length) {
|
||||
$(`[${ SCROLL_MARK }=true]`).attr(SCROLL_MARK, false);
|
||||
}
|
||||
|
||||
/* Clean :target links */
|
||||
if ($(":target").length) { /* element that visited by the URL with hash */
|
||||
$(":target").attr(SCROLL_MARK, false);
|
||||
}
|
||||
|
||||
/* set scroll mark to footnotes */
|
||||
if (isFn || isFnRef) {
|
||||
$target.attr(SCROLL_MARK, true);
|
||||
}
|
||||
|
||||
if ($target.is(":focus")) { /* Checking if the target was focused */
|
||||
return false;
|
||||
} else {
|
||||
$target.attr("tabindex", "-1"); /* Adding tabindex for elements not focusable */
|
||||
$target.focus(); /* Set focus again */
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
}); /* click() */
|
||||
});
|
||||
@@ -1,14 +0,0 @@
|
||||
/*
|
||||
* Hide the empty ToC in posts.
|
||||
* v2.0
|
||||
* https://github.com/cotes2020/jekyll-theme-chirpy
|
||||
* © 2019 Cotes Chung
|
||||
* MIT Licensed
|
||||
*/
|
||||
|
||||
$(function() {
|
||||
if ($("#post-wrapper .post-content h1").length === 0
|
||||
&& $("#post-wrapper .post-content h2").length === 0) {
|
||||
$("#toc-wrapper").addClass("unloaded");
|
||||
}
|
||||
});
|
||||
2
assets/js/page.min.js
vendored
2
assets/js/page.min.js
vendored
@@ -9,3 +9,5 @@ layout: compress
|
||||
---
|
||||
|
||||
{% include_relative _commons.js %}
|
||||
|
||||
{% include_relative _utils/smooth-scroll.js %}
|
||||
|
||||
5
assets/js/post.min.js
vendored
5
assets/js/post.min.js
vendored
@@ -12,8 +12,9 @@ layout: compress
|
||||
|
||||
{% include_relative lib/_bootstrap-toc.min.js %}
|
||||
|
||||
{% include_relative _utils/toc-filter.js %}
|
||||
|
||||
{% include_relative _utils/img-hyperlink.js %}
|
||||
|
||||
{% include_relative _utils/lang-badge.js %}
|
||||
|
||||
{% comment %} `smooth-scroll.js` must be called after ToC is ready {% endcomment %}
|
||||
{% include_relative _utils/smooth-scroll.js %}
|
||||
|
||||
Reference in New Issue
Block a user