mirror of
https://github.com/cotes2020/jekyll-theme-chirpy.git
synced 2025-12-21 15:12:59 +00:00
Compare commits
8 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
081e77d462 | ||
|
|
bca7a2a634 | ||
|
|
505da84a26 | ||
|
|
dfba411d61 | ||
|
|
fa310d3190 | ||
|
|
ef0c9ce770 | ||
|
|
7429ef3539 | ||
|
|
6d4abcc437 |
2
Gemfile
2
Gemfile
@@ -1,6 +1,6 @@
|
||||
source "https://rubygems.org"
|
||||
|
||||
gem "jekyll", ">= 4.0.0", "< 5.0"
|
||||
gem "jekyll", ">= 4.1.0", "< 5.0"
|
||||
|
||||
# plugins
|
||||
group :jekyll_plugins do
|
||||
|
||||
@@ -97,7 +97,7 @@ PLATFORMS
|
||||
|
||||
DEPENDENCIES
|
||||
html-proofer
|
||||
jekyll (>= 4.0.0, < 5.0)
|
||||
jekyll (>= 4.1.0, < 5.0)
|
||||
jekyll-archives
|
||||
jekyll-paginate
|
||||
jekyll-redirect-from
|
||||
|
||||
@@ -177,7 +177,7 @@ compress_html:
|
||||
profile: false
|
||||
blanklines: false
|
||||
ignore:
|
||||
envs: []
|
||||
envs: [development]
|
||||
|
||||
exclude:
|
||||
- vendor
|
||||
|
||||
@@ -1,3 +1,3 @@
|
||||
name: Chirpy
|
||||
version: 2.7.0
|
||||
version: 2.7.1
|
||||
homepage: https://github.com/cotes2020/jekyll-theme-chirpy/
|
||||
|
||||
@@ -4,7 +4,10 @@
|
||||
|
||||
{% assign _content = include.content %}
|
||||
|
||||
<!-- Suroundding the markdown table with '<div class="table-wrapper">. and '</div>' -->
|
||||
<!--
|
||||
In order to allow a wide table to scroll horizontally,
|
||||
we suround the markdown table with `<div class="table-wrapper">` and `</div>`
|
||||
-->
|
||||
{% if _content contains '<table>' %}
|
||||
{% assign _content = _content
|
||||
| replace: '<table>', '<div class="table-wrapper"><table>'
|
||||
|
||||
@@ -6,11 +6,11 @@
|
||||
MIT License
|
||||
-->
|
||||
|
||||
<div id="nav-wrapper">
|
||||
<div id="sidebar" class="d-flex flex-column align-items-end">
|
||||
|
||||
<div id="profile-wrapper" class="d-flex flex-column">
|
||||
<div id="avatar" class="d-flex justify-content-center">
|
||||
<a href="{{ site.baseurl }}/" alt="avatar">
|
||||
<div class="profile-wrapper text-center">
|
||||
<div id="avatar">
|
||||
<a href="{{ site.baseurl }}/" alt="avatar" class="mx-auto">
|
||||
{% assign avatar_url = site.avatar %}
|
||||
{% capture start %}{{ site.avatar | slice: 0 }}{% endcapture %}
|
||||
{% if start == '/' %}
|
||||
@@ -20,26 +20,26 @@
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="profile-text mt-3">
|
||||
<div class="site-title">
|
||||
<a href="{{ '/' | relative_url }}">{{- site.title -}}</a>
|
||||
</div>
|
||||
<div class="site-subtitle font-italic">{{- site.tagline -}}</div>
|
||||
<div class="site-title mt-3">
|
||||
<a href="{{ '/' | relative_url }}">{{- site.title -}}</a>
|
||||
</div>
|
||||
</div><!-- #profile-wrapper -->
|
||||
|
||||
<ul class="nav flex-column">
|
||||
<div class="site-subtitle font-italic">{{- site.tagline -}}</div>
|
||||
|
||||
</div><!-- .profile-wrapper -->
|
||||
|
||||
<ul class="w-100">
|
||||
<!-- home -->
|
||||
<li class="nav-item d-flex justify-content-center {% if page.layout == 'home' %}active{% endif %}">
|
||||
<a href="{{ '/' | relative_url }}" class="nav-link d-flex justify-content-center align-items-center w-100">
|
||||
<li class="nav-item{% if page.layout == 'home' %}{{ " active" }}{% endif %}">
|
||||
<a href="{{ '/' | relative_url }}" class="nav-link">
|
||||
<i class="fa-fw fas fa-home ml-xl-3 mr-xl-3 unloaded"></i>
|
||||
<span>{{ "HOME" }}</span>
|
||||
</a>
|
||||
</li>
|
||||
<!-- the real tabs -->
|
||||
{% for tab in site.tabs %}
|
||||
<li class="nav-item d-flex justify-content-center {% if tab.url == page.url %}active{% endif %}">
|
||||
<a href="{{ tab.url | relative_url }}" class="nav-link d-flex justify-content-center align-items-center w-100">
|
||||
<li class="nav-item{% if tab.url == page.url %}{{ " active" }}{% endif %}">
|
||||
<a href="{{ tab.url | relative_url }}" class="nav-link">
|
||||
<i class="fa-fw {{ tab.icon }} ml-xl-3 mr-xl-3 unloaded"></i>
|
||||
<span>{{ tab.title | upcase }}</span>
|
||||
</a>
|
||||
@@ -48,38 +48,44 @@
|
||||
|
||||
</ul> <!-- ul.nav.flex-column -->
|
||||
|
||||
</div><!-- #nav-wrapper -->
|
||||
<div class="sidebar-bottom mt-auto d-flex flex-wrap justify-content-center">
|
||||
|
||||
<div class="sidebar-bottom d-flex flex-wrap justify-content-around mt-4">
|
||||
{% for entry in site.data.contact %}
|
||||
{% capture url %}
|
||||
{%- if entry.type == 'github' -%}
|
||||
https://github.com/{{ site.github.username }}
|
||||
{%- elsif entry.type == 'twitter' -%}
|
||||
https://twitter.com/{{ site.twitter.username }}
|
||||
{%- elsif entry.type == 'email' -%}
|
||||
{% assign email = site.social.email | split: '@' %}
|
||||
javascript:location.href = 'mailto:' + ['{{ email[0] }}','{{ email[1] }}'].join('@')
|
||||
{%- elsif entry.type == 'rss' -%}
|
||||
{{ "/feed.xml" | relative_url }}
|
||||
{%- else -%}
|
||||
{{ entry.url }}
|
||||
{%- endif -%}
|
||||
{% endcapture %}
|
||||
|
||||
{% unless site.theme_mode %}
|
||||
<span id="mode-toggle-wrapper">
|
||||
{% include mode-toggle.html %}
|
||||
</span>
|
||||
<span class="icon-border"></span>
|
||||
{% endunless %}
|
||||
{% if url %}
|
||||
<a href="{{ url }}" aria-label="{{ entry.type }}"
|
||||
{% unless site.theme_mode %}class="order-{{ forloop.index | plus: 2 }}"{% endunless %}
|
||||
{% unless entry.noblank %}target="_blank" rel="noopener"{% endunless %}>
|
||||
<i class="{{ entry.icon }}"></i>
|
||||
</a>
|
||||
{% endif %}
|
||||
|
||||
{% for entry in site.data.contact %}
|
||||
{% capture url %}
|
||||
{%- if entry.type == 'github' -%}
|
||||
https://github.com/{{ site.github.username }}
|
||||
{%- elsif entry.type == 'twitter' -%}
|
||||
https://twitter.com/{{ site.twitter.username }}
|
||||
{%- elsif entry.type == 'email' -%}
|
||||
{% assign email = site.social.email | split: '@' %}
|
||||
javascript:location.href = 'mailto:' + ['{{ email[0] }}','{{ email[1] }}'].join('@')
|
||||
{%- elsif entry.type == 'rss' -%}
|
||||
{{ "/feed.xml" | relative_url }}
|
||||
{%- else -%}
|
||||
{{ entry.url }}
|
||||
{%- endif -%}
|
||||
{% endcapture %}
|
||||
{% endfor %}
|
||||
|
||||
{% if url %}
|
||||
<a href="{{ url }}" aria-label="{{ entry.type }}" {% unless entry.noblank %}target="_blank" rel="noopener"{% endunless %}>
|
||||
<i class="{{ entry.icon }}"></i>
|
||||
</a>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% unless site.theme_mode %}
|
||||
{% if site.data.contact.size > 0 %}
|
||||
<span class="icon-border order-2"></span>
|
||||
{% endif %}
|
||||
|
||||
</div>
|
||||
<span id="mode-toggle-wrapper" class="order-1">
|
||||
{% include mode-toggle.html %}
|
||||
</span>
|
||||
{% endunless %}
|
||||
|
||||
</div> <!-- .sidebar-bottom -->
|
||||
|
||||
</div><!-- #sidebar -->
|
||||
|
||||
@@ -21,9 +21,7 @@ layout: compress
|
||||
|
||||
<body data-spy="scroll" data-target="#toc">
|
||||
|
||||
<div id="sidebar" class="d-flex flex-column">
|
||||
{% include sidebar.html %}
|
||||
</div>
|
||||
{% include sidebar.html %}
|
||||
|
||||
{% include topbar.html %}
|
||||
|
||||
|
||||
@@ -38,7 +38,7 @@ Beside the lake, beneath the trees,
|
||||
|
||||
Fluttering and dancing in the breeze.
|
||||
|
||||
## List
|
||||
## Lists
|
||||
|
||||
### Ordered list
|
||||
|
||||
@@ -52,7 +52,7 @@ Fluttering and dancing in the breeze.
|
||||
- Setcion
|
||||
- Paragraph
|
||||
|
||||
### Checkbox list
|
||||
### Task list
|
||||
|
||||
- [ ] TODO
|
||||
- [x] Completed
|
||||
@@ -62,26 +62,35 @@ Fluttering and dancing in the breeze.
|
||||
- [ ] Economic recovery
|
||||
- [ ] People smile again
|
||||
|
||||
### Description list
|
||||
|
||||
Sun
|
||||
: the star around which the earth orbits
|
||||
|
||||
Moon
|
||||
: the natural satellite of the earth, visible by reflected light from the sun
|
||||
|
||||
|
||||
## Block Quote
|
||||
|
||||
> This line to shows the Block Quote.
|
||||
|
||||
## Tables
|
||||
|
||||
| Company | contact | Country |
|
||||
| Company | Contact | Country |
|
||||
|:-----------------------------|:-----------------|--------:|
|
||||
| Alfreds Futterkiste | Maria Anders | Germany |
|
||||
| Island Trading | Helen Bennett | UK |
|
||||
| Magazzini Alimentari Riuniti | Giovanni Rovelli | Italy |
|
||||
|
||||
## Link
|
||||
## Links
|
||||
|
||||
<http://127.0.0.1:4000>
|
||||
|
||||
|
||||
## Footnote
|
||||
|
||||
Click the hook will locate the footnote[^footnote].
|
||||
Click the hook will locate the footnote[^footnote], and here is another footnote[^fn-nth-2].
|
||||
|
||||
|
||||
## Images
|
||||
@@ -130,9 +139,6 @@ _400px image width_
|
||||
cherry :active, c, after b a, 1d
|
||||
```
|
||||
|
||||
## Inline code
|
||||
|
||||
This is an example of `Inline Code`.
|
||||
|
||||
## Mathematics
|
||||
|
||||
@@ -144,7 +150,13 @@ When \\(a \ne 0\\), there are two solutions to \\(ax^2 + bx + c = 0\\) and they
|
||||
|
||||
$$ x = {-b \pm \sqrt{b^2-4ac} \over 2a} $$
|
||||
|
||||
## Code Snippet
|
||||
|
||||
## Inline code
|
||||
|
||||
This is an example of `Inline Code`.
|
||||
|
||||
|
||||
## Code block
|
||||
|
||||
### Common
|
||||
|
||||
@@ -157,14 +169,6 @@ This is a common code snippet, without syntax highlight and line number.
|
||||
#### Console
|
||||
|
||||
```console
|
||||
$ date
|
||||
Sun Nov 3 15:11:12 CST 2019
|
||||
```
|
||||
|
||||
|
||||
#### Terminal
|
||||
|
||||
```terminal
|
||||
$ env |grep SHELL
|
||||
SHELL=/usr/local/bin/bash
|
||||
PYENV_SHELL=bash
|
||||
@@ -198,23 +202,6 @@ fi;
|
||||
```
|
||||
{% endraw %}
|
||||
|
||||
#### Html
|
||||
|
||||
```html
|
||||
<div class="sidenav">
|
||||
<a href="#contact">Contact</a>
|
||||
<button class="dropdown-btn">Dropdown
|
||||
<i class="fa fa-caret-down"></i>
|
||||
</button>
|
||||
<div class="dropdown-container">
|
||||
<a href="#">Link 1</a>
|
||||
<a href="#">Link 2</a>
|
||||
<a href="#">Link 3</a>
|
||||
</div>
|
||||
<a href="#contact">Search</a>
|
||||
</div>
|
||||
```
|
||||
|
||||
#### Java
|
||||
|
||||
```java
|
||||
@@ -222,20 +209,11 @@ private void writeObject(java.io.ObjectOutputStream s)
|
||||
throws java.io.IOException {
|
||||
// Write out any hidden serialization magic
|
||||
s.defaultWriteObject();
|
||||
|
||||
// Write out HashMap capacity and load factor
|
||||
s.writeInt(map.capacity());
|
||||
s.writeFloat(map.loadFactor());
|
||||
|
||||
// Write out size
|
||||
s.writeInt(map.size());
|
||||
|
||||
// Write out all elements in the proper order.
|
||||
for (E e: map.keySet())
|
||||
s.writeObject(e);
|
||||
for (E e: map.keySet()) s.writeObject(e);
|
||||
}
|
||||
```
|
||||
|
||||
## Reverse Footnote
|
||||
|
||||
[^footnote]: The footnote source.
|
||||
[^footnote]: The footnote source
|
||||
[^fn-nth-2]: The 2nd footnote source
|
||||
|
||||
@@ -78,7 +78,7 @@ mermaid: true
|
||||
---
|
||||
```
|
||||
|
||||
Then you can use it like other markdown language: surround the graph code with <code class="highlighter-rouge">```mermaid</code>.
|
||||
Then you can use it like other markdown language: surround the graph code with ```` ```mermaid ```` and ```` ``` ````.
|
||||
|
||||
## Images
|
||||
|
||||
@@ -147,7 +147,7 @@ pin: true
|
||||
|
||||
## Code Block
|
||||
|
||||
Markdown symbols <code class="highlighter-rouge">```</code> can easily create a code block as following examples.
|
||||
Markdown symbols ```` ``` ```` can easily create a code block as following examples.
|
||||
|
||||
```
|
||||
This is a common code snippet, without syntax highlight and line number.
|
||||
@@ -155,7 +155,7 @@ This is a common code snippet, without syntax highlight and line number.
|
||||
|
||||
## Specific Language
|
||||
|
||||
Using <code class="highlighter-rouge">```language</code> you will get code snippets with line numbers and syntax highlight.
|
||||
Using ```` ```language ```` you will get code snippets with line numbers and syntax highlight.
|
||||
|
||||
> **Note**: The Jekyll style `{% raw %}{%{% endraw %} highlight LANGUAGE {% raw %}%}{% endraw %}` or `{% raw %}{%{% endraw %} highlight LANGUAGE linenos {% raw %}%}{% endraw %}` are not allowed to be used in this theme !
|
||||
|
||||
|
||||
@@ -1,7 +0,0 @@
|
||||
/*
|
||||
* The field 'font-display' is added for Google-fonts.
|
||||
*
|
||||
* See: <https://fonts.google.com/>
|
||||
*/
|
||||
|
||||
@import url('https://fonts.googleapis.com/css2?family=Lato&family=Roboto+Condensed:wght@400;700&family=Source+Sans+Pro:wght@400;600;700;900&display=swap');
|
||||
@@ -6,12 +6,13 @@
|
||||
* MIT Licensed
|
||||
*/
|
||||
|
||||
@import "_addon/fonts";
|
||||
@import "_addon/module";
|
||||
@import "_addon/variables";
|
||||
@import "_colors/light-typography";
|
||||
@import "_colors/dark-typography";
|
||||
|
||||
@import url('https://fonts.googleapis.com/css2?family=Lato&family=Source+Sans+Pro:wght@400;600;900&display=swap');
|
||||
|
||||
|
||||
@mixin mode-toggle($dark-mode: false) {
|
||||
@if $dark-mode {
|
||||
@@ -45,8 +46,9 @@ html[mode=dark] {
|
||||
}
|
||||
}
|
||||
|
||||
html, body {
|
||||
:root {
|
||||
font-size: 16px;
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
body {
|
||||
@@ -73,44 +75,45 @@ $sidebar-display: "sidebar-display";
|
||||
width: $sidebar-width-medium;
|
||||
z-index: 99;
|
||||
background: var(--sidebar-bg);
|
||||
|
||||
a {
|
||||
@include sidebar-links;
|
||||
&:hover {
|
||||
color: #fff;
|
||||
@include no-text-decoration;
|
||||
}
|
||||
}
|
||||
|
||||
.site-title {
|
||||
text-align: center;
|
||||
a {
|
||||
font-weight: 900;
|
||||
font-size: 1.5rem;
|
||||
letter-spacing: 0.5px;
|
||||
&:hover {
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.site-subtitle {
|
||||
font-size: 95%;
|
||||
text-align: center;
|
||||
color: #828282;
|
||||
line-height: 1.2rem;
|
||||
word-spacing: 1px;
|
||||
margin: 0.5rem 1.5rem 2rem 1.5rem;
|
||||
margin: 0.5rem 1.5rem 0.5rem 1.5rem;
|
||||
min-height: 3rem; // avoid vertical shifting in multi-line words
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.sidebar-bottom {
|
||||
.icon-border + a { // the icon behide mode-toggle
|
||||
margin-left: 0.1rem;
|
||||
}
|
||||
}
|
||||
.nav-link {
|
||||
border-radius: 0;
|
||||
font-size: 0.95rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: 1px;
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
text-align: center;
|
||||
display: table;
|
||||
height: $tab-height;
|
||||
&:hover {
|
||||
.nav-link {
|
||||
@@ -123,27 +126,38 @@ $sidebar-display: "sidebar-display";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
height: $tab-height * $tab-count;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
margin-bottom: 2rem;
|
||||
padding-left: 0;
|
||||
|
||||
> li:last-child {
|
||||
> a {
|
||||
margin-right: -3px;
|
||||
max-width: calc(100% - 3px);
|
||||
> li {
|
||||
width: 100%;
|
||||
|
||||
&:last-child {
|
||||
$cursor-width: 3px;
|
||||
|
||||
> a {
|
||||
position: relative;
|
||||
left: $cursor-width / 2;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&::after { // the cursor
|
||||
display: table;
|
||||
visibility: hidden;
|
||||
content: "";
|
||||
position: relative;
|
||||
right: 1px;
|
||||
width: $cursor-width;
|
||||
height: $tab-cursor-height;
|
||||
border-radius: 1px;
|
||||
background-color: var(--nav-cursor-color);
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
&::after { // the cursor
|
||||
visibility: hidden;
|
||||
content: "";
|
||||
position: relative;
|
||||
right: 1px;
|
||||
width: 3px;
|
||||
height: $tab-cursor-height;
|
||||
background-color: var(--nav-cursor-color);
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
} // li
|
||||
|
||||
@mixin fix-cursor($top) {
|
||||
top: $top;
|
||||
@@ -174,9 +188,18 @@ $sidebar-display: "sidebar-display";
|
||||
|
||||
.sidebar-bottom {
|
||||
font-size: 1.2rem;
|
||||
margin: 2rem 2.5rem 1.6rem;
|
||||
margin-bottom: 2.1rem;
|
||||
|
||||
@include ml-mr(auto);
|
||||
@include pl-pr(1rem);
|
||||
|
||||
%icon {
|
||||
width: 2.4rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
a {
|
||||
margin-bottom: 0.5rem; // icons may have multi lines
|
||||
@extend %icon;
|
||||
}
|
||||
|
||||
a:hover, #mode-toggle-wrapper > i:hover {
|
||||
@@ -184,6 +207,8 @@ $sidebar-display: "sidebar-display";
|
||||
}
|
||||
|
||||
#mode-toggle-wrapper {
|
||||
@extend %icon;
|
||||
|
||||
i {
|
||||
@include sidebar-links;
|
||||
margin: 0;
|
||||
@@ -192,16 +217,21 @@ $sidebar-display: "sidebar-display";
|
||||
position: relative;
|
||||
bottom: 1px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.icon-border {
|
||||
background: #525354;
|
||||
background-color: #525354;
|
||||
content: "";
|
||||
width: 3px;
|
||||
height: 3px;
|
||||
border-radius: 50%;
|
||||
margin-top: 0.75rem;
|
||||
position: relative;
|
||||
top: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
} // .sidebar-bottom
|
||||
|
||||
} // #sidebar
|
||||
|
||||
@media (hover: hover) {
|
||||
@@ -213,13 +243,9 @@ $sidebar-display: "sidebar-display";
|
||||
}
|
||||
}
|
||||
|
||||
#nav-wrapper {
|
||||
width: 100%;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
#profile-wrapper {
|
||||
.profile-wrapper {
|
||||
margin-top: 2rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#avatar {
|
||||
@@ -338,6 +364,7 @@ $sidebar-display: "sidebar-display";
|
||||
border-radius: 0;
|
||||
padding: 0.18rem 0.3rem;
|
||||
color: var(--text-color);
|
||||
font-size: 95%;
|
||||
}
|
||||
|
||||
#search-input {
|
||||
@@ -653,16 +680,17 @@ sup {
|
||||
}
|
||||
}
|
||||
|
||||
.footnotes ol {
|
||||
.footnotes > ol {
|
||||
padding-left: 2rem;
|
||||
margin-top: 0.5rem;
|
||||
> li {
|
||||
padding-top: 0.2rem;
|
||||
margin-top: -0.2rem;
|
||||
> p {
|
||||
padding-left: 0.2em;
|
||||
+ li {
|
||||
margin-top: 0.3rem;
|
||||
}
|
||||
&:not(:last-child) {
|
||||
margin-bottom: -.8rem;
|
||||
> p {
|
||||
margin-left: 0.25em;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
&:target > p {
|
||||
background-color: var(--footnote-target-bg);
|
||||
@@ -743,14 +771,15 @@ img {
|
||||
|
||||
|
||||
/*--- Begin of Markdown table style ---*/
|
||||
div.post-content .table-wrapper {
|
||||
|
||||
.table-wrapper { // it will be created by Liquid
|
||||
overflow-x: auto;
|
||||
margin-bottom: 1.5rem;
|
||||
|
||||
> table {
|
||||
min-width: 60%;
|
||||
min-width: 100%;
|
||||
overflow-x: auto;
|
||||
border-spacing: 0;
|
||||
margin-bottom: 1.5rem;
|
||||
|
||||
thead {
|
||||
border-bottom: solid 2px rgba(210, 215, 217, 0.75);
|
||||
@@ -806,16 +835,27 @@ div.post-content .table-wrapper {
|
||||
overflow-wrap: break-word;
|
||||
word-wrap: break-word;
|
||||
|
||||
img[data-src] {
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
@mixin img-caption {
|
||||
+ em {
|
||||
display: block;
|
||||
text-align: center;
|
||||
font-style: normal;
|
||||
font-size: 80%;
|
||||
padding: 0;
|
||||
color: #6d6c6c;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin img($caption: false) {
|
||||
|
||||
> img[data-src] {
|
||||
margin: 0.5rem 0;
|
||||
|
||||
&:not(.normal):not(.left):not(.right) {
|
||||
@include align-center;
|
||||
|
||||
@if $caption {
|
||||
@include img-caption;
|
||||
}
|
||||
@if $caption {
|
||||
@include img-caption;
|
||||
}
|
||||
|
||||
&.left {
|
||||
@@ -831,17 +871,6 @@ div.post-content .table-wrapper {
|
||||
}
|
||||
}
|
||||
|
||||
@mixin img-caption {
|
||||
+ em {
|
||||
display: block;
|
||||
text-align: center;
|
||||
font-style: normal;
|
||||
font-size: 80%;
|
||||
padding: 0;
|
||||
color: #6d6c6c;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
&:not(.img-hyperlink) {
|
||||
@extend %link-color;
|
||||
@@ -856,16 +885,18 @@ div.post-content .table-wrapper {
|
||||
}
|
||||
}
|
||||
|
||||
> p {
|
||||
> img[data-src]:not(.normal):not(.left):not(.right) {
|
||||
@include align-center;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 1.08rem;
|
||||
@include img(true);
|
||||
}// p
|
||||
}
|
||||
|
||||
ul {
|
||||
&.task-list, &:not([class]) {
|
||||
padding-left: 2rem;
|
||||
}
|
||||
|
||||
// attribute 'hide-bullet' was added by liquid
|
||||
.task-list-item[hide-bullet] {
|
||||
list-style-type: none;
|
||||
@@ -888,6 +919,32 @@ div.post-content .table-wrapper {
|
||||
|
||||
} // ul
|
||||
|
||||
> ol, > ul {
|
||||
padding-left: 2rem;
|
||||
|
||||
li {
|
||||
+ li {
|
||||
margin-top: 0.3rem;
|
||||
}
|
||||
|
||||
ol, ul { // sub list
|
||||
padding-left: 2rem;
|
||||
margin-top: 0.3rem;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
> ol {
|
||||
li {
|
||||
padding-left: 0.25em;
|
||||
}
|
||||
}
|
||||
|
||||
dl > dd {
|
||||
margin-left: 1rem;
|
||||
}
|
||||
|
||||
} // .post-content
|
||||
|
||||
.tag:hover {
|
||||
@@ -1045,7 +1102,6 @@ div.post-content .table-wrapper {
|
||||
transition: transform 0.4s ease;
|
||||
}
|
||||
|
||||
|
||||
html, body {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
@@ -1155,7 +1211,7 @@ div.post-content .table-wrapper {
|
||||
|
||||
.footnotes ol > li {
|
||||
padding-top: 3.5rem;
|
||||
margin-top: -4.3rem;
|
||||
margin-top: -3.2rem !important;
|
||||
&:first-child {
|
||||
margin-top: -3.5rem;
|
||||
}
|
||||
@@ -1182,7 +1238,7 @@ div.post-content .table-wrapper {
|
||||
margin-left: $sidebar-width-medium;
|
||||
}
|
||||
|
||||
#profile-wrapper {
|
||||
.profile-wrapper {
|
||||
margin-top: 3rem;
|
||||
}
|
||||
|
||||
@@ -1191,6 +1247,10 @@ div.post-content .table-wrapper {
|
||||
min-width: 150px;
|
||||
}
|
||||
|
||||
div.post-content .table-wrapper > table {
|
||||
min-width: 70%;
|
||||
}
|
||||
|
||||
/* button 'back-to-Top' position */
|
||||
#back-to-top {
|
||||
bottom: 5.5rem;
|
||||
@@ -1227,9 +1287,11 @@ div.post-content .table-wrapper {
|
||||
#sidebar {
|
||||
width: $sidebar-width-small;
|
||||
.sidebar-bottom {
|
||||
@include ml-mr(1.5rem);
|
||||
a, span {
|
||||
width: 2rem;
|
||||
}
|
||||
.icon-border {
|
||||
@include ml-mr(.25rem);
|
||||
left: -3px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1409,112 +1471,123 @@ div.post-content .table-wrapper {
|
||||
margin-right: 3%;
|
||||
}
|
||||
|
||||
#profile-wrapper {
|
||||
margin: 4rem 2rem 3rem 4rem;
|
||||
-ms-flex-direction: column!important;
|
||||
|
||||
#avatar {
|
||||
-webkit-box-pack: normal !important;
|
||||
-ms-flex-pack: normal !important;
|
||||
justify-content: normal !important;
|
||||
> a {
|
||||
width: 6.2rem;
|
||||
height: 6.2rem;
|
||||
}
|
||||
}
|
||||
|
||||
.profile-text {
|
||||
margin-left: 0.5rem;
|
||||
/* .d-flex */
|
||||
display: -webkit-box!important;
|
||||
display: -ms-flexbox!important;
|
||||
display: flex!important;
|
||||
/* .flex-wrap */
|
||||
-ms-flex-wrap: wrap!important;
|
||||
flex-wrap: wrap!important;
|
||||
/* .align-content-center */
|
||||
-ms-flex-line-pack: center!important;
|
||||
align-content: center!important;
|
||||
> div {
|
||||
text-align: left !important;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#sidebar {
|
||||
width: $sidebar-width-large;
|
||||
|
||||
.site-title a {
|
||||
font-size: 1.7rem;
|
||||
letter-spacing: 1px;
|
||||
margin: 0;
|
||||
}
|
||||
.profile-wrapper {
|
||||
margin-top: 4rem;
|
||||
margin-bottom: 1rem;
|
||||
|
||||
.site-subtitle {
|
||||
word-spacing: 0;
|
||||
margin: 0.3rem 0 0 0;
|
||||
}
|
||||
&.text-center {
|
||||
text-align: left !important;
|
||||
}
|
||||
|
||||
%profile-ml {
|
||||
margin-left: 4.5rem;
|
||||
}
|
||||
|
||||
#avatar {
|
||||
@extend %profile-ml;
|
||||
|
||||
> a {
|
||||
width: 6.2rem;
|
||||
height: 6.2rem;
|
||||
&.mx-auto {
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.site-title {
|
||||
@extend %profile-ml;
|
||||
a {
|
||||
font-size: 1.7rem;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
.site-subtitle {
|
||||
@extend %profile-ml;
|
||||
word-spacing: 0;
|
||||
margin-top: 0.3rem;
|
||||
}
|
||||
|
||||
} // .profile-wrapper (min-width: 1650px)
|
||||
|
||||
ul {
|
||||
margin-left: 3%;
|
||||
> li > a {
|
||||
padding-left: 2.5rem;
|
||||
-webkit-box-pack: start!important;
|
||||
-ms-flex-pack: start!important;
|
||||
justify-content: flex-start!important;
|
||||
}
|
||||
}
|
||||
padding-left: 2.5rem;
|
||||
|
||||
.nav-link {
|
||||
> span {
|
||||
letter-spacing: 3px;
|
||||
> li:last-child {
|
||||
> a {
|
||||
position: static;
|
||||
}
|
||||
}
|
||||
> i {
|
||||
@include icon-round(1.65rem);
|
||||
line-height: 1rem;
|
||||
font-size: 0.6rem;
|
||||
padding: 0.5em 0 0 0.1em;
|
||||
display: inline-block!important;
|
||||
|
||||
.nav-item {
|
||||
text-align: left;
|
||||
|
||||
.nav-link {
|
||||
> span {
|
||||
letter-spacing: 3px;
|
||||
}
|
||||
|
||||
> i {
|
||||
@include icon-round(1.65rem);
|
||||
|
||||
line-height: 1.5rem;
|
||||
font-size: 0.6rem;
|
||||
padding-top: 1px;
|
||||
padding-left: 1px;
|
||||
position: relative;
|
||||
bottom: 1px;
|
||||
|
||||
&.unloaded {
|
||||
display: inline-block !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-bottom {
|
||||
margin-left: 3.5rem;
|
||||
margin-right: 3rem;
|
||||
font-size: 1.3rem;
|
||||
padding-left: 3.5rem;
|
||||
width: 100%;
|
||||
|
||||
&.justify-content-center {
|
||||
-webkit-box-pack: start!important;
|
||||
-ms-flex-pack: start!important;
|
||||
justify-content: flex-start!important;
|
||||
}
|
||||
|
||||
a {
|
||||
border: 1px solid;
|
||||
border-radius: 50%;
|
||||
font-size: 1rem;
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
text-align: center;
|
||||
i {
|
||||
text-align: center;
|
||||
width: 1.25em;
|
||||
padding-top: 0.44rem;
|
||||
}
|
||||
width: 3rem;
|
||||
}
|
||||
|
||||
i {
|
||||
@include icon-round(2rem);
|
||||
padding-top: 0.44rem;
|
||||
margin-top: .7rem; // multi line space
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
#mode-toggle-wrapper {
|
||||
font-size: 0.9rem;
|
||||
width: 3rem;
|
||||
|
||||
i {
|
||||
@include icon-round(2rem);
|
||||
padding-top: 0.44rem;
|
||||
bottom: 0;
|
||||
top: 11px;
|
||||
}
|
||||
}
|
||||
|
||||
.icon-border {
|
||||
@include ml-mr(.2rem);
|
||||
margin-top: 0.85rem;
|
||||
+a {
|
||||
margin-left: 0;
|
||||
}
|
||||
top: 26px;
|
||||
}
|
||||
|
||||
} // .sidebar-bottom
|
||||
|
||||
} // #sidebar
|
||||
|
||||
footer > div.d-flex {
|
||||
width: 87%;
|
||||
max-width: 1140px;
|
||||
|
||||
@@ -65,7 +65,6 @@
|
||||
color: $color;
|
||||
transition: color 0.35s ease-in-out;
|
||||
user-select: none;
|
||||
margin: 0 0.25rem;
|
||||
}
|
||||
|
||||
@mixin icon-round($diameter) {
|
||||
@@ -97,7 +96,6 @@
|
||||
color: $color;
|
||||
font-size: $font-size;
|
||||
font-weight: $font-weight;
|
||||
font-family: 'Roboto Condensed', 'Microsoft Yahei', sans-serif;
|
||||
}
|
||||
|
||||
@mixin panel-label {
|
||||
|
||||
@@ -56,6 +56,7 @@ div > pre {
|
||||
@extend %code-snippet-radius;
|
||||
|
||||
color: var(--highlighter-rouge-color);
|
||||
margin-top: 0.5rem;
|
||||
margin-bottom: 1.2em; /* Override BS Inline-code style */
|
||||
}
|
||||
|
||||
@@ -111,7 +112,6 @@ code {
|
||||
&.highlighter-rouge {
|
||||
font-size: $code-font-size;
|
||||
padding: 3px 5px;
|
||||
margin: 0 0.15rem;
|
||||
border-radius: 4px;
|
||||
background-color: var(--inline-code-bg);
|
||||
}
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
|
||||
/* --- ↓ width and height ---- */
|
||||
|
||||
$tab-height: 3.3rem;
|
||||
$tab-height: 3.2rem;
|
||||
$tab-cursor-height: 1.6rem;
|
||||
|
||||
$sidebar-width-small: 210px;
|
||||
|
||||
@@ -25,7 +25,7 @@
|
||||
--btn-backtotop-color: #686868;
|
||||
--btn-backtotop-border-color: #f1f1f1;
|
||||
--btn-box-shadow: #eaeaea;
|
||||
--checkbox-color: darkgrey;
|
||||
--checkbox-color: #c5c5c5;
|
||||
--checkbox-checked-color: #07a8f7;
|
||||
|
||||
/* Sidebar */
|
||||
@@ -59,7 +59,7 @@
|
||||
--btn-share-hover-color: var(--link-color);
|
||||
--card-border-color: #f1f1f1;
|
||||
--card-box-shadow: rgba(234, 234, 234, 0.7686274509803922);
|
||||
--label-color: #808080;
|
||||
--label-color: #616161;
|
||||
--relate-post-date: rgba(30, 55, 70, 0.4);
|
||||
--tag-bg: rgba(0, 0, 0, 0.075);
|
||||
--tag-border: #dee2e6;
|
||||
|
||||
@@ -19,10 +19,6 @@
|
||||
background-color: var(--timeline-color);
|
||||
}
|
||||
|
||||
%date-font {
|
||||
font-family: 'Roboto Condensed', sans-serif;
|
||||
}
|
||||
|
||||
#archives {
|
||||
letter-spacing: 0.03rem;
|
||||
li {
|
||||
@@ -42,7 +38,6 @@
|
||||
|
||||
span.lead {
|
||||
font-size: 1.5rem;
|
||||
@extend %date-font;
|
||||
position: relative;
|
||||
left: 8px;
|
||||
|
||||
@@ -54,8 +49,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
&::after {
|
||||
/* Year dot */
|
||||
&::after { /* Year dot */
|
||||
content: "";
|
||||
display: block;
|
||||
position: relative;
|
||||
@@ -80,8 +74,8 @@
|
||||
&.month {
|
||||
width: 1.4rem;
|
||||
text-align: center;
|
||||
@extend %date-font;
|
||||
~a::before {
|
||||
|
||||
~ a::before {
|
||||
/* A dot for Month and Day */
|
||||
content: "";
|
||||
display: inline-block;
|
||||
|
||||
@@ -49,21 +49,6 @@ $prompt-newer: "{{ site.data.label.post.button.next }}";
|
||||
}
|
||||
|
||||
.post-content {
|
||||
> ol, > ul, > dl {
|
||||
padding-left: 2rem;
|
||||
li + li {
|
||||
margin-top: 0.3rem;
|
||||
}
|
||||
}
|
||||
li {
|
||||
> ol, > ul, > dl { // sub list
|
||||
padding-left: 2rem;
|
||||
margin-top: 0.3rem;
|
||||
}
|
||||
> p {
|
||||
margin: 1rem 0 0.8rem;
|
||||
}
|
||||
}
|
||||
.preview-img {
|
||||
margin-top: 0;
|
||||
margin-bottom: 2.5rem;
|
||||
@@ -182,7 +167,7 @@ $prompt-newer: "{{ site.data.label.post.button.next }}";
|
||||
@include label(1.1rem, 600);
|
||||
}
|
||||
.card {
|
||||
border: 1px solid var(--card-border-color);
|
||||
border-color: var(--card-border-color);
|
||||
background-color: var(--card-bg);
|
||||
box-shadow: 0 0 5px 0 var(--card-box-shadow);
|
||||
-webkit-transition: all 0.3s ease-in-out;
|
||||
@@ -194,7 +179,7 @@ $prompt-newer: "{{ site.data.label.post.button.next }}";
|
||||
&:hover {
|
||||
-webkit-transform: translate3d(0, -3px, 0);
|
||||
transform: translate3d(0, -3px, 0);
|
||||
box-shadow: 0 20px 35px -4px rgba(0, 0, 0, 0.15);
|
||||
box-shadow: 0 10px 15px -4px rgba(0,0,0,0.15);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,9 +1,8 @@
|
||||
/*
|
||||
Reference: https://bootsnipp.com/snippets/featured/link-to-top-page
|
||||
*/
|
||||
|
||||
$(function() {
|
||||
$(window).scroll(function() {
|
||||
$(window).scroll(() => {
|
||||
if ($(this).scrollTop() > 50 &&
|
||||
$("#sidebar-trigger").css("display") === "none") {
|
||||
$("#back-to-top").fadeIn();
|
||||
@@ -12,10 +11,8 @@ $(function() {
|
||||
}
|
||||
});
|
||||
|
||||
$("#back-to-top").click(function() {
|
||||
$("body,html").animate({
|
||||
scrollTop: 0
|
||||
}, 800);
|
||||
$("#back-to-top").click(() => {
|
||||
$("body,html").scrollTop(0);
|
||||
return false;
|
||||
});
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user