From 3a8af9e3c6fd89fb70541350e06af691c28908cf Mon Sep 17 00:00:00 2001 From: Deep0Thinking Date: Mon, 22 Jan 2024 23:45:54 -0800 Subject: [PATCH] Fix sticky header transition and hide site header on scroll --- .github/workflows/jekyll.yml | 75 ++++------- _site/2022/11/28/How-to-post-posts.html | 163 ++++++++++++++++-------- _site/2024/01/20/My-first-post.html | 95 ++++++++++++++ _site/README.md | 62 +++++---- _site/about.html | 42 +++--- _site/all-tags.html | 30 ++--- _site/archive.html | 68 +++++----- _site/assets/css/style.css | 9 +- _site/assets/css/style.css.map | 2 +- _site/assets/js/custom-styles.js | 52 ++++++-- _site/index.html | 59 +++++---- _site/tag/WoW.html | 91 +++++++++---- _site/tag/go.html | 91 +++++++++---- _site/tag/let's.html | 66 ++++++---- _site/tag/this-is-a-tag.html | 66 ++++++---- _site/tagpage.html | 31 ++--- 16 files changed, 624 insertions(+), 378 deletions(-) create mode 100644 _site/2024/01/20/My-first-post.html diff --git a/.github/workflows/jekyll.yml b/.github/workflows/jekyll.yml index 9164159..0a70fd0 100644 --- a/.github/workflows/jekyll.yml +++ b/.github/workflows/jekyll.yml @@ -1,82 +1,57 @@ -# This workflow uses actions that are not certified by GitHub. -# They are provided by a third-party and are governed by -# separate terms of service, privacy policy, and support -# documentation. - -# Sample workflow for building and deploying a Jekyll site to GitHub Pages - name: Deploy Jekyll site to "_site" branch on GitHub Pages on: - # Runs on pushes targeting the default branch push: branches: ["main"] - paths: - - "_site/**" # Runs only when there are changes in the 'site' directory + paths-ignore: + - "_site/**" pull_request: branches: ["main"] - paths: + paths-ignore: - "_site/**" - - # Allows you to run this workflow manually from the Actions tab workflow_dispatch: -# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages permissions: contents: write pages: write id-token: write -# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued. -# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete. concurrency: group: "pages" cancel-in-progress: false jobs: - # Build job build: runs-on: ubuntu-latest steps: - - name: Checkout - uses: actions/checkout@v4 - with: - ref: "main" - - name: Setup Ruby - uses: ruby/setup-ruby@8575951200e472d5f2d95c625da0c7bec8217c42 # v1.161.0 + - uses: actions/checkout@v4 + + - name: Set up Ruby + uses: ruby/setup-ruby@v1 with: - ruby-version: "3.1" # Not needed with a .ruby-version file - bundler-cache: true # runs 'bundle install' and caches installed gems automatically - cache-version: 0 # Increment this number if you need to re-download cached gems - - name: Build with Jekyll - # Outputs to the './_site' directory by default - run: bundle exec jekyll build --baseurl "${{ steps.pages.outputs.base_path }}" - env: - JEKYLL_ENV: production + ruby-version: '3.0' # Ensure you use Ruby 3.0 or above + bundler-cache: true # Automatically install gems and cache them + + - name: Print Ruby and Bundler version + run: | + ruby -v + bundler -v + + - name: Build Jekyll site + run: bundle exec jekyll build - # Deployment job deploy: - environment: - name: github-pages - url: ${{ steps.deployment.outputs.page_url }} - runs-on: ubuntu-latest needs: build + runs-on: ubuntu-latest steps: - - name: Checkout main branch - uses: actions/checkout@v4 + - uses: actions/checkout@v4 + + - name: Set up Ruby + uses: ruby/setup-ruby@v1 with: - ref: "main" - - name: Copy _site contents - run: | - cp -r _site/ Gemfile _config.yml /tmp/ - git checkout -b _site - rm -rf * - cp -r /tmp/_site/* /tmp/Gemfile /tmp/_config.yml ./ - git add --all - git config user.name github-actions - git config user.email github-actions@github.com - git commit -m "update _site content" - git push --force origin _site + ruby-version: '3.0' + bundler-cache: true + - name: Deploy to GitHub Pages uses: jeffreytse/jekyll-deploy-action@v0.5.1 with: diff --git a/_site/2022/11/28/How-to-post-posts.html b/_site/2022/11/28/How-to-post-posts.html index 6ff8fd2..c0784e4 100644 --- a/_site/2022/11/28/How-to-post-posts.html +++ b/_site/2022/11/28/How-to-post-posts.html @@ -1,5 +1,5 @@ - + @@ -27,19 +27,7 @@ - - -
+
-
- -
+
+ +

How to post posts

@@ -92,7 +125,7 @@

How to post posts

-

First, let’s talk about the basic requirements for a valid post file:

+

Welcome to the 2nd-Minima Jekyll theme! This guide will walk you through creating and managing your posts effectively. Whether you’re a beginner or an experienced Jekyll user, these instructions will help you make the most out of this theme.

  • @@ -100,13 +133,13 @@

    How to post posts

    • -

      Naming: You need to name your post file with the naming format of “Year-Month-Date-Title.md”, for example: “2022-11-28-My-first-post.md”. (Attention: The file naming does not allow any “space” character, so please make sure to use “-“ to replace them.)

      +

      Naming: Posts should be named following the “Year-Month-Date-Title.md” format, for example: “2022-11-28-My-first-post.md”. (Attention: Spaces ( ) are not permitted in file names. Use hyphens (-) to separate words)

    • -

      Location: You need to place your post file under the “/_posts/” folder.

      +

      Location: Place your post files in the “/_posts/” directory

    • -

      tag-page: (You could temporarily skip this part until you have gotten up to the tags part under Internal requirements below) Please remember, if you add tags to a post, let’s assume one of the tags name is “the-tag-you-add”, then you should create a “the-tag-you-add.md” file under the “/tag/” folder in order to generate a tag-page for the “the-tag-you-add” and with just these contents in that “the-tag-you-add.md”:

      +

      tag-page: (This section can be deferred until you’ve read about tags in the Internal Requirements.) Please remember, if you add tags to a post, let’s assume one of the tags name is “the-tag-you-add”, then you should create a “the-tag-you-add.md” file under the “/tag/” folder in order to generate a tag-page for the “the-tag-you-add” tag and the “the-tag-you-add.md” file should contain the following:

      ---
 layout: tagpage
