Expand callouts functionality (#130)
* Expand callouts functionality Expand the callouts functionality to include a base set of types and allow for more customization. * Grammar * Include documentation for callouts in `README.md`main
Kyle Donnelly
GitHub
parent
e5d9b6bdb7
commit
0de4e95a87
39
README.md
39
README.md
|
|
@ -65,6 +65,45 @@ Note: CSS files should be placed under the `assets` directory e.g. `assets/css/f
|
|||
customcss = ["css/first.css", "css/second.css"]
|
||||
```
|
||||
|
||||
### Callouts
|
||||
|
||||
There are five different types of callout, including this themes original callout and a custom one as well. These callouts are compatible with both light and dark theme modes.
|
||||
|
||||
|
||||
|
||||
|
||||
#### Original
|
||||
|
||||
This steup is to ensure backwards compatibility for previous callouts.
|
||||
|
||||
```markdown
|
||||
{{< callout emoji="⚡️" text="Original callout." >}}
|
||||
```
|
||||
|
||||
#### Alert
|
||||
```markdown
|
||||
{{< callout type="alert" text="This is an alert callout." >}}
|
||||
```
|
||||
|
||||
#### Custom
|
||||
|
||||
This include the ability to set your own callout emoji, title, and css style element.
|
||||
|
||||
```markdown
|
||||
{{< callout type="custom" emoji="⚡️" title="Custom callout" text="This is custom text for a custom callout." style="background-color: transparent; border: 3px solid #d340e0;" >}}
|
||||
```
|
||||
|
||||
#### Tip
|
||||
|
||||
```markdown
|
||||
{{< callout type="tip" text="This is a tip callout." >}}
|
||||
```
|
||||
|
||||
#### Warning
|
||||
|
||||
```markdown
|
||||
{{< callout type="warning" text="This is a warning callout." >}}
|
||||
```
|
||||
|
||||
## Config of the Demo Site
|
||||
|
||||
|
|
|
|||
|
|
@ -162,3 +162,31 @@ a:hover {
|
|||
background: royalblue;
|
||||
color: whitesmoke ;
|
||||
}
|
||||
|
||||
.callout-alert {
|
||||
color: #ffffff;
|
||||
background-color: transparent;
|
||||
border-width: 3px;
|
||||
border-style: solid;
|
||||
border-color: #ff6347;
|
||||
}
|
||||
|
||||
.callout-custom {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.callout-tip {
|
||||
color: #ffffff;
|
||||
background-color: transparent;
|
||||
border-width: 3px;
|
||||
border-style: solid;
|
||||
border-color: dodgerblue;
|
||||
}
|
||||
|
||||
.callout-warning {
|
||||
color: #ffffff;
|
||||
background-color: transparent;
|
||||
border-width: 3px;
|
||||
border-style: solid;
|
||||
border-color: #ffd700;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -244,6 +244,34 @@ article .title {
|
|||
color: var(--callouctcolor);
|
||||
}
|
||||
|
||||
.callout-alert {
|
||||
color: #000000;
|
||||
background-color: transparent;
|
||||
border-width: 3px;
|
||||
border-style: solid;
|
||||
border-color: #ff6347;
|
||||
}
|
||||
|
||||
.callout-custom {
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
.callout-tip {
|
||||
color: #000000;
|
||||
background-color: transparent;
|
||||
border-width: 3px;
|
||||
border-style: solid;
|
||||
border-color: dodgerblue;
|
||||
}
|
||||
|
||||
.callout-warning {
|
||||
color: #000000;
|
||||
background-color: transparent;
|
||||
border-width: 3px;
|
||||
border-style: solid;
|
||||
border-color: #ffd700;
|
||||
}
|
||||
|
||||
.site-description {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
|
|
|||
|
|
@ -10,7 +10,6 @@ description: Here is a demo of all shortcodes available in Hugo.
|
|||
|
||||
{{< figure src="https://images.unsplash.com/photo-1560032779-0a8809186efd?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80" title="Dave Herring" >}}
|
||||
|
||||
|
||||
## Github Gist
|
||||
|
||||
{{< gist spf13 7896402 >}}
|
||||
|
|
@ -33,4 +32,22 @@ description: Here is a demo of all shortcodes available in Hugo.
|
|||
|
||||
## Callouts
|
||||
|
||||
{{< callout emoji="⚡️" text="I guess this works" >}}
|
||||
### Original
|
||||
|
||||
{{< callout emoji="⚡️" text="Original callout." >}}
|
||||
|
||||
### Alert
|
||||
|
||||
{{< callout type="alert" text="This is an alert callout." >}}
|
||||
|
||||
### Custom
|
||||
|
||||
{{< callout type="custom" emoji="⚡️" title="Custom callout" text="This is custom text for a custom callout." style="background-color: transparent; border: 3px solid #d340e0;" >}}
|
||||
|
||||
### Tip
|
||||
|
||||
{{< callout type="tip" text="This is a tip callout." >}}
|
||||
|
||||
### Warning
|
||||
|
||||
{{< callout type="warning" text="This is a warning callout." >}}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,24 @@
|
|||
|
||||
<div class="callout" style="">
|
||||
<div class="callout-inner">
|
||||
{{ $type := .Get "type" }}
|
||||
<div class='callout callout-{{ $type }}' style='{{ if eq $type "custom" }}{{ .Get "style" | safeCSS }}{{ end }}'>
|
||||
<div class="callout-inner">
|
||||
{{ if eq $type "alert" }}
|
||||
🚨 <u>Alert</u>
|
||||
<br />
|
||||
{{ .Get "text" }}
|
||||
{{ else if eq $type "custom" }}
|
||||
{{ .Get "emoji" }} <u>{{ .Get "title" }}</u>
|
||||
<br />
|
||||
{{ .Get "text" }}
|
||||
{{ else if eq $type "tip" }}
|
||||
🔎 <u>Tip</u>
|
||||
<br />
|
||||
{{ .Get "text" }}
|
||||
{{ else if eq $type "warning" }}
|
||||
⚠️ <u>Warning</u>
|
||||
<br />
|
||||
{{ .Get "text" }}
|
||||
{{ else}}
|
||||
💡 {{ .Get "text" }}
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
Loading…
Reference in New Issue