https://github.com/kaushalmodi/ox-hugo/issues/119master
Kaushal Modi
8 years ago
parent
0cf366cb21
commit
cec4882d07
2 changed files with 324 additions and 0 deletions
@ -0,0 +1,173 @@ |
||||
+++ |
||||
title = "Alert Shortcode Lookalike" |
||||
tags = ["shortcode", "alert", "special-block", "attr_html"] |
||||
draft = false |
||||
+++ |
||||
|
||||
`ox-hugo` Issue #[119](https://github.com/kaushalmodi/ox-hugo/issues/119) |
||||
|
||||
Below doesn't export to an `alert` shortcode, but the exported |
||||
Markdown contains HTML that resembles the [shortcode code](https://github.com/gcushen/hugo-academic/blob/master/layouts/shortcodes/alert.html) (Courtesy: |
||||
[`hugo-academic` theme](https://github.com/gcushen/hugo-academic)): |
||||
|
||||
```html |
||||
<div class="alert alert-{{ .Get 0 }}"> |
||||
{{ .Inner }} |
||||
</div> |
||||
``` |
||||
|
||||
There are few days to mimic that. |
||||
|
||||
|
||||
## CSS {#css} |
||||
|
||||
[Source for **alert** CSS](https://github.com/gcushen/hugo-academic/blob/66b71fa2f6a41f26d6c3b202fef212fab151112e/layouts/partials/css/academic.css#L1370-L1426) |
||||
|
||||
Note 1 |
||||
: The `ox-hugo` test site is not using **FontAwesome**, so |
||||
using the unicode symbols 🛈 and ⚠ instead. |
||||
|
||||
Note 2 |
||||
: Also, due to the limitation that Markdown text cannot be |
||||
simply wrapped in `div`, a hack is used, that requires |
||||
using an empty `div` pair. So that requires overriding a |
||||
bit of the default CSS from the theme. |
||||
|
||||
|
||||
### CSS Override for Academic theme {#css-override-for-academic-theme} |
||||
|
||||
In summary, these overrides over the theme CSS would suffice: |
||||
|
||||
```css |
||||
/* Because of the empty div hack, the first paragraph will be the |
||||
second child in the div. So use "p:nth-child(2)" instead of the |
||||
original "p:first-child". */ |
||||
div.alert p:nth-child(2)::before { |
||||
position: absolute; |
||||
top: -0.5rem; |
||||
left: -2rem; |
||||
font-family: 'FontAwesome'; |
||||
font-size: 1.5rem; |
||||
color: #fff; |
||||
content: '\f05a'; |
||||
/* Use below if not using FontAwesome */ |
||||
/* content: '🛈'; */ |
||||
width: 1.5rem; |
||||
text-align: center; |
||||
} |
||||
|
||||
div.alert-warning p:nth-child(2):before { |
||||
content: '\f071'; |
||||
/* Use below if not using FontAwesome */ |
||||
/* content: '⚠'; */ |
||||
} |
||||
``` |
||||
|
||||
<style> |
||||
.alert { |
||||
padding: 15px; |
||||
margin-bottom: 20px; |
||||
border: 1px solid transparent; |
||||
border-radius: 4px; |
||||
} |
||||
div.alert { |
||||
border-radius: 10px; |
||||
margin-bottom: 1rem; |
||||
} |
||||
|
||||
div.alert p { |
||||
position: relative; |
||||
display: block; |
||||
font-size: 1rem; |
||||
margin-left: 2rem; |
||||
margin-top: 0; |
||||
margin-bottom: 0; |
||||
} |
||||
|
||||
/* Because of the empty div hack, the first paragraph will be the |
||||
second child in the div. So use "p:nth-child(2)" instead of the |
||||
original "p:first-child". */ |
||||
div.alert p:nth-child(2)::before { |
||||
position: absolute; |
||||
top: -0.5rem; |
||||
left: -2rem; |
||||
font-family: 'FontAwesome'; |
||||
font-size: 1.5rem; |
||||
color: #fff; |
||||
/* content: '\f05a'; */ |
||||
content: '🛈'; |
||||
width: 1.5rem; |
||||
text-align: center; |
||||
} |
||||
|
||||
/* Because of the empty div hack, the first paragraph will be the |
||||
second child in the div. So use "p:nth-child(2)" instead of the |
||||
original "p:first-child". */ |
||||
div.alert-warning p:nth-child(2):before { |
||||
/* content: '\f071'; */ |
||||
content: '⚠'; |
||||
} |
||||
|
||||
div.alert a { |
||||
color: rgba(255,255,255,0.9); |
||||
text-decoration: none; |
||||
border-bottom: solid 1px #e4e4e4; |
||||
transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out; |
||||
} |
||||
|
||||
div.alert a:hover { |
||||
border-bottom-color: transparent; |
||||
color: rgba(255,255,255,0.5) !important; |
||||
} |
||||
|
||||
.alert-note { |
||||
color: #fff; |
||||
background-color: #03A9F4; /* Material LightBlue500 */ |
||||
border-color: #bce8f1; |
||||
} |
||||
|
||||
.alert-warning { |
||||
color: #fff; |
||||
background-color: #f44336; /* Material Red500 */ |
||||
border-color: #ebccd1; |
||||
} |
||||
</style> |
||||
|
||||
|
||||
## Alert using Special Block {#alert-using-special-block} |
||||
|
||||
<div class="alert-note alert"> |
||||
<div></div> |
||||
|
||||
Here's a tip or note. |
||||
|
||||
This can be multi-paragraph too. |
||||
|
||||
</div> |
||||
|
||||
<div class="alert-warning alert"> |
||||
<div></div> |
||||
|
||||
Here's a warning! |
||||
|
||||
This can be multi-paragraph too. |
||||
|
||||
</div> |
||||
|
||||
|
||||
## Alert using only `#+ATTR_HTML` {#alert-using-only-attr-html} |
||||
|
||||
This will work only if the message is a single paragraph. |
||||
|
||||
<div class="alert alert-note"> |
||||
<div></div> |
||||
|
||||
Here's a tip or note. |
||||
|
||||
</div> |
||||
|
||||
<div class="alert alert-warning"> |
||||
<div></div> |
||||
|
||||
Here's a warning! |
||||
</div> |
||||
Loading…
Reference in new issue