@@ -115,7 +148,9 @@ 
      How to post posts
      
 ---
      -

      And that tag-page would collect and display all your posts with that tag. In fact, there is a more efficient way to repeat this repetitive procedure, which is to create a python script to help you do that, for more detailed information please click on the solutions link below.

      +

      (Attention: Ensure the title is enclosed in double quotes (") if it contains a colon (:) for successful tag page creation.)

      + +

      The tag page will aggregate and display all posts with the specified tag. Considering a more efficient implementation, which is to create a python script to automate this process, more details can be found in the solutions link right below.

      The tags and tag-page display solutions are here provided by Long Qian, great thanks to him!

      • @@ -128,13 +163,15 @@

      How to post posts

    • Predeclaration:

      -

      Every “post.md” file you posted need to have a Predeclaration in the form of this at the file’s head (beginning) part (including this file: You can see the Predeclaration part at the beginning):

      +

      Each “post.md” file you posted must have a Predeclaration block in the form of this at the file’s head (beginning) part (including this file: You can see the Predeclaration part at the beginning):

      ---
 layout: post
 title: How to post posts
 tags: this-is-a-tag WoW let's go
+toc: true
 description: You could write a brief description here to catch your readers' interests, like this is a post about how to post posts :)
+thumbnail: https://deep0thinking.com/wp-content/uploads/2024/01/my-first-post.jpg
 ---
      @@ -142,22 +179,38 @@

      How to post posts

      • -

        layout: post

        +

        layout: Apply the “???” layout from “_layouts/???.html” to the post.

        -

        Please just write 1 word “post”. This means your post that you want to post would use the post layout of “_layouts/page.html” file.

        +

        Please just write 1 word “post” here for every post file. This means to apply the post layout from “_layouts/post.html” on your post.

      • -

        title: Please write your post title here.

        +

        title: The title of your post.

        In fact, the file name in the Naming part of the External requirements can be different from the title name here, but it is always a good habit to keep them the same to disambiguate and improve convenience (just like writing the annotation when coding), especially when you want to read or modify these posts files in the future. But if you find a more efficient and effective naming method, you could definitely follow your way.

      • -

        tags: Please write your post tag(s) here.

        +

        tags: List the tags associated with your post, separated by spaces ( ). Use hyphens (-) to avoid breaking multi-word tags.

        -

        If you want to put 2 or more tags here, you need to use “space” to separate them, and what can you do if you don’t want the tag to be separated, you could use “-“ to replace the “space” to combine the words and prevent the breakage in 1 tag. For example: this-is-a-tag is 1 tag, WoW is 1 tag, let's go is 2 tags, they actually break into 2 tags of let's and go due to the “space” between them.

        +

        If you want to put 2 or more tags here, you need to use “space” ( ) to separate them, and what can you do if you don’t want the tag to be separated, you could use - to replace the “space” to combine the words and prevent the breakage in 1 tag. For example: this-is-a-tag is 1 tag, WoW is 1 tag, but let's go is 2 tags, since it actually breaks into the 2 tags let's and go due to the “space” between them.

      • -

        description: You could write a brief description in the description part to catch your readers’ interests (Attention: Please don’t leave “space” between “:” and following the word or punctuation in the description part, or your post and description will not be able to display.) , like this is a post about how to post posts (Me: It sounds super attractive right? Me again: Hahahahaha, no.) . Or, if you don’t like the description part, you could always turn it off in the “/_config.yml” file by replacing the true in show_description: true with false or just simply delete that whole line.

        +

        toc: Set to true to include a Table of Contents, false otherwise.

        + +

        The table of contents is a block contains a list of links to the different sections in your post. It is generated automatically based on the headings in your post. If you want to turn it off, just replace the true in toc: true with false or just simply delete that whole line.

        + +

        When true, the toc appears on the left side of your post. It automatically generates clickable links to different sections based on Markdown headings (e.g., # Heading, ## Subheading). Clicking on these links allows readers to quickly navigate to specific sections of your post. (Attention: While HTML headings like <h1>Heading</h1> will be included in the toc, they are not interactive and cannot be clicked to navigate to the respective sections. This feature is exclusively available for Markdown headings.)

        + +

        Conversely, setting toc to false or removing the line entirely disables the toc. This means no interactive list of sections will appear on the left of your post, and there will be no clickable links for navigation within the post.

        +
        • +
      • +

        thumbnail: Put your post thumbnail link (URL or local path) here.

        + +

        The thumbnail link is the link of the image you want to display on the post page, it can be an URL like this: https://deep0thinking.com/wp-content/uploads/2024/01/my-first-post.jpg or a local file path like this: /assets/img/my-first-post.jpg. (Attention: Please make sure to use the correct link format, or the thumbnail would not be able to display.)

        +
        • +
      • +

        description: A short description to engage readers. Avoid spaces after colons in ??? inside description: ??? like description: Hi, : ); description: Hi, :) is permitted.

        + +

        You could write a brief description in the description part to catch your readers’ interests (Attention: Please don’t leave “space” ( ) after : and following the word or punctuation in the description part, or your post and description will not be able to display.) , like this is a post about how to post posts (Me: It sounds super attractive right? Me again: Hahahahaha, no.) . If you don’t want the description part in all posts (the post layout), you could disable it permanently in the “/_config.yml” file by replacing the true in show_description: true with false or just simply delete that whole line.

      • @@ -183,7 +236,7 @@

      How to post posts

    -

    Don’t worry, you don’t need to master these 4 languages to write a post, in fact, using only the Markdown language is basically enough (look at this post file name, its suffix is “.md” and md represents the Markdown language), because Markdown language can support the basic post arrangements and it is super easy and convenient to learn and use. BTW I bet you could master its basic syntax within 5 minutes, then you could be able to write the following Mardown contents too:

    +

    Don’t worry, mastery of these languages is not required to write a post… In fact, using only the Markdown language is sufficient for most posts (look at this post file name, its suffix is “.md” and md represents the Markdown language), because Markdown language can support the basic post arrangements and it is super easy and convenient to learn and use. BTW I bet you could master its basic syntax within 5 minutes, then you could be able to write the following Markdown contents too:

@@ -193,7 +246,11 @@

How to post posts

-



+


+ +

Markdown Syntax

+ +


# Heading 1
 ## Heading 2
@@ -267,9 +324,9 @@ 
Heading 6

 
Here is a table:
 
 |title 1|title 2|title 3|
-|:-|:-:|-:|
-|left|middle|right|
-|text|text|text|
+|:-     |  :-:  |     -:|
+|left   |middle |right  |
+|text   |text   |text   |
 

 
 
Here is a table:

@@ -384,20 +441,24 @@ 
Heading 6

 
 



 
-
<h1> Heading </h1>
-<h2> Heading </h2>
-<h3> Heading </h3>
-<h4> Heading </h4>
-<h5> Heading </h5>
-<h6> Heading </h6>
+
HTML Syntax

+
+



+
+
<h1> Heading 1 </h1>
+<h2> Heading 2 </h2>
+<h3> Heading 3 </h3>
+<h4> Heading 4 </h4>
+<h5> Heading 5 </h5>
+<h6> Heading 6 </h6>
 

 
-
 Heading 

-
 Heading 

-
 Heading 

-
 Heading 

-
 Heading 

-
 Heading 

+
 Heading 1 

+
 Heading 2 

+
 Heading 3 

+
 Heading 4 

+
 Heading 5 

+
 Heading 6 

 
 



 
@@ -601,7 +662,7 @@ 
 Heading 

 
 



 
-
Maybe you have already noticed the fake comments section below, wanna put it somewhere else or delete it? Click it for more information ~

+
Maybe you have already noticed the fake comments section below, wanna activate it? Click it for more information ~

 
   

 
@@ -611,11 +672,11 @@ 
 Heading 

 
 
fake comments section

 
-      

-
+ + - + - + \ No newline at end of file diff --git a/_site/2024/01/20/My-first-post.html b/_site/2024/01/20/My-first-post.html new file mode 100644 index 0000000..e625437 --- /dev/null +++ b/_site/2024/01/20/My-first-post.html @@ -0,0 +1,95 @@ + + + + + + + + + + + + + + + + + + + + + +
+
+
+
+
+
    +
+
+ +
+

My first post

+ + [ + + + WoW + + + go + + ] + +
+
+ +

+ Haha! This is my first post. +

+ +

+
+ +
+ +
+

###

+ +
+ +
+ +
+ +

fake comments section

+ +
+
+ + + + + + \ No newline at end of file diff --git a/_site/README.md b/_site/README.md index b5fa983..79b4cd5 100644 --- a/_site/README.md +++ b/_site/README.md @@ -16,7 +16,7 @@ - [1.1 Use this template](#1.1) - - [1.2 Webpage deployment](#1.2) + - [1.2 Webpage pre-set-up and deployment](#1.2) - [2 Usage](#2) @@ -40,21 +40,19 @@

0.1 About the 2nd-Minima repository

-This Github repository is designed for the people who want to build a personal website handily (based on [Jekyll-theme-Minima](https://github.com/jekyll/minima)) but are not familiar with front-end programming languages. +The **2nd-Minima** Github repository is designed for individuals seeking to handily create a blog. It's a user-friendly, advanced **template** based on the popular [Jekyll-theme-Minima](https://github.com/jekyll/minima), perfect for those unfamiliar with front-end programming. -To be more specific, it is an advanced modified-version **template** of personal websites based on [Jekyll-theme-Minima](https://github.com/jekyll/minima). +Experience a live demo of a [2nd-Minima](https://github.com/Deep0Thinking/2nd-Minima) based website here: [Deep0Thinking.github.io](https://deep0thinking.github.io) -And here is a [**2nd-Minima**](https://github.com/Deep0Thinking/2nd-Minima) based website sample: [Deep0Thinking.github.io](https://deep0thinking.github.io) - -![Deep0Thinking.github.io](https://repository-images.githubusercontent.com/589368822/c878cee3-1b76-4852-a06a-f8a773679ff5) +![Deep0Thinking.github.io](https://repository-images.githubusercontent.com/481486169/e28e51cb-d7c1-49c7-b8e5-c81a3e27fb46)

0.2 About the "/README.md"

-This "[**/README.md**](https://github.com/Deep0Thinking/2nd-Minima/blob/master/README.md)" file is considered to be a manual or handbook for the [**2nd-Minima**](https://github.com/Deep0Thinking/2nd-Minima) repository. I would try to explain everything as I can to help you to understand it and modify it according to your preference. +This "[**/README.md**](https://github.com/Deep0Thinking/2nd-Minima/blob/master/README.md)" file serves as a comprehensive manual for the [**2nd-Minima**](https://github.com/Deep0Thinking/2nd-Minima) repository. It aims to provide clear explanations and guidance for customization and use. If you're new to this repository, I recommend reading this "**/README.md**" file in its entirety. It will help you get started quickly and easily.

0.3 About the usage

-Briefly, you could do almost any modification based on this template as you want according to the [MIT License](https://github.com/Deep0Thinking/2nd-Minima/blob/main/LICENSE) in both [**2nd-Minima**](https://github.com/Deep0Thinking/2nd-Minima) and [Jekyll-theme-Minima](https://github.com/jekyll/minima). +With the [MIT License](https://github.com/Deep0Thinking/2nd-Minima/blob/main/LICENSE), you have extensive freedom to modify and adapt the [**2nd-Minima**](https://github.com/Deep0Thinking/2nd-Minima) template to suit your personal needs. You may also use it for commercial purposes.

0.4 About the acknowledgement

@@ -64,9 +62,9 @@ And specifically, great thanks to [Long Qian](http://longqian.me/aboutme/), [Mat Thanks should also go to Github, because this platform provide many people (including me) a chance to learn, cooperate and improve in coding. -Finally, special thanks to my family and friends, without their support in every aspect, I would never accomplish this. +Lastly, heartfelt appreciation to my family and friends for their unwavering support. -Oh, and a big thank to you too, I really appreciate that you trust me and use it :) +Oh, and a big thank you to you, the user, for trusting and using this template :) --- @@ -74,17 +72,19 @@ Oh, and a big thank to you too, I really appreciate that you trust me and use it

1.1 Use this template

-Please enter the [**2nd-Minima**](https://github.com/Deep0Thinking/2nd-Minima) repository page first and click on `Use this template` (the green button) -> `Create a new repository` , then please enter the "Repository name", if this is your first time creating a repository, I recommend you to type in the form of "Your-Github-name.github.io" like "Louis.github.io", for more detailed explanation please check here: https://pages.github.com . But if you want to use other repository names like "Cookie-0111", it's totally acceptable and will not cause any difference or problem on the future use. +Please direct to the [**2nd-Minima**](https://github.com/Deep0Thinking/2nd-Minima) repository (repo) page first and click on `Use this template` (the green button) -> `Create a new repository` , then please enter the "Repository name", if you're a first-timer, I suggest using the format "your-Github-username.github.io", like "louis.github.io". This naming convention is important for GitHub Pages, and you can learn more about it at https://pages.github.com. However, feel free to choose a different name, such as "Cookie-0111", if you prefer. This won't impact the future functionality of your site. + +As for the other repo settings, you can stick with the default options or adjust them according to your preferences. Keep in mind, even if you initially set your repository to private, others can still access your personal website once it's deployed and they have the link. (Note: even if you initially set your repository to `private`, others can still access your personal website once it's deployed and they have the link) -And for other setting selections you could just leave them as default, or you could make your own choices based on your preference. (BTW, others could still access to your personal website as long as you've deployed this repository's webpage and they also got its link address, even though you choose `private` when creating the repository at first) +

1.2 Webpage pre-set-up and deployment

-

1.2 Webpage deployment

+Please direct to the page of the repo which you've just created using the [**2nd-Minima**](https://github.com/Deep0Thinking/2nd-Minima) template, click on `< > Code` (the green button right under the "Fork" button) -> `HTTPS` -> "Copy url to clipboard", and then open your terminal (or command line) and type in `git clone ` and paste the url you've just copied from the repo page, then press `Enter` to clone the repo to your local computer. (Note: you need to have "git" installed on your computer first, if you don't have git installed, please check here: https://git-scm.com/downloads) -Please enter the page of the repository which you've just created using the [**2nd-Minima**](https://github.com/Deep0Thinking/2nd-Minima) template, then please click on `Settings` (above the green button) -> `Pages` (on the left column list) -> `None` -> `master` -> `Save`. And after about 1 minute, your personal website will be generated successfully, BTW you can always check its deployment state through access your repository Github main page to see whether that little yellow point (next to the green button `< > Code`) has turned into the ✅ (and please keep refreshing the page) . +Once the cloning process is complete, please direct to the folder of the repo you've just cloned, and open the "**/.github/workflows/jekyll.yml**" file, then please replace the `/2nd-Minima` in `jekyll_baseurl: '/2nd-Minima'` with your repo name: If your repo is named "Cookie-0111", then set it to `jekyll_baseurl: '/Cookie-0111'`; If your repo name is in the form of "your-Github-username.github.io" like "louis.github.io", set it to `jekyll_baseurl: ''`. Don't forget to save the changes. (Note: the repo name is case-sensitive, so please type in the repo name exactly as it is) -And you can visit your site at `Settings` -> `Pages` -> `Visit site` , and don't forget to remember your website address :) +Return to the page of the repo you created, then navigate to `Settings` (located just beneath the search bar) -> `Pages` (on the left column list) -> `Deploy from a branch` -> `Github Actions`. And after about 2 minute, your personal website will be generated successfully. To monitor its deployment state, revisit your repository's main page, keep an eye on the small yellow dot (next to the green button `< > Code`). Upon successful deployment, this dot will change to a green check mark ✅ (Remember to refresh the page to update the status indicator). (Note: if you see a red cross ❌ instead of the check mark ✅, please check the "**/.github/workflows/jekyll.yml**" file and make sure you've replaced the `/2nd-Minima` in `jekyll_baseurl: '/2nd-Minima'` as previously instructed) -In fact, you could save the address on your browser, or put that address into your repository's `About` block which is next to the green button `< > Code` on your repository Github main page by clicking the option button (the gear icon) in that `About` block, or create a clickable link combines with the heading in your "**/README.md**" file under the repository, like `# [please-paste-your-webpage-link-here](https://please-paste-your-webpage-link-here)` , and next time you can conveniently click on that heading on your repository Github main page to access your webpage since Github has set the "**README.md**" file of every repository to display automatically on their corresponding repository's Github main page. +To visit your site, navigate to `Settings` -> `Pages` -> `Visit site` , it's a good idea to bookmark your site's url for easy access. Alternatively, you can add your site's url into your repo's `About` section, which is located next to the green button `< > Code` on your repo Github main page. Click on the option button (the gear icon) in that `About` block to add your link. You can also create a direct link combines with the heading style in your "**/README.md**" file under the repo root folder, like `# [please-paste-your-webpage-link-here](https://please-paste-your-webpage-link-here)`. This creates a clickable heading on your repository's main page, as GitHub automatically displays the "README.md" file there for every repo. --- @@ -92,42 +92,40 @@ In fact, you could save the address on your browser, or put that address into yo

2.1 "/_config.yml"

-First, please open the "**/_config.yml**" and replace the `Please-type-your-Github-name-here` with your Github name in the title part. +Start by opening the "**/_config.yml**" file. In the title section, replace `Please-type-your-Github-name-here` with your actual Github username. -Next, for line with `the show_description` , I recommend you to leave its value with `true` , and don't worry, we will help you to figure that out later. +Moving on to the line labeled `show_description`, I recommend setting its value to `true`. Don't worry about the details for now; we'll guide you through this part later. -And for the `header_pages` , this part controls the display order of the pages on the navigation bar of `archive` , `about` and `all-tags` pages, you can change their sequence to affect their real display sequence on the webpage: the order of top to bottom in the `header_pages` corresponds to order of left to right on the webpage navigation bar. +Lastly, let's focus on `header_pages`. This section determines the order of pages like `archive`, `about`, and `all-tags` on your website's navigation bar. To rearrange their display order on the webpage, simply change their sequence in `header_pages`. The order from top to bottom in this section directly corresponds to the left-to-right order on your website's navigation bar.

2.2 Posts

-Want to write a post including texts, a picture, a youtube video, links to other website, Maths equations (latex), a downloadable document link, others comments, interactive animations, and etc? +Are you ready to craft a captivating post featuring a mix of elements like text, images, YouTube videos, external links, LaTeX-formatted math equations, downloadable documents, interactive animations, and more? -Now please go to check the [How-to-post-posts](https://deep0thinking.github.io/2nd-Minima/2022/11/28/How-to-post-posts.html) post :), it is under the "**/_posts/**" folder. +If so, your next step is simple. Dive into our comprehensive guide post titled [How-to-post-posts](https://deep0thinking.github.io/2nd-Minima/2022/11/28/How-to-post-posts.html). You'll find this valuable resource in the "**/_posts/**" folder. This guide is your key to effortlessly integrating these diverse content types into your posts. Let's get started!

2.3 giscus.app

-I think you've noticed the **fake comments section** on the bottom part of the post of "**How to post posts**", this is actually the area that you would need to establish your **real comments section**. - -In fact, the real comments section is supported by [giscus.app](https://giscus.app). Please check that out, the [giscus.app](https://giscus.app) page have already written detailed information and instructions to enable the comments section (giscus). +You might have noticed the **fake comments section** at the bottom of the "**How to post posts**" post and "**Archive**" page and "**About**" page. This is where you'll set up your **real comments section**. -When you finish reading the [giscus.app](https://giscus.app) instructions and have copied the embed code for the comments section (giscus), you can now paste it and replace the **fake comments section** code (which is located at bottom of the file: `

fake comments section

` ) in your "**/_layouts/post.html**" file. And you also need to apply the same process to the your "**/about.md**" and "**/archive.md**" file, yeah I also put the **fake comments section** there respectively. +The actual comments functionality is powered by [giscus.app](https://giscus.app), a robust platform for enabling comments on your site. To get started, visit [giscus.app](https://giscus.app) and follow the detailed instructions provided there to enable the giscus comment section. -Maybe you would wonder why can't I just put the giscus embed code in the "**/_layouts/page.html**" (since the [**about**](https://deep0thinking.github.io/2nd-Minima/about.html) and [**archive**](https://deep0thinking.github.io/2nd-Minima/archive.html) pages all have `layout: page` in the Predeclaration part) ? +Once you've read through the giscus instructions and obtained the necessary embed code, it's time to integrate it into your site. Replace the **fake comments section** code at the bottom of your "**/_layouts/post.html**" file with the new giscus embed code. The placeholder code you'll be replacing looks like this: `

fake comments section

`. Remember to repeat this step for your "**/about.md**" and "**/archive.md**" files, as they also contain placeholders for the **fake comments section**. -In fact, it is valid for you to do that, but I don't recommend this action because it would also cause the and [**all-tags**](https://deep0thinking.github.io/2nd-Minima/all-tags.html) and every single **tag** page to have the comments section at the bottom and that is not necessary and would somehow decrease the webpage aesthetics from my perspective. +You might wonder why not simply insert the giscus embed code into the "**/_layouts/page.html**" file, as both the [**about**](https://deep0thinking.github.io/2nd-Minima/about.html) and [**archive**](https://deep0thinking.github.io/2nd-Minima/archive.html) pages use `layout: page` in their predeclarations. The reason is that doing so would also add a comments section to the [**all-tags**](https://deep0thinking.github.io/2nd-Minima/all-tags.html) page and every single **tag** page, which isn't ideal. In my view, this could clutter these pages and detract from the site's aesthetic appeal. But you can surely do that based on you preference. -After completing the procedure above, you can now see the comments sections (giscus) appear at the bottom part in the corresponding pages. +After you've completed these steps, the giscus comments sections should now be visible at the bottom of the relevant pages.

2.4 "/about.md"

-The instruction of modifying [**about**](https://deep0thinking.github.io/2nd-Minima/about.html) page are provided inside the "**/about.md**" file, so you can now visit your "**/about.md**" file and do some personalized modification. +You'll find detailed guidance on customizing the [**about**](https://deep0thinking.github.io/2nd-Minima/about.html) page within the "**/about.md**" file itself. So, take a moment to visit your "**/about.md**" file, where you can apply your own personal touches and modifications to make it truly yours.

2.5 "/archive.md"

-The instruction of modifying [**archive**](https://deep0thinking.github.io/2nd-Minima/archive.html) page are provided inside the "**/archive.md**" file, so you can now visit your "**/archive.md**" file and do some personalized modification. +Tailoring the [**archive**](https://deep0thinking.github.io/2nd-Minima/archive.html) page to your preferences is straightforward. You'll find all the necessary instructions within the "**/archive.md** file. Go ahead and open your "**/archive.md** file to start making personalized modifications that reflect your style and needs.

2.6 favicon

-Favicon is the icon that represents your webpage (did you notice the black icon located next to your webpage title? Yeah, that is the favicon I set as default for this repository, and I'll tell you how to change it) and you can design your own favicon for your webpage, here I recommend [favicon.io](https://favicon.io), it is a website that allows you to design and generate your favicon freely and conveniently. +The favicon is a small, iconic image that represents your webpage. Have you noticed the black icon next to your webpage title? That's the default favicon I've set for this repository. But you can personalize it by creating your own. For this, I recommend using [favicon.io](https://favicon.io). It's a user-friendly website that lets you design and generate your own favicon for free. -After you've done creating your favicon, all you need to do is to place the generated "**favicon.ico**" file under the "**/favicon/**" folder to **replace** the old one (the old "**favicon.ico**" file) I've put there before ***(Attention: The file name of the favicon file you put under the "/favicon/" folder must be "favicon.ico" exactly, or it won't work)***, then your webpage would be able to show the favicon you designed. +Once you've crafted your favicon, the next step is simple. Just place your newly created "**favicon.ico**" file into the "**/favicon/**" folder, replacing the existing one (the old "**favicon.ico**" file I placed there). ***(Attention: the new file you replaced with under the "/favicon/" must be named exactly "favicon.ico" for it to function correctly )*** With this change, your webpage will display the favicon you've designed, adding a unique touch to your site. \ No newline at end of file diff --git a/_site/about.html b/_site/about.html index 6a2f8b4..d0e2290 100644 --- a/_site/about.html +++ b/_site/about.html @@ -1,5 +1,5 @@ - + @@ -27,19 +27,7 @@ - - -
+
-
- -
+
+ +

About

@@ -77,9 +65,11 @@

+

Welcome to the “About” page of your site! This is where you can introduce yourself or your project. Below, you’ll find a template structure along with instructions to personalize your page. If you need help, feel free to contact me through email: Deep0Thinking@outlook.com

+

Instruction part 1 begins

-

To find your github avatar HTML source code, you need to first view the source code of your Github profile page (please go google “how to view the source code of a webpage”, and it is very easy to apply), then you need to use the built-in pointer tool of your browser to locate and click on your Github avatar area, then you will be lead to a HTML source code section in a form like :

+

To find your github avatar HTML source code, you need to first view the source code of your Github profile page (please google “how to view the source code of a webpage”, trust me, it is very easy to apply), then you should use the built-in pointer tool of your browser to locate and click on your Github avatar area, this will lead you to the HTML source code section in the form like:

<img style="height:auto;" alt="" width="260" height="260" class="avatar avatar-user width-full border color-bg-default" src="https://avatars.githubusercontent.com/u/103571424?v=4">
@@ -89,10 +79,10 @@

Instruction part 1 begins

Instruction part 1 ends

Try to write something here:

-

Try to write something here

+

Here, you can talk about yourself, your interests, or the purpose of your site.

Maybe your hobbies:

-

…

+

Share your hobbies or things you’re passionate about.

Maybe your Contact Information:

@@ -112,9 +102,9 @@

Maybe your Information On Oth

Instruction part 2 begins

-

If you want to add more platforms information, you can go to remixicon.com to find icons you want and copy the corresponding embed code, for exam: <i class="ri-github-line"></i> . Then paste it and edit in the form of the above, and it’ll work properly.

+

If you want to add more platforms information, you can visit remixicon.com to choose the desired icons and copy the corresponding embed code, for example: <i class="ri-github-line"></i> . Then insert it in the form of the above.

-

Finally, after getting familiar with these procedure, you can delete this instruction part (from <h3 style="color: red">Instruction part 2 begins</h3> to <h3 style="color: red">Instruction part 2 ends</h3>) safely.

+

After you’re comfortable with the setup, you can remove these instructions safely (from <h3 style="color: red">Instruction part 2 begins</h3> to <h3 style="color: red">Instruction part 2 ends</h3>).

Instruction part 2 ends

@@ -125,11 +115,11 @@

fake comments sect - -

+ + - + - + \ No newline at end of file diff --git a/_site/all-tags.html b/_site/all-tags.html index ad0ee72..6a47e76 100644 --- a/_site/all-tags.html +++ b/_site/all-tags.html @@ -1,5 +1,5 @@ - + @@ -27,19 +27,7 @@ - - -
+
-
- -
+
+ +

Tags

@@ -99,11 +87,11 @@

Tags

-
-
+ + - + - + \ No newline at end of file diff --git a/_site/archive.html b/_site/archive.html index 27d36b7..8ec9f62 100644 --- a/_site/archive.html +++ b/_site/archive.html @@ -1,5 +1,5 @@ - + @@ -27,19 +27,7 @@ - - -
+
-
- -
+
+ +

Archive

-

Papers published by me (Full-Display Style) :

+

Welcome to the “Archive” page! Here, you can showcase your publications, including papers and books, in a visually appealing manner. Below are templates for two display styles: Full-Display and Scrolling-Display.

+ +

Books (Full-Display Style) :

@@ -72,14 +62,14 @@

Papers published by me (Full
-
Title
+
Title
Title
-
PDF
 +
Link 1
@@ -87,7 +77,7 @@

Papers published by me (Full
-
Title
+
Title
Title
@@ -103,7 +93,7 @@

Papers published by me (Full
-
Title
+
Title
Title
@@ -121,7 +111,7 @@

Papers published by me (Full
-
Title
+
Title
Title
@@ -141,20 +131,20 @@

Papers published by me (Full

-

Books published by me (Scrolling-Display Style) (you can scroll this part horizontally):

+

Books (Scrolling-Display Style) (you can scroll this part horizontally):

-
Title
+
Title
Title
-
PDF
 +
Link 1
@@ -162,7 +152,7 @@

-
Title
+
Title
Title
@@ -178,7 +168,7 @@

-
Title
+
Title
Title
@@ -196,7 +186,7 @@

-
Title
+
Title
Title
@@ -222,7 +212,7 @@

Instruction part begins

If you want to decorate it in your way, you may have to learn Jekyll and some front-end programming languages.

-

If you don’t like this page or think this page is somehow needless, you can easily remove it through deleting the “/new-page.md” file and the - new-page.md line under the “/_config.yml” file.

+

If you find this page unnecessary, you can easily remove it from you blog through deleting the “/new-page.md” file and the - new-page.md line under the “/_config.yml” file.

The following contents show 2 display block style:

@@ -235,11 +225,13 @@

Instruction part begins

-

And both of them support adding items ( <div class="Single-Container">...</div> , which is the least unit of a display item within a display block) with no max quantity limit. So you can edit them by deleting or adding this code block inside the Full-Display Style block <div class="Group-Container-Full-Display">...</div> or the Scrolling-Display Style block <div class="Group-Container-Scrolling-Display">...</div> :

+

To add more items to either display style, replicate the <div class="Single-Container">...</div> (which is the least unit of a display item within a display container) block within the corresponding group container <div class="Group-Container-Full-Display">...</div> or <div class="Group-Container-Scrolling-Display">...</div>.

+ +


<div class="Single-Container">
 
-	<div class="ImgBorder"><img class="ImgOpacity" src="https://thumbs.gfycat.com/MellowEvergreenAfricanelephant-size_restricted.gif" alt="Title"></div>
+	<div class="ImgBorder"><img class="ImgOpacity" src="https://deep0thinking.com/wp-content/uploads/2024/01/Hover-on-me.jpg" alt="Title"></div>
 
 	<div class="Text">Title</div>
 
@@ -253,9 +245,9 @@ 
Instruction part begins

 </div>
-

And please note that the src value in every display item are src="https://thumbs.gfycat.com/MellowEvergreenAfricanelephant-size_restricted.gif" , and that link address determines the cover of the corresponding item, so you use the same method of Instruction part 1 stated in the about page to change the cover.

+

The link in src in the display item src="https://deep0thinking.com/wp-content/uploads/2024/01/Hover-on-me.jpg" is your chosen image that determines the cover of the corresponding item, it can be an URL like this: https://deep0thinking.com/wp-content/uploads/2024/01/my-first-post.jpg or a local file path like this: /assets/img/my-first-post.jpg. (Attention: Please make sure to use the correct link format, or the thumbnail would not be able to display.)

-

Finally, after getting familiar with these procedure, you can delete this instruction part (from <h3 style="color: red">Instruction part begins</h3> to <h3 style="color: red">Instruction part ends</h3>) safely.

+

Feel free to remove these instructions once you’re familiar with the setup.

Instruction part ends

@@ -266,11 +258,11 @@

fake comments sect

-
-
+ + - + - + \ No newline at end of file diff --git a/_site/assets/css/style.css b/_site/assets/css/style.css index b479439..3213c09 100644 --- a/_site/assets/css/style.css +++ b/_site/assets/css/style.css @@ -746,13 +746,18 @@ table td { } } /** - * _layout.scss + * default.html */ .site-header { position: sticky; - top: 0px; + top: 0; background-color: rgb(255, 255, 255); z-index: 1; + transition: top 0.5s; +} + +.hide-site-header { + top: -100%; } /** diff --git a/_site/assets/css/style.css.map b/_site/assets/css/style.css.map index 5f1a0aa..aab1f7f 100644 --- a/_site/assets/css/style.css.map +++ b/_site/assets/css/style.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["../../_sass/minima/custom-styles.scss","../../_sass/minima/skins/auto.scss","../../_sass/minima/_base.scss","../../_sass/minima/initialize.scss","../../_sass/minima/_layout.scss"],"names":[],"mappings":"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AAGF;EAEE;EACA;EACA;EACA;EACA;EACA;;;AAIF;EAEE;EACA;EACA;;;AAGF;EAEE;EACA;EACA;EACA;;;AAGF;EAEE;EACA;;;AAGF;EAEE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EAEE;EACA;EACA;;;AAGF;EAEE;EACA;;;AAGF;EAEE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EAEE;EACA;;;AAGF;EAEE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EAEE;EACA;EACA;EACA;EACA;;;AAGF;AAAA;AAAA;AAIA;EAEE;;AAEA;EAJF;IAMI;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;;AAGF;EAtBF;IAwBI;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;;;AAKJ;EACE;;;AAGF;EACE;;;AAGF;AAAA;AAAA;AAIA;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA","sourcesContent":["\n/**\n * _layout.scss\n */\n\n.site-header\n{\n position: sticky;\n top: 0px;\n background-color: rgba(255,255,255,1);\n z-index: 1;\n}\n\n\n\n/**\n * about.md\n */\n\n@import\n \"https://cdn.jsdelivr.net/npm/remixicon@2.5.0/fonts/remixicon.css\"\n;\n\n.Icon-link\n{\n transition: 0.3s;\n text-decoration: none;\n font-size: 7.5vmin;\n color: black;\n margin-right: 2vmin;\n display: inline-block;\n}\n\n.Icon-link:visited\n{\n text-decoration: none;\n color: black;\n}\n\n.Icon-link:hover\n{\n color: DodgerBlue;\n text-decoration: underline;\n transform: scale(1.2);\n transition: 0.3s;\n}\n\n.Info\n{\n display: flex;\n align-items: center;\n}\n\n.Text-block\n{\n flex-grow: 1;\n text-align: center;\n}\n\n.Img-block\n{\n margin: 2.5vmin;\n}\n\n.Avatar\n{\n border-radius: 2vmin;\n width: 30vmin;\n height: 30vmin;\n}\n\n\n\n/**\n * archive.md\n */\n\n@import\n \"https://cdn.jsdelivr.net/npm/remixicon@2.5.0/fonts/remixicon.css\"\n;\n\n.Option-width\n{\n width: 100%;\n text-decoration: none;\n}\n\n.Group-Container-Full-Display\n{\n display: flex;\n justify-content: space-around;\n flex-direction: row;\n flex-wrap: wrap;\n}\n\n.Group-Container-Scrolling-Display\n{\n display: flex;\n flex-direction: row;\n overflow: auto;\n}\n\n.Single-Container\n{\n position: relative;\n width: 170px;\n min-width: 170px;\n margin: 11px;\n height: 100%;\n text-align: center;\n cursor: pointer;\n display: flex;\n align-items: center;\n}\n\n.ImgBorder\n{\n transition: 0.3s;\n display: inline-block;\n width: 100%;\n height: 100%;\n border: 4px solid;\n border-color: black;\n}\n\n\n.Single-Container:hover .ImgBorder\n{\n border-color: DodgerBlue;\n transform: scale(1.1);\n transition: 0.3s;\n}\n\n.ImgOpacity\n{\n opacity: 1;\n width: 100%;\n transition: 0.3s;\n vertical-align: top;\n}\n\n.Single-Container:hover .ImgOpacity\n{\n opacity: 0.15;\n transition: 0.3s;\n}\n\n.Text\n{\n color: black;\n font-size: 20px;\n text-decoration: none;\n opacity: 0;\n transition: 0.3s;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 75%;\n justify-content: center;\n}\n\n.Single-Container:hover .Text\n{\n opacity: 1;\n color: black;\n text-decoration: none;\n}\n\n.Text:visited\n{\n text-decoration: none;\n color: black;\n}\n\n.Selection\n{\n color: black;\n font-size: 20px;\n text-decoration: none;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 75%;\n height: 100%;\n display: none;\n opacity: 0;\n transition: 0.3s;\n flex-direction: column;\n justify-content: space-around;\n align-items: center;\n flex-wrap: wrap;\n}\n\n.Single-Container:hover .Selection\n{\n opacity: 1;\n transition: 0.3s;\n}\n\n.Option\n{\n position: relative;\n border: black solid 3px;\n padding: 3%;\n transition: 0.3s;\n color: black;\n text-decoration: none;\n width: auto;\n}\n\n.Option:hover\n{\n border-color: DodgerBlue;\n transform: scale(1.1);\n transition: 0.3s;\n text-decoration: underline;\n color: black;\n}\n\n/**\n * default.html\n */\n\n.section-nav\n{\n display: none;\n\n @media screen and (min-width: $on-medium)\n {\n display: block;\n text-align: left;\n background-color: #fff;\n margin: 5px 0;\n padding: 10px 30px;\n width: 145px;\n max-height: calc(100vh - 180px);\n overflow: auto;\n white-space: nowrap;\n border: 1px solid #e8e8e8;\n border-radius: 3px;\n position: fixed;\n left: 25px; \n top: 90px;\n }\n\n @media screen and (min-width: calc($on-large + 90px))\n {\n display: block;\n text-align: left;\n background-color: #fff;\n margin: 5px 0;\n padding: 10px 30px;\n width: 205px;\n max-height: calc(100vh - 180px);\n overflow: auto;\n white-space: nowrap;\n border: 1px solid #e8e8e8;\n border-radius: 3px;\n position: fixed;\n left: calc( (100vw - 1455px) /2); \n top: 90px;\n }\n \n}\n\n.hide-and-display {\n visibility: hidden;\n}\n\n.hide-and-display-trigger:hover .hide-and-display {\n visibility: visible;\n}\n\n/**\n * home.html\n */\n\n.post-info::after {\n content: \"\";\n display: table;\n clear: both;\n}\n\n.post-thumbnail img{\n margin-left: 5px;\n margin-right: 15px;\n float: left;\n width: 200px;\n height: auto;\n border-radius: 10px;\n}","@charset \"utf-8\";\n\n// Default color scheme settings\n// These are overridden in classic.css and dark.scss\n\n$color-scheme-auto: true !default;\n$color-scheme-dark: false !default;\n\n\n// Light mode\n// ----------\n\n$lm-brand-color: #828282 !default;\n$lm-brand-color-light: lighten($lm-brand-color, 40%) !default;\n$lm-brand-color-dark: darken($lm-brand-color, 25%) !default;\n\n$lm-site-title-color: $lm-brand-color-dark !default;\n\n$lm-text-color: #111111 !default;\n$lm-background-color: #fdfdfd !default;\n$lm-code-background-color: #eeeeff !default;\n\n$lm-link-base-color: #2a7ae2 !default;\n$lm-link-visited-color: darken($lm-link-base-color, 15%) !default;\n$lm-link-hover-color: $lm-text-color !default;\n\n$lm-border-color-01: $lm-brand-color-light !default;\n$lm-border-color-02: lighten($lm-brand-color, 35%) !default;\n$lm-border-color-03: $lm-brand-color-dark !default;\n\n$lm-table-text-color: lighten($lm-text-color, 18%) !default;\n$lm-table-zebra-color: lighten($lm-brand-color, 46%) !default;\n$lm-table-header-bg-color: lighten($lm-brand-color, 43%) !default;\n$lm-table-header-border: lighten($lm-brand-color, 37%) !default;\n$lm-table-border-color: $lm-border-color-01 !default;\n\n\n// Syntax highlighting styles should be adjusted appropriately for every \"skin\"\n// ----------------------------------------------------------------------------\n\n@mixin lm-highlight {\n .highlight {\n .c { color: #998; font-style: italic } // Comment\n .err { color: #a61717; background-color: #e3d2d2 } // Error\n .k { font-weight: bold } // Keyword\n .o { font-weight: bold } // Operator\n .cm { color: #998; font-style: italic } // Comment.Multiline\n .cp { color: #999; font-weight: bold } // Comment.Preproc\n .c1 { color: #998; font-style: italic } // Comment.Single\n .cs { color: #999; font-weight: bold; font-style: italic } // Comment.Special\n .gd { color: #000; background-color: #fdd } // Generic.Deleted\n .gd .x { color: #000; background-color: #faa } // Generic.Deleted.Specific\n .ge { font-style: italic } // Generic.Emph\n .gr { color: #a00 } // Generic.Error\n .gh { color: #999 } // Generic.Heading\n .gi { color: #000; background-color: #dfd } // Generic.Inserted\n .gi .x { color: #000; background-color: #afa } // Generic.Inserted.Specific\n .go { color: #888 } // Generic.Output\n .gp { color: #555 } // Generic.Prompt\n .gs { font-weight: bold } // Generic.Strong\n .gu { color: #aaa } // Generic.Subheading\n .gt { color: #a00 } // Generic.Traceback\n .kc { font-weight: bold } // Keyword.Constant\n .kd { font-weight: bold } // Keyword.Declaration\n .kp { font-weight: bold } // Keyword.Pseudo\n .kr { font-weight: bold } // Keyword.Reserved\n .kt { color: #458; font-weight: bold } // Keyword.Type\n .m { color: #099 } // Literal.Number\n .s { color: #d14 } // Literal.String\n .na { color: #008080 } // Name.Attribute\n .nb { color: #0086B3 } // Name.Builtin\n .nc { color: #458; font-weight: bold } // Name.Class\n .no { color: #008080 } // Name.Constant\n .ni { color: #800080 } // Name.Entity\n .ne { color: #900; font-weight: bold } // Name.Exception\n .nf { color: #900; font-weight: bold } // Name.Function\n .nn { color: #555 } // Name.Namespace\n .nt { color: #000080 } // Name.Tag\n .nv { color: #008080 } // Name.Variable\n .ow { font-weight: bold } // Operator.Word\n .w { color: #bbb } // Text.Whitespace\n .mf { color: #099 } // Literal.Number.Float\n .mh { color: #099 } // Literal.Number.Hex\n .mi { color: #099 } // Literal.Number.Integer\n .mo { color: #099 } // Literal.Number.Oct\n .sb { color: #d14 } // Literal.String.Backtick\n .sc { color: #d14 } // Literal.String.Char\n .sd { color: #d14 } // Literal.String.Doc\n .s2 { color: #d14 } // Literal.String.Double\n .se { color: #d14 } // Literal.String.Escape\n .sh { color: #d14 } // Literal.String.Heredoc\n .si { color: #d14 } // Literal.String.Interpol\n .sx { color: #d14 } // Literal.String.Other\n .sr { color: #009926 } // Literal.String.Regex\n .s1 { color: #d14 } // Literal.String.Single\n .ss { color: #990073 } // Literal.String.Symbol\n .bp { color: #999 } // Name.Builtin.Pseudo\n .vc { color: #008080 } // Name.Variable.Class\n .vg { color: #008080 } // Name.Variable.Global\n .vi { color: #008080 } // Name.Variable.Instance\n .il { color: #099 } // Literal.Number.Integer.Long\n }\n}\n\n\n// Dark mode\n// ---------\n\n$dm-brand-color: #999999 !default;\n$dm-brand-color-light: lighten($dm-brand-color, 5%) !default;\n$dm-brand-color-dark: darken($dm-brand-color, 35%) !default;\n\n$dm-site-title-color: $dm-brand-color-light !default;\n\n$dm-text-color: #bbbbbb !default;\n$dm-background-color: #181818 !default;\n$dm-code-background-color: #212121 !default;\n\n$dm-link-base-color: #79b8ff !default;\n$dm-link-visited-color: $dm-link-base-color !default;\n$dm-link-hover-color: $dm-text-color !default;\n\n$dm-border-color-01: $dm-brand-color-dark !default;\n$dm-border-color-02: $dm-brand-color-light !default;\n$dm-border-color-03: $dm-brand-color !default;\n\n$dm-table-text-color: $dm-text-color !default;\n$dm-table-zebra-color: lighten($dm-background-color, 4%) !default;\n$dm-table-header-bg-color: lighten($dm-background-color, 10%) !default;\n$dm-table-header-border: lighten($dm-background-color, 21%) !default;\n$dm-table-border-color: $dm-border-color-01 !default;\n\n\n// Syntax highlighting styles should be adjusted appropriately for every \"skin\"\n// List of tokens: https://github.com/rouge-ruby/rouge/wiki/List-of-tokens\n// Some colors come from Material Theme Darker:\n// https://github.com/material-theme/vsc-material-theme/blob/master/scripts/generator/settings/specific/darker-hc.ts\n// https://github.com/material-theme/vsc-material-theme/blob/master/scripts/generator/color-set.ts\n// ----------------------------------------------------------------------------\n\n@mixin dm-highlight {\n .highlight {\n .c { color: #545454; font-style: italic } // Comment\n .err { color: #f07178; background-color: #e3d2d2 } // Error\n .k { color: #89DDFF; font-weight: bold } // Keyword\n .o { font-weight: bold } // Operator\n .cm { color: #545454; font-style: italic } // Comment.Multiline\n .cp { color: #545454; font-weight: bold } // Comment.Preproc\n .c1 { color: #545454; font-style: italic } // Comment.Single\n .cs { color: #545454; font-weight: bold; font-style: italic } // Comment.Special\n .gd { color: #000; background-color: #fdd } // Generic.Deleted\n .gd .x { color: #000; background-color: #faa } // Generic.Deleted.Specific\n .ge { font-style: italic } // Generic.Emph\n .gr { color: #f07178 } // Generic.Error\n .gh { color: #999 } // Generic.Heading\n .gi { color: #000; background-color: #dfd } // Generic.Inserted\n .gi .x { color: #000; background-color: #afa } // Generic.Inserted.Specific\n .go { color: #888 } // Generic.Output\n .gp { color: #555 } // Generic.Prompt\n .gs { font-weight: bold } // Generic.Strong\n .gu { color: #aaa } // Generic.Subheading\n .gt { color: #f07178 } // Generic.Traceback\n .kc { font-weight: bold } // Keyword.Constant\n .kd { font-weight: bold } // Keyword.Declaration\n .kp { font-weight: bold } // Keyword.Pseudo\n .kr { font-weight: bold } // Keyword.Reserved\n .kt { color: #FFCB6B; font-weight: bold } // Keyword.Type\n .m { color: #F78C6C } // Literal.Number\n .s { color: #C3E88D } // Literal.String\n .na { color: #008080 } // Name.Attribute\n .nb { color: #EEFFFF } // Name.Builtin\n .nc { color: #FFCB6B; font-weight: bold } // Name.Class\n .no { color: #008080 } // Name.Constant\n .ni { color: #800080 } // Name.Entity\n .ne { color: #900; font-weight: bold } // Name.Exception\n .nf { color: #82AAFF; font-weight: bold } // Name.Function\n .nn { color: #555 } // Name.Namespace\n .nt { color: #FFCB6B } // Name.Tag\n .nv { color: #EEFFFF } // Name.Variable\n .ow { font-weight: bold } // Operator.Word\n .w { color: #EEFFFF } // Text.Whitespace\n .mf { color: #F78C6C } // Literal.Number.Float\n .mh { color: #F78C6C } // Literal.Number.Hex\n .mi { color: #F78C6C } // Literal.Number.Integer\n .mo { color: #F78C6C } // Literal.Number.Oct\n .sb { color: #C3E88D } // Literal.String.Backtick\n .sc { color: #C3E88D } // Literal.String.Char\n .sd { color: #C3E88D } // Literal.String.Doc\n .s2 { color: #C3E88D } // Literal.String.Double\n .se { color: #EEFFFF } // Literal.String.Escape\n .sh { color: #C3E88D } // Literal.String.Heredoc\n .si { color: #C3E88D } // Literal.String.Interpol\n .sx { color: #C3E88D } // Literal.String.Other\n .sr { color: #C3E88D } // Literal.String.Regex\n .s1 { color: #C3E88D } // Literal.String.Single\n .ss { color: #C3E88D } // Literal.String.Symbol\n .bp { color: #999 } // Name.Builtin.Pseudo\n .vc { color: #FFCB6B } // Name.Variable.Class\n .vg { color: #EEFFFF } // Name.Variable.Global\n .vi { color: #EEFFFF } // Name.Variable.Instance\n .il { color: #F78C6C } // Literal.Number.Integer.Long\n }\n}\n\n\n// Mode selection\n// --------------\n\n\n// Classic skin (always light mode)\n// Assign outside of the if construct to establish global variable scope\n\n$brand-color: $lm-brand-color;\n$brand-color-light: $lm-brand-color-light;\n$brand-color-dark: $lm-brand-color-dark;\n\n$site-title-color: $lm-site-title-color;\n\n$text-color: $lm-text-color;\n$background-color: $lm-background-color;\n$code-background-color: $lm-code-background-color;\n\n$link-base-color: $lm-link-base-color;\n$link-visited-color: $lm-link-visited-color;\n$link-hover-color: $lm-link-hover-color;\n\n$border-color-01: $lm-border-color-01;\n$border-color-02: $lm-border-color-02;\n$border-color-03: $lm-border-color-03;\n\n$table-text-color: $lm-table-text-color;\n$table-zebra-color: $lm-table-zebra-color;\n$table-header-bg-color: $lm-table-header-bg-color;\n$table-header-border: $lm-table-header-border;\n$table-border-color: $lm-table-border-color;\n\n\n@if $color-scheme-auto {\n\n // Auto mode\n\n :root {\n --minima-brand-color: #{$lm-brand-color};\n --minima-brand-color-light: #{$lm-brand-color-light};\n --minima-brand-color-dark: #{$lm-brand-color-dark};\n\n --minima-site-title-color: #{$lm-site-title-color};\n\n --minima-text-color: #{$lm-text-color};\n --minima-background-color: #{$lm-background-color};\n --minima-code-background-color: #{$lm-code-background-color};\n\n --minima-link-base-color: #{$lm-link-base-color};\n --minima-link-visited-color: #{$lm-link-visited-color};\n --minima-link-hover-color: #{$lm-link-hover-color};\n\n --minima-border-color-01: #{$lm-border-color-01};\n --minima-border-color-02: #{$lm-border-color-02};\n --minima-border-color-03: #{$lm-border-color-03};\n\n --minima-table-text-color: #{$lm-table-text-color};\n --minima-table-zebra-color: #{$lm-table-zebra-color};\n --minima-table-header-bg-color: #{$lm-table-header-bg-color};\n --minima-table-header-border: #{$lm-table-header-border};\n --minima-table-border-color: #{$lm-table-border-color};\n }\n\n @include lm-highlight;\n\n @media (prefers-color-scheme: dark) {\n :root {\n --minima-brand-color: #{$dm-brand-color};\n --minima-brand-color-light: #{$dm-brand-color-light};\n --minima-brand-color-dark: #{$dm-brand-color-dark};\n\n --minima-site-title-color: #{$dm-site-title-color};\n\n --minima-text-color: #{$dm-text-color};\n --minima-background-color: #{$dm-background-color};\n --minima-code-background-color: #{$dm-code-background-color};\n\n --minima-link-base-color: #{$dm-link-base-color};\n --minima-link-visited-color: #{$dm-link-visited-color};\n --minima-link-hover-color: #{$dm-link-hover-color};\n\n --minima-border-color-01: #{$dm-border-color-01};\n --minima-border-color-02: #{$dm-border-color-02};\n --minima-border-color-03: #{$dm-border-color-03};\n\n --minima-table-text-color: #{$dm-table-text-color};\n --minima-table-zebra-color: #{$dm-table-zebra-color};\n --minima-table-header-bg-color: #{$dm-table-header-bg-color};\n --minima-table-header-border: #{$dm-table-header-border};\n --minima-table-border-color: #{$dm-table-border-color};\n }\n\n @include dm-highlight;\n }\n\n $brand-color: var(--minima-brand-color);\n $brand-color-light: var(--minima-brand-color-light);\n $brand-color-dark: var(--minima-brand-color-dark);\n\n $site-title-color: var(--minima-site-title-color);\n\n $text-color: var(--minima-text-color);\n $background-color: var(--minima-background-color);\n $code-background-color: var(--minima-code-background-color);\n\n $link-base-color: var(--minima-link-base-color);\n $link-visited-color: var(--minima-link-visited-color);\n $link-hover-color: var(--minima-link-hover-color);\n\n $border-color-01: var(--minima-border-color-01);\n $border-color-02: var(--minima-border-color-02);\n $border-color-03: var(--minima-border-color-03);\n\n $table-text-color: var(--minima-table-text-color);\n $table-zebra-color: var(--minima-table-zebra-color);\n $table-header-bg-color: var(--minima-table-header-bg-color);\n $table-header-border: var(--minima-table-header-border);\n $table-border-color: var(--minima-table-border-color);\n\n\n} @else if $color-scheme-dark {\n\n // Dark skin (always dark mode)\n\n $brand-color: $dm-brand-color;\n $brand-color-light: $dm-brand-color-light;\n $brand-color-dark: $dm-brand-color-dark;\n\n $site-title-color: $dm-site-title-color;\n\n $text-color: $dm-text-color;\n $background-color: $dm-background-color;\n $code-background-color: $dm-code-background-color;\n\n $link-base-color: $dm-link-base-color;\n $link-visited-color: $dm-link-visited-color;\n $link-hover-color: $dm-link-hover-color;\n\n $border-color-01: $dm-border-color-01;\n $border-color-02: $dm-border-color-02;\n $border-color-03: $dm-border-color-03;\n\n $table-text-color: $dm-table-text-color;\n $table-zebra-color: $dm-table-zebra-color;\n $table-header-bg-color: $dm-table-header-bg-color;\n $table-header-border: $dm-table-header-border;\n $table-border-color: $dm-table-border-color;\n\n @include dm-highlight;\n\n\n} @else {\n\n // Classic skin syntax highlighting\n @include lm-highlight;\n\n}\n","html {\n font-size: $base-font-size;\n}\n\n/**\n * Reset some basic elements\n */\nbody, h1, h2, h3, h4, h5, h6,\np, blockquote, pre, hr,\ndl, dd, ol, ul, figure {\n margin: 0;\n padding: 0;\n\n}\n\n\n\n/**\n * Basic styling\n */\nbody {\n font: $base-font-weight #{$base-font-size}/#{$base-line-height} $base-font-family;\n color: $text-color;\n background-color: $background-color;\n -webkit-text-size-adjust: 100%;\n -webkit-font-feature-settings: \"kern\" 1;\n -moz-font-feature-settings: \"kern\" 1;\n -o-font-feature-settings: \"kern\" 1;\n font-feature-settings: \"kern\" 1;\n font-kerning: normal;\n display: flex;\n min-height: 100vh;\n flex-direction: column;\n overflow-wrap: break-word;\n}\n\n\n\n/**\n * Set `margin-bottom` to maintain vertical rhythm\n */\nh1, h2, h3, h4, h5, h6,\np, blockquote, pre,\nul, ol, dl, figure,\n%vertical-rhythm {\n margin-bottom: $spacing-unit * .5;\n}\n\nhr {\n margin-top: $spacing-unit;\n margin-bottom: $spacing-unit;\n}\n\n/**\n * `main` element\n */\nmain {\n display: block; /* Default value of `display` of `main` element is 'inline' in IE 11. */\n}\n\n\n\n/**\n * Images\n */\nimg {\n max-width: 100%;\n vertical-align: middle;\n}\n\n\n\n/**\n * Figures\n */\nfigure > img {\n display: block;\n}\n\nfigcaption {\n font-size: $small-font-size;\n}\n\n\n\n/**\n * Lists\n */\nul, ol {\n margin-left: $spacing-unit;\n}\n\nli {\n > ul,\n > ol {\n margin-bottom: 0;\n }\n}\n\n\n\n/**\n * Headings\n */\nh1, h2, h3, h4, h5, h6 {\n font-weight: $base-font-weight;\n}\n\n\n\n/**\n * Links\n */\na {\n color: $link-base-color;\n text-decoration: none;\n\n &:visited {\n color: $link-visited-color;\n }\n\n &:hover {\n color: $link-hover-color;\n text-decoration: underline;\n }\n\n .social-media-list &:hover {\n text-decoration: none;\n\n .username {\n text-decoration: underline;\n }\n }\n}\n\n\n/**\n * Blockquotes\n */\nblockquote {\n color: $brand-color;\n border-left: 4px solid $border-color-01;\n padding-left: $spacing-unit * .5;\n @include relative-font-size(1.125);\n font-style: italic;\n\n > :last-child {\n margin-bottom: 0;\n }\n\n i, em {\n font-style: normal;\n }\n}\n\n\n\n/**\n * Code formatting\n */\npre,\ncode {\n font-family: $code-font-family;\n font-size: 0.9375em;\n border: 1px solid $border-color-01;\n border-radius: 3px;\n background-color: $code-background-color;\n}\n\ncode {\n padding: 1px 5px;\n}\n\npre {\n padding: 8px 12px;\n overflow-x: auto;\n\n > code {\n border: 0;\n padding-right: 0;\n padding-left: 0;\n }\n}\n\n.highlight {\n border-radius: 3px;\n background: $code-background-color;\n @extend %vertical-rhythm;\n\n .highlighter-rouge & {\n background: $code-background-color;\n }\n}\n\n\n\n/**\n * Wrapper\n */\n.wrapper {\n max-width: calc(#{$content-width} - 150px - (#{$spacing-unit}));\n margin-right: auto;\n margin-left: auto;\n padding-right: $spacing-unit * .5;\n padding-left: $spacing-unit * .5;\n @extend %clearfix;\n\n @media screen and (min-width: $on-large) {\n max-width: calc(#{$content-width} - (#{$spacing-unit} * 2));\n padding-right: $spacing-unit;\n padding-left: $spacing-unit;\n }\n}\n\n\n\n/**\n * Clearfix\n */\n%clearfix:after {\n content: \"\";\n display: table;\n clear: both;\n}\n\n\n\n/**\n * Icons\n */\n\n.orange {\n color: #f66a0a;\n}\n\n.grey {\n color: #828282;\n}\n\n.svg-icon {\n width: 1.25em;\n height: 1.25em;\n display: inline-block;\n fill: currentColor;\n vertical-align: text-bottom;\n}\n\n\n/**\n * Tables\n */\ntable {\n margin-bottom: $spacing-unit;\n width: 100%;\n text-align: $table-text-align;\n color: $table-text-color;\n border-collapse: collapse;\n border: 1px solid $table-border-color;\n tr {\n &:nth-child(even) {\n background-color: $table-zebra-color;\n }\n }\n th, td {\n padding: ($spacing-unit * 33.3333333333 * .01) ($spacing-unit * .5);\n }\n th {\n background-color: $table-header-bg-color;\n border: 1px solid $table-header-border;\n }\n td {\n border: 1px solid $table-border-color;\n }\n\n @include media-query($on-laptop) {\n display: block;\n overflow-x: auto;\n -webkit-overflow-scrolling: touch;\n -ms-overflow-style: -ms-autohiding-scrollbar;\n }\n}\n","@charset \"utf-8\";\n\n// Define defaults for each variable.\n\n$base-font-family: -apple-system, system-ui, BlinkMacSystemFont, \"Segoe UI\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Apple Color Emoji\", Roboto, Helvetica, Arial, sans-serif !default;\n$code-font-family: \"Menlo\", \"Inconsolata\", \"Consolas\", \"Roboto Mono\", \"Ubuntu Mono\", \"Liberation Mono\", \"Courier New\", monospace;\n$base-font-size: 16px !default;\n$base-font-weight: 400 !default;\n$small-font-size: $base-font-size * 0.875 !default;\n$base-line-height: 1.5 !default;\n\n$spacing-unit: 20px !default;\n\n$table-text-align: left !default;\n\n// Width of the content area\n$content-width: 900px !default;\n\n$on-palm: 1240px !default;\n$on-laptop: 1366px !default;\n\n$on-medium: $on-palm !default;\n$on-large: $on-laptop !default;\n\n// Use media queries like this:\n// @include media-query($on-palm) {\n// .wrapper {\n// padding-right: $spacing-unit / 2;\n// padding-left: $spacing-unit / 2;\n// }\n// }\n// Notice the following mixin uses max-width, in a deprecated, desktop-first\n// approach, whereas media queries used elsewhere now use min-width.\n@mixin media-query($device) {\n @media screen and (max-width: $device) {\n @content;\n }\n}\n\n@mixin relative-font-size($ratio) {\n font-size: #{$ratio}rem;\n}\n\n// Import pre-styling-overrides hook and style-partials.\n@import\n \"minima/custom-variables\", // Hook to override predefined variables.\n \"minima/base\", // Defines element resets.\n \"minima/layout\", // Defines structure and style based on CSS selectors.\n \"minima/custom-styles\" // Hook to override existing styles.\n;\n","/**\n * Site header\n */\n.site-header {\n border-top: 5px solid $border-color-03;\n border-bottom: 1px solid $border-color-01;\n min-height: $spacing-unit * 1.865;\n line-height: $base-line-height * $base-font-size * 2.25;\n\n // Positioning context for the mobile navigation icon\n position: relative;\n}\n\n.site-title {\n @include relative-font-size(1.625);\n font-weight: 300;\n letter-spacing: -1px;\n margin-bottom: 0;\n float: left;\n\n @include media-query($on-palm) {\n padding-right: 45px;\n }\n\n &,\n &:visited {\n color: $site-title-color;\n }\n}\n\n.site-nav {\n position: absolute;\n top: 9px;\n right: $spacing-unit * .5;\n background-color: $background-color;\n border: 1px solid $border-color-01;\n border-radius: 5px;\n text-align: right;\n\n .nav-trigger {\n display: none;\n }\n\n .menu-icon {\n float: right;\n width: 36px;\n height: 26px;\n line-height: 0;\n padding-top: 10px;\n text-align: center;\n\n > svg path {\n fill: $border-color-03;\n }\n }\n\n label[for=\"nav-trigger\"] {\n display: block;\n float: right;\n width: 36px;\n height: 36px;\n z-index: 2;\n cursor: pointer;\n }\n\n input ~ .trigger {\n clear: both;\n display: none;\n }\n\n input:checked ~ .trigger {\n display: block;\n padding-bottom: 5px;\n }\n\n .page-link {\n color: $text-color;\n line-height: $base-line-height;\n display: block;\n padding: 5px 10px;\n\n // Gaps between nav items, but not on the last one\n &:not(:last-child) {\n margin-right: 0;\n }\n margin-left: 20px;\n }\n\n @media screen and (min-width: $on-medium) {\n position: static;\n float: right;\n border: none;\n background-color: inherit;\n\n label[for=\"nav-trigger\"] {\n display: none;\n }\n\n .menu-icon {\n display: none;\n }\n\n input ~ .trigger {\n display: block;\n }\n\n .page-link {\n display: inline;\n padding: 0;\n\n &:not(:last-child) {\n margin-right: 20px;\n }\n margin-left: auto;\n }\n }\n}\n\n\n\n/**\n * Site footer\n */\n.site-footer {\n border-top: 1px solid $border-color-01;\n padding: $spacing-unit 0;\n}\n\n.footer-heading {\n @include relative-font-size(1.125);\n margin-bottom: $spacing-unit * .5;\n}\n\n.feed-subscribe .svg-icon {\n padding: 5px 5px 2px 0\n}\n\n.contact-list,\n.social-media-list {\n list-style: none;\n margin-left: 0;\n}\n\n.footer-col-wrapper,\n.social-links {\n @include relative-font-size(0.9375);\n color: $brand-color;\n}\n\n.footer-col {\n margin-bottom: $spacing-unit * .5;\n}\n\n.footer-col-1,\n.footer-col-2 {\n width: calc(50% - (#{$spacing-unit} / 2));\n}\n\n.footer-col-3 {\n width: calc(100% - (#{$spacing-unit} / 2));\n}\n\n@media screen and (min-width: $on-large) {\n .footer-col-1 {\n width: calc(35% - (#{$spacing-unit} / 2));\n }\n\n .footer-col-2 {\n width: calc(20% - (#{$spacing-unit} / 2));\n }\n\n .footer-col-3 {\n width: calc(45% - (#{$spacing-unit} / 2));\n }\n}\n\n@media screen and (min-width: $on-medium) {\n .footer-col-wrapper {\n display: flex\n }\n\n .footer-col {\n width: calc(100% - (#{$spacing-unit} / 2));\n padding: 0 ($spacing-unit * .5);\n\n &:first-child {\n padding-right: $spacing-unit * .5;\n padding-left: 0;\n }\n\n &:last-child {\n padding-right: 0;\n padding-left: $spacing-unit * .5;\n }\n }\n}\n\n\n\n/**\n * Page content\n */\n.page-content {\n padding: $spacing-unit 0;\n flex: 1 0 auto;\n}\n\n.page-heading {\n @include relative-font-size(2);\n}\n\n.post-list-heading {\n @include relative-font-size(1.75);\n}\n\n.post-list {\n margin-left: 0;\n list-style: none;\n\n > li {\n margin-bottom: $spacing-unit;\n }\n}\n\n.post-meta {\n font-size: $small-font-size;\n color: $brand-color;\n}\n\n.post-link {\n display: block;\n @include relative-font-size(1.5);\n}\n\n\n\n/**\n * Posts\n */\n.post-header {\n margin-bottom: $spacing-unit;\n}\n\n.post-title,\n.post-content h1 {\n @include relative-font-size(2.625);\n letter-spacing: -1px;\n line-height: 1.15;\n\n @media screen and (min-width: $on-large) {\n @include relative-font-size(2.625);\n }\n}\n\n.post-content {\n margin-bottom: $spacing-unit;\n\n h1, h2, h3, h4, h5, h6 { margin-top: $spacing-unit }\n\n h2 {\n @include relative-font-size(1.75);\n\n @media screen and (min-width: $on-large) {\n @include relative-font-size(2);\n }\n }\n\n h3 {\n @include relative-font-size(1.375);\n\n @media screen and (min-width: $on-large) {\n @include relative-font-size(1.625);\n }\n }\n\n h4 {\n @include relative-font-size(1.25);\n }\n\n h5 {\n @include relative-font-size(1.125);\n }\n h6 {\n @include relative-font-size(1.0625);\n }\n}\n\n\n.social-media-list {\n display: table;\n margin: 0 auto;\n li {\n float: left;\n margin: 5px 10px 5px 0;\n &:last-of-type { margin-right: 0 }\n a {\n display: block;\n padding: 10px 12px;\n border: 1px solid $border-color-01;\n &:hover { border-color: $border-color-02 }\n }\n }\n}\n\n\n\n/**\n * Pagination navbar\n */\n.pagination {\n margin-bottom: $spacing-unit;\n @extend .social-media-list;\n li {\n a, div {\n min-width: 41px;\n text-align: center;\n box-sizing: border-box;\n }\n div {\n display: block;\n padding: $spacing-unit * .25;\n border: 1px solid transparent;\n\n &.pager-edge {\n color: $border-color-01;\n border: 1px dashed;\n }\n }\n }\n}\n\n\n\n/**\n * Grid helpers\n */\n@media screen and (min-width: $on-large) {\n .one-half {\n width: calc(50% - (#{$spacing-unit} / 2));\n }\n}\n"],"file":"style.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["../../_sass/minima/custom-styles.scss","../../_sass/minima/skins/auto.scss","../../_sass/minima/_base.scss","../../_sass/minima/initialize.scss","../../_sass/minima/_layout.scss"],"names":[],"mappings":"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EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAIF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;AAAA;AAAA;AAIA;EACE;;AAEA;EAHF;IAII;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;;AAGF;EApBF;IAqBI;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;;;AAKJ;EACE;;;AAGF;EACE;;;AAGF;AAAA;AAAA;AAIA;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA","sourcesContent":["/**\n * default.html\n */\n\n.site-header {\n position: sticky;\n top: 0;\n background-color: rgba(255, 255, 255, 1);\n z-index: 1;\n transition: top 0.5s;\n}\n\n.hide-site-header {\n top: -100%;\n}\n\n\n\n/**\n * about.md\n */\n\n@import \"https://cdn.jsdelivr.net/npm/remixicon@2.5.0/fonts/remixicon.css\"\n;\n\n.Icon-link {\n transition: 0.3s;\n text-decoration: none;\n font-size: 7.5vmin;\n color: black;\n margin-right: 2vmin;\n display: inline-block;\n}\n\n.Icon-link:visited {\n text-decoration: none;\n color: black;\n}\n\n.Icon-link:hover {\n color: DodgerBlue;\n text-decoration: underline;\n transform: scale(1.2);\n transition: 0.3s;\n}\n\n.Info {\n display: flex;\n align-items: center;\n}\n\n.Text-block {\n flex-grow: 1;\n text-align: center;\n}\n\n.Img-block {\n margin: 2.5vmin;\n}\n\n.Avatar {\n border-radius: 2vmin;\n width: 30vmin;\n height: 30vmin;\n}\n\n\n\n/**\n * archive.md\n */\n\n@import \"https://cdn.jsdelivr.net/npm/remixicon@2.5.0/fonts/remixicon.css\"\n;\n\n.Option-width {\n width: 100%;\n text-decoration: none;\n}\n\n.Group-Container-Full-Display {\n display: flex;\n justify-content: space-around;\n flex-direction: row;\n flex-wrap: wrap;\n}\n\n.Group-Container-Scrolling-Display {\n display: flex;\n flex-direction: row;\n overflow: auto;\n}\n\n.Single-Container {\n position: relative;\n width: 170px;\n min-width: 170px;\n margin: 11px;\n height: 100%;\n text-align: center;\n cursor: pointer;\n display: flex;\n align-items: center;\n}\n\n.ImgBorder {\n transition: 0.3s;\n display: inline-block;\n width: 100%;\n height: 100%;\n border: 4px solid;\n border-color: black;\n}\n\n\n.Single-Container:hover .ImgBorder {\n border-color: DodgerBlue;\n transform: scale(1.1);\n transition: 0.3s;\n}\n\n.ImgOpacity {\n opacity: 1;\n width: 100%;\n transition: 0.3s;\n vertical-align: top;\n}\n\n.Single-Container:hover .ImgOpacity {\n opacity: 0.15;\n transition: 0.3s;\n}\n\n.Text {\n color: black;\n font-size: 20px;\n text-decoration: none;\n opacity: 0;\n transition: 0.3s;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 75%;\n justify-content: center;\n}\n\n.Single-Container:hover .Text {\n opacity: 1;\n color: black;\n text-decoration: none;\n}\n\n.Text:visited {\n text-decoration: none;\n color: black;\n}\n\n.Selection {\n color: black;\n font-size: 20px;\n text-decoration: none;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 75%;\n height: 100%;\n display: none;\n opacity: 0;\n transition: 0.3s;\n flex-direction: column;\n justify-content: space-around;\n align-items: center;\n flex-wrap: wrap;\n}\n\n.Single-Container:hover .Selection {\n opacity: 1;\n transition: 0.3s;\n}\n\n.Option {\n position: relative;\n border: black solid 3px;\n padding: 3%;\n transition: 0.3s;\n color: black;\n text-decoration: none;\n width: auto;\n}\n\n.Option:hover {\n border-color: DodgerBlue;\n transform: scale(1.1);\n transition: 0.3s;\n text-decoration: underline;\n color: black;\n}\n\n/**\n * default.html\n */\n\n.section-nav {\n display: none;\n\n @media screen and (min-width: $on-medium) {\n display: block;\n text-align: left;\n background-color: #fff;\n margin: 5px 0;\n padding: 10px 30px;\n width: 145px;\n max-height: calc(100vh - 180px);\n overflow: auto;\n white-space: nowrap;\n border: 1px solid #e8e8e8;\n border-radius: 3px;\n position: fixed;\n left: 25px;\n top: 90px;\n }\n\n @media screen and (min-width: calc($on-large + 90px)) {\n display: block;\n text-align: left;\n background-color: #fff;\n margin: 5px 0;\n padding: 10px 30px;\n width: 205px;\n max-height: calc(100vh - 180px);\n overflow: auto;\n white-space: nowrap;\n border: 1px solid #e8e8e8;\n border-radius: 3px;\n position: fixed;\n left: calc((100vw - 1455px) /2);\n top: 90px;\n }\n\n}\n\n.hide-and-display {\n visibility: hidden;\n}\n\n.hide-and-display-trigger:hover .hide-and-display {\n visibility: visible;\n}\n\n/**\n * home.html\n */\n\n.post-info::after {\n content: \"\";\n display: table;\n clear: both;\n}\n\n.post-thumbnail img {\n margin-left: 5px;\n margin-right: 15px;\n float: left;\n width: 200px;\n height: auto;\n border-radius: 10px;\n}","@charset \"utf-8\";\n\n// Default color scheme settings\n// These are overridden in classic.css and dark.scss\n\n$color-scheme-auto: true !default;\n$color-scheme-dark: false !default;\n\n\n// Light mode\n// ----------\n\n$lm-brand-color: #828282 !default;\n$lm-brand-color-light: lighten($lm-brand-color, 40%) !default;\n$lm-brand-color-dark: darken($lm-brand-color, 25%) !default;\n\n$lm-site-title-color: $lm-brand-color-dark !default;\n\n$lm-text-color: #111111 !default;\n$lm-background-color: #fdfdfd !default;\n$lm-code-background-color: #eeeeff !default;\n\n$lm-link-base-color: #2a7ae2 !default;\n$lm-link-visited-color: darken($lm-link-base-color, 15%) !default;\n$lm-link-hover-color: $lm-text-color !default;\n\n$lm-border-color-01: $lm-brand-color-light !default;\n$lm-border-color-02: lighten($lm-brand-color, 35%) !default;\n$lm-border-color-03: $lm-brand-color-dark !default;\n\n$lm-table-text-color: lighten($lm-text-color, 18%) !default;\n$lm-table-zebra-color: lighten($lm-brand-color, 46%) !default;\n$lm-table-header-bg-color: lighten($lm-brand-color, 43%) !default;\n$lm-table-header-border: lighten($lm-brand-color, 37%) !default;\n$lm-table-border-color: $lm-border-color-01 !default;\n\n\n// Syntax highlighting styles should be adjusted appropriately for every \"skin\"\n// ----------------------------------------------------------------------------\n\n@mixin lm-highlight {\n .highlight {\n .c { color: #998; font-style: italic } // Comment\n .err { color: #a61717; background-color: #e3d2d2 } // Error\n .k { font-weight: bold } // Keyword\n .o { font-weight: bold } // Operator\n .cm { color: #998; font-style: italic } // Comment.Multiline\n .cp { color: #999; font-weight: bold } // Comment.Preproc\n .c1 { color: #998; font-style: italic } // Comment.Single\n .cs { color: #999; font-weight: bold; font-style: italic } // Comment.Special\n .gd { color: #000; background-color: #fdd } // Generic.Deleted\n .gd .x { color: #000; background-color: #faa } // Generic.Deleted.Specific\n .ge { font-style: italic } // Generic.Emph\n .gr { color: #a00 } // Generic.Error\n .gh { color: #999 } // Generic.Heading\n .gi { color: #000; background-color: #dfd } // Generic.Inserted\n .gi .x { color: #000; background-color: #afa } // Generic.Inserted.Specific\n .go { color: #888 } // Generic.Output\n .gp { color: #555 } // Generic.Prompt\n .gs { font-weight: bold } // Generic.Strong\n .gu { color: #aaa } // Generic.Subheading\n .gt { color: #a00 } // Generic.Traceback\n .kc { font-weight: bold } // Keyword.Constant\n .kd { font-weight: bold } // Keyword.Declaration\n .kp { font-weight: bold } // Keyword.Pseudo\n .kr { font-weight: bold } // Keyword.Reserved\n .kt { color: #458; font-weight: bold } // Keyword.Type\n .m { color: #099 } // Literal.Number\n .s { color: #d14 } // Literal.String\n .na { color: #008080 } // Name.Attribute\n .nb { color: #0086B3 } // Name.Builtin\n .nc { color: #458; font-weight: bold } // Name.Class\n .no { color: #008080 } // Name.Constant\n .ni { color: #800080 } // Name.Entity\n .ne { color: #900; font-weight: bold } // Name.Exception\n .nf { color: #900; font-weight: bold } // Name.Function\n .nn { color: #555 } // Name.Namespace\n .nt { color: #000080 } // Name.Tag\n .nv { color: #008080 } // Name.Variable\n .ow { font-weight: bold } // Operator.Word\n .w { color: #bbb } // Text.Whitespace\n .mf { color: #099 } // Literal.Number.Float\n .mh { color: #099 } // Literal.Number.Hex\n .mi { color: #099 } // Literal.Number.Integer\n .mo { color: #099 } // Literal.Number.Oct\n .sb { color: #d14 } // Literal.String.Backtick\n .sc { color: #d14 } // Literal.String.Char\n .sd { color: #d14 } // Literal.String.Doc\n .s2 { color: #d14 } // Literal.String.Double\n .se { color: #d14 } // Literal.String.Escape\n .sh { color: #d14 } // Literal.String.Heredoc\n .si { color: #d14 } // Literal.String.Interpol\n .sx { color: #d14 } // Literal.String.Other\n .sr { color: #009926 } // Literal.String.Regex\n .s1 { color: #d14 } // Literal.String.Single\n .ss { color: #990073 } // Literal.String.Symbol\n .bp { color: #999 } // Name.Builtin.Pseudo\n .vc { color: #008080 } // Name.Variable.Class\n .vg { color: #008080 } // Name.Variable.Global\n .vi { color: #008080 } // Name.Variable.Instance\n .il { color: #099 } // Literal.Number.Integer.Long\n }\n}\n\n\n// Dark mode\n// ---------\n\n$dm-brand-color: #999999 !default;\n$dm-brand-color-light: lighten($dm-brand-color, 5%) !default;\n$dm-brand-color-dark: darken($dm-brand-color, 35%) !default;\n\n$dm-site-title-color: $dm-brand-color-light !default;\n\n$dm-text-color: #bbbbbb !default;\n$dm-background-color: #181818 !default;\n$dm-code-background-color: #212121 !default;\n\n$dm-link-base-color: #79b8ff !default;\n$dm-link-visited-color: $dm-link-base-color !default;\n$dm-link-hover-color: $dm-text-color !default;\n\n$dm-border-color-01: $dm-brand-color-dark !default;\n$dm-border-color-02: $dm-brand-color-light !default;\n$dm-border-color-03: $dm-brand-color !default;\n\n$dm-table-text-color: $dm-text-color !default;\n$dm-table-zebra-color: lighten($dm-background-color, 4%) !default;\n$dm-table-header-bg-color: lighten($dm-background-color, 10%) !default;\n$dm-table-header-border: lighten($dm-background-color, 21%) !default;\n$dm-table-border-color: $dm-border-color-01 !default;\n\n\n// Syntax highlighting styles should be adjusted appropriately for every \"skin\"\n// List of tokens: https://github.com/rouge-ruby/rouge/wiki/List-of-tokens\n// Some colors come from Material Theme Darker:\n// https://github.com/material-theme/vsc-material-theme/blob/master/scripts/generator/settings/specific/darker-hc.ts\n// https://github.com/material-theme/vsc-material-theme/blob/master/scripts/generator/color-set.ts\n// ----------------------------------------------------------------------------\n\n@mixin dm-highlight {\n .highlight {\n .c { color: #545454; font-style: italic } // Comment\n .err { color: #f07178; background-color: #e3d2d2 } // Error\n .k { color: #89DDFF; font-weight: bold } // Keyword\n .o { font-weight: bold } // Operator\n .cm { color: #545454; font-style: italic } // Comment.Multiline\n .cp { color: #545454; font-weight: bold } // Comment.Preproc\n .c1 { color: #545454; font-style: italic } // Comment.Single\n .cs { color: #545454; font-weight: bold; font-style: italic } // Comment.Special\n .gd { color: #000; background-color: #fdd } // Generic.Deleted\n .gd .x { color: #000; background-color: #faa } // Generic.Deleted.Specific\n .ge { font-style: italic } // Generic.Emph\n .gr { color: #f07178 } // Generic.Error\n .gh { color: #999 } // Generic.Heading\n .gi { color: #000; background-color: #dfd } // Generic.Inserted\n .gi .x { color: #000; background-color: #afa } // Generic.Inserted.Specific\n .go { color: #888 } // Generic.Output\n .gp { color: #555 } // Generic.Prompt\n .gs { font-weight: bold } // Generic.Strong\n .gu { color: #aaa } // Generic.Subheading\n .gt { color: #f07178 } // Generic.Traceback\n .kc { font-weight: bold } // Keyword.Constant\n .kd { font-weight: bold } // Keyword.Declaration\n .kp { font-weight: bold } // Keyword.Pseudo\n .kr { font-weight: bold } // Keyword.Reserved\n .kt { color: #FFCB6B; font-weight: bold } // Keyword.Type\n .m { color: #F78C6C } // Literal.Number\n .s { color: #C3E88D } // Literal.String\n .na { color: #008080 } // Name.Attribute\n .nb { color: #EEFFFF } // Name.Builtin\n .nc { color: #FFCB6B; font-weight: bold } // Name.Class\n .no { color: #008080 } // Name.Constant\n .ni { color: #800080 } // Name.Entity\n .ne { color: #900; font-weight: bold } // Name.Exception\n .nf { color: #82AAFF; font-weight: bold } // Name.Function\n .nn { color: #555 } // Name.Namespace\n .nt { color: #FFCB6B } // Name.Tag\n .nv { color: #EEFFFF } // Name.Variable\n .ow { font-weight: bold } // Operator.Word\n .w { color: #EEFFFF } // Text.Whitespace\n .mf { color: #F78C6C } // Literal.Number.Float\n .mh { color: #F78C6C } // Literal.Number.Hex\n .mi { color: #F78C6C } // Literal.Number.Integer\n .mo { color: #F78C6C } // Literal.Number.Oct\n .sb { color: #C3E88D } // Literal.String.Backtick\n .sc { color: #C3E88D } // Literal.String.Char\n .sd { color: #C3E88D } // Literal.String.Doc\n .s2 { color: #C3E88D } // Literal.String.Double\n .se { color: #EEFFFF } // Literal.String.Escape\n .sh { color: #C3E88D } // Literal.String.Heredoc\n .si { color: #C3E88D } // Literal.String.Interpol\n .sx { color: #C3E88D } // Literal.String.Other\n .sr { color: #C3E88D } // Literal.String.Regex\n .s1 { color: #C3E88D } // Literal.String.Single\n .ss { color: #C3E88D } // Literal.String.Symbol\n .bp { color: #999 } // Name.Builtin.Pseudo\n .vc { color: #FFCB6B } // Name.Variable.Class\n .vg { color: #EEFFFF } // Name.Variable.Global\n .vi { color: #EEFFFF } // Name.Variable.Instance\n .il { color: #F78C6C } // Literal.Number.Integer.Long\n }\n}\n\n\n// Mode selection\n// --------------\n\n\n// Classic skin (always light mode)\n// Assign outside of the if construct to establish global variable scope\n\n$brand-color: $lm-brand-color;\n$brand-color-light: $lm-brand-color-light;\n$brand-color-dark: $lm-brand-color-dark;\n\n$site-title-color: $lm-site-title-color;\n\n$text-color: $lm-text-color;\n$background-color: $lm-background-color;\n$code-background-color: $lm-code-background-color;\n\n$link-base-color: $lm-link-base-color;\n$link-visited-color: $lm-link-visited-color;\n$link-hover-color: $lm-link-hover-color;\n\n$border-color-01: $lm-border-color-01;\n$border-color-02: $lm-border-color-02;\n$border-color-03: $lm-border-color-03;\n\n$table-text-color: $lm-table-text-color;\n$table-zebra-color: $lm-table-zebra-color;\n$table-header-bg-color: $lm-table-header-bg-color;\n$table-header-border: $lm-table-header-border;\n$table-border-color: $lm-table-border-color;\n\n\n@if $color-scheme-auto {\n\n // Auto mode\n\n :root {\n --minima-brand-color: #{$lm-brand-color};\n --minima-brand-color-light: #{$lm-brand-color-light};\n --minima-brand-color-dark: #{$lm-brand-color-dark};\n\n --minima-site-title-color: #{$lm-site-title-color};\n\n --minima-text-color: #{$lm-text-color};\n --minima-background-color: #{$lm-background-color};\n --minima-code-background-color: #{$lm-code-background-color};\n\n --minima-link-base-color: #{$lm-link-base-color};\n --minima-link-visited-color: #{$lm-link-visited-color};\n --minima-link-hover-color: #{$lm-link-hover-color};\n\n --minima-border-color-01: #{$lm-border-color-01};\n --minima-border-color-02: #{$lm-border-color-02};\n --minima-border-color-03: #{$lm-border-color-03};\n\n --minima-table-text-color: #{$lm-table-text-color};\n --minima-table-zebra-color: #{$lm-table-zebra-color};\n --minima-table-header-bg-color: #{$lm-table-header-bg-color};\n --minima-table-header-border: #{$lm-table-header-border};\n --minima-table-border-color: #{$lm-table-border-color};\n }\n\n @include lm-highlight;\n\n @media (prefers-color-scheme: dark) {\n :root {\n --minima-brand-color: #{$dm-brand-color};\n --minima-brand-color-light: #{$dm-brand-color-light};\n --minima-brand-color-dark: #{$dm-brand-color-dark};\n\n --minima-site-title-color: #{$dm-site-title-color};\n\n --minima-text-color: #{$dm-text-color};\n --minima-background-color: #{$dm-background-color};\n --minima-code-background-color: #{$dm-code-background-color};\n\n --minima-link-base-color: #{$dm-link-base-color};\n --minima-link-visited-color: #{$dm-link-visited-color};\n --minima-link-hover-color: #{$dm-link-hover-color};\n\n --minima-border-color-01: #{$dm-border-color-01};\n --minima-border-color-02: #{$dm-border-color-02};\n --minima-border-color-03: #{$dm-border-color-03};\n\n --minima-table-text-color: #{$dm-table-text-color};\n --minima-table-zebra-color: #{$dm-table-zebra-color};\n --minima-table-header-bg-color: #{$dm-table-header-bg-color};\n --minima-table-header-border: #{$dm-table-header-border};\n --minima-table-border-color: #{$dm-table-border-color};\n }\n\n @include dm-highlight;\n }\n\n $brand-color: var(--minima-brand-color);\n $brand-color-light: var(--minima-brand-color-light);\n $brand-color-dark: var(--minima-brand-color-dark);\n\n $site-title-color: var(--minima-site-title-color);\n\n $text-color: var(--minima-text-color);\n $background-color: var(--minima-background-color);\n $code-background-color: var(--minima-code-background-color);\n\n $link-base-color: var(--minima-link-base-color);\n $link-visited-color: var(--minima-link-visited-color);\n $link-hover-color: var(--minima-link-hover-color);\n\n $border-color-01: var(--minima-border-color-01);\n $border-color-02: var(--minima-border-color-02);\n $border-color-03: var(--minima-border-color-03);\n\n $table-text-color: var(--minima-table-text-color);\n $table-zebra-color: var(--minima-table-zebra-color);\n $table-header-bg-color: var(--minima-table-header-bg-color);\n $table-header-border: var(--minima-table-header-border);\n $table-border-color: var(--minima-table-border-color);\n\n\n} @else if $color-scheme-dark {\n\n // Dark skin (always dark mode)\n\n $brand-color: $dm-brand-color;\n $brand-color-light: $dm-brand-color-light;\n $brand-color-dark: $dm-brand-color-dark;\n\n $site-title-color: $dm-site-title-color;\n\n $text-color: $dm-text-color;\n $background-color: $dm-background-color;\n $code-background-color: $dm-code-background-color;\n\n $link-base-color: $dm-link-base-color;\n $link-visited-color: $dm-link-visited-color;\n $link-hover-color: $dm-link-hover-color;\n\n $border-color-01: $dm-border-color-01;\n $border-color-02: $dm-border-color-02;\n $border-color-03: $dm-border-color-03;\n\n $table-text-color: $dm-table-text-color;\n $table-zebra-color: $dm-table-zebra-color;\n $table-header-bg-color: $dm-table-header-bg-color;\n $table-header-border: $dm-table-header-border;\n $table-border-color: $dm-table-border-color;\n\n @include dm-highlight;\n\n\n} @else {\n\n // Classic skin syntax highlighting\n @include lm-highlight;\n\n}\n","html {\n font-size: $base-font-size;\n}\n\n/**\n * Reset some basic elements\n */\nbody, h1, h2, h3, h4, h5, h6,\np, blockquote, pre, hr,\ndl, dd, ol, ul, figure {\n margin: 0;\n padding: 0;\n\n}\n\n\n\n/**\n * Basic styling\n */\nbody {\n font: $base-font-weight #{$base-font-size}/#{$base-line-height} $base-font-family;\n color: $text-color;\n background-color: $background-color;\n -webkit-text-size-adjust: 100%;\n -webkit-font-feature-settings: \"kern\" 1;\n -moz-font-feature-settings: \"kern\" 1;\n -o-font-feature-settings: \"kern\" 1;\n font-feature-settings: \"kern\" 1;\n font-kerning: normal;\n display: flex;\n min-height: 100vh;\n flex-direction: column;\n overflow-wrap: break-word;\n}\n\n\n\n/**\n * Set `margin-bottom` to maintain vertical rhythm\n */\nh1, h2, h3, h4, h5, h6,\np, blockquote, pre,\nul, ol, dl, figure,\n%vertical-rhythm {\n margin-bottom: $spacing-unit * .5;\n}\n\nhr {\n margin-top: $spacing-unit;\n margin-bottom: $spacing-unit;\n}\n\n/**\n * `main` element\n */\nmain {\n display: block; /* Default value of `display` of `main` element is 'inline' in IE 11. */\n}\n\n\n\n/**\n * Images\n */\nimg {\n max-width: 100%;\n vertical-align: middle;\n}\n\n\n\n/**\n * Figures\n */\nfigure > img {\n display: block;\n}\n\nfigcaption {\n font-size: $small-font-size;\n}\n\n\n\n/**\n * Lists\n */\nul, ol {\n margin-left: $spacing-unit;\n}\n\nli {\n > ul,\n > ol {\n margin-bottom: 0;\n }\n}\n\n\n\n/**\n * Headings\n */\nh1, h2, h3, h4, h5, h6 {\n font-weight: $base-font-weight;\n}\n\n\n\n/**\n * Links\n */\na {\n color: $link-base-color;\n text-decoration: none;\n\n &:visited {\n color: $link-visited-color;\n }\n\n &:hover {\n color: $link-hover-color;\n text-decoration: underline;\n }\n\n .social-media-list &:hover {\n text-decoration: none;\n\n .username {\n text-decoration: underline;\n }\n }\n}\n\n\n/**\n * Blockquotes\n */\nblockquote {\n color: $brand-color;\n border-left: 4px solid $border-color-01;\n padding-left: $spacing-unit * .5;\n @include relative-font-size(1.125);\n font-style: italic;\n\n > :last-child {\n margin-bottom: 0;\n }\n\n i, em {\n font-style: normal;\n }\n}\n\n\n\n/**\n * Code formatting\n */\npre,\ncode {\n font-family: $code-font-family;\n font-size: 0.9375em;\n border: 1px solid $border-color-01;\n border-radius: 3px;\n background-color: $code-background-color;\n}\n\ncode {\n padding: 1px 5px;\n}\n\npre {\n padding: 8px 12px;\n overflow-x: auto;\n\n > code {\n border: 0;\n padding-right: 0;\n padding-left: 0;\n }\n}\n\n.highlight {\n border-radius: 3px;\n background: $code-background-color;\n @extend %vertical-rhythm;\n\n .highlighter-rouge & {\n background: $code-background-color;\n }\n}\n\n\n\n/**\n * Wrapper\n */\n.wrapper {\n max-width: calc(#{$content-width} - 150px - (#{$spacing-unit}));\n margin-right: auto;\n margin-left: auto;\n padding-right: $spacing-unit * .5;\n padding-left: $spacing-unit * .5;\n @extend %clearfix;\n\n @media screen and (min-width: $on-large) {\n max-width: calc(#{$content-width} - (#{$spacing-unit} * 2));\n padding-right: $spacing-unit;\n padding-left: $spacing-unit;\n }\n}\n\n\n\n/**\n * Clearfix\n */\n%clearfix:after {\n content: \"\";\n display: table;\n clear: both;\n}\n\n\n\n/**\n * Icons\n */\n\n.orange {\n color: #f66a0a;\n}\n\n.grey {\n color: #828282;\n}\n\n.svg-icon {\n width: 1.25em;\n height: 1.25em;\n display: inline-block;\n fill: currentColor;\n vertical-align: text-bottom;\n}\n\n\n/**\n * Tables\n */\ntable {\n margin-bottom: $spacing-unit;\n width: 100%;\n text-align: $table-text-align;\n color: $table-text-color;\n border-collapse: collapse;\n border: 1px solid $table-border-color;\n tr {\n &:nth-child(even) {\n background-color: $table-zebra-color;\n }\n }\n th, td {\n padding: ($spacing-unit * 33.3333333333 * .01) ($spacing-unit * .5);\n }\n th {\n background-color: $table-header-bg-color;\n border: 1px solid $table-header-border;\n }\n td {\n border: 1px solid $table-border-color;\n }\n\n @include media-query($on-laptop) {\n display: block;\n overflow-x: auto;\n -webkit-overflow-scrolling: touch;\n -ms-overflow-style: -ms-autohiding-scrollbar;\n }\n}\n","@charset \"utf-8\";\n\n// Define defaults for each variable.\n\n$base-font-family: -apple-system, system-ui, BlinkMacSystemFont, \"Segoe UI\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Apple Color Emoji\", Roboto, Helvetica, Arial, sans-serif !default;\n$code-font-family: \"Menlo\", \"Inconsolata\", \"Consolas\", \"Roboto Mono\", \"Ubuntu Mono\", \"Liberation Mono\", \"Courier New\", monospace;\n$base-font-size: 16px !default;\n$base-font-weight: 400 !default;\n$small-font-size: $base-font-size * 0.875 !default;\n$base-line-height: 1.5 !default;\n\n$spacing-unit: 20px !default;\n\n$table-text-align: left !default;\n\n// Width of the content area\n$content-width: 900px !default;\n\n$on-palm: 1240px !default;\n$on-laptop: 1366px !default;\n\n$on-medium: $on-palm !default;\n$on-large: $on-laptop !default;\n\n// Use media queries like this:\n// @include media-query($on-palm) {\n// .wrapper {\n// padding-right: $spacing-unit / 2;\n// padding-left: $spacing-unit / 2;\n// }\n// }\n// Notice the following mixin uses max-width, in a deprecated, desktop-first\n// approach, whereas media queries used elsewhere now use min-width.\n@mixin media-query($device) {\n @media screen and (max-width: $device) {\n @content;\n }\n}\n\n@mixin relative-font-size($ratio) {\n font-size: #{$ratio}rem;\n}\n\n// Import pre-styling-overrides hook and style-partials.\n@import\n \"minima/custom-variables\", // Hook to override predefined variables.\n \"minima/base\", // Defines element resets.\n \"minima/layout\", // Defines structure and style based on CSS selectors.\n \"minima/custom-styles\" // Hook to override existing styles.\n;\n","/**\n * Site header\n */\n.site-header {\n border-top: 5px solid $border-color-03;\n border-bottom: 1px solid $border-color-01;\n min-height: $spacing-unit * 1.865;\n line-height: $base-line-height * $base-font-size * 2.25;\n\n // Positioning context for the mobile navigation icon\n position: relative;\n}\n\n.site-title {\n @include relative-font-size(1.625);\n font-weight: 300;\n letter-spacing: -1px;\n margin-bottom: 0;\n float: left;\n\n @include media-query($on-palm) {\n padding-right: 45px;\n }\n\n &,\n &:visited {\n color: $site-title-color;\n }\n}\n\n.site-nav {\n position: absolute;\n top: 9px;\n right: $spacing-unit * .5;\n background-color: $background-color;\n border: 1px solid $border-color-01;\n border-radius: 5px;\n text-align: right;\n\n .nav-trigger {\n display: none;\n }\n\n .menu-icon {\n float: right;\n width: 36px;\n height: 26px;\n line-height: 0;\n padding-top: 10px;\n text-align: center;\n\n > svg path {\n fill: $border-color-03;\n }\n }\n\n label[for=\"nav-trigger\"] {\n display: block;\n float: right;\n width: 36px;\n height: 36px;\n z-index: 2;\n cursor: pointer;\n }\n\n input ~ .trigger {\n clear: both;\n display: none;\n }\n\n input:checked ~ .trigger {\n display: block;\n padding-bottom: 5px;\n }\n\n .page-link {\n color: $text-color;\n line-height: $base-line-height;\n display: block;\n padding: 5px 10px;\n\n // Gaps between nav items, but not on the last one\n &:not(:last-child) {\n margin-right: 0;\n }\n margin-left: 20px;\n }\n\n @media screen and (min-width: $on-medium) {\n position: static;\n float: right;\n border: none;\n background-color: inherit;\n\n label[for=\"nav-trigger\"] {\n display: none;\n }\n\n .menu-icon {\n display: none;\n }\n\n input ~ .trigger {\n display: block;\n }\n\n .page-link {\n display: inline;\n padding: 0;\n\n &:not(:last-child) {\n margin-right: 20px;\n }\n margin-left: auto;\n }\n }\n}\n\n\n\n/**\n * Site footer\n */\n.site-footer {\n border-top: 1px solid $border-color-01;\n padding: $spacing-unit 0;\n}\n\n.footer-heading {\n @include relative-font-size(1.125);\n margin-bottom: $spacing-unit * .5;\n}\n\n.feed-subscribe .svg-icon {\n padding: 5px 5px 2px 0\n}\n\n.contact-list,\n.social-media-list {\n list-style: none;\n margin-left: 0;\n}\n\n.footer-col-wrapper,\n.social-links {\n @include relative-font-size(0.9375);\n color: $brand-color;\n}\n\n.footer-col {\n margin-bottom: $spacing-unit * .5;\n}\n\n.footer-col-1,\n.footer-col-2 {\n width: calc(50% - (#{$spacing-unit} / 2));\n}\n\n.footer-col-3 {\n width: calc(100% - (#{$spacing-unit} / 2));\n}\n\n@media screen and (min-width: $on-large) {\n .footer-col-1 {\n width: calc(35% - (#{$spacing-unit} / 2));\n }\n\n .footer-col-2 {\n width: calc(20% - (#{$spacing-unit} / 2));\n }\n\n .footer-col-3 {\n width: calc(45% - (#{$spacing-unit} / 2));\n }\n}\n\n@media screen and (min-width: $on-medium) {\n .footer-col-wrapper {\n display: flex\n }\n\n .footer-col {\n width: calc(100% - (#{$spacing-unit} / 2));\n padding: 0 ($spacing-unit * .5);\n\n &:first-child {\n padding-right: $spacing-unit * .5;\n padding-left: 0;\n }\n\n &:last-child {\n padding-right: 0;\n padding-left: $spacing-unit * .5;\n }\n }\n}\n\n\n\n/**\n * Page content\n */\n.page-content {\n padding: $spacing-unit 0;\n flex: 1 0 auto;\n}\n\n.page-heading {\n @include relative-font-size(2);\n}\n\n.post-list-heading {\n @include relative-font-size(1.75);\n}\n\n.post-list {\n margin-left: 0;\n list-style: none;\n\n > li {\n margin-bottom: $spacing-unit;\n }\n}\n\n.post-meta {\n font-size: $small-font-size;\n color: $brand-color;\n}\n\n.post-link {\n display: block;\n @include relative-font-size(1.5);\n}\n\n\n\n/**\n * Posts\n */\n.post-header {\n margin-bottom: $spacing-unit;\n}\n\n.post-title,\n.post-content h1 {\n @include relative-font-size(2.625);\n letter-spacing: -1px;\n line-height: 1.15;\n\n @media screen and (min-width: $on-large) {\n @include relative-font-size(2.625);\n }\n}\n\n.post-content {\n margin-bottom: $spacing-unit;\n\n h1, h2, h3, h4, h5, h6 { margin-top: $spacing-unit }\n\n h2 {\n @include relative-font-size(1.75);\n\n @media screen and (min-width: $on-large) {\n @include relative-font-size(2);\n }\n }\n\n h3 {\n @include relative-font-size(1.375);\n\n @media screen and (min-width: $on-large) {\n @include relative-font-size(1.625);\n }\n }\n\n h4 {\n @include relative-font-size(1.25);\n }\n\n h5 {\n @include relative-font-size(1.125);\n }\n h6 {\n @include relative-font-size(1.0625);\n }\n}\n\n\n.social-media-list {\n display: table;\n margin: 0 auto;\n li {\n float: left;\n margin: 5px 10px 5px 0;\n &:last-of-type { margin-right: 0 }\n a {\n display: block;\n padding: 10px 12px;\n border: 1px solid $border-color-01;\n &:hover { border-color: $border-color-02 }\n }\n }\n}\n\n\n\n/**\n * Pagination navbar\n */\n.pagination {\n margin-bottom: $spacing-unit;\n @extend .social-media-list;\n li {\n a, div {\n min-width: 41px;\n text-align: center;\n box-sizing: border-box;\n }\n div {\n display: block;\n padding: $spacing-unit * .25;\n border: 1px solid transparent;\n\n &.pager-edge {\n color: $border-color-01;\n border: 1px dashed;\n }\n }\n }\n}\n\n\n\n/**\n * Grid helpers\n */\n@media screen and (min-width: $on-large) {\n .one-half {\n width: calc(50% - (#{$spacing-unit} / 2));\n }\n}\n"],"file":"style.css"} \ No newline at end of file diff --git a/_site/assets/js/custom-styles.js b/_site/assets/js/custom-styles.js index 86b5a6e..1d16b69 100644 --- a/_site/assets/js/custom-styles.js +++ b/_site/assets/js/custom-styles.js @@ -3,23 +3,21 @@ */ // Toggle Display (none <-> block) + var x = document.getElementsByClassName("Text"); var y = document.getElementsByClassName("Selection"); var z = document.getElementsByClassName("Single-Container"); -for (var i = 0, len = x.length; i < len; i++) -{ - (function(index){ - z[i].onclick = function(){ +for (var i = 0, len = x.length; i < len; i++) { + (function (index) { + z[i].onclick = function () { - if (x[index].style.display === "none") - { + if (x[index].style.display === "none") { x[index].style.display = "flex"; y[index].style.display = "none"; } - else - { + else { x[index].style.display = "none"; y[index].style.display = "flex"; } @@ -28,4 +26,40 @@ for (var i = 0, len = x.length; i < len; i++) })(i); -} \ No newline at end of file +} + +/** + * default.md + */ + +// Dynamic visibility for sticky header based on scroll direction + +let lastScrollTop = 0; // This variable will hold the last scroll position +let isTocClicked = false; // Flag to track if a toc-entry link was clicked + +window.addEventListener("scroll", function () { + let currentScroll = window.pageYOffset || document.documentElement.scrollTop; + + if (isTocClicked) { + // If a toc-entry was clicked, hide the site header + document.querySelector('.site-header').classList.add('hide-site-header'); + isTocClicked = false; // Reset the flag + } else { + if (currentScroll > lastScrollTop) { + // Scrolling down + document.querySelector('.site-header').classList.add('hide-site-header'); + } else if (currentScroll < lastScrollTop) { + // Scrolling up + document.querySelector('.site-header').classList.remove('hide-site-header'); + } + } + lastScrollTop = currentScroll <= 0 ? 0 : currentScroll; // For Mobile or negative scrolling +}, false); + +// Modify event listener for toc-entry hyperlinks +document.querySelectorAll('.toc-entry').forEach(function (element) { + element.addEventListener('click', function () { + // Set the flag when a toc-entry is clicked + isTocClicked = true; + }); +}); diff --git a/_site/index.html b/_site/index.html index a50c2e7..1fde025 100644 --- a/_site/index.html +++ b/_site/index.html @@ -1,5 +1,5 @@ - + @@ -27,19 +27,7 @@ - - -
+
-
- -
+
+ +
-
-
+ + - + - + \ No newline at end of file diff --git a/_site/tag/WoW.html b/_site/tag/WoW.html index a5b6963..1d5bbac 100644 --- a/_site/tag/WoW.html +++ b/_site/tag/WoW.html @@ -1,5 +1,5 @@ - + @@ -27,19 +27,7 @@ - - -
+
-
- -
+
+ +

Tag: WoW

  • + Jan 20, 2024 +

    + + My first post + +

    + [ + + + WoW + + + go + + ] + +

    + +
    + Post Thumbnail +
    + Haha! This is my first post. +
  • Nov 28, 2022 -

    +

    How to post posts -

    You could write a brief description here to catch your readers' interests, like this is a post about how to post posts :)
- -
-
- - - - + + [ + + + this-is-a-tag + + + WoW + + + let's + + + go + + ] + +

+ +
+ Post Thumbnail +
+ You could write a brief description here to catch your readers' interests, like this is a post about how to post posts :) +
+ + + + + + \ No newline at end of file diff --git a/_site/tag/go.html b/_site/tag/go.html index 36840da..47bdb11 100644 --- a/_site/tag/go.html +++ b/_site/tag/go.html @@ -1,5 +1,5 @@ - + @@ -27,19 +27,7 @@ - - -
+
-
- -
+
+ +

Tag: go

  • + Jan 20, 2024 +

    + + My first post + +

    + [ + + + WoW + + + go + + ] + +

    + +
    + Post Thumbnail +
    + Haha! This is my first post. +
  • Nov 28, 2022 -

    +

    How to post posts -

    You could write a brief description here to catch your readers' interests, like this is a post about how to post posts :)
- -
-
- - - - + + [ + + + this-is-a-tag + + + WoW + + + let's + + + go + + ] + +

+ +
+ Post Thumbnail +
+ You could write a brief description here to catch your readers' interests, like this is a post about how to post posts :) +
+ + + + + + \ No newline at end of file diff --git a/_site/tag/let's.html b/_site/tag/let's.html index eae28d2..802dc2b 100644 --- a/_site/tag/let's.html +++ b/_site/tag/let's.html @@ -1,5 +1,5 @@ - + @@ -27,19 +27,7 @@ - - -
+
-
- -
+
+ +

Tag: let's

  • Nov 28, 2022 -

    +

    How to post posts -

    You could write a brief description here to catch your readers' interests, like this is a post about how to post posts :)
- -
-
- - - - + + [ + + + this-is-a-tag + + + WoW + + + let's + + + go + + ] + +

+ +
+ Post Thumbnail +
+ You could write a brief description here to catch your readers' interests, like this is a post about how to post posts :) +
+ + + + + + \ No newline at end of file diff --git a/_site/tag/this-is-a-tag.html b/_site/tag/this-is-a-tag.html index 4687262..018c553 100644 --- a/_site/tag/this-is-a-tag.html +++ b/_site/tag/this-is-a-tag.html @@ -1,5 +1,5 @@ - + @@ -27,19 +27,7 @@ - - -
+
-
- -
+
+ +

Tag: this-is-a-tag

  • Nov 28, 2022 -

    +

    How to post posts -

    You could write a brief description here to catch your readers' interests, like this is a post about how to post posts :)
- -
-
- - - - + + [ + + + this-is-a-tag + + + WoW + + + let's + + + go + + ] + +

+ +
+ Post Thumbnail +
+ You could write a brief description here to catch your readers' interests, like this is a post about how to post posts :) +
+ + + + + + \ No newline at end of file diff --git a/_site/tagpage.html b/_site/tagpage.html index 180c47e..aa1100f 100644 --- a/_site/tagpage.html +++ b/_site/tagpage.html @@ -1,5 +1,5 @@ - + @@ -27,19 +27,7 @@ - - -
+
-
- -
+
+ +

Tag

    +
    +
    - - - - + - + \ No newline at end of file