Code Monkey home page Code Monkey logo

leap-day's Introduction

The Leap day theme

.github/workflows/ci.yaml Gem Version

Leap day is a Jekyll theme for GitHub Pages. You can preview the theme to see what it looks like, or even use it today.

Thumbnail of Leap day

Usage

To use the Leap day theme:

  1. Add the following to your site's _config.yml:

    remote_theme: pages-themes/[email protected]
    plugins:
    - jekyll-remote-theme # add this line to the plugins list if you already have one
  2. Optionally, if you'd like to preview your site on your computer, add the following to your site's Gemfile:

    gem "github-pages", group: :jekyll_plugins

Customizing

Configuration variables

Leap day will respect the following variables, if set in your site's _config.yml:

title: [The title of your site]
description: [A short description of your site's purpose]

Additionally, you may choose to set the following optional variables:

show_downloads: ["true" or "false" (unquoted) to indicate whether to provide a download URL]
google_analytics: [Your Google Analytics tracking ID]

Stylesheet

If you'd like to add your own custom styles:

  1. Create a file called /assets/css/style.scss in your site
  2. Add the following content to the top of the file, exactly as shown:
    ---
    ---
    
    @import "{{ site.theme }}";
  3. Add any custom CSS (or Sass, including imports) you'd like immediately after the @import line

Note: If you'd like to change the theme's Sass variables, you must set new values before the @import line in your stylesheet.

Layouts

If you'd like to change the theme's HTML layout:

  1. For some changes such as a custom favicon, you can add custom files in your local _includes folder. The files provided with the theme provide a starting point and are included by the original layout template.
  2. For more extensive changes, copy the original template from the theme's repository
    (Pro-tip: click "raw" to make copying easier)
  3. Create a file called /_layouts/default.html in your site
  4. Paste the default layout content copied in the first step
  5. Customize the layout as you'd like

Customizing Google Analytics code

Google has released several iterations to their Google Analytics code over the years since this theme was first created. If you would like to take advantage of the latest code, paste it into _includes/head-custom-google-analytics.html in your Jekyll site.

Overriding GitHub-generated URLs

Templates often rely on URLs supplied by GitHub such as links to your repository or links to download your project. If you'd like to override one or more default URLs:

  1. Look at the template source to determine the name of the variable. It will be in the form of {{ site.github.zip_url }}.
  2. Specify the URL that you'd like the template to use in your site's _config.yml. For example, if the variable was site.github.url, you'd add the following:
    github:
      zip_url: http://example.com/download.zip
      another_url: another value
  3. When your site is built, Jekyll will use the URL you specified, rather than the default one provided by GitHub.

Note: You must remove the site. prefix, and each variable name (after the github.) should be indent with two space below github:.

For more information, see the Jekyll variables documentation.

Roadmap

See the open issues for a list of proposed features (and known issues).

Project philosophy

The Leap day theme is intended to make it quick and easy for GitHub Pages users to create their first (or 100th) website. The theme should meet the vast majority of users' needs out of the box, erring on the side of simplicity rather than flexibility, and provide users the opportunity to opt-in to additional complexity if they have specific needs or wish to further customize their experience (such as adding custom CSS or modifying the default layout). It should also look great, but that goes without saying.

Contributing

Interested in contributing to Leap day? We'd love your help. Leap day is an open source project, built one contribution at a time by users like you. See the CONTRIBUTING file for instructions on how to contribute.

Previewing the theme locally

If you'd like to preview the theme locally (for example, in the process of proposing a change):

  1. Clone down the theme's repository (git clone https://github.com/pages-themes/leap-day)
  2. cd into the theme's directory
  3. Run script/bootstrap to install the necessary dependencies
  4. Run bundle exec jekyll serve to start the preview server
  5. Visit localhost:4000 in your browser to preview the theme

Running tests

The theme contains a minimal test suite, to ensure a site with the theme would build successfully. To run the tests, simply run script/cibuild. You'll need to run script/bootstrap once before the test script will work.

leap-day's People

Contributors

alexroseb avatar benbalter avatar casperdcl avatar gebeto avatar ibug avatar joebiellik avatar lambdacasserole avatar mattgraham avatar parkr avatar tsusdere avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

leap-day's Issues

Easy way to add a menu bar which links to main pages of site

Hi,

Love the simplicity of the theme, but it would be better for me if there was an easy way to specify 'menu items'. These menu items would be the key pages of the site: eg User Guide, Getting Started, Download and Support. These menu items can be local pages or external links.

Thanks for considering this feature

Accessibility errors found in your template

The user @carlsonsantana validate your site template "https://pages-themes.github.io/leap-day/" and found these accessibility errors:

  • Page https://pages-themes.github.io/leap-day/:
    • Issue 936cf575-1895-4ea8-aac1-59a0f85da420:
      • Type: Error
      • Code: WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
      • Message: This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 3.46:1. Recommendation: change background to #1f1f1f.
      • Selector: html > body > div:nth-child(3) > section > div:nth-child(11) > div > pre > code > span:nth-child(27)
      • Context: <span class="k">end</span>
    • Issue adaeb022-8ebf-4379-aa54-fcb3231f4d96:
      • Type: Error
      • Code: WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
      • Message: This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 2.12:1. Recommendation: change text colour to #fffefd.
      • Selector: html > body > div:nth-child(3) > section > div:nth-child(11) > div > pre > code > span:nth-child(24)
      • Context: <span class="si">}</span>
    • Issue 3f8ff507-7e17-46c1-89d3-ff299168732b:
      • Type: Error
      • Code: WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
      • Message: This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 2.12:1. Recommendation: change text colour to #fffefd.
      • Selector: html > body > div:nth-child(3) > section > div:nth-child(11) > div > pre > code > span:nth-child(22)
      • Context: <span class="si">#{</span>
    • Issue e892a991-27b2-4d71-83b9-a429a28fe8f1:
      • Type: Error
      • Code: WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
      • Message: This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 3.46:1. Recommendation: change background to #1f1f1f.
      • Selector: html > body > div:nth-child(3) > section > div:nth-child(11) > div > pre > code > span:nth-child(9)
      • Context: <span class="k">do</span>
    • Issue 2442c06f-3cce-49a9-aef2-2a948841311e:
      • Type: Error
      • Code: WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
      • Message: This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 3.56:1. Recommendation: change background to #212121.
      • Selector: html > body > div:nth-child(3) > section > div:nth-child(11) > div > pre > code > span:nth-child(1)
      • Context: <span class="c1"># Ruby code with syntax highlig...</span>
    • Issue 02c6d0db-4c08-4051-9636-cf4bb653fc39:
      • Type: Error
      • Code: WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
      • Message: This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 4.29:1. Recommendation: change background to #2f2f2f.
      • Selector: html > body > div:nth-child(3) > section > div:nth-child(10) > div > pre > code > span:nth-child(22)
      • Context: <span class="kc">true</span>
    • Issue 8efe9ff6-06c9-4ebb-b4df-0bc4cf7d35b3:
      • Type: Error
      • Code: WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
      • Message: This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 3.46:1. Recommendation: change background to #1f1f1f.
      • Selector: html > body > div:nth-child(3) > section > div:nth-child(10) > div > pre > code > span:nth-child(21)
      • Context: <span class="k">return</span>
    • Issue c6210235-8757-4c73-b44e-33f4a01a47df:
      • Type: Error
      • Code: WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
      • Message: This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 4.29:1. Recommendation: change background to #2f2f2f.
      • Selector: html > body > div:nth-child(3) > section > div:nth-child(10) > div > pre > code > span:nth-child(5)
      • Context: <span class="kd">function</span>
    • Issue 17e8cf1c-bb18-487c-8441-7ca6a30ef95d:
      • Type: Error
      • Code: WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
      • Message: This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 4.29:1. Recommendation: change background to #2f2f2f.
      • Selector: html > body > div:nth-child(3) > section > div:nth-child(10) > div > pre > code > span:nth-child(2)
      • Context: <span class="kd">var</span>
    • Issue d979551f-6d75-4cdc-95d6-de4c081b9a61:
      • Type: Error
      • Code: WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
      • Message: This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 3.56:1. Recommendation: change background to #212121.
      • Selector: html > body > div:nth-child(3) > section > div:nth-child(10) > div > pre > code > span:nth-child(1)
      • Context: <span class="c1">// Javascript code with syntax ...</span>
    • Issue 0395965e-2b08-459c-bc93-c83b7544f33f:
      • Type: Error
      • Code: WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
      • Message: This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 3.09:1. Recommendation: change text colour to #157bae.
      • Selector: html > body > div:nth-child(3) > section > p:nth-child(2) > a
      • Context: <a href="./another-page.html">Link to another page</a>
    • Issue 18e76311-cae3-4b06-9b1b-10264b1c9b5e:
      • Type: Error
      • Code: WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
      • Message: This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 2.54:1. Recommendation: change text colour to #705800.
      • Selector: #banner > div > span
      • Context: <span>Downloads:</span>

You can check these accessibility errors using pa11y.
You can view the full validation results in our website.

Unknown tag 'seo'

default.html

<!doctype html>
<html lang="{{ site.lang | default: " en-US" }}">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="chrome=1">
    
    {% seo %}
Regenerating: 1 file(s) changed at 2017-10-18 13:05:22   Liquid Exception: Liquid syntax error (line 7): Unknown tag 'seo' in /_layouts/default.html
...error:
             Error: Liquid syntax error (line 7): Unknown tag 'seo'
             Error: Run jekyll build --trace for more information.

I don't see %seo% declaration anywhere in the code.

Table of Content Should Use Header "id"s If Possible

During the table of content generation, the current implementation would use the content of the header, transform it a little bit, and then use the transformed as the id of the header and the ref of the table of content entries.

For non-ASCII headers that have custom ids, this approach proves problematic, as no ID will be generated from the non-ASCII header, resulting in a broken table of content.

# 注意事项 {#notes}

To fix this, I think the ID of headers should be used if they are available, and we only fall back to header content otherwise.

Left menu issues.

I am trying to use this theme. It is a very nice template. But am experiencing a few issues with the left menu. Appreciate your kind advice on how to over my issues.

Below is a picture of the issue:

  1. The number of headers I have used seems to exceed the length of a page. In such a situation, I cannot see my headers after 5. Conclusions. The left menu cannot be scrolled up or down either. How to make it scrollable? Presently when I roll my mouse wheel, the text in the white zone gets scrolled regardless of my mouse pointer position. I think when the mouse pointer is within the left column, the mouse wheel should scroll the left menu, else it should scroll the main text region.
  2. Information on Project maintained by and Hosted on GitHub-Pages - Theme appears to be overlapping with my headers in the left menu. How do I prevent this overlap? I was expecting these info to appear after my headings.
  3. How do I make the texts in the left menu align left to be beneath the word Singapore. Presently, they are aligned right by default.

image

Octocat icon scaling issue on some screens

Fantastic theme, minimalist, stylish, just exactly what I was looking for. The Octocat icon at #banner > #logo doesn't look too great on my screen, however (scales poorly, blurred, pixelated):

octocat_raster

This could be fixed by recreating this file an SVG, rather than a PNG, and making the associated change in jekyll-theme-leap-day.scss. This would break compatibility with browsers that don't support SVG rendering, but apparently supported browsers are at close to 100% share anyway (97%). Planning on submitting a PR soon, I have this resolved locally.

Some comments

The theme looks really nice thanks!

I have some suggestions and questions. As this is the first time I run jekyll I'm not sure how useful they are ;-)

  1. In order to get jekyll working I had to add gem "kramdown-parser-gfm" to Gemfile. Without it I got messages saying kramdown-parser-gfm wasn't installed.

  2. The script/bootstrap script is designed to mess with the user system, instead of just install things in the user home. IMHO this is a very bad idea.

  3. I don't understand why the theme wastes so much user screen for screen sizes over tha 1060px. I also don't understand why so much sizes are hardcoded in pixels. As I said before I know nothing about jekyll, I just wanted to read images from my repo in an easy way when I found I had to use GitHub pages. So them I saw the templates and really liked this one. For my site I'm using:

