diff options
| -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; + } + } +} |