diff options
author | Patrick Spek <p.spek@tyil.nl> | 2018-10-23 11:32:03 +0200 |
---|---|---|
committer | Patrick Spek <p.spek@tyil.nl> | 2018-10-23 11:32:03 +0200 |
commit | 82e2f9e1d729a15f10a44387f5bbce9148ecbd4d (patch) | |
tree | 7191a020c71e244b2e5779342fc933e9b35165d0 | |
parent | 043a2250a0a9ea1aefd96517df981e5826dcf37f (diff) |
Clean up admonition block styling
-rw-r--r-- | _plugins/admonition_md.rb | 22 | ||||
-rw-r--r-- | css/main.less | 56 |
2 files changed, 62 insertions, 16 deletions
diff --git a/_plugins/admonition_md.rb b/_plugins/admonition_md.rb index 614e09a..d22cceb 100644 --- a/_plugins/admonition_md.rb +++ b/_plugins/admonition_md.rb @@ -13,22 +13,12 @@ module Jekyll def render(context) content = super - '<div class="admonitionblock"> - <table> - <tbody> - <tr> - <td class="icon"> - <div class="title">' + @type + '</div> - </td> - <td class="content"> - <div class="paragraph">' + - Redcarpet::Markdown.new(Redcarpet::Render::HTML).render(content) + ' - </div> - </td> - </tr> - </tbody> - </table> - </div>' + '<section class="admonition"> + <div class="admonition-title">' + @type + '</div> + <div class="admonition-content"> + ' + Redcarpet::Markdown.new(Redcarpet::Render::HTML).render(content) + ' + </div> + </section>' end end end diff --git a/css/main.less b/css/main.less index eaccb43..c714b0e 100644 --- a/css/main.less +++ b/css/main.less @@ -72,3 +72,59 @@ article { width: 50% } } + +section.admonition { + background-color: #f6f6f6; + border: 1px solid #d7d7d7; + margin: .5rem auto 1.74rem auto; + width: 85%; + max-width: @mainWidth * .9; + padding: 1.5rem; + + .admonition-title { + display: flex; + align-items: center; + justify-content: center; + font-size: 1.5rem; + text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); + } + + p { + margin: 0; + } +} + +@media(min-width: @mainWidth) { + section.admonition { + display: grid; + + grid-template-columns: [title] .25fr [body] 1fr [end]; + + .admonition-title { + grid-column-start: title; + grid-column-end: body; + } + + p { + grid-column-start: body; + grid-column-end: end; + + padding-left: 10px; + border-left: 1px solid #ddd; + } + } +} + +@media(max-width: @mainWidth) { + section.admonition { + .admonition-title { + text-align: center; + margin-top: 0; + } + + p { + padding-top: 10px; + border-top: 1px solid #ddd; + } + } +} |