mirror of
https://github.com/cotes2020/jekyll-theme-chirpy.git
synced 2025-12-18 13:44:15 +00:00
Compare commits
2 Commits
v7.3.0
...
3acd27abd6
| Author | SHA1 | Date | |
|---|---|---|---|
|
3acd27abd6 | ||
|
|
cafc76e940 |
25
.github/workflows/style-lint.yml
vendored
Normal file
25
.github/workflows/style-lint.yml
vendored
Normal file
@@ -0,0 +1,25 @@
|
||||
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/vendors
|
||||
_sass/dist
|
||||
assets/js/dist
|
||||
|
||||
@@ -1,31 +0,0 @@
|
||||
{
|
||||
"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,9 +212,8 @@ exclude:
|
||||
- tools
|
||||
- README.md
|
||||
- LICENSE
|
||||
- purgecss.js
|
||||
- "*.config.js"
|
||||
- "package*.json"
|
||||
- package*.json
|
||||
|
||||
jekyll-archives:
|
||||
enabled: [categories, tags]
|
||||
|
||||
@@ -1,84 +0,0 @@
|
||||
# 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
|
||||
@@ -1,91 +0,0 @@
|
||||
# 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: پستها
|
||||
@@ -1,84 +0,0 @@
|
||||
# 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: 投稿
|
||||
@@ -1,90 +0,0 @@
|
||||
# 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.32.2/dist/tocbot.min.css
|
||||
js: https://cdn.jsdelivr.net/npm/tocbot@4.32.2/dist/tocbot.min.js
|
||||
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
|
||||
|
||||
fontawesome:
|
||||
css: https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.7.1/css/all.min.css
|
||||
css: https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.6.0/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.4.0/dist/mermaid.min.js
|
||||
js: https://cdn.jsdelivr.net/npm/mermaid@11.0.2/dist/mermaid.min.js
|
||||
|
||||
dayjs:
|
||||
js:
|
||||
|
||||
@@ -18,7 +18,7 @@ platforms:
|
||||
#
|
||||
# - type: Linkedin
|
||||
# icon: "fab fa-linkedin"
|
||||
# link: "https://www.linkedin.com/feed/?shareActive=true&shareUrl=URL"
|
||||
# link: "https://www.linkedin.com/sharing/share-offsite/?url=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.6/dist/css/bootstrap.min.css">
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css">
|
||||
{% endunless %}
|
||||
|
||||
<!-- Theme style -->
|
||||
@@ -99,7 +99,9 @@
|
||||
|
||||
<!-- Scripts -->
|
||||
|
||||
<script src="{{ '/assets/js/dist/theme.min.js' | relative_url }}"></script>
|
||||
{% unless site.theme_mode %}
|
||||
<script src="{{ '/assets/js/dist/theme.min.js' | relative_url }}"></script>
|
||||
{% endunless %}
|
||||
|
||||
{% include js-selector.html lang=lang %}
|
||||
|
||||
|
||||
@@ -66,7 +66,7 @@
|
||||
|
||||
{% if page.math %}
|
||||
<!-- MathJax -->
|
||||
<script src="{{ '/assets/js/data/mathjax.js' | relative_url }}"></script>
|
||||
<script async 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 %}
|
||||
|
||||
10
_includes/no-linenos.html
Normal file
10
_includes/no-linenos.html
Normal file
@@ -0,0 +1,10 @@
|
||||
{% 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,21 +1,19 @@
|
||||
<!-- Display GoatCounter pageviews -->
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const pv = document.getElementById('pageviews');
|
||||
let 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>
|
||||
|
||||
@@ -8,17 +8,8 @@
|
||||
{%- 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 | markdownify | strip_html | newline_to_br | replace: '<br />', ' ' | strip_newlines -}}
|
||||
{%- include no-linenos.html content=post.content -%}
|
||||
{{- content | markdownify | strip_html -}}
|
||||
{%- endif -%}
|
||||
{%- endcapture -%}
|
||||
|
||||
|
||||
@@ -88,41 +88,9 @@
|
||||
{% endfor %}
|
||||
|
||||
<!-- take out classes -->
|
||||
{% assign _wrapper_class = '' %}
|
||||
|
||||
{% if _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 %}
|
||||
{% capture _old_class %}class="{{ _class }}"{% endcapture %}
|
||||
{% assign _left = _left | remove: _old_class %}
|
||||
{% endif %}
|
||||
|
||||
{% assign _final_src = null %}
|
||||
@@ -142,7 +110,7 @@
|
||||
|
||||
{% if _lqip %}
|
||||
{% assign _lazyload = false %}
|
||||
{% assign _wrapper_class = _wrapper_class | append: ' blur' %}
|
||||
{% assign _class = _class | append: ' blur' %}
|
||||
|
||||
{% unless _lqip contains 'data:' %}
|
||||
{% assign _lqip_alt = 'lqip="' | append: _path_prefix %}
|
||||
@@ -153,7 +121,7 @@
|
||||
{% assign _left = _left | replace: 'src=', 'data-src=' | replace: ' lqip=', ' data-lqip="true" src=' %}
|
||||
|
||||
{% else %}
|
||||
{% assign _wrapper_class = _wrapper_class | append: ' shimmer' %}
|
||||
{% assign _class = _class | append: ' shimmer' %}
|
||||
{% endif %}
|
||||
|
||||
<!-- lazy-load images -->
|
||||
@@ -185,8 +153,8 @@
|
||||
{% assign _wrapper_start = _final_src
|
||||
| default: _src
|
||||
| prepend: '<a href="'
|
||||
| append: '" class="popup img-link'
|
||||
| append: _wrapper_class
|
||||
| append: '" class="popup img-link '
|
||||
| append: _class
|
||||
| append: '">'
|
||||
%}
|
||||
|
||||
|
||||
@@ -12,7 +12,7 @@
|
||||
{tags}
|
||||
</div>
|
||||
</header>
|
||||
<p>{content}</p>
|
||||
<p>{snippet}</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 lang=include.lang %}
|
||||
{% include_cached trending-tags.html %}
|
||||
</div>
|
||||
<div id="search-results" class="d-flex flex-wrap justify-content-center text-muted mt-3"></div>
|
||||
</div>
|
||||
|
||||
@@ -1,9 +1,8 @@
|
||||
{% include toc-status.html %}
|
||||
|
||||
{% if enable_toc %}
|
||||
<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>
|
||||
<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>
|
||||
<nav id="toc"></nav>
|
||||
</section>
|
||||
{% endif %}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<!-- The Top Bar -->
|
||||
|
||||
<header id="topbar-wrapper" class="flex-shrink-0" aria-label="Top Bar">
|
||||
<header id="topbar-wrapper" 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" aria-label="Sidebar">
|
||||
<button type="button" id="sidebar-trigger" class="btn btn-link">
|
||||
<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" aria-label="Search">
|
||||
<button type="button" id="search-trigger" class="btn btn-link">
|
||||
<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).textContent;
|
||||
const svgCode = elem.previousSibling.children.item(0).innerHTML;
|
||||
elem.textContent = svgCode;
|
||||
elem.removeAttribute('data-processed');
|
||||
});
|
||||
|
||||
@@ -27,9 +27,6 @@ function init() {
|
||||
mobile.init();
|
||||
}
|
||||
|
||||
const $tocWrapper = document.getElementById('toc-wrapper');
|
||||
$tocWrapper.classList.remove('invisible');
|
||||
|
||||
desktopMode.onchange = refresh;
|
||||
}
|
||||
|
||||
|
||||
@@ -15,6 +15,8 @@ export class TocDesktop {
|
||||
}
|
||||
|
||||
static init() {
|
||||
tocbot.init(this.options);
|
||||
if (document.getElementById('toc-wrapper')) {
|
||||
tocbot.init(this.options);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -39,10 +39,7 @@ class Theme {
|
||||
}
|
||||
|
||||
static get #mode() {
|
||||
return (
|
||||
sessionStorage.getItem(this.#modeKey) ||
|
||||
document.documentElement.getAttribute(this.#modeAttr)
|
||||
);
|
||||
return sessionStorage.getItem(this.#modeKey);
|
||||
}
|
||||
|
||||
static get #isDarkMode() {
|
||||
@@ -33,7 +33,7 @@ layout: compress
|
||||
</main>
|
||||
|
||||
<!-- panel -->
|
||||
<aside aria-label="Panel" id="panel-wrapper" class="col-xl-3 ps-2 text-muted">
|
||||
<aside aria-label="Panel" id="panel-wrapper" class="col-xl-3 ps-2 mb-5 text-muted">
|
||||
<div class="access">
|
||||
{% include_cached update-list.html lang=lang %}
|
||||
{% include_cached trending-tags.html lang=lang %}
|
||||
|
||||
@@ -45,12 +45,15 @@ script_includes:
|
||||
{%- capture lqip -%}lqip="{{ page.image.lqip }}"{%- endcapture -%}
|
||||
{% 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>
|
||||
{% 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 %}
|
||||
|
||||
{% 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_CATEGORY, SUB_CATEGORY]
|
||||
categories: [TOP_CATEGORIE, SUB_CATEGORIE]
|
||||
tags: [TAG] # TAG names should always be lowercase
|
||||
---
|
||||
```
|
||||
@@ -97,7 +97,7 @@ toc: false
|
||||
|
||||
## Comments
|
||||
|
||||
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.
|
||||
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.
|
||||
|
||||
If you want to close the comment for a specific post, add the following to the **Front Matter** of the post:
|
||||
|
||||
@@ -227,6 +227,7 @@ 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 serve
|
||||
$ bundle exec jekyll s
|
||||
```
|
||||
|
||||
> If you are using Dev Containers, you must run that command in the **VS Code** Terminal.
|
||||
@@ -93,6 +93,8 @@ 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.
|
||||
|
||||
@@ -1,73 +0,0 @@
|
||||
@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;
|
||||
}
|
||||
}
|
||||
@@ -1,4 +0,0 @@
|
||||
@forward 'variables';
|
||||
@forward 'mixins';
|
||||
@forward 'placeholders';
|
||||
@forward 'breakpoints';
|
||||
@@ -1,80 +0,0 @@
|
||||
@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%;
|
||||
}
|
||||
1526
_sass/addon/commons.scss
Normal file
1526
_sass/addon/commons.scss
Normal file
File diff suppressed because it is too large
Load Diff
@@ -1,10 +1,13 @@
|
||||
@use 'variables' as v;
|
||||
@use 'mixins' as mx;
|
||||
/*
|
||||
* Mainly scss modules, only imported to `assets/css/main.scss`
|
||||
*/
|
||||
|
||||
/* ---------- scss placeholder --------- */
|
||||
|
||||
%heading {
|
||||
color: var(--heading-color);
|
||||
font-weight: 400;
|
||||
font-family: v.$font-family-heading;
|
||||
font-family: $font-family-heading;
|
||||
scroll-margin-top: 3.5rem;
|
||||
}
|
||||
|
||||
@@ -31,10 +34,7 @@
|
||||
}
|
||||
|
||||
%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: v.$radius-lg;
|
||||
border-radius: $radius-lg;
|
||||
}
|
||||
|
||||
%img-caption {
|
||||
@@ -112,8 +112,14 @@
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
|
||||
@mixin text-ellipsis {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
%text-ellipsis {
|
||||
@include mx.text-ellipsis;
|
||||
@include text-ellipsis;
|
||||
}
|
||||
|
||||
%text-highlight {
|
||||
@@ -145,19 +151,65 @@
|
||||
}
|
||||
}
|
||||
|
||||
%code-snippet-bg {
|
||||
background-color: var(--highlight-bg-color);
|
||||
/* ---------- scss mixin --------- */
|
||||
|
||||
@mixin mt-mb($value) {
|
||||
margin-top: $value;
|
||||
margin-bottom: $value;
|
||||
}
|
||||
|
||||
%code-snippet-padding {
|
||||
padding-left: 1rem;
|
||||
padding-right: 1.5rem;
|
||||
@mixin ml-mr($value) {
|
||||
margin-left: $value;
|
||||
margin-right: $value;
|
||||
}
|
||||
|
||||
%max-w-100 {
|
||||
max-width: 100%;
|
||||
@mixin pt-pb($val) {
|
||||
padding-top: $val;
|
||||
padding-bottom: $val;
|
||||
}
|
||||
|
||||
%panel-border {
|
||||
border-left: 1px solid var(--main-border-color);
|
||||
@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);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,7 +1,44 @@
|
||||
@use '../abstracts/variables' as v;
|
||||
@use '../abstracts/breakpoints' as bp;
|
||||
@use '../abstracts/mixins' as mx;
|
||||
@use '../abstracts/placeholders';
|
||||
/*
|
||||
* 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;
|
||||
}
|
||||
|
||||
.highlighter-rouge {
|
||||
color: var(--highlighter-rouge-color);
|
||||
@@ -22,7 +59,7 @@
|
||||
|
||||
pre {
|
||||
margin-bottom: 0;
|
||||
font-size: v.$code-font-size;
|
||||
font-size: $code-font-size;
|
||||
line-height: 1.4rem;
|
||||
word-wrap: normal; /* Fixed Safari overflow-x */
|
||||
}
|
||||
@@ -64,10 +101,10 @@ code {
|
||||
color: var(--code-color);
|
||||
|
||||
&.highlighter-rouge {
|
||||
font-size: v.$code-font-size;
|
||||
font-size: $code-font-size;
|
||||
padding: 3px 5px;
|
||||
word-break: break-word;
|
||||
border-radius: v.$radius-sm;
|
||||
border-radius: $radius-sm;
|
||||
background-color: var(--inline-code-bg);
|
||||
}
|
||||
|
||||
@@ -113,42 +150,9 @@ div[class^='language-'] {
|
||||
box-shadow: var(--language-border-color) 0 0 0 1px;
|
||||
|
||||
.content > & {
|
||||
@include mx.ml-mr(-1rem);
|
||||
@include 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 {
|
||||
@@ -180,18 +184,18 @@ div {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
height: v.$code-header-height;
|
||||
height: $code-header-height;
|
||||
margin-left: 0.75rem;
|
||||
margin-right: 0.25rem;
|
||||
|
||||
/* the label block */
|
||||
span {
|
||||
line-height: v.$code-header-height;
|
||||
line-height: $code-header-height;
|
||||
|
||||
/* label icon */
|
||||
i {
|
||||
font-size: 1rem;
|
||||
width: v.$code-icon-width;
|
||||
width: $code-icon-width;
|
||||
color: var(--code-header-icon-color);
|
||||
|
||||
&.small {
|
||||
@@ -219,8 +223,8 @@ div {
|
||||
@extend %rounded;
|
||||
|
||||
border: 1px solid transparent;
|
||||
height: v.$code-header-height;
|
||||
width: v.$code-header-height;
|
||||
height: $code-header-height;
|
||||
width: $code-header-height;
|
||||
padding: 0;
|
||||
background-color: inherit;
|
||||
|
||||
@@ -251,3 +255,38 @@ 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);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,3 +1,7 @@
|
||||
/*
|
||||
* The SCSS variables
|
||||
*/
|
||||
|
||||
/* sidebar */
|
||||
|
||||
$sidebar-width: 260px !default; /* the basic width */
|
||||
@@ -1,476 +0,0 @@
|
||||
@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;
|
||||
}
|
||||
}
|
||||
@@ -1,4 +0,0 @@
|
||||
@forward 'reset';
|
||||
@forward 'base';
|
||||
@forward 'typography';
|
||||
@forward 'syntax';
|
||||
@@ -1,41 +0,0 @@
|
||||
@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,266 +0,0 @@
|
||||
@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 */
|
||||
}
|
||||
164
_sass/colors/syntax-dark.scss
Normal file
164
_sass/colors/syntax-dark.scss
Normal file
@@ -0,0 +1,164 @@
|
||||
/*
|
||||
* 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;
|
||||
}
|
||||
}
|
||||
210
_sass/colors/syntax-light.scss
Normal file
210
_sass/colors/syntax-light.scss
Normal file
@@ -0,0 +1,210 @@
|
||||
/*
|
||||
* 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,6 +1,8 @@
|
||||
@mixin styles {
|
||||
color-scheme: dark;
|
||||
/*
|
||||
* The main dark mode styles
|
||||
*/
|
||||
|
||||
@mixin dark-scheme {
|
||||
/* Framework color */
|
||||
--main-bg: rgb(27, 27, 30);
|
||||
--mask-bg: rgb(68, 69, 70);
|
||||
@@ -98,18 +100,7 @@
|
||||
--timeline-color: rgb(63, 65, 68);
|
||||
--timeline-year-dot-color: var(--timeline-color);
|
||||
|
||||
/* 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;
|
||||
color-scheme: dark;
|
||||
|
||||
.light {
|
||||
display: none;
|
||||
@@ -153,151 +144,4 @@
|
||||
#disqus_thread {
|
||||
color-scheme: none;
|
||||
}
|
||||
|
||||
/* --- 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;
|
||||
}
|
||||
}
|
||||
} /* dark-scheme */
|
||||
112
_sass/colors/typography-light.scss
Normal file
112
_sass/colors/typography-light.scss
Normal file
@@ -0,0 +1,112 @@
|
||||
/*
|
||||
* 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 */
|
||||
@@ -1,51 +0,0 @@
|
||||
@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;
|
||||
}
|
||||
}
|
||||
@@ -1,2 +0,0 @@
|
||||
@forward 'buttons';
|
||||
@forward 'popups';
|
||||
@@ -1,172 +0,0 @@
|
||||
@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;
|
||||
}
|
||||
}
|
||||
@@ -1,36 +0,0 @@
|
||||
@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;
|
||||
}
|
||||
}
|
||||
@@ -1,4 +0,0 @@
|
||||
@forward 'sidebar';
|
||||
@forward 'topbar';
|
||||
@forward 'panel';
|
||||
@forward 'footer';
|
||||
@@ -1,70 +0,0 @@
|
||||
@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;
|
||||
}
|
||||
}
|
||||
@@ -1,258 +0,0 @@
|
||||
@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);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,86 +0,0 @@
|
||||
@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,17 +1,10 @@
|
||||
@use '../abstracts/breakpoints' as bp;
|
||||
@use '../abstracts/placeholders';
|
||||
/*
|
||||
Style for Archives
|
||||
*/
|
||||
|
||||
#archives {
|
||||
letter-spacing: 0.03rem;
|
||||
|
||||
@include bp.lt(bp.get(sm)) {
|
||||
margin-top: -1rem;
|
||||
|
||||
ul {
|
||||
letter-spacing: 0;
|
||||
}
|
||||
}
|
||||
|
||||
$timeline-width: 4px;
|
||||
|
||||
%timeline {
|
||||
@@ -138,3 +131,13 @@
|
||||
}
|
||||
}
|
||||
} /* #archives */
|
||||
|
||||
@media all and (max-width: 576px) {
|
||||
#archives {
|
||||
margin-top: -1rem;
|
||||
|
||||
ul {
|
||||
letter-spacing: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,7 +1,8 @@
|
||||
@use '../abstracts/variables' as v;
|
||||
@use '../abstracts/placeholders';
|
||||
/*
|
||||
Style for Tab Categories
|
||||
*/
|
||||
|
||||
%-category-icon-color {
|
||||
%category-icon-color {
|
||||
color: gray;
|
||||
}
|
||||
|
||||
@@ -15,7 +16,7 @@
|
||||
}
|
||||
|
||||
.card-header {
|
||||
$radius: calc(v.$radius-lg - 1px);
|
||||
$radius: calc($radius-lg - 1px);
|
||||
|
||||
padding: 0.75rem;
|
||||
border-radius: $radius;
|
||||
@@ -28,7 +29,7 @@
|
||||
}
|
||||
|
||||
i {
|
||||
@extend %-category-icon-color;
|
||||
@extend %category-icon-color;
|
||||
|
||||
font-size: 86%; /* fontawesome icons */
|
||||
}
|
||||
@@ -1,6 +1,6 @@
|
||||
@use '../abstracts/breakpoints' as bp;
|
||||
@use '../abstracts/mixins' as mx;
|
||||
@use '../abstracts/placeholders';
|
||||
/*
|
||||
Style for page Category and Tag
|
||||
*/
|
||||
|
||||
.dash {
|
||||
margin: 0 0.5rem 0.6rem 0.5rem;
|
||||
@@ -24,10 +24,6 @@
|
||||
position: relative;
|
||||
top: 0.6rem;
|
||||
margin-right: 0.5rem;
|
||||
|
||||
@include bp.lt(bp.get(sm)) {
|
||||
margin: 0 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* post's title */
|
||||
@@ -35,10 +31,6 @@
|
||||
@extend %no-bottom-border;
|
||||
|
||||
font-size: 1.1rem;
|
||||
|
||||
@include bp.lt(bp.get(sm)) {
|
||||
@include mx.text-ellipsis;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -61,3 +53,18 @@
|
||||
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,14 +1,10 @@
|
||||
@use '../abstracts/variables' as v;
|
||||
@use '../abstracts/breakpoints' as bp;
|
||||
@use '../abstracts/placeholders';
|
||||
/*
|
||||
Style for Homepage
|
||||
*/
|
||||
|
||||
#post-list {
|
||||
margin-top: 2rem;
|
||||
|
||||
@include bp.lg {
|
||||
margin-top: 2.5rem;
|
||||
}
|
||||
|
||||
.card-wrapper {
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
@@ -24,11 +20,7 @@
|
||||
background: none;
|
||||
|
||||
%img-radius {
|
||||
border-radius: v.$radius-lg v.$radius-lg 0 0;
|
||||
|
||||
@include bp.md {
|
||||
border-radius: 0 v.$radius-lg v.$radius-lg 0;
|
||||
}
|
||||
border-radius: $radius-lg $radius-lg 0 0;
|
||||
}
|
||||
|
||||
.preview-img {
|
||||
@@ -43,10 +35,6 @@
|
||||
height: 100%;
|
||||
padding: 1rem;
|
||||
|
||||
@include bp.md {
|
||||
padding: 1.75rem 1.75rem 1.25rem;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
@extend %text-clip;
|
||||
|
||||
@@ -58,20 +46,14 @@
|
||||
color: var(--text-muted-color) !important;
|
||||
}
|
||||
|
||||
.card-text {
|
||||
@include bp.md {
|
||||
display: inherit !important;
|
||||
}
|
||||
.card-text.content {
|
||||
@extend %muted;
|
||||
|
||||
&.content {
|
||||
@extend %muted;
|
||||
p {
|
||||
@extend %text-clip;
|
||||
|
||||
p {
|
||||
@extend %text-clip;
|
||||
|
||||
line-height: 1.5;
|
||||
margin: 0;
|
||||
}
|
||||
line-height: 1.5;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -81,10 +63,6 @@
|
||||
i {
|
||||
&:not(:first-child) {
|
||||
margin-left: 1.5rem;
|
||||
|
||||
@include bp.md {
|
||||
margin-left: 1.75rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -109,28 +87,11 @@
|
||||
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;
|
||||
@@ -164,10 +125,64 @@
|
||||
}
|
||||
}
|
||||
} /* .page-item */
|
||||
} /* .pagination */
|
||||
|
||||
.page-index {
|
||||
@include bp.lg {
|
||||
display: none;
|
||||
/* 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 {
|
||||
display: none;
|
||||
}
|
||||
} /* .pagination */
|
||||
}
|
||||
@@ -1,15 +1,14 @@
|
||||
@use '../abstracts/variables' as v;
|
||||
@use '../abstracts/breakpoints' as bp;
|
||||
@use '../abstracts/mixins' as mx;
|
||||
@use '../abstracts/placeholders';
|
||||
/**
|
||||
* Post-specific styles
|
||||
*/
|
||||
|
||||
%-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;
|
||||
@@ -25,7 +24,7 @@ header {
|
||||
|
||||
.post-meta {
|
||||
span + span::before {
|
||||
@include -dot;
|
||||
@include dot;
|
||||
}
|
||||
|
||||
em,
|
||||
@@ -114,20 +113,9 @@ 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: v.$font-family-base;
|
||||
--wc-stm-font-family: $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);
|
||||
@@ -143,19 +131,16 @@ 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);
|
||||
@@ -168,7 +153,7 @@ header {
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
@extend %-btn-post-nav;
|
||||
@extend %btn-post-nav;
|
||||
|
||||
pointer-events: auto;
|
||||
cursor: not-allowed;
|
||||
@@ -188,12 +173,12 @@ header {
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
border-radius: v.$radius-lg 0 0 v.$radius-lg;
|
||||
border-radius: $radius-lg 0 0 $radius-lg;
|
||||
left: 0.5px;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-radius: 0 v.$radius-lg v.$radius-lg 0;
|
||||
border-radius: 0 $radius-lg $radius-lg 0;
|
||||
right: 0.5px;
|
||||
}
|
||||
}
|
||||
@@ -218,50 +203,40 @@ header {
|
||||
@-webkit-keyframes fade-up {
|
||||
from {
|
||||
opacity: 0;
|
||||
margin-top: 4rem;
|
||||
position: relative;
|
||||
top: 2rem;
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
position: relative;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fade-up {
|
||||
from {
|
||||
opacity: 0;
|
||||
margin-top: 4rem;
|
||||
position: relative;
|
||||
top: 2rem;
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
position: relative;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* TOC panel */
|
||||
|
||||
%top-cover {
|
||||
content: '';
|
||||
display: block;
|
||||
#toc-wrapper {
|
||||
border-left: 1px solid rgba(158, 158, 158, 0.17);
|
||||
position: -webkit-sticky;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 3rem;
|
||||
background: linear-gradient(var(--main-bg) 50%, transparent);
|
||||
}
|
||||
|
||||
#toc-wrapper {
|
||||
top: 0;
|
||||
top: 4rem;
|
||||
transition: top 0.2s ease-in-out;
|
||||
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;
|
||||
}
|
||||
-webkit-animation: fade-up 0.8s;
|
||||
animation: fade-up 0.8s;
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
@@ -270,8 +245,12 @@ header {
|
||||
padding-left: 0;
|
||||
|
||||
li {
|
||||
&:not(:last-child) {
|
||||
margin: 0.4rem 0;
|
||||
}
|
||||
|
||||
a {
|
||||
padding: 0.4rem 0 0.4rem 1.25rem;
|
||||
padding: 0.2rem 0 0.2rem 1.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -299,6 +278,7 @@ header {
|
||||
&::before {
|
||||
display: inline-block;
|
||||
width: 1px;
|
||||
left: -1px;
|
||||
height: 1.25rem;
|
||||
background-color: var(--toc-highlight) !important;
|
||||
}
|
||||
@@ -308,30 +288,6 @@ 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 --- */
|
||||
@@ -342,27 +298,23 @@ header {
|
||||
top: 0;
|
||||
z-index: 1;
|
||||
margin: 0 -1rem;
|
||||
height: v.$topbar-height;
|
||||
height: $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.375rem;
|
||||
margin-left: 0.25rem;
|
||||
padding: 0 0.75rem;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
&.invisible {
|
||||
top: -#{v.$topbar-height};
|
||||
top: -$topbar-height;
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
@@ -370,15 +322,11 @@ header {
|
||||
#toc-solo-trigger {
|
||||
color: var(--text-muted-color);
|
||||
border-color: var(--btn-border-color);
|
||||
border-radius: v.$radius-lg;
|
||||
|
||||
@include bp.xl {
|
||||
display: none !important;
|
||||
}
|
||||
border-radius: $radius-lg;
|
||||
|
||||
.label {
|
||||
font-size: 1rem;
|
||||
font-family: v.$font-family-heading;
|
||||
font-family: $font-family-heading;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
@@ -390,7 +338,7 @@ header {
|
||||
@mixin slide-in {
|
||||
from {
|
||||
opacity: 0.7;
|
||||
transform: translateY(-#{v.$topbar-height});
|
||||
transform: translateY(-$topbar-height);
|
||||
}
|
||||
|
||||
to {
|
||||
@@ -406,7 +354,7 @@ header {
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translateY(-#{v.$topbar-height});
|
||||
transform: translateY(-$topbar-height);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
@@ -427,11 +375,129 @@ 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 mx.label(1.1rem, 600);
|
||||
@include label(1.1rem, 600);
|
||||
}
|
||||
|
||||
time {
|
||||
@@ -474,23 +540,47 @@ header {
|
||||
}
|
||||
|
||||
.share-label {
|
||||
@include mx.label(inherit, 400, inherit);
|
||||
@include label(inherit, 400, inherit);
|
||||
|
||||
&::after {
|
||||
content: ':';
|
||||
}
|
||||
}
|
||||
|
||||
.content > p > img {
|
||||
@include bp.lte(bp.get(md)) {
|
||||
@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 {
|
||||
max-width: calc(100% + 1rem);
|
||||
}
|
||||
}
|
||||
|
||||
h2,
|
||||
h3,
|
||||
h4 {
|
||||
@include bp.xl {
|
||||
scroll-margin-top: 2rem;
|
||||
/* 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 {
|
||||
scroll-margin-top: 2rem;
|
||||
}
|
||||
|
||||
#toc-bar,
|
||||
#toc-solo-trigger {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
@@ -1,4 +1,6 @@
|
||||
@use '../abstracts/breakpoints' as bp;
|
||||
/*
|
||||
Styles for Tab Tags
|
||||
*/
|
||||
|
||||
.tag {
|
||||
border-radius: 0.7em;
|
||||
@@ -15,9 +17,3 @@
|
||||
font-family: Oswald, sans-serif;
|
||||
}
|
||||
}
|
||||
|
||||
#tags {
|
||||
@include bp.lt(bp.get(lg)) {
|
||||
justify-content: center !important;
|
||||
}
|
||||
}
|
||||
@@ -1,2 +1,2 @@
|
||||
@use 'vendors/bootstrap';
|
||||
@use 'main';
|
||||
@import 'dist/bootstrap';
|
||||
@import 'main';
|
||||
|
||||
@@ -1,4 +1,13 @@
|
||||
@forward 'base';
|
||||
@forward 'components';
|
||||
@forward 'layout';
|
||||
@forward 'pages';
|
||||
@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';
|
||||
|
||||
@@ -1,7 +0,0 @@
|
||||
@forward 'search';
|
||||
@forward 'home';
|
||||
@forward 'post';
|
||||
@forward 'categories';
|
||||
@forward 'tags';
|
||||
@forward 'archives';
|
||||
@forward 'category-tag';
|
||||
@@ -1,184 +0,0 @@
|
||||
@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,313 +0,0 @@
|
||||
@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;
|
||||
}
|
||||
}
|
||||
3
_sass/variables-hook.scss
Normal file
3
_sass/variables-hook.scss
Normal file
@@ -0,0 +1,3 @@
|
||||
/*
|
||||
Appending custom SCSS variables will override the default ones in `_sass/addon/variables.scsss`
|
||||
*/
|
||||
@@ -2,8 +2,13 @@
|
||||
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,8 +1,7 @@
|
||||
---
|
||||
---
|
||||
|
||||
/* prettier-ignore */
|
||||
@use 'main
|
||||
@import 'main
|
||||
{%- if jekyll.environment == 'production' -%}
|
||||
.bundle
|
||||
{%- endif -%}
|
||||
|
||||
@@ -5,16 +5,16 @@ swcache: true
|
||||
|
||||
[
|
||||
{% for post in site.posts %}
|
||||
{%- capture description -%}
|
||||
{% include post-description.html %}
|
||||
{%- endcapture -%}
|
||||
{
|
||||
"title": {{ post.title | jsonify }},
|
||||
"url": {{ post.url | relative_url | jsonify }},
|
||||
"categories": {{ post.categories | join: ', ' | jsonify }},
|
||||
"tags": {{ post.tags | join: ', ' | jsonify }},
|
||||
"date": "{{ post.date }}",
|
||||
"content": "{{ description }}"
|
||||
{% include no-linenos.html content=post.content %}
|
||||
{% assign _content = content | strip_html | strip_newlines %}
|
||||
"snippet": {{ _content | truncate: 200 | jsonify }},
|
||||
"content": {{ _content | jsonify }}
|
||||
}{% unless forloop.last %},{% endunless %}
|
||||
{% endfor %}
|
||||
]
|
||||
|
||||
Submodule assets/lib updated: 02f4ada65d...a231bc7e2c
@@ -1,73 +1,5 @@
|
||||
# Changelog
|
||||
|
||||
## [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
|
||||
|
||||
@@ -1,5 +0,0 @@
|
||||
export default [
|
||||
{
|
||||
files: ['_javascript/**/*.js']
|
||||
}
|
||||
];
|
||||
@@ -2,7 +2,7 @@
|
||||
|
||||
Gem::Specification.new do |spec|
|
||||
spec.name = "jekyll-theme-chirpy"
|
||||
spec.version = "7.3.0"
|
||||
spec.version = "7.1.1"
|
||||
spec.authors = ["Cotes Chung"]
|
||||
spec.email = ["cotes.chung@gmail.com"]
|
||||
|
||||
@@ -27,6 +27,7 @@ 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.3.0",
|
||||
"version": "7.1.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": "node purgecss.js",
|
||||
"build:css": "purgecss -c purgecss.config.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.6"
|
||||
"bootstrap": "^5.3.3"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@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",
|
||||
"@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",
|
||||
"@rollup/plugin-babel": "^6.0.4",
|
||||
"@rollup/plugin-node-resolve": "^16.0.1",
|
||||
"@rollup/plugin-node-resolve": "^15.2.3",
|
||||
"@rollup/plugin-terser": "^0.4.4",
|
||||
"@semantic-release/changelog": "^6.0.3",
|
||||
"@semantic-release/exec": "^7.1.0",
|
||||
"@semantic-release/exec": "^6.0.3",
|
||||
"@semantic-release/git": "^10.0.1",
|
||||
"concurrently": "^9.1.2",
|
||||
"concurrently": "^9.0.1",
|
||||
"conventional-changelog-conventionalcommits": "^8.0.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"
|
||||
"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"
|
||||
},
|
||||
"prettier": {
|
||||
"trailingComma": "none"
|
||||
@@ -68,6 +68,41 @@
|
||||
]
|
||||
}
|
||||
},
|
||||
"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"
|
||||
|
||||
23
purgecss.config.js
Normal file
23
purgecss.config.js
Normal file
@@ -0,0 +1,23 @@
|
||||
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
30
purgecss.js
@@ -1,30 +0,0 @@
|
||||
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,10 +11,10 @@ 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;
|
||||
const frontmatter = `---\npermalink: /:basename\n---\n`;
|
||||
|
||||
const isProd = process.env.BUILD === 'production';
|
||||
|
||||
function cleanup() {
|
||||
fs.rmSync(DIST, { recursive: true, force: true });
|
||||
@@ -39,11 +39,6 @@ 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,
|
||||
@@ -54,7 +49,9 @@ function build(
|
||||
banner,
|
||||
sourcemap: !isProd && !jekyll
|
||||
},
|
||||
...(shouldWatch && { watch: { include: `${SRC_DEFAULT}/**/*.js` } }),
|
||||
watch: {
|
||||
include: input
|
||||
},
|
||||
plugins: [
|
||||
babel({
|
||||
babelHelpers: 'bundled',
|
||||
@@ -80,7 +77,7 @@ export default [
|
||||
build('page'),
|
||||
build('post'),
|
||||
build('misc'),
|
||||
build('theme', { outputName: 'Theme' }),
|
||||
build('theme', { src: `${SRC_DEFAULT}/modules`, outputName: 'Theme' }),
|
||||
build('app', { src: SRC_PWA, jekyll: true }),
|
||||
build('sw', { src: SRC_PWA, jekyll: true })
|
||||
];
|
||||
|
||||
@@ -92,8 +92,7 @@ init_files() {
|
||||
npm i && npm run build
|
||||
|
||||
# track the CSS/JS output
|
||||
_sedi "/^_sass\/vendors/d" .gitignore
|
||||
_sedi "/^assets\/js\/dist/d" .gitignore
|
||||
_sedi "/.*\/dist$/d" .gitignore
|
||||
}
|
||||
|
||||
commit() {
|
||||
|
||||
@@ -15,7 +15,7 @@ NODE_SPEC="package.json"
|
||||
CHANGELOG="docs/CHANGELOG.md"
|
||||
CONFIG="_config.yml"
|
||||
|
||||
CSS_DIST="_sass/vendors"
|
||||
CSS_DIST="_sass/dist"
|
||||
JS_DIST="assets/js/dist"
|
||||
|
||||
FILES=(
|
||||
|
||||
Reference in New Issue
Block a user