diff --git a/README.md b/README.md index ade37d51..7c621e64 100755 --- a/README.md +++ b/README.md @@ -15,6 +15,7 @@ Hermit is a minimal and fast theme for Hugo. It's built for bloggers who want a * Extremely lightweight and load fast. No third party framework, no unnecessary code. * All code fields feature syntax highlighting and a code-copy function * Responsive & Retina Ready. Scales gracefully from a big screen all the way down to the smallest mobile phone. Assets in vector format ensures that it looks sharp on high-resolution screens. +* Admonition shortcodes for note, tip and warning to highlight parts of a blog post **[Theme Demo](https://hugo-theme-hermit.netlify.com/)** (uses contents and config from the `exampleSite` folder) @@ -73,6 +74,18 @@ The following icons are supported, please make sure the `name` filed is exactly If that's not enough, you can see [Overriding templates](#overriding-templates) section. +#### Admonition Shortcodes + +Shortcodes are available for note, tip and warning. + +```md +{{% note %}} +This will be shown in a box with note highlight. +{{% /note %}} +``` + +See the [shortcode docs](https://gohugo.io/content-management/shortcodes/) from hugo. + ### Manage content * Keep your regular pages in the `content` folder. To create a new page, run `hugo new page-title.md` @@ -85,12 +98,15 @@ If that's not enough, you can see [Overriding templates](#overriding-templates) In Hugo, layouts can live in either the project’s (root) or the themes’ layout folders, any template inside the root layout folder will override theme's layout that relative to it, for example: `layouts/_default/baseof.html` will override `themes/hermit/layouts/_default/baseof.html`. So, you can easily customize the theme without edit it directly, which makes updating the theme easier. Here's some common customizations: ##### Customize social icons + You can modify or add any svg icons in site's `layouts/partials/svg.html`. ##### Customize comment system + We only have built-in support for Disqus at the moment, if that doesn't fit your needs, you can just add html to site's `layouts/partials/comments.html`. ##### Add custom analytics + If you prefer to use different analytics system other than google analytics, then add them inside `layouts/partials/analytics.html`. #### Customize CSS diff --git a/assets/scss/_admonition.scss b/assets/scss/_admonition.scss new file mode 100644 index 00000000..b6adfe9a --- /dev/null +++ b/assets/scss/_admonition.scss @@ -0,0 +1,28 @@ +/*admonition styles */ + +.admonition-icon { + fill: $text; + width: 20px; + margin: 6px; + margin-left: -27px; + position: absolute; + top: 10px; + } + +.admonition-highlight { + border-left-width: 35px; + border-left-style: solid; + position: relative; + border-color: $admonition-highlight; + display: block; +} + +.admonition-content { + display: block; + margin: 0px; + padding: .125em 1em; + margin-top: 2em; + margin-bottom: 2em; + overflow-x: auto; + background-color: $highlight-grey; +} \ No newline at end of file diff --git a/assets/scss/_predefined.scss b/assets/scss/_predefined.scss index 7d87c02f..78e0938a 100644 --- a/assets/scss/_predefined.scss +++ b/assets/scss/_predefined.scss @@ -6,6 +6,7 @@ $light-grey: #494f5c; $dark-grey: #3B3E48; $highlight-grey: #7d828a; $midnightblue: #2c3e50; +$admonition-highlight : #0594CB; // Fonts // diff --git a/assets/scss/style.scss b/assets/scss/style.scss index 09ee3bb6..b08a28a4 100644 --- a/assets/scss/style.scss +++ b/assets/scss/style.scss @@ -2,6 +2,7 @@ @import "normalize.scss"; @import "syntax.scss"; @import "animate.scss"; +@import "admonition.scss"; /* Webkit Scrollbar Customize */ ::-webkit-scrollbar { diff --git a/layouts/partials/svg/exclamation.svg b/layouts/partials/svg/exclamation.svg new file mode 100644 index 00000000..89ef11a7 --- /dev/null +++ b/layouts/partials/svg/exclamation.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/layouts/partials/svg/lightbulb.svg b/layouts/partials/svg/lightbulb.svg new file mode 100644 index 00000000..b5d654ba --- /dev/null +++ b/layouts/partials/svg/lightbulb.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/layouts/partials/svg/sticky-note.svg b/layouts/partials/svg/sticky-note.svg new file mode 100644 index 00000000..4b577b88 --- /dev/null +++ b/layouts/partials/svg/sticky-note.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/layouts/shortcodes/note.html b/layouts/shortcodes/note.html new file mode 100644 index 00000000..e50fec89 --- /dev/null +++ b/layouts/shortcodes/note.html @@ -0,0 +1,10 @@ +{{ $_hugo_config := `{ "version": 1 }` }} + + \ No newline at end of file diff --git a/layouts/shortcodes/tip.html b/layouts/shortcodes/tip.html new file mode 100644 index 00000000..0f93e7d4 --- /dev/null +++ b/layouts/shortcodes/tip.html @@ -0,0 +1,10 @@ +{{ $_hugo_config := `{ "version": 1 }` }} + + \ No newline at end of file diff --git a/layouts/shortcodes/warning.html b/layouts/shortcodes/warning.html new file mode 100644 index 00000000..01605436 --- /dev/null +++ b/layouts/shortcodes/warning.html @@ -0,0 +1,10 @@ +{{ $_hugo_config := `{ "version": 1 }` }} + + \ No newline at end of file