fongandrew / hydeout Goto Github PK

To successfully install this theme with Github pages, I needed to not only add

gem "jekyll-theme-hydeout", "~> 3.4" to Gemfile, but also needed to add

'remote_theme: fongandrew/hydeout' to the _config.yml.

Just adding gem 'github-pages', group: :jekyll_plugins to the Gemfile didn't do it. Also, only having the 'remote_theme' specification in _config.yml didn't do it either.

This might be obvious to more experienced Jekyll users; I know that it would have saved me a lot of time to have had that note there.

I just wanted to reach the maintainers of this repository, because, after three years reading code of different Jekyll Theme contributions related to Jekyll, I think this is one of the most beautiful repositories I've seen so far. Very maintainable, clean and readable code. I always want to achieve code like this for my personal web projects, even being an Android Dev, I can appreciate this repo as a piece of art!

Thank you so much for a great job!

Following the usage / installation instructions on README didn't work, resulting in version errors.

I had to use this in gemfile instead, maybe you missed this doc update in your commit?

gem "jekyll-theme-hydeout", "~> 4.1"

I was running jekyll locally with with docker, and was able to use the hydeout layout. However the new layout fails to build on Github.

The page build failed for the `master` branch with the following error:

The hydeout theme is not currently supported on GitHub Pages. For more information, see https://help.github.com/articles/adding-a-jekyll-theme-to-your-github-pages-site/.

For information on troubleshooting Jekyll see:

  https://help.github.com/articles/troubleshooting-jekyll-builds

If you have any questions you can contact us by replying to this email.

My current _config.yml file is:

remote_theme: fongandrew/hydeout

# Setup
title: 'Jose Antunes'
tagline: 'Code, Food, Travel'
description: 'Everyday learning and sharing'
url: https://joseantunes.tech
baseurl: ''
  # the optional subpath of your site, e.g. "/blog"
  # NB: This applies to all pages in your Jekyll site.
  # If you want to move just the blog index pages but keep
  # other pages at root, see the paginate_path and
  # sidebar_blog_link below.

author:
  name: 'Jose Antunes'
  url: https://linkedin.com/in/antunesjose

paginate: 5

github:
  repo: https://github.com/theholy7

and my Gemfile is:

source 'https://rubygems.org'
gem "github-pages", group: :jekyll_plugins
gem "jekyll-theme-hydeout", "~> 3.4"

I don't know where to search, as I think I have done things correctly. If you could help me, I'd be very thankful.

Best,
Jose

I tried the Google search on demo site, it always show
Your search - xxxxxxx site:fongandrew.github.io/hydeout/hydeout - did not match any documents.
Is this a bug or something won't work with demo?

What I need to do so that post under _post folder appear on the Home page? I also tried locally but couldn't get it working.
Here is the link: https://pchaturv.github.io/Praveen/

I would highly appreciate any response.
Thanks

This is probably documented somewhere but I swear I can't figure this out for the life of me. I'm trying to remove the base url of /hydeout so that everything can just be displayed on the root or '/' but everytime I do the styling is broken and when I go to the root of my url it gives me a 404 error. how do remove the usage of baseurl or not get a 404 on root

markdown:         kramdown
highlighter:      rouge

# Setup
title:            'Welcome'
tagline:          'games n stuff'
description:      '<a href="https://lightfoot.cloud" target="_blank">Lightfoot Cloud</a>, felt cute might delete.'
url:              "https://daniel.lightfoot.cloud"
baseurl:          '/hydeout'
                  # the optional subpath of your site, e.g. "/blog"
                  # NB: This applies to all pages in your Jekyll site.
                  # If you want to move just the blog index pages but keep
                  # other pages at root, see the paginate_path and
                  # sidebar_blog_link below.
contact: [email protected]
author:
  name:           'Daniel Lightfoot'
  url:            https://twitter.com/dadhatdaniel

paginate:         5
paginate_path:    '/page:num'
                    # Or '/blog/page:num' if you want to move your index pages

plugins:
  - jekyll-feed
  - jekyll-gist
  - jekyll-paginate

# Sidebar link settings
sidebar_home_link:  false
# sidebar_blog_link:  '/blog'   # By default, your home page is your blog
                                # page. If you change your paginate_path,
                                # set this to the root of the paginate_path
                                # to enable a separate blog link.```

I get this warning every time I start bundle exec jekyll serve. Everything seems to work fine, but I thought I should probably bring this to your attention.

