From 8e84c6b9d6652ce602bab66ca6b6d45e1bd5279b Mon Sep 17 00:00:00 2001 From: Cotes Chung <11371340+cotes2020@users.noreply.github.com> Date: Wed, 27 Jan 2021 20:06:31 +0800 Subject: [PATCH] Improve code style - js/css - markdown - shell --- README.md | 55 +- _posts/2019-08-09-getting-started.md | 42 +- _posts/2021-01-03-enable-google-pv.md | 34 +- _sass/addon/commons.scss | 1347 +++++++++++++------------ _sass/addon/module.scss | 1 + _sass/jekyll-theme-chirpy.scss | 25 +- _sass/layout/archives.scss | 106 +- _sass/layout/categories.scss | 16 +- _sass/layout/category-tag.scss | 34 +- _sass/layout/home.scss | 112 +- _sass/layout/post.scss | 54 +- docs/README.zh-CN.md | 37 +- gulpfile.js/tasks/js.js | 3 +- tools/bump.sh | 12 +- 14 files changed, 961 insertions(+), 917 deletions(-) diff --git a/README.md b/README.md index 25acbcd..d376871 100644 --- a/README.md +++ b/README.md @@ -48,8 +48,8 @@ Follow the [Jekyll Docs](https://jekyllrb.com/docs/installation/) to complete th There are two ways to get the theme: - - Install from [RubyGems](https://rubygems.org/gems/jekyll-theme-chirpy) - - Fork from GitHub +- Install from [RubyGems](https://rubygems.org/gems/jekyll-theme-chirpy) +- Fork from GitHub ### Install From Rubygems @@ -81,9 +81,6 @@ $ bundle info --path jekyll-theme-chirpy Or you can [use the starter template][use-starter] to create a Jekyll site to save time copying contents from theme's gem. -[starter]: https://github.com/cotes2020/chirpy-starter -[use-starter]: https://github.com/cotes2020/chirpy-starter/generate - ### Fork From GitHub [Fork **Chirpy**](https://github.com/cotes2020/jekyll-theme-chirpy/fork) from GitHub and clone your fork to local. @@ -104,16 +101,15 @@ $ bash tools/init.sh What it does is: - 1. Remove some files or directories from your repository: +1. Remove some files or directories from your repository: - - `.travis.yml` - - files under `_posts` - - folder `docs` + - `.travis.yml` + - files under `_posts` + - folder `docs` - 2. If you use the `--no-gh` option, the directory `.github` will be deleted. Otherwise, setup the GitHub Action workflow by removing extension `.hook` of `.github/workflows/pages-deploy.yml.hook`, and then remove the other files and directories in folder `.github`. - - 3. Automatically create a commit to save the changes. +2. If you use the `--no-gh` option, the directory `.github` will be deleted. Otherwise, setup the GitHub Action workflow by removing extension `.hook` of `.github/workflows/pages-deploy.yml.hook`, and then remove the other files and directories in folder `.github`. +3. Automatically create a commit to save the changes. ## Usage @@ -121,10 +117,10 @@ What it does is: Update the variables of `_config.yml` as needed. Some of them are typical options: - - `url` - - `avatar` - - `timezone` - - `theme_mode` +- `url` +- `avatar` +- `timezone` +- `theme_mode` ### Running Local Server @@ -157,23 +153,20 @@ For security reasons, GitHub Pages build runs on `safe` mode, which restricts us Quickly check the files needed for GitHub Actions build: - 1. Ensure your Jekyll site has the file `/.github/workflows/pages-deploy.yml`. Otherwise, create a new one and fill in the contents of the [workflow file][workflow], and the value of the `on.push.branches` should be the same as your repo's default branch name. - - 2. Ensuer your Jekyll site has file `/tools/test.sh` and `/tools/deploy.sh`. Otherwise, copy them from this repo to your Jekyll site. - -[workflow]:https://github.com/cotes2020/jekyll-theme-chirpy/blob/master/.github/workflows/pages-deploy.yml.hook +1. Ensure your Jekyll site has the file `/.github/workflows/pages-deploy.yml`. Otherwise, create a new one and fill in the contents of the [workflow file][workflow], and the value of the `on.push.branches` should be the same as your repo's default branch name. +2. Ensuer your Jekyll site has file `/tools/test.sh` and `/tools/deploy.sh`. Otherwise, copy them from this repo to your Jekyll site. Next, rename your repoistory to `.github.io` on GitHub. And then publish your Jekyll site by: - 1. Push any commit to remote to trigger the GitHub Actions workflow. Once the build is complete and successful, a new remote branch named `gh-pages` will appear to store the built site files. +1. Push any commit to remote to trigger the GitHub Actions workflow. Once the build is complete and successful, a new remote branch named `gh-pages` will appear to store the built site files. - 2. Browse to your repo's landing page on GitHub and select the branch `gh-pages` as the [publishing source](https://docs.github.com/en/github/working-with-github-pages/configuring-a-publishing-source-for-your-github-pages-site) throught _Settings_ → _Options_ → _GitHub Pages_: +2. Browse to your repo's landing page on GitHub and select the branch `gh-pages` as the [publishing source](https://docs.github.com/en/github/working-with-github-pages/configuring-a-publishing-source-for-your-github-pages-site) throught _Settings_ → _Options_ → _GitHub Pages_: - ![gh-pages-sources](https://cdn.jsdelivr.net/gh/cotes2020/chirpy-images/posts/20190809/gh-pages-sources.png) + ![gh-pages-sources](https://cdn.jsdelivr.net/gh/cotes2020/chirpy-images/posts/20190809/gh-pages-sources.png) - 3. Visit your website at the address indicated by GitHub. +3. Visit your website at the address indicated by GitHub. #### Deploy on Other Platforms @@ -197,7 +190,6 @@ $ docker run -it --rm \ Unless you specified the output path, the generated site files will be placed in folder `_site` of the project's root directory. Now you should upload those files to your web server. - ## Documentation For more details and the better reading experience, please check out the [tutorials on demo site](https://chirpy.cotes.info/categories/tutorial/). In the meanwhile, a copy of the tutorial is also available on the [Wiki](https://github.com/cotes2020/jekyll-theme-chirpy/wiki). @@ -212,11 +204,9 @@ This theme is mainly built with [Jekyll](https://jekyllrb.com/) ecosystem, [Boot :tada: Thanks to all the volunteers who contributed to this project, their GitHub IDs are on [this list](https://github.com/cotes2020/jekyll-theme-chirpy/graphs/contributors). Also, I won't forget those guys who submitted the issues or unmerged PR because they reported bugs, shared ideas or inspired me to write more readable documentation. -Also, thank [JetBrains][JB] for providing the open source license. +Also, thank [JetBrains][jb] for providing the open source license. -[![JB-logo](https://cdn.jsdelivr.net/gh/cotes2020/chirpy-images/commons/jetbrains.svg)][JB] - -[JB]:https://www.jetbrains.com/?from=jekyll-theme-chirpy +[![JB-logo](https://cdn.jsdelivr.net/gh/cotes2020/chirpy-images/commons/jetbrains.svg)][jb] ## Supporting @@ -225,3 +215,8 @@ If you enjoy this theme or find it helpful, please consider becoming my sponsor, ## License This work is published under [MIT](https://github.com/cotes2020/jekyll-theme-chirpy/blob/master/LICENSE) License. + +[starter]: https://github.com/cotes2020/chirpy-starter +[use-starter]: https://github.com/cotes2020/chirpy-starter/generate +[workflow]:https://github.com/cotes2020/jekyll-theme-chirpy/blob/master/.github/workflows/pages-deploy.yml.hook +[jb]:https://www.jetbrains.com/?from=jekyll-theme-chirpy diff --git a/_posts/2019-08-09-getting-started.md b/_posts/2019-08-09-getting-started.md index 1cd904f..e36bd3f 100644 --- a/_posts/2019-08-09-getting-started.md +++ b/_posts/2019-08-09-getting-started.md @@ -15,8 +15,8 @@ Follow the [Jekyll Docs](https://jekyllrb.com/docs/installation/) to complete th There are two ways to get the theme: - - Install from [RubyGems](https://rubygems.org/gems/jekyll-theme-chirpy) - - Fork from GitHub +- Install from [RubyGems](https://rubygems.org/gems/jekyll-theme-chirpy) +- Fork from GitHub ### Install From Rubygems @@ -48,9 +48,6 @@ $ bundle info --path jekyll-theme-chirpy Or you can [use the starter template][use-starter] to create a Jekyll site to save time copying contents from theme's gem. -[starter]: https://github.com/cotes2020/chirpy-starter -[use-starter]: https://github.com/cotes2020/chirpy-starter/generate - ### Fork From GitHub [Fork **Chirpy**](https://github.com/cotes2020/jekyll-theme-chirpy/fork) from GitHub and clone your fork to local. @@ -71,15 +68,15 @@ $ bash tools/init.sh What it does is: - 1. Remove some files or directories from your repository: +1. Remove some files or directories from your repository: - - `.travis.yml` - - files under `_posts` - - folder `docs` + - `.travis.yml` + - files under `_posts` + - folder `docs` - 2. If you use the `--no-gh` option, the directory `.github` will be deleted. Otherwise, setup the GitHub Action workflow by removing extension `.hook` of `.github/workflows/pages-deploy.yml.hook`, and then remove the other files and directories in folder `.github`. +2. If you use the `--no-gh` option, the directory `.github` will be deleted. Otherwise, setup the GitHub Action workflow by removing extension `.hook` of `.github/workflows/pages-deploy.yml.hook`, and then remove the other files and directories in folder `.github`. - 3. Automatically create a commit to save the changes. +3. Automatically create a commit to save the changes. ## Usage @@ -88,10 +85,10 @@ What it does is: Update the variables of `_config.yml` as needed. Some of them are typical options: - - `url` - - `avatar` - - `timezone` - - `theme_mode` +- `url` +- `avatar` +- `timezone` +- `theme_mode` ### Running Local Server @@ -124,23 +121,20 @@ For security reasons, GitHub Pages build runs on `safe` mode, which restricts us Quickly check the files needed for GitHub Actions build: - 1. Ensure your Jekyll site has the file `/.github/workflows/pages-deploy.yml`. Otherwise, create a new one and fill in the contents of the [workflow file][workflow], and the value of the `on.push.branches` should be the same as your repo's default branch name. - - 2. Ensuer your Jekyll site has file `/tools/test.sh` and `/tools/deploy.sh`. Otherwise, copy them from this repo to your Jekyll site. - -[workflow]:https://github.com/cotes2020/jekyll-theme-chirpy/blob/master/.github/workflows/pages-deploy.yml.hook +1. Ensure your Jekyll site has the file `/.github/workflows/pages-deploy.yml`. Otherwise, create a new one and fill in the contents of the [workflow file][workflow], and the value of the `on.push.branches` should be the same as your repo's default branch name. +2. Ensuer your Jekyll site has file `/tools/test.sh` and `/tools/deploy.sh`. Otherwise, copy them from this repo to your Jekyll site. Next, rename your repoistory to `.github.io` on GitHub. And then publish your Jekyll site by: - 1. Push any commit to remote to trigger the GitHub Actions workflow. Once the build is complete and successful, a new remote branch named `gh-pages` will appear to store the built site files. +1. Push any commit to remote to trigger the GitHub Actions workflow. Once the build is complete and successful, a new remote branch named `gh-pages` will appear to store the built site files. - 2. Browse to your repo's landing page on GitHub and select the branch `gh-pages` as the [publishing source](https://docs.github.com/en/github/working-with-github-pages/configuring-a-publishing-source-for-your-github-pages-site) throught _Settings_ → _Options_ → _GitHub Pages_: +2. Browse to your repo's landing page on GitHub and select the branch `gh-pages` as the [publishing source](https://docs.github.com/en/github/working-with-github-pages/configuring-a-publishing-source-for-your-github-pages-site) throught _Settings_ → _Options_ → _GitHub Pages_: - ![gh-pages-sources](https://cdn.jsdelivr.net/gh/cotes2020/chirpy-images/posts/20190809/gh-pages-sources.png) + ![gh-pages-sources](https://cdn.jsdelivr.net/gh/cotes2020/chirpy-images/posts/20190809/gh-pages-sources.png) - 3. Visit your website at the address indicated by GitHub. +3. Visit your website at the address indicated by GitHub. #### Deploy on Other Platforms diff --git a/_posts/2021-01-03-enable-google-pv.md b/_posts/2021-01-03-enable-google-pv.md index 0089ca5..4bbdf81 100644 --- a/_posts/2021-01-03-enable-google-pv.md +++ b/_posts/2021-01-03-enable-google-pv.md @@ -16,10 +16,10 @@ This post is to enable Page Views on the [**Chirpy**][chirpy-homepage] theme bas First, you need to setup your account on Google analytics. While your create your account, you must create your first **Property** as well. 1. Head to and click on **Start Measuring** -2. Enter your desired *Account Name* and choose the desired checkboxes -3. Enter your desired *Property Name*. This is the name of the tracker project that appears on your Google Analytics dashboard -4. Enter the required information *About your business* -5. Hit *Create* and accept any license popup to setup your Google Analytics account and create your property +2. Enter your desired _Account Name_ and choose the desired checkboxes +3. Enter your desired _Property Name_. This is the name of the tracker project that appears on your Google Analytics dashboard +4. Enter the required information _About your business_ +5. Hit _Create_ and accept any license popup to setup your Google Analytics account and create your property ### Create Data Stream @@ -75,9 +75,9 @@ There is a detailed [tutorial](https://developers.google.com/analytics/solutions 8. Click on **Enable APIs and Services** button on the top -9. Enable the following APIs: *Google Analytics API* +9. Enable the following APIs: _Google Analytics API_ -10. On the left, Click on *OAuth Consent Screen* and accept **Configure Consent Screen**. Select **External** since your blog is probably hosted for the public. Click on **Publish** under *Publishing Status* +10. On the left, Click on _OAuth Consent Screen_ and accept **Configure Consent Screen**. Select **External** since your blog is probably hosted for the public. Click on **Publish** under _Publishing Status_ 11. Click on **Credentials** on the left and create a new **OAuth Client IDs** credential. Make sure to add a entry under `Authorized redirect URIs` that matches: `https://..r.appspot.com/admin/auth` @@ -116,10 +116,11 @@ There is a detailed [tutorial](https://developers.google.com/analytics/solutions 1. Clone the **Google Analytics superProxy** project on Github: to your local. 2. Remove the first 2 lines in the [`src/app.yaml`](https://github.com/googleanalytics/google-analytics-super-proxy/blob/master/src/app.yaml#L1-L2) file: - ```diff -- application: your-project-id -- version: 1 - ``` + + ```yaml + -application: your-project-id + -version: 1 + ``` 3. In `src/config.py`, add the `OAUTH_CLIENT_ID` and `OAUTH_CLIENT_SECRET` that you gathered from you App Engine Dashboard. @@ -143,7 +144,8 @@ There is a detailed [tutorial](https://developers.google.com/analytics/solutions # XSRF Settings XSRF_KEY = 'OnceUponATimeThereLivedALegend' ``` -**Tip:** You can configure a custom domain instead of `https://PROJECT_ID.REGION_ID.r.appspot.com`. But, for the sake of keeping it simple, we will be using the Google provided default URL. + + **Tip:** You can configure a custom domain instead of `https://PROJECT_ID.REGION_ID.r.appspot.com`. But, for the sake of keeping it simple, we will be using the Google provided default URL. 5. From inside the src/ directory, deploy the app @@ -194,20 +196,17 @@ Head to `https://PROJECT_ID.REGION_ID.r.appspot.com/admin` and create a query af The query parameters are as follows: - **start-date**: fill in the first day of blog posting - - **end-date**: fill in `today` (this is a parameter supported by GA Report, which means that it will always end according to the current query date) - - **metrics**: select `ga:pageviews` - - **dimensions**: select `ga:pagePath` In order to reduce the returned results and reduce the network bandwidth, we add custom filtering rules [^ga-filters]: -- **filters**: fill in `ga:pagePath=~^/posts/.*/$;ga:pagePath!@=` +- **filters**: fill in `ga:pagePath=~^/posts/.*/$;ga:pagePath!@=`. - Among them, `;` means using _logical AND_ to concatenate two rules. + Among them, `;` means using _logical AND_ to concatenate two rules. - If the `site.baseurl` is specified, change the first filtering rule to `ga:pagePath=~^/BASE_URL/posts/.*/$`, where `BASE_URL` is the value of `site.baseurl`. + If the `site.baseurl` is specified, change the first filtering rule to `ga:pagePath=~^/BASE_URL/posts/.*/$`, where `BASE_URL` is the value of `site.baseurl`. After Run Query, copy the generated contents of **API Query URI** at the bottom of the page, and fill in the **Encoded URI for the query** of SuperProxy on GAE. @@ -224,6 +223,7 @@ Once all the hard part is done, it is very easy to enable the Page View on Chirp Update the `_config.yml` file of [**Chirpy**][chirpy-homepage] project with the values from your dashboard, to look similar to the following: + ```yaml google_analytics: id: 'G-XXXXXXXXXX' # Fill with your Google Analytics ID diff --git a/_sass/addon/commons.scss b/_sass/addon/commons.scss index bc847f2..7fc51b5 100644 --- a/_sass/addon/commons.scss +++ b/_sass/addon/commons.scss @@ -6,18 +6,23 @@ @mixin mode-toggle($dark-mode: false) { @if $dark-mode { @include dark-scheme; + .mode-toggle { transform: rotateY(180deg); } + } @else { @include light-scheme; + .mode-toggle { transform: none; } } + } -html:not([mode]), html[mode=light] { +html:not([mode]), +html[mode=light] { @include mode-toggle(); } @@ -26,7 +31,8 @@ html[mode=dark] { } @media (prefers-color-scheme: dark) { - html:not([mode]), html[mode=dark] { + html:not([mode]), + html[mode=dark] { @include mode-toggle(true); } @@ -47,7 +53,535 @@ body { font-family: 'Source Sans Pro', 'Microsoft Yahei', sans-serif; } -/*--- sidebar layout ---*/ +/* --- Typography --- */ + +h1 { + @extend %heading; + + font-size: 1.8rem; +} + +h2 { + @extend %heading; + @extend %section; + @extend %anchor; + + font-size: 1.4rem; +} + +h3 { + @extend %heading; + @extend %section; + @extend %anchor; + + font-size: 1.25rem; +} + +h4 { + @extend %heading; + @extend %section; + @extend %anchor; + + font-size: 1.15rem; +} + +h5 { + @extend %heading; + @extend %section; + @extend %anchor; + + font-size: 1.1rem; +} + +ol, +ul { + ol, + ul { + margin-bottom: 1rem; + } +} + +a { + @extend %link-color; +} + +img { + max-width: 100%; +} + +blockquote { + border-left: 5px solid var(--blockquote-border-color); + padding-left: 1rem; + color: var(--blockquote-text-color); +} + +kbd { + margin: 0 0.3rem; +} + +footer { + position: absolute; + bottom: 0; + padding: 0 1rem; + height: $footer-height; + font-size: 0.8rem; + color: #7a7b7d; + background-color: var(--footer-bg-color); + + > div.d-flex { + line-height: 1.2rem; + width: 95%; + max-width: 1045px; + border-top: 1px solid var(--main-border-color); + margin-bottom: 1rem; + + > div { + width: 350px; + } + } + + a { + color: var(--footer-link); + &:link { + @include no-text-decoration; + } + &:hover { + @extend %link-hover; + + @include no-text-decoration; + } + } + .footer-right { + text-align: right; + } +} + +/* --- Panels --- */ + +.access { + top: 2rem; + transition: top 0.2s ease-in-out; + margin-right: 1.5rem; + margin-top: 3rem; + margin-bottom: 4rem; + + &:only-child { + position: -webkit-sticky; /* Safari */ + position: sticky; + } + &.topbar-down { + top: 6rem; + } + > div { + padding-left: 1rem; + border-left: 1px solid var(--main-border-color); + &:not(:last-child) { + margin-bottom: 4rem; + } + } + span { + @include panel-label; + } + .post-content { + font-size: 0.9rem; + } +} + +#access-tags { + > div.post-content > div { + max-width: 80%; + } + + .post-tag { + display: inline-block; + line-height: 1rem; + font-size: 0.85rem; + background: none; + border: 1px solid var(--btn-border-color); + border-radius: 0.8rem; + padding: 0.3rem 0.5rem; + margin: 0 0.35rem 0.5rem 0; + &:hover { + background-color: #2a408e; + border-color: #2a408e; + color: #fff; + transition: none; + } + } +} + +#access-lastmod { + + li { + height: 1.8rem; + overflow: hidden; + text-overflow: ellipsis; + display: -webkit-box; + -webkit-line-clamp: 1; + -webkit-box-orient: vertical; + list-style: none; + } + + a { + &:hover { + @extend %link-hover; + } + + @extend %no-bottom-border; + + color: #6c757d; + } + +} + +.footnotes > ol { + padding-left: 2rem; + margin-top: 0.5rem; + > li { + &:not(:last-child) { + margin-bottom: 0.3rem; + } + > p { + margin-left: 0.25em; + margin-top: 0; + margin-bottom: 0; + } + // [scroll-focus] added by `smooth-scroll.js` + &:target:not([scroll-focus]), + &[scroll-focus=true] > p { + background-color: var(--footnote-target-bg); + width: fit-content; + -webkit-transition: background-color 1.5s ease-in-out; // Safari prior 6.1 + transition: background-color 1.5s ease-in-out; + } + } +} + +.footnote { + @at-root a#{&} { + @include ml-mr(1px); + @include pl-pr(2px); + + border-bottom-style: none !important; + -webkit-transition: background-color 1.5s ease-in-out; // Safari prior 6.1 + transition: background-color 1.5s ease-in-out; + } + + // [scroll-focus] added by `smooth-scroll.js` + @at-root sup:target:not([scroll-focus]), + sup[scroll-focus=true] > a#{&} { + background-color: var(--footnote-target-bg); + } +} + +.reversefootnote { + @at-root a#{&} { + font-size: 0.6rem; + position: absolute; + line-height: 1; + padding-top: 0.5em; + margin-left: 0.5em; + border-bottom-style: none !important; + } +} + +.post { + h1 { + margin-top: 3rem; + margin-bottom: 1rem; + } + em { /* MarkDown italic */ + padding-right: 0.2rem; + } + a:hover { + code { + @extend %link-hover; + } + } +} + +/* --- Begin of Markdown table style --- */ + +.table-wrapper { // it will be created by Liquid + 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; + } + } + } + } +} + +/* --- post --- */ + +.pageviews .fa-spinner { + font-size: 80%; +} + +.post-meta { + font-size: 0.85rem; + word-spacing: 1px; + a { + @extend %link-color; + @extend %link-underline; + &:not(:last-child) { + margin-right: 2px; + } + &:hover { + @extend %link-hover; + } + } +} + +.post-content { + line-height: 1.8; + margin-top: 2rem; + 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] { + @if $caption { + @include img-caption; + } + + &.left { + float: left; + margin: 0.75rem 1rem 1rem 0; + } + + &.right { + float: right; + margin: 0.75rem 0 1rem 1rem; + } + + } + } + + a { + blockquote & { + color: var(--link-color); + } + + &:not(.img-hyperlink) { + @extend %link-color; + @extend %link-underline; + &:hover { + @extend %link-hover; + } + } + + &.img-hyperlink { + @include img; + @include img-caption; + } + } + + > p { + > img[data-src]:not(.normal):not(.left):not(.right) { + @include align-center; + } + } + + p { + @include img(true); + + font-size: 1.08rem; + } + + ul { + // attribute 'hide-bullet' was added by liquid + .task-list-item[hide-bullet] { + list-style-type: none; + + > i { // checkbox icon + margin: 0 0.4rem 0.2rem -1.4rem; + vertical-align: middle; + color: var(--checkbox-color); + &.checked { + color: var(--checkbox-checked-color); + } + } + + } + + input[type=checkbox] { + margin: 0 0.5rem 0.2rem -1.3rem; + vertical-align: middle; + } + + } // 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 { + @extend %tag-hover; +} + +.post-tag { + display: inline-block; + min-width: 2rem; + text-align: center; + background: var(--tag-bg); + border-radius: 0.3rem; + padding: 0 0.4rem; + color: inherit; + line-height: 1.3rem; + + &:not(:last-child) { + margin-right: 0.2rem; + } + + &:hover { + @extend %tag-hover; + + border-bottom: none; + text-decoration: none; + color: #d2603a; + } +} + +/* --- buttons --- */ +.btn-lang { + border: 1px solid !important; + padding: 1px 3px; + border-radius: 3px; + color: var(--link-color); + &:focus { + box-shadow: none; + } +} + +/* --- Effects classes --- */ + +.loaded { + display: block !important; + + @at-root .d-flex#{&} { + display: flex !important; + } +} + +.unloaded { + display: none !important; +} + +.visible { + visibility: visible !important; +} + +.hidden { + visibility: hidden !important; +} + +.flex-grow-1 { + -ms-flex-positive: 1 !important; + flex-grow: 1 !important; +} + +.btn-box-shadow { + box-shadow: 0 0 8px 0 var(--btn-box-shadow) !important; +} + +.topbar-up { + top: -3rem !important; /* same as topbar height. */ +} + +.no-text-decoration { + @include no-text-decoration; +} + +.tooltip-inner { /* Overrided BS4 Tooltip */ + font-size: 0.7rem; + max-width: 220px; + text-align: left; +} + +.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; +} + +/* --- sidebar layout --- */ $tab-count: 5 !default; @@ -55,6 +589,7 @@ $sidebar-display: "sidebar-display"; #sidebar { @include pl-pr(0); + position: fixed; top: 0; left: 0; @@ -66,12 +601,48 @@ $sidebar-display: "sidebar-display"; a { @include sidebar-links; + &:hover { - color: #fff; @include no-text-decoration; + + color: #fff; } } + #avatar { + &:hover > a { + border-color: #fff; + } + + > a { + display: block; + width: 6rem; + height: 6rem; + border-radius: 50%; + border: 2px solid #b6b6b6; + overflow: hidden; + transform: translateZ(0); // fixed the zoom in Safari + -webkit-transition: border-color 0.35s ease-in-out; + -moz-transition: border-color 0.35s ease-in-out; + transition: border-color 0.35s ease-in-out; + } + + img { + width: 100%; + height: 100%; + -webkit-transition: transform 0.5s; + -moz-transition: transform 0.5s; + transition: transform 0.5s; + + &:hover { + -ms-transform: scale(1.2); + -moz-transform: scale(1.2); + -webkit-transform: scale(1.2); + transform: scale(1.2); + } + } + } // #avatar + .site-title { a { font-weight: 900; @@ -120,13 +691,13 @@ $sidebar-display: "sidebar-display"; margin-bottom: 2rem; padding-left: 0; - > li { + li { width: 100%; &:last-child { $cursor-width: 3px; - > a { + a { position: relative; left: $cursor-width / 2; width: 100%; @@ -190,15 +761,12 @@ $sidebar-display: "sidebar-display"; @extend %icon; } - a:hover, #mode-toggle-wrapper > i:hover { - color: #fff; - } - #mode-toggle-wrapper { @extend %icon; i { @include sidebar-links; + margin: 0; font-size: 1.05rem; text-align: center; @@ -218,6 +786,11 @@ $sidebar-display: "sidebar-display"; top: 12px; } + a:hover, + #mode-toggle-wrapper i:hover { + color: #fff; + } + } // .sidebar-bottom } // #sidebar @@ -236,40 +809,6 @@ $sidebar-display: "sidebar-display"; width: 100%; } -#avatar { - > a { - display: block; - width: 6rem; - height: 6rem; - border-radius: 50%; - border: 2px solid #b6b6b6; - overflow: hidden; - transform: translateZ(0); // fixed the zoom in Safari - -webkit-transition: border-color 0.35s ease-in-out; - -moz-transition: border-color 0.35s ease-in-out; - transition: border-color 0.35s ease-in-out; - } - - &:hover > a { - border-color: #fff; - } - - img { - width: 100%; - height: 100%; - -webkit-transition: transform 0.5s; - -moz-transition: transform 0.5s; - transition: transform 0.5s; - - &:hover { - -ms-transform: scale(1.2); - -moz-transform: scale(1.2); - -webkit-transform: scale(1.2); - transform: scale(1.2); - } - } -} // #avatar - #search-result-wrapper { display: none; position: fixed; @@ -282,7 +821,7 @@ $sidebar-display: "sidebar-display"; } } -/*--- top-bar ---*/ +/* --- top-bar --- */ #topbar-wrapper { height: $topbar-height; @@ -297,26 +836,30 @@ $sidebar-display: "sidebar-display"; background-color: var(--topbar-wrapper-bg); } -#topbar i { // icons - color: #999; -} - -#breadcrumb { - font-size: 1rem; - color: gray; - padding-left: 0.5rem; - a:hover { - @extend %link-hover; +#topbar { + i { // icons + color: #999; } - span { - &:not(:last-child) { - &::after { - content: "›"; - padding: 0 0.3rem; + + #breadcrumb { + font-size: 1rem; + color: gray; + padding-left: 0.5rem; + + a:hover { + @extend %link-hover; + } + + span { + &:not(:last-child) { + &::after { + content: "›"; + padding: 0 0.3rem; + } } } } -} +} // #topbar #sidebar-trigger, #search-trigger { @@ -353,23 +896,22 @@ $sidebar-display: "sidebar-display"; padding: 0.18rem 0.3rem; color: var(--text-color); font-size: 95%; -} -#search-input { &:focus { box-shadow: none; background: center; &.form-control { - &::-webkit-input-placeholder { @include input-placeholder } - &::-moz-placeholder { @include input-placeholder } - &:-ms-input-placeholder { @include input-placeholder } - &::placeholder { @include input-placeholder } + &::-webkit-input-placeholder { @include input-placeholder; } + &::-moz-placeholder { @include input-placeholder; } + &:-ms-input-placeholder { @include input-placeholder; } + &::placeholder { @include input-placeholder; } } } } #search-hints { display: none; + .post-tag { display: inline-block; line-height: 1rem; @@ -389,25 +931,31 @@ $sidebar-display: "sidebar-display"; #search-results { padding-bottom: 6rem; a { - @extend %link-color; - @extend %no-bottom-border; - @extend %heading; - font-size: 1.4rem; - line-height: 2.5rem; &:hover { @extend %link-hover; } + + @extend %link-color; + @extend %no-bottom-border; + @extend %heading; + + font-size: 1.4rem; + line-height: 2.5rem; } + > div { max-width: 100%; + &:not(:last-child) { margin-bottom: 1rem; } + i { // icons color: #818182; margin-right: 0.15rem; font-size: 80%; } + > p { overflow: hidden; text-overflow: ellipsis; @@ -416,7 +964,7 @@ $sidebar-display: "sidebar-display"; -webkit-box-orient: vertical; } } -} +} // #search-results #topbar-title { display: none; @@ -432,6 +980,16 @@ $sidebar-display: "sidebar-display"; white-space: nowrap; } +#page { + .categories, + #tags, + #archives { + a:not(:hover) { + @extend %no-bottom-border; + } + } +} + #mask { display: none; position: fixed; @@ -442,23 +1000,26 @@ $sidebar-display: "sidebar-display"; height: 100%; width: 100%; z-index: 1; + @at-root [#{$sidebar-display}] & { - display: block!important; + display: block !important; } } -/*--- main wrapper ---*/ +/* --- main wrapper --- */ #main-wrapper { background-color: var(--main-wrapper-bg); position: relative; min-height: 100vh; padding-bottom: $footer-height; + @include pl-pr(0); } #main > div.row:first-child > div { - &:nth-child(1), &:nth-child(2) { + &:nth-child(1), + &:nth-child(2) { margin-top: $topbar-height; /* same as the height of topbar */ } &:first-child { @@ -468,127 +1029,17 @@ $sidebar-display: "sidebar-display"; } #post-wrapper { - min-height: calc(100vh - #{$topbar-height} - - #{$footer-height} - #{$post-extend-min-height})!important; + min-height: calc( + 100vh - #{$topbar-height} - #{$footer-height} - #{$post-extend-min-height}) !important; } #topbar-wrapper.row, -#main>.row, -#search-result-wrapper>.row { +#main > .row, +#search-result-wrapper > .row { @include ml-mr(0); } -footer { - position: absolute; - bottom: 0; - padding: 0 1rem; - height: $footer-height; - font-size: 0.8rem; - color: #7a7b7d; - background-color: var(--footer-bg-color); - > div.d-flex { - line-height: 1.2rem; - width: 95%; - max-width: 1045px; - border-top: 1px solid var(--main-border-color); - margin-bottom: 1rem; - > div { - width: 350px; - } - } - a { - color: var(--footer-link); - &:link { - @include no-text-decoration; - } - &:hover { - @extend %link-hover; - @include no-text-decoration; - } - } - .footer-right { - text-align: right; - } -} - -/*--- Panels ---*/ - -.access { - top: 2rem; - transition: top 0.2s ease-in-out; - margin-right: 1.5rem; - margin-top: 3rem; - margin-bottom: 4rem; - &:only-child { - position: -webkit-sticky; /* Safari */ - position: sticky; - } - &.topbar-down { - top: 6rem; - } - > div { - padding-left: 1rem; - border-left: 1px solid var(--main-border-color); - &:not(:last-child) { - margin-bottom: 4rem; - } - } - span { - @include panel-label; - } - .post-content { - font-size: 0.9rem; - } -} - - -#access-tags { - > div.post-content > div { - max-width: 80%; - } - .post-tag { - display: inline-block; - line-height: 1rem; - font-size: 0.85rem; - background: none; - border: 1px solid var(--btn-border-color); - border-radius: 0.8rem; - padding: 0.3rem 0.5rem; - margin: 0 0.35rem 0.5rem 0; - &:hover { - background-color: #2a408e; - border-color: #2a408e; - color: #fff; - transition: none; - } - } -} - -#access-lastmod { - ul { - > li { - height: 1.8rem; - overflow: hidden; - text-overflow: ellipsis; - display: -webkit-box; - -webkit-line-clamp: 1; - -webkit-box-orient: vertical; - list-style: none; - } - a { - color: #6c757d; - } - } - - a { - @extend %no-bottom-border; - &:hover { - @extend %link-hover; - } - } -} - -/*--- button back-to-top ---*/ +/* --- button back-to-top --- */ #back-to-top { display: none; @@ -610,427 +1061,7 @@ footer { -webkit-transform: translate3d(0, -5px, 0); } -/*--- Typography ---*/ - -h1 { - @extend %heading; - font-size: 1.8rem; -} - -h2 { - @extend %heading; - @extend %section; - @extend %anchor; - font-size: 1.4rem; -} - -h3 { - @extend %heading; - @extend %section; - @extend %anchor; - font-size: 1.25rem; -} - -h4 { - @extend %heading; - @extend %section; - @extend %anchor; - font-size: 1.15rem; -} - -h5 { - @extend %heading; - @extend %section; - @extend %anchor; - font-size: 1.1rem; -} - -ol, ul { - ol, ul { - margin-bottom: 1rem; - } -} - -blockquote { - border-left: 5px solid var(--blockquote-border-color); - padding-left: 1rem; - color: var(--blockquote-text-color); - .post-content & { - a { - color: var(--link-color); - } - } -} - -kbd { - margin: 0 0.3rem; -} - -.footnotes > ol { - padding-left: 2rem; - margin-top: 0.5rem; - > li { - &:not(:last-child) { - margin-bottom: 0.3rem; - } - > p { - margin-left: 0.25em; - margin-top: 0; - margin-bottom: 0; - } - &:target:not([scroll-focus]), &[scroll-focus=true] > p { // [scroll-focus] added by `smooth-scroll.js` - background-color: var(--footnote-target-bg); - width: fit-content; - -webkit-transition: background-color 1.5s ease-in-out; - /* Safari prior 6.1 */ - transition: background-color 1.5s ease-in-out; - } - } -} - -.footnote { - @at-root a#{&} { - @include ml-mr(1px); - @include pl-pr(2px); - border-bottom-style: none !important; - -webkit-transition: background-color 1.5s ease-in-out; /* Safari prior 6.1 */ - transition: background-color 1.5s ease-in-out; - } - @at-root sup:target:not([scroll-focus]), sup[scroll-focus=true] > a#{&} { // [scroll-focus] added by `smooth-scroll.js` - background-color: var(--footnote-target-bg); - } -} - -.reversefootnote { - @at-root a#{&} { - font-size: 0.6rem; - position: absolute; - line-height: 1; - padding-top: 0.5em; - margin-left: 0.5em; - border-bottom-style: none !important; - } -} - -a { - p > & { - @extend %link-color; - } - span > & { - @extend %link-color; - } - .post-preview & { - @extend %link-color; - &:hover { - @extend %link-hover; - } - } - .categories &, - #page-category &, - #tags &, - #archives & { - &:not(:hover) { - @extend %no-bottom-border; - } - } - -} // a - -img { - max-width: 100%; -} - -.post { - h1 { - margin-top: 3rem; - margin-bottom: 1rem; - } - em { /* MarkDown italic */ - padding-right: 0.2rem; - } - a:hover { - code { - @extend %link-hover; - } - } -} - - -/*--- Begin of Markdown table style ---*/ - -.table-wrapper { // it will be created by Liquid - 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 { - &:nth-child(2n) { - background-color: var(--tb-even-bg); - } - &:nth-child(2n + 1) { - background-color: var(--tb-odd-bg); - } - & { - border-bottom: 1px solid var(--tb-border-color); - } - td { - @extend %table-cell; - } - } - } - } -} - - -/*--- post ---*/ - -.pageviews .fa-spinner { - font-size: 80%; -} - -.post-meta { - font-size: 0.85rem; - word-spacing: 1px; - a { - @extend %link-color; - @extend %link-underline; - &:not(:last-child) { - margin-right: 2px; - } - &:hover { - @extend %link-hover; - } - } -} - -.post-content { - line-height: 1.8; - margin-top: 2rem; - 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] { - - @if $caption { - @include img-caption; - } - - &.left { - float: left; - margin: 0.75rem 1rem 1rem 0; - } - - &.right { - float: right; - margin: 0.75rem 0 1rem 1rem; - } - - } - } - - a { - &:not(.img-hyperlink) { - @extend %link-color; - @extend %link-underline; - &:hover { - @extend %link-hover; - } - } - &.img-hyperlink { - @include img; - @include img-caption; - } - } - - > p { - > img[data-src]:not(.normal):not(.left):not(.right) { - @include align-center; - } - } - - p { - font-size: 1.08rem; - @include img(true); - } - - ul { - // attribute 'hide-bullet' was added by liquid - .task-list-item[hide-bullet] { - list-style-type: none; - - > i { // checkbox icon - margin: 0 0.4rem 0.2rem -1.4rem; - vertical-align: middle; - color: var(--checkbox-color); - &.checked { - color: var(--checkbox-checked-color); - } - } - - } - - input[type=checkbox] { - margin: 0 0.5rem 0.2rem -1.3rem; - vertical-align: middle; - } - - } // 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 { - @extend %tag-hover; -} - -.post-tag { - display: inline-block; - min-width: 2rem; - text-align: center; - background: var(--tag-bg); - border-radius: 0.3rem; - padding: 0 0.4rem; - color: inherit; - line-height: 1.3rem; - &:not(:last-child) { - margin-right: 0.2rem; - } - - &:hover { - @extend %tag-hover; - border-bottom: none; - text-decoration: none; - color: #d2603a; - } -} - -/* --- buttons --- */ -.btn-lang { - border: 1px solid !important; - padding: 1px 3px; - border-radius: 3px; - color: var(--link-color); - &:focus { - box-shadow: none; - } -} - -/* --- Effects classes --- */ - -.loaded { - display: block !important; - @at-root .d-flex#{&} { - display: flex !important; - } -} - -.unloaded { - display: none !important; -} - -.visible { - visibility: visible !important; -} - -.hidden { - visibility: hidden !important; -} - -.flex-grow-1 { - -ms-flex-positive: 1!important; - flex-grow: 1!important; -} - -.btn-box-shadow { - box-shadow: 0 0 8px 0 var(--btn-box-shadow)!important; -} - -.topbar-up { - top: -3rem !important; /* same as topbar height. */ -} - -.no-text-decoration { - @include no-text-decoration; -} - -.tooltip-inner { /* Overrided BS4 Tooltip */ - font-size: 0.7rem; - max-width: 220px; - text-align: left; -} - -.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; -} - -/*--- Responsive Design ---*/ +/* --- Responsive Design --- */ @media all and (max-width: 576px) { @@ -1041,8 +1072,8 @@ img { } #post-wrapper { - min-height: calc(100vh - #{$topbar-height} - - #{$footer-height} - #{$post-extend-min-height}) !important; + min-height: calc( + 100vh - #{$topbar-height} - #{$footer-height} - #{$post-extend-min-height}) !important; h1 { margin-top: 2.2rem; font-size: 1.55rem; @@ -1069,18 +1100,17 @@ img { padding: 1.5rem 0; margin-bottom: 0.3rem; flex-wrap: wrap; - justify-content: left!important; - -ms-flex-pack: distribute!important; - justify-content: space-around!important; + -ms-flex-pack: distribute !important; + justify-content: space-around !important; } - .footer-left, .footer-right { + .footer-left, + .footer-right { text-align: center; } } } - /* Hide Sidebar and TOC */ @media all and (max-width: 830px) { %slide { @@ -1088,10 +1118,19 @@ img { transition: transform 0.4s ease; } - html, body { + html, + body { overflow-x: hidden; } + .footnotes ol > li { + padding-top: 3.5rem; + margin-top: -3.2rem; + &:first-child { + margin-top: -3.5rem; + } + } + [#{$sidebar-display}] { #sidebar { @@ -1118,12 +1157,9 @@ img { } } - #topbar-wrapper { - @extend %slide; - } - #main-wrapper { @extend %slide; + padding-top: $topbar-height; } @@ -1131,19 +1167,14 @@ img { width: 100%; } - #page h1.dynamic-title { - display: none; - ~.post-content { - margin-top: 3rem; - } - } - #breadcrumb, #search-wrapper { display: none; } #topbar-wrapper { + @extend %slide; + left: 0; } @@ -1186,31 +1217,28 @@ img { } #tags { - -webkit-box-pack: center!important; - -ms-flex-pack: center!important; - justify-content: center!important; + -webkit-box-pack: center !important; + -ms-flex-pack: center !important; + justify-content: center !important; } - .footnotes ol > li { - padding-top: 3.5rem; - margin-top: -3.2rem; - &:first-child { - margin-top: -3.5rem; + #page h1.dynamic-title { + display: none; + ~ .post-content { + margin-top: 3rem; } } + } - @media all and (min-width: 577px) and (max-width: 1199px) { - footer>.d-flex > div { + footer > .d-flex > div { width: 312px; } } - /* Sidebar visible */ @media all and (min-width: 831px) { - /* Solved jumping scrollbar */ html { overflow-y: scroll; @@ -1269,7 +1297,8 @@ img { #sidebar { width: $sidebar-width-small; .sidebar-bottom { - a, span { + a, + span { width: 2rem; } .icon-border { @@ -1292,12 +1321,13 @@ img { .site-title { font-size: 1.3rem; - margin-left: 0!important; + margin-left: 0 !important; } .site-subtitle { - font-size: 90%; @include ml-mr(1rem); + + font-size: 90%; } #main-wrapper { @@ -1325,14 +1355,13 @@ img { } #main > div.row { - -webkit-box-pack: center!important; - -ms-flex-pack: center!important; - justify-content: center!important; + -webkit-box-pack: center !important; + -ms-flex-pack: center !important; + justify-content: center !important; } } - -/*--- desktop mode, both sidebar and panel are visible ---*/ +/* --- desktop mode, both sidebar and panel are visible --- */ @media all and (min-width: 1200px) { @@ -1482,6 +1511,7 @@ img { .site-title { @extend %profile-ml; + a { font-size: 1.7rem; letter-spacing: 1px; @@ -1490,6 +1520,7 @@ img { .site-subtitle { @extend %profile-ml; + word-spacing: 0; margin-top: 0.3rem; } @@ -1537,9 +1568,9 @@ img { width: 100%; &.justify-content-center { - -webkit-box-pack: start!important; - -ms-flex-pack: start!important; - justify-content: flex-start!important; + -webkit-box-pack: start !important; + -ms-flex-pack: start !important; + justify-content: flex-start !important; } a { @@ -1549,6 +1580,7 @@ img { i { @include icon-round(2rem); + padding-top: 0.44rem; margin-top: .7rem; // multi line space bottom: 0; @@ -1584,15 +1616,14 @@ img { } // min-width: 1650px - @media all and (min-width: 1700px) { #topbar-wrapper { - padding-right: calc(100% - #{$sidebar-width-large} - - (1920px - #{$sidebar-width-large}) ) /* 100% - 350px - (1920px - 350px); */ + /* 100% - 350px - (1920px - 350px); */ + padding-right: calc(100% - #{$sidebar-width-large} - (1920px - #{$sidebar-width-large})); } #topbar { - max-width: calc(#{$main-content-max-width} + 20px) + max-width: calc(#{$main-content-max-width} + 20px); } #main > div.row { diff --git a/_sass/addon/module.scss b/_sass/addon/module.scss index 7292a37..d1fe30b 100644 --- a/_sass/addon/module.scss +++ b/_sass/addon/module.scss @@ -100,6 +100,7 @@ @mixin panel-label { @include label(inherit); + display: block; line-height: 1.2; padding-top: 0.5rem; diff --git a/_sass/jekyll-theme-chirpy.scss b/_sass/jekyll-theme-chirpy.scss index e987f1a..2c556ee 100644 --- a/_sass/jekyll-theme-chirpy.scss +++ b/_sass/jekyll-theme-chirpy.scss @@ -6,17 +6,18 @@ * MIT Licensed */ -@import "colors/light-typography"; -@import "colors/dark-typography"; +@import + "colors/light-typography", + "colors/dark-typography", -@import "addon/module"; -@import "addon/variables"; -@import 'addon/syntax'; -@import "addon/commons"; + "addon/module", + "addon/variables", + "addon/syntax", + "addon/commons", -@import "layout/home"; -@import "layout/post"; -@import "layout/tags"; -@import "layout/archives"; -@import "layout/categories"; -@import "layout/category-tag"; + "layout/home", + "layout/post", + "layout/tags", + "layout/archives", + "layout/categories", + "layout/category-tag"; diff --git a/_sass/layout/archives.scss b/_sass/layout/archives.scss index b3004a7..3da4d44 100644 --- a/_sass/layout/archives.scss +++ b/_sass/layout/archives.scss @@ -14,34 +14,12 @@ #archives { letter-spacing: 0.03rem; - li { - font-size: 1.1rem; - line-height: 3rem; - &:nth-child(odd) { - background-color: var(--main-wrapper-bg, #fff); - background-image: linear-gradient( - to left, #fff, #fbfbfb, #fbfbfb, #fbfbfb, #fff); - } - > div { - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - } - } span.lead { font-size: 1.5rem; position: relative; left: 8px; - &:not(:first-child) { - position: relative; - left: 4px; - &::after { - left: 67px; - } - } - &::after { /* Year dot */ content: ""; display: block; @@ -59,8 +37,64 @@ box-shadow: 0 0 2px 0 #c2c6cc; z-index: 1; } + + &:not(:first-child) { + position: relative; + left: 4px; + &::after { + left: 67px; + } + } + } // #archives span.lead + ul { + li { + font-size: 1.1rem; + line-height: 3rem; + + div { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + + a { + /* post title in Archvies */ + margin-left: 2.5rem; + position: relative; + top: 0.1rem; + } + } + + &:nth-child(odd) { + background-color: var(--main-wrapper-bg, #fff); + background-image: linear-gradient(to left, #fff, #fbfbfb, #fbfbfb, #fbfbfb, #fff); + } + + &::after { + @extend %date-timeline; + + height: 2.8rem; + top: -1.3rem; + } + + &:first-child::before { + @extend %date-timeline; + + height: 3.06rem; + top: -1.61rem; + } + } + + &:not(:last-child) > li:last-child::after { + height: 3.4rem; + } + + &:last-child > li:last-child::after { + display: none; + } + } // #archives ul + .date { white-space: nowrap; display: inline-block; @@ -97,36 +131,8 @@ } } // #archives .date - ul { - > li { - > div > a { - /* post title in Archvies */ - margin-left: 2.5rem; - position: relative; - top: 0.1rem; - } - &::after { - @extend %date-timeline; - height: 2.8rem; - top: -1.3rem; - } - &:first-child::before { - @extend %date-timeline; - height: 3.06rem; - top: -1.61rem; - } - } - &:not(:last-child) > li:last-child::after { - height: 3.4rem; - } - &:last-child > li:last-child::after { - display: none; - } - } // #archives ul - } // #archives - @media all and (max-width: 576px) { #archives { margin-top: -1rem; diff --git a/_sass/layout/categories.scss b/_sass/layout/categories.scss index 4e123e9..8b32c67 100644 --- a/_sass/layout/categories.scss +++ b/_sass/layout/categories.scss @@ -11,6 +11,14 @@ .card-header { padding-right: 12px; } + + i { + &.far, + &.fas { + font-size: 86%; // fontawesome icons + } + } + .list-group-item { border-left: none; border-right: none; @@ -29,12 +37,6 @@ @extend %category-icon-color; } - i { - &.far, &.fas { - font-size: 86%; // fontawesome icons - } - } - } // .categories .category-trigger { @@ -42,7 +44,7 @@ height: 1.7rem; border-radius: 50%; text-align: center; - color: #6c757d!important; + color: #6c757d !important; > i.fas { position: relative; height: 0.7rem; diff --git a/_sass/layout/category-tag.scss b/_sass/layout/category-tag.scss index 88064d6..3549c91 100644 --- a/_sass/layout/category-tag.scss +++ b/_sass/layout/category-tag.scss @@ -2,10 +2,17 @@ Style for page Category and Tag */ -#page-category, #page-tag { +.dash { + margin: 0 .5rem .6rem .5rem; + border-bottom: 2px dotted var(--dash-color); +} + +#page-category, +#page-tag { ul > li { line-height: 1.5rem; padding: 0.6rem 0; + &::before { // dot background: #999; width: 5px; @@ -17,14 +24,16 @@ top: 0.6rem; margin-right: 0.5rem; } + > a { /* post's title */ - font-size: 1.1rem; @extend %no-bottom-border; + + font-size: 1.1rem; } + > span:last-child { white-space: nowrap; - } - /* post's date */ + } /* post's date */ } } @@ -36,22 +45,19 @@ font-size: 1.25rem; } -a:hover { - #page-category &, - #page-tag &, - #access-lastmod & { +#page-category, +#page-tag, +#access-lastmod { + a:hover { @extend %link-hover; + margin-bottom: -1px; // Avoid jumping } } -.dash { - margin: 0 .5rem .6rem .5rem; - border-bottom: 2px dotted var(--dash-color); -} - @media all and (max-width: 576px) { - #page-category, #page-tag { + #page-category, + #page-tag { ul > li { &::before { margin: 0 .5rem; diff --git a/_sass/layout/home.scss b/_sass/layout/home.scss index 520f392..a663d0d 100644 --- a/_sass/layout/home.scss +++ b/_sass/layout/home.scss @@ -2,6 +2,60 @@ Style for Homepage */ +.pagination { + font-size: 1rem; + a:hover { + text-decoration: none; + } + + .page-item { + .page-link { + color: var(--btn-patinator-text-color); + width: 2.5rem; + height: 2.5rem; + padding: 0; + text-align: center; + display: -webkit-box; + display: flex; + -webkit-box-pack: center; + justify-content: center; + -webkit-box-align: center; + align-items: center; + border-radius: 50%; + border: 1px solid var(--btn-paginator-border-color); + font-family: 'Lato', sans-serif; + background-color: var(--button-bg); + &:hover { + background-color: var(--btn-paginator-hover-color); + } + } + &.active { + .page-link { + background-color: var(--btn-active-bg); + border-color: var(--btn-active-border-color); + box-shadow: 0 0 8px 0 var(--btn-paginator-shadow) !important; + color: var(--btn-text-color); + } + } + &.disabled { + cursor: not-allowed; + .page-link { + color: rgba(108, 117, 125, 0.57); + border-color: var(--btn-paginator-border-color); + background-color: var(--button-bg); + } + } + &:first-child .page-link, + &:last-child .page-link { + border-radius: 50%; + } + &:not(:last-child) { + margin-right: 0.7rem; + } + } // .page-item + +} // .pagination + #post-list { margin-top: 1rem; padding-right: 0.5rem; @@ -11,6 +65,10 @@ padding-bottom: 1rem; border-bottom: 1px solid var(--main-border-color); + a:hover { + @extend %link-hover; + } + h1 { font-size: 1.4rem; margin: 0; @@ -55,60 +113,6 @@ } // #post-list -.pagination { - font-size: 1rem; - a:hover { - text-decoration: none; - } - - .page-item { - .page-link { - color: var(--btn-patinator-text-color); - width: 2.5rem; - height: 2.5rem; - padding: 0; - text-align: center; - display: -webkit-box; - display: flex; - -webkit-box-pack: center; - justify-content: center; - -webkit-box-align: center; - align-items: center; - border-radius: 50%; - border: 1px solid var(--btn-paginator-border-color); - font-family: 'Lato', sans-serif; - background-color: var(--button-bg); - &:hover { - background-color: var(--btn-paginator-hover-color) - } - } - &.active { - .page-link { - background-color: var(--btn-active-bg); - border-color: var(--btn-active-border-color); - box-shadow: 0 0 8px 0 var(--btn-paginator-shadow) !important; - color: var(--btn-text-color); - } - } - &.disabled { - cursor: not-allowed; - .page-link { - color: rgba(108, 117, 125, 0.57); - border-color: var(--btn-paginator-border-color); - background-color: var(--button-bg); - } - } - &:first-child .page-link, - &:last-child .page-link { - border-radius: 50%; - } - &:not(:last-child) { - margin-right: 0.7rem; - } - } // .page-item - -} // .pagination - /* Hide SideBar and TOC */ @media all and (max-width: 830px) { .pagination { diff --git a/_sass/layout/post.scss b/_sass/layout/post.scss index 38266a9..abaf4c9 100644 --- a/_sass/layout/post.scss +++ b/_sass/layout/post.scss @@ -4,7 +4,7 @@ @mixin btn-sharing-color($light-color, $important: false) { @if $important { - color: var(--btn-share-color, $light-color)!important; + color: var(--btn-share-color, $light-color) !important; } @else { color: var(--btn-share-color, $light-color); } @@ -41,9 +41,10 @@ .post-content { .preview-img { + @include align-center; + margin-top: 0; margin-bottom: 2.5rem; - @include align-center; } } @@ -63,6 +64,7 @@ .btn { @include btn-post-nav; + color: var(--link-color); &:hover { background: #2a408e; @@ -71,6 +73,7 @@ } &.disabled { @include btn-post-nav; + pointer-events: auto; cursor: not-allowed; background: none; @@ -139,17 +142,16 @@ } } -#toc li>a { +#toc li > a { line-height: 1rem; padding-top: 0.5rem; padding-bottom: 0.5rem; } - -/*--- Related Posts ---*/ +/* --- Related Posts --- */ #related-posts { - >h3 { + > h3 { @include label(1.1rem, 600); } .card { @@ -165,7 +167,7 @@ &:hover { -webkit-transform: translate3d(0, -3px, 0); transform: translate3d(0, -3px, 0); - box-shadow: 0 10px 15px -4px rgba(0,0,0,0.15); + box-shadow: 0 10px 15px -4px rgba(0, 0, 0, 0.15); } } @@ -190,7 +192,7 @@ ul { list-style-type: none; padding-inline-start: 1.5rem; - >li::before { + > li::before { background: #c2c9d4; width: 5px; height: 5px; @@ -216,12 +218,17 @@ } %btn-share-hovor { - color: var(--btn-share-hover-color)!important; + color: var(--btn-share-hover-color) !important; } .share-wrapper { vertical-align: middle; user-select: none; + + i { + font-weight: 400; + } + .share-icons { font-size: 1.2rem; a { @@ -230,12 +237,12 @@ } &:hover { text-decoration: none; - >i { + > i { @extend %btn-share-hovor; } } } - >i { + > i { padding-top: 0.35rem; &:hover { @extend %btn-share-hovor; @@ -243,7 +250,7 @@ } .fab { &.fa-twitter { - @include btn-sharing-color(rgba(29, 161, 242, 1.00)); + @include btn-sharing-color(rgba(29, 161, 242, 1)); } &.fa-facebook-square { @include btn-sharing-color(rgb(66, 95, 156)); @@ -264,9 +271,9 @@ } // .share-wrapper - .share-label { @include label(inherit, 400, inherit); + &::after { content: ":"; } @@ -274,25 +281,22 @@ .license-wrapper { line-height: 1.2rem; - >a { + > a { font-weight: 600; &:hover { @extend %link-hover; } } - i { - font-weight: 400; - } + span:last-child { font-size: 0.85rem; } } // .license-wrapper - @media all and (max-width: 576px) { .post-tail-bottom { - -ms-flex-wrap: wrap-reverse!important; - flex-wrap: wrap-reverse!important; + -ms-flex-wrap: wrap-reverse !important; + flex-wrap: wrap-reverse !important; >div:first-child { width: 100%; margin-top: 1rem; @@ -301,8 +305,8 @@ .post-content > div[class^='language-'] { @include ml-mr(-1.25rem); - border-radius: 0; + border-radius: 0; &::before { // the lang badge right: 1rem; } @@ -323,10 +327,10 @@ @include dot(0.5rem, 0.2rem); } &.flex-column { - -webkit-box-orient: horizontal!important; - -webkit-box-direction: normal!important; - -ms-flex-direction: row!important; - flex-direction: row!important; + -webkit-box-orient: horizontal !important; + -webkit-box-direction: normal !important; + -ms-flex-direction: row !important; + flex-direction: row !important; } } } // .post diff --git a/docs/README.zh-CN.md b/docs/README.zh-CN.md index 9a45e24..3e1fae2 100644 --- a/docs/README.zh-CN.md +++ b/docs/README.zh-CN.md @@ -53,8 +53,8 @@ Language: [English](https://github.com/cotes2020/jekyll-theme-chirpy#readme) | 有二法可得此主题: - - 从 [RubyGems](https://rubygems.org/gems/jekyll-theme-chirpy) 安装 - - 从 GitHub 上 Fork +- 从 [RubyGems](https://rubygems.org/gems/jekyll-theme-chirpy) 安装 +- 从 GitHub 上 Fork ### Rubygems 安装 @@ -86,9 +86,6 @@ $ bundle info --path jekyll-theme-chirpy 或者你可以 [使用 starter template][use-starter] 来快速创建 Jekyll 站点，以省去复制主题 gem 文件的时间。 -[starter]: https://github.com/cotes2020/chirpy-starter -[use-starter]: https://github.com/cotes2020/chirpy-starter/generate - ### 在 GitHub 上 Fork [Fork **Chirpy**](https://github.com/cotes2020/jekyll-theme-chirpy/fork) 然后克隆到本地。 @@ -109,15 +106,15 @@ $ bash tools/init.sh 上述脚本完成了以下工作: - 1. 从你的仓库中删除了: +1. 从你的仓库中删除了: - `.travis.yml` - `_posts` 下的文件 - `docs` 目录 - 2. 如果使用了参数 `--no-gh`，则会怒删 `.github`。否则，将会配置 GitHub Actions：把 `.github/workflows/pages-deploy.yml.hook` 的后缀 `.hook` 去除，然后删除 `.github` 里的其他目录和文件。 +2. 如果使用了参数 `--no-gh`，则会怒删 `.github`。否则，将会配置 GitHub Actions：把 `.github/workflows/pages-deploy.yml.hook` 的后缀 `.hook` 去除，然后删除 `.github` 里的其他目录和文件。 - 3. 自动提交一个 Commit 以保存上述文件的更改。 +3. 自动提交一个 Commit 以保存上述文件的更改。 ## 使用 @@ -159,19 +156,20 @@ $ docker run -it --rm \ 由于安全原因，GitHub Pages 的构建强制加了 `safe`参数，这导致了我们不能使用插件去创建所需的附加页面。因此，我们可以使用 GitHub Actions 去构建站点，把站点文件存储在一个新分支上，再指定该分支作为 Pages 服务的源。 -确保你的 Jekyll 站点存在文件 `/.github/workflows/pages-deploy.yml`。没有的话，新建并填入[示例工作流][workflow]的内容, 注意参数 `on.push.branches` 的值必须和你的仓库默认分支名相同。 +快速检查 GitHub Actions 构建需要的文件: -[workflow]:https://github.com/cotes2020/jekyll-theme-chirpy/blob/master/.github/workflows/pages-deploy.yml.hook +1. 确保你的 Jekyll 站点存在文件 `/.github/workflows/pages-deploy.yml`。没有的话，新建并填入[示例工作流][workflow]的内容, 注意参数 `on.push.branches` 的值必须和你的仓库默认分支名相同。 +2. 检查你的 Jekyll 站点是否有文件 `/tools/test.sh` 和 `/tools/deploy.sh`. 没有的话, 从本仓库拷贝到你的 Jekyll 项目. 在 GitHub 把你的仓库命名为 `.github.io`，然后： - 1. 推送任意一个 commit 到 `origin/master` 以触发 GitHub Actions workflow。一旦 build 完毕并且成功，远端将会自动出现一个新分支 `gh-pages` 用来存储构建的站点文件。 +1. 推送任意一个 commit 到 `origin/master` 以触发 GitHub Actions workflow。一旦 build 完毕并且成功，远端将会自动出现一个新分支 `gh-pages` 用来存储构建的站点文件。 - 2. 回到 GitHub 上的仓库， 通过 _Settings_ → _Options_ → _GitHub Pages_ 选择分支 `gh-pages` 作为[_发布源_](https://docs.github.com/en/github/working-with-github-pages/configuring-a-publishing-source-for-your-github-pages-site): +2. 回到 GitHub 上的仓库， 通过 _Settings_ → _Options_ → _GitHub Pages_ 选择分支 `gh-pages` 作为[_发布源_](https://docs.github.com/en/github/working-with-github-pages/configuring-a-publishing-source-for-your-github-pages-site): - ![gh-pages-sources](https://cdn.jsdelivr.net/gh/cotes2020/chirpy-images/posts/20190809/gh-pages-sources.png) + ![gh-pages-sources](https://cdn.jsdelivr.net/gh/cotes2020/chirpy-images/posts/20190809/gh-pages-sources.png) - 3. 按照 GitHub 指示的地址去访问你的网站。 +3. 按照 GitHub 指示的地址去访问你的网站。 #### 部署到其他 Pages 平台 @@ -209,11 +207,9 @@ $ docker run -it --rm \ :tada: 感谢所有参与代码贡献的小伙伴, 他们的 GayHub ID 在这个[列表](https://github.com/cotes2020/jekyll-theme-chirpy/graphs/contributors)。 另外, 提交过 issues(或者未被合并 PR) 的高富帅和白富美也不会被遗忘,他/她们帮助报告 bug、分享新点子或者启发了我写出更通俗易懂的文档。 -还有，感谢 [JetBrains][JB] 提供开源 License！ +还有，感谢 [JetBrains][jb] 提供开源 License！ -[![JB-logo](https://cdn.jsdelivr.net/gh/cotes2020/chirpy-images/commons/jetbrains.svg)][JB] - -[JB]:https://www.jetbrains.com/?from=jekyll-theme-chirpy +[![JB-logo](https://cdn.jsdelivr.net/gh/cotes2020/chirpy-images/commons/jetbrains.svg)][jb] ## 赞助 @@ -222,3 +218,8 @@ $ docker run -it --rm \ ## 许可证书 本项目开源，基于 [MIT](https://github.com/cotes2020/jekyll-theme-chirpy/blob/master/LICENSE) 许可。 + +[starter]: https://github.com/cotes2020/chirpy-starter +[use-starter]: https://github.com/cotes2020/chirpy-starter/generate +[workflow]:https://github.com/cotes2020/jekyll-theme-chirpy/blob/master/.github/workflows/pages-deploy.yml.hook +[jb]:https://www.jetbrains.com/?from=jekyll-theme-chirpy diff --git a/gulpfile.js/tasks/js.js b/gulpfile.js/tasks/js.js index d617653..d159996 100644 --- a/gulpfile.js/tasks/js.js +++ b/gulpfile.js/tasks/js.js @@ -12,7 +12,6 @@ const fs = require('fs'); const JS_ROOT = './assets/js'; const jsDest = `${ JS_ROOT }/dist/`; -const copyrightPath = `${ JS_ROOT }/.copyright`; function concatJs(files, output) { return src(files) @@ -23,7 +22,7 @@ function concatJs(files, output) { function minifyJs() { return src(`${ jsDest }/*.js`) - .pipe(insert.prepend(fs.readFileSync(copyrightPath, 'utf8'))) + .pipe(insert.prepend(fs.readFileSync(`${ JS_ROOT }/.copyright`, 'utf8'))) .pipe(uglify({output: {comments: /^!|@preserve|@license|@cc_on/i}})) .pipe(dest(jsDest)); } diff --git a/tools/bump.sh b/tools/bump.sh index 4285cfe..e9d1bc2 100755 --- a/tools/bump.sh +++ b/tools/bump.sh @@ -21,15 +21,15 @@ NODE_META="package.json" bump_assets() { _version="$1" - for i in ${!ASSETS[@]}; do - sed -i "s/v[[:digit:]]\.[[:digit:]]\.[[:digit:]]/v$_version/" ${ASSETS[$i]} + for i in "${!ASSETS[@]}"; do + sed -i "s/v[[:digit:]]\.[[:digit:]]\.[[:digit:]]/v$_version/" "${ASSETS[$i]}" done gulp } bump_gemspec() { - sed -i "s/[[:digit:]]\.[[:digit:]]\.[[:digit:]]/$1/" $GEM_SPEC + sed -i "s/[[:digit:]]\.[[:digit:]]\.[[:digit:]]/$1/" "$GEM_SPEC" } bump_node() { @@ -39,9 +39,9 @@ bump_node() { } bump() { - bump_assets $1 - bump_gemspec $1 - bump_node $1 + bump_assets "$1" + bump_gemspec "$1" + bump_node "$1" if [[ -n $(git status . -s) ]]; then git add .