zwbetz-gh/cupper-hugo-theme

An accessibility-friendly Hugo theme, ported from the original Cupper project.

cupper-hugo-theme's Issues

About scroll bar in homepage.

Describe the bug
The homepage will always need scroll to shown the footer, even when that is little content on the page, leave out a long range of space.
You can see this from the demo site. I don't know if this should consider a bug. But is it possible to make the homepage fit the screen and show all content.

Blog list on Home

I want to show all the posts on Home instead of _index.md contents so that whenever website loads it will show all the blog posts. How would I do that?

Menu not rendering

I am running hugo locally and when installing the cupper theme, I get no side bar menu listed.

Is there something I need to explicitly call out or change?

parameter for logo file

Hello,

first time I use Hugo and with your theme it is really nice. However to change the logo under static/images/ in your theme don't seem the best practice. Could you prepare a correction so it can be integrate directly in the site config files?

Thanks

'Tags', 'Publish date' and 'toc' in blog article doesn't work.

I very love this theme. Thank you. I find an issue that I can not handle it, so I have to ask you to help me solve this problem.

I used cupper theme and run the 'exampleSite' , then I find every blog article without 'Tags', 'Publish date' and 'toc' doesn't work.

For example :

Your demo :

🔢 This is title
Publish date: Sep 28, 2014
Tags: hugo theme command-line

Table of contents

Main body

My blog :

🔢 This is title

Main body

Your demo result
My blog result

Multi-line {{<cmd>}}

Is your feature request related to a problem? Please describe.
When using the cmd tag for more than one line of code it concatinates the lines.
The alternative is to have multiple cmd tags, however then you've seperate boxes (which I'd rather not have).

I've tried putting in //, multiple new lines and <br> but none of these work.

Describe the solution you'd like
It's be excellent if

{{< cmd >}}
One line
Two line
{{< cmd >}}

Would appear in the same black box similar to:

$ One Line
$ Two Line

But anything would be great.

Describe alternatives you've considered
using the default .md tabbing, or ``` but neither is as nice as the cmd tag.

Additional context
Any assistance would be really appreciated.

How to change logo

Hi, first of all, thanks for this great template. We are creating a website for a project and we are struggling to change the logo. We tried by replacing the existing logo.csv with an alternative using the same name and format (i.e. logo.csv). We did this here: https://github.com/GDSL-SALIENT/salient/tree/main/public/images

Here is the repo to the website: https://github.com/GDSL-SALIENT/salient

How should we change the logo?

Thanks,
Francisco.

Umlaut characters broken in headlines on Firefox

Describe the bug
German Umlaut characters and Eszett (ÄÖÜäöüß) do not render in headline font in Firefox.

To Reproduce
Steps to reproduce the behavior:

1. Create a page with the Text "ÄAÖOÜUäaöoüoßss"
2. Open page in Chrome, text renders fine.
3. Open page in Firefox (version 78.0.2 on Linux), Umlaut characters render in a fallback font.

Expected behavior
Chrome and Firefox render the fonts the same, especially the special characters should fit in.

Screenshots

Example 1 from a real page (note the headlines):

Example 2 from fontdrop.info:

Desktop (please complete the following information):

• OS: Arch Linux
• Browser Firefox
• Version 78.0.2

Additional context
I was also able to reproduce the behaviour by uploading the woff font to https://fontdrop.info/ and putting in the above mentioned text in the "Type yourself" field, maybe only the woff font is broken and woff2 works?

New Chrome update breaks hugo/cupper site "skip to content" banner along the top

Describe the bug
Recent Chrome update (MacOS, Linux, etc.) now renders the site with "skip to content" black banner across the top

To Reproduce
Steps to reproduce the behavior:

1. Go to: https://theologic.us/
2. Click on: nothing
3. Scroll down to: it's on the main page
4. See error

Expected behavior
Not to have a black banner that says "skip to content"

Screenshots

Desktop (please complete the following information):

• OS: Fedora 31 or MacOS 10.15.3
• Browser: Chrome
• Version: 80.0.3987.132

Patterns

Describe the solution you'd like
I'm wondering if the old patterns folder supported by Cupper still works? and if the print file in the root of contents does too?

Unicode display problem

Describe the bug
When the content is in French, the word with accent, like prononcée

To Reproduce
Add a sentence "Cette phrase prononcée par Greta Thunberg" to any content.
On the browser will show "Cette phrase prononc�e par Greta Thunberg"

Expected behavior
Display "Cette phrase prononcée par Greta Thunberg"

Desktop (please complete the following information):

• OS: Ubuntu & Windows 10
• Browser Firefox / Chrome

Screen reader issues

Describe the bug
A clear and concise description of what the bug is.

Using a screen reader, one cannot tell the difference between submitted date and updated date on articles, and headings that are in the table of contents have a link after them that just goes back to that same heading, effectively going nowhere.

To Reproduce
Steps to reproduce the behavior:

1. Go to [https://devinprater.github.io/2020-04-16-writing-richly/](This page on my site).
2. Using a screen reader, notice that "Apr 16, 2020 " and "Jun 9, 2020" have no other text defining them as the submit and update date.
3. Scroll down to the "What’s this rich text and who needs all that?" heading. After that section, you'll find a link called "This What’s this rich text and who needs all that? section". That is redundant, and the link just puts focus back on that heading.

Expected behavior
A clear and concise description of what you expected to happen.

I expect the "published" and "updated" text to set apart the first and second date, and there to be no link after headings that don't practically do anything.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: [e.g. iOS] MacOS 10.15
• Browser [e.g. chrome, safari] Safari
• Version [e.g. 22] Version of what? Browser? Version 13.1.1 (15609.2.9.1.2)

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context
Add any other context about the problem here.

Thanks so much for this theme. There are only a few that even focus on accessibility, and I hope this theme is even made for blogging in the first place, as there seem to be a few that are for other purposes.

Site render problem

(It's rather a support request)

Everything go fine in local mode by using hugo.exe server -D.
However while I try to render the site by using only hugo.exe, the page (under public folder) display become a mess:

Could you en-light me how I should render cupper-hugo-theme ?
BTW my hugo version is Hugo Static Site Generator v0.57.2/extended windows/amd64.

`

Bit confused about how to move dark theme switch to sidebar and add image in sidebar

This theme is great for people with visual impairment, but it's probably better if the dark theme switch could be in the sidebar, as well as an icon.

If you look at https://www.talking-news.info/, all I want to do is move the switch and the AWS cert (including a hyperlink) to the sidebar (below the links, not to replace the site logo)

No matter what I try, it just messes up. I've worked everything else out but not this.Sorry if I'm being thick, guidance much appreciated.

Table of Contents not working for non ASCII characters

Describe the bug
Table of Contents is rendered with href that won't point correctly to h2s in markdown content if characters like ã, ç, õ, é, etc. are used.

For example:

The markdown header

## Introdução

gets rendered with an a href="#introduc-a-o" but the table of contents points to <a href="#introduc%25CC%25A7a%25CC%2583o">Introdução</a>.

This has to do with the way the hrefs get generated in markdown and partials/toc.html being different.

While it works for ASCII characters, it doesn't for the rest.

To Reproduce
Steps to reproduce the behavior:

1. Create any .md post with ## Introdução, for example
2. Turn on Table of Contents

Expected behavior
The escaped URL for Nação be the same in the Table of Contents and the actual h2's a tag, so that the links can be followed from the Table of Contents

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: macOS Mojave 10.14.3 (18D109)
• Browser: Firefox
• Version: 66.0b10 (64-bit)

Multiple expandable shortcodes do not work if they have the same inner text

Received the following email from a user. Making this into an issue because it is indeed an issue.

Hello again.

I hope you are doing well. (cannot be taken for granted in these times)

I think there MIGHT be a little bug in Cupper

Using 2 or more expandables in one markdown document will result in chaos.
click on  the second one will open the first one and whatnot...


