davidhampgonsalves / hugo-black-and-light-theme

A High contrast, text oriented, performant and Javascript-free theme for Hugo.

Hello there 👋

I'm currently a Senior Software Engineer at OpenCounter working on our custom rules engine ✨.

In the past I've:

• 🎨 Made generative art and built a pen plotter.
• 🦠 Simulated life using the power of the sun.
• 🌿 Influenced consumer decisions for the greater good.
• 🤖 Reverse engineered the DRM on my Robotic kitty litter box.

📫 Get in touch via [email protected]
🕸️ davidhampgonsalves.com
⚡ When I'm not writing code I enjoy foraging, cycling and surfing.

hugo-black-and-light-theme's Issues

max-width: auto is not valid CSS

As far as I can tell, "auto" is not a valid value for "max-width". It does not appear in any reference docs I can find, such as the MDN web docs.

max-width: auto occurs in your styling here:

  pre code {
    display: inline;
    max-width: auto;
    padding: 0;
    margin: 0;
    overflow: visible;
    line-height: inherit;
    word-wrap: normal;
    background-color: transparent;
    border: 0;
  }

What were you trying to accomplish? What, if anything, should this CSS value be replaced with?

syntax highlighting

Hi, I was wondering if there is a method to change the syntax highlighting for code chunks (R and Python).

I'm using the Blogdown package and have been looking at some of the solutions that other people have tried with different themes, here and here.

However, Black & White does not follow the same file structure as the themes in these examples so I couldn't get them to work. Is there something else that I may not be aware of that I could try? (I'm not a developer so navigating this stuff is a bit confusing atm). Thanks for any help and for the theme.

How to edit / customize css?

Hi there -- I want edit the css for this theme -- specifically, changing how bolded text is formated -- is there a best practice to do so within this theme? Thanks a bunch!

install command is wrong

see #2

Same IDs re-used in multiple places

Thank you for this very nice theme! I have adopted it for my personal blog.

I only now saw that this theme re-uses the same ID attribute for multiple elements, for example can I see <div id=date> multiple times in the source code of the theme demo page. This seems to not be valid HTML:

When specified on HTML elements, the id attribute value must be unique amongst all the IDs in the element's tree and must contain at least one character.

Probably one can exchange many of the id attributes by class attributes of the same value, change the CSS selectors to match, and be done with it.

The w3c html validator also recognizes this as a problem, plus some others. I can't say how bad any of those are, though.

This thread has a list of things that can go wrong when re-using IDs.

Confiusing license name

Both on the readme at github and at themes.gohugo.io the license is named GNU3.0.
Afaik there is no GNU3 license. And the LICENSE file in the github repo says its GPL3 licensed.

option to disable webfonts?

Great theme!

What do you think of using a conditional to disable web fonts via config.toml (if you prefer to have web fonts enabled by default)?

e.g., from:

hugo-black-and-light-theme/layouts/partials/header.html

Line 12 in 3884985

<link href='https://fonts.googleapis.com/css?family=Open+Sans:400|Old+Standard+TT:400' rel='stylesheet' type='text/css'>

to something like:

{{ if not .Site.Params.disableWebFonts }}
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400|Old+Standard+TT:400' rel='stylesheet' type='text/css'>
{{ end }}

Thus a site can have its web fonts disabled explicitly.

Found no layout file for "HTML" for kind "..."

