Skip to content

Added color to callout varieties #212

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
Apr 3, 2025
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
52 changes: 52 additions & 0 deletions assets/css/v2/style.css
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,12 @@
--color-divider: #cccccc;
--color-tabs-divider: #00000033;
--color-codeblock-code-with-comment: #00963926;
--color-callout-warning-primary: 0.65 0.188 24;
--color-callout-warning-shadow: 0.65 0.188 24 / 20%;
--color-callout-caution-primary: 0.8 0.1613 71.21;
--color-callout-caution-shadow: 0.8 0.1613 71.21 / 20%;
--color-callout-important-primary: 0.36 0 0;
--color-callout-important-shadow: 0.23 0 0 / 7.06%;

--code-copy-icon-height: 1rem;
--code-copy-icon-width: 1rem;
Expand Down Expand Up @@ -1108,6 +1114,52 @@ blockquote ul {
margin: 0 0 1rem 1rem;
}

blockquote.call-out {
padding: 0.5rem;

.call-out-type {
display: block;
padding: 0.25rem 0.5rem;
margin: -0.5rem 0 0.5rem -0.5rem;
width: calc(100% + 1rem);
font-weight: 500;
}

br {
display: none;
}
}

blockquote.caution {
--color-shadow: oklch(var(--color-callout-caution-shadow));
border: 1px solid oklch(var(--color-callout-caution-primary));

.call-out-type {
background-color: oklch(var(--color-callout-caution-shadow));
border-bottom: 1px solid oklch(var(--color-callout-caution-primary));
}
}

blockquote.warning {
--color-shadow: oklch(var(--color-callout-warning-shadow));
border: 1px solid oklch(var(--color-callout-warning-primary));

.call-out-type {
background-color: oklch(var(--color-callout-warning-shadow));
border-bottom: 1px solid oklch(var(--color-callout-warning-primary));
}
}

blockquote.important {
--color-shadow: oklch(var(--color-callout-important-shadow));
border: 1px solid oklch(var(--color-callout-important-primary));

.call-out-type {
background-color: oklch(var(--color-callout-important-shadow));
border-bottom: 1px solid oklch(var(--color-callout-important-primary));
}
}

/* Tabs */
.tabs-container {
/* border-bottom: 1px solid black; */
Expand Down
2 changes: 1 addition & 1 deletion exampleSite/content/test-product/_index.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
---
description: Test pages for nginx-hugo-theme
title: Test pages for nginx-hugo-theme
title: Test pages
weight: 100
---
65 changes: 65 additions & 0 deletions exampleSite/content/test-product/call-out/all-callouts.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,65 @@

---
description: All Callouts
title: All Callouts
weight: 100
---


## Plain Callouts
These are the main callout types that may be used to bring attention to a section of text. You should prefer to use [Side Callouts](#side-callouts) instead.

{{<call-out>}}
This is a plain callout with no title. It has a [link](#plain-callouts) to a heading on this page. Its shortcode is `<call-out>`.
{{</call-out>}}

{{<call-out "" "Custom title">}}
This is a plain callout with a title. It has a [link](#plain-callouts) to a heading on this page. Its shortcode is `<call-out>` with a custom title parameter.
{{</call-out>}}

{{<before-you-begin>}}
This is a plain callout with a default title for its type. It has a [link](#plain-callouts) to a heading on this page. Its shortcode is `<before-you-begin>`.
{{</before-you-begin>}}

## Side Callouts

Naturally, callouts should contain less text within them than the text it lives next to. We do this for several reasons. Firstly, it looks weird to have a big empty space in the primary content area. Secondly, if you have more text in the callout, then it stops being a callout. I have asked an LLM to lengthen this passage.

{{<call-out "side-callout">}}
This is a plain side callout with no title. It has a [link](#plain-callouts) to a heading on this page. Its shortcode is `<call-out>` with the `.side-callout` class.
{{</call-out>}}

When designing effective web layouts, it's important to maintain proper balance between primary content and supplementary elements. Callouts serve as attention-grabbing devices that highlight key information, but they should remain subordinate to the main content flow. This hierarchy helps users navigate your page intuitively, guiding their attention appropriately. A well-designed callout complements the surrounding text rather than competing with it.

Additionally, concise callouts tend to be more effective at capturing user attention. When a callout becomes too verbose, users are less likely to read it entirely, defeating its purpose. The visual weight of callouts should align with their informational importance - brief, impactful statements create better engagement than lengthy explanations. Remember that white space itself is a powerful design element, creating visual breathing room that enhances readability and focus. Ultimately, the most successful callouts follow the principle of "less is more," delivering maximum impact through minimal interruption to the user's reading experience.

{{<call-out "side-callout" "Custom title">}}
This is a plain side callout with a custom title. It has a [link](#plain-callouts) to a heading on this page. Its shortcode is `<call-out>` with the `.side-callout` class, and a custom title.
{{</call-out>}}

## Important, but not urgent

This is a weird exception callout that adds just a little extra contrast to the callout.

{{<important>}}
This is an Important callout. There was previously a bug with **bold text** that we should be aware of and continue to check for. This callout was invoked with the `<warning>` shortcode. It has no custom title.
{{</important>}}

## Loud Callouts

These callouts should be used sparingly: only when it is imperative to capture the user's attention.

{{<caution>}}
This is a Caution callout. There was previously a bug with **bold text** that we should be aware of and continue to check for. This callout was invoked with the `<caution>` shortcode. It has no custom title.
{{</caution>}}

This callout especially should be used **VERY** judiciously.

{{<warning>}}
This is a Warning callout. There was previously a bug with **bold text** that we should be aware of and continue to check for. This callout was invoked with the `<warning>` shortcode. It has no custom title.
{{</warning>}}


{{<call-out "warning" "Custom warning title">}}
This is a Warning callout with a custom title. There was previously a bug with **bold text** that we should be aware of and continue to check for. This callout was invoked with the `<call-out>` shortcode with the `.warning` class, and a custom title.
{{</call-out>}}
2 changes: 1 addition & 1 deletion exampleSite/hugo.toml
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
baseURL = 'https://nginx.org'
languageCode = 'en-us'
title = 'nginx-hugo-theme example site'
title = 'Example Site'


[module]
Expand Down
4 changes: 2 additions & 2 deletions layouts/shortcodes/caution.html
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
<blockquote class="caution">
<div><strong>Caution:</strong><br/> {{ .Inner | markdownify }}</div>
<blockquote class="caution call-out">
<div><strong class="call-out-type">Caution</strong><br/> {{ .Inner | markdownify }}</div>
</blockquote>
4 changes: 2 additions & 2 deletions layouts/shortcodes/deprecated.html
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
<blockquote class="warning">
<div><strong>Deprecated:</strong><br/> {{ .Inner | markdownify }}</div>
<blockquote class="warning call-out">
<div><strong class="call-out-type">Deprecated</strong><br/> {{ .Inner | markdownify }}</div>
</blockquote>
4 changes: 2 additions & 2 deletions layouts/shortcodes/important.html
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
<blockquote class="important">
<div><strong>Important:</strong><br/> {{ .Inner | markdownify }}</div>
<blockquote class="important call-out">
<div><strong class="call-out-type">Important</strong><br/> {{ .Inner | markdownify }}</div>
</blockquote>
4 changes: 2 additions & 2 deletions layouts/shortcodes/warning.html
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
<blockquote class="warning">
<div><strong>Warning:</strong><br/> {{ .Inner | markdownify }}</div>
<blockquote class="warning call-out">
<div><strong class="call-out-type">Warning</strong><br/> {{ .Inner | markdownify }}</div>
</blockquote>
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading