The Twilight theme

Twilight is a mixed derivative of the Modernist , Leap day and Time machine themes. You can preview the theme to see what it looks like .

Usage

To use the Twilight theme:

1. Copy the files from this repository to your repository. Note that these files may be renamed to your existing files and you may not want the existing files to be overwritten, for this reason it is recommended that you back up your files before the operation or open a new repository for this operation.

2. Modify these variables in the A file:

   title: [The title of your site]
   description: [A short description of your site's purpose]
   
   github:
     zip_url: https://[your repository name]/about
     tar_url: https://[your repository name]/indexes
     repository_url: https://[your repository name]/

Customizing

footer

Modify these codes in default.html file:

    <footer>
      <p>© [Year] [Name] &mdash; [Creative Commons licenses]</p>
      <p>Hosted on <a href="https://docs.github.com/en/pages">GitHub Pages</a> &mdash; Theme by <a href="https://github.com/merodei/twilight">Twilight</a></p>
    </footer>

Icons

Modify these codes in default.html file:

        <p class="view"><a href="{{ site.github.repository_url }}">🧭 Back to home page <small>{{ github_name }}</small></a></p>
        <ul>
        {% if site.show_downloads %}
          <li><a href="{{ site.github.zip_url }}">Go To <strong>☕ About</strong></a></li>
          <li><a href="{{ site.github.tar_url }}">Go To <strong>📚 Index</strong></a></li>
        {% endif %}
          <li><a href="{{ site.github.repository_url }}">Back To <strong>🧭 Home</strong></a></li>
        </ul>

And:

      <a href="#top">🔼</a>
      {% if site.show_downloads %}
      <a href="{{ site.github.repository_url }}" class="code">🧭</a>
      <a href="{{ site.github.tar_url }}" class="tar">📚</a>
      <a href="{{ site.github.zip_url }}" class="zip">☕</a>
      {% endif %}

Background

If you would like to change the background:

1. Rename the image you would like to use as the background to background.jpg .

2. Upload and replace the background.jpg files in assets/images/ .

If your image is in PNG format, rename it to background.png and modify this line of code in jekyll-theme-leap-day.scss file:

  background:url('../images/background.jpg') fixed;

Known issues

The buttons on the top banner don't work. This problem also existed in the original theme Time machine for unknown reasons.

Page scrolling is not smooth, or the blurring effect is lost. This theme uses the backdrop-filter CSS property, which is not supported in older browsers and may have performance issues on some devices. This can be mitigated by commenting out or removing all backdrop-filter: blur(10px); from jekyll-theme-leap-day.scss file.

Related projects

The original themes

Modernist

Leap day

Time machine

Code references

Midnight

Cayman

Font sources

Google Fonts

霞鶩文楷 TC

Ysabeau Office

Fira Code

Color references

Encycolorpedia

Human Interface Guidelines