When using the theme I get a warning (before changing anything):
Building sites … WARN 2020/03/25 23:28:17 found no layout file for "HTML" for kind "section": You should create a template file which matches Hugo Layouts Lookup Rules for this combination. WARN 2020/03/25 23:28:17 found no layout file for "HTML" for kind "taxonomy": You should create a template file which matches Hugo Layouts Lookup Rules for this combination. WARN 2020/03/25 23:28:17 found no layout file for "HTML" for kind "taxonomy": You should create a template file which matches Hugo Layouts Lookup Rules for this combination. WARN 2020/03/25 23:28:17 found no layout file for "HTML" for kind "taxonomy": You should create a template file which matches Hugo Layouts Lookup Rules for this combination. WARN 2020/03/25 23:28:17 found no layout file for "HTML" for kind "taxonomyTerm": You should create a template file which matches Hugo Layouts Lookup Rules for this combination. WARN 2020/03/25 23:28:17 found no layout file for "HTML" for kind "taxonomy": You should create a template file which matches Hugo Layouts Lookup Rules for this combination. WARN 2020/03/25 23:28:17 found no layout file for "HTML" for kind "taxonomy": You should create a template file which matches Hugo Layouts Lookup Rules for this combination. WARN 2020/03/25 23:28:17 found no layout file for "HTML" for kind "taxonomy": You should create a template file which matches Hugo Layouts Lookup Rules for this combination. WARN 2020/03/25 23:28:17 found no layout file for "HTML" for kind "taxonomy": You should create a template file which matches Hugo Layouts Lookup Rules for this combination. WARN 2020/03/25 23:28:17 found no layout file for "HTML" for kind "taxonomyTerm": You should create a template file which matches Hugo Layouts Lookup Rules for this combination. WARN 2020/03/25 23:28:17 found no layout file for "HTML" for kind "taxonomy": You should create a template file which matches Hugo Layouts Lookup Rules for this combination. WARN 2020/03/25 23:28:17 found no layout file for "HTML" for kind "taxonomy": You should create a template file which matches Hugo Layouts Lookup Rules for this combination. WARN 2020/03/25 23:28:17 found no layout file for "HTML" for kind "taxonomy": You should create a template file which matches Hugo Layouts Lookup Rules for this combination. WARN 2020/03/25 23:28:17 found no layout file for "HTML" for kind "taxonomy": You should create a template file which matches Hugo Layouts Lookup Rules for this combination. WARN 2020/03/25 23:28:17 found no layout file for "HTML" for kind "taxonomy": You should create a template file which matches Hugo Layouts Lookup Rules for this combination. WARN 2020/03/25 23:28:17 found no layout file for "HTML" for kind "taxonomy": You should create a template file which matches Hugo Layouts Lookup Rules for this combination. WARN 2020/03/25 23:28:17 found no layout file for "HTML" for kind "taxonomy": You should create a template file which matches Hugo Layouts Lookup Rules for this combination.
Is there anything I can/should do about it?

Syntax Highlighting with Dark Theme

Hi there, I'm seeing a similar issue to #14.

I've added the recommended fix and although syntax highlighting is working now, the background color has changed in code blocks with syntax applied in a way that makes the code unreadable:

I should note that code blocks without a syntax specified still view fine:

Are there any recommendations as to how to approach this issue? I'm unfamiliar with how hugo themes work, but I'm happy to investigate further on my end.

Demo

Where's the demo link?

Next and previous post buttons reversed.

Hi there. I found that the nav buttons of the posts are reversed. IE, the next post is on the left bottom corner instead of the left, and the previous post is on the right bottom.

My posts are sorted by weight. Is this intentional? If so, how can i reverse it?

Thanks.

Question on Referrer Policy

Hello. Beautiful theme. I especially appreciate the screenshot presentation.

Question about the referrer policy in use. From what I was reading on W3C using "no-referrer" will prevent the "Referer" [sic] header on same- and cross-domain HTTP requests. As a result, users of this theme who hyperlink to other sites will not appear in Google Analytics (and may not appear in the Search Consoles). There are also potential caching implications as well. Is the intention using the no-referrer Referral Policy to be incognito, so to speak, when linking to other sites, or are there other reasons? Just curious. I'd love to hear your thoughts. Best regards.

Markdown Footer Styling

Please add a footer styling to make the footer show as superscript.

I am currently using below in my clone of your theme. Thank you for the theme.

 .footnote-ref {
   vertical-align: super;
   font-size: x-small;
   margin-left: 2px;
   text-decoration: none;
  }

Markdown Code Blocks

Issue submitted in error.

dates showing although not set

I currently have 3 entries on my site: 1 post, and 2 pages. The pages have no date or title, just pure markdown or markdown + html. The site is showing entries as if they were posted on January 1 of 0001. What do I have to do to avoid this? Is there a way to make them disappear or have the landing page be /posts? (Although for some reason there is no index.html generated for /posts)

This is my site deployed

RSS link doesn't validate

When I ran my site through https://validator.w3.org/nu/ after updating to the latest version of the theme it choked on the atom link that you installed in this commit:

    {{ with .OutputFormats.Get "RSS" }}
        {{ printf "<atom:link href=%q rel=\"self\" type=%q />" .Permalink .MediaType | safeHTML }}
    {{ end }}

The sample at https://gohugo.io/templates/rss/ validates and seems to work fine:

{{ range .AlternativeOutputFormats -}}
    {{ printf `<link rel="%s" type="%s" href="%s" title="%s" />` .Rel .MediaType.Type .Permalink $.Site.Title | safeHTML }}
{{ end -}}

Is there any reason not to use what the Hugo documentation recommends here?