generated from nginx/template-repository
-
Notifications
You must be signed in to change notification settings - Fork 3
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
Changes from all commits
Commits
Show all changes
4 commits
Select commit
Hold shift + click to select a range
c8a90ff
Callout: Added color to callout varieties
lamATnginx 77025e1
Callout: Added class names to each strong tag
lamATnginx 10228c2
Callout: Add example site page
danielledeleo 288361c
Callout: Add playwright screenshots for example site page
nginx-jack File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 | ||
--- |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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>}} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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> |
Binary file modified
BIN
-1.38 KB
(100%)
...reenshots__/Mobile-Chrome/visual-regression.spec.js/example-site-screenshot.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified
BIN
-5.63 KB
(100%)
...c/__screenshots__/firefox/visual-regression.spec.js/example-site-screenshot.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified
BIN
-7.22 KB
(100%)
...rc/__screenshots__/webkit/visual-regression.spec.js/example-site-screenshot.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Uh oh!
There was an error while loading. Please reload this page.