This page is left here as a reference for examples of the types of UI elements available.

Welcome to Cupper: An accessibility-friendly Hugo theme, ported from the original Cupper project. Here are some of its features:

  • Screen reader and keyboard accessible
  • Responsive
  • Numerous shortcodes
  • Toggleable dark theme
  • Toggleable table of contents per blog post

Quotes By Carl Jung

Even a happy life cannot be without a measure of darkness, and the word happy would lose its meaning if it were not balanced by sadness. It is far better to take things as they come along with patience and equanimity.
— Carl Jung

The least of things with a meaning is worth more in life than the greatest of things without it.
— Carl Jung

Who looks outside, dreams; who looks inside, awakes.
— Carl Jung

Everything that irritates us about others can lead us to an understanding of ourselves.
— Carl Jung

Knowing your own darkness is the best method for dealing with the darknesses of other people.
— Carl Jung

The meeting of two personalities is like the contact of two chemical substances: if there is any reaction, both are transformed.
— Carl Jung

There is no coming to consciousness without pain.
— Carl Jung

As far as we can discern, the sole purpose of human existence is to kindle a light of meaning in the darkness of mere being.
— Carl Jung

We cannot change anything until we accept it. Condemnation does not liberate, it oppresses.
— Carl Jung

In all chaos there is a cosmos, in all disorder a secret order.
— Carl Jung

Show me a sane man and I will cure him for you.
— Carl Jung

Expandible Inner Text

Testing out GitHub issue https://github.com/zwbetz-gh/cupper-hugo-theme/issues/36 – Multiple expandable shortcodes do not work if they have the same inner text.

Lists

Unordered

* Item 1
* Item 2
    * Item 2a
    * Item 2b
  • Item 1
  • Item 2
    • Item 2a
    • Item 2b

Ordered

1. Item 1
1. Item 2
1. Item 3
    1. Item 3a
    1. Item 3b
  1. Item 1
  2. Item 2
  3. Item 3
    1. Item 3a
    2. Item 3b
https://cupper-hugo-theme.netlify.com/

[Cupper hugo theme](https://cupper-hugo-theme.netlify.com/)

https://cupper-hugo-theme.netlify.com/

Cupper hugo theme

Blockquotes

As Kanye West said:

> We're living the future so
> the present is our past.

As Kanye West said:

We’re living the future so the present is our past.

Tables

| Animal  | Sounds |
|---------|--------|
| Cat     | Meow   |
| Dog     | Woof   |
| Cricket | Chirp  |
Animal Sounds
Cat Meow
Dog Woof
Cricket Chirp

Inline code

This `<html>` tag is inline code.

This <html> tag is inline code.

Block code

This

```
<html>
```

tag is block code. 

This

<html>

tag is block code.

note

{{< note >}}
This is a note! It's something the reader may like to know about but is supplementary to the main content. Use notes when something may be interesting but not critical.
{{< /note >}}

warning note

{{< warning >}}
This is a warning! It's about something the reader should be careful to do or to avoid doing. Use warnings when something could go wrong.
{{< /warning >}}

cmd

{{< cmd >}}
hugo server --gc
{{< /cmd >}}
hugo server --gc

code

{{< code numbered="true" >}}
<div [[[role="dialog"]]] [[[aria-labelledby="dialog-heading"]]]>
  <button [[[aria-label="close"]]]>x</button>
  <h2 [[[id="dialog-heading"]]]>Confirmation</h2>
  <p>Press Okay to confirm or Cancel</p>
  <button>Okay</button>
  <button>Cancel</button>
</div>
{{< /code >}}

1. The dialog is only announced as a dialog if it takes the `dialog` ARIA role
2. The `aria-labelledby` relationship attribute makes the element carrying the `id` it points to its label
3. The close button uses `aria-label` to provide the text label "close", overriding the text content
4. The heading is used as the dialog's label. The `aria-labelledby` attribute points to its `id`
<div role="dialog" aria-labelledby="dialog-heading"> <button aria-label="close">x</button> <h2 id="dialog-heading">Confirmation</h2> <p>Press Okay to confirm or Cancel</p> <button>Okay</button> <button>Cancel</button> </div>
  1. The dialog is only announced as a dialog if it takes the dialog ARIA role
  2. The aria-labelledby relationship attribute makes the element carrying the id it points to its label
  3. The close button uses aria-label to provide the text label “close”, overriding the text content
  4. The heading is used as the dialog’s label. The aria-labelledby attribute points to its id

syntax highlighting

To get syntax highlighting for your code, use markdown code fences, then specify the language:

```html
<div role="dialog" aria-labelledby="dialog-heading">
  <button aria-label="close">x</button>
  <h2 id="dialog-heading">Confirmation</h2>
  <p>Press Okay to confirm or Cancel</p>
  <button>Okay</button>
  <button>Cancel</button>
</div>
```



            <div role="dialog" aria-labelledby="dialog-heading">
  <button aria-label="close">x</button>
  <h2 id="dialog-heading">Confirmation</h2>
  <p>Press Okay to confirm or Cancel</p>
  <button>Okay</button>
  <button>Cancel</button>
</div>

codePen

{{< codePen VpVNKW >}}

Site error: The codePenUser param has not been set in config.toml

colors

{{< colors "#111111, #cccccc, #ffffff" >}}
  • #111111
  • #CCCCCC
  • #FFFFFF

expandable

{{< expandable label="A 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 >}}

fileTree

{{< fileTree >}}
* Level 1 folder
    * Level 2 file
    * Level 2 folder
        * Level 3 file
        * Level 3 folder
            * Level 4 file
        * Level 3 folder
            * Level 4 file
            * Level 4 file
        * Level 3 file
    * Level 2 folder
        * Level 3 file
        * Level 3 file
        * Level 3 file
    * Level 2 file
* Level 1 file
{{< /fileTree >}}
  • Level 1 folder
    • Level 2 file
    • Level 2 folder
      • Level 3 file
      • Level 3 folder
        • Level 4 file
      • Level 3 folder
        • Level 4 file
        • Level 4 file
      • Level 3 file
    • Level 2 folder
      • Level 3 file
      • Level 3 file
      • Level 3 file
    • Level 2 file
  • Level 1 file

ticks

{{< ticks >}}
* Selling point one
* Selling point two
* Selling point three
{{< /ticks >}}
  • Selling point one
  • Selling point two
  • Selling point three