https://janxspirit42.github.io/

The site is just generating in plain text, I have taken a look at the other issues and added lines to Gemfile and _config.yml to no avail. Any ideas?

https://github.com/JanxSpirit42/janxspirit42.github.io

edit: typo

Hi Andrew. I really like this theme, but we're facing an issue where the menu can't decide what to do when the browser window is at intermediate sizes (close to the top/side menu transition). I noticed it does it on your hydeout theme demo site as well, and so this is a general issue. I took a screen video of it, but can't add to the GitHub issue. I can email the video, or you can just open your demo site. Bring the window width across, and hover the pointer over the site. It occur at a relative broad range of window widths, and so possible something about the menu transition settings in css.

hi, when category has space as "edge case" URL became "edge%20case". how to convert it to "edge-case". i find a "post.rb" plugin but don not know how to use. i also some special char such as "İÜŞÖı" and want to convert "IUSOı" at link. Can you show a way how to do this.

thanks.

I find the default colours hard to read, but I'm not sure if there's an easy way to switch to some other syntax highlighting theme.

I find the font size on the posts to be very large. I tried to make it smaller by editing main.scss to:

---
# Use a comment to ensure Jekyll reads the file to be transformed into CSS later
# only main files contain this front matter, not partials.
---
$code-color: #202020;
$root-font-size: 0.5rem;
@import "hydeout";

but this did not change the font size.

I'm getting the following message:

"Your site is having problems building: A file was included in /_layouts/post.html that is a symlink or does not exist in your _includes directory. For more information, see https://docs.github.com/github/working-with-github-pages/troubleshooting-jekyll-build-errors-for-github-pages-sites#file-is-a-symlink."

But it appears that all of the files referenced in post.html are in my _includes folder...confused!

Hi,

I would like to know whether the theme configuration allows having a short introduction to the article being shown with Read more button which leads to the whole artickle?

Thank you

Steps to reproduce:

1. Run Firefox
2. Open https://fongandrew.github.io/hydeout/
3. Go to menu File | Print Preview

When jemoji is enabled emojis are always displayed on a line by themselves. You can see https://emacsredux.com/blog/2018/09/29/super-save-0-dot-3/ as an example.

This works just fine with some other them - e.g. minima.

Trying to work with the jekyll-archives gem and trying to build a layout. It isn't working currently: nothing is displayed in the archive page. I haven't pushed this to my repo.

My current archive page layout is;

---
layout: default
---
<!DOCTYPE html>
<html lang="en">
<body>
  <header>
    <h1 class="page-title">{{ page.title }}</h1>
  </header>
  <div class="content">
    <h1>Archive of posts from {{ page.date | date: "%Y" }}</h1>

    <ul class="posts-lists">
    {% for post in page.posts %}
      <li>
        <span class="post-meta">{{ post.date | date: "%b %-d, %Y" }}</span>
        <a class="post" href="{{ post.url | prepend: site.baseurl }}">{{ post.title }}</a>
      </li>
    {% endfor %}
    </ul>
  </div>
</html>

The page in dev:

Can you help me out or implement this is some way into Hydeout?

I have disqus configured in my blog hosted as GitHub Pages with custom domain. I provided shortname which is krzysztof_madej. When I click load comments page send this request:

https://disqus.com/embed/comments/?base=default&f=krzysztof_madej&t_i=https%3A%2F%2Fthecodemanual.pl%2F2018%2F12%2F18%2FPeopleware-productive-projects-and-teams.html&t_u=https%3A%2F%2Fthecodemanual.pl%2F2018%2F12%2F18%2FPeopleware-productive-projects-and-teams.html&t_d=Peopleware%3A%20Productive%20Projects%20and%20Teams&t_t=Peopleware%3A%20Productive%20Projects%20and%20Teams&s_o=default

On disqus side I have page configured with:

• website url - https://thecodemanual.pl
• and trusted domains - thecodemanual.pl and kmadof.github.io

I guess that this is me doing sth wrong, but I really have no idea how to fix it. Or maybe do you have the same issue?

Hi,

I'm trying to make a multilingual version of Hydeout (such a gorgeous theme btw):
https://github.com/azarrias/hydeout-multilingual
There is one thing that I really have no clue on how to make it multilingual, and it is the RSS feed.
I wonder if you could give some ideas on how to make that happen.

I don't want to use any plugin, since I want to use this straight on github pages.

Thanks a lot!
Kind regards