{{< expandable label="A section of dummy text" level="1" >}}
Here is some markdown including [a link](https://twitter.com/heydonworks). Donec erat est, feugiat a est sed, aliquet pharetra ipsum. Vivamus in arcu leo. Praesent feugiat, purus a molestie ultrices, libero massa iaculis ante, sit amet accumsan leo eros vel ligula.
{{< /expandable >}}

{{< expandable label="A second section of dummy text" level="2" >}}
Here is some markdown including [a link](https://twitter.com/heydonworks). Donec erat est, feugiat a est sed, aliquet pharetra ipsum. Vivamus in arcu leo. Praesent feugiat, purus a molestie ultrices, libero massa iaculis ante, sit amet accumsan leo eros vel ligula.
{{< /expandable >}}

Or is it me, who has a misunderstanding?

greetings from way to hot Germany!
Elmar

Ability to set darkTheme as default theme

Is your feature request related to a problem? Please describe.
I would like my visitors to be presented with the darkThemeas default, and allow them to switch to the whiteTheme if they prefer this instead. default behaviour is currently to first show the whiteTheme.

Describe the solution you'd like
this could be a config setting or something in the header partial template?

Describe alternatives you've considered
i tried to understand the dom-scripts.js, but am totally lost when it comes to js

Additional context
N/A

Flashes upon page loading if dark theme is on

Describe the bug

When I turn on the dark theme and click for other pages, it briefly turns light (flashes).

Related to #44.

To Reproduce
Steps to reproduce the behavior:

1. Go to https://cupper-hugo-theme.netlify.app/. I suppose the config is from this repo.
2. Turn on the dark theme at the bottom of the blog page.
3. Click on one of the post links.
4. You would see the theme turns light for a brief moment before turning dark again.

Expected behavior
The website would stay dark.

Screenshots
N/A

Desktop (please complete the following information):

• OS: Ubuntu 20.04
• Browser: Google Chrome
• Version: 87.0.4280.66

Additional context
N/A

Align active nav contents with the rest of the nav

I noticed that the active element in the nav for large screens does not align with the rest of the elements:

I'm not sure if this is by design, so feel free to ignore me if so. I am solving it with this:

@media screen and (min-width: 768px) {
  .pattern [aria-current] {
    margin-left: 0.25em;
  }
}

I'm not entirely sure what's the best way to implement this inside the code (I have an overrides.css file so I can keep pulling updates.)

Error rendering figure shortcode

I am fairly new to Hugo and still learning how to use it, so this error could be a set up error on my part. However, I am unable to use the 'figure' shortcode due to the following error:

{{< figure src="/wp-content/uploads/2007/02/cable_cord.jpg" >}}

hugo/themes/cupper-hugo-theme/layouts/shortcodes/figure.html:22:23": execute of template failed: template: shortcodes/figure.html:22:23: executing "shortcodes/figure.html" at <$original.Permalink>: nil pointer evaluating resource.Resource.Permalink

It appears to be related to permalink. But I can't really tell what I am missing. If I delete the figure.html from the themes directly and use the default Hugo one, it works fine.

Cupper's figure shortcode masks Hugo's default figure shortcode

The below was originally posted in #12 by @Teebusch. I'm moving it to its own issue.

---

It seems that Cupper's figure shortcode masks Hugo's default figure shortcode. The two are different enough that they are both useful in different situations:

Hugo's figure shortcode allows linking of images in /static and adding a link to a picture directly
Cupper's shortcode has image processing built in, which is very useful. However, it centers the figure horizontally and "forces" a caption (otherwise there will be a "Figure x" text under the figure.
I would suggest to rename Cupper's shortcode, so Hugo's can be accessed.

(correct me if I'm wrong. I am new to Hugo)

Fonts not working on custom domain

Describe the bug
The heading font does not carry over on a custom domain

To Reproduce
Steps to reproduce the behavior:

1. Go to this link

Expected behavior
The Cupper font would load.

Desktop (please complete the following information):

• OS: Windows
• Browser Firefox, Chrome
• Version: most recent

Add CustomJS

Is your feature request related to a problem? Please describe.
I wish to be able to add leaflet. But it requires bothe a CSS and a JS script.

Describe the solution you'd like
Having a CustomJS Site property (or section property) could made it easily adaptable.

Can I upload png as a logo?

I want the logo of the website to be my profile picture. But when it is converted to svg a lot of details were lost. Is there any way I can change it? Thank you!

Social icon links in footer

Is your feature request related to a problem? Please describe.
I wanted social links on my website so I included social icons in the footer

Describe the solution you'd like
I've already implemented this on my site using SVGs (Super Tiny Icons)
A demo is here: anna-cupper-hugo-theme.netlify.app/.
Template is here: github.com/AnnaDodson/cupper-hugo-theme/blob/main/layouts/partials/social.html

Describe alternatives you've considered
Social links are only displayed if they exist in the config file so if a user doesn't want them, they don't need to add them.
Currently supporting the following out the box and users have the ability to add custom icons by providing the path to the SVGs or html partial.

params:  
  social:
    twitter: "TwitterName"
    gitlab: "GitLabName"
    github: "GitHubName"
    linkedin: "LinkedinName"
    email: "[email protected]"
    pinterest: "PinterestName"
    instagram: "InstagramName"
    reddit: "RedditSubreddit"
    slackinvite:
      name: "technottingham"
      code: "enQtNTgxNTYxMTExOTU5LTgxMDVjODUxYWI3MzNjOTJlMWUyMTYxNGEyNzYxNGYxNTExMWU0MmFkYjc5ZjI5MzY4ZmQ3MDdjZjdkNDg0ZDA"
    slackworkspace:
      name: "technottingham"
    facebook: "FacebookName"
    tiktok: "TikTokName"
    telephone: "0123456789"
    misc:
      - name: "Discord"
        url: "https://www.discord.com/"
        icon: "super-tiny-icons/discord.svg"
      - name: "YouTube"
        url: "https://youtube.com"
        icon: "super-tiny-icons/youtube.html"

Additional context
If you would like this feature, I will raise a PR for it.

Add Katex Support

I would like to use it as a data science studies repository. For this, some math type setting is a prerequisite.

I had followed some tutorials to implement Katex, but it's not working, so i thought ask some help here.

Do you consider it plausible for this theme? If yes, I can try to implement this, but I need some road tip do go ahead.

And many thanks for this theme. It's really amazing!

Only <h2>showing in toc

Describe the bug
The table of contents (toc) generated doesn't include anything other than level two headers, ignoring the config.yaml settings.

To Reproduce
example on the example site

Expected behaviour
I'd expect it to behave in accordance with the config.yaml settings for the TOC.

Screenshots
If applicable, add screenshots to help explain your problem.

Additional context
A (possibly naiive) fix would be to change the toc.html partial to:

{{ $headings := findRE "<h2.*?>(.|\n])+?</h2>" .Content }}
{{ if ge (len $headings) 2 }}
  <nav class="toc" aria-labelledby="toc-heading">
    <h2 id="toc-heading">{{ T "table_of_contents" }}</h2>
    {{ .Page.TableOfContents }}
  </nav>
{{ end }}

However it left an extra <nav>. It's fine for me, I'm just not sure if that'll confuse the generator or someone at some point.

<nav class="toc" aria-labelledby="toc-heading">
    <h2 id="toc-heading">Table of contents</h2>
    <nav id="TableOfContents">

I think the proper fix would to change the toc.html to this:

<div>
    <h2>Table Of Contents</h2>
    {{ .Page.TableOfContents }}
</div>

And then adjust the css to use the generated class, but there'd be no aria-labelledby class, and I'm unsure what that's used for.

Documentation for "figureCupper"

Hey, I'm sorry, this is a "need help" post. I have read through your code for "figureCupper" and cannot ascertain how to specify the options for figures for options other than command = "Resize". I realise the height and/or width need to be set, but how to syntactically do that is escaping me. Is there a guide somewhere for this?

sitemap.xml file?

Hi again @zwbetz-gh, I'm trying to configure SEO for my blog and I could not find the sitemap.xml file? Any idea to do SEO on this Hugo blog? Thank you so much for your help!

Couldn't be published to github

Describe the bug

I followed instructions to install cupper-hugo-theme from here. After that, i followed instructions to publish static site to github from here. But, an error comes up from github repository setting page:

Your site is having problems building: The tag image on line 129 in themes/cupper-hugo-theme/exampleSite/content/post/migrate-from-jekyll.md is not a recognized Liquid tag. For more information, see https://help.github.com/articles/page-build-failed-unknown-tag-error/.

To Reproduce
Steps to reproduce the behavior:

1. Follow instructions from https://gohugo.io/getting-started/quick-start/
   • You should replace a theme with cupper-hugo-theme.
2. Follow instructions from https://gohugo.io/hosting-and-deployment/hosting-on-github/ to host website on github
3. Go to setting page of repository.

$ ls
archetypes  config.toml  content  data  deploy.sh  layouts  public  resources  static  themes

$ ls public/
android-chrome-192x192.png  apple-touch-icon.png  categories  favicon-16x16.png  favicon-96x96.png  images      index.xml  mstile-150x150.png     site.webmanifest  tags
android-chrome-512x512.png  browserconfig.xml     css         favicon-32x32.png  favicon.ico        index.html  js         safari-pinned-tab.svg  sitemap.xml

Screenshots

Desktop (please complete the following information):

• OS : macOS
• Browser : chrome

Markup in expandable, no longer rendering

Describe the bug
As of this morning markup inside the expandable tags is no longer rendering correctly. This is observable on both the demo-site as well as my local hosted site.

To Reproduce
Steps to reproduce the behaviour:

• open the demo site: https://themes.gohugo.io//theme/cupper-hugo-theme/cupper-shortcodes/#expandable
• expand the demo-expandable
• notice that the link in markup is no longer rendered as such

Tested:

• Tried both Chrome Version 83.0.4103.61 (Official Build) (64-bit) & Firefox 76.0.1 (64-bit)
• Tried different markup locally:
  • double-empty-space new lines (result in no new-line with visible double-space)
  • tables (result in wall of text and pipe-symbols)

Expected behaviour
The markup inside these expandable tags to render as usual

Screenshots
Chrome:

Firefox:

Desktop (please complete the following information):

• OS: MacOS Catalina 10.15.4 (19E287)
• Browser: Chrome Version 83.0.4103.61 (Official Build) (64-bit) & Firefox 76.0.1 (64-bit)

Smartphone (please complete the following information):

• did not try

'config.yaml' file encoding problem

Describe the bug
I used 'UTF-8' encoding to edit the 'config.yaml' file, the content was in Chinese, but after executing 'hugo' command on the console, the file encoding changed from 'UTF-8' to 'Windows1252', the content in Chinese was confused. However, the website content displayed normally.

Why does it happen ? I want to execute the 'hugo' command on the console without changing the encoding of the 'config.yaml' file.

---

before runing command:

baseURL: https://ddq233.github.io/
languageCode: en-us
defaultContentLanguage: zh-cn
title: DDQ的笔记
theme: cupper

after runing command:

baseURL: https://ddq233.github.io/
languageCode: en-us
defaultContentLanguage: zh-cn
title: DDQ的笔记
theme: cupper

Date translation

Is your feature request related to a problem? Please describe.
I'm trying to use this method to translate months.

Describe the solution you'd like
How to incorporate this solution in the template?
Can I use a solution without modification on theme files? (update in mind)

Describe alternatives you've considered
Incorporate a translation method with i18n config for time-date translation, as Go doesn't support it yet

Additional context
I'm still a newbie in coding, but have some knowledge.
Thanks for helping me!

Proposed for PR for enhanced font sizing

Is your feature request related to a problem? Please describe.
For high density displays (e.g. 2K/4K on windows when using the default scaling (100%) the theme's fonts are badly sized (screenshot to be provided later).

Describe the solution you'd like
Replacing the current CSS:

html {
    font-size: calc(1em + 0.33vw);
}

with (work in progress) -- I'd supply the PR:

:root {
    --min-font-size: 18px;
    --max-font-size: 32px;
    --main-width-in-chars: 55;
    --nav-width: 95vw;
    --main-width: 70vw;
    --body-font-multiplier: 1;
    --body-font-size: 1rem;
}

/* Fall back base font-size for old browsers */
html {
    font-size: 16px;
}

@media screen and (min-width: 1376px) {
    html {
        font-size: 17px;
    }
}

@media screen and (min-width: 1536px) {
    html {
        font-size: 19px;
    }
}
@media screen and (min-width: 1600px) {
    html {
        font-size: 20px;
    }
}

@media screen and (min-width: 1728px) {
    html {
        font-size: 21px;
    }
}

@media screen and (min-width: 1880px) {
    html {
        font-size: 23px;
    }
}

@media screen and (min-width: 2048px) {
    html {
        font-size:25px;
    }
}

@media screen and (min-width: 3172px) {
    html {
        font-size:32px;
    }
}

body {
    font-size: 1.125rem;
}
/* End of Fall back base font-size for old browsers */

/* Set the base font-size using the method supported by the browser
   1. clamp & calc
   2. min, max, and calc
   3. calc plus media query
*/
@supports (font-size: clamp(var(--min-font-size), calc(var(--main-width) / (var(--main-width-in-chars) * var(--body-font-multiplier))), var(--max-font-size))) {
    html {
        font-size: clamp(var(--min-font-size), calc(var(--main-width) / (var(--main-width-in-chars) * var(--body-font-multiplier))), var(--max-font-size));
    }
}

@supports ((font-size: min(max(var(--min-font-size), calc(var(--main-width) / (var(--main-width-in-chars) * var(--body-font-multiplier)))), var(--max-font-size))) and (not (font-size: clamp(var(--min-font-size), calc(var(--main-width) / (var(--main-width-in-chars) * var(--body-font-multiplier))), var(--max-font-size))))) {
    html {
        font-size: min(max(var(--min-font-size), calc(var(--main-width) / (var(--main-width-in-chars) * var(--body-font-multiplier)))), var(--max-font-size));
    }
}

@supports ((font-size: calc(var(--main-width) / (var(--main-width-in-chars) * var(--body-font-multiplier)))) and (not (font-size: min(max(var(--min-font-size), calc(var(--main-width) / (var(--main-width-in-chars) * var(--body-font-multiplier)))), var(--max-font-size)))) and (not (font-size: clamp(var(--min-font-size), calc(var(--main-width) / (var(--main-width-in-chars) * var(--body-font-multiplier))), var(--max-font-size))))) {
    html {
        font-size: calc(var(--main-width) / (var(--main-width-in-chars) * var(--body-font-multiplier)));
    }
    @media screen and (min-width: 3172px) {
        html {
            font-size: var(--max-font-size);
        }
    }
}
/* End Set the base font-size using the method supported by the browser */

/* Override the body font-size via var, if supported */
@supports (font-size: var(--body-font-size)) {
    body {
        font-size: var(--body-font-size);
    }
}
/* End Override the body font-size via var, if supported */

.main-and-footer > div {
    max-width: var(--main-width);
}

Additional Context

Here is a screenshot on 2K display at almost full sreen window size (so slightly less than 2048px). I apologize for the politics -- the only site I have using Cupper is political.

Things start to go wonky at about 1376px (that is with no scaling; with a typical scaling factor a 2K display doesn't quite get to 1376px in the browser) of browser pixel width.

Menu from directory structure

As far as i can tell, menu layout has to be explicitly declared in the config.(toml/yaml/json).

Some themes infer the menu layout from directory structure, which would be nice for cupper aswell :)

Hugo assumes that the same structure that works to organize your source content is used to organize the rendered site.

https://gohugo.io/content-management/organization/

Alt text for logo

Is your feature request related to a problem? Please describe.
Alt text on the logo is an empty string. Setting the alt text to something meaningful is necessary for accessibility.

Describe the solution you'd like
I found that it worked well to add a key in the config file called logoAltText and then replace the line that inserts the logo with:

 <img src="{{ "images/logo.svg" | relURL }}" alt="{{ .Site.Params.LogoAltText }}" >

Describe alternatives you've considered
Aria text already describes it as a logo, so that might be sufficient, but sometimes the logo has more details that might be helpful to include in alt text.

Responsive/scrollable table.

Is your feature request related to a problem? Please describe.
I have a blog post with a big table (lot of text and entries). The display is chaotic with text going overthe columns.

Describe the solution you'd like
I would like to add a scrollbar when the text is to large for the table.

I propose to add these two line to the css relative to table.

display: block;
overflow: scroll;

So the css will be like:

table {
    text-align: left;
    table-layout: fixed;
    width: 100%;
    border-collapse: collapse;
    display: block;
    overflow: scroll;
}

Describe alternatives you've considered
A second possibility is to create a shortcode. But I don't think it's necessary.

Emoji color inverts when dark mode is enabled

Describe the bug
A clear and concise description of what the bug is.

When you have emoji in your article (e.g. 😄🤔🤯), turning on the dark mode will invert the emoji colors

To Reproduce
Steps to reproduce the behavior:

1. Add an emoji in your article
2. Click the dark mode toggle button to enable dark mode

Expected behavior
A clear and concise description of what you expected to happen.

Emoji shouldn't be color inverted.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: Any operating system would occur
• Browser [e.g. chrome, safari] Same
• Version [e.g. 22] *

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context
Add any other context about the problem here.

This is occurred because markdown translation to html codes will make all the text in paragraph tag inside your article.
The paragraph text colors are changed by dark mode toggle.
The logic of the toggle is just doing invert using css.

Syntax highlighting other languages than html

Hi,

I see that cupper uses prismjs to syntax highlight code.
When I use the documentation example, it works (HTML):
```html
But when I try with an other prismjs supported language, it doesn't works:
```sql
My code stays non-colored.

How can I add more languages in the default installed prismjs ?

How to create the archives page?

It seems that there is no archives page in cupper-hugo-theme, how could I create one ?Thank you.

Unfixed navigation on dark mode toggle (Firefox)

Description
When in dark mode, the navigation on the left no longer sticks as the user scrolls, it gets stuck at the top.

To Reproduce

Steps to reproduce the behavior:

1. Open demo in firefox on desktop
2. Toggle darkmode on
3. Scroll down to see unfixed nav

Expected behavior
The navigation, like in the light mode, should follow the user as they scroll up and down the page.

System info

• OS: Windows
• Firefox
• Version 67.0.3 (64-bit)

Screenshot

Error whle using Cupper Theme

Describe the bug
Tried to use Cupper theme in Hugo site. It does not work

Gives below error :

themes/cupper-hugo-theme-master/layouts/partials/head.html:14:1": parse failed: template: partials/head.html:14: unclosed action

To Reproduce
Just integrate into the new Hugo site without any changes and run the Hugo server, and you will see the error.

Expected behavior
Ideally, it should run with a basic cupper theme.

Desktop (please complete the following information):

• OS: Ubuntu 20.04 LTS - WSL

Setting dark mode by default makes website load in lightmode for a split second.

I really like dark mode, and I love the setting for making it a default, but it seems to me that the implementation lacks a bit in terms of results, as most times you can clearly tell it's loading the light colors and then it switches to dark mode.

Installation Instructions clarification

This may need some clarification.
Most of the themes use git clone, not sure why your install is different.
https://github.com/gohugoio/hugoThemes#installing-a-single-theme

Installation
From the root of your site:

git submodule add https://github.com/zwbetz-gh/cupper-hugo-theme.git themes/cupper-hugo-theme

Results in:
$ git submodule add https://github.com/zwbetz-gh/cupper-hugo-theme.git themes/cupper-hugo-theme
fatal: not a git repository (or any of the parent directories): .git
$

Code block background colors controlled by element.style and not css

Describe the bug
Trying to set the background of Code blocks but is getting overran by element.style in either light or dark mode

To Reproduce
Steps to reproduce the behavior:

1. Write a post
2. Using three ticks to start and three ticks to finish the code block
3. In Light mode, the code blocks are dark gray with dark font. In Dark mode, the code blocks are light grey with light font.

Expected behavior
I honestly don't care what color the blocks are. I just need it to be readable.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context
Add any other context about the problem here.

Menu: divider, '-' or hr, and non-linkable links

Site: https://theologic.us
Github: https://github.com/joelouthan/theologic.us

Issue

Because I cannot see this in the .css file, I don't know how menu.nav is controlled and displayed.

Solution Requested

As you can see within my blog, I would like a way to organize my links with:

• non-linkable headers (without the bookmark icon as not to be confusing)
• headers with font weight similar to h1, h2, etc..
• And hr or '-' or horizontal lines

Is it possible to add something like menu.divider or other menu items? If so, how do you do that?

Describe alternatives you've considered
Right now, I am sticking text in under menu.nav because that is the only menu.nav I am aware of. I don't know how to add more different types of menu items other than menu.nav.

mysite\config.toml:1:1": unmarshal failed: Near line 0 (last key parsed ''): bare keys cannot contain ':'

I apologize if this is truly a naive oversight.

I copied the config.yaml code to config.toml on Virtual Studio Code under my new hugo site;
when I run hugo server I get this error

\config.toml:1:1": unmarshal failed: Near line 0 (last key parsed ''): bare keys cannot contain ':'

I'm working from Command Prompt as Administrator on Windows.
The theme has been cloned to the site folder, which is on my Desktop.
The Demo Site seems to run fine on my local server.

Let me know if you need more information.
I really appreciate any help, and the fact that you created such a great theme.

String title instead of logo.svg

Is your feature request related to a problem? Please describe.

When there is no available personalized logo yet and don't want to use the default logo, it would be nice if we can just put a simple string title there.

Describe the solution you'd like
A simple title string will do.

Thank you.

Guidance on what to upstream to you and what not

For lack of a Discussion section for this repo:

I have a modified version of this theme[1] at https://github.com/danielfdickinson/cupper-hugo-dfd-x. I would like still be able to upstream things to you that you might be interested in, but as you may recall I also make changes that you are not interested in.

I'd like some guidance on what changes you might want to merge.

So far in the new theme I have made the following changes (besides marking it being different from your theme, with acknowledgments of your theme as the basis of the new theme):

1. On Netlify I disabled Hugo's minification and added the checklinks, html-validator, and minify-html plugins.
   1. checklinks has caught some broken links in the demo pages
   2. html-validator reported a 'whack' of complaints, which I have addressed in my version of the theme. I know not all the warnings are applicable for you, but if you could give me some idea of what fixes from the batch at https://github.com/danielfdickinson/cupper-hugo-dfd-x/pull/5 you'd be interested in, I could upstream those.
2. I have made the theme a module, and by using the environment variable HUGO_MODULE_REPLACEMENTS on Netlify, I am able to do CI against the current version of the theme by deploying exampleSite. I'd be happy to upstream that, if you wish.

I have more changes I'll be merging into the new theme from overrides I made on one of my websites (including the typography you don't need, along with other quirks you probably won't be interested in, but there are updates I think you might want).

[1] It's not a fork in that it's not a GitHub fork, although it is a fork of this project. I do have a GitHub fork as well, to make sending things that are applicable to you as PRs easier.

syntax highlight for R code chunk in Rmd file

Hi, it seems that R code chunks in Rmd files are not highlighted. Any idea how to enable it? Thanks!

To reproduce the issue, create a new site with this theme

blogdown::new_site(theme = "zwbetz-gh/cupper-hugo-theme")
blogdown::serve_site()

Then, go to the Blog and click the hello R markdown post. The syntax highlighting does not work on the R code chunks.