section
{
 width:85%;
 right: -13%;
}
#banner
{
 right:1%;
 margin-right:0px;
 .fork
 {
  left:15%;
  margin-left:0;
 }
}
.wrapper
{
 width:95%
}
nav
{
 width: 14%;
 left:0;
 margin-left:0;
}
footer
{
 width: 14%;
 left:0;
 margin-left:0;
}

External links to ids missing the target

Just discovered this...

If I open https://pages-themes.github.io/leap-day/ in a browser and click on the "header 2" link on the left hand side everything works as it should, and the page scrolls to a position to show "header 2" just below the banner.

However, if I copy the "header 2" link (https://pages-themes.github.io/leap-day/#header-2) and paste it into a new browser window or tab "header 2" ends up behind the banner somewhere and you have to scroll up to see it.

Happy Christmas!

Andy B.

Content in <details> not rendered correctly

In markdown, we could sometimes have

<details>
<summary>Summary of the details</summary>
- detail 1
- detail 2
- detail 3
</details>

rendered like this:

Summary of the details
  • detail 1
  • detail 2
  • detail 3

However, it's actually rendered and display as plain text... (actually not 100% sure if it's a theme specific problem 😳 )

Thank you!!

Custom CSS does not work anymore

Hi,

a few days ago our custom CSS stopped working. I made a test with a very easy piece of code and it seems it does not read the CSS after the @ import.

image

Full Chinese header causes jekyll-theme-leap-day style to fail.

See the online (github) pages of my site;
https://blocksizeproposals.github.io/README-cn
or the source;
https://github.com/BlocksizeProposals/BlocksizeProposals.github.io/blob/master/README-cn.md

Notice how on the rendered site (github.io) the headers all have an id="" tag, which in the English version is a sanitized version of the latin1 characters, in the Chinese text the id tag is completely empty.

This breaks the headers-to-the-side feature as you can see. Clicking on each of the links
on the left side of the screen when looking at this page;
https://blocksizeproposals.github.io/README-cn

has no effect, as each link ends with '#'.

Please notice how the github rendered page does this correctly, it adds the Chinese characters to the URL and escapes them.
So you get something like;
https://github.com/BlocksizeProposals/BlocksizeProposals.github.io/blob/master/README-cn.md#%E6%BF%80%E6%B4%BB%E6%96%B9%E6%B3%95

liquid error: Unknown tag 'seo' included

jekyll 3.7.2 | Error: Liquid syntax error (dirname/_includes/head.html line 5): Unknown tag 'seo' included

I am new to jekyll and I build a site following the tutorial in https://jekyllrb.com/docs/quickstart/. It by default use a gem-based theme and it work well. And then I wanna try regular theme so I copy the directories needed(_includes, _layout,asset and so on) into my site dir. And I delete the command line of 'gem "minima", "~> 2.0"' in Gemfile and 'theme: minima' in _config.yml as described in https://jekyllrb.com/docs/themes/.
Then I ran jekyll serve but it throws an error above.

Did I miss something after delete the command lines ?

Left-side "pages" wrapper nav ul

Have worked with it a while and cannot find a means to make the href in wrapper nav ul behave like a "real" url.

Is there a way to do that or do I need to find a different way to show links to external pages (back to GitHub Discussions, Issues, etc.)?

Thanks for all your hard work.

Correct W3C validation errors in assets/css/style.css

I found the following W3C validation errors in assets/css/style.css:

ERROR; URI: file://localhost/TextArea; line 690: 
        
                                Value Error :  background (nullcolors.html#propdef-background)
        
                                “linear_gradient(#ffe788,#ffce38)” is not a “background-color” value : 
                            
ERROR; URI: file://localhost/TextArea; line 704: 
        
                                Value Error :  background (nullcolors.html#propdef-background)
        
                                “linear_gradient(#ffe788,#ffe788)” is not a “background-color” value : 
                            
ERROR; URI: file://localhost/TextArea; line 821: 
        
                                Value Error :  padding (nullbox.html#propdef-padding)
        
                                “auto” is not a “padding” value : 
                            

Interested in fixing them? Just clone this repository locally, make the suggested change, and run script/cibuild to confirm it's been fixed. After that, you can submit a pull request to get your change merged. Feel free to drop questions here if you run into any problems.

No way to get to home page

Hi, thanks for the beautiful theme - and it works with mobile devices as well!

Most other themes supports going to the front page with title click, in Leap Day, however, the title is updated depending on the specific page - this causes problem that it seems there is no way to jump back to the front page.

I don't know whether this is intentional or overlooked?

Left side menu is over lapping the footer section

Dear Developers,

I am one of the user of the leap day themes. In one of the GitHub page the left side bar is overlapping the left side footer section. how to rectify this issue.

total heading and sub heading : 24

maybe dummy issue: can't show posts in _post?

I've successfully installed the theme, index.md rendered into _site/index.html and was shown locally perfectly. But if I add new post in _post/ dir that I created, I didn't see the new post show up?
I think the _post/ folder's not parsed when building?

I've used other theme, which can show same post.

Generated header anchors do not keep accented letters

Hello,

I'm using the leap-day GitHub Pages theme in this page (https://dellos7.github.io/constitucion/), directly using the theme from GitHub, and I've realized that generated header anchors do not keep accented letters in the anchor.

For instance:

## Título I

get's parsed as #ttulo-i.

However, when navigating through the repo in GitHub, I will be able to use the headers in achors like this: #título-i. This is, GitHub does preserve accented letters, so if I'm able to use header anchors in GitHub (#título-i) I'm not able to do so in the site using the theme (as it would be #ttulo-i).

I think that they should be parsed at least as GitHub does, because the way they are working currently you can have them only working in the GitHub .md viewer or in the site using the theme, not in both places.

If you shall require any additional information or help, just let me know.

Thank you.

w3 validator error and warnings

Source: https://validator.w3.org/nu/?doc=http%3A%2F%2Fpages-themes.github.io%2Fleap-day

Also,

GitHub Pages fails to build site: File to import not found or unreadable: leap-day

I started getting this error today after pushing changes to my leap-day themed GitHub pages site.

Example error:

  • Commit: ZufengW/ZufengW.github.io@9590e6b
  • Action: Page Build
  • Title: GitHub Pages failed to build your site.
  • Message: Your SCSS file assets/css/style.scss has an error on line 1: File to import not found or unreadable: leap-day. Load path: /tmp/jekyll-remote-theme-20210724-6-1uvld1q/_sass.
  • Impact: Cannot update the GitHub pages site.

The commit in this example is a tiny test change that doesn't change the SCSS file. I've done similar commits in the past that worked. But I started noticing this failure today when I pushed to two of my leap-day themed repos.

Theme doesn't display correctly on Firefox but it does on Chrome

Hi!
I have been using this awesome theme to build my website and it was working fine when I looked at it on Firefox but now it looks like plain text when I opened it.
I thought it was my code but not even your official template displays correctly.
However, if I use Chrome, everything works smoothly.
What could it be the problem?

Thanks.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.