hi, i try hydeout and add some images in but links broken. what is the right way to link to image.
i tried as link text

If I have wide tables in some posts and I try to read them on narrow display devices (in mobile view - like on the phone) I get reversed colors when scrolling to see the part of the table that doesn't fit to the screen.

Example of a post:

---
layout: post
title: Table
---
|1|1|2,584|6,000|36,85|7,000|83,78|0,00|6,10|10,15|136,93|31,19|3,16|7,11|0,13|0,42|315,82|
|1|1|2,584|6,000|36,85|7,000|83,78|0,00|6,10|10,15|136,93|31,19|3,16|7,11|0,13|0,42|315,82|`

for which I get this screen when scrolling to the right.

Any clues as to what should I change in _layout.css?

I couldn't figure out how to only show excerpts in the index page. Do I need to manually create excerpts on each post, or would it be possible for the theme to automatically use the first paragraph as excerpts?

Hey everyone,
I have just forked the hydeout and changed small things to force rebuild. However, it does not look like theme is built.
I have also added the remote theme command to config. Can anyone guess why?

https://berkdemir.github.io/

I have a question about how to go about implementing a kind of multiple blog like site.

My requirement is that I want to have three sections in the sidebar. One that is home, then two more sections (section A, section B).

I want the home section to be all posts from both section A and B and then I want section A and B to have posts of their own all listed like the home page including the pagination but only posts in section A will obviously be in section A and the same for section B. Again the home section would be a collection of both A and B posts.

Is this possible in the current implementation? If so could you maybe point me to an example or even in the right direction?

Thanks a lot.

Having:

github:
    repo: "<repo_url>"

in the _config.yml file prevents the page from building successfully.

Also the theme is not correctly using (or doesn't allow the user to select) the Github Pages Metadata.

For example, in the sidebar HTML file, we have site.github.repo rather than site.github.repository_url.

We've created a quick start button for the Hydeout theme including CMS configuration for Forestry (https://github.com/forestryio/hydeout-jekyll-starter). This link imports the starter repo into the user's account and sets it up in Forestry with instructions on how to deploy the site with Netlify and other providers.

I think the import button makes it a lot easier to get started quickly and better understand the different parts of the JAMStack.

How would you feel about adding the import button as an option to the theme's Readme file? (Examples: https://github.com/daviddarnes/alembic, https://github.com/spf13/hyde)

Curious to hear what you think.

When loading pages in hydeout the sidebar has the focus instead of the main section. Something that disables the ability to just press page down/page up to scroll the documents. I guess the sensible default should be (as in Hyde) to scroll the posts?

I maintain a small blog and the screen is effectively cut in half on a 4k screen, with the right half being whitespace.

While I know there are a lot of good visual reasons for this, most of my blog entries contain large code samples, requiring the pre/code boxes to scroll at the current width in most cases.

What I have done is fork it over at https://github.com/erikh/hydeout and added a single commit to add the max-width to 76rem in the large media layout, but I assume you will want to make it configurable instead, so I did not submit as a pull request. I am not that familiar with this stack.

Hope this is useful commentary, the result looks nicer I think:

The original:

I have commented out baseurl in _config.yml, but when I click site.baseurl in 404.html, the browser doesn't navigate to the baseurl, instead of the current location.

Very nice theme! When I change _config.yml to include paginate_path: '/blog/page:num' and sidebar_blog_link: '/blog' as suggested by your helpful comments, I get a 'Blog' page in the side bar as desired. However, this page (or rather: the folder _site/blog) lacks an index.html.

For testing, I manually copied the index.html from _site to _site/blog and the blog looked fine (clicking 'older' at the bottom of the first page correctly linked to the 2nd page of the blog). Might I kindly ask for your help to do this programmatically?

I put tracking tag at google-analytics property in config.yml
But, I can't get any results in google analytics report page.
So I checked my setting with Tag Assistant Legacy (by Google), it says that this is not proper setting.

I am trying to run freshly forked repository but I get bunch of errors and I do not know how gem file should look like.

Can you help me with setting the project?

My error:

Hello,

Is it possible to have a similar, dynamic index filter for categories as the for tags?

https://fongandrew.github.io/hydeout/tags

Thanks! k

The theme has a back arrow at the top of pages. E.g., on the about page.

This back arrow link does not link back to the home page, but just refreshes the page.
Should we remove it? How?

I would like to specify the color of the #sidebar .site-title css property.

Can we add a variable for customization?

Ran into some trouble using the disqus.html file as-is. Seems like Disqus does not allow relative URLs anymore (some old documentation has it), which is what the theme uses (via page/site variables).

I love this fork. Thanks for working on it.

I was wondering if you could incorporate Open Graph and Twitter Cards into the theme? If not, could you perhaps suggest some gems I could use?

Thanks!

So, I tried to install the theme to a new Jekyll website, and couldn't see any of the posts

How to reproduce:

• jekyll new myblog
• add github-pages and jekyll-remote-theme gems
• bundle
• add remote_theme: fongandrew/hydeout to _config.yml
• run jekyll serve

Spent quite a lot of time to get things working. Turns out, my _config.yml was missing a line:

paginate: 5

Adding the config solves the problem:

Didn't see it anywhere in the docs, so I've created the issue

I have been using Hyde for a few years and really like it, so was very happy to see that someone has taken up the theme! I do have some problems with it though and one is related to the reverse-layout. When I am using that in hydeout the scrollbar is located between the sidebar and the main section. In original Hyde the scroll bar is located all the way to the right, which looks much tidier. Or am I missing a customization option somewhere?

The theme is great and I appreciate the work behind it. I'm trying to use it for some math lecture notes, and I found a bug with how MathJax displays equations. Here's a screenshot of the problem:

I've attached a minimal site that produces the result. It just has an include for the MathJax script header and a single MD page that produces a few equations. Should be able to serve it and view test.html to see the problem:

notes copy.zip

I'm 95% confident it's a bad CSS interaction; the MXJc-display enclosing element has zero height, which is not what I see on other MathJax content I've generated. But I'm out of my depth trying to pinpoint the problem.

Let me start out by saying thank you so much for taking in this project and maintaining it! It was a huge bummer when I tired the original Hyde and it didn't work. Glad I found this project 😃

I noticed in the demo site when a post was very long it still put the entire thing in the home page even though it was limited to 5 posts. I think it would be great if posts truncated after a certain length and had a Read More... button when displayed in the home page. Keeping the home page at a reasonable length and drawing people into the post page where they can comment, etc,

Thoughts?

Hey, nice theme!

Could it be possible to implement a way to configure the order the elements appear in the sidebar? They seem to be currently sorted by name, which might be impractical in some cases. Some order parameter in the Front Matter block would be enough.

The user @carlsonsantana validate your site template "https://fongandrew.github.io/hydeout/" and found these accessibility errors:

• Page https://fongandrew.github.io/hydeout/:
  • Issue a1c7fa8d-dcc9-4722-ae96-d2dd54144885:
    • 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.68:1. Recommendation: change text colour to #167bc2.
    • Selector: html > body > main > div > div > a
    • Context: <a class="pagination-item older" href="/hydeout/page2"> Older </a>
  • Issue 290ddf72-8e46-4109-ad37-515ef3b6c48e:
    • 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.68:1. Recommendation: change text colour to #167bc2.
    • Selector: html > body > main > div > article:nth-child(5) > a
    • Context: <a href="/hydeout/2012/02/05/markup-syntax-highlighting.html">More …</a>
  • Issue cc8d8611-dfee-499b-aaea-5830327ffce9:
    • 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.68:1. Recommendation: change text colour to #167bc2.
    • Selector: html > body > main > div > article:nth-child(4) > p:nth-child(6) > a
    • Context: <a href="https://github.com/mojombo/jekyll">visiting the project on GitHub</a>
  • Issue 685ca644-cff8-4707-9f33-b7f33eb88eb0:
    • 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 text colour to #767676.
    • Selector: html > body > main > div > article:nth-child(4) > blockquote > p
    • Context: <p>Jekyll is a simple, blog aware,...</p>
  • Issue bc448a34-14ab-450c-be42-96a37eaf37e0:
    • 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.68:1. Recommendation: change text colour to #167bc2.
    • Selector: html > body > main > div > article:nth-child(4) > p:nth-child(3) > a:nth-child(2)
    • Context: <a href="https://github.com/mojombo/jekyll/blob/master/README.markdown">the project’s readme</a>
  • Issue bb81bbe0-4015-409c-b137-0019f85c8642:
    • 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.68:1. Recommendation: change text colour to #167bc2.
    • Selector: html > body > main > div > article:nth-child(4) > p:nth-child(3) > a:nth-child(1)
    • Context: <a href="http://jekyllrb.com">Jekyll</a>
  • Issue eb459bfa-38e4-4d09-9116-d62fa36df009:
    • 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.68:1. Recommendation: change text colour to #167bc2.
    • Selector: html > body > main > div > article:nth-child(3) > p:nth-child(39) > a
    • Context: <a href="https://github.com/poole/poole/issues/new">Open an issue.</a>
  • Issue 0d570825-f56b-4ccf-8694-45c3de521ffe:
    • 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.05:1. Recommendation: change background to #101418.
    • Selector: #readme > article > p:nth-child(3) > code:nth-child(4)
    • Context: <code>%}</code>
  • Issue d3cde918-1864-4e83-a360-fb6fce69dc7a:
    • 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.05:1. Recommendation: change background to #101418.
    • Selector: #readme > article > p:nth-child(3) > code:nth-child(3)
    • Context: <code>{%</code>
  • Issue 3357ed52-68bd-4afc-9f4d-e1acb32c7442:
    • 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.05:1. Recommendation: change background to #101418.
    • Selector: #readme > article > p:nth-child(3) > code:nth-child(2)
    • Context: <code>gist</code>
  • Issue c8402219-f4df-4520-9181-99a5781a9983:
    • 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.05:1. Recommendation: change background to #101418.
    • Selector: #readme > article > p:nth-child(3) > code:nth-child(1)
    • Context: <code>5555251</code>
  • Issue d4b07302-453c-4341-9b3d-66e37a53e698:
    • 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.71:1. Recommendation: change text colour to #737373.
    • Selector: html > body > main > div > article:nth-child(3) > figure > pre > code > span:nth-child(22)
    • Context: <span class="c1">// &gt; 8</span>
  • Issue 49ddc5e3-8c7a-4161-b040-4566f5cba306:
    • 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.79:1. Recommendation: change text colour to #c34e00.
    • Selector: html > body > main > div > article:nth-child(3) > figure > pre > code > span:nth-child(20)
    • Context: <span class="mi">6</span>
  • Issue 51cbca21-5c8b-4e0c-bdc5-7cfafa2ce356:
    • 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.79:1. Recommendation: change text colour to #c34e00.
    • Selector: html > body > main > div > article:nth-child(3) > figure > pre > code > span:nth-child(18)
    • Context: <span class="mi">2</span>
  • Issue 164fb477-fa34-4009-b68d-d2cc65ba3a72:
    • 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.71:1. Recommendation: change text colour to #737373.
    • Selector: html > body > main > div > article:nth-child(3) > figure > pre > code > span:nth-child(15)
    • Context: <span class="c1">// Call the function </span>
  • Issue 80691608-e479-43a7-8e3e-243e855c9eaa:
    • 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.71:1. Recommendation: change text colour to #737373.
    • Selector: html > body > main > div > article:nth-child(3) > figure > pre > code > span:nth-child(2)
    • Context: <span class="c1">// Create a function that takes...</span>
  • Issue a9593fcc-f651-4090-94a9-0a80d2044eb5:
    • 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.71:1. Recommendation: change text colour to #737373.
    • Selector: html > body > main > div > article:nth-child(3) > figure > pre > code > span:nth-child(1)
    • Context: <span class="c1">// Example can be run directly ...</span>
  • Issue bea9eddb-0f41-4520-8167-e839e3a8d0f0:
    • 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.89:1. Recommendation: change text colour to #5f5f5f.
    • Selector: html > body > main > div > article:nth-child(3) > p:nth-child(14) > code
    • Context: <code class="highlighter-rouge">code element</code>
  • Issue de729b08-8abf-4925-bb59-57ff489dcdbd:
    • 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.89:1. Recommendation: change text colour to #5f5f5f.
    • Selector: html > body > main > div > article:nth-child(3) > ul:nth-child(9) > li:nth-child(6) > code:nth-child(4)
    • Context: <code class="highlighter-rouge">&lt;sub&gt;</code>
  • Issue 6b99e4db-2e72-4b8a-9b46-cb5d81bb2628:
    • 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.89:1. Recommendation: change text colour to #5f5f5f.
    • Selector: html > body > main > div > article:nth-child(3) > ul:nth-child(9) > li:nth-child(6) > code:nth-child(2)
    • Context: <code class="highlighter-rouge">&lt;sup&gt;</code>
  • Issue 5a9a0e98-439b-4bfb-aeb8-d443c87534ca:
    • 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.89:1. Recommendation: change text colour to #5f5f5f.
    • Selector: html > body > main > div > article:nth-child(3) > ul:nth-child(9) > li:nth-child(5) > code:nth-child(4)
    • Context: <code class="highlighter-rouge">&lt;ins&gt;</code>
  • Issue 6d9a8dc3-d153-4c92-a4c0-4d70f909cf01:
    • 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.89:1. Recommendation: change text colour to #5f5f5f.
    • Selector: html > body > main > div > article:nth-child(3) > ul:nth-child(9) > li:nth-child(5) > code:nth-child(2)
    • Context: <code class="highlighter-rouge">&lt;del&gt;</code>
  • Issue 57f621ab-e291-4eca-a3de-4276bb0cc363:
    • 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.89:1. Recommendation: change text colour to #5f5f5f.
    • Selector: html > body > main > div > article:nth-child(3) > ul:nth-child(9) > li:nth-child(4) > code
    • Context: <code class="highlighter-rouge">&lt;cite&gt;</code>
  • Issue 40165b61-1b5f-4985-a7a2-99c191ce1ac1:
    • 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.89:1. Recommendation: change text colour to #5f5f5f.
    • Selector: html > body > main > div > article:nth-child(3) > ul:nth-child(9) > li:nth-child(3) > code:nth-child(3)
    • Context: <code class="highlighter-rouge">title</code>
  • Issue 16b6c0a7-4707-4d28-8b53-ee49f5747cee:
    • 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.89:1. Recommendation: change text colour to #5f5f5f.
    • Selector: html > body > main > div > article:nth-child(3) > ul:nth-child(9) > li:nth-child(3) > code:nth-child(2)
    • Context: <code class="highlighter-rouge">&lt;abbr&gt;</code>
  • Issue 38d124a9-0c2e-4cfe-bab2-f0fe3bf89540:
    • 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.89:1. Recommendation: change text colour to #5f5f5f.
    • Selector: html > body > main > div > article:nth-child(3) > ul:nth-child(9) > li:nth-child(2) > code
    • Context: <code class="highlighter-rouge">&lt;em&gt;</code>
  • Issue a463f8a5-fa21-413e-8d2d-e8f1271d305e:
    • 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.89:1. Recommendation: change text colour to #5f5f5f.
    • Selector: html > body > main > div > article:nth-child(3) > ul:nth-child(9) > li:nth-child(1) > code
    • Context: <code class="highlighter-rouge">&lt;strong&gt;</code>
  • Issue 6e24c2b1-91a3-413f-88cb-4de417ec6632:
    • 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.68:1. Recommendation: change text colour to #167bc2.
    • Selector: html > body > main > div > article:nth-child(3) > p:nth-child(8) > a
    • Context: <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element">Mozilla Developer Network</a>
  • Issue ebdc9891-82d5-47a6-93a6-77b59f42fcbc:
    • 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 text colour to #767676.
    • Selector: html > body > main > div > article:nth-child(3) > blockquote > p
    • Context: <p>Curabitur blandit tempus portti...</p>
  • Issue fee80663-eb76-446a-96e0-58ce8c0315e5:
    • 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.68:1. Recommendation: change text colour to #167bc2.
    • Selector: html > body > main > div > article:nth-child(3) > p:nth-child(4) > a
    • Context: <a href="#">dis parturient montes</a>
  • Issue 025bdc89-3f91-44c3-9ca6-a3e73adc80f3:
    • 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.68:1. Recommendation: change text colour to #167bc2.
    • Selector: html > body > main > div > article:nth-child(2) > p:nth-child(14) > a
    • Context: <a href="https://github.com/poole/hyde">GitHub repository</a>
  • Issue b4da8374-d641-46da-8f43-0f592a96a37e:
    • 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.68:1. Recommendation: change text colour to #167bc2.
    • Selector: html > body > main > div > article:nth-child(2) > p:nth-child(10) > a
    • Context: <a href="https://github.com/poole/hyde#readme">Head to the readme</a>
  • Issue a4a22f30-8cd1-43bb-8d42-e40fc823f0e3:
    • 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.89:1. Recommendation: change text colour to #5f5f5f.
    • Selector: html > body > main > div > article:nth-child(2) > ul:nth-child(9) > li:nth-child(3) > code
    • Context: <code class="highlighter-rouge">&lt;body&gt;</code>
  • Issue b7312c48-1188-4a8f-9d4c-b57e436529ed:
    • 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.68:1. Recommendation: change text colour to #167bc2.
    • Selector: html > body > main > div > article:nth-child(2) > ul:nth-child(9) > li:nth-child(3) > a
    • Context: <a href="https://github.com/poole/hyde#themes">Eight optional color schemes</a>
  • Issue 896c7f2b-2f5a-4116-827d-e727deed0fa0:
    • 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.89:1. Recommendation: change text colour to #5f5f5f.
    • Selector: html > body > main > div > article:nth-child(2) > ul:nth-child(9) > li:nth-child(2) > code
    • Context: <code class="highlighter-rouge">&lt;body&gt;</code>
  • Issue 80ab9abb-e963-44e1-8683-14ba6ce58e18:
    • 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.68:1. Recommendation: change text colour to #167bc2.
    • Selector: html > body > main > div > article:nth-child(2) > ul:nth-child(9) > li:nth-child(2) > a
    • Context: <a href="https://github.com/poole/hyde#reverse-layout">reverse</a>
  • Issue 5e9ba321-ff07-4a8d-b453-6b9e45ba05fd:
    • 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.89:1. Recommendation: change text colour to #5f5f5f.
    • Selector: html > body > main > div > article:nth-child(2) > ul:nth-child(6) > li:nth-child(3) > code
    • Context: <code class="highlighter-rouge">rem</code>
  • Issue 2ae5f7f8-12ac-42de-bf45-96e857cc9fcd:
    • 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.68:1. Recommendation: change text colour to #167bc2.
    • Selector: html > body > main > div > article:nth-child(2) > ul:nth-child(6) > li:nth-child(1) > a:nth-child(3)
    • Context: <a href="/about">example page</a>
  • Issue edc473d4-30c3-4685-b5b2-88c4d4219bbf:
    • 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.68:1. Recommendation: change text colour to #167bc2.
    • Selector: html > body > main > div > article:nth-child(2) > ul:nth-child(6) > li:nth-child(1) > a:nth-child(2)
    • Context: <a href="/feed.xml">RSS feed</a>
  • Issue 736bbe3f-403f-47e5-b44b-594f47d8e295:
    • 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.68:1. Recommendation: change text colour to #167bc2.
    • Selector: html > body > main > div > article:nth-child(2) > ul:nth-child(6) > li:nth-child(1) > a:nth-child(1)
    • Context: <a href="/404">404</a>
  • Issue 77396c08-dd71-49e2-99e0-f08626635842:
    • 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.68:1. Recommendation: change text colour to #167bc2.
    • Selector: html > body > main > div > article:nth-child(2) > p:nth-child(5) > a
    • Context: <a href="https://twitter.com/mdo">@mdo</a>
  • Issue 26975320-8a99-40cb-9d98-ca65885ede0c:
    • 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.68:1. Recommendation: change text colour to #167bc2.
    • Selector: html > body > main > div > article:nth-child(2) > p:nth-child(3) > a:nth-child(2)
    • Context: <a href="http://getpoole.com">Poole</a>
  • Issue f27e1441-bb2a-477e-9093-05a48c1504f4:
    • 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.68:1. Recommendation: change text colour to #167bc2.
    • Selector: html > body > main > div > article:nth-child(2) > p:nth-child(3) > a:nth-child(1)
    • Context: <a href="http://jekyllrb.com">Jekyll</a>
  • Issue 46633339-8067-4075-b7b5-45460bdd8b1b:
    • 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.89:1. Recommendation: change text colour to #5f5f5f.
    • Selector: html > body > main > div > article:nth-child(1) > ul > li:nth-child(5) > p > code
    • Context: <code class="highlighter-rouge">google_analytics</code>
  • Issue fcf91358-9f48-428d-b257-bc54be7f0ded:
    • 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.89:1. Recommendation: change text colour to #5f5f5f.
    • Selector: html > body > main > div > article:nth-child(1) > ul > li:nth-child(4) > p:nth-child(3) > code
    • Context: <code class="highlighter-rouge">comments.html</code>
  • Issue fcf170e7-b4f2-46c7-b8b7-b4ed9679500c:
    • 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.1:1. Recommendation: change text colour to #474747.
    • Selector: html > body > main > div > article:nth-child(1) > ul > li:nth-child(4) > div > div > pre > code > span:nth-child(5)
    • Context: <span class="s">my-disqus-shortname</span>
  • Issue 53baf064-750b-47d3-8800-e426fb329da0:
    • 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.77:1. Recommendation: change text colour to #2979a9.
    • Selector: html > body > main > div > article:nth-child(1) > ul > li:nth-child(4) > div > div > pre > code > span:nth-child(3)
    • Context: <span class="na">shortname</span>
  • Issue 2674231a-7b2c-4c92-8bf3-f8507fe73179:
    • 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.77:1. Recommendation: change text colour to #2979a9.
    • Selector: html > body > main > div > article:nth-child(1) > ul > li:nth-child(4) > div > div > pre > code > span:nth-child(1)
    • Context: <span class="na">disqus</span>
  • Issue 89631680-e379-4ad3-a52d-564a91052834:
    • 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.89:1. Recommendation: change text colour to #5f5f5f.
    • Selector: html > body > main > div > article:nth-child(1) > ul > li:nth-child(3) > p > code
    • Context: <code class="highlighter-rouge">search.html</code>
  • Issue 6f5543cd-d05b-4e9c-96c1-a0a288029f22:
    • 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.89:1. Recommendation: change text colour to #5f5f5f.
    • Selector: html > body > main > div > article:nth-child(1) > ul > li:nth-child(2) > p > code
    • Context: <code class="highlighter-rouge">sidebar_link: true</code>
  • Issue 272a6f88-c07c-491c-9ea4-b0fce95ba6f4:
    • 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.89:1. Recommendation: change text colour to #5f5f5f.
    • Selector: html > body > main > div > article:nth-child(1) > p:nth-child(13) > code:nth-child(2)
    • Context: <code class="highlighter-rouge">_includes/custom-foot.html</code>
  • Issue 924e1c67-c045-4d11-a6ef-f6493fd221b8:
    • 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.89:1. Recommendation: change text colour to #5f5f5f.
    • Selector: html > body > main > div > article:nth-child(1) > p:nth-child(13) > code:nth-child(1)
    • Context: <code class="highlighter-rouge">_includes/custom-head.html</code>
  • Issue c4b6fa50-3fd1-4d0b-a60c-30ab474f01fc:
    • 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.68:1. Recommendation: change text colour to #167bc2.
    • Selector: html > body > main > div > article:nth-child(1) > p:nth-child(12) > a
    • Context: <a href="https://github.com/fongandrew/hydeout/blob/master/_sass/hydeout/_variables.scss">_variables</a>
  • Issue bffd204f-ae2c-4cd9-b86e-f08e914f3cf5:
    • 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.89:1. Recommendation: change text colour to #5f5f5f.
    • Selector: html > body > main > div > article:nth-child(1) > p:nth-child(10) > code
    • Context: <code class="highlighter-rouge">assets/css/main.scss</code>
  • Issue f7cf74a6-5eba-4911-9ca2-63523c1454a2:
    • 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.79:1. Recommendation: change text colour to #c34e00.
    • Selector: html > body > main > div > article:nth-child(1) > div:nth-child(9) > div > pre > code > span:nth-child(27)
    • Context: <span class="mh">#268bd2</span>
  • Issue d1652f54-c1d1-468c-b5a2-f1f92b18432c:
    • 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.79:1. Recommendation: change text colour to #c34e00.
    • Selector: html > body > main > div > article:nth-child(1) > div:nth-child(9) > div > pre > code > span:nth-child(3)
    • Context: <span class="mh">#202020</span>
  • Issue a41cbb83-e25e-4cec-af33-8361754298b6:
    • 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.68:1. Recommendation: change text colour to #167bc2.
    • Selector: html > body > main > div > article:nth-child(1) > p:nth-child(3) > a:nth-child(2)
    • Context: <a href="http://jekyllrb.com">Jekyll</a>
  • Issue c0aa3931-c0f5-4257-9cb9-b8d309e475e3:
    • 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.68:1. Recommendation: change text colour to #167bc2.
    • Selector: html > body > main > div > article:nth-child(1) > p:nth-child(3) > a:nth-child(1)
    • Context: <a href="https://github.com/poole/hyde">Hyde</a>

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

Hi. I cloned the repo and pushed it to Github Pages. But it seems the CSS isn't loading. Here's the site: smabie.github.io

Is there something I must do after I clone and push? Thanks!

Hello,

Will it be possible to include support with asciidoctor?

How can I adjust the article width?

When I use wide-monitor, I feel the content width is too small.

I fail to find the proper variables at _variables.scss

thank you.