diff --git a/themes/hermit_zola/.gitignore b/themes/hermit_zola/.gitignore new file mode 100644 index 0000000..364fdec --- /dev/null +++ b/themes/hermit_zola/.gitignore @@ -0,0 +1 @@ +public/ diff --git a/themes/hermit_zola/LICENSE b/themes/hermit_zola/LICENSE new file mode 100644 index 0000000..412046c --- /dev/null +++ b/themes/hermit_zola/LICENSE @@ -0,0 +1,20 @@ +The MIT License (MIT) + +Copyright (c) 2019 VersBinarii + +Permission is hereby granted, free of charge, to any person obtaining a copy of +this software and associated documentation files (the "Software"), to deal in +the Software without restriction, including without limitation the rights to +use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of +the Software, and to permit persons to whom the Software is furnished to do so, +subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS +FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR +COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER +IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN +CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. \ No newline at end of file diff --git a/themes/hermit_zola/README.md b/themes/hermit_zola/README.md new file mode 100644 index 0000000..b1ccfcc --- /dev/null +++ b/themes/hermit_zola/README.md @@ -0,0 +1,82 @@ +[![Build Status](https://travis-ci.org/VersBinarii/hermit_zola.svg?branch=master)](https://travis-ci.org/VersBinarii/hermit_zola) + +# Hermit + +> this is a port of the [Hermit theme](https://github.com/Track3/hermit) for [Zola](https://www.getzola.org/) + +Hermit is a minimal & fast Zola theme for bloggers. + +![screenshot](screenshot.png) + +[View demo](https://versbinarii.gitlab.io/blog/) + +## Installation + +First download the theme to your `themes` directory: + +```bash +$ cd themes +$ git clone https://github.com/VersBinarii/hermit_zola +``` +and then enable it in your `config.toml`: + +```toml +theme = "hermit_zola" +``` + +## Configuration + +```toml +[extra] +home_subtitle = "Some profound and catchy statement" + +footer_copyright = ' · CC BY-NC 4.0' + +hermit_menu = [ + { link = "/posts", name = "Posts" }, + { link = "/about", name = "About" } +] + +hermit_social = [ + { name = "twitter", link = "https://twitter.com" }, + { name = "github", link = "https://github.com" }, + { name = "email", link = "mailto:author@domain.com" } +] + + + +[extra.highlightjs] +enable = true +clipboard = true +theme = "vs2015" + +[extra.disqus] +enable = false +# Take this from your Disqus account +shortname = "my-supa-dupa-blog" + +[extra.author] +name = "The Author" +email = "author@domain.com" + +[extra.google_analytics] +enable = false +id = "UA-4XXXXXXX-X" +``` + +### Table of content +Table of content can be enabled by adding +``` ++++ +[extra] +toc=true ++++ +``` +to the page front matter. Icon will then appear above the page title that will +allow to toggle the ToC. + +## License + +[MIT](LICENSE) + +Thanks to [Track3](https://github.com/Track3) for creating the original! diff --git a/themes/hermit_zola/_config.yml b/themes/hermit_zola/_config.yml new file mode 100644 index 0000000..1885487 --- /dev/null +++ b/themes/hermit_zola/_config.yml @@ -0,0 +1 @@ +theme: jekyll-theme-midnight \ No newline at end of file diff --git a/themes/hermit_zola/config.toml b/themes/hermit_zola/config.toml new file mode 100644 index 0000000..33da82e --- /dev/null +++ b/themes/hermit_zola/config.toml @@ -0,0 +1,108 @@ +# Base URL of the site, the only required config argument +base_url = "https://example.com/blog" + +# Used in RSS by default +title = "Hermit Zola" +description = "My blog" +# The default language, used in RSS +default_language = "en" + +# Theme name to use +# theme = "" + +# Highlight all code blocks found +# Or enable the highlight.js in the 'extra' config section +highlight_code = false + +# Which theme to use for the code highlighting. +# See below for list of accepted values +highlight_theme = "agola-dark" + +# Whether to generate a RSS feed automatically +generate_feed = true +feed_filename = "rss.xml" + +# The number of articles to include in the RSS feed. Will include all items if +# not set (the default). +# rss_limit = 20 + +# The taxonomies to be rendered for that site and their configuration +# Example: +# taxonomies = [ +# {name = "tags", rss = true}, # each tag will have its own RSS feed +# {name = "categories", paginate_by = 5}, # 5 items per page for a term +# {name = "authors"}, # Basic definition: no RSS or pagination +# ] +# +taxonomies = [ + {name = "tags", rss = true} +] + +# Whether to compile the Sass files found in the `sass` directory +compile_sass = true + +# Whether to build a search index out of the pages and section +# content for the `default_language` +build_search_index = false + +# A list of glob patterns specifying asset files to ignore when +# processing the content directory. +# Defaults to none, which means all asset files are copied over to the public folder. +# Example: +# ignored_content = ["*.{graphml,xlsx}", "temp.*"] +ignored_content = [] + +# A list of directories to search for additional `.sublime-syntax` files in. +extra_syntaxes = [] + +# Optional translation object. The key if present should be a language code +[translations] + +# You can put any kind of data in there and it +# will be accessible in all templates +[extra] + +home_subtitle = "Some profound and catchy statement" + +footer_copyright = ' · CC BY-NC 4.0' + +hermit_menu = [ + { link = "/posts", name = "Posts" }, + { link = "/about", name = "About" } +] + +hermit_social = [ + { name = "twitter", link = "https://twitter.com" }, + { name = "github", link = "https://github.com" }, + { name = "email", link = "mailto:author@domain.com" } +] + + +# You can use highlight.js for code highlighting if you dont like the +# default one +[extra.highlightjs] +enable = true +clipboard = true +theme = "railscasts" + +[extra.footer] +index = true + +[extra.disqus] +enable = false +# Take this from your Disqus account +shortname = "my-supa-dupa-blog" +# Comments can be disabled per page by setting: +# [extra] +# disable_comments = true +# +# in the posts front-matter + + +[extra.author] +name = "The Author" +email = "author@domain.com" + +[extra.google_analytics] +enable = false +id = "UA-4XXXXXXX-X" diff --git a/themes/hermit_zola/sass/_animate.scss b/themes/hermit_zola/sass/_animate.scss new file mode 100644 index 0000000..2f47ef4 --- /dev/null +++ b/themes/hermit_zola/sass/_animate.scss @@ -0,0 +1,11 @@ +@charset "UTF-8"; + +/*! + * animate.css -https://daneden.github.io/animate.css/ + * Version - 3.7.0 + * Licensed under the MIT license - http://opensource.org/licenses/MIT + * + * Copyright (c) 2018 Daniel Eden + */ + +@-webkit-keyframes bounceInRight{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(3000px,0,0);transform:translate3d(3000px,0,0)}60%{opacity:1;-webkit-transform:translate3d(-25px,0,0);transform:translate3d(-25px,0,0)}75%{-webkit-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}90%{-webkit-transform:translate3d(-5px,0,0);transform:translate3d(-5px,0,0)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes bounceInRight{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(3000px,0,0);transform:translate3d(3000px,0,0)}60%{opacity:1;-webkit-transform:translate3d(-25px,0,0);transform:translate3d(-25px,0,0)}75%{-webkit-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}90%{-webkit-transform:translate3d(-5px,0,0);transform:translate3d(-5px,0,0)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.bounceInRight{-webkit-animation-name:bounceInRight;animation-name:bounceInRight}@-webkit-keyframes bounceOutRight{20%{opacity:1;-webkit-transform:translate3d(-20px,0,0);transform:translate3d(-20px,0,0)}to{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}}@keyframes bounceOutRight{20%{opacity:1;-webkit-transform:translate3d(-20px,0,0);transform:translate3d(-20px,0,0)}to{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}}.bounceOutRight{-webkit-animation-name:bounceOutRight;animation-name:bounceOutRight}@-webkit-keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.fadeIn{-webkit-animation-name:fadeIn;animation-name:fadeIn}@-webkit-keyframes slideInUp{0%{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0);visibility:visible}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes slideInUp{0%{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0);visibility:visible}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.slideInUp{-webkit-animation-name:slideInUp;animation-name:slideInUp}@-webkit-keyframes slideOutDown{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{visibility:hidden;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}@keyframes slideOutDown{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{visibility:hidden;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}.slideOutDown{-webkit-animation-name:slideOutDown;animation-name:slideOutDown}.animated{-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both}.animated.infinite{-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite}.animated.delay-1s{-webkit-animation-delay:1s;animation-delay:1s}.animated.delay-2s{-webkit-animation-delay:2s;animation-delay:2s}.animated.delay-3s{-webkit-animation-delay:3s;animation-delay:3s}.animated.delay-4s{-webkit-animation-delay:4s;animation-delay:4s}.animated.delay-5s{-webkit-animation-delay:5s;animation-delay:5s}.animated.fast{-webkit-animation-duration:.8s;animation-duration:.8s}.animated.faster{-webkit-animation-duration:.5s;animation-duration:.5s}.animated.slow{-webkit-animation-duration:2s;animation-duration:2s}.animated.slower{-webkit-animation-duration:3s;animation-duration:3s}@media (prefers-reduced-motion){.animated{-webkit-animation:unset!important;animation:unset!important;-webkit-transition:none!important;transition:none!important}} \ No newline at end of file diff --git a/themes/hermit_zola/sass/_icons.scss b/themes/hermit_zola/sass/_icons.scss new file mode 100644 index 0000000..6722894 --- /dev/null +++ b/themes/hermit_zola/sass/_icons.scss @@ -0,0 +1,60 @@ +/* From: https://css.gg/app */ + +.gg-check { + box-sizing: border-box; + position: relative; + display: block; + transform: scale(var(--ggs, 1)); + width: 22px; + height: 22px; + border: 2px solid transparent; + border-radius: 100px; +} +.gg-check::after { + content: ""; + display: block; + box-sizing: border-box; + position: absolute; + left: 3px; + top: -1px; + width: 6px; + height: 10px; + border-width: 0 2px 2px 0; + border-style: solid; + transform-origin: bottom left; + transform: rotate(45deg); +} + +.gg-clipboard { + box-sizing: border-box; + position: relative; + display: block; + transform: scale(var(--ggs, 1)); + width: 18px; + height: 18px; + border: 2px solid; + border-radius: 2px; +} +.gg-clipboard::after, +.gg-clipboard::before { + content: ""; + display: block; + box-sizing: border-box; + position: absolute; + border-radius: 2px; + width: 10px; + left: 2px; +} +.gg-clipboard::before { + border: 2px solid; + border-bottom-left-radius: 3px; + border-bottom-right-radius: 3px; + top: -2px; + height: 6px; +} +.gg-clipboard::after { + height: 2px; + background: currentColor; + box-shadow: 0 -4px 0 0; + bottom: 2px; +} diff --git a/themes/hermit_zola/sass/_normalize.scss b/themes/hermit_zola/sass/_normalize.scss new file mode 100644 index 0000000..3d6624c --- /dev/null +++ b/themes/hermit_zola/sass/_normalize.scss @@ -0,0 +1,341 @@ +/*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */ + +/* Document + ========================================================================== */ + +/** + * 1. Correct the line height in all browsers. + * 2. Prevent adjustments of font size after orientation changes in iOS. + */ + +html { + line-height: 1.15; /* 1 */ + -webkit-text-size-adjust: 100%; /* 2 */ +} + +/* Sections + ========================================================================== */ + +/** + * Remove the margin in all browsers. + */ + +body { + margin: 0; +} + +/** + * Correct the font size and margin on `h1` elements within `section` and + * `article` contexts in Chrome, Firefox, and Safari. + */ + +h1 { + font-size: 2em; + margin: 0.67em 0; +} + +/* Grouping content + ========================================================================== */ + +/** + * 1. Add the correct box sizing in Firefox. + * 2. Show the overflow in Edge and IE. + */ + +hr { + box-sizing: content-box; /* 1 */ + height: 0; /* 1 */ + overflow: visible; /* 2 */ +} + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + +pre { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ +} + +/* Text-level semantics + ========================================================================== */ + +/** + * Remove the gray background on active links in IE 10. + */ + +a { + background-color: transparent; +} + +/** + * 1. Remove the bottom border in Chrome 57- + * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. + */ + +abbr[title] { + border-bottom: none; /* 1 */ + text-decoration: underline; /* 2 */ + text-decoration: underline dotted; /* 2 */ +} + +/** + * Add the correct font weight in Chrome, Edge, and Safari. + */ + +b, +strong { + font-weight: bolder; +} + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + +code, +kbd, +samp { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ +} + +/** + * Add the correct font size in all browsers. + */ + +small { + font-size: 80%; +} + +/** + * Prevent `sub` and `sup` elements from affecting the line height in + * all browsers. + */ + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sub { + bottom: -0.25em; +} + +sup { + top: -0.5em; +} + +/* Embedded content + ========================================================================== */ + +/** + * Remove the border on images inside links in IE 10. + */ + +img { + border-style: none; +} + +/* Forms + ========================================================================== */ + +/** + * 1. Change the font styles in all browsers. + * 2. Remove the margin in Firefox and Safari. + */ + +button, +input, +optgroup, +select, +textarea { + font-family: inherit; /* 1 */ + font-size: 100%; /* 1 */ + line-height: 1.15; /* 1 */ + margin: 0; /* 2 */ +} + +/** + * Show the overflow in IE. + * 1. Show the overflow in Edge. + */ + +button, +input { /* 1 */ + overflow: visible; +} + +/** + * Remove the inheritance of text transform in Edge, Firefox, and IE. + * 1. Remove the inheritance of text transform in Firefox. + */ + +button, +select { /* 1 */ + text-transform: none; +} + +/** + * Correct the inability to style clickable types in iOS and Safari. + */ + +button, +[type="button"], +[type="reset"], +[type="submit"] { + -webkit-appearance: button; +} + +/** + * Remove the inner border and padding in Firefox. + */ + +button::-moz-focus-inner, +[type="button"]::-moz-focus-inner, +[type="reset"]::-moz-focus-inner, +[type="submit"]::-moz-focus-inner { + border-style: none; + padding: 0; +} + +/** + * Restore the focus styles unset by the previous rule. + */ + +button:-moz-focusring, +[type="button"]:-moz-focusring, +[type="reset"]:-moz-focusring, +[type="submit"]:-moz-focusring { + outline: 1px dotted ButtonText; +} + +/** + * Correct the padding in Firefox. + */ + +fieldset { + padding: 0.35em 0.75em 0.625em; +} + +/** + * 1. Correct the text wrapping in Edge and IE. + * 2. Correct the color inheritance from `fieldset` elements in IE. + * 3. Remove the padding so developers are not caught out when they zero out + * `fieldset` elements in all browsers. + */ + +legend { + box-sizing: border-box; /* 1 */ + color: inherit; /* 2 */ + display: table; /* 1 */ + max-width: 100%; /* 1 */ + padding: 0; /* 3 */ + white-space: normal; /* 1 */ +} + +/** + * Add the correct vertical alignment in Chrome, Firefox, and Opera. + */ + +progress { + vertical-align: baseline; +} + +/** + * Remove the default vertical scrollbar in IE 10+. + */ + +textarea { + overflow: auto; +} + +/** + * 1. Add the correct box sizing in IE 10. + * 2. Remove the padding in IE 10. + */ + +[type="checkbox"], +[type="radio"] { + box-sizing: border-box; /* 1 */ + padding: 0; /* 2 */ +} + +/** + * Correct the cursor style of increment and decrement buttons in Chrome. + */ + +[type="number"]::-webkit-inner-spin-button, +[type="number"]::-webkit-outer-spin-button { + height: auto; +} + +/** + * 1. Correct the odd appearance in Chrome and Safari. + * 2. Correct the outline style in Safari. + */ + +[type="search"] { + -webkit-appearance: textfield; /* 1 */ + outline-offset: -2px; /* 2 */ +} + +/** + * Remove the inner padding in Chrome and Safari on macOS. + */ + +[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; +} + +/** + * 1. Correct the inability to style clickable types in iOS and Safari. + * 2. Change font properties to `inherit` in Safari. + */ + +::-webkit-file-upload-button { + -webkit-appearance: button; /* 1 */ + font: inherit; /* 2 */ +} + +/* Interactive + ========================================================================== */ + +/* + * Add the correct display in Edge, IE 10+, and Firefox. + */ + +details { + display: block; +} + +/* + * Add the correct display in all browsers. + */ + +summary { + display: list-item; +} + +/* Misc + ========================================================================== */ + +/** + * Add the correct display in IE 10+. + */ + +template { + display: none; +} + +/** + * Add the correct display in IE 10. + */ + +[hidden] { + display: none; +} \ No newline at end of file diff --git a/themes/hermit_zola/sass/_predefined.scss b/themes/hermit_zola/sass/_predefined.scss new file mode 100644 index 0000000..ec3c6c7 --- /dev/null +++ b/themes/hermit_zola/sass/_predefined.scss @@ -0,0 +1,37 @@ +// Colors +// +$theme: #018574; +$text: #c6cddb; +$light-grey: #494f5c; +$dark-grey: #3b3e48; +$highlight-grey: #7d828a; +$midnightblue: #31333d; + +// Fonts +// +$fonts: "Trebuchet MS", Verdana, "Verdana Ref", "Segoe UI", Candara, + "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Tahoma, sans-serif; +$code-fonts: Consolas, "Andale Mono WT", "Andale Mono", Menlo, Monaco, + "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", + "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", "Courier New", + Courier, "YaHei Consolas Hybrid", monospace, "Segoe UI Emoji", "PingFang SC", + "Microsoft YaHei"; + +// Mixins +// +@mixin dimmed { + opacity: 0.6; +} + +@mixin aTag { + a { + word-break: break-all; + border: none; + box-shadow: inset 0 -4px 0 $theme; + transition-property: background-color; + + &:hover { + background-color: $theme; + } + } +} diff --git a/themes/hermit_zola/sass/_syntax.scss b/themes/hermit_zola/sass/_syntax.scss new file mode 100644 index 0000000..efcf550 --- /dev/null +++ b/themes/hermit_zola/sass/_syntax.scss @@ -0,0 +1,59 @@ +/* Background */ .chroma { color: #eee; background-color: $midnightblue } +/* Error */ .chroma .err { color: #960050; background-color: #1e0010 } +/* LineTableTD */ .chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; } +/* LineTable */ .chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; width: auto; overflow: auto; display: block; } +/* LineHighlight */ .chroma .hl { display: block; width: 100%;background-color: #ffffcc } +/* LineNumbersTable */ .chroma .lnt { margin-right: 0.4em; padding: 0 0.4em 0 0.4em; } +/* LineNumbers */ .chroma .ln { margin-right: 0.4em; padding: 0 0.4em 0 0.4em; } +/* Keyword */ .chroma .k { color: #66d9ef } +/* KeywordConstant */ .chroma .kc { color: #66d9ef } +/* KeywordDeclaration */ .chroma .kd { color: #66d9ef } +/* KeywordNamespace */ .chroma .kn { color: #f92672 } +/* KeywordPseudo */ .chroma .kp { color: #66d9ef } +/* KeywordReserved */ .chroma .kr { color: #66d9ef } +/* KeywordType */ .chroma .kt { color: #66d9ef } +/* NameAttribute */ .chroma .na { color: #a6e22e } +/* NameClass */ .chroma .nc { color: #a6e22e } +/* NameConstant */ .chroma .no { color: #66d9ef } +/* NameDecorator */ .chroma .nd { color: #a6e22e } +/* NameException */ .chroma .ne { color: #a6e22e } +/* NameFunction */ .chroma .nf { color: #a6e22e } +/* NameOther */ .chroma .nx { color: #a6e22e } +/* NameTag */ .chroma .nt { color: #f92672 } +/* Literal */ .chroma .l { color: #ae81ff } +/* LiteralDate */ .chroma .ld { color: #e6db74 } +/* LiteralString */ .chroma .s { color: #e6db74 } +/* LiteralStringAffix */ .chroma .sa { color: #e6db74 } +/* LiteralStringBacktick */ .chroma .sb { color: #e6db74 } +/* LiteralStringChar */ .chroma .sc { color: #e6db74 } +/* LiteralStringDelimiter */ .chroma .dl { color: #e6db74 } +/* LiteralStringDoc */ .chroma .sd { color: #e6db74 } +/* LiteralStringDouble */ .chroma .s2 { color: #e6db74 } +/* LiteralStringEscape */ .chroma .se { color: #ae81ff } +/* LiteralStringHeredoc */ .chroma .sh { color: #e6db74 } +/* LiteralStringInterpol */ .chroma .si { color: #e6db74 } +/* LiteralStringOther */ .chroma .sx { color: #e6db74 } +/* LiteralStringRegex */ .chroma .sr { color: #e6db74 } +/* LiteralStringSingle */ .chroma .s1 { color: #e6db74 } +/* LiteralStringSymbol */ .chroma .ss { color: #e6db74 } +/* LiteralNumber */ .chroma .m { color: #ae81ff } +/* LiteralNumberBin */ .chroma .mb { color: #ae81ff } +/* LiteralNumberFloat */ .chroma .mf { color: #ae81ff } +/* LiteralNumberHex */ .chroma .mh { color: #ae81ff } +/* LiteralNumberInteger */ .chroma .mi { color: #ae81ff } +/* LiteralNumberIntegerLong */ .chroma .il { color: #ae81ff } +/* LiteralNumberOct */ .chroma .mo { color: #ae81ff } +/* Operator */ .chroma .o { color: #f92672 } +/* OperatorWord */ .chroma .ow { color: #f92672 } +/* Comment */ .chroma .c { color: #75715e } +/* CommentHashbang */ .chroma .ch { color: #75715e } +/* CommentMultiline */ .chroma .cm { color: #75715e } +/* CommentSingle */ .chroma .c1 { color: #75715e } +/* CommentSpecial */ .chroma .cs { color: #75715e } +/* CommentPreproc */ .chroma .cp { color: #75715e } +/* CommentPreprocFile */ .chroma .cpf { color: #75715e } +/* GenericDeleted */ .chroma .gd { color: #f92672 } +/* GenericEmph */ .chroma .ge { font-style: italic } +/* GenericInserted */ .chroma .gi { color: #a6e22e } +/* GenericStrong */ .chroma .gs { font-weight: bold } +/* GenericSubheading */ .chroma .gu { color: #75715e } diff --git a/themes/hermit_zola/sass/style.scss b/themes/hermit_zola/sass/style.scss new file mode 100644 index 0000000..d9824ac --- /dev/null +++ b/themes/hermit_zola/sass/style.scss @@ -0,0 +1,867 @@ +@import "predefined.scss"; +@import "normalize.scss"; +@import "syntax.scss"; +@import "animate.scss"; +@import "icons.scss"; + +/* Webkit Scrollbar Customize */ +::-webkit-scrollbar { + width: 8px; + height: 8px; + background: $midnightblue; +} + +::-webkit-scrollbar-thumb { + background: #888; + + &:hover { + background: $text; + } +} + +html { + background: $light-grey; + line-height: 1.6; + letter-spacing: 0.06em; +} + +body, +button, +input, +select, +textarea { + color: $text; + font-family: $fonts; +} + +pre, +code, +pre tt { + font-family: $code-fonts; +} + +pre { + max-height: 40em; + padding: 0.7em 1.1em; + overflow: auto; + overflow-y: auto; + overflow-x: scroll; + font-size: 0.9em; + line-height: 1.5; + letter-spacing: normal; + white-space: pre-wrap; + word-wrap: break-word; + color: #eee; + border-radius: 4px; + // -webkit-overflow-scrolling: touch; + + .code-badge { + position: absolute !important; + right: 0; + top: 0; + z-index: 10; + + .code-badge-language { + display: none; + } + } + + code { + padding: 0; + margin: 0; + + table { + td { + padding: 0; + border: none; + word-break: keep-all; + padding-right: 0.5em; + } + } + } + + code[data-name] { + display: block; + padding-top: 2em !important; + + &::before { + content: attr(data-name); + position: absolute; + font-weight: bold; + top: 0; + left: 0; + padding-left: 1em; + padding-top: 0.7em; + width: 100%; + background-color: $midnightblue; + z-index: 1; + color: $text; + } + } +} + +code { + color: #eee; + border-radius: 3px; + padding: 0 3px; + margin: 0 4px; + word-break: break-all; + letter-spacing: normal; +} + +blockquote { + border-left: 0.25em solid; + margin: 1em; + padding: 0 1em; + font-style: italic; + + cite { + font-weight: bold; + font-style: normal; + + &::before { + content: "—— "; + } + } +} + +a { + color: $text; + text-decoration: none; + border: none; + transition-property: color; + transition-duration: 0.4s; + transition-timing-function: ease-out; + + &:hover { + color: #fff; + } + + &:focus { + outline: none; + } +} + +hr { + opacity: 0.2; + border-width: 0 0 5px 0; + border-style: dashed; + background: transparent; + width: 50%; + margin: 1.8em auto; +} + +table { + border-collapse: collapse; + border-spacing: 0; + empty-cells: show; + width: 100%; + max-width: 100%; + + th, + td { + padding: 1.5%; + border: 1px solid; + } + + th { + font-weight: 700; + vertical-align: bottom; + } +} + +.section-inner { + margin: 0 auto; + max-width: 1200px; + width: 93%; +} + +.thin { + max-width: 720px; + margin: auto; +} + +.feather { + display: inline-block; + vertical-align: -0.125em; + width: 1em; + height: 1em; +} + +.desktop-only, +.desktop-only-ib { + display: none; +} + +// Accessibility +// +.screen-reader-text { + border: 0; + clip: rect(1px, 1px, 1px, 1px); + clip-path: inset(50%); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute !important; + width: 1px; + word-wrap: normal !important; +} + +.screen-reader-text:focus { + background-color: #f1f1f1; + border-radius: 3px; + box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6); + clip: auto !important; + clip-path: none; + color: #21759b; + display: block; + font-size: 14px; + font-size: 0.875rem; + font-weight: bold; + height: auto; + left: 5px; + line-height: normal; + padding: 15px 23px 14px; + text-decoration: none; + top: 5px; + width: auto; + z-index: 100000; +} + +// Header & Footer +// +#site-header { + position: fixed; + z-index: 1; + bottom: 0; + width: 100%; + box-sizing: border-box; + box-shadow: -1px -2px 3px rgba(0, 0, 0, 0.45); + background-color: $dark-grey; +} + +.hdr-wrapper { + display: flex; + justify-content: space-between; + align-items: center; + padding: 0.5em 0; + font-size: 1.2rem; + + .site-branding { + display: inline-block; + margin-right: 0.8em; + font-size: 1.2em; + } + + .site-nav { + display: inline-block; + font-size: 1.1em; + opacity: 0.8; + + a { + margin-left: 0.8em; + } + } +} + +.hdr-icons { + font-size: 1.2em; +} + +.hdr-social { + display: inline-block; + margin-left: 0.6em; + + & > a { + margin-left: 0.4em; + } +} + +.hdr-btn { + border: none; + background: none; + padding: 0; + margin-left: 0.4em; + cursor: pointer; +} + +#menu-btn { + display: none; + margin-left: 0.6em; + cursor: pointer; +} + +#mobile-menu { + position: fixed; + bottom: 4.8em; + right: 1.5em; + display: none; + padding: 0.6em 1.8em; + z-index: 1; + box-sizing: border-box; + box-shadow: -1px -2px 3px 0px rgba(0, 0, 0, 0.45); + background-color: $dark-grey; + + ul { + list-style: none; + margin: 0; + padding: 0; + line-height: 2; + font-size: 1.2em; + } +} + +#site-footer { + text-align: center; + font-size: 0.9em; + margin-bottom: 96px; + margin-top: 64px; + + p { + margin: 0; + } +} + +// Spotlight +// +#spotlight { + display: flex; + height: 100vh; + flex-direction: column; + align-items: center; + justify-content: center; + max-width: 93%; + margin: auto; + font-size: 1.5rem; + + &.error-404 { + flex-direction: row; + line-height: normal; + } +} + +p.img-404 { + margin: 0; + + svg { + width: 180px; + max-width: 100%; + height: auto; + } +} + +.banner-404 { + margin-left: 2em; + + h1 { + font-size: 3em; + margin: 0.5rem 0; + } + + p { + margin-top: 0; + margin-bottom: 0.6em; + } + + .btn-404 { + font-size: 0.8em; + + a { + display: inline-block; + border: 2px solid $text; + border-radius: 5px; + padding: 5px; + transition-property: color, border-color; + word-break: break-all; + + &:first-child { + margin-right: 1em; + } + + &:hover { + border-color: #fff; + } + + svg { + margin-right: 0.5em; + } + } + } +} + +#home-center { + display: flex; + flex-grow: 1; + flex-direction: column; + justify-content: center; +} + +#home-title { + margin: 0; + text-align: center; +} + +#home-subtitle { + margin-top: 0; + margin-bottom: 1.5em; + text-align: center; + line-height: normal; + font-size: 0.7em; + font-style: italic; + opacity: 0.9; +} + +#home-social { + font-size: 1.4em; + text-align: center; + opacity: 0.8; + + a { + margin: 0 0.2em; + } +} + +#home-nav { + opacity: 0.8; + + a { + display: block; + text-align: center; + margin-top: 0.5em; + } +} + +#home-footer { + text-align: center; + font-size: 0.6em; + line-height: normal; + @include dimmed; + + p { + margin-top: 0; + } +} + +// list.html +// +.posts-group { + display: flex; + margin-bottom: 1.9em; + line-height: normal; + + .post-year { + padding-top: 6px; + margin-right: 1.8em; + font-size: 1.6em; + @include dimmed; + } + + .posts-list { + flex-grow: 1; + margin: 0; + padding: 0; + list-style: none; + } + + .post-item { + border-bottom: 1px $highlight-grey dashed; + + a { + display: flex; + justify-content: space-between; + align-items: baseline; + padding: 12px 0; + } + } + + .post-day { + flex-shrink: 0; + margin-left: 1em; + @include dimmed; + } +} + +// single.html +// +.bg-img { + width: 100vw; + height: 100vh; + opacity: 0.03; + z-index: -1; + position: fixed; + top: 0; + background-attachment: fixed; + background-repeat: no-repeat; + background-size: cover; + background-position: center; + transition: opacity 0.5s; +} + +.show-bg-img { + z-index: 100; + opacity: 1; + cursor: pointer; +} + +.post-header { + margin-top: 1.2em; + line-height: normal; + + .post-meta { + font-size: 0.9em; + letter-spacing: normal; + @include dimmed; + } + + h1 { + margin-top: 0.1em; + } +} + +hr.post-end { + width: 50%; + margin-top: 1.6em; + margin-bottom: 0.8em; + margin-left: 0; + border-style: solid; + border-bottom-width: 4px; +} + +.content { + text-align: justify; + text-justify: inter-ideograph; //For IE/Edge + + @include aTag; + + figure { + max-width: 100%; + height: auto; + margin: 0; + text-align: center; + + p { + font-size: 0.8em; + font-style: italic; + @include dimmed; + } + } + + figure.left { + float: left; + margin-right: 1.5em; + max-width: 50%; + } + + figure.right { + float: right; + margin-left: 1.5em; + max-width: 50%; + } + + figure.big { + max-width: 100vw; + } + + img { + display: block; + max-width: 100%; + height: auto; + margin: auto; + border-radius: 4px; + } + + ul, + ol { + padding: 0; + margin-left: 1.8em; + } +} + +.footnote-definition { + font-size: 0.85em; + + a { + box-shadow: none; + text-decoration: underline; + transition-property: color; + + &:hover { + background: transparent; + } + + &.footnote-return { + text-decoration: none; + } + } + + ol { + line-height: 1.8; + } + p { + display: inline; + } +} + +.footnote-ref a { + box-shadow: none; + text-decoration: none; + padding: 2px; + border-radius: 2px; + background-color: $midnightblue; +} + +.post-info { + font-size: 0.8rem; + line-height: normal; + @include dimmed; + + p { + margin: 0.8em 0; + } + + a:hover { + border-bottom: 1px solid $theme; + } + + svg { + margin-right: 0.8em; + } + + .tag { + margin-right: 0.5em; + + &::before { + content: "#"; + } + } +} + +#toc { + position: fixed; + left: 50%; + top: 0; + display: none; +} + +.toc-title { + margin-left: 1em; + margin-bottom: 0.5em; + font-size: 0.8em; + font-weight: bold; +} + +#TableOfContents { + font-size: 0.8em; + @include dimmed; + + ul { + padding-left: 1em; + margin: 0; + } + + & > ul { + list-style-type: none; + + ul ul { + font-size: 0.9em; + } + } + + a:hover { + border-bottom: $theme 1px solid; + } +} + +.post-nav { + display: flex; + justify-content: space-between; + margin-top: 1.5em; + margin-bottom: 2.5em; + font-size: 1.2em; + + a { + flex-basis: 50%; + flex-grow: 1; + } + + .next-post { + text-align: left; + padding-right: 5px; + } + .prev-post { + text-align: right; + padding-left: 5px; + } + + .post-nav-label { + font-size: 0.8em; + opacity: 0.8; + text-transform: uppercase; + } +} + +// Media Queries +// +@media (min-width: 800px) { + .site-main { + margin-top: 3em; + } + + hr.post-end { + width: 40%; + } +} + +@media (min-width: 960px) { + .site-main { + margin-top: 6em; + } +} + +@media (min-width: 1300px) { + .site-main { + margin-top: 8em; + } + + .desktop-only, + #toc.show-toc { + display: block; + } + + .desktop-only-ib { + display: inline-block; + } + + figure.left { + margin-left: -240px; + p { + text-align: left; + } + } + + figure.right { + margin-right: -240px; + p { + text-align: right; + } + } + + figure.big { + width: 1200px; + margin-left: -240px; + } + + hr.post-end { + width: 30%; + } + + #toc { + top: 13em; + margin-left: 370px; + max-width: 220px; + } +} + +@media (min-width: 1800px) { + .site-main { + margin-top: 10em; + } + + .section-inner { + max-width: 1600px; + } + + .thin { + max-width: 960px; + } + + figure.left { + max-width: 75%; + margin-left: -320px; + } + + figure.right { + max-width: 75%; + margin-right: -320px; + } + + figure.big { + width: 1600px; + margin-left: -320px; + } + + hr.post-end { + width: 30%; + } + + #toc { + top: 15em; + margin-left: 490px; + max-width: 300px; + } +} + +@media (max-width: 760px) { + .hide-in-mobile, + .site-nav.hide-in-mobile { + display: none; + } + + #menu-btn { + display: inline-block; + } + + .posts-group { + display: block; + + .post-year { + margin: -6px 0 4px; + } + } + + #spotlight.error-404 { + flex-direction: column; + text-align: center; + + .banner-404 { + margin: 0; + } + } +} + +@media (max-width: 520px) { + .content figure.left, + .content figure.right { + float: unset; + max-width: 100%; + margin: 0; + } + + hr.post-end { + width: 60%; + } + + #mobile-menu { + right: 1.2em; + } +} + +.code-badge { + margin: 0.4em 0em; +} + +.highlight-copy-btn { + margin-right: 7px; + float: right; + border: 0; + border-radius: 4px; + padding: 1px; + font-size: 0.7em; + line-height: 1.8; + color: #fff; + background-color: #777; + opacity: 0.6; + min-width: 55px; + text-align: center; +} diff --git a/themes/hermit_zola/screenshot.png b/themes/hermit_zola/screenshot.png new file mode 100644 index 0000000..cfe7e72 Binary files /dev/null and b/themes/hermit_zola/screenshot.png differ diff --git a/themes/hermit_zola/static/favicon-32x32.png b/themes/hermit_zola/static/favicon-32x32.png new file mode 100644 index 0000000..b57e2b8 Binary files /dev/null and b/themes/hermit_zola/static/favicon-32x32.png differ diff --git a/themes/hermit_zola/static/favicon.ico b/themes/hermit_zola/static/favicon.ico new file mode 100644 index 0000000..b57e2b8 Binary files /dev/null and b/themes/hermit_zola/static/favicon.ico differ diff --git a/themes/hermit_zola/static/js/main.js b/themes/hermit_zola/static/js/main.js new file mode 100644 index 0000000..a40c504 --- /dev/null +++ b/themes/hermit_zola/static/js/main.js @@ -0,0 +1,98 @@ +/** + * Utils + */ + +// Throttle +// +const throttle = (callback, limit) => { + let timeoutHandler = null; + return () => { + if (timeoutHandler == null) { + timeoutHandler = setTimeout(() => { + callback(); + timeoutHandler = null; + }, limit); + } + }; +}; + +// addEventListener Helper +// +const listen = (ele, e, callback) => { + if (document.querySelector(ele) !== null) { + document.querySelector(ele).addEventListener(e, callback); + } +}; + +/** + * Functions + */ + +// Auto Hide Header +// +let header = document.getElementById('site-header'); +let lastScrollPosition = window.pageYOffset; + +const autoHideHeader = () => { + let currentScrollPosition = window.pageYOffset; + if (currentScrollPosition > lastScrollPosition) { + header.classList.remove('slideInUp'); + header.classList.add('slideOutDown'); + } else { + header.classList.remove('slideOutDown'); + header.classList.add('slideInUp'); + } + lastScrollPosition = currentScrollPosition; +}; + +// Mobile Menu Toggle +// +let mobileMenuVisible = false; + +const toggleMobileMenu = () => { + let mobileMenu = document.getElementById('mobile-menu'); + if (mobileMenuVisible == false) { + mobileMenu.style.animationName = 'bounceInRight'; + mobileMenu.style.webkitAnimationName = 'bounceInRight'; + mobileMenu.style.display = 'block'; + mobileMenuVisible = true; + } else { + mobileMenu.style.animationName = 'bounceOutRight'; + mobileMenu.style.webkitAnimationName = 'bounceOutRight'; + mobileMenuVisible = false; + } +}; + +// Featured Image Toggle +// +const showImg = () => { + document.querySelector('.bg-img').classList.add('show-bg-img'); +}; + +const hideImg = () => { + document.querySelector('.bg-img').classList.remove('show-bg-img'); +}; + +// ToC Toggle +// +const toggleToc = () => { + document.getElementById('toc').classList.toggle('show-toc'); +}; + +if (header !== null) { + listen('#menu-btn', 'click', toggleMobileMenu); + listen('#toc-btn', 'click', toggleToc); + listen('#img-btn', 'click', showImg); + listen('.bg-img', 'click', hideImg); + + window.addEventListener( + 'scroll', + throttle(() => { + autoHideHeader(); + + if (mobileMenuVisible == true) { + toggleMobileMenu(); + } + }, 250) + ); +} diff --git a/themes/hermit_zola/templates/404.html b/themes/hermit_zola/templates/404.html new file mode 100644 index 0000000..90464ca --- /dev/null +++ b/themes/hermit_zola/templates/404.html @@ -0,0 +1,24 @@ +{% extends "index.html" %} + +{% block header %} +{% endblock header %} + +{% block title %} +{% endblock title %} + +{% block main %} +
+

+ 404-lighthouse +

+