mirror of
https://github.com/cotes2020/jekyll-theme-chirpy.git
synced 2025-12-18 13:44:15 +00:00
Compare commits
59 Commits
c534bfcc2f
...
v7.3.1
| Author | SHA1 | Date | |
|---|---|---|---|
|
c0e4756200 | ||
|
|
81886b11c0 | ||
|
|
7615d72e93 | ||
|
|
53770e4923 | ||
|
|
d84b72706a | ||
|
|
519e4f193a | ||
|
|
d0f8f9553e | ||
|
|
401e2af0f8 | ||
|
|
ada38aad96 | ||
|
|
61ae6cced8 | ||
|
|
9f38a2dead | ||
|
|
23d953c313 | ||
|
|
b48ea68bf7 | ||
|
|
c62644759c | ||
|
|
7708adbf30 | ||
|
|
167c98c781 | ||
|
|
f7449299e8 | ||
|
|
db40db6d3d | ||
|
|
571c90f130 | ||
|
|
54d4d59d22 | ||
|
|
e3158642c3 | ||
|
|
7d4d35cd10 | ||
|
|
231956d77a | ||
|
|
0eb7efa7f5 | ||
|
|
e44c048aef | ||
|
|
5e41d874b3 | ||
|
|
774ee93d78 | ||
|
|
8a4d0bc4ee | ||
|
|
1b93f6db9b | ||
|
|
32051dad03 | ||
|
|
c12875fdba | ||
|
|
c174f62f26 | ||
|
|
e741aa43cf | ||
|
|
e0c3fafa47 | ||
|
|
1b4e318dc1 | ||
|
|
2f00d41861 | ||
|
|
f40fa6a13c | ||
|
|
0360c9e90b | ||
|
|
d87c2de675 | ||
|
|
f55cc31dbd | ||
|
|
981ddba30e | ||
|
|
4925a58bf5 | ||
|
|
7630356a94 | ||
|
|
6c112c641a | ||
|
|
976e1a184b | ||
|
|
7ea3545ba3 | ||
|
|
8280adb901 | ||
|
|
4180992272 | ||
|
|
a16aa7d41e | ||
|
|
8e55e4dcb2 | ||
|
|
b4019f3517 | ||
|
|
2966fc174d | ||
|
|
3df83fd0d9 | ||
|
|
82ba82e6da | ||
|
|
5265b03974 | ||
|
|
11647697bb | ||
|
|
5756b8fc26 | ||
|
|
35c794cf58 | ||
|
|
c69914effc |
25
.github/workflows/style-lint.yml
vendored
25
.github/workflows/style-lint.yml
vendored
@@ -1,25 +0,0 @@
|
||||
name: Style Lint
|
||||
|
||||
on:
|
||||
push:
|
||||
branches:
|
||||
- master
|
||||
- "hotfix/*"
|
||||
paths: ["_sass/**/*.scss"]
|
||||
pull_request:
|
||||
paths: ["_sass/**/*.scss"]
|
||||
|
||||
jobs:
|
||||
stylelint:
|
||||
runs-on: ubuntu-latest
|
||||
|
||||
steps:
|
||||
- name: Checkout
|
||||
uses: actions/checkout@v4
|
||||
|
||||
- name: Setup Node
|
||||
uses: actions/setup-node@v4
|
||||
with:
|
||||
node-version: lts/*
|
||||
- run: npm i
|
||||
- run: npm test
|
||||
2
.gitignore
vendored
2
.gitignore
vendored
@@ -23,5 +23,5 @@ package-lock.json
|
||||
!.vscode/tasks.json
|
||||
|
||||
# Misc
|
||||
_sass/dist
|
||||
_sass/vendors
|
||||
assets/js/dist
|
||||
|
||||
31
.stylelintrc.json
Normal file
31
.stylelintrc.json
Normal file
@@ -0,0 +1,31 @@
|
||||
{
|
||||
"ignoreFiles": ["_sass/vendors/**"],
|
||||
"extends": "stylelint-config-standard-scss",
|
||||
"rules": {
|
||||
"no-descending-specificity": null,
|
||||
"shorthand-property-no-redundant-values": null,
|
||||
"at-rule-no-vendor-prefix": null,
|
||||
"property-no-vendor-prefix": null,
|
||||
"selector-no-vendor-prefix": null,
|
||||
"value-no-vendor-prefix": null,
|
||||
"color-function-notation": "legacy",
|
||||
"alpha-value-notation": "number",
|
||||
"selector-not-notation": "simple",
|
||||
"color-hex-length": "long",
|
||||
"declaration-block-single-line-max-declarations": 3,
|
||||
"scss/operator-no-newline-after": null,
|
||||
"rule-empty-line-before": [
|
||||
"always",
|
||||
{
|
||||
"ignore": ["after-comment", "first-nested"]
|
||||
}
|
||||
],
|
||||
"value-keyword-case": [
|
||||
"lower",
|
||||
{
|
||||
"ignoreProperties": ["/^\\$/"]
|
||||
}
|
||||
],
|
||||
"media-feature-range-notation": "prefix"
|
||||
}
|
||||
}
|
||||
@@ -212,8 +212,9 @@ exclude:
|
||||
- tools
|
||||
- README.md
|
||||
- LICENSE
|
||||
- purgecss.js
|
||||
- "*.config.js"
|
||||
- package*.json
|
||||
- "package*.json"
|
||||
|
||||
jekyll-archives:
|
||||
enabled: [categories, tags]
|
||||
|
||||
84
_data/locales/ca-ES.yml
Normal file
84
_data/locales/ca-ES.yml
Normal file
@@ -0,0 +1,84 @@
|
||||
# The layout text of site
|
||||
|
||||
# ----- Commons label -----
|
||||
|
||||
layout:
|
||||
post: Entrada
|
||||
category: Categoria
|
||||
tag: Etiqueta
|
||||
|
||||
# The tabs of sidebar
|
||||
tabs:
|
||||
# format: <filename_without_extension>: <value>
|
||||
home: Inici
|
||||
categories: Categories
|
||||
tags: Etiquetes
|
||||
archives: Arxiu
|
||||
about: Sobre
|
||||
|
||||
# the text displayed in the search bar & search results
|
||||
search:
|
||||
hint: Cercar
|
||||
cancel: Cancel·lar
|
||||
no_results: Ups! No s'han trobat resultats.
|
||||
|
||||
panel:
|
||||
lastmod: Actualitzat recentment
|
||||
trending_tags: Etiquetes populars
|
||||
toc: Taula de continguts
|
||||
|
||||
copyright:
|
||||
# Shown at the bottom of the post
|
||||
license:
|
||||
template: Aquesta entrada està llicenciada sota :LICENSE_NAME per l'autor.
|
||||
name: CC BY 4.0
|
||||
link: https://creativecommons.org/licenses/by/4.0/
|
||||
|
||||
# Displayed in the footer
|
||||
brief: Alguns drets reservats.
|
||||
verbose: >-
|
||||
Excepte que s'indiqui explícitament, les entrades d'aquest blog estan llicenciades
|
||||
sota la llicència Creative Commons Attribution 4.0 International (CC BY 4.0) per l'autor.
|
||||
|
||||
meta: Fet amb :PLATFORM utilitzant el tema :THEME
|
||||
|
||||
not_found:
|
||||
statement: Ho sentim, hem perdut aquesta URL o apunta a alguna cosa que no existeix.
|
||||
|
||||
notification:
|
||||
update_found: Hi ha una nova versió de contingut disponible.
|
||||
update: Actualitzar
|
||||
|
||||
# ----- Posts related labels -----
|
||||
|
||||
post:
|
||||
written_by: Per
|
||||
posted: Publicat
|
||||
updated: Actualitzat
|
||||
words: paraules
|
||||
pageview_measure: visites
|
||||
read_time:
|
||||
unit: min
|
||||
prompt: " de lectura"
|
||||
relate_posts: Entrades relacionades
|
||||
share: Compartir
|
||||
button:
|
||||
next: Següent
|
||||
previous: Anterior
|
||||
copy_code:
|
||||
succeed: Copiat!
|
||||
share_link:
|
||||
title: Copiar enllaç
|
||||
succeed: Enllaç copiat!
|
||||
|
||||
# Date time format.
|
||||
# See: <http://strftime.net/>, <https://day.js.org/docs/en/display/format>
|
||||
df:
|
||||
post:
|
||||
strftime: "%Y/%m/%d"
|
||||
dayjs: "YYYY/MM/DD"
|
||||
|
||||
# categories page
|
||||
categories:
|
||||
category_measure: categories
|
||||
post_measure: entrades
|
||||
91
_data/locales/fa-IR.yaml
Normal file
91
_data/locales/fa-IR.yaml
Normal file
@@ -0,0 +1,91 @@
|
||||
# The layout text of site
|
||||
|
||||
# ----- Commons label -----
|
||||
|
||||
layout:
|
||||
post: پست
|
||||
category: دستهبندی
|
||||
tag: برچسب
|
||||
|
||||
# The tabs of sidebar
|
||||
tabs:
|
||||
# format: <filename_without_extension>: <value>
|
||||
home: خانه
|
||||
categories: دستهبندیها
|
||||
tags: برچسبها
|
||||
archives: آرشیو
|
||||
about: درباره
|
||||
|
||||
# the text displayed in the search bar & search results
|
||||
search:
|
||||
hint: جستجو
|
||||
cancel: لغو
|
||||
no_results: متأسفیم! هیچ نتیجهای یافت نشد.
|
||||
|
||||
panel:
|
||||
lastmod: آخرین بهروزرسانی
|
||||
trending_tags: برچسبهای پرطرفدار
|
||||
toc: فهرست مطالب
|
||||
|
||||
copyright:
|
||||
# Shown at the bottom of the post
|
||||
license:
|
||||
template: این پست تحت مجوز :LICENSE_NAME توسط نویسنده منتشر شده است.
|
||||
name: CC BY 4.0
|
||||
link: https://creativecommons.org/licenses/by/4.0/
|
||||
|
||||
# Displayed in the footer
|
||||
brief: برخی حقوق محفوظ است.
|
||||
verbose: >-
|
||||
مگر اینکه خلاف آن ذکر شده باشد، پستهای وبلاگ در این سایت
|
||||
تحت مجوز Creative Commons Attribution 4.0 International (CC BY 4.0) توسط نویسنده منتشر شدهاند.
|
||||
|
||||
meta: با استفاده از :PLATFORM قالب :THEME
|
||||
|
||||
not_found:
|
||||
statement: متأسفیم، لینک زیر معتبر نیست یا به صفحهای که وجود ندارد اشاره میکند.
|
||||
|
||||
notification:
|
||||
update_found: نسخه جدیدی از محتوا موجود است.
|
||||
update: بهروزرسانی
|
||||
|
||||
# ----- Posts related labels -----
|
||||
|
||||
post:
|
||||
written_by: نوشته شده توسط
|
||||
posted: منتشر شده
|
||||
updated: بهروزرسانی شده
|
||||
words: کلمات
|
||||
pageview_measure: بازدیدها
|
||||
read_time:
|
||||
unit: دقیقه
|
||||
prompt: زمان مطالعه
|
||||
relate_posts: بیشتر بخوانید
|
||||
share: اشتراکگذاری
|
||||
button:
|
||||
next: جدیدتر
|
||||
previous: قدیمیتر
|
||||
copy_code:
|
||||
succeed: کپی شد!
|
||||
share_link:
|
||||
title: کپی لینک
|
||||
succeed: لینک با موفقیت کپی شد!
|
||||
|
||||
# Date time format.
|
||||
# See: <http://strftime.net/>, <https://day.js.org/docs/en/display/format>
|
||||
df:
|
||||
post:
|
||||
strftime: "%b %e, %Y"
|
||||
dayjs: "ll"
|
||||
archives:
|
||||
strftime: "%b"
|
||||
dayjs: "MMM"
|
||||
|
||||
# categories page
|
||||
categories:
|
||||
category_measure:
|
||||
singular: دستهبندی
|
||||
plural: دستهبندیها
|
||||
post_measure:
|
||||
singular: پست
|
||||
plural: پستها
|
||||
84
_data/locales/ja-JP.yml
Normal file
84
_data/locales/ja-JP.yml
Normal file
@@ -0,0 +1,84 @@
|
||||
# The layout text of site
|
||||
|
||||
# ----- Commons label -----
|
||||
|
||||
layout:
|
||||
post: 投稿
|
||||
category: カテゴリー
|
||||
tag: タグ
|
||||
|
||||
# The tabs of sidebar
|
||||
tabs:
|
||||
# format: <filename_without_extension>: <value>
|
||||
home: ホーム
|
||||
categories: カテゴリー
|
||||
tags: タグ
|
||||
archives: アーカイブ
|
||||
about: このサイトについて
|
||||
|
||||
# the text displayed in the search bar & search results
|
||||
search:
|
||||
hint: 検索
|
||||
cancel: キャンセル
|
||||
no_results: 該当なし
|
||||
|
||||
panel:
|
||||
lastmod: 最近更新された投稿
|
||||
trending_tags: トレンドのタグ
|
||||
toc: コンテンツ
|
||||
|
||||
copyright:
|
||||
# Shown at the bottom of the post
|
||||
license:
|
||||
template: この投稿は投稿者によって :LICENSE_NAME の下でライセンスされています。
|
||||
name: CC BY 4.0
|
||||
link: https://creativecommons.org/licenses/by/4.0/
|
||||
|
||||
# Displayed in the footer
|
||||
brief: Some rights reserved.
|
||||
verbose: >-
|
||||
Except where otherwise noted, the blog posts on this site are licensed
|
||||
under the Creative Commons Attribution 4.0 International (CC BY 4.0) License by the author.
|
||||
|
||||
meta: :PLATFORM 用の :THEME を使用しています。
|
||||
|
||||
not_found:
|
||||
statement: このURLは存在しないものを指し示しています。
|
||||
|
||||
notification:
|
||||
update_found: 新しいバージョンが利用可能です。
|
||||
update: 更新
|
||||
|
||||
# ----- Posts related labels -----
|
||||
|
||||
post:
|
||||
written_by: 投稿者
|
||||
posted: 投稿日
|
||||
updated: 更新日
|
||||
words: 語
|
||||
pageview_measure: 回閲覧
|
||||
read_time:
|
||||
unit: 分
|
||||
prompt: で読めます
|
||||
relate_posts: さらに読む
|
||||
share: シェア
|
||||
button:
|
||||
next: 次
|
||||
previous: 前
|
||||
copy_code:
|
||||
succeed: コピーしました
|
||||
share_link:
|
||||
title: リンクをコピー
|
||||
succeed: リンクをコピーしました
|
||||
|
||||
# Date time format.
|
||||
# See: <http://strftime.net/>, <https://day.js.org/docs/en/display/format>
|
||||
df:
|
||||
post:
|
||||
strftime: "%Y/%m/%d"
|
||||
dayjs: "YYYY/MM/DD"
|
||||
|
||||
# categories page
|
||||
categories:
|
||||
category_measure: カテゴリー
|
||||
post_measure: 投稿
|
||||
90
_data/locales/nl-NL.yml
Normal file
90
_data/locales/nl-NL.yml
Normal file
@@ -0,0 +1,90 @@
|
||||
# The layout text of site
|
||||
|
||||
# ----- Commons label -----
|
||||
|
||||
layout:
|
||||
post: Post
|
||||
category: Categorie
|
||||
tag: Tag
|
||||
|
||||
# The tabs of sidebar
|
||||
tabs:
|
||||
# format: <filename_without_extension>: <value>
|
||||
home: Startpagina
|
||||
categories: Categorieën
|
||||
tags: Tags
|
||||
archives: Archief
|
||||
about: Over
|
||||
|
||||
# the text displayed in the search bar & search results
|
||||
search:
|
||||
hint: Zoek
|
||||
cancel: Annuleer
|
||||
no_results: Oops! Geen resultaat gevonden.
|
||||
|
||||
panel:
|
||||
lastmod: Recent Bijgewerkt
|
||||
trending_tags: Trending Tags
|
||||
toc: Inhoud
|
||||
|
||||
copyright:
|
||||
# Shown at the bottom of the post
|
||||
license:
|
||||
template: Alle posts zijn onder :LICENSE_NAME gepubliceerd door de auteur.
|
||||
name: CC BY 4.0
|
||||
link: https://creativecommons.org/licenses/by/4.0/
|
||||
|
||||
# Displayed in the footer
|
||||
brief: Sommige rechten voorbehouden.
|
||||
verbose: >-
|
||||
Tenzij anders vermeld, alle posts zijn onder de
|
||||
Creative Commons Attribution 4.0 International (CC BY 4.0) gepubliceerd door de auteur.
|
||||
|
||||
meta: Gebruikt :THEME
|
||||
|
||||
not_found:
|
||||
statement: Sorry, we hebben de URL verkeerd geplaatst of hij verwijst naar iets dat niet bestaat.
|
||||
|
||||
notification:
|
||||
update_found: Nieuwe versie van inhoud beschikbaar.
|
||||
update: Update
|
||||
|
||||
# ----- Posts related labels -----
|
||||
post:
|
||||
written_by: Door
|
||||
posted: Posted
|
||||
updated: Bijgewerkt
|
||||
words: woorden
|
||||
pageview_measure: Gelezen
|
||||
read_time:
|
||||
unit: min
|
||||
prompt: lees
|
||||
relate_posts: Verder Lezen
|
||||
share: Deel
|
||||
button:
|
||||
next: Volgende
|
||||
previous: Vorige
|
||||
copy_code:
|
||||
succeed: Gekopieerd!
|
||||
share_link:
|
||||
title: Link kopiëren
|
||||
succeed: Succesvol gekopieerd!
|
||||
|
||||
# Date time format.
|
||||
# See: <http://strftime.net/>, <https://day.js.org/docs/en/display/format>
|
||||
df:
|
||||
post:
|
||||
strftime: "%b %e, %Y"
|
||||
dayjs: "ll"
|
||||
archives:
|
||||
strftime: "%b"
|
||||
dayjs: "MMM"
|
||||
|
||||
# categories page
|
||||
categories:
|
||||
category_measure:
|
||||
singular: categorie
|
||||
plural: categorieën
|
||||
post_measure:
|
||||
singular: post
|
||||
plural: posts
|
||||
@@ -20,17 +20,17 @@ webfonts: https://fonts.googleapis.com/css2?family=Lato:wght@300;400&family=Sour
|
||||
# Libraries
|
||||
|
||||
toc:
|
||||
css: https://cdn.jsdelivr.net/npm/tocbot@4.29.0/dist/tocbot.min.css
|
||||
js: https://cdn.jsdelivr.net/npm/tocbot@4.29.0/dist/tocbot.min.js
|
||||
css: https://cdn.jsdelivr.net/npm/tocbot@4.32.2/dist/tocbot.min.css
|
||||
js: https://cdn.jsdelivr.net/npm/tocbot@4.32.2/dist/tocbot.min.js
|
||||
|
||||
fontawesome:
|
||||
css: https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.6.0/css/all.min.css
|
||||
css: https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.7.1/css/all.min.css
|
||||
|
||||
search:
|
||||
js: https://cdn.jsdelivr.net/npm/simple-jekyll-search@1.10.0/dest/simple-jekyll-search.min.js
|
||||
|
||||
mermaid:
|
||||
js: https://cdn.jsdelivr.net/npm/mermaid@11.0.2/dist/mermaid.min.js
|
||||
js: https://cdn.jsdelivr.net/npm/mermaid@11.4.0/dist/mermaid.min.js
|
||||
|
||||
dayjs:
|
||||
js:
|
||||
|
||||
@@ -18,7 +18,7 @@ platforms:
|
||||
#
|
||||
# - type: Linkedin
|
||||
# icon: "fab fa-linkedin"
|
||||
# link: "https://www.linkedin.com/sharing/share-offsite/?url=URL"
|
||||
# link: "https://www.linkedin.com/feed/?shareActive=true&shareUrl=URL"
|
||||
#
|
||||
# - type: Weibo
|
||||
# icon: "fab fa-weibo"
|
||||
|
||||
@@ -70,7 +70,7 @@
|
||||
|
||||
<!-- Bootstrap -->
|
||||
{% unless jekyll.environment == 'production' %}
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css">
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.6/dist/css/bootstrap.min.css">
|
||||
{% endunless %}
|
||||
|
||||
<!-- Theme style -->
|
||||
@@ -99,9 +99,7 @@
|
||||
|
||||
<!-- Scripts -->
|
||||
|
||||
{% unless site.theme_mode %}
|
||||
<script src="{{ '/assets/js/dist/theme.min.js' | relative_url }}"></script>
|
||||
{% endunless %}
|
||||
<script src="{{ '/assets/js/dist/theme.min.js' | relative_url }}"></script>
|
||||
|
||||
{% include js-selector.html lang=lang %}
|
||||
|
||||
|
||||
@@ -66,7 +66,7 @@
|
||||
|
||||
{% if page.math %}
|
||||
<!-- MathJax -->
|
||||
<script async src="{{ '/assets/js/data/mathjax.js' | relative_url }}"></script>
|
||||
<script src="{{ '/assets/js/data/mathjax.js' | relative_url }}"></script>
|
||||
<script async src="https://cdnjs.cloudflare.com/polyfill/v3/polyfill.min.js?features=es6"></script>
|
||||
<script id="MathJax-script" async src="{{ site.data.origin[type].mathjax.js | relative_url }}"></script>
|
||||
{% endif %}
|
||||
|
||||
@@ -1,10 +0,0 @@
|
||||
{% comment %}
|
||||
Remove the line number of the code snippet.
|
||||
{% endcomment %}
|
||||
|
||||
{% assign content = include.content %}
|
||||
|
||||
{% if content contains '<td class="rouge-gutter gl"><pre class="lineno">' %}
|
||||
{% assign content = content | replace: '<td class="rouge-gutter gl"><pre class="lineno">', '<!-- <td class="rouge-gutter gl"><pre class="lineno">'%}
|
||||
{% assign content = content | replace: '</td><td class="rouge-code">', '</td> --><td class="rouge-code">' %}
|
||||
{% endif %}
|
||||
@@ -1,19 +1,21 @@
|
||||
<!-- Display GoatCounter pageviews -->
|
||||
<script>
|
||||
let pv = document.getElementById('pageviews');
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const pv = document.getElementById('pageviews');
|
||||
|
||||
if (pv !== null) {
|
||||
const uri = location.pathname.replace(/\/$/, '');
|
||||
const url = `https://{{ site.analytics.goatcounter.id }}.goatcounter.com/counter/${encodeURIComponent(uri)}.json`;
|
||||
if (pv !== null) {
|
||||
const uri = location.pathname.replace(/\/$/, '');
|
||||
const url = `https://{{ site.analytics.goatcounter.id }}.goatcounter.com/counter/${encodeURIComponent(uri)}.json`;
|
||||
|
||||
fetch(url)
|
||||
.then((response) => response.json())
|
||||
.then((data) => {
|
||||
const count = data.count.replace(/\s/g, '');
|
||||
pv.innerText = new Intl.NumberFormat().format(count);
|
||||
})
|
||||
.catch((error) => {
|
||||
pv.innerText = '1';
|
||||
});
|
||||
}
|
||||
fetch(url)
|
||||
.then((response) => response.json())
|
||||
.then((data) => {
|
||||
const count = data.count.replace(/\s/g, '');
|
||||
pv.innerText = new Intl.NumberFormat().format(count);
|
||||
})
|
||||
.catch((error) => {
|
||||
pv.innerText = '1';
|
||||
});
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
@@ -2,15 +2,29 @@
|
||||
Get post description or generate it from the post content.
|
||||
{%- endcomment -%}
|
||||
|
||||
{%- assign max_length = include.max_length | default: 200 -%}
|
||||
|
||||
{%- capture description -%}
|
||||
{%- if post.description -%}
|
||||
{{- post.description -}}
|
||||
{%- else -%}
|
||||
{%- include no-linenos.html content=post.content -%}
|
||||
{{- content | markdownify | strip_html -}}
|
||||
{%- endif -%}
|
||||
{%- if post.description -%}
|
||||
{{- post.description -}}
|
||||
{%- else -%}
|
||||
{% comment %}
|
||||
Remove the line number of the code snippet.
|
||||
{% endcomment %}
|
||||
{%- assign content = post.content -%}
|
||||
|
||||
{%- if content contains '<td class="rouge-gutter gl"><pre class="lineno">' -%}
|
||||
{%- assign content = content | replace: '<td class="rouge-gutter gl"><pre class="lineno">', '<!-- <td class="rouge-gutter gl"><pre class="lineno">' -%}
|
||||
{%- assign content = content | replace: '</td><td class="rouge-code">', '</td> --><td class="rouge-code">' -%}
|
||||
{%- endif -%}
|
||||
|
||||
{{- content | strip_html | newline_to_br | replace: '<br />', ' ' | strip_newlines -}}
|
||||
{%- endif -%}
|
||||
{%- endcapture -%}
|
||||
|
||||
{{- description | strip | truncate: max_length | escape -}}
|
||||
{%- if include.json -%}
|
||||
{%- assign description = description | jsonify -%}
|
||||
{%- else -%}
|
||||
{%- assign max_length = include.max_length | default: 200 -%}
|
||||
{%- assign description = description | strip | truncate: max_length -%}
|
||||
{%- endif -%}
|
||||
|
||||
{{- description -}}
|
||||
|
||||
@@ -88,9 +88,41 @@
|
||||
{% endfor %}
|
||||
|
||||
<!-- take out classes -->
|
||||
{% assign _wrapper_class = '' %}
|
||||
|
||||
{% if _class %}
|
||||
{% capture _old_class %}class="{{ _class }}"{% endcapture %}
|
||||
{% assign _left = _left | remove: _old_class %}
|
||||
{% assign _remain = _class %}
|
||||
{% assign _class_array = _class | split: ' ' %}
|
||||
|
||||
{% for c in _class_array %}
|
||||
{% assign _pick = false %}
|
||||
|
||||
{% case c %}
|
||||
{% when 'preview-img', 'normal', 'left', 'right', 'light', 'dark' %}
|
||||
{% assign _pick = true %}
|
||||
{% else %}
|
||||
{% if c contains '-' %}
|
||||
{% assign start = c | split: '-' | first %}
|
||||
{% if start == 'w' %}
|
||||
{% assign _pick = true %}
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
{% endcase %}
|
||||
|
||||
{% if _pick %}
|
||||
{% assign _remain = _remain | remove: c | strip %}
|
||||
{% assign _wrapper_class = _wrapper_class | append: ' ' | append: c %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
{% unless _wrapper_class == '' %}
|
||||
{% capture _old_class %}class="{{ _class }}"{% endcapture %}
|
||||
{% assign _left = _left | remove: _old_class %}
|
||||
{% unless _remain == '' %}
|
||||
{% capture _new_class %}class="{{ _remain }}"{% endcapture %}
|
||||
{% assign _left = _left | append: _new_class %}
|
||||
{% endunless %}
|
||||
{% endunless %}
|
||||
{% endif %}
|
||||
|
||||
{% assign _final_src = null %}
|
||||
@@ -110,7 +142,7 @@
|
||||
|
||||
{% if _lqip %}
|
||||
{% assign _lazyload = false %}
|
||||
{% assign _class = _class | append: ' blur' %}
|
||||
{% assign _wrapper_class = _wrapper_class | append: ' blur' %}
|
||||
|
||||
{% unless _lqip contains 'data:' %}
|
||||
{% assign _lqip_alt = 'lqip="' | append: _path_prefix %}
|
||||
@@ -121,7 +153,7 @@
|
||||
{% assign _left = _left | replace: 'src=', 'data-src=' | replace: ' lqip=', ' data-lqip="true" src=' %}
|
||||
|
||||
{% else %}
|
||||
{% assign _class = _class | append: ' shimmer' %}
|
||||
{% assign _wrapper_class = _wrapper_class | append: ' shimmer' %}
|
||||
{% endif %}
|
||||
|
||||
<!-- lazy-load images -->
|
||||
@@ -153,8 +185,8 @@
|
||||
{% assign _wrapper_start = _final_src
|
||||
| default: _src
|
||||
| prepend: '<a href="'
|
||||
| append: '" class="popup img-link '
|
||||
| append: _class
|
||||
| append: '" class="popup img-link'
|
||||
| append: _wrapper_class
|
||||
| append: '">'
|
||||
%}
|
||||
|
||||
|
||||
@@ -12,7 +12,7 @@
|
||||
{tags}
|
||||
</div>
|
||||
</header>
|
||||
<p>{snippet}</p>
|
||||
<p>{content}</p>
|
||||
</article>
|
||||
{% endcapture %}
|
||||
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
<div id="search-result-wrapper" class="d-flex justify-content-center d-none">
|
||||
<div class="col-11 content">
|
||||
<div id="search-hints">
|
||||
{% include_cached trending-tags.html %}
|
||||
{% include_cached trending-tags.html lang=include.lang %}
|
||||
</div>
|
||||
<div id="search-results" class="d-flex flex-wrap justify-content-center text-muted mt-3"></div>
|
||||
</div>
|
||||
|
||||
@@ -1,8 +1,9 @@
|
||||
{% include toc-status.html %}
|
||||
|
||||
{% if enable_toc %}
|
||||
<section id="toc-wrapper" class="ps-0 pe-4">
|
||||
<h2 class="panel-heading ps-3 mb-2">{{- site.data.locales[include.lang].panel.toc -}}</h2>
|
||||
<div class="toc-border-cover z-3"></div>
|
||||
<section id="toc-wrapper" class="invisible position-sticky ps-0 pe-4 pb-4">
|
||||
<h2 class="panel-heading ps-3 pb-2 mb-0">{{- site.data.locales[include.lang].panel.toc -}}</h2>
|
||||
<nav id="toc"></nav>
|
||||
</section>
|
||||
{% endif %}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<!-- The Top Bar -->
|
||||
|
||||
<header id="topbar-wrapper" aria-label="Top Bar">
|
||||
<header id="topbar-wrapper" class="flex-shrink-0" aria-label="Top Bar">
|
||||
<div
|
||||
id="topbar"
|
||||
class="d-flex align-items-center justify-content-between px-lg-3 h-100"
|
||||
@@ -40,7 +40,7 @@
|
||||
</nav>
|
||||
<!-- endof #breadcrumb -->
|
||||
|
||||
<button type="button" id="sidebar-trigger" class="btn btn-link">
|
||||
<button type="button" id="sidebar-trigger" class="btn btn-link" aria-label="Sidebar">
|
||||
<i class="fas fa-bars fa-fw"></i>
|
||||
</button>
|
||||
|
||||
@@ -55,7 +55,7 @@
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<button type="button" id="search-trigger" class="btn btn-link">
|
||||
<button type="button" id="search-trigger" class="btn btn-link" aria-label="Search">
|
||||
<i class="fas fa-search fa-fw"></i>
|
||||
</button>
|
||||
|
||||
|
||||
@@ -11,7 +11,7 @@ function refreshTheme(event) {
|
||||
const mermaidList = document.getElementsByClassName(MERMAID);
|
||||
|
||||
[...mermaidList].forEach((elem) => {
|
||||
const svgCode = elem.previousSibling.children.item(0).innerHTML;
|
||||
const svgCode = elem.previousSibling.children.item(0).textContent;
|
||||
elem.textContent = svgCode;
|
||||
elem.removeAttribute('data-processed');
|
||||
});
|
||||
|
||||
@@ -27,6 +27,9 @@ function init() {
|
||||
mobile.init();
|
||||
}
|
||||
|
||||
const $tocWrapper = document.getElementById('toc-wrapper');
|
||||
$tocWrapper.classList.remove('invisible');
|
||||
|
||||
desktopMode.onchange = refresh;
|
||||
}
|
||||
|
||||
|
||||
@@ -15,8 +15,6 @@ export class TocDesktop {
|
||||
}
|
||||
|
||||
static init() {
|
||||
if (document.getElementById('toc-wrapper')) {
|
||||
tocbot.init(this.options);
|
||||
}
|
||||
tocbot.init(this.options);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -39,7 +39,10 @@ class Theme {
|
||||
}
|
||||
|
||||
static get #mode() {
|
||||
return sessionStorage.getItem(this.#modeKey);
|
||||
return (
|
||||
sessionStorage.getItem(this.#modeKey) ||
|
||||
document.documentElement.getAttribute(this.#modeAttr)
|
||||
);
|
||||
}
|
||||
|
||||
static get #isDarkMode() {
|
||||
@@ -33,7 +33,7 @@ layout: compress
|
||||
</main>
|
||||
|
||||
<!-- panel -->
|
||||
<aside aria-label="Panel" id="panel-wrapper" class="col-xl-3 ps-2 mb-5 text-muted">
|
||||
<aside aria-label="Panel" id="panel-wrapper" class="col-xl-3 ps-2 text-muted">
|
||||
<div class="access">
|
||||
{% include_cached update-list.html lang=lang %}
|
||||
{% include_cached trending-tags.html lang=lang %}
|
||||
|
||||
@@ -45,15 +45,12 @@ script_includes:
|
||||
{%- capture lqip -%}lqip="{{ page.image.lqip }}"{%- endcapture -%}
|
||||
{% endif %}
|
||||
|
||||
{% if page.image.show_image_in_post != false %}
|
||||
<div class="mt-3 mb-3">
|
||||
<img {{ src }} {{ class }} {{ alt }} w="1200" h="630" {{ lqip }}>
|
||||
{%- if page.image.alt -%}
|
||||
<figcaption class="text-center pt-2 pb-2">{{ page.image.alt }}</figcaption>
|
||||
{%- endif -%}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<div class="mt-3 mb-3">
|
||||
<img {{ src }} {{ class }} {{ alt }} w="1200" h="630" {{ lqip }}>
|
||||
{%- if page.image.alt -%}
|
||||
<figcaption class="text-center pt-2 pb-2">{{ page.image.alt }}</figcaption>
|
||||
{%- endif -%}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<div class="d-flex justify-content-between">
|
||||
|
||||
@@ -21,7 +21,7 @@ Basically, you need to fill the [Front Matter](https://jekyllrb.com/docs/front-m
|
||||
---
|
||||
title: TITLE
|
||||
date: YYYY-MM-DD HH:MM:SS +/-TTTT
|
||||
categories: [TOP_CATEGORIE, SUB_CATEGORIE]
|
||||
categories: [TOP_CATEGORY, SUB_CATEGORY]
|
||||
tags: [TAG] # TAG names should always be lowercase
|
||||
---
|
||||
```
|
||||
@@ -97,7 +97,7 @@ toc: false
|
||||
|
||||
## Comments
|
||||
|
||||
The global switch of comments is defined by variable `comments.active` in the file `_config.yml`{: .filepath}. After selecting a comment system for this variable, comments will be turned on for all posts.
|
||||
The global setting for comments is defined by the `comments.provider` option in the `_config.yml`{: .filepath} file. Once a comment system is selected for this variable, comments will be enabled for all posts.
|
||||
|
||||
If you want to close the comment for a specific post, add the following to the **Front Matter** of the post:
|
||||
|
||||
@@ -227,7 +227,6 @@ image:
|
||||
```
|
||||
|
||||
Note that the [`media_subpath`](#url-prefix) can also be passed to the preview image, that is, when it has been set, the attribute `path` only needs the image file name.
|
||||
Additionally, `image.show_image_in_post` can be added and set to `false` which will hide the image from being displayed at the top of the post. However, the image will still be displayed on the homepage next to the post and whenever sharing the post in social media. `image.show_image_in_post` is `true` by default.
|
||||
|
||||
For simple use, you can also just use `image` to define the path.
|
||||
|
||||
|
||||
@@ -68,7 +68,7 @@ For Unix-like systems, you can set up the environment natively for optimal perfo
|
||||
To run the site locally, use the following command:
|
||||
|
||||
```terminal
|
||||
$ bundle exec jekyll s
|
||||
$ bundle exec jekyll serve
|
||||
```
|
||||
|
||||
> If you are using Dev Containers, you must run that command in the **VS Code** Terminal.
|
||||
@@ -93,8 +93,6 @@ Social contact options are displayed at the bottom of the sidebar. You can enabl
|
||||
|
||||
To customize the stylesheet, copy the theme's `assets/css/jekyll-theme-chirpy.scss`{: .filepath} file to the same path in your Jekyll site, and add your custom styles at the end of the file.
|
||||
|
||||
Starting with version `6.2.0`, if you want to overwrite the SASS variables defined in `_sass/addon/variables.scss`{: .filepath}, copy the main SASS file `_sass/main.scss`{: .filepath} to the `_sass`{: .filepath} directory in your site's source, then create a new file `_sass/variables-hook.scss`{: .filepath} and assign your new values there.
|
||||
|
||||
### Customizing Static Assets
|
||||
|
||||
Static assets configuration was introduced in version `5.1.0`. The CDN of the static assets is defined in `_data/origin/cors.yml`{: .filepath }. You can replace some of them based on the network conditions in the region where your website is published.
|
||||
|
||||
73
_sass/abstracts/_breakpoints.scss
Normal file
73
_sass/abstracts/_breakpoints.scss
Normal file
@@ -0,0 +1,73 @@
|
||||
@use 'sass:map';
|
||||
|
||||
$-breakpoints: (
|
||||
// 1 column
|
||||
sm: 576px,
|
||||
md: 768px,
|
||||
// 2 columns
|
||||
lg: 850px,
|
||||
// 3 columns
|
||||
xl: 1200px,
|
||||
xxl: 1400px,
|
||||
xxxl: 1650px
|
||||
);
|
||||
|
||||
@function get($breakpoint) {
|
||||
@return map.get($-breakpoints, $breakpoint);
|
||||
}
|
||||
|
||||
/* Less than the given width */
|
||||
@mixin lt($width) {
|
||||
@media all and (max-width: calc(#{$width} - 1px)) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
/* Less than or equal to the given width */
|
||||
@mixin lte($width) {
|
||||
@media all and (max-width: $width) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin sm {
|
||||
@media all and (min-width: get(sm)) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin md {
|
||||
@media all and (min-width: get(md)) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin lg {
|
||||
@media all and (min-width: get(lg)) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin xl {
|
||||
@media all and (min-width: get(xl)) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin xxl {
|
||||
@media all and (min-width: get(xxl)) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin xxxl {
|
||||
@media all and (min-width: get(xxxl)) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin between($min, $max) {
|
||||
@media all and (min-width: $min) and (max-width: $max) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
4
_sass/abstracts/_index.scss
Normal file
4
_sass/abstracts/_index.scss
Normal file
@@ -0,0 +1,4 @@
|
||||
@forward 'variables';
|
||||
@forward 'mixins';
|
||||
@forward 'placeholders';
|
||||
@forward 'breakpoints';
|
||||
80
_sass/abstracts/_mixins.scss
Normal file
80
_sass/abstracts/_mixins.scss
Normal file
@@ -0,0 +1,80 @@
|
||||
@mixin text-ellipsis {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
@mixin mt-mb($value) {
|
||||
margin-top: $value;
|
||||
margin-bottom: $value;
|
||||
}
|
||||
|
||||
@mixin ml-mr($value) {
|
||||
margin-left: $value;
|
||||
margin-right: $value;
|
||||
}
|
||||
|
||||
@mixin pt-pb($val) {
|
||||
padding-top: $val;
|
||||
padding-bottom: $val;
|
||||
}
|
||||
|
||||
@mixin pl-pr($val, $important: false) {
|
||||
@if $important {
|
||||
padding-left: $val !important;
|
||||
padding-right: $val !important;
|
||||
} @else {
|
||||
padding-left: $val;
|
||||
padding-right: $val;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin placeholder {
|
||||
color: var(--text-muted-color) !important;
|
||||
}
|
||||
|
||||
@mixin placeholder-focus {
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
@mixin label($font-size: 1rem, $font-weight: 600, $color: var(--label-color)) {
|
||||
color: $color;
|
||||
font-size: $font-size;
|
||||
font-weight: $font-weight;
|
||||
}
|
||||
|
||||
@mixin align-center {
|
||||
position: relative;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
@mixin prompt($type, $fa-content, $fa-style: 'solid', $rotate: 0) {
|
||||
&.prompt-#{$type} {
|
||||
background-color: var(--prompt-#{$type}-bg);
|
||||
|
||||
&::before {
|
||||
content: $fa-content;
|
||||
color: var(--prompt-#{$type}-icon-color);
|
||||
font: var(--fa-font-#{$fa-style});
|
||||
|
||||
@if $rotate != 0 {
|
||||
transform: rotate(#{$rotate}deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin slide($append: null) {
|
||||
$basic: transform 0.4s ease;
|
||||
|
||||
@if $append {
|
||||
transition: $basic, $append;
|
||||
} @else {
|
||||
transition: $basic;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin max-w-100 {
|
||||
max-width: 100%;
|
||||
}
|
||||
@@ -1,13 +1,10 @@
|
||||
/*
|
||||
* Mainly scss modules, only imported to `assets/css/main.scss`
|
||||
*/
|
||||
|
||||
/* ---------- scss placeholder --------- */
|
||||
@use 'variables' as v;
|
||||
@use 'mixins' as mx;
|
||||
|
||||
%heading {
|
||||
color: var(--heading-color);
|
||||
font-weight: 400;
|
||||
font-family: $font-family-heading;
|
||||
font-family: v.$font-family-heading;
|
||||
scroll-margin-top: 3.5rem;
|
||||
}
|
||||
|
||||
@@ -34,7 +31,10 @@
|
||||
}
|
||||
|
||||
%tag-hover {
|
||||
@extend %link-color;
|
||||
|
||||
background: var(--tag-hover);
|
||||
border-color: var(--tag-hover);
|
||||
transition: background 0.35s ease-in-out;
|
||||
}
|
||||
|
||||
@@ -82,7 +82,7 @@
|
||||
}
|
||||
|
||||
%rounded {
|
||||
border-radius: $radius-lg;
|
||||
border-radius: v.$radius-lg;
|
||||
}
|
||||
|
||||
%img-caption {
|
||||
@@ -112,14 +112,8 @@
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
|
||||
@mixin text-ellipsis {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
%text-ellipsis {
|
||||
@include text-ellipsis;
|
||||
@include mx.text-ellipsis;
|
||||
}
|
||||
|
||||
%text-highlight {
|
||||
@@ -151,65 +145,19 @@
|
||||
}
|
||||
}
|
||||
|
||||
/* ---------- scss mixin --------- */
|
||||
|
||||
@mixin mt-mb($value) {
|
||||
margin-top: $value;
|
||||
margin-bottom: $value;
|
||||
%code-snippet-bg {
|
||||
background-color: var(--highlight-bg-color);
|
||||
}
|
||||
|
||||
@mixin ml-mr($value) {
|
||||
margin-left: $value;
|
||||
margin-right: $value;
|
||||
%code-snippet-padding {
|
||||
padding-left: 1rem;
|
||||
padding-right: 1.5rem;
|
||||
}
|
||||
|
||||
@mixin pt-pb($val) {
|
||||
padding-top: $val;
|
||||
padding-bottom: $val;
|
||||
%max-w-100 {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
@mixin pl-pr($val, $important: false) {
|
||||
@if $important {
|
||||
padding-left: $val !important;
|
||||
padding-right: $val !important;
|
||||
} @else {
|
||||
padding-left: $val;
|
||||
padding-right: $val;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin placeholder {
|
||||
color: var(--text-muted-color) !important;
|
||||
}
|
||||
|
||||
@mixin placeholder-focus {
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
@mixin label($font-size: 1rem, $font-weight: 600, $color: var(--label-color)) {
|
||||
color: $color;
|
||||
font-size: $font-size;
|
||||
font-weight: $font-weight;
|
||||
}
|
||||
|
||||
@mixin align-center {
|
||||
position: relative;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
@mixin prompt($type, $fa-content, $fa-style: 'solid', $rotate: 0) {
|
||||
&.prompt-#{$type} {
|
||||
background-color: var(--prompt-#{$type}-bg);
|
||||
|
||||
&::before {
|
||||
content: $fa-content;
|
||||
color: var(--prompt-#{$type}-icon-color);
|
||||
font: var(--fa-font-#{$fa-style});
|
||||
|
||||
@if $rotate != 0 {
|
||||
transform: rotate(#{$rotate}deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
%panel-border {
|
||||
border-left: 1px solid var(--main-border-color);
|
||||
}
|
||||
@@ -1,7 +1,3 @@
|
||||
/*
|
||||
* The SCSS variables
|
||||
*/
|
||||
|
||||
/* sidebar */
|
||||
|
||||
$sidebar-width: 260px !default; /* the basic width */
|
||||
File diff suppressed because it is too large
Load Diff
476
_sass/base/_base.scss
Normal file
476
_sass/base/_base.scss
Normal file
@@ -0,0 +1,476 @@
|
||||
@use '../abstracts/variables' as v;
|
||||
@use '../abstracts/breakpoints' as bp;
|
||||
@use '../abstracts/mixins' as mx;
|
||||
@use '../abstracts/placeholders';
|
||||
@use '../themes/light';
|
||||
@use '../themes/dark';
|
||||
|
||||
:root {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
html {
|
||||
@media (prefers-color-scheme: light) {
|
||||
&:not([data-mode]),
|
||||
&[data-mode='light'] {
|
||||
@include light.styles;
|
||||
}
|
||||
|
||||
&[data-mode='dark'] {
|
||||
@include dark.styles;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
&:not([data-mode]),
|
||||
&[data-mode='dark'] {
|
||||
@include dark.styles;
|
||||
}
|
||||
|
||||
&[data-mode='light'] {
|
||||
@include light.styles;
|
||||
}
|
||||
}
|
||||
|
||||
@include bp.lg {
|
||||
overflow-y: scroll;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
background: var(--main-bg);
|
||||
padding: env(safe-area-inset-top) env(safe-area-inset-right)
|
||||
env(safe-area-inset-bottom) env(safe-area-inset-left);
|
||||
color: var(--text-color);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
font-family: v.$font-family-base;
|
||||
}
|
||||
|
||||
h1.dynamic-title {
|
||||
@include bp.lt(bp.get(lg)) {
|
||||
display: none;
|
||||
|
||||
~ .content {
|
||||
margin-top: 2.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
main {
|
||||
&.col-12 {
|
||||
@include bp.xxxl {
|
||||
padding-right: 4.5rem !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.preview-img {
|
||||
aspect-ratio: 40 / 21;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
|
||||
@extend %rounded;
|
||||
|
||||
&:not(.no-bg) {
|
||||
background: var(--img-bg);
|
||||
}
|
||||
|
||||
img {
|
||||
height: 100%;
|
||||
-o-object-fit: cover;
|
||||
object-fit: cover;
|
||||
|
||||
@extend %rounded;
|
||||
|
||||
@at-root #post-list & {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.post-preview {
|
||||
@extend %rounded;
|
||||
|
||||
border: 0;
|
||||
background: var(--card-bg);
|
||||
box-shadow: var(--card-shadow);
|
||||
|
||||
&::before {
|
||||
@extend %rounded;
|
||||
|
||||
content: '';
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
background-color: var(--card-hovor-bg);
|
||||
opacity: 0;
|
||||
transition: opacity 0.35s ease-in-out;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
&::before {
|
||||
opacity: 0.3;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.post-meta {
|
||||
@extend %text-sm;
|
||||
|
||||
a {
|
||||
&:not([class]):hover {
|
||||
@extend %link-hover;
|
||||
}
|
||||
}
|
||||
|
||||
em {
|
||||
@extend %normal-font-style;
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
font-size: 1.08rem;
|
||||
margin-top: 2rem;
|
||||
overflow-wrap: break-word;
|
||||
|
||||
@include bp.xl {
|
||||
font-size: 1.03rem;
|
||||
}
|
||||
|
||||
a {
|
||||
&.popup {
|
||||
@extend %no-cursor;
|
||||
@extend %img-caption;
|
||||
@include mx.mt-mb(0.5rem);
|
||||
|
||||
cursor: zoom-in;
|
||||
}
|
||||
|
||||
&:not(.img-link) {
|
||||
@extend %link-underline;
|
||||
|
||||
&:hover {
|
||||
@extend %link-hover;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ol,
|
||||
ul {
|
||||
&:not([class]),
|
||||
&.task-list {
|
||||
-webkit-padding-start: 1.75rem;
|
||||
padding-inline-start: 1.75rem;
|
||||
|
||||
li {
|
||||
margin: 0.25rem 0;
|
||||
padding-left: 0.25rem;
|
||||
}
|
||||
|
||||
ol,
|
||||
ul {
|
||||
-webkit-padding-start: 1.25rem;
|
||||
padding-inline-start: 1.25rem;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ul.task-list {
|
||||
-webkit-padding-start: 1.25rem;
|
||||
padding-inline-start: 1.25rem;
|
||||
|
||||
li {
|
||||
list-style-type: none;
|
||||
padding-left: 0;
|
||||
|
||||
/* checkbox icon */
|
||||
> i {
|
||||
width: 2rem;
|
||||
margin-left: -1.25rem;
|
||||
color: var(--checkbox-color);
|
||||
|
||||
&.checked {
|
||||
color: var(--checkbox-checked-color);
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
-webkit-padding-start: 1.75rem;
|
||||
padding-inline-start: 1.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
input[type='checkbox'] {
|
||||
margin: 0 0.5rem 0.2rem -1.3rem;
|
||||
vertical-align: middle;
|
||||
}
|
||||
} /* ul */
|
||||
|
||||
dl > dd {
|
||||
margin-left: 1rem;
|
||||
}
|
||||
|
||||
::marker {
|
||||
color: var(--text-muted-color);
|
||||
}
|
||||
|
||||
.table-wrapper > table {
|
||||
@include bp.lg {
|
||||
min-width: 70%;
|
||||
}
|
||||
}
|
||||
} /* .content */
|
||||
|
||||
.tag:hover {
|
||||
@extend %tag-hover;
|
||||
}
|
||||
|
||||
.post-tag {
|
||||
display: inline-block;
|
||||
min-width: 2rem;
|
||||
text-align: center;
|
||||
border-radius: 0.5rem;
|
||||
border: 1px solid var(--btn-border-color);
|
||||
padding: 0 0.4rem;
|
||||
color: var(--text-muted-color);
|
||||
line-height: 1.3rem;
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-right: 0.2rem;
|
||||
}
|
||||
}
|
||||
|
||||
.rounded-10 {
|
||||
border-radius: 10px !important;
|
||||
}
|
||||
|
||||
.img-link {
|
||||
color: transparent;
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
.shimmer {
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
background: var(--img-bg);
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
background: var(--shimmer-bg);
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
-webkit-animation: shimmer 1.3s infinite;
|
||||
animation: shimmer 1.3s infinite;
|
||||
}
|
||||
|
||||
@-webkit-keyframes shimmer {
|
||||
0% {
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translateX(100%);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes shimmer {
|
||||
0% {
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translateX(100%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.embed-video {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin-bottom: 1rem;
|
||||
aspect-ratio: 16 / 9;
|
||||
|
||||
@extend %rounded;
|
||||
|
||||
&.twitch {
|
||||
aspect-ratio: 310 / 189;
|
||||
}
|
||||
|
||||
&.file {
|
||||
display: block;
|
||||
width: auto;
|
||||
height: auto;
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
margin: auto;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
@extend %img-caption;
|
||||
}
|
||||
|
||||
.embed-audio {
|
||||
width: 100%;
|
||||
display: block;
|
||||
|
||||
@extend %img-caption;
|
||||
}
|
||||
|
||||
/* --- Effects classes --- */
|
||||
|
||||
.flex-grow-1 {
|
||||
flex-grow: 1 !important;
|
||||
}
|
||||
|
||||
.btn-box-shadow {
|
||||
box-shadow: var(--card-shadow);
|
||||
}
|
||||
|
||||
/* overwrite bootstrap muted */
|
||||
.text-muted {
|
||||
color: var(--text-muted-color) !important;
|
||||
}
|
||||
|
||||
/* Overwrite bootstrap tooltip */
|
||||
.tooltip-inner {
|
||||
font-size: 0.7rem;
|
||||
max-width: 220px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
/* Overwrite bootstrap outline button */
|
||||
.btn.btn-outline-primary {
|
||||
&:not(.disabled):hover {
|
||||
border-color: #007bff !important;
|
||||
}
|
||||
}
|
||||
|
||||
.disabled {
|
||||
color: rgb(206, 196, 196);
|
||||
pointer-events: auto;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.hide-border-bottom {
|
||||
border-bottom: none !important;
|
||||
}
|
||||
|
||||
.input-focus {
|
||||
box-shadow: none;
|
||||
border-color: var(--input-focus-border-color) !important;
|
||||
background: center !important;
|
||||
transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
|
||||
}
|
||||
|
||||
.left {
|
||||
float: left;
|
||||
margin: 0.75rem 1rem 1rem 0;
|
||||
}
|
||||
|
||||
.right {
|
||||
float: right;
|
||||
margin: 0.75rem 0 1rem 1rem;
|
||||
}
|
||||
|
||||
/* --- Overriding --- */
|
||||
|
||||
/* mermaid */
|
||||
.mermaid {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* MathJax */
|
||||
mjx-container {
|
||||
overflow-y: hidden;
|
||||
min-width: auto !important;
|
||||
}
|
||||
|
||||
@media (hover: hover) {
|
||||
#sidebar ul > li:last-child::after {
|
||||
transition: top 0.5s ease;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
transition: background-color 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
.post-preview {
|
||||
transition: background-color 0.35s ease-in-out;
|
||||
}
|
||||
}
|
||||
|
||||
#mask {
|
||||
inset: 0 0 0 0;
|
||||
}
|
||||
|
||||
#main-wrapper {
|
||||
position: relative;
|
||||
|
||||
@include mx.pl-pr(0);
|
||||
|
||||
@include bp.lt(bp.get(lg)) {
|
||||
@include mx.slide;
|
||||
}
|
||||
|
||||
@include bp.lg {
|
||||
margin-left: v.$sidebar-width;
|
||||
}
|
||||
|
||||
@include bp.xxxl {
|
||||
margin-left: v.$sidebar-width-large;
|
||||
}
|
||||
|
||||
> .container {
|
||||
min-height: 100vh;
|
||||
|
||||
@include bp.lte(bp.get(md)) {
|
||||
@include mx.max-w-100;
|
||||
@include mx.pl-pr(0);
|
||||
}
|
||||
|
||||
@include bp.lt(bp.get(lg)) {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
/* Pad horizontal */
|
||||
@include bp.between(992px, calc(#{bp.get(xl)} - 1px)) {
|
||||
.col-lg-11 {
|
||||
flex: 0 0 96%;
|
||||
max-width: 96%;
|
||||
}
|
||||
}
|
||||
|
||||
@include bp.lt(bp.get(xl)) {
|
||||
> .row {
|
||||
justify-content: center !important;
|
||||
}
|
||||
}
|
||||
|
||||
@include bp.xxxl {
|
||||
max-width: v.$main-content-max-width;
|
||||
|
||||
@include mx.pl-pr(1.75rem, true);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* --- basic wrappers --- */
|
||||
|
||||
#topbar-wrapper.row,
|
||||
#main-wrapper > .container > .row,
|
||||
#search-result-wrapper > .row {
|
||||
@include mx.ml-mr(0);
|
||||
}
|
||||
|
||||
#tail-wrapper {
|
||||
@include bp.xxxl {
|
||||
padding-right: 4.5rem !important;
|
||||
}
|
||||
|
||||
> :not(script) {
|
||||
margin-top: 3rem;
|
||||
}
|
||||
}
|
||||
4
_sass/base/_index.scss
Normal file
4
_sass/base/_index.scss
Normal file
@@ -0,0 +1,4 @@
|
||||
@forward 'reset';
|
||||
@forward 'base';
|
||||
@forward 'typography';
|
||||
@forward 'syntax';
|
||||
41
_sass/base/_reset.scss
Normal file
41
_sass/base/_reset.scss
Normal file
@@ -0,0 +1,41 @@
|
||||
@use '../abstracts/mixins' as *;
|
||||
|
||||
::-webkit-input-placeholder {
|
||||
@include placeholder;
|
||||
}
|
||||
|
||||
::-moz-placeholder {
|
||||
@include placeholder;
|
||||
}
|
||||
|
||||
:-ms-input-placeholder {
|
||||
@include placeholder;
|
||||
}
|
||||
|
||||
::-ms-input-placeholder {
|
||||
@include placeholder;
|
||||
}
|
||||
|
||||
::placeholder {
|
||||
@include placeholder;
|
||||
}
|
||||
|
||||
:focus::-webkit-input-placeholder {
|
||||
@include placeholder-focus;
|
||||
}
|
||||
|
||||
:focus::-moz-placeholder {
|
||||
@include placeholder-focus;
|
||||
}
|
||||
|
||||
:focus:-ms-input-placeholder {
|
||||
@include placeholder-focus;
|
||||
}
|
||||
|
||||
:focus::-ms-input-placeholder {
|
||||
@include placeholder-focus;
|
||||
}
|
||||
|
||||
:focus::placeholder {
|
||||
@include placeholder-focus;
|
||||
}
|
||||
@@ -1,44 +1,7 @@
|
||||
/*
|
||||
* The syntax highlight.
|
||||
*/
|
||||
|
||||
@import 'colors/syntax-light';
|
||||
@import 'colors/syntax-dark';
|
||||
|
||||
html {
|
||||
@media (prefers-color-scheme: light) {
|
||||
&:not([data-mode]),
|
||||
&[data-mode='light'] {
|
||||
@include light-syntax;
|
||||
}
|
||||
|
||||
&[data-mode='dark'] {
|
||||
@include dark-syntax;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
&:not([data-mode]),
|
||||
&[data-mode='dark'] {
|
||||
@include dark-syntax;
|
||||
}
|
||||
|
||||
&[data-mode='light'] {
|
||||
@include light-syntax;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* -- code snippets -- */
|
||||
|
||||
%code-snippet-bg {
|
||||
background-color: var(--highlight-bg-color);
|
||||
}
|
||||
|
||||
%code-snippet-padding {
|
||||
padding-left: 1rem;
|
||||
padding-right: 1.5rem;
|
||||
}
|
||||
@use '../abstracts/variables' as v;
|
||||
@use '../abstracts/breakpoints' as bp;
|
||||
@use '../abstracts/mixins' as mx;
|
||||
@use '../abstracts/placeholders';
|
||||
|
||||
.highlighter-rouge {
|
||||
color: var(--highlighter-rouge-color);
|
||||
@@ -59,7 +22,7 @@ html {
|
||||
|
||||
pre {
|
||||
margin-bottom: 0;
|
||||
font-size: $code-font-size;
|
||||
font-size: v.$code-font-size;
|
||||
line-height: 1.4rem;
|
||||
word-wrap: normal; /* Fixed Safari overflow-x */
|
||||
}
|
||||
@@ -101,10 +64,10 @@ code {
|
||||
color: var(--code-color);
|
||||
|
||||
&.highlighter-rouge {
|
||||
font-size: $code-font-size;
|
||||
font-size: v.$code-font-size;
|
||||
padding: 3px 5px;
|
||||
word-break: break-word;
|
||||
border-radius: $radius-sm;
|
||||
border-radius: v.$radius-sm;
|
||||
background-color: var(--inline-code-bg);
|
||||
}
|
||||
|
||||
@@ -150,9 +113,42 @@ div[class^='language-'] {
|
||||
box-shadow: var(--language-border-color) 0 0 0 1px;
|
||||
|
||||
.content > & {
|
||||
@include ml-mr(-1rem);
|
||||
@include mx.ml-mr(-1rem);
|
||||
|
||||
border-radius: 0;
|
||||
|
||||
@include bp.sm {
|
||||
@include mx.ml-mr(0);
|
||||
|
||||
border-radius: v.$radius-lg;
|
||||
}
|
||||
}
|
||||
|
||||
.code-header {
|
||||
@include bp.sm {
|
||||
@include mx.ml-mr(0);
|
||||
|
||||
$dot-margin: 1rem;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
margin-left: $dot-margin;
|
||||
width: v.$code-dot-size;
|
||||
height: v.$code-dot-size;
|
||||
border-radius: 50%;
|
||||
background-color: var(--code-header-muted-color);
|
||||
box-shadow: (v.$code-dot-size + v.$code-dot-gap) 0 0
|
||||
var(--code-header-muted-color),
|
||||
(v.$code-dot-size + v.$code-dot-gap) * 2 0 0
|
||||
var(--code-header-muted-color);
|
||||
}
|
||||
|
||||
span {
|
||||
// center the text of label
|
||||
margin-left: calc(($dot-margin + v.$code-dot-size) / 2 * -1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.highlight {
|
||||
@@ -184,18 +180,18 @@ div {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
height: $code-header-height;
|
||||
height: v.$code-header-height;
|
||||
margin-left: 0.75rem;
|
||||
margin-right: 0.25rem;
|
||||
|
||||
/* the label block */
|
||||
span {
|
||||
line-height: $code-header-height;
|
||||
line-height: v.$code-header-height;
|
||||
|
||||
/* label icon */
|
||||
i {
|
||||
font-size: 1rem;
|
||||
width: $code-icon-width;
|
||||
width: v.$code-icon-width;
|
||||
color: var(--code-header-icon-color);
|
||||
|
||||
&.small {
|
||||
@@ -223,8 +219,8 @@ div {
|
||||
@extend %rounded;
|
||||
|
||||
border: 1px solid transparent;
|
||||
height: $code-header-height;
|
||||
width: $code-header-height;
|
||||
height: v.$code-header-height;
|
||||
width: v.$code-header-height;
|
||||
padding: 0;
|
||||
background-color: inherit;
|
||||
|
||||
@@ -255,38 +251,3 @@ div {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (min-width: 576px) {
|
||||
div[class^='language-'] {
|
||||
.content > & {
|
||||
@include ml-mr(0);
|
||||
|
||||
border-radius: $radius-lg;
|
||||
}
|
||||
|
||||
.code-header {
|
||||
@include ml-mr(0);
|
||||
|
||||
$dot-margin: 1rem;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
margin-left: $dot-margin;
|
||||
width: $code-dot-size;
|
||||
height: $code-dot-size;
|
||||
border-radius: 50%;
|
||||
background-color: var(--code-header-muted-color);
|
||||
box-shadow: ($code-dot-size + $code-dot-gap) 0 0
|
||||
var(--code-header-muted-color),
|
||||
($code-dot-size + $code-dot-gap) * 2 0 0
|
||||
var(--code-header-muted-color);
|
||||
}
|
||||
|
||||
span {
|
||||
// center the text of label
|
||||
margin-left: calc(($dot-margin + $code-dot-size) / 2 * -1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
266
_sass/base/_typography.scss
Normal file
266
_sass/base/_typography.scss
Normal file
@@ -0,0 +1,266 @@
|
||||
@use '../abstracts/variables' as v;
|
||||
@use '../abstracts/breakpoints' as bp;
|
||||
@use '../abstracts/mixins' as mx;
|
||||
@use '../abstracts/placeholders';
|
||||
|
||||
@for $i from 1 through 5 {
|
||||
h#{$i} {
|
||||
@extend %heading;
|
||||
|
||||
@if $i > 1 {
|
||||
@extend %anchor;
|
||||
}
|
||||
|
||||
@if $i < 5 {
|
||||
$size-factor: 0.25rem;
|
||||
|
||||
@if $i > 1 {
|
||||
$size-factor: 0.18rem;
|
||||
|
||||
main & {
|
||||
@if $i == 2 {
|
||||
margin: 2.5rem 0 1.25rem;
|
||||
} @else {
|
||||
margin: 2rem 0 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
& {
|
||||
font-size: 1rem + (5 - $i) * $size-factor;
|
||||
}
|
||||
} @else {
|
||||
font-size: 1.05rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
@extend %link-color;
|
||||
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
transition: all 0.35s ease-in-out;
|
||||
|
||||
.blur & {
|
||||
$blur: 20px;
|
||||
|
||||
-webkit-filter: blur($blur);
|
||||
filter: blur($blur);
|
||||
}
|
||||
}
|
||||
|
||||
blockquote {
|
||||
border-left: 0.125rem solid var(--blockquote-border-color);
|
||||
padding-left: 1rem;
|
||||
color: var(--blockquote-text-color);
|
||||
margin-top: 0.5rem;
|
||||
|
||||
> p:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
&[class^='prompt-'] {
|
||||
border-left: 0;
|
||||
position: relative;
|
||||
padding: 1rem 1rem 1rem 3rem;
|
||||
color: var(--prompt-text-color);
|
||||
|
||||
@extend %rounded;
|
||||
|
||||
&::before {
|
||||
text-align: center;
|
||||
width: 3rem;
|
||||
position: absolute;
|
||||
left: 0.25rem;
|
||||
margin-top: 0.4rem;
|
||||
text-rendering: auto;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
}
|
||||
|
||||
@include mx.prompt('tip', '\f0eb', $fa-style: 'regular');
|
||||
@include mx.prompt('info', '\f06a', $rotate: 180);
|
||||
@include mx.prompt('warning', '\f06a');
|
||||
@include mx.prompt('danger', '\f071');
|
||||
}
|
||||
|
||||
kbd {
|
||||
font-family: Lato, sans-serif;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
line-height: 1.3rem;
|
||||
min-width: 1.75rem;
|
||||
text-align: center;
|
||||
margin: 0 0.3rem;
|
||||
padding-top: 0.1rem;
|
||||
color: var(--kbd-text-color);
|
||||
background-color: var(--kbd-bg-color);
|
||||
border-radius: v.$radius-sm;
|
||||
border: solid 1px var(--kbd-wrap-color);
|
||||
box-shadow: inset 0 -2px 0 var(--kbd-wrap-color);
|
||||
}
|
||||
|
||||
hr {
|
||||
border-color: var(--main-border-color);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
footer {
|
||||
background-color: var(--main-bg);
|
||||
height: v.$footer-height;
|
||||
border-top: 1px solid var(--main-border-color);
|
||||
|
||||
@extend %text-xs;
|
||||
|
||||
a {
|
||||
@extend %text-highlight;
|
||||
|
||||
&:hover {
|
||||
@extend %link-hover;
|
||||
}
|
||||
}
|
||||
|
||||
em {
|
||||
@extend %text-highlight;
|
||||
}
|
||||
|
||||
p {
|
||||
text-align: center;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* fontawesome icons */
|
||||
i {
|
||||
&.far,
|
||||
&.fas {
|
||||
@extend %no-cursor;
|
||||
}
|
||||
}
|
||||
|
||||
sup {
|
||||
@extend %sup-fn-target;
|
||||
}
|
||||
|
||||
main {
|
||||
line-height: 1.75;
|
||||
|
||||
h1 {
|
||||
margin-top: 2rem;
|
||||
|
||||
@include bp.lg {
|
||||
margin-top: 3rem;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
> a.popup {
|
||||
&:not(.normal):not(.left):not(.right) {
|
||||
@include mx.align-center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.categories,
|
||||
#tags,
|
||||
#archives {
|
||||
a:not(:hover) {
|
||||
@extend %no-bottom-border;
|
||||
}
|
||||
}
|
||||
|
||||
@include bp.lte(bp.get(sm)) {
|
||||
.content {
|
||||
> blockquote[class^='prompt-'] {
|
||||
@include mx.ml-mr(-1rem);
|
||||
|
||||
border-radius: 0;
|
||||
max-width: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.footnotes > ol {
|
||||
padding-left: 2rem;
|
||||
margin-top: 0.5rem;
|
||||
|
||||
> li {
|
||||
&:not(:last-child) {
|
||||
margin-bottom: 0.3rem;
|
||||
}
|
||||
|
||||
@extend %sup-fn-target;
|
||||
|
||||
> p {
|
||||
margin-left: 0.25em;
|
||||
|
||||
@include mx.mt-mb(0);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.footnote {
|
||||
@at-root a#{&} {
|
||||
@include mx.ml-mr(1px);
|
||||
@include mx.pl-pr(2px);
|
||||
|
||||
border-bottom-style: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.reversefootnote {
|
||||
@at-root a#{&} {
|
||||
font-size: 0.6rem;
|
||||
line-height: 1;
|
||||
position: relative;
|
||||
bottom: 0.25em;
|
||||
margin-left: 0.25em;
|
||||
border-bottom-style: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* --- Begin of Markdown table style --- */
|
||||
|
||||
/* it will be created by Liquid */
|
||||
.table-wrapper {
|
||||
overflow-x: auto;
|
||||
margin-bottom: 1.5rem;
|
||||
|
||||
> table {
|
||||
min-width: 100%;
|
||||
overflow-x: auto;
|
||||
border-spacing: 0;
|
||||
|
||||
thead {
|
||||
border-bottom: solid 2px rgba(210, 215, 217, 0.75);
|
||||
|
||||
th {
|
||||
@extend %table-cell;
|
||||
}
|
||||
}
|
||||
|
||||
tbody {
|
||||
tr {
|
||||
border-bottom: 1px solid var(--tb-border-color);
|
||||
|
||||
&:nth-child(2n) {
|
||||
background-color: var(--tb-even-bg);
|
||||
}
|
||||
|
||||
&:nth-child(2n + 1) {
|
||||
background-color: var(--tb-odd-bg);
|
||||
}
|
||||
|
||||
td {
|
||||
@extend %table-cell;
|
||||
}
|
||||
}
|
||||
} /* tbody */
|
||||
} /* table */
|
||||
}
|
||||
@@ -1,164 +0,0 @@
|
||||
/*
|
||||
* The syntax dark mode styles.
|
||||
*/
|
||||
|
||||
@mixin dark-syntax {
|
||||
--language-border-color: #2d2d2d;
|
||||
--highlight-bg-color: #151515;
|
||||
--highlighter-rouge-color: #c9def1;
|
||||
--highlight-lineno-color: #808080;
|
||||
--inline-code-bg: rgba(255, 255, 255, 0.05);
|
||||
--code-color: #b0b0b0;
|
||||
--code-header-text-color: #6a6a6a;
|
||||
--code-header-muted-color: #353535;
|
||||
--code-header-icon-color: #565656;
|
||||
--clipboard-checked-color: #2bcc2b;
|
||||
--filepath-text-color: #cacaca;
|
||||
|
||||
.highlight .gp {
|
||||
color: #87939d;
|
||||
}
|
||||
|
||||
/* --- Syntax highlight theme from `rougify style base16.dark` --- */
|
||||
|
||||
.highlight table td {
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.highlight table pre {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.highlight,
|
||||
.highlight .w {
|
||||
color: #d0d0d0;
|
||||
background-color: #151515;
|
||||
}
|
||||
|
||||
.highlight .err {
|
||||
color: #151515;
|
||||
background-color: #ac4142;
|
||||
}
|
||||
|
||||
.highlight .c,
|
||||
.highlight .ch,
|
||||
.highlight .cd,
|
||||
.highlight .cm,
|
||||
.highlight .cpf,
|
||||
.highlight .c1,
|
||||
.highlight .cs {
|
||||
color: #848484;
|
||||
}
|
||||
|
||||
.highlight .cp {
|
||||
color: #f4bf75;
|
||||
}
|
||||
|
||||
.highlight .nt {
|
||||
color: #f4bf75;
|
||||
}
|
||||
|
||||
.highlight .o,
|
||||
.highlight .ow {
|
||||
color: #d0d0d0;
|
||||
}
|
||||
|
||||
.highlight .p,
|
||||
.highlight .pi {
|
||||
color: #d0d0d0;
|
||||
}
|
||||
|
||||
.highlight .gi {
|
||||
color: #90a959;
|
||||
}
|
||||
|
||||
.highlight .gd {
|
||||
color: #f08a8b;
|
||||
background-color: #320000;
|
||||
}
|
||||
|
||||
.highlight .gh {
|
||||
color: #6a9fb5;
|
||||
background-color: #151515;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.highlight .k,
|
||||
.highlight .kn,
|
||||
.highlight .kp,
|
||||
.highlight .kr,
|
||||
.highlight .kv {
|
||||
color: #aa759f;
|
||||
}
|
||||
|
||||
.highlight .kc {
|
||||
color: #d28445;
|
||||
}
|
||||
|
||||
.highlight .kt {
|
||||
color: #d28445;
|
||||
}
|
||||
|
||||
.highlight .kd {
|
||||
color: #d28445;
|
||||
}
|
||||
|
||||
.highlight .s,
|
||||
.highlight .sb,
|
||||
.highlight .sc,
|
||||
.highlight .dl,
|
||||
.highlight .sd,
|
||||
.highlight .s2,
|
||||
.highlight .sh,
|
||||
.highlight .sx,
|
||||
.highlight .s1 {
|
||||
color: #90a959;
|
||||
}
|
||||
|
||||
.highlight .sa {
|
||||
color: #aa759f;
|
||||
}
|
||||
|
||||
.highlight .sr {
|
||||
color: #75b5aa;
|
||||
}
|
||||
|
||||
.highlight .si {
|
||||
color: #b76d45;
|
||||
}
|
||||
|
||||
.highlight .se {
|
||||
color: #b76d45;
|
||||
}
|
||||
|
||||
.highlight .nn {
|
||||
color: #f4bf75;
|
||||
}
|
||||
|
||||
.highlight .nc {
|
||||
color: #f4bf75;
|
||||
}
|
||||
|
||||
.highlight .no {
|
||||
color: #f4bf75;
|
||||
}
|
||||
|
||||
.highlight .na {
|
||||
color: #6a9fb5;
|
||||
}
|
||||
|
||||
.highlight .m,
|
||||
.highlight .mb,
|
||||
.highlight .mf,
|
||||
.highlight .mh,
|
||||
.highlight .mi,
|
||||
.highlight .il,
|
||||
.highlight .mo,
|
||||
.highlight .mx {
|
||||
color: #90a959;
|
||||
}
|
||||
|
||||
.highlight .ss {
|
||||
color: #90a959;
|
||||
}
|
||||
}
|
||||
@@ -1,210 +0,0 @@
|
||||
/*
|
||||
* The syntax light mode code snippet colors.
|
||||
*/
|
||||
|
||||
@mixin light-syntax {
|
||||
/* --- custom light colors --- */
|
||||
--language-border-color: #ececec;
|
||||
--highlight-bg-color: #f6f8fa;
|
||||
--highlighter-rouge-color: #3f596f;
|
||||
--highlight-lineno-color: #9e9e9e;
|
||||
--inline-code-bg: rgba(25, 25, 28, 0.05);
|
||||
--code-color: #3a3a3a;
|
||||
--code-header-text-color: #a3a3a3;
|
||||
--code-header-muted-color: #e5e5e5;
|
||||
--code-header-icon-color: #c9c8c8;
|
||||
--clipboard-checked-color: #43c743;
|
||||
|
||||
/* --- Syntax highlight theme from `rougify style github` --- */
|
||||
|
||||
.highlight table td {
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.highlight table pre {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.highlight,
|
||||
.highlight .w {
|
||||
color: #24292f;
|
||||
background-color: #f6f8fa;
|
||||
}
|
||||
|
||||
.highlight .k,
|
||||
.highlight .kd,
|
||||
.highlight .kn,
|
||||
.highlight .kp,
|
||||
.highlight .kr,
|
||||
.highlight .kt,
|
||||
.highlight .kv {
|
||||
color: #cf222e;
|
||||
}
|
||||
|
||||
.highlight .gr {
|
||||
color: #f6f8fa;
|
||||
}
|
||||
|
||||
.highlight .gd {
|
||||
color: #82071e;
|
||||
background-color: #ffebe9;
|
||||
}
|
||||
|
||||
.highlight .nb {
|
||||
color: #953800;
|
||||
}
|
||||
|
||||
.highlight .nc {
|
||||
color: #953800;
|
||||
}
|
||||
|
||||
.highlight .no {
|
||||
color: #953800;
|
||||
}
|
||||
|
||||
.highlight .nn {
|
||||
color: #953800;
|
||||
}
|
||||
|
||||
.highlight .sr {
|
||||
color: #116329;
|
||||
}
|
||||
|
||||
.highlight .na {
|
||||
color: #116329;
|
||||
}
|
||||
|
||||
.highlight .nt {
|
||||
color: #116329;
|
||||
}
|
||||
|
||||
.highlight .gi {
|
||||
color: #116329;
|
||||
background-color: #dafbe1;
|
||||
}
|
||||
|
||||
.highlight .kc {
|
||||
color: #0550ae;
|
||||
}
|
||||
|
||||
.highlight .l,
|
||||
.highlight .ld,
|
||||
.highlight .m,
|
||||
.highlight .mb,
|
||||
.highlight .mf,
|
||||
.highlight .mh,
|
||||
.highlight .mi,
|
||||
.highlight .il,
|
||||
.highlight .mo,
|
||||
.highlight .mx {
|
||||
color: #0550ae;
|
||||
}
|
||||
|
||||
.highlight .sb {
|
||||
color: #0550ae;
|
||||
}
|
||||
|
||||
.highlight .bp {
|
||||
color: #0550ae;
|
||||
}
|
||||
|
||||
.highlight .ne {
|
||||
color: #0550ae;
|
||||
}
|
||||
|
||||
.highlight .nl {
|
||||
color: #0550ae;
|
||||
}
|
||||
|
||||
.highlight .py {
|
||||
color: #0550ae;
|
||||
}
|
||||
|
||||
.highlight .nv,
|
||||
.highlight .vc,
|
||||
.highlight .vg,
|
||||
.highlight .vi,
|
||||
.highlight .vm {
|
||||
color: #0550ae;
|
||||
}
|
||||
|
||||
.highlight .o,
|
||||
.highlight .ow {
|
||||
color: #0550ae;
|
||||
}
|
||||
|
||||
.highlight .gh {
|
||||
color: #0550ae;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.highlight .gu {
|
||||
color: #0550ae;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.highlight .s,
|
||||
.highlight .sa,
|
||||
.highlight .sc,
|
||||
.highlight .dl,
|
||||
.highlight .sd,
|
||||
.highlight .s2,
|
||||
.highlight .se,
|
||||
.highlight .sh,
|
||||
.highlight .sx,
|
||||
.highlight .s1,
|
||||
.highlight .ss {
|
||||
color: #0a3069;
|
||||
}
|
||||
|
||||
.highlight .nd {
|
||||
color: #8250df;
|
||||
}
|
||||
|
||||
.highlight .nf,
|
||||
.highlight .fm {
|
||||
color: #8250df;
|
||||
}
|
||||
|
||||
.highlight .err {
|
||||
color: #f6f8fa;
|
||||
background-color: #82071e;
|
||||
}
|
||||
|
||||
.highlight .c,
|
||||
.highlight .ch,
|
||||
.highlight .cd,
|
||||
.highlight .cm,
|
||||
.highlight .cp,
|
||||
.highlight .cpf,
|
||||
.highlight .c1,
|
||||
.highlight .cs {
|
||||
color: #68717a;
|
||||
}
|
||||
|
||||
.highlight .gl {
|
||||
color: #68717a;
|
||||
}
|
||||
|
||||
.highlight .gt {
|
||||
color: #68717a;
|
||||
}
|
||||
|
||||
.highlight .ni {
|
||||
color: #24292f;
|
||||
}
|
||||
|
||||
.highlight .si {
|
||||
color: #24292f;
|
||||
}
|
||||
|
||||
.highlight .ge {
|
||||
color: #24292f;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.highlight .gs {
|
||||
color: #24292f;
|
||||
font-weight: bold;
|
||||
}
|
||||
} /* light-syntax */
|
||||
@@ -1,112 +0,0 @@
|
||||
/*
|
||||
* The syntax light mode typography colors
|
||||
*/
|
||||
|
||||
@mixin light-scheme {
|
||||
/* Framework color */
|
||||
--main-bg: white;
|
||||
--mask-bg: #c1c3c5;
|
||||
--main-border-color: #f3f3f3;
|
||||
|
||||
/* Common color */
|
||||
--text-color: #34343c;
|
||||
--text-muted-color: #757575;
|
||||
--text-muted-highlight-color: inherit;
|
||||
--heading-color: #2a2a2a;
|
||||
--label-color: #585858;
|
||||
--blockquote-border-color: #eeeeee;
|
||||
--blockquote-text-color: #757575;
|
||||
--link-color: #0056b2;
|
||||
--link-underline-color: #dee2e6;
|
||||
--button-bg: #ffffff;
|
||||
--btn-border-color: #e9ecef;
|
||||
--btn-backtotop-color: #686868;
|
||||
--btn-backtotop-border-color: #f1f1f1;
|
||||
--checkbox-color: #c5c5c5;
|
||||
--checkbox-checked-color: #07a8f7;
|
||||
--img-bg: radial-gradient(
|
||||
circle,
|
||||
rgb(255, 255, 255) 0%,
|
||||
rgb(239, 239, 239) 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 */
|
||||
--site-title-color: rgb(113, 113, 113);
|
||||
--site-subtitle-color: #717171;
|
||||
--sidebar-bg: #f6f8fa;
|
||||
--sidebar-border-color: #efefef;
|
||||
--sidebar-muted-color: #545454;
|
||||
--sidebar-active-color: #1d1d1d;
|
||||
--sidebar-hover-bg: rgb(223, 233, 241, 0.64);
|
||||
--sidebar-btn-bg: white;
|
||||
--sidebar-btn-color: #8e8e8e;
|
||||
--avatar-border-color: white;
|
||||
|
||||
/* Topbar */
|
||||
--topbar-bg: rgb(255, 255, 255, 0.7);
|
||||
--topbar-text-color: rgb(78, 78, 78);
|
||||
--search-border-color: rgb(240, 240, 240);
|
||||
--search-icon-color: #c2c6cc;
|
||||
--input-focus-border-color: #b8b8b8;
|
||||
|
||||
/* Home page */
|
||||
--post-list-text-color: dimgray;
|
||||
--btn-patinator-text-color: #555555;
|
||||
--btn-paginator-hover-color: var(--sidebar-bg);
|
||||
|
||||
/* Posts */
|
||||
--toc-highlight: #0550ae;
|
||||
--toc-popup-border-color: lightgray;
|
||||
--btn-share-color: gray;
|
||||
--btn-share-hover-color: #0d6efd;
|
||||
--card-bg: white;
|
||||
--card-hovor-bg: #e2e2e2;
|
||||
--card-shadow: rgb(104, 104, 104, 0.05) 0 2px 6px 0,
|
||||
rgba(211, 209, 209, 0.15) 0 0 0 1px;
|
||||
--footnote-target-bg: lightcyan;
|
||||
--tb-odd-bg: #fbfcfd;
|
||||
--tb-border-color: #eaeaea;
|
||||
--dash-color: silver;
|
||||
--kbd-wrap-color: #bdbdbd;
|
||||
--kbd-text-color: var(--text-color);
|
||||
--kbd-bg-color: white;
|
||||
--prompt-text-color: rgb(46, 46, 46, 0.77);
|
||||
--prompt-tip-bg: rgb(123, 247, 144, 0.2);
|
||||
--prompt-tip-icon-color: #03b303;
|
||||
--prompt-info-bg: #e1f5fe;
|
||||
--prompt-info-icon-color: #0070cb;
|
||||
--prompt-warning-bg: rgb(255, 243, 205);
|
||||
--prompt-warning-icon-color: #ef9c03;
|
||||
--prompt-danger-bg: rgb(248, 215, 218, 0.56);
|
||||
--prompt-danger-icon-color: #df3c30;
|
||||
|
||||
/* Tags */
|
||||
--tag-border: #dee2e6;
|
||||
--tag-shadow: var(--btn-border-color);
|
||||
--tag-hover: rgb(222, 226, 230);
|
||||
--search-tag-bg: #f8f9fa;
|
||||
|
||||
/* Categories */
|
||||
--categories-border: rgba(0, 0, 0, 0.125);
|
||||
--categories-hover-bg: var(--btn-border-color);
|
||||
--categories-icon-hover-color: darkslategray;
|
||||
|
||||
/* Archive */
|
||||
--timeline-color: rgba(0, 0, 0, 0.075);
|
||||
--timeline-node-bg: #c2c6cc;
|
||||
--timeline-year-dot-color: #ffffff;
|
||||
|
||||
[class^='prompt-'] {
|
||||
--link-underline-color: rgb(219, 216, 216);
|
||||
}
|
||||
|
||||
.dark {
|
||||
display: none;
|
||||
}
|
||||
} /* light-scheme */
|
||||
51
_sass/components/_buttons.scss
Normal file
51
_sass/components/_buttons.scss
Normal file
@@ -0,0 +1,51 @@
|
||||
@use '../abstracts/variables' as v;
|
||||
@use '../abstracts/breakpoints' as bp;
|
||||
|
||||
#back-to-top {
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
z-index: 1;
|
||||
cursor: pointer;
|
||||
position: fixed;
|
||||
right: 1rem;
|
||||
bottom: calc(v.$footer-height-large - v.$back2top-size / 2);
|
||||
background: var(--button-bg);
|
||||
color: var(--btn-backtotop-color);
|
||||
padding: 0;
|
||||
width: v.$back2top-size;
|
||||
height: v.$back2top-size;
|
||||
border-radius: 50%;
|
||||
border: 1px solid var(--btn-backtotop-border-color);
|
||||
transition: opacity 0.5s ease-in-out, transform 0.2s ease-out;
|
||||
|
||||
@include bp.lg {
|
||||
right: 5%;
|
||||
bottom: calc(v.$footer-height - v.$back2top-size / 2);
|
||||
}
|
||||
|
||||
@include bp.xxl {
|
||||
right: calc((100vw - v.$sidebar-width - 1140px) / 2 + 3rem);
|
||||
}
|
||||
|
||||
@include bp.xxxl {
|
||||
right: calc(
|
||||
(100vw - v.$sidebar-width-large - v.$main-content-max-width) / 2 + 2rem
|
||||
);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
transform: translate3d(0, -5px, 0);
|
||||
-webkit-transform: translate3d(0, -5px, 0);
|
||||
}
|
||||
|
||||
i {
|
||||
line-height: v.$back2top-size;
|
||||
position: relative;
|
||||
bottom: 2px;
|
||||
}
|
||||
|
||||
&.show {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
2
_sass/components/_index.scss
Normal file
2
_sass/components/_index.scss
Normal file
@@ -0,0 +1,2 @@
|
||||
@forward 'buttons';
|
||||
@forward 'popups';
|
||||
172
_sass/components/_popups.scss
Normal file
172
_sass/components/_popups.scss
Normal file
@@ -0,0 +1,172 @@
|
||||
@use '../abstracts/variables' as v;
|
||||
@use '../abstracts/breakpoints' as bp;
|
||||
@use '../abstracts/placeholders';
|
||||
|
||||
/* PWA update popup */
|
||||
#notification {
|
||||
@-webkit-keyframes popup {
|
||||
from {
|
||||
opacity: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes popup {
|
||||
from {
|
||||
opacity: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.toast-header {
|
||||
background: none;
|
||||
border-bottom: none;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.toast-body {
|
||||
font-family: Lato, sans-serif;
|
||||
line-height: 1.25rem;
|
||||
|
||||
button {
|
||||
font-size: 90%;
|
||||
min-width: 4rem;
|
||||
}
|
||||
}
|
||||
|
||||
&.toast {
|
||||
&.show {
|
||||
display: block;
|
||||
min-width: 20rem;
|
||||
border-radius: 0.5rem;
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
backdrop-filter: blur(10px);
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
color: #1b1b1eba;
|
||||
position: fixed;
|
||||
left: 50%;
|
||||
bottom: 20%;
|
||||
transform: translateX(-50%);
|
||||
-webkit-animation: popup 0.8s;
|
||||
animation: popup 0.8s;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#toc-popup {
|
||||
$slide-in: slide-in 0.3s ease-out;
|
||||
$slide-out: slide-out 0.3s ease-out;
|
||||
$curtain-height: 2rem;
|
||||
$backdrop: blur(5px);
|
||||
|
||||
border-color: var(--toc-popup-border-color);
|
||||
border-width: 1px;
|
||||
border-radius: v.$radius-lg;
|
||||
color: var(--text-color);
|
||||
background: var(--card-bg);
|
||||
margin-top: v.$topbar-height;
|
||||
min-width: 20rem;
|
||||
font-size: 1.05rem;
|
||||
|
||||
@include bp.sm {
|
||||
max-width: 32rem;
|
||||
}
|
||||
|
||||
&[open] {
|
||||
-webkit-animation: $slide-in;
|
||||
animation: $slide-in;
|
||||
}
|
||||
|
||||
&[closing] {
|
||||
-webkit-animation: $slide-out;
|
||||
animation: $slide-out;
|
||||
}
|
||||
|
||||
@include bp.lg {
|
||||
left: v.$sidebar-width;
|
||||
}
|
||||
|
||||
.header {
|
||||
@extend %btn-color;
|
||||
|
||||
position: -webkit-sticky;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background-color: inherit;
|
||||
border-bottom: 1px solid var(--main-border-color);
|
||||
|
||||
.label {
|
||||
font-family: v.$font-family-heading;
|
||||
}
|
||||
}
|
||||
|
||||
button {
|
||||
> i {
|
||||
font-size: 1.25rem;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style-type: none;
|
||||
padding-left: 0;
|
||||
|
||||
li {
|
||||
ul,
|
||||
& + li {
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
|
||||
a {
|
||||
display: flex;
|
||||
line-height: 1.5;
|
||||
padding: 0.375rem 0;
|
||||
padding-right: 1.125rem;
|
||||
|
||||
&.toc-link::before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@for $i from 2 through 4 {
|
||||
.node-name--H#{$i} {
|
||||
padding-left: 1.125rem * ($i - 1);
|
||||
}
|
||||
}
|
||||
|
||||
.is-active-link {
|
||||
color: var(--toc-highlight) !important;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
&::-webkit-backdrop {
|
||||
-webkit-backdrop-filter: $backdrop;
|
||||
backdrop-filter: $backdrop;
|
||||
}
|
||||
|
||||
&::backdrop {
|
||||
-webkit-backdrop-filter: $backdrop;
|
||||
backdrop-filter: $backdrop;
|
||||
}
|
||||
|
||||
&::after {
|
||||
display: flex;
|
||||
content: '';
|
||||
position: relative;
|
||||
background: linear-gradient(transparent, var(--card-bg) 70%);
|
||||
height: $curtain-height;
|
||||
}
|
||||
|
||||
#toc-popup-content {
|
||||
overflow: auto;
|
||||
max-height: calc(100vh - 4 * v.$topbar-height);
|
||||
font-family: v.$font-family-heading;
|
||||
margin-bottom: -$curtain-height;
|
||||
}
|
||||
}
|
||||
36
_sass/layout/_footer.scss
Normal file
36
_sass/layout/_footer.scss
Normal file
@@ -0,0 +1,36 @@
|
||||
@use '../abstracts/breakpoints' as bp;
|
||||
@use '../abstracts/variables' as v;
|
||||
@use '../abstracts/mixins' as mx;
|
||||
@use '../abstracts/placeholders';
|
||||
|
||||
footer {
|
||||
background-color: var(--main-bg);
|
||||
height: v.$footer-height;
|
||||
border-top: 1px solid var(--main-border-color);
|
||||
|
||||
@extend %text-xs;
|
||||
|
||||
@include bp.lt(bp.get(lg)) {
|
||||
@include mx.slide;
|
||||
|
||||
height: v.$footer-height-large;
|
||||
padding: 1.5rem 0;
|
||||
}
|
||||
|
||||
a {
|
||||
@extend %text-highlight;
|
||||
|
||||
&:hover {
|
||||
@extend %link-hover;
|
||||
}
|
||||
}
|
||||
|
||||
em {
|
||||
@extend %text-highlight;
|
||||
}
|
||||
|
||||
p {
|
||||
text-align: center;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
4
_sass/layout/_index.scss
Normal file
4
_sass/layout/_index.scss
Normal file
@@ -0,0 +1,4 @@
|
||||
@forward 'sidebar';
|
||||
@forward 'topbar';
|
||||
@forward 'panel';
|
||||
@forward 'footer';
|
||||
70
_sass/layout/_panel.scss
Normal file
70
_sass/layout/_panel.scss
Normal file
@@ -0,0 +1,70 @@
|
||||
@use '../abstracts/breakpoints' as bp;
|
||||
@use '../abstracts/mixins' as mx;
|
||||
@use '../abstracts/placeholders';
|
||||
|
||||
.access {
|
||||
top: 2rem;
|
||||
transition: top 0.2s ease-in-out;
|
||||
margin-top: 3rem;
|
||||
|
||||
&:only-child {
|
||||
position: -webkit-sticky;
|
||||
position: sticky;
|
||||
}
|
||||
|
||||
> section {
|
||||
@extend %panel-border;
|
||||
|
||||
padding-left: 1rem;
|
||||
|
||||
&:not(:first-child) {
|
||||
margin-top: 4rem;
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
}
|
||||
|
||||
#panel-wrapper {
|
||||
/* the headings */
|
||||
.panel-heading {
|
||||
font-family: inherit;
|
||||
line-height: inherit;
|
||||
|
||||
@include mx.label(inherit);
|
||||
}
|
||||
|
||||
.post-tag {
|
||||
line-height: 1.05rem;
|
||||
font-size: 0.85rem;
|
||||
border-radius: 0.8rem;
|
||||
padding: 0.3rem 0.5rem;
|
||||
margin: 0 0.35rem 0.5rem 0;
|
||||
|
||||
&:hover {
|
||||
transition: all 0.3s ease-in;
|
||||
}
|
||||
}
|
||||
|
||||
> :last-child {
|
||||
margin-bottom: 4rem;
|
||||
}
|
||||
|
||||
@include bp.lt(bp.get(xl)) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
#access-lastmod {
|
||||
a {
|
||||
color: inherit;
|
||||
|
||||
&:hover {
|
||||
@extend %link-hover;
|
||||
}
|
||||
|
||||
@extend %no-bottom-border;
|
||||
}
|
||||
}
|
||||
258
_sass/layout/_sidebar.scss
Normal file
258
_sass/layout/_sidebar.scss
Normal file
@@ -0,0 +1,258 @@
|
||||
@use '../abstracts/variables' as v;
|
||||
@use '../abstracts/mixins' as mx;
|
||||
@use '../abstracts/breakpoints' as bp;
|
||||
@use '../abstracts/placeholders';
|
||||
|
||||
$btn-border-width: 3px;
|
||||
$btn-mb: 0.5rem;
|
||||
$sidebar-display: 'sidebar-display'; /* the attribute for sidebar display */
|
||||
|
||||
#sidebar {
|
||||
@include mx.pl-pr(0);
|
||||
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
width: v.$sidebar-width;
|
||||
background: var(--sidebar-bg);
|
||||
border-right: 1px solid var(--sidebar-border-color);
|
||||
|
||||
/* Hide scrollbar for IE, Edge and Firefox */
|
||||
-ms-overflow-style: none; /* IE and Edge */
|
||||
scrollbar-width: none; /* Firefox */
|
||||
|
||||
/* Hide scrollbar for Chrome, Safari and Opera */
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@include bp.lt(bp.get(lg)) {
|
||||
@include mx.slide;
|
||||
|
||||
transform: translateX(-#{v.$sidebar-width}); /* hide */
|
||||
-webkit-transform: translateX(-#{v.$sidebar-width});
|
||||
|
||||
[#{$sidebar-display}] & {
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
@include bp.xxxl {
|
||||
width: v.$sidebar-width-large;
|
||||
}
|
||||
|
||||
%sidebar-link-hover {
|
||||
&:hover {
|
||||
color: var(--sidebar-active-color);
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
@extend %sidebar-links;
|
||||
}
|
||||
|
||||
#avatar {
|
||||
display: block;
|
||||
width: 6.5rem;
|
||||
height: 6.5rem;
|
||||
overflow: hidden;
|
||||
box-shadow: var(--avatar-border-color) 0 0 0 2px;
|
||||
transform: translateZ(0); /* fixed the zoom in Safari */
|
||||
|
||||
@include bp.sm {
|
||||
width: 7rem;
|
||||
height: 7rem;
|
||||
}
|
||||
|
||||
img {
|
||||
transition: transform 0.5s;
|
||||
|
||||
&:hover {
|
||||
transform: scale(1.2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.profile-wrapper {
|
||||
@include mx.mt-mb(2.5rem);
|
||||
@extend %clickable-transition;
|
||||
|
||||
padding-left: 2.5rem;
|
||||
padding-right: 1.25rem;
|
||||
width: 100%;
|
||||
|
||||
@include bp.lg {
|
||||
margin-top: 3rem;
|
||||
}
|
||||
|
||||
@include bp.xxxl {
|
||||
margin-top: 3.5rem;
|
||||
margin-bottom: 2.5rem;
|
||||
padding-left: 3.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.site-title {
|
||||
@extend %clickable-transition;
|
||||
@extend %sidebar-link-hover;
|
||||
|
||||
font-family: inherit;
|
||||
font-weight: 900;
|
||||
font-size: 1.75rem;
|
||||
line-height: 1.2;
|
||||
letter-spacing: 0.25px;
|
||||
margin-top: 1.25rem;
|
||||
margin-bottom: 0.5rem;
|
||||
width: fit-content;
|
||||
color: var(--site-title-color);
|
||||
}
|
||||
|
||||
.site-subtitle {
|
||||
font-size: 95%;
|
||||
color: var(--site-subtitle-color);
|
||||
margin-top: 0.25rem;
|
||||
word-spacing: 1px;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
ul {
|
||||
margin-bottom: 2rem;
|
||||
|
||||
li.nav-item {
|
||||
opacity: 0.9;
|
||||
width: 100%;
|
||||
|
||||
@include mx.pl-pr(1.5rem);
|
||||
|
||||
@include bp.xxxl {
|
||||
@include mx.pl-pr(2.75rem);
|
||||
}
|
||||
|
||||
a.nav-link {
|
||||
@include mx.pt-pb(0.6rem);
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-radius: 0.75rem;
|
||||
font-weight: 600;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--sidebar-hover-bg);
|
||||
}
|
||||
|
||||
i {
|
||||
font-size: 95%;
|
||||
opacity: 0.8;
|
||||
margin-right: 1.5rem;
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: 90%;
|
||||
letter-spacing: 0.2px;
|
||||
}
|
||||
}
|
||||
|
||||
&.active {
|
||||
.nav-link {
|
||||
color: var(--sidebar-active-color);
|
||||
background-color: var(--sidebar-hover-bg);
|
||||
|
||||
span {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:not(:first-child) {
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-bottom {
|
||||
padding-left: 2rem;
|
||||
padding-right: 1rem;
|
||||
margin-bottom: 1.5rem;
|
||||
|
||||
@include bp.xxxl {
|
||||
padding-left: 2.75rem;
|
||||
margin-bottom: 1.75rem;
|
||||
}
|
||||
|
||||
$btn-size: 1.75rem;
|
||||
|
||||
%button {
|
||||
width: $btn-size;
|
||||
height: $btn-size;
|
||||
margin-bottom: $btn-mb; // multi line gap
|
||||
border-radius: 50%;
|
||||
color: var(--sidebar-btn-color);
|
||||
background-color: var(--sidebar-btn-bg);
|
||||
text-align: center;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
&:not(:focus-visible) {
|
||||
box-shadow: var(--sidebar-border-color) 0 0 0 1px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: var(--sidebar-hover-bg);
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
@extend %button;
|
||||
@extend %sidebar-link-hover;
|
||||
@extend %clickable-transition;
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-right: v.$sb-btn-gap;
|
||||
|
||||
@include bp.xxxl {
|
||||
margin-right: v.$sb-btn-gap-lg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
i {
|
||||
line-height: $btn-size;
|
||||
}
|
||||
|
||||
#mode-toggle {
|
||||
@extend %button;
|
||||
@extend %sidebar-links;
|
||||
@extend %sidebar-link-hover;
|
||||
}
|
||||
|
||||
.icon-border {
|
||||
@extend %no-cursor;
|
||||
@include mx.ml-mr(calc((v.$sb-btn-gap - $btn-border-width) / 2));
|
||||
|
||||
background-color: var(--sidebar-btn-color);
|
||||
content: '';
|
||||
width: $btn-border-width;
|
||||
height: $btn-border-width;
|
||||
border-radius: 50%;
|
||||
margin-bottom: $btn-mb;
|
||||
|
||||
@include bp.xxxl {
|
||||
@include mx.ml-mr(calc((v.$sb-btn-gap-lg - $btn-border-width) / 2));
|
||||
}
|
||||
}
|
||||
} /* .sidebar-bottom */
|
||||
} /* #sidebar */
|
||||
|
||||
[#{$sidebar-display}] {
|
||||
#main-wrapper {
|
||||
@include bp.lt(bp.get(lg)) {
|
||||
transform: translateX(v.$sidebar-width);
|
||||
}
|
||||
}
|
||||
}
|
||||
86
_sass/layout/_topbar.scss
Normal file
86
_sass/layout/_topbar.scss
Normal file
@@ -0,0 +1,86 @@
|
||||
@use '../abstracts/variables' as v;
|
||||
@use '../abstracts/mixins' as mx;
|
||||
@use '../abstracts/breakpoints' as bp;
|
||||
@use '../abstracts/placeholders';
|
||||
|
||||
#topbar-wrapper {
|
||||
height: v.$topbar-height;
|
||||
background-color: var(--topbar-bg);
|
||||
|
||||
@include bp.lt(bp.get(lg)) {
|
||||
@include mx.slide(top 0.2s ease);
|
||||
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
#topbar {
|
||||
@extend %btn-color;
|
||||
|
||||
#breadcrumb {
|
||||
font-size: 1rem;
|
||||
color: var(--text-muted-color);
|
||||
padding-left: 0.5rem;
|
||||
|
||||
a:hover {
|
||||
@extend %link-hover;
|
||||
}
|
||||
|
||||
span {
|
||||
&:not(:last-child) {
|
||||
&::after {
|
||||
content: '›';
|
||||
padding: 0 0.3rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include bp.lt(bp.get(lg)) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@include bp.between(bp.get(lg), calc(#{bp.get(xl)} - 1px)) {
|
||||
width: 65%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
word-break: keep-all;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
@include bp.lte(bp.get(md)) {
|
||||
@include mx.max-w-100;
|
||||
}
|
||||
|
||||
@include bp.lt(bp.get(lg)) {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
#topbar-title {
|
||||
display: none;
|
||||
font-size: 1.1rem;
|
||||
font-weight: 600;
|
||||
font-family: sans-serif;
|
||||
color: var(--topbar-text-color);
|
||||
text-align: center;
|
||||
width: 70%;
|
||||
word-break: keep-all;
|
||||
|
||||
@include bp.lt(bp.get(lg)) {
|
||||
display: block;
|
||||
}
|
||||
|
||||
@include bp.lg {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
#sidebar-trigger,
|
||||
#search-trigger {
|
||||
display: none;
|
||||
|
||||
@include bp.lt(bp.get(lg)) {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
@@ -1,2 +1,2 @@
|
||||
@import 'dist/bootstrap';
|
||||
@import 'main';
|
||||
@use 'vendors/bootstrap';
|
||||
@use 'main';
|
||||
|
||||
@@ -1,13 +1,4 @@
|
||||
@import 'colors/typography-light';
|
||||
@import 'colors/typography-dark';
|
||||
@import 'addon/variables';
|
||||
@import 'variables-hook';
|
||||
@import 'addon/module';
|
||||
@import 'addon/syntax';
|
||||
@import 'addon/commons';
|
||||
@import 'layout/home';
|
||||
@import 'layout/post';
|
||||
@import 'layout/tags';
|
||||
@import 'layout/archives';
|
||||
@import 'layout/categories';
|
||||
@import 'layout/category-tag';
|
||||
@forward 'base';
|
||||
@forward 'components';
|
||||
@forward 'layout';
|
||||
@forward 'pages';
|
||||
|
||||
@@ -1,10 +1,17 @@
|
||||
/*
|
||||
Style for Archives
|
||||
*/
|
||||
@use '../abstracts/breakpoints' as bp;
|
||||
@use '../abstracts/placeholders';
|
||||
|
||||
#archives {
|
||||
letter-spacing: 0.03rem;
|
||||
|
||||
@include bp.lt(bp.get(sm)) {
|
||||
margin-top: -1rem;
|
||||
|
||||
ul {
|
||||
letter-spacing: 0;
|
||||
}
|
||||
}
|
||||
|
||||
$timeline-width: 4px;
|
||||
|
||||
%timeline {
|
||||
@@ -131,13 +138,3 @@
|
||||
}
|
||||
}
|
||||
} /* #archives */
|
||||
|
||||
@media all and (max-width: 576px) {
|
||||
#archives {
|
||||
margin-top: -1rem;
|
||||
|
||||
ul {
|
||||
letter-spacing: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,8 +1,7 @@
|
||||
/*
|
||||
Style for Tab Categories
|
||||
*/
|
||||
@use '../abstracts/variables' as v;
|
||||
@use '../abstracts/placeholders';
|
||||
|
||||
%category-icon-color {
|
||||
%-category-icon-color {
|
||||
color: gray;
|
||||
}
|
||||
|
||||
@@ -16,7 +15,7 @@
|
||||
}
|
||||
|
||||
.card-header {
|
||||
$radius: calc($radius-lg - 1px);
|
||||
$radius: calc(v.$radius-lg - 1px);
|
||||
|
||||
padding: 0.75rem;
|
||||
border-radius: $radius;
|
||||
@@ -29,7 +28,7 @@
|
||||
}
|
||||
|
||||
i {
|
||||
@extend %category-icon-color;
|
||||
@extend %-category-icon-color;
|
||||
|
||||
font-size: 86%; /* fontawesome icons */
|
||||
}
|
||||
@@ -1,6 +1,6 @@
|
||||
/*
|
||||
Style for page Category and Tag
|
||||
*/
|
||||
@use '../abstracts/breakpoints' as bp;
|
||||
@use '../abstracts/mixins' as mx;
|
||||
@use '../abstracts/placeholders';
|
||||
|
||||
.dash {
|
||||
margin: 0 0.5rem 0.6rem 0.5rem;
|
||||
@@ -24,6 +24,10 @@
|
||||
position: relative;
|
||||
top: 0.6rem;
|
||||
margin-right: 0.5rem;
|
||||
|
||||
@include bp.lt(bp.get(sm)) {
|
||||
margin: 0 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* post's title */
|
||||
@@ -31,6 +35,10 @@
|
||||
@extend %no-bottom-border;
|
||||
|
||||
font-size: 1.1rem;
|
||||
|
||||
@include bp.lt(bp.get(sm)) {
|
||||
@include mx.text-ellipsis;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -53,18 +61,3 @@
|
||||
margin-bottom: -1px; /* Avoid jumping */
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (max-width: 576px) {
|
||||
#page-category,
|
||||
#page-tag {
|
||||
ul > li {
|
||||
&::before {
|
||||
margin: 0 0.5rem;
|
||||
}
|
||||
|
||||
> a {
|
||||
@include text-ellipsis;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,10 +1,14 @@
|
||||
/*
|
||||
Style for Homepage
|
||||
*/
|
||||
@use '../abstracts/variables' as v;
|
||||
@use '../abstracts/breakpoints' as bp;
|
||||
@use '../abstracts/placeholders';
|
||||
|
||||
#post-list {
|
||||
margin-top: 2rem;
|
||||
|
||||
@include bp.lg {
|
||||
margin-top: 2.5rem;
|
||||
}
|
||||
|
||||
.card-wrapper {
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
@@ -20,7 +24,11 @@
|
||||
background: none;
|
||||
|
||||
%img-radius {
|
||||
border-radius: $radius-lg $radius-lg 0 0;
|
||||
border-radius: v.$radius-lg v.$radius-lg 0 0;
|
||||
|
||||
@include bp.md {
|
||||
border-radius: 0 v.$radius-lg v.$radius-lg 0;
|
||||
}
|
||||
}
|
||||
|
||||
.preview-img {
|
||||
@@ -35,6 +43,10 @@
|
||||
height: 100%;
|
||||
padding: 1rem;
|
||||
|
||||
@include bp.md {
|
||||
padding: 1.75rem 1.75rem 1.25rem;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
@extend %text-clip;
|
||||
|
||||
@@ -46,14 +58,20 @@
|
||||
color: var(--text-muted-color) !important;
|
||||
}
|
||||
|
||||
.card-text.content {
|
||||
@extend %muted;
|
||||
.card-text {
|
||||
@include bp.md {
|
||||
display: inherit !important;
|
||||
}
|
||||
|
||||
p {
|
||||
@extend %text-clip;
|
||||
&.content {
|
||||
@extend %muted;
|
||||
|
||||
line-height: 1.5;
|
||||
margin: 0;
|
||||
p {
|
||||
@extend %text-clip;
|
||||
|
||||
line-height: 1.5;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -63,6 +81,10 @@
|
||||
i {
|
||||
&:not(:first-child) {
|
||||
margin-left: 1.5rem;
|
||||
|
||||
@include bp.md {
|
||||
margin-left: 1.75rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -87,11 +109,28 @@
|
||||
font-family: Lato, sans-serif;
|
||||
justify-content: space-evenly;
|
||||
|
||||
@include bp.lg {
|
||||
font-size: 0.85rem;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.page-item {
|
||||
@include bp.lt(bp.get(lg)) {
|
||||
&:not(:first-child):not(:last-child) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@include bp.lg {
|
||||
&:not(:last-child) {
|
||||
margin-right: 0.7rem;
|
||||
}
|
||||
}
|
||||
|
||||
.page-link {
|
||||
color: var(--btn-patinator-text-color);
|
||||
padding: 0 0.6rem;
|
||||
@@ -125,64 +164,10 @@
|
||||
}
|
||||
}
|
||||
} /* .page-item */
|
||||
} /* .pagination */
|
||||
|
||||
/* Tablet */
|
||||
@media all and (min-width: 768px) {
|
||||
%img-radius {
|
||||
border-radius: 0 $radius-lg $radius-lg 0;
|
||||
}
|
||||
|
||||
#post-list {
|
||||
.card {
|
||||
.card-body {
|
||||
padding: 1.75rem 1.75rem 1.25rem 1.75rem;
|
||||
|
||||
.card-text {
|
||||
display: inherit !important;
|
||||
}
|
||||
|
||||
.post-meta {
|
||||
i {
|
||||
&:not(:first-child) {
|
||||
margin-left: 1.75rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Hide SideBar and TOC */
|
||||
@media all and (max-width: 830px) {
|
||||
.pagination {
|
||||
.page-item {
|
||||
&:not(:first-child):not(:last-child) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Sidebar is visible */
|
||||
@media all and (min-width: 831px) {
|
||||
#post-list {
|
||||
margin-top: 2.5rem;
|
||||
}
|
||||
|
||||
.pagination {
|
||||
font-size: 0.85rem;
|
||||
justify-content: center;
|
||||
|
||||
.page-item {
|
||||
&:not(:last-child) {
|
||||
margin-right: 0.7rem;
|
||||
}
|
||||
}
|
||||
|
||||
.page-index {
|
||||
.page-index {
|
||||
@include bp.lg {
|
||||
display: none;
|
||||
}
|
||||
} /* .pagination */
|
||||
}
|
||||
}
|
||||
7
_sass/pages/_index.scss
Normal file
7
_sass/pages/_index.scss
Normal file
@@ -0,0 +1,7 @@
|
||||
@forward 'search';
|
||||
@forward 'home';
|
||||
@forward 'post';
|
||||
@forward 'categories';
|
||||
@forward 'tags';
|
||||
@forward 'archives';
|
||||
@forward 'category-tag';
|
||||
@@ -1,14 +1,15 @@
|
||||
/**
|
||||
* Post-specific styles
|
||||
*/
|
||||
@use '../abstracts/variables' as v;
|
||||
@use '../abstracts/breakpoints' as bp;
|
||||
@use '../abstracts/mixins' as mx;
|
||||
@use '../abstracts/placeholders';
|
||||
|
||||
%btn-post-nav {
|
||||
%-btn-post-nav {
|
||||
width: 50%;
|
||||
position: relative;
|
||||
border-color: var(--btn-border-color);
|
||||
}
|
||||
|
||||
@mixin dot($pl: 0.25rem, $pr: 0.25rem) {
|
||||
@mixin -dot($pl: 0.25rem, $pr: 0.25rem) {
|
||||
content: '\2022';
|
||||
padding-left: $pl;
|
||||
padding-right: $pr;
|
||||
@@ -24,7 +25,7 @@ header {
|
||||
|
||||
.post-meta {
|
||||
span + span::before {
|
||||
@include dot;
|
||||
@include -dot;
|
||||
}
|
||||
|
||||
em,
|
||||
@@ -113,9 +114,20 @@ header {
|
||||
} /* .share-wrapper */
|
||||
}
|
||||
|
||||
.post-tail-bottom {
|
||||
@include bp.lte(bp.get(sm)) {
|
||||
flex-wrap: wrap-reverse !important;
|
||||
|
||||
> div:first-child {
|
||||
width: 100%;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.share-mastodon {
|
||||
/* See: https://github.com/justinribeiro/share-to-mastodon#properties */
|
||||
--wc-stm-font-family: $font-family-base;
|
||||
--wc-stm-font-family: v.$font-family-base;
|
||||
--wc-stm-dialog-background-color: var(--card-bg);
|
||||
--wc-stm-form-button-border: 1px solid var(--btn-border-color);
|
||||
--wc-stm-form-submit-background-color: var(--sidebar-btn-bg);
|
||||
@@ -131,16 +143,19 @@ header {
|
||||
|
||||
.post-tag {
|
||||
&:hover {
|
||||
@extend %link-hover;
|
||||
@extend %tag-hover;
|
||||
@extend %no-bottom-border;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.post-navigation {
|
||||
@include bp.lt(bp.get(lg)) {
|
||||
@include mx.pl-pr(0);
|
||||
@include mx.ml-mr(-0.5rem);
|
||||
}
|
||||
|
||||
.btn {
|
||||
@extend %btn-post-nav;
|
||||
@extend %-btn-post-nav;
|
||||
|
||||
&:not(:hover) {
|
||||
color: var(--link-color);
|
||||
@@ -153,7 +168,7 @@ header {
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
@extend %btn-post-nav;
|
||||
@extend %-btn-post-nav;
|
||||
|
||||
pointer-events: auto;
|
||||
cursor: not-allowed;
|
||||
@@ -173,12 +188,12 @@ header {
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
border-radius: $radius-lg 0 0 $radius-lg;
|
||||
border-radius: v.$radius-lg 0 0 v.$radius-lg;
|
||||
left: 0.5px;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-radius: 0 $radius-lg $radius-lg 0;
|
||||
border-radius: 0 v.$radius-lg v.$radius-lg 0;
|
||||
right: 0.5px;
|
||||
}
|
||||
}
|
||||
@@ -203,40 +218,50 @@ header {
|
||||
@-webkit-keyframes fade-up {
|
||||
from {
|
||||
opacity: 0;
|
||||
position: relative;
|
||||
top: 2rem;
|
||||
margin-top: 4rem;
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
position: relative;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fade-up {
|
||||
from {
|
||||
opacity: 0;
|
||||
position: relative;
|
||||
top: 2rem;
|
||||
margin-top: 4rem;
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
position: relative;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* TOC panel */
|
||||
#toc-wrapper {
|
||||
border-left: 1px solid rgba(158, 158, 158, 0.17);
|
||||
|
||||
%top-cover {
|
||||
content: '';
|
||||
display: block;
|
||||
position: -webkit-sticky;
|
||||
position: sticky;
|
||||
top: 4rem;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 3rem;
|
||||
background: linear-gradient(var(--main-bg) 50%, transparent);
|
||||
}
|
||||
|
||||
#toc-wrapper {
|
||||
top: 0;
|
||||
transition: top 0.2s ease-in-out;
|
||||
-webkit-animation: fade-up 0.8s;
|
||||
animation: fade-up 0.8s;
|
||||
overflow-y: auto;
|
||||
max-height: 100vh;
|
||||
scrollbar-width: none;
|
||||
margin-top: 2rem;
|
||||
|
||||
&:not(.invisible) {
|
||||
-webkit-animation: fade-up 0.8s;
|
||||
animation: fade-up 0.8s;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
@@ -245,12 +270,8 @@ header {
|
||||
padding-left: 0;
|
||||
|
||||
li {
|
||||
&:not(:last-child) {
|
||||
margin: 0.4rem 0;
|
||||
}
|
||||
|
||||
a {
|
||||
padding: 0.2rem 0 0.2rem 1.25rem;
|
||||
padding: 0.4rem 0 0.4rem 1.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -278,7 +299,6 @@ header {
|
||||
&::before {
|
||||
display: inline-block;
|
||||
width: 1px;
|
||||
left: -1px;
|
||||
height: 1.25rem;
|
||||
background-color: var(--toc-highlight) !important;
|
||||
}
|
||||
@@ -288,6 +308,30 @@ header {
|
||||
padding-left: 0.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
@at-root .toc-border-cover {
|
||||
@extend %top-cover;
|
||||
|
||||
margin-bottom: -4rem;
|
||||
}
|
||||
|
||||
&::before {
|
||||
@extend %top-cover;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
width: 15%;
|
||||
height: 2.25rem;
|
||||
margin-left: -1px;
|
||||
background: linear-gradient(transparent, var(--main-bg) 70%);
|
||||
}
|
||||
|
||||
> * {
|
||||
@extend %panel-border;
|
||||
}
|
||||
}
|
||||
|
||||
/* --- TOC button, bar and popup in mobile/tablet --- */
|
||||
@@ -298,23 +342,27 @@ header {
|
||||
top: 0;
|
||||
z-index: 1;
|
||||
margin: 0 -1rem;
|
||||
height: $topbar-height;
|
||||
height: v.$topbar-height;
|
||||
background: var(--main-bg);
|
||||
border-bottom: 1px solid var(--main-border-color);
|
||||
transition: all 0.2s ease-in-out;
|
||||
|
||||
@extend %btn-color;
|
||||
|
||||
@include bp.xl {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.label {
|
||||
@extend %heading;
|
||||
|
||||
margin-left: 0.25rem;
|
||||
margin-left: 0.375rem;
|
||||
padding: 0 0.75rem;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
&.invisible {
|
||||
top: -$topbar-height;
|
||||
top: -#{v.$topbar-height};
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
@@ -322,11 +370,15 @@ header {
|
||||
#toc-solo-trigger {
|
||||
color: var(--text-muted-color);
|
||||
border-color: var(--btn-border-color);
|
||||
border-radius: $radius-lg;
|
||||
border-radius: v.$radius-lg;
|
||||
|
||||
@include bp.xl {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.label {
|
||||
font-size: 1rem;
|
||||
font-family: $font-family-heading;
|
||||
font-family: v.$font-family-heading;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
@@ -338,7 +390,7 @@ header {
|
||||
@mixin slide-in {
|
||||
from {
|
||||
opacity: 0.7;
|
||||
transform: translateY(-$topbar-height);
|
||||
transform: translateY(-#{v.$topbar-height});
|
||||
}
|
||||
|
||||
to {
|
||||
@@ -354,7 +406,7 @@ header {
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translateY(-$topbar-height);
|
||||
transform: translateY(-#{v.$topbar-height});
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
@@ -375,129 +427,11 @@ header {
|
||||
@include slide-out;
|
||||
}
|
||||
|
||||
#toc-popup {
|
||||
$slide-in: slide-in 0.3s ease-out;
|
||||
$slide-out: slide-out 0.3s ease-out;
|
||||
$curtain-height: 2rem;
|
||||
$backdrop: blur(5px);
|
||||
|
||||
border-color: var(--toc-popup-border-color);
|
||||
border-width: 1px;
|
||||
border-radius: $radius-lg;
|
||||
color: var(--text-color);
|
||||
background: var(--card-bg);
|
||||
margin-top: $topbar-height;
|
||||
min-width: 20rem;
|
||||
font-size: 1.05rem;
|
||||
|
||||
@media all and (min-width: 576px) {
|
||||
max-width: 32rem;
|
||||
}
|
||||
|
||||
&[open] {
|
||||
-webkit-animation: $slide-in;
|
||||
animation: $slide-in;
|
||||
}
|
||||
|
||||
&[closing] {
|
||||
-webkit-animation: $slide-out;
|
||||
animation: $slide-out;
|
||||
}
|
||||
|
||||
@media all and (min-width: 850px) {
|
||||
left: $sidebar-width;
|
||||
}
|
||||
|
||||
.header {
|
||||
@extend %btn-color;
|
||||
|
||||
position: -webkit-sticky;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background-color: inherit;
|
||||
border-bottom: 1px solid var(--main-border-color);
|
||||
|
||||
.label {
|
||||
font-family: $font-family-heading;
|
||||
}
|
||||
}
|
||||
|
||||
button {
|
||||
> i {
|
||||
font-size: 1.25rem;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style-type: none;
|
||||
padding-left: 0;
|
||||
|
||||
li {
|
||||
ul,
|
||||
& + li {
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
|
||||
a {
|
||||
display: flex;
|
||||
line-height: 1.5;
|
||||
padding: 0.375rem 0;
|
||||
padding-right: 1.125rem;
|
||||
|
||||
&.toc-link::before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@for $i from 2 through 4 {
|
||||
.node-name--H#{$i} {
|
||||
padding-left: 1.125rem * ($i - 1);
|
||||
}
|
||||
}
|
||||
|
||||
.is-active-link {
|
||||
color: var(--toc-highlight) !important;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
&::-webkit-backdrop {
|
||||
-webkit-backdrop-filter: $backdrop;
|
||||
backdrop-filter: $backdrop;
|
||||
}
|
||||
|
||||
&::backdrop {
|
||||
-webkit-backdrop-filter: $backdrop;
|
||||
backdrop-filter: $backdrop;
|
||||
}
|
||||
|
||||
&::after {
|
||||
display: flex;
|
||||
content: '';
|
||||
position: relative;
|
||||
background: linear-gradient(transparent, var(--card-bg) 70%);
|
||||
height: $curtain-height;
|
||||
}
|
||||
|
||||
#toc-popup-content {
|
||||
overflow: auto;
|
||||
max-height: calc(100vh - 4 * $topbar-height);
|
||||
font-family: $font-family-heading;
|
||||
margin-bottom: -$curtain-height;
|
||||
}
|
||||
}
|
||||
|
||||
/* --- Related Posts --- */
|
||||
|
||||
#related-posts {
|
||||
> h3 {
|
||||
@include label(1.1rem, 600);
|
||||
@include mx.label(1.1rem, 600);
|
||||
}
|
||||
|
||||
time {
|
||||
@@ -540,47 +474,23 @@ header {
|
||||
}
|
||||
|
||||
.share-label {
|
||||
@include label(inherit, 400, inherit);
|
||||
@include mx.label(inherit, 400, inherit);
|
||||
|
||||
&::after {
|
||||
content: ':';
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (max-width: 576px) {
|
||||
.post-tail-bottom {
|
||||
flex-wrap: wrap-reverse !important;
|
||||
|
||||
> div:first-child {
|
||||
width: 100%;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (max-width: 768px) {
|
||||
.content > p > img {
|
||||
.content > p > img {
|
||||
@include bp.lte(bp.get(md)) {
|
||||
max-width: calc(100% + 1rem);
|
||||
}
|
||||
}
|
||||
|
||||
/* Hide SideBar and TOC */
|
||||
@media all and (max-width: 849px) {
|
||||
.post-navigation {
|
||||
@include pl-pr(0);
|
||||
@include ml-mr(-0.5rem);
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (min-width: 1200px) {
|
||||
h2,
|
||||
h3,
|
||||
h4 {
|
||||
h2,
|
||||
h3,
|
||||
h4 {
|
||||
@include bp.xl {
|
||||
scroll-margin-top: 2rem;
|
||||
}
|
||||
|
||||
#toc-bar,
|
||||
#toc-solo-trigger {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
184
_sass/pages/_search.scss
Normal file
184
_sass/pages/_search.scss
Normal file
@@ -0,0 +1,184 @@
|
||||
@use '../abstracts/breakpoints' as bp;
|
||||
@use '../abstracts/variables' as v;
|
||||
@use '../abstracts/placeholders';
|
||||
|
||||
search {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
border-radius: 1rem;
|
||||
border: 1px solid var(--search-border-color);
|
||||
background: var(--main-bg);
|
||||
padding: 0 0.5rem;
|
||||
|
||||
i {
|
||||
z-index: 2;
|
||||
font-size: 0.9rem;
|
||||
color: var(--search-icon-color);
|
||||
}
|
||||
|
||||
@include bp.lt(bp.get(lg)) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@include bp.lg {
|
||||
max-width: v.$search-max-width;
|
||||
}
|
||||
|
||||
@include bp.xl {
|
||||
margin-right: 4rem;
|
||||
}
|
||||
|
||||
@include bp.xxxl {
|
||||
margin-right: calc(
|
||||
v.$main-content-max-width / 4 - v.$search-max-width - 0.75rem
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
#search-result-wrapper {
|
||||
display: none;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
overflow: auto;
|
||||
|
||||
.content {
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
@include bp.lt(bp.get(lg)) {
|
||||
width: 100%;
|
||||
|
||||
.content {
|
||||
letter-spacing: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@include bp.lg {
|
||||
max-width: v.$main-content-max-width;
|
||||
justify-content: start !important;
|
||||
}
|
||||
}
|
||||
|
||||
#search-results {
|
||||
padding-bottom: 3rem;
|
||||
|
||||
@include bp.between(bp.get(lg), calc(#{bp.get(xl)} - 1px)) {
|
||||
> div {
|
||||
max-width: 700px;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
font-size: 1.4rem;
|
||||
line-height: 1.5rem;
|
||||
|
||||
&:hover {
|
||||
@extend %link-hover;
|
||||
}
|
||||
|
||||
@extend %link-color;
|
||||
@extend %no-bottom-border;
|
||||
@extend %heading;
|
||||
}
|
||||
|
||||
> article {
|
||||
width: 100%;
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
@include bp.xl {
|
||||
width: 45%;
|
||||
|
||||
&:nth-child(odd) {
|
||||
margin-right: 1.5rem;
|
||||
}
|
||||
|
||||
&:nth-child(even) {
|
||||
margin-left: 1.5rem;
|
||||
}
|
||||
|
||||
&:last-child:nth-child(odd) {
|
||||
position: relative;
|
||||
right: 24.3%;
|
||||
}
|
||||
}
|
||||
|
||||
h2 {
|
||||
line-height: 2.5rem;
|
||||
}
|
||||
|
||||
/* icons */
|
||||
i {
|
||||
color: #818182;
|
||||
margin-right: 0.15rem;
|
||||
font-size: 80%;
|
||||
}
|
||||
|
||||
> p {
|
||||
@extend %text-ellipsis;
|
||||
|
||||
white-space: break-spaces;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 3;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 'Cancel' link */
|
||||
#search-cancel {
|
||||
color: var(--link-color);
|
||||
display: none;
|
||||
white-space: nowrap;
|
||||
|
||||
@extend %cursor-pointer;
|
||||
}
|
||||
|
||||
#search-input {
|
||||
background: center;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
padding: 0.18rem 0.3rem;
|
||||
color: var(--text-color);
|
||||
height: auto;
|
||||
|
||||
&:focus {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
@include bp.xl {
|
||||
transition: all 0.3s ease-in-out;
|
||||
}
|
||||
}
|
||||
|
||||
#search-hints {
|
||||
padding: 0 1rem;
|
||||
|
||||
@include bp.lg {
|
||||
display: none;
|
||||
}
|
||||
|
||||
h4 {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.post-tag {
|
||||
display: inline-block;
|
||||
line-height: 1rem;
|
||||
font-size: 1rem;
|
||||
background: var(--search-tag-bg);
|
||||
border: none;
|
||||
padding: 0.5rem;
|
||||
margin: 0 1.25rem 1rem 0;
|
||||
|
||||
&::before {
|
||||
content: '#';
|
||||
color: var(--text-muted-color);
|
||||
padding-right: 0.2rem;
|
||||
}
|
||||
|
||||
@extend %link-color;
|
||||
}
|
||||
}
|
||||
@@ -1,6 +1,4 @@
|
||||
/*
|
||||
Styles for Tab Tags
|
||||
*/
|
||||
@use '../abstracts/breakpoints' as bp;
|
||||
|
||||
.tag {
|
||||
border-radius: 0.7em;
|
||||
@@ -17,3 +15,9 @@
|
||||
font-family: Oswald, sans-serif;
|
||||
}
|
||||
}
|
||||
|
||||
#tags {
|
||||
@include bp.lt(bp.get(lg)) {
|
||||
justify-content: center !important;
|
||||
}
|
||||
}
|
||||
@@ -1,8 +1,6 @@
|
||||
/*
|
||||
* The main dark mode styles
|
||||
*/
|
||||
@mixin styles {
|
||||
color-scheme: dark;
|
||||
|
||||
@mixin dark-scheme {
|
||||
/* Framework color */
|
||||
--main-bg: rgb(27, 27, 30);
|
||||
--mask-bg: rgb(68, 69, 70);
|
||||
@@ -100,7 +98,18 @@
|
||||
--timeline-color: rgb(63, 65, 68);
|
||||
--timeline-year-dot-color: var(--timeline-color);
|
||||
|
||||
color-scheme: dark;
|
||||
/* Code highlight colors */
|
||||
--language-border-color: #2d2d2d;
|
||||
--highlight-bg-color: #151515;
|
||||
--highlighter-rouge-color: #c9def1;
|
||||
--highlight-lineno-color: #808080;
|
||||
--inline-code-bg: rgba(255, 255, 255, 0.05);
|
||||
--code-color: #b0b0b0;
|
||||
--code-header-text-color: #6a6a6a;
|
||||
--code-header-muted-color: #353535;
|
||||
--code-header-icon-color: #565656;
|
||||
--clipboard-checked-color: #2bcc2b;
|
||||
--filepath-text-color: #cacaca;
|
||||
|
||||
.light {
|
||||
display: none;
|
||||
@@ -144,4 +153,151 @@
|
||||
#disqus_thread {
|
||||
color-scheme: none;
|
||||
}
|
||||
} /* dark-scheme */
|
||||
|
||||
/* --- Syntax highlight theme from `rougify style base16.dark` --- */
|
||||
|
||||
.highlight .gp {
|
||||
color: #87939d;
|
||||
}
|
||||
|
||||
.highlight table td {
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.highlight table pre {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.highlight,
|
||||
.highlight .w {
|
||||
color: #d0d0d0;
|
||||
background-color: #151515;
|
||||
}
|
||||
|
||||
.highlight .err {
|
||||
color: #151515;
|
||||
background-color: #ac4142;
|
||||
}
|
||||
|
||||
.highlight .c,
|
||||
.highlight .ch,
|
||||
.highlight .cd,
|
||||
.highlight .cm,
|
||||
.highlight .cpf,
|
||||
.highlight .c1,
|
||||
.highlight .cs {
|
||||
color: #848484;
|
||||
}
|
||||
|
||||
.highlight .cp {
|
||||
color: #f4bf75;
|
||||
}
|
||||
|
||||
.highlight .nt {
|
||||
color: #f4bf75;
|
||||
}
|
||||
|
||||
.highlight .o,
|
||||
.highlight .ow {
|
||||
color: #d0d0d0;
|
||||
}
|
||||
|
||||
.highlight .p,
|
||||
.highlight .pi {
|
||||
color: #d0d0d0;
|
||||
}
|
||||
|
||||
.highlight .gi {
|
||||
color: #90a959;
|
||||
}
|
||||
|
||||
.highlight .gd {
|
||||
color: #f08a8b;
|
||||
background-color: #320000;
|
||||
}
|
||||
|
||||
.highlight .gh {
|
||||
color: #6a9fb5;
|
||||
background-color: #151515;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.highlight .k,
|
||||
.highlight .kn,
|
||||
.highlight .kp,
|
||||
.highlight .kr,
|
||||
.highlight .kv {
|
||||
color: #aa759f;
|
||||
}
|
||||
|
||||
.highlight .kc {
|
||||
color: #d28445;
|
||||
}
|
||||
|
||||
.highlight .kt {
|
||||
color: #d28445;
|
||||
}
|
||||
|
||||
.highlight .kd {
|
||||
color: #d28445;
|
||||
}
|
||||
|
||||
.highlight .s,
|
||||
.highlight .sb,
|
||||
.highlight .sc,
|
||||
.highlight .dl,
|
||||
.highlight .sd,
|
||||
.highlight .s2,
|
||||
.highlight .sh,
|
||||
.highlight .sx,
|
||||
.highlight .s1 {
|
||||
color: #90a959;
|
||||
}
|
||||
|
||||
.highlight .sa {
|
||||
color: #aa759f;
|
||||
}
|
||||
|
||||
.highlight .sr {
|
||||
color: #75b5aa;
|
||||
}
|
||||
|
||||
.highlight .si {
|
||||
color: #b76d45;
|
||||
}
|
||||
|
||||
.highlight .se {
|
||||
color: #b76d45;
|
||||
}
|
||||
|
||||
.highlight .nn {
|
||||
color: #f4bf75;
|
||||
}
|
||||
|
||||
.highlight .nc {
|
||||
color: #f4bf75;
|
||||
}
|
||||
|
||||
.highlight .no {
|
||||
color: #f4bf75;
|
||||
}
|
||||
|
||||
.highlight .na {
|
||||
color: #6a9fb5;
|
||||
}
|
||||
|
||||
.highlight .m,
|
||||
.highlight .mb,
|
||||
.highlight .mf,
|
||||
.highlight .mh,
|
||||
.highlight .mi,
|
||||
.highlight .il,
|
||||
.highlight .mo,
|
||||
.highlight .mx {
|
||||
color: #90a959;
|
||||
}
|
||||
|
||||
.highlight .ss {
|
||||
color: #90a959;
|
||||
}
|
||||
}
|
||||
313
_sass/themes/_light.scss
Normal file
313
_sass/themes/_light.scss
Normal file
@@ -0,0 +1,313 @@
|
||||
@mixin styles {
|
||||
/* Framework color */
|
||||
--main-bg: white;
|
||||
--mask-bg: #c1c3c5;
|
||||
--main-border-color: #f3f3f3;
|
||||
|
||||
/* Common color */
|
||||
--text-color: #34343c;
|
||||
--text-muted-color: #757575;
|
||||
--text-muted-highlight-color: inherit;
|
||||
--heading-color: #2a2a2a;
|
||||
--label-color: #585858;
|
||||
--blockquote-border-color: #eeeeee;
|
||||
--blockquote-text-color: #757575;
|
||||
--link-color: #0056b2;
|
||||
--link-underline-color: #dee2e6;
|
||||
--button-bg: #ffffff;
|
||||
--btn-border-color: #e9ecef;
|
||||
--btn-backtotop-color: #686868;
|
||||
--btn-backtotop-border-color: #f1f1f1;
|
||||
--checkbox-color: #c5c5c5;
|
||||
--checkbox-checked-color: #07a8f7;
|
||||
--img-bg: radial-gradient(
|
||||
circle,
|
||||
rgb(255, 255, 255) 0%,
|
||||
rgb(239, 239, 239) 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 */
|
||||
--site-title-color: rgb(113, 113, 113);
|
||||
--site-subtitle-color: #717171;
|
||||
--sidebar-bg: #f6f8fa;
|
||||
--sidebar-border-color: #efefef;
|
||||
--sidebar-muted-color: #545454;
|
||||
--sidebar-active-color: #1d1d1d;
|
||||
--sidebar-hover-bg: rgb(223, 233, 241, 0.64);
|
||||
--sidebar-btn-bg: white;
|
||||
--sidebar-btn-color: #8e8e8e;
|
||||
--avatar-border-color: white;
|
||||
|
||||
/* Topbar */
|
||||
--topbar-bg: rgb(255, 255, 255, 0.7);
|
||||
--topbar-text-color: rgb(78, 78, 78);
|
||||
--search-border-color: rgb(240, 240, 240);
|
||||
--search-icon-color: #c2c6cc;
|
||||
--input-focus-border-color: #b8b8b8;
|
||||
|
||||
/* Home page */
|
||||
--post-list-text-color: dimgray;
|
||||
--btn-patinator-text-color: #555555;
|
||||
--btn-paginator-hover-color: var(--sidebar-bg);
|
||||
|
||||
/* Posts */
|
||||
--toc-highlight: #0550ae;
|
||||
--toc-popup-border-color: lightgray;
|
||||
--btn-share-color: gray;
|
||||
--btn-share-hover-color: #0d6efd;
|
||||
--card-bg: white;
|
||||
--card-hovor-bg: #e2e2e2;
|
||||
--card-shadow: rgb(104, 104, 104, 0.05) 0 2px 6px 0,
|
||||
rgba(211, 209, 209, 0.15) 0 0 0 1px;
|
||||
--footnote-target-bg: lightcyan;
|
||||
--tb-odd-bg: #fbfcfd;
|
||||
--tb-border-color: #eaeaea;
|
||||
--dash-color: silver;
|
||||
--kbd-wrap-color: #bdbdbd;
|
||||
--kbd-text-color: var(--text-color);
|
||||
--kbd-bg-color: white;
|
||||
--prompt-text-color: rgb(46, 46, 46, 0.77);
|
||||
--prompt-tip-bg: rgb(123, 247, 144, 0.2);
|
||||
--prompt-tip-icon-color: #03b303;
|
||||
--prompt-info-bg: #e1f5fe;
|
||||
--prompt-info-icon-color: #0070cb;
|
||||
--prompt-warning-bg: rgb(255, 243, 205);
|
||||
--prompt-warning-icon-color: #ef9c03;
|
||||
--prompt-danger-bg: rgb(248, 215, 218, 0.56);
|
||||
--prompt-danger-icon-color: #df3c30;
|
||||
|
||||
/* Tags */
|
||||
--tag-border: #dee2e6;
|
||||
--tag-shadow: var(--btn-border-color);
|
||||
--tag-hover: rgb(222, 226, 230);
|
||||
--search-tag-bg: #f8f9fa;
|
||||
|
||||
/* Categories */
|
||||
--categories-border: rgba(0, 0, 0, 0.125);
|
||||
--categories-hover-bg: var(--btn-border-color);
|
||||
--categories-icon-hover-color: darkslategray;
|
||||
|
||||
/* Archive */
|
||||
--timeline-color: rgba(0, 0, 0, 0.075);
|
||||
--timeline-node-bg: #c2c6cc;
|
||||
--timeline-year-dot-color: #ffffff;
|
||||
|
||||
/* --- Custom code light mode colors --- */
|
||||
--language-border-color: #ececec;
|
||||
--highlight-bg-color: #f6f8fa;
|
||||
--highlighter-rouge-color: #3f596f;
|
||||
--highlight-lineno-color: #9e9e9e;
|
||||
--inline-code-bg: rgba(25, 25, 28, 0.05);
|
||||
--code-color: #3a3a3a;
|
||||
--code-header-text-color: #a3a3a3;
|
||||
--code-header-muted-color: #e5e5e5;
|
||||
--code-header-icon-color: #c9c8c8;
|
||||
--clipboard-checked-color: #43c743;
|
||||
|
||||
[class^='prompt-'] {
|
||||
--link-underline-color: rgb(219, 216, 216);
|
||||
}
|
||||
|
||||
.dark {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* --- Syntax highlight theme from `rougify style github` --- */
|
||||
|
||||
.highlight table td {
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.highlight table pre {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.highlight,
|
||||
.highlight .w {
|
||||
color: #24292f;
|
||||
background-color: #f6f8fa;
|
||||
}
|
||||
|
||||
.highlight .k,
|
||||
.highlight .kd,
|
||||
.highlight .kn,
|
||||
.highlight .kp,
|
||||
.highlight .kr,
|
||||
.highlight .kt,
|
||||
.highlight .kv {
|
||||
color: #cf222e;
|
||||
}
|
||||
|
||||
.highlight .gr {
|
||||
color: #f6f8fa;
|
||||
}
|
||||
|
||||
.highlight .gd {
|
||||
color: #82071e;
|
||||
background-color: #ffebe9;
|
||||
}
|
||||
|
||||
.highlight .nb {
|
||||
color: #953800;
|
||||
}
|
||||
|
||||
.highlight .nc {
|
||||
color: #953800;
|
||||
}
|
||||
|
||||
.highlight .no {
|
||||
color: #953800;
|
||||
}
|
||||
|
||||
.highlight .nn {
|
||||
color: #953800;
|
||||
}
|
||||
|
||||
.highlight .sr {
|
||||
color: #116329;
|
||||
}
|
||||
|
||||
.highlight .na {
|
||||
color: #116329;
|
||||
}
|
||||
|
||||
.highlight .nt {
|
||||
color: #116329;
|
||||
}
|
||||
|
||||
.highlight .gi {
|
||||
color: #116329;
|
||||
background-color: #dafbe1;
|
||||
}
|
||||
|
||||
.highlight .kc {
|
||||
color: #0550ae;
|
||||
}
|
||||
|
||||
.highlight .l,
|
||||
.highlight .ld,
|
||||
.highlight .m,
|
||||
.highlight .mb,
|
||||
.highlight .mf,
|
||||
.highlight .mh,
|
||||
.highlight .mi,
|
||||
.highlight .il,
|
||||
.highlight .mo,
|
||||
.highlight .mx {
|
||||
color: #0550ae;
|
||||
}
|
||||
|
||||
.highlight .sb {
|
||||
color: #0550ae;
|
||||
}
|
||||
|
||||
.highlight .bp {
|
||||
color: #0550ae;
|
||||
}
|
||||
|
||||
.highlight .ne {
|
||||
color: #0550ae;
|
||||
}
|
||||
|
||||
.highlight .nl {
|
||||
color: #0550ae;
|
||||
}
|
||||
|
||||
.highlight .py {
|
||||
color: #0550ae;
|
||||
}
|
||||
|
||||
.highlight .nv,
|
||||
.highlight .vc,
|
||||
.highlight .vg,
|
||||
.highlight .vi,
|
||||
.highlight .vm {
|
||||
color: #0550ae;
|
||||
}
|
||||
|
||||
.highlight .o,
|
||||
.highlight .ow {
|
||||
color: #0550ae;
|
||||
}
|
||||
|
||||
.highlight .gh {
|
||||
color: #0550ae;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.highlight .gu {
|
||||
color: #0550ae;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.highlight .s,
|
||||
.highlight .sa,
|
||||
.highlight .sc,
|
||||
.highlight .dl,
|
||||
.highlight .sd,
|
||||
.highlight .s2,
|
||||
.highlight .se,
|
||||
.highlight .sh,
|
||||
.highlight .sx,
|
||||
.highlight .s1,
|
||||
.highlight .ss {
|
||||
color: #0a3069;
|
||||
}
|
||||
|
||||
.highlight .nd {
|
||||
color: #8250df;
|
||||
}
|
||||
|
||||
.highlight .nf,
|
||||
.highlight .fm {
|
||||
color: #8250df;
|
||||
}
|
||||
|
||||
.highlight .err {
|
||||
color: #f6f8fa;
|
||||
background-color: #82071e;
|
||||
}
|
||||
|
||||
.highlight .c,
|
||||
.highlight .ch,
|
||||
.highlight .cd,
|
||||
.highlight .cm,
|
||||
.highlight .cp,
|
||||
.highlight .cpf,
|
||||
.highlight .c1,
|
||||
.highlight .cs {
|
||||
color: #68717a;
|
||||
}
|
||||
|
||||
.highlight .gl {
|
||||
color: #68717a;
|
||||
}
|
||||
|
||||
.highlight .gt {
|
||||
color: #68717a;
|
||||
}
|
||||
|
||||
.highlight .ni {
|
||||
color: #24292f;
|
||||
}
|
||||
|
||||
.highlight .si {
|
||||
color: #24292f;
|
||||
}
|
||||
|
||||
.highlight .ge {
|
||||
color: #24292f;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.highlight .gs {
|
||||
color: #24292f;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
@@ -1,3 +0,0 @@
|
||||
/*
|
||||
Appending custom SCSS variables will override the default ones in `_sass/addon/variables.scsss`
|
||||
*/
|
||||
@@ -2,13 +2,8 @@
|
||||
layout: page
|
||||
title: "404: Page not found"
|
||||
permalink: /404.html
|
||||
|
||||
redirect_from:
|
||||
- /norobots/
|
||||
- /assets/
|
||||
- /posts/
|
||||
---
|
||||
|
||||
{% include lang.html %}
|
||||
|
||||
<p class="lead">{{ site.data.locales[lang].not_found.statement }}</p>
|
||||
<p class="lead">{{ site.data.locales[lang].not_found.statement }}</p>
|
||||
@@ -1,7 +1,8 @@
|
||||
---
|
||||
---
|
||||
|
||||
@import 'main
|
||||
/* prettier-ignore */
|
||||
@use 'main
|
||||
{%- if jekyll.environment == 'production' -%}
|
||||
.bundle
|
||||
{%- endif -%}
|
||||
|
||||
@@ -10,11 +10,8 @@ swcache: true
|
||||
"url": {{ post.url | relative_url | jsonify }},
|
||||
"categories": {{ post.categories | join: ', ' | jsonify }},
|
||||
"tags": {{ post.tags | join: ', ' | jsonify }},
|
||||
"date": "{{ post.date }}",
|
||||
{% include no-linenos.html content=post.content %}
|
||||
{% assign _content = content | strip_html | strip_newlines %}
|
||||
"snippet": {{ _content | truncate: 200 | jsonify }},
|
||||
"content": {{ _content | jsonify }}
|
||||
"date": {{ post.date | jsonify }},
|
||||
"content": {% include post-description.html json=true %}
|
||||
}{% unless forloop.last %},{% endunless %}
|
||||
{% endfor %}
|
||||
]
|
||||
|
||||
Submodule assets/lib updated: a231bc7e2c...02f4ada65d
@@ -1,5 +1,79 @@
|
||||
# Changelog
|
||||
|
||||
## [7.3.1](https://github.com/cotes2020/jekyll-theme-chirpy/compare/v7.3.0...v7.3.1) (2025-07-26)
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* escape special JSON characters in search results ([#2481](https://github.com/cotes2020/jekyll-theme-chirpy/issues/2481)) ([7615d72](https://github.com/cotes2020/jekyll-theme-chirpy/commit/7615d72e9300a1514ef2fc8ec941ab2974ba7eb4))
|
||||
|
||||
## [7.3.0](https://github.com/cotes2020/jekyll-theme-chirpy/compare/v7.2.4...v7.3.0) (2025-05-18)
|
||||
|
||||
### Features
|
||||
|
||||
* **i18n:** add Catalan Spanish locale translation ([#2349](https://github.com/cotes2020/jekyll-theme-chirpy/issues/2349)) ([167c98c](https://github.com/cotes2020/jekyll-theme-chirpy/commit/167c98c781d0607c90ede8fc73eb43dffeea6abd))
|
||||
* **i18n:** add Dutch locale ([#2076](https://github.com/cotes2020/jekyll-theme-chirpy/issues/2076)) ([981ddba](https://github.com/cotes2020/jekyll-theme-chirpy/commit/981ddba30e57934f9056b8d468f0d17db131e1e8))
|
||||
* **i18n:** add Japanese locale ([#2295](https://github.com/cotes2020/jekyll-theme-chirpy/issues/2295)) ([571c90f](https://github.com/cotes2020/jekyll-theme-chirpy/commit/571c90f13011eb91d0e1392218f3953060b920c9))
|
||||
* **i18n:** add persian language ([#2238](https://github.com/cotes2020/jekyll-theme-chirpy/issues/2238)) ([7d4d35c](https://github.com/cotes2020/jekyll-theme-chirpy/commit/7d4d35cd10109e78d60fbb6b25a9b205f780ad63))
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* avoid `mathjax` loading failure on page refresh ([#2389](https://github.com/cotes2020/jekyll-theme-chirpy/issues/2389)) ([401e2af](https://github.com/cotes2020/jekyll-theme-chirpy/commit/401e2af0f8a173d8437e03027c7aff558e8c0bde))
|
||||
* improve accuracy of moving `img` element classes ([#2399](https://github.com/cotes2020/jekyll-theme-chirpy/issues/2399)) ([d0f8f95](https://github.com/cotes2020/jekyll-theme-chirpy/commit/d0f8f9553e41536eb84ae2fdd3f3bc9d13f7ef8c))
|
||||
* prevent the search bar from moving when focused ([#2336](https://github.com/cotes2020/jekyll-theme-chirpy/issues/2336)) ([f744929](https://github.com/cotes2020/jekyll-theme-chirpy/commit/f7449299e88c71da2104f0007f2db23a8fa798be))
|
||||
* recognize global theme mode ([#2357](https://github.com/cotes2020/jekyll-theme-chirpy/issues/2357)) ([7708adb](https://github.com/cotes2020/jekyll-theme-chirpy/commit/7708adbf30e6dea51a84311b86bc224739f656f6))
|
||||
* **search:** avoid missing spaces between paragraphs in search results ([#2199](https://github.com/cotes2020/jekyll-theme-chirpy/issues/2199)) ([0eb7efa](https://github.com/cotes2020/jekyll-theme-chirpy/commit/0eb7efa7f53508bf6b48eb9d773d5c5047c3c525))
|
||||
* **ui:** fix incomplete border color on hover for tags ([#2359](https://github.com/cotes2020/jekyll-theme-chirpy/issues/2359)) ([c626447](https://github.com/cotes2020/jekyll-theme-chirpy/commit/c62644759cb4e0e07f7ee6eb9503ef69be62371b))
|
||||
|
||||
### Improvements
|
||||
|
||||
* **seo:** improve accessibility and aligns with best practices ([#2289](https://github.com/cotes2020/jekyll-theme-chirpy/issues/2289)) ([54d4d59](https://github.com/cotes2020/jekyll-theme-chirpy/commit/54d4d59d22ac543a14bfbd9bb3d6fb6756056041))
|
||||
|
||||
## [7.2.4](https://github.com/cotes2020/jekyll-theme-chirpy/compare/v7.2.3...v7.2.4) (2024-12-21)
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* toc not visible when switching from mobile to desktop mode ([#2139](https://github.com/cotes2020/jekyll-theme-chirpy/issues/2139)) ([32051da](https://github.com/cotes2020/jekyll-theme-chirpy/commit/32051dad03cb8f60fa4206969377b9674f9a3f0c))
|
||||
* **ui:** left borderline of TOC is notched ([#2140](https://github.com/cotes2020/jekyll-theme-chirpy/issues/2140)) ([8a4d0bc](https://github.com/cotes2020/jekyll-theme-chirpy/commit/8a4d0bc4ee9e142a11401cad80bc9605878f121d))
|
||||
|
||||
## [7.2.3](https://github.com/cotes2020/jekyll-theme-chirpy/compare/v7.2.2...v7.2.3) (2024-12-15)
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* refreshing mermaid theme may fail ([#2113](https://github.com/cotes2020/jekyll-theme-chirpy/issues/2113)) ([2f00d41](https://github.com/cotes2020/jekyll-theme-chirpy/commit/2f00d41861f1b06c2ff7fa4e67e14e647c3c34b0))
|
||||
* **ui:** gap between TOC entries is inconsistent ([#2119](https://github.com/cotes2020/jekyll-theme-chirpy/issues/2119)) ([1b4e318](https://github.com/cotes2020/jekyll-theme-chirpy/commit/1b4e318dc1cd57da812e11bf69ebb06083c213fc))
|
||||
* **ui:** slow script loading hides TOC fade-up effect in desktop ([#2120](https://github.com/cotes2020/jekyll-theme-chirpy/issues/2120)) ([e0c3faf](https://github.com/cotes2020/jekyll-theme-chirpy/commit/e0c3fafa470eb12bd04ffdf198018bc28b6de20d))
|
||||
|
||||
## [7.2.2](https://github.com/cotes2020/jekyll-theme-chirpy/compare/v7.2.1...v7.2.2) (2024-12-06)
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* js files in subdirectories are excluded from the site output ([#2101](https://github.com/cotes2020/jekyll-theme-chirpy/issues/2101)) ([f55cc31](https://github.com/cotes2020/jekyll-theme-chirpy/commit/f55cc31dbd0e7455328c80c7ef38186ad8e54099))
|
||||
|
||||
## [7.2.1](https://github.com/cotes2020/jekyll-theme-chirpy/compare/v7.2.0...v7.2.1) (2024-12-05)
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **build:** exclude `purgecss.js` from output files ([#2090](https://github.com/cotes2020/jekyll-theme-chirpy/issues/2090)) ([976e1a1](https://github.com/cotes2020/jekyll-theme-chirpy/commit/976e1a184b3dbe08991e8a50db4d5d7f8a0b7090))
|
||||
* correct the import condition for theme script ([#2075](https://github.com/cotes2020/jekyll-theme-chirpy/issues/2075)) ([a16aa7d](https://github.com/cotes2020/jekyll-theme-chirpy/commit/a16aa7d41e3c3cb28649bfa1361e8bcb91b9ca47))
|
||||
* ensure pageviews are fetched after DOM is loaded ([#2071](https://github.com/cotes2020/jekyll-theme-chirpy/issues/2071)) ([b4019f3](https://github.com/cotes2020/jekyll-theme-chirpy/commit/b4019f3517e4a3284df51567d29938cb12bf3acc))
|
||||
* **toc:** resume fade up animation in desktop mode ([#2085](https://github.com/cotes2020/jekyll-theme-chirpy/issues/2085)) ([8280adb](https://github.com/cotes2020/jekyll-theme-chirpy/commit/8280adb901b9d15cc1bc18009553aae8746121d8))
|
||||
|
||||
## [7.2.0](https://github.com/cotes2020/jekyll-theme-chirpy/compare/v7.1.1...v7.2.0) (2024-11-28)
|
||||
|
||||
### Features
|
||||
|
||||
* show toc on mobile screens ([#1964](https://github.com/cotes2020/jekyll-theme-chirpy/issues/1964)) ([8a064a5](https://github.com/cotes2020/jekyll-theme-chirpy/commit/8a064a5e5a95cd22aa654f7c80da09d107262508))
|
||||
* support vertical scrolling for toc in desktop mode ([#2064](https://github.com/cotes2020/jekyll-theme-chirpy/issues/2064)) ([5265b03](https://github.com/cotes2020/jekyll-theme-chirpy/commit/5265b039741555943f9a6f0451287aefb6810f28))
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* pagination error when pinned posts exceed the page size ([#1965](https://github.com/cotes2020/jekyll-theme-chirpy/issues/1965)) ([93f616b](https://github.com/cotes2020/jekyll-theme-chirpy/commit/93f616b25d7ed6c4f090c50c8663f8c1f59947f4))
|
||||
|
||||
### Improvements
|
||||
|
||||
* modular sass architecture ([#2052](https://github.com/cotes2020/jekyll-theme-chirpy/issues/2052)) ([35c794c](https://github.com/cotes2020/jekyll-theme-chirpy/commit/35c794cf5896565430389f35c660b88a93cebb17))
|
||||
* speed up page rendering and jekyll build process ([#2034](https://github.com/cotes2020/jekyll-theme-chirpy/issues/2034)) ([65f960c](https://github.com/cotes2020/jekyll-theme-chirpy/commit/65f960c31a734b5306a8b919040c3aae9b783efd))
|
||||
|
||||
## [7.1.1](https://github.com/cotes2020/jekyll-theme-chirpy/compare/v7.1.0...v7.1.1) (2024-09-23)
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
5
eslint.config.js
Normal file
5
eslint.config.js
Normal file
@@ -0,0 +1,5 @@
|
||||
export default [
|
||||
{
|
||||
files: ['_javascript/**/*.js']
|
||||
}
|
||||
];
|
||||
@@ -2,7 +2,7 @@
|
||||
|
||||
Gem::Specification.new do |spec|
|
||||
spec.name = "jekyll-theme-chirpy"
|
||||
spec.version = "7.1.1"
|
||||
spec.version = "7.3.1"
|
||||
spec.authors = ["Cotes Chung"]
|
||||
spec.email = ["cotes.chung@gmail.com"]
|
||||
|
||||
@@ -27,7 +27,6 @@ Gem::Specification.new do |spec|
|
||||
|
||||
spec.add_runtime_dependency "jekyll", "~> 4.3"
|
||||
spec.add_runtime_dependency "jekyll-paginate", "~> 1.1"
|
||||
spec.add_runtime_dependency "jekyll-redirect-from", "~> 0.16"
|
||||
spec.add_runtime_dependency "jekyll-seo-tag", "~> 2.8"
|
||||
spec.add_runtime_dependency "jekyll-archives", "~> 2.2"
|
||||
spec.add_runtime_dependency "jekyll-sitemap", "~> 1.4"
|
||||
|
||||
71
package.json
71
package.json
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "jekyll-theme-chirpy",
|
||||
"version": "7.1.1",
|
||||
"version": "7.3.1",
|
||||
"description": "A minimal, responsive, and feature-rich Jekyll theme for technical writing.",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
@@ -15,7 +15,7 @@
|
||||
"homepage": "https://github.com/cotes2020/jekyll-theme-chirpy/",
|
||||
"scripts": {
|
||||
"build": "concurrently npm:build:*",
|
||||
"build:css": "purgecss -c purgecss.config.js",
|
||||
"build:css": "node purgecss.js",
|
||||
"build:js": "rollup -c --bundleConfigAsCjs --environment BUILD:production",
|
||||
"watch:js": "rollup -c --bundleConfigAsCjs -w",
|
||||
"lint:scss": "stylelint _sass/**/*.scss",
|
||||
@@ -25,29 +25,29 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@popperjs/core": "^2.11.8",
|
||||
"bootstrap": "^5.3.3"
|
||||
"bootstrap": "^5.3.6"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.25.2",
|
||||
"@babel/plugin-transform-class-properties": "^7.25.4",
|
||||
"@babel/plugin-transform-private-methods": "^7.25.7",
|
||||
"@babel/preset-env": "^7.25.4",
|
||||
"@commitlint/cli": "^19.5.0",
|
||||
"@commitlint/config-conventional": "^19.5.0",
|
||||
"@babel/core": "^7.27.1",
|
||||
"@babel/plugin-transform-class-properties": "^7.27.1",
|
||||
"@babel/plugin-transform-private-methods": "^7.27.1",
|
||||
"@babel/preset-env": "^7.27.2",
|
||||
"@commitlint/cli": "^19.8.1",
|
||||
"@commitlint/config-conventional": "^19.8.1",
|
||||
"@rollup/plugin-babel": "^6.0.4",
|
||||
"@rollup/plugin-node-resolve": "^15.2.3",
|
||||
"@rollup/plugin-node-resolve": "^16.0.1",
|
||||
"@rollup/plugin-terser": "^0.4.4",
|
||||
"@semantic-release/changelog": "^6.0.3",
|
||||
"@semantic-release/exec": "^6.0.3",
|
||||
"@semantic-release/exec": "^7.1.0",
|
||||
"@semantic-release/git": "^10.0.1",
|
||||
"concurrently": "^9.0.1",
|
||||
"concurrently": "^9.1.2",
|
||||
"conventional-changelog-conventionalcommits": "^8.0.0",
|
||||
"husky": "^9.1.6",
|
||||
"purgecss": "^6.0.0",
|
||||
"rollup": "^4.21.3",
|
||||
"semantic-release": "^24.1.1",
|
||||
"stylelint": "^16.9.0",
|
||||
"stylelint-config-standard-scss": "^13.1.0"
|
||||
"husky": "^9.1.7",
|
||||
"purgecss": "^7.0.2",
|
||||
"rollup": "^4.41.0",
|
||||
"semantic-release": "^24.2.4",
|
||||
"stylelint": "^16.19.1",
|
||||
"stylelint-config-standard-scss": "^15.0.1"
|
||||
},
|
||||
"prettier": {
|
||||
"trailingComma": "none"
|
||||
@@ -68,41 +68,6 @@
|
||||
]
|
||||
}
|
||||
},
|
||||
"stylelint": {
|
||||
"extends": "stylelint-config-standard-scss",
|
||||
"rules": {
|
||||
"no-descending-specificity": null,
|
||||
"shorthand-property-no-redundant-values": null,
|
||||
"at-rule-no-vendor-prefix": null,
|
||||
"property-no-vendor-prefix": null,
|
||||
"selector-no-vendor-prefix": null,
|
||||
"value-no-vendor-prefix": null,
|
||||
"color-function-notation": "legacy",
|
||||
"alpha-value-notation": "number",
|
||||
"selector-not-notation": "simple",
|
||||
"color-hex-length": "long",
|
||||
"declaration-block-single-line-max-declarations": 3,
|
||||
"scss/operator-no-newline-after": null,
|
||||
"rule-empty-line-before": [
|
||||
"always",
|
||||
{
|
||||
"ignore": [
|
||||
"after-comment",
|
||||
"first-nested"
|
||||
]
|
||||
}
|
||||
],
|
||||
"value-keyword-case": [
|
||||
"lower",
|
||||
{
|
||||
"ignoreProperties": [
|
||||
"/^\\$/"
|
||||
]
|
||||
}
|
||||
],
|
||||
"media-feature-range-notation": "prefix"
|
||||
}
|
||||
},
|
||||
"release": {
|
||||
"branches": [
|
||||
"production"
|
||||
|
||||
@@ -1,23 +0,0 @@
|
||||
const fs = require('fs');
|
||||
const DIST_PATH = '_sass/dist';
|
||||
|
||||
fs.rm(DIST_PATH, { recursive: true, force: true }, (err) => {
|
||||
if (err) {
|
||||
throw err;
|
||||
}
|
||||
|
||||
fs.mkdirSync(DIST_PATH);
|
||||
});
|
||||
|
||||
module.exports = {
|
||||
content: ['_includes/**/*.html', '_layouts/**/*.html', '_javascript/**/*.js'],
|
||||
css: ['node_modules/bootstrap/dist/css/bootstrap.min.css'],
|
||||
keyframes: true,
|
||||
variables: true,
|
||||
output: `${DIST_PATH}/bootstrap.css`,
|
||||
// The `safelist` should be changed appropriately for future development
|
||||
safelist: {
|
||||
standard: [/^collaps/, /^w-/, 'shadow', 'border', 'kbd'],
|
||||
greedy: [/^col-/, /tooltip/]
|
||||
}
|
||||
};
|
||||
30
purgecss.js
Normal file
30
purgecss.js
Normal file
@@ -0,0 +1,30 @@
|
||||
const fs = require('fs').promises;
|
||||
const { PurgeCSS } = require('purgecss');
|
||||
const DIST_PATH = '_sass/vendors';
|
||||
const output = `${DIST_PATH}/_bootstrap.scss`;
|
||||
|
||||
const config = {
|
||||
content: ['_includes/**/*.html', '_layouts/**/*.html', '_javascript/**/*.js'],
|
||||
css: ['node_modules/bootstrap/dist/css/bootstrap.min.css'],
|
||||
keyframes: true,
|
||||
variables: true,
|
||||
// The `safelist` should be changed appropriately for future development
|
||||
safelist: {
|
||||
standard: [/^collaps/, /^w-/, 'shadow', 'border', 'kbd'],
|
||||
greedy: [/^col-/, /tooltip/]
|
||||
}
|
||||
};
|
||||
|
||||
function main() {
|
||||
fs.rm(DIST_PATH, { recursive: true, force: true })
|
||||
.then(() => fs.mkdir(DIST_PATH))
|
||||
.then(() => new PurgeCSS().purge(config))
|
||||
.then((result) => {
|
||||
return fs.writeFile(output, result[0].css);
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error('Error during PurgeCSS process:', err);
|
||||
});
|
||||
}
|
||||
|
||||
main();
|
||||
@@ -11,11 +11,11 @@ const DIST = 'assets/js/dist';
|
||||
const banner = `/*!
|
||||
* ${pkg.name} v${pkg.version} | © ${pkg.since} ${pkg.author} | ${pkg.license} Licensed | ${pkg.homepage}
|
||||
*/`;
|
||||
|
||||
const frontmatter = `---\npermalink: /:basename\n---\n`;
|
||||
|
||||
const isProd = process.env.BUILD === 'production';
|
||||
|
||||
let hasWatched = false;
|
||||
|
||||
function cleanup() {
|
||||
fs.rmSync(DIST, { recursive: true, force: true });
|
||||
console.log(`> Directory "${DIST}" has been cleaned.`);
|
||||
@@ -39,6 +39,11 @@ function build(
|
||||
{ src = SRC_DEFAULT, jekyll = false, outputName = null } = {}
|
||||
) {
|
||||
const input = `${src}/${filename}.js`;
|
||||
const shouldWatch = hasWatched ? false : true;
|
||||
|
||||
if (!hasWatched) {
|
||||
hasWatched = true;
|
||||
}
|
||||
|
||||
return {
|
||||
input,
|
||||
@@ -49,9 +54,7 @@ function build(
|
||||
banner,
|
||||
sourcemap: !isProd && !jekyll
|
||||
},
|
||||
watch: {
|
||||
include: input
|
||||
},
|
||||
...(shouldWatch && { watch: { include: `${SRC_DEFAULT}/**/*.js` } }),
|
||||
plugins: [
|
||||
babel({
|
||||
babelHelpers: 'bundled',
|
||||
@@ -77,7 +80,7 @@ export default [
|
||||
build('page'),
|
||||
build('post'),
|
||||
build('misc'),
|
||||
build('theme', { src: `${SRC_DEFAULT}/modules`, outputName: 'Theme' }),
|
||||
build('theme', { outputName: 'Theme' }),
|
||||
build('app', { src: SRC_PWA, jekyll: true }),
|
||||
build('sw', { src: SRC_PWA, jekyll: true })
|
||||
];
|
||||
|
||||
@@ -92,7 +92,8 @@ init_files() {
|
||||
npm i && npm run build
|
||||
|
||||
# track the CSS/JS output
|
||||
_sedi "/.*\/dist$/d" .gitignore
|
||||
_sedi "/^_sass\/vendors/d" .gitignore
|
||||
_sedi "/^assets\/js\/dist/d" .gitignore
|
||||
}
|
||||
|
||||
commit() {
|
||||
|
||||
@@ -15,7 +15,7 @@ NODE_SPEC="package.json"
|
||||
CHANGELOG="docs/CHANGELOG.md"
|
||||
CONFIG="_config.yml"
|
||||
|
||||
CSS_DIST="_sass/dist"
|
||||
CSS_DIST="_sass/vendors"
|
||||
JS_DIST="assets/js/dist"
|
||||
|
||||
FILES=(
|
||||
|
||||
Reference in New Issue
Block a user