diff options
65 files changed, 2684 insertions, 0 deletions
@@ -0,0 +1,21 @@ +MIT License + +Copyright (c) 2022 Jake G (https://github.com/Jieiku) + +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. diff --git a/README.md b/README.md new file mode 100644 index 0000000..690e0ca --- /dev/null +++ b/README.md @@ -0,0 +1,3 @@ +# Abridge Zola Theme + +[abridge](https://github.com/jieiku/abridge) is a fast and lightweight Zola theme using semantic html, class-light [abridge.css](https://github.com/jieiku/abridge.css), and No JS. diff --git a/config.toml b/config.toml new file mode 100644 index 0000000..f591494 --- /dev/null +++ b/config.toml @@ -0,0 +1,78 @@ +base_url = "https://jieiku.github.io/abridge/" +title = "abridge - Zola Theme" +description = "abridge is a fast and lightweight Zola theme using semantic html, abridge.css class-light CSS, and No JS." +default_language = "en" +#theme = "abridge" + +output_dir = "public" +compile_sass = true +build_search_index = false +minify_html = false +generate_feed = true +feed_filename = "atom.xml" +#ignored_content = ["*.{graphml,xlsx}", "temp.*"] +#hard_link_static = false # set to true to hard link instead of copying, useful for very large files. +taxonomies = [ + {name = "categories", feed = true}, + {name = "tags", feed = true}, +] + +[markdown] +extra_syntaxes_and_themes = ["highlight_themes"] +highlight_code = true +highlight_theme = "material-dark" # OneHalfDark, material-dark, ayu-dark, Midnight.dark +#highlight_theme = "css" # use css classes - https://www.getzola.org/documentation/content/syntax-highlighting/#inline-vs-classed-highlighting +render_emoji = false +external_links_target_blank = true # rel="noopener" +external_links_no_follow = false # rel="nofollow" +external_links_no_referrer = false # rel="noreferrer" +smart_punctuation = false # `...` to `…`, `"quote"` to `“curly”` etc + +[extra] +katex_enable = false # used to to render mathematical notations, requires js +recent = true +recent_items = 9 +footer_credit = true +#google = "Your Google Site verification code." +#bing = "Your Bing Site verification code." +textlogo = '<font color="#f90">A</font>bridge' +sitedesc = false # This enables or disables the display of the site description below the logo. +author = "Your Name" +keywords = "Whatever, SEO, keywords, you want" +banner = "banner.png" +menu = [ + {url = "/", name = "Home", slash = true}, + {url = "/about/", name = "About", slash = true}, + {url = "/posts/", name = "Posts", slash = true}, + {url = "/categories/", name = "Categories", slash = true}, + {url = "/tags/", name = "Tags", slash = true}, +] +menu_footer = [ + {url = "/", name = "Home", slash = true}, + {url = "/about/", name = "About", slash = true}, + {url = "/contact/", name = "Contact", slash = true}, + {url = "/privacy/", name = "Privacy", slash = true}, + {url = "/sitemap.xml", name = "Sitemap", slash = false}, +] + +# Footer social links; full options listed in macros/social.html +[extra.social] +mail = "name@example.com" +mastodon = "@your-user-name" +element = "matrix.example.com" +#matrix = "matrix.example.com" +twitter = "your-user-name" +facebook = "your-user-name" +linkedin = "your-user-name" + +gitlab = "your-user-name" +github = "your-user-name" +bitbucket = "your-user-name" +python = "your-user-name" +docker = "your-user-name" +stack = "your-user-name" + +instagram = "your-user-name" +pinterest = "your-user-name" +twitch = "your-user-name" +youtube = "your-channel-id" diff --git a/content/_index.md b/content/_index.md new file mode 100644 index 0000000..3511f76 --- /dev/null +++ b/content/_index.md @@ -0,0 +1,4 @@ ++++ +paginate_by = 3 +sort_by = "date" ++++ diff --git a/content/overview-abridge.md b/content/overview-abridge.md new file mode 100644 index 0000000..51beea6 --- /dev/null +++ b/content/overview-abridge.md @@ -0,0 +1,23 @@ ++++ +title = "Abridge Zola theme and css framework" +date = 2021-05-10 + +[taxonomies] +categories = ["Features"] +tags = ["theme","config"] ++++ + +For quick setup copy the config.toml from the abridge theme into the root of your zola site, this will give you a base configuration with all config values used. +<!-- more --> +You can then edit or comment out the values in this file as necessary. + +You should also uncomment out the line #theme = "abridge" in your root zola config.toml file. This tells your root zola site to use the abridge theme in the themes folder. + +You can set the number of items that appear on the home page by editing `themes\abridge\content\_index.md` file and adjusting `paginate_by = 5` + +You can set the overal page width by editing `themes\abridge\sass\_variables.scss` file, and adjusting these two lines: + +```scss +$mw:50% !default;// max-width +$mb:1200px !default;// value at which to switch from fluid layout to using max-width +``` diff --git a/content/overview-embedded-videos.md b/content/overview-embedded-videos.md new file mode 100644 index 0000000..aa9074e --- /dev/null +++ b/content/overview-embedded-videos.md @@ -0,0 +1,23 @@ ++++ +title = "Embedded Youtube & Vimeo Videos" +date = 2021-05-07 + +[taxonomies] +categories = ["Features"] +tags = ["shortcodes","video"] ++++ + +Zola has many shortcodes, and new are easily added, this example shows vimeo and youtube. +<!-- more --> + +## Vimeo + +with `vm(id="id_here")` + +{{ vm(id="514402648") }} + +## Youtube + +with `yt(id="the_id_here")` + +{{ yt(id="32gyFIWecuw") }} diff --git a/content/overview-images/image.jpg b/content/overview-images/image.jpg Binary files differnew file mode 100644 index 0000000..7b9e98d --- /dev/null +++ b/content/overview-images/image.jpg diff --git a/content/overview-images/index.md b/content/overview-images/index.md new file mode 100644 index 0000000..0e623e5 --- /dev/null +++ b/content/overview-images/index.md @@ -0,0 +1,26 @@ ++++ +title = "Images, Direct and Relative Path" +date = 2021-05-08 + +[taxonomies] +categories = ["Features"] +tags = ["images"] ++++ + +Images can be embed using direct or relative paths. +<!-- more --> +Use `img()` to specify the relative path of image: + +{{ img(path="./image.jpg", alt="") }} + +This is an example note with direct image, without using shortcode: + + + +This is an svg image: + +<svg class="canon" xmlns="http://www.w3.org/2000/svg" overflow="visible" viewBox="0 0 496 373" height="373" width="496"><g fill="none"><path stroke="#000" stroke-width=".75" d="M.599 372.348L495.263 1.206M.312.633l494.95 370.853M.312 372.633L247.643.92M248.502.92l246.76 370.566M330.828 123.869V1.134M330.396 1.134L165.104 124.515"></path><path stroke="#ED1C24" stroke-width=".75" d="M275.73 41.616h166.224v249.05H275.73zM54.478 41.616h166.225v249.052H54.478z"></path><path stroke="#000" stroke-width=".75" d="M.479.375h495v372h-495zM247.979.875v372"></path><ellipse cx="498.729" cy="177.625" rx=".75" ry="1.25"></ellipse><ellipse cx="247.229" cy="377.375" rx=".75" ry="1.25"></ellipse></g></svg> + +<style> +.canon { background: white; width: 50%; height: auto; } +</style> diff --git a/content/overview-images/rust.png b/content/overview-images/rust.png Binary files differnew file mode 100644 index 0000000..38cbc4f --- /dev/null +++ b/content/overview-images/rust.png diff --git a/content/overview-markdown-syntax.md b/content/overview-markdown-syntax.md new file mode 100644 index 0000000..0a49a81 --- /dev/null +++ b/content/overview-markdown-syntax.md @@ -0,0 +1,161 @@ ++++ +title = "Markdown Syntax Guide" +description = "Sample article showcasing basic Markdown syntax and formatting for HTML elements." +date = 2021-05-09 + +[taxonomies] +categories = ["Features"] +tags = ["Markdown"] +[extra] +toc = true ++++ + +This article offers a sample of basic Markdown syntax that can be used in Zola content files, also it shows if basic HTML elements are decorated with CSS in a Zola theme. +<!-- more --> +## Headings + +The following HTML `<h1>`—`<h6>` elements represent six levels of section +headings. `<h1>` is the highest section level while `<h6>` is the lowest. + +# H1 +## H2 +### H3 +#### H4 +##### H5 +###### H6 + +## Paragraph + +Xerum, quo qui aut unt expliquam qui dolut labo. Aque venitatiusda cum, +voluptionse latur sitiae dolessi aut parist aut dollo enim qui voluptate ma +dolestendit peritin re plis aut quas inctum laceat est volestemque commosa as +cus endigna tectur, offic to cor sequas etum rerum idem sintibus eiur? Quianimin +porecus evelectur, cum que nis nust voloribus ratem aut omnimi, sitatur? +Quiatem. Nam, omnis sum am facea corem alique molestrunt et eos evelece arcillit +ut aut eos eos nus, sin conecerem erum fuga. Ri oditatquam, ad quibus unda +veliamenimin cusam et facea ipsamus es exerum sitate dolores editium rerore +eost, temped molorro ratiae volorro te reribus dolorer sperchicium faceata +tiustia prat. + +Itatur? Quiatae cullecum rem ent aut odis in re eossequodi nonsequ idebis ne +sapicia is sinveli squiatum, core et que aut hariosam ex eat. + +## Blockquotes + +The blockquote element represents content that is quoted from another source, +optionally with a citation which must be within a `footer` or `cite` element, +and optionally with in-line changes such as annotations and abbreviations. + +#### Blockquote without attribution + +> Tiam, ad mint andaepu dandae nostion secatur sequo quae. +> **Note** that you can use *Markdown syntax* within a blockquote. + +#### Blockquote with attribution + +> Don't communicate by sharing memory, share memory by communicating.<br> +> — <cite>Rob Pike[^1]</cite> + +> All men by nature desire to know.<br> +> ― <cite>Aristotle[^2]</cite> + +## Tables + +Tables aren't part of the core Markdown spec, but Zola supports them +out-of-the-box. + + Name | Age +--------|------ + Alice | 23 + Bob | 27 + Cody | 33 + John | 59 + Kerry | 23 + +#### Inline Markdown within tables + +| Italics | Bold | Code | StrikeThrough | +| -------- | -------- | ------ | ----------------- | +| *italics* | **bold** | `code` | ~~strikethrough~~ | + +## Foldable Text + +<details> + <summary>Title 1</summary> + <p>IT'S A SECRET TO EVERYBODY.</p> +</details> + +<details> + <summary>Title 2</summary> + <p>Stay awhile, and listen!</p> +</details> + +## Code Blocks + +Code blocks.. ❤️ with automatic syntax highlighting ✨ + +See [the docs](https://www.getzola.org/documentation/content/syntax-highlighting/) for options. + +#### Code block with backticks + +```html +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>Example HTML5 Document</title> +</head> +<body> + <p>Test</p> +</body> +</html> +``` + +#### Inline Code block + +If we want, we can also `specify inline code` which is useful for `the small stuff`. + +## List Types + +#### Ordered List + +1. First item +2. Second item +3. Third item + +#### Unordered List + +- List item +- Another item +- And another item + +#### Nested list + +- Fruit + - Apple + - Orange + - Banana +- Dairy + - Milk + - Cheese + +## Other Elements — abbr, sub, sup, kbd, mark, link + +<abbr title="Graphics Interchange Format">GIF</abbr> is a bitmap image format. + +H<sub>2</sub>O + +X<sup>n</sup> + Y<sup>n</sup> = Z<sup>n</sup> + +Press <kbd><kbd>CTRL</kbd>+<kbd>ALT</kbd>+<kbd>Delete</kbd></kbd> to end the +session. + +Most <mark>salamanders</mark> are nocturnal, and hunt for insects, worms, and +other small creatures. + +--- +<!-- Note: There must be a blank line between every two lines of the footnote difinition. --> +[^1]: The above quote is excerpted from Rob Pike's [talk](https://www.youtube.com/watch?v=PAAkCSZUG1c) +during Gopherfest, November 18, 2015. + +[^2]: The quote is the first sentence of Aristotle's [Metaphysics](https://en.wikipedia.org/wiki/Metaphysics_(Aristotle)). diff --git a/content/overview-math.md b/content/overview-math.md new file mode 100644 index 0000000..df1b8b4 --- /dev/null +++ b/content/overview-math.md @@ -0,0 +1,91 @@ ++++ +title = "Mathematical Notations Support" +date = 2021-05-05 +updated = 2022-01-01 +[taxonomies] +categories = ["Features"] +tags = ["KaTeX", "Mathematics"] +[extra] +math = true ++++ + +You can use [$\KaTeX$](https://katex.org) to render mathematical notations. + +You can enable the $\KaTeX$ support globally, per-section or per-page basis. +<!-- more --> +### Enable Globally + +To enable the $\KaTeX$ support globally, add `math = true` under `[extra]` of the `config.toml` +at your site root. Now every section and page of your site will load the KaTeX [autorender extension](https://katex.org/docs/autorender.html). + +```toml +[extra] +math = true +``` + +### Per-section Basis + +To enable the $\KaTeX$ support in a particular section, add `math = true` under `[extra]` in the `[SECTION_NAME]/_index.md`. Now every page under this section will load the KaTeX +[autorender extension](https://katex.org/docs/autorender.html). + +```md ++++ +[extra] +math = true ++++ +``` + +### Per-page Basis + +To enable the $\KaTeX$ support in a particular page, add `math = true` under `[extra]` in the page's +frontmatter. Now this page will load the $\KaTeX$ [autorender extension](https://katex.org/docs/autorender.html). + +```markdown ++++ +[extra] +math = true ++++ +``` + +It is a good practice to enable $\KaTeX$ support on a per-page basis, since this will only load the +required files on that particular page, without affecting the page load speed of other pages. +If your site is not math-heavy, please do NOT enable this feature globally or per-section basis. + +## Usage + +Wrap any [valid](https://katex.org/docs/supported.html) $\KaTeX$ syntax with `$...$` for inline +Mathematics and `$$...$$` for block Mathematics. + +### Inline Mathematics + +This is the most beautiful equation I've ever seen: + +``` +$e^{i\pi}+1=0$ +``` +$e^{i\pi}+1=0$ + +### Block Mathematics + +Some Mathematics in display mode is fair enough: + +``` +$$ +\int_0^1 x^2 dx +$$ +``` +$$ +\int_0^1 x^2 dx +$$ + +### Another Example + +``` +$$ +f(x) = \int_{-\infty}^\infty\hat f(\xi)\,e^{2 \pi i \xi x}\,d\xi +$$ +``` + +$$ +f(x) = \int_{-\infty}^\infty\hat f(\xi)\,e^{2 \pi i \xi x}\,d\xi +$$ diff --git a/content/overview-rich-content.md b/content/overview-rich-content.md new file mode 100644 index 0000000..b511713 --- /dev/null +++ b/content/overview-rich-content.md @@ -0,0 +1,90 @@ ++++ +title = "Rich Content" +description = "A brief description of Zola Shortcodes" +date = 2021-05-06 + +[taxonomies] +categories = ["Features"] +tags = ["video", "audio", "images", "shortcodes"] +[extra] +toc = true ++++ + +Several custom shortcodes are included to augment CommonMark (courtesy of d3c3nt theme), in addition to those [already provided by Zola][built-in]. `video`, `image`, `gif`, and `audio` were created to help you take advantage of modern HTML elements in your writing. + +<!-- more --> + +## Video + +The `video` shortcode takes a `sources` parameter (an array of strings) +and returns a `<video>` tag. Each string in the `sources` array should +be a path to a video file of a different type (`webm`, `mp4`, etc). Each +individual source is then converted into a `<source>` tag, and the +element is returned. + +### Usage +```rs +{{/* video(sources=["example.webm", "example.mp4"]) */}} +``` +### Output +```html +{{ video(sources=["example.webm", "example.mp4"]) }} +``` + +## Image + +The `image` shortcode returns a `<picture>` tag and accepts three +parameters: `sources` (an array of strings), `fallback_path`, and +`fallback_alt` (both strings). + +Each string in the `sources` array should be a path to an image file of +a different type (`webp`, `png`, `jpg`, etc). `fallback_path` and +`fallback_alt` are used to create an `<img>` tag for the browser to fall +back on if the other formats aren't yet supported. + +### Usage +```rs +{{/* image(sources=["example.webp", "example.jpg", "example.png"], fallback_path="example.png", fallback_alt="Lorem Ipsum") */}} +``` +### Output +```html +{{ image(sources=["example.webp", "example.jpg", "example.png"], fallback_path="example.png", fallback_alt="Lorem Ipsum") }} +``` + +## GIF + +The `gif` shortcode is exactly the same as the [video shortcode][video] +– it takes an array of strings called `sources` and returns a +`<video>` tag. The only difference is in the outermost tag, which has +four additional properties: `autoplay`, `loop`, `muted`, `playsinline`. + +Using the `<video>` tag in place of gifs allows for reduced file sizes, +which is especially important in regions where internet is slower or +less reliable. + +### Usage +```rs +{{/* gif(sources=["example.webm", "example.mp4"]) */}} +``` +### Output +```html +{{ gif(sources=["example.webm", "example.mp4"]) }} +``` + +## Audio + +The `audio` shortcode takes a `sources` array of strings and returns an +`<audio>` tag. Each string in the `sources` array should be a path to an +audio file of a different type (`wav`, `ogg`, `mp3`, etc). + +### Usage +```rs +{{/* audio(sources=["example.wav", "example.ogg", "example.mp3"]) */}} +``` +### Output +```html +{{ audio(sources=["example.wav", "example.ogg", "example.mp3"]) }} +``` + +[built-in]: https://www.getzola.org/documentation/content/shortcodes/#built-in-shortcodes +[video]: @/overview-rich-content.md#video diff --git a/content/pages/_index.md b/content/pages/_index.md new file mode 100644 index 0000000..800a244 --- /dev/null +++ b/content/pages/_index.md @@ -0,0 +1,3 @@ ++++ +render = false ++++ diff --git a/content/pages/about.md b/content/pages/about.md new file mode 100644 index 0000000..97ed9dd --- /dev/null +++ b/content/pages/about.md @@ -0,0 +1,20 @@ ++++ +title = "About" +path = "about" +template = "pages.html" ++++ + +This site provides a demo for the [abridge theme](https://github.com/Jieiku/abridge) for [Zola](https://www.getzola.org/) the static site generator. + +Abridge was created by [Jake G (jieiku)](https://github.com/Jieiku) to be fast and lightweight, using semantic html, [abridge.css](https://github.com/Jieiku/abridge-css) class-light CSS, and No JS. + +Some fun facts about the theme: + +* Perfect score on Google's Lighthouse audit +* Only ~4 KB of CSS before enabling the SVG CSS icons. +* No JavaScript +* Now with SEO! + +Nearly half of the existing Zola MIT themes were inspiration for features and design of this theme. + +Both the theme and this site are licensed under the [MIT license](https://opensource.org/licenses/MIT). diff --git a/content/pages/contact.md b/content/pages/contact.md new file mode 100644 index 0000000..10fbd30 --- /dev/null +++ b/content/pages/contact.md @@ -0,0 +1,5 @@ ++++ +title = "Contact" +path = "contact" +template = "contact.html" ++++ diff --git a/content/pages/privacy.md b/content/pages/privacy.md new file mode 100644 index 0000000..b136056 --- /dev/null +++ b/content/pages/privacy.md @@ -0,0 +1,11 @@ ++++ +title = "Privacy" +path = "privacy" +template = "pages.html" ++++ + +We do not use cookies and we do not collect any personal data. + +No personal information is collected, stored in the browser, shared, sent, or sold to third-parties. + +Effective Date: _1st Jan 2022_ diff --git a/content/posts/_index.md b/content/posts/_index.md new file mode 100644 index 0000000..e381261 --- /dev/null +++ b/content/posts/_index.md @@ -0,0 +1,4 @@ ++++ +title = "posts" +template = "posts.html" ++++ diff --git a/highlight_themes/Midnight.dark.tmTheme b/highlight_themes/Midnight.dark.tmTheme new file mode 100644 index 0000000..ee2de14 --- /dev/null +++ b/highlight_themes/Midnight.dark.tmTheme @@ -0,0 +1,593 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd"> +<plist version="1.0"> +<dict> + <key>name</key> + <string>Midnight Dark</string> + <key>semanticClass</key> + <string>base16.eighties.dark</string> + <key>colorSpaceName</key> + <string>sRGB</string> + <key>gutterSettings</key> + <dict> + <key>background</key> + <string>#393939</string> + <key>divider</key> + <string>#393939</string> + <key>foreground</key> + <string>#747369</string> + <key>selectionBackground</key> + <string>#515151</string> + <key>selectionForeground</key> + <string>#a09f93</string> + </dict> + <key>settings</key> + <array> + <dict> + <key>settings</key> + <dict> + <key>background</key> + <string>#1d2120</string> + <key>caret</key> + <string>#d3d0c8</string> + <key>foreground</key> + <string>#d3d0c8</string> + <key>invisibles</key> + <string>#747369</string> + <key>lineHighlight</key> + <string>#000000</string> + <key>selection</key> + <string>#000000</string> + <key>selectionBorder</key> + <string>#1A4666</string> + <key>guide</key> + <string>#797d89</string> + <key>activeGuide</key> + <string>#dfe1d7</string> + <key>stackGuide</key> + <string>#797d89</string> + </dict> + </dict> + <dict> + <key>name</key> + <string>Text</string> + <key>scope</key> + <string>variable.parameter.function</string> + <key>settings</key> + <dict> + <key>foreground</key> + <string>#d3d0c8</string> + </dict> + </dict> + <dict> + <key>name</key> + <string>Comments</string> + <key>scope</key> + <string>comment, punctuation.definition.comment</string> + <key>settings</key> + <dict> + <key>foreground</key> + <string>#747369</string> + </dict> + </dict> + <dict> + <key>name</key> + <string>Punctuation</string> + <key>scope</key> + <string>punctuation.definition.string, punctuation.definition.variable, punctuation.definition.string, punctuation.definition.parameters, punctuation.definition.string, punctuation.definition.array</string> + <key>settings</key> + <dict> + <key>foreground</key> + <string>#d3d0c8</string> + </dict> + </dict> + <dict> + <key>name</key> + <string>Delimiters</string> + <key>scope</key> + <string>none</string> + <key>settings</key> + <dict> + <key>foreground</key> + <string>#d3d0c8</string> + </dict> + </dict> + <dict> + <key>name</key> + <string>Operators</string> + <key>scope</key> + <string>keyword.operator</string> + <key>settings</key> + <dict> + <key>foreground</key> + <string>#d3d0c8</string> + </dict> + </dict> + <dict> + <key>name</key> + <string>Keywords</string> + <key>scope</key> + <string>keyword</string> + <key>settings</key> + <dict> + <key>foreground</key> + <string>#cc99cc</string> + </dict> + </dict> + <dict> + <key>name</key> + <string>Variables</string> + <key>scope</key> + <string>variable</string> + <key>settings</key> + <dict> + <key>foreground</key> + <string>#f2777a</string> + </dict> + </dict> + <dict> + <key>name</key> + <string>Functions</string> + <key>scope</key> + <string>entity.name.function, meta.require, support.function.any-method</string> + <key>settings</key> + <dict> + <key>foreground</key> + <string>#6699cc</string> + </dict> + </dict> + <dict> + <key>name</key> + <string>Classes</string> + <key>scope</key> + <string>support.class, entity.name.class, entity.name.type.class</string> + <key>settings</key> + <dict> + <key>foreground</key> + <string>#ffcc66</string> + </dict> + </dict> + <dict> + <key>name</key> + <string>Classes</string> + <key>scope</key> + <string>meta.class</string> + <key>settings</key> + <dict> + <key>foreground</key> + <string>#f2f0ec</string> + </dict> + </dict> + <dict> + <key>name</key> + <string>Methods</string> + <key>scope</key> + <string>keyword.other.special-method</string> + <key>settings</key> + <dict> + <key>foreground</key> + <string>#6699cc</string> + </dict> + </dict> + <dict> + <key>name</key> + <string>Storage</string> + <key>scope</key> + <string>storage</string> + <key>settings</key> + <dict> + <key>foreground</key> + <string>#cc99cc</string> + </dict> + </dict> + <dict> + <key>name</key> + <string>Support</string> + <key>scope</key> + <string>support.function</string> + <key>settings</key> + <dict> + <key>foreground</key> + <string>#66cccc</string> + </dict> + </dict> + <dict> + <key>name</key> + <string>Strings, Inherited Class</string> + <key>scope</key> + <string>string, constant.other.symbol, entity.other.inherited-class</string> + <key>settings</key> + <dict> + <key>foreground</key> + <string>#99cc99</string> + </dict> + </dict> + <dict> + <key>name</key> + <string>Integers</string> + <key>scope</key> + <string>constant.numeric</string> + <key>settings</key> + <dict> + <key>foreground</key> + <string>#f99157</string> + </dict> + </dict> + <dict> + <key>name</key> + <string>Floats</string> + <key>scope</key> + <string>none</string> + <key>settings</key> + <dict> + <key>foreground</key> + <string>#f99157</string> + </dict> + </dict> + <dict> + <key>name</key> + <string>Boolean</string> + <key>scope</key> + <string>none</string> + <key>settings</key> + <dict> + <key>foreground</key> + <string>#f99157</string> + </dict> + </dict> + <dict> + <key>name</key> + <string>Constants</string> + <key>scope</key> + <string>constant</string> + <key>settings</key> + <dict> + <key>foreground</key> + <string>#f99157</string> + </dict> + </dict> + <dict> + <key>name</key> + <string>Tags</string> + <key>scope</key> + <string>entity.name.tag</string> + <key>settings</key> + <dict> + <key>foreground</key> + <string>#f2777a</string> + </dict> + </dict> + <dict> + <key>name</key> + <string>Attributes</string> + <key>scope</key> + <string>entity.other.attribute-name</string> + <key>settings</key> + <dict> + <key>foreground</key> + <string>#f99157</string> + </dict> + </dict> + <dict> + <key>name</key> + <string>Attribute IDs</string> + <key>scope</key> + <string>entity.other.attribute-name.id, punctuation.definition.entity</string> + <key>settings</key> + <dict> + <key>foreground</key> + <string>#6699cc</string> + </dict> + </dict> + <dict> + <key>name</key> + <string>Selector</string> + <key>scope</key> + <string>meta.selector</string> + <key>settings</key> + <dict> + <key>foreground</key> + <string>#cc99cc</string> + </dict> + </dict> + <dict> + <key>name</key> + <string>Values</string> + <key>scope</key> + <string>none</string> + <key>settings</key> + <dict> + <key>foreground</key> + <string>#f99157</string> + </dict> + </dict> + <dict> + <key>name</key> + <string>Headings</string> + <key>scope</key> + <string>markup.heading punctuation.definition.heading, entity.name.section</string> + <key>settings</key> + <dict> + <key>fontStyle</key> + <string></string> + <key>foreground</key> + <string>#6699cc</string> + </dict> + </dict> + <dict> + <key>name</key> + <string>Units</string> + <key>scope</key> + <string>keyword.other.unit</string> + <key>settings</key> + <dict> + <key>foreground</key> + <string>#f99157</string> + </dict> + </dict> + <dict> + <key>name</key> + <string>Bold</string> + <key>scope</key> + <string>markup.bold, punctuation.definition.bold</string> + <key>settings</key> + <dict> + <key>fontStyle</key> + <string>bold</string> + <key>foreground</key> + <string>#ffcc66</string> + </dict> + </dict> + <dict> + <key>name</key> + <string>Italic</string> + <key>scope</key> + <string>markup.italic, punctuation.definition.italic</string> + <key>settings</key> + <dict> + <key>fontStyle</key> + <string>italic</string> + <key>foreground</key> + <string>#cc99cc</string> + </dict> + </dict> + <dict> + <key>name</key> + <string>Code</string> + <key>scope</key> + <string>markup.raw.inline</string> + <key>settings</key> + <dict> + <key>foreground</key> + <string>#99cc99</string> + </dict> + </dict> + <dict> + <key>name</key> + <string>Link Text</string> + <key>scope</key> + <string>string.other.link</string> + <key>settings</key> + <dict> + <key>foreground</key> + <string>#f2777a</string> + </dict> + </dict> + <dict> + <key>name</key> + <string>Link Url</string> + <key>scope</key> + <string>meta.link</string> + <key>settings</key> + <dict> + <key>foreground</key> + <string>#f99157</string> + </dict> + </dict> + <dict> + <key>name</key> + <string>Lists</string> + <key>scope</key> + <string>markup.list</string> + <key>settings</key> + <dict> + <key>foreground</key> + <string>#f2777a</string> + </dict> + </dict> + <dict> + <key>name</key> + <string>Quotes</string> + <key>scope</key> + <string>markup.quote</string> + <key>settings</key> + <dict> + <key>foreground</key> + <string>#f99157</string> + </dict> + </dict> + <dict> + <key>name</key> + <string>Separator</string> + <key>scope</key> + <string>meta.separator</string> + <key>settings</key> + <dict> + <key>background</key> + <string>#515151</string> + <key>foreground</key> + <string>#d3d0c8</string> + </dict> + </dict> + <dict> + <key>name</key> + <string>Inserted</string> + <key>scope</key> + <string>markup.inserted, markup.inserted.git_gutter</string> + <key>settings</key> + <dict> + <key>foreground</key> + <string>#99cc99</string> + </dict> + </dict> + <dict> + <key>name</key> + <string>Deleted</string> + <key>scope</key> + <string>markup.deleted, markup.deleted.git_gutter</string> + <key>settings</key> + <dict> + <key>foreground</key> + <string>#f2777a</string> + </dict> + </dict> + <dict> + <key>name</key> + <string>Changed</string> + <key>scope</key> + <string>markup.changed, markup.changed.git_gutter</string> + <key>settings</key> + <dict> + <key>foreground</key> + <string>#cc99cc</string> + </dict> + </dict> + <dict> + <key>name</key> + <string>Ignored</string> + <key>scope</key> + <string>markup.ignored, markup.ignored.git_gutter</string> + <key>settings</key> + <dict> + <key>foreground</key> + <string>#515151</string> + </dict> + </dict> + <dict> + <key>name</key> + <string>Untracked</string> + <key>scope</key> + <string>markup.untracked, markup.untracked.git_gutter</string> + <key>settings</key> + <dict> + <key>foreground</key> + <string>#515151</string> + </dict> + </dict> + <dict> + <key>name</key> + <string>Colors</string> + <key>scope</key> + <string>constant.other.color</string> + <key>settings</key> + <dict> + <key>foreground</key> + <string>#66cccc</string> + </dict> + </dict> + <dict> + <key>name</key> + <string>Regular Expressions</string> + <key>scope</key> + <string>string.regexp</string> + <key>settings</key> + <dict> + <key>foreground</key> + <string>#66cccc</string> + </dict> + </dict> + <dict> + <key>name</key> + <string>Escape Characters</string> + <key>scope</key> + <string>constant.character.escape</string> + <key>settings</key> + <dict> + <key>foreground</key> + <string>#66cccc</string> + </dict> + </dict> + <dict> + <key>name</key> + <string>Embedded</string> + <key>scope</key> + <string>punctuation.section.embedded, variable.interpolation</string> + <key>settings</key> + <dict> + <key>foreground</key> + <string>#d27b53</string> + </dict> + </dict> + <dict> + <key>name</key> + <string>Invalid</string> + <key>scope</key> + <string>invalid.illegal</string> + <key>settings</key> + <dict> + <key>background</key> + <string>#f2777a</string> + <key>foreground</key> + <string>#2d2d2d</string> + </dict> + </dict> + <dict> + <key>name</key> + <string>GitGutter deleted</string> + <key>scope</key> + <string>markup.deleted.git_gutter</string> + <key>settings</key> + <dict> + <key>foreground</key> + <string>#F92672</string> + </dict> + </dict> + <dict> + <key>name</key> + <string>GitGutter inserted</string> + <key>scope</key> + <string>markup.inserted.git_gutter</string> + <key>settings</key> + <dict> + <key>foreground</key> + <string>#A6E22E</string> + </dict> + </dict> + <dict> + <key>name</key> + <string>GitGutter changed</string> + <key>scope</key> + <string>markup.changed.git_gutter</string> + <key>settings</key> + <dict> + <key>foreground</key> + <string>#967EFB</string> + </dict> + </dict> + <dict> + <key>name</key> + <string>GitGutter ignored</string> + <key>scope</key> + <string>markup.ignored.git_gutter</string> + <key>settings</key> + <dict> + <key>foreground</key> + <string>#565656</string> + </dict> + </dict> + <dict> + <key>name</key> + <string>GitGutter untracked</string> + <key>scope</key> + <string>markup.untracked.git_gutter</string> + <key>settings</key> + <dict> + <key>foreground</key> + <string>#565656</string> + </dict> + </dict> + </array> + <key>uuid</key> + <string>36594751-36ac-443a-9f2f-111b815085cf</string> +</dict> +</plist> diff --git a/sass/_variables.scss b/sass/_variables.scss new file mode 100644 index 0000000..72adc3e --- /dev/null +++ b/sass/_variables.scss @@ -0,0 +1,88 @@ +// Config +// –––––––––––––––––––– + +// Enable <header>, <main>, <footer> inside <body> as a container +$enable-semantic-container: true !default; + +// Enable responsive typography +// Fixed root element size if disabled +$enable-responsive-typography: true !default; + +// Enable responsive spacings for <header>, <main>, <footer>, <section> +// Fixed spacings if disabled +$enable-responsive-spacings: false !default; + +// Enable a centered viewport for <header>, <main>, <footer> inside <body> +// Fluid layout until it reaches a defined size, then becomes a centered viewport +$enable-maxwidth: true !default; +$mw:60% !default;// max-width +$mb:1200px !default;// value at which to switch from fluid layout to using max-width + +// Enable a centered viewport for <header>, <main>, <footer> inside <body> +// This option will only work if $enable-maxwidth: false +$enable-viewport: false !default; + +// xs: Extra small (portrait phones) +// sm: Small(landscape phones) +// md: Medium(tablets) +// lg: Large(desktops) +// xl: Extra large (large desktops) + +// Breakpoints +$breakpoints: ( + // 'null' disable the breakpoint + xs: 0, + sm: 576px, + md: 768px, + lg: 992px, + xl: 1200px +) !default; + +// Viewports +$viewports: ( + // 'null' disable the viewport on a breakpoint + sm: 510px, + md: 700px, + lg: 920px, + xl: 1130px +) !default; + +// Enable svg css icons +$enable-icons: true !default; // setting this to false disables ALL icons, to use icons set to true. +$ic: true !default; // icon color - set to true for colorized icons, otherwise a neutral gray #888 is used. +// to use icons set enable-icons:true above and also enable individual icons that you need below. https://deepthought-theme.netlify.app/ +$icon-rss: true !default; +$icon-mail: true !default;// email mail envelope +$icon-mastodon: true !default; +$icon-element: true !default; +$icon-matrix: false !default; +$icon-twitter: true !default; +$icon-facebook: true !default; +$icon-linkedin: true !default; +$icon-gitlab: true !default; +$icon-github: true !default; +$icon-bitbucket: true !default; +$icon-python: true !default; +$icon-docker: true !default; +$icon-stack: true !default; +$icon-instagram: true !default; +$icon-pinterest: true !default; +$icon-twitch: true !default; +$icon-youtube: true !default; + +$icon-search: false !default; +$icon-ffolder: false !default; +$icon-folder: false !default;// categories folder +$icon-ftag: false !default; +$icon-tag: false !default;// tag +$icon-check: false !default;// check mark +$icon-chevron: false !default;// chevron down +$icon-clock: false !default;// time analog clock +$icon-date: false !default;// calendar +$icon-globe: false !default; +$icon-home: false !default; +$icon-minus: false !default;// minus symbol +$icon-moon: false !default;// dark moon +$icon-sun: false !default;// light sun +$icon-x: false !default;// x symbol +// add an icon link to an html template like this: <a href="#"><span class="svg home"></span></a> diff --git a/sass/abridge.scss b/sass/abridge.scss new file mode 100644 index 0000000..29dc988 --- /dev/null +++ b/sass/abridge.scss @@ -0,0 +1,42 @@ +/* + * Forked from Bamboo: https://github.com/rilwis/bamboo (MIT) + * which was forked from new.css (MIT) + * Supplemented code from Pico.css: https://github.com/picocss/pico (MIT) + * Supplemented code from Basic.css: https://github.com/vladocar/Basic.css (MIT) + * Supplemented code from AttriCSS: https://github.com/raj457036/attriCSS (MIT) + * Feather Icons: https://github.com/feathericons/feather (MIT) + * Tabler Icons: https://github.com/tabler/tabler-icons/find/master (MIT) + * + * Bamboo, New, Pico: based on Normalize.css & Sanitize.css + * Normalize: https://github.com/necolas/normalize.css (MIT) + * Sanitize: https://github.com/csstools/sanitize.css (CC0 1.0 Universal) + */ + +// Config +@import "variables"; + +// Theming - you should only import one of these themes +@import "themes/auto"; +//@import "themes/dark"; +//@import "themes/light"; + +// Includes - Sorted by importance/category (includes at top are needed most frequently) +@import "include/document"; // html +@import "include/typography"; // a, headings, p, ul, blockquote, ... +@import "include/sectioning"; // body, header, main, footer +@import "include/nav"; // Nav + +@import "include/embedded"; // iframe(youtube/vimeo), audio, canvas, img, svg, video +@import "include/table"; // table, tr, td, ... +@import "include/code"; // pre, code, ... +@import "include/hr"; // hr + +@import "include/toc"; // Zola TOC - Table of Content Menu (recent posts & index), sticky (floats top right) + +//@import "include/scroller"; // figure +//@import "include/button"; // button, a[role=button], type=button, type=submit ... +//@import "include/form"; // input, select, textarea, label, fieldset, legend (If you import this, you should also import button) + +@import "include/icons"; // svg icons +//@import "include/grid"; // section infinite grid -- test/rework this similar to hnav and milligram in that it should collapse to a single column as the page becomes narrow +//@import "include/misc"; // template, [hidden], dialog, canvas diff --git a/sass/include/_button.scss b/sass/include/_button.scss new file mode 100644 index 0000000..257e8c6 --- /dev/null +++ b/sass/include/_button.scss @@ -0,0 +1,41 @@ +// Form elements (button) +button, +input, +select, +textarea { + margin: 0; + padding: .5rem .75rem; + max-width: 100%; + background: var(--c2); + border: 0; + border-radius: .25rem; + font: inherit; + line-height: 1.125; + color: var(--f1); +} +button, +[type="button" i], +[type="submit" i], +[type="reset" i] { + -webkit-appearance: button; + display: inline-block; + text-align: center; + white-space: nowrap; + background: var(--c2); + color: var(--f1); + border: 0; + cursor: pointer; + transition: opacity .25s; +} +button:hover, +[type="button" i]:hover, +[type="submit" i]:hover, +[type="reset" i]:hover { + opacity: .75; +} +button[disabled], +[type="button" i][disabled], +[type="submit" i][disabled], +[type="reset" i][disabled] { + opacity: .5; +} diff --git a/sass/include/_code.scss b/sass/include/_code.scss new file mode 100644 index 0000000..bd72a32 --- /dev/null +++ b/sass/include/_code.scss @@ -0,0 +1,33 @@ +// Code +pre, +code, +kbd, +samp, +tt, +var { + border-radius: var(--br); + background: var(--c2); + font-family: var(--fm); + line-height: initial; + font-size: .8rem; + padding: .3rem .2rem; +} +pre { + display: block; + overflow-x: auto; + -ms-overflow-style: scrollbar; + white-space: pre; + > code { + display: block; + background: transparent; + } +} + +// kbd +kbd { + background-color: var(--f2); + color: var(--c1); + vertical-align: baseline; + font-size: 1rem; + padding: .2rem; +} diff --git a/sass/include/_document.scss b/sass/include/_document.scss new file mode 100644 index 0000000..a5f91db --- /dev/null +++ b/sass/include/_document.scss @@ -0,0 +1,37 @@ +// Document: Content-box & Responsive typography + +// Change from `box-sizing: content-box` so that `width` is not affected by `padding` or `border` +*, +*::before, +*::after { + box-sizing: border-box; // 1 +} + +// 1. Add text decoration inheritance in all browsers (opinionated) +// 2. Add vertical alignment inheritance in all browsers (opinionated) +//::before, +//::after { +// text-decoration: inherit; // 1 +// vertical-align: inherit; // 2 +//} + +// 1. Correct the line height in all browsers +// 2. Prevent adjustments of font size after orientation changes in IE on Windows Phone and in iOS +// 3. Prevent adjustments of font size after orientation changes in IE on Windows Phone and in iOS +// 4. Change the default tap highlight to be completely transparent in iOS +// 5. Use the default cursor in all browsers (opinionated) +// 6. Use a 4-space tab width in all browsers (opinionated) +html { + text-rendering: optimizeLegibility; + background-color: var(--c1); + color: var(--f1); + font-family: var(--ff); + font-weight: var(--fw); + font-size: var(--fs); + line-height: var(--lh); // 1 +// -ms-text-size-adjust: 100%; // 2 +// -webkit-text-size-adjust: 100%; // 3 +// -webkit-tap-highlight-color: rgba(0, 0, 0, 0); // 4 +// cursor: default; // 5 +// tab-size: 4; // 6 +} diff --git a/sass/include/_embedded.scss b/sass/include/_embedded.scss new file mode 100644 index 0000000..48282f7 --- /dev/null +++ b/sass/include/_embedded.scss @@ -0,0 +1,19 @@ +// Embedded content +img, +video, +svg { + max-width: 100%; + height: auto; +} +embed, +iframe, +object { + max-width: 100%; +} +iframe { + border-style: none; + width: 100%; + height: 100%; + border: 0; + overflow: hidden; +} diff --git a/sass/include/_form.scss b/sass/include/_form.scss new file mode 100644 index 0000000..5761c3f --- /dev/null +++ b/sass/include/_form.scss @@ -0,0 +1,36 @@ +// Form elements (non-button) +fieldset { + padding: .5rem .75rem; + border: var(--bw) solid var(--c3); + border-radius: .25rem; +} +legend { + padding: 0 .25rem; +} +label { + cursor: pointer; + display: block; + margin-bottom: .25rem; +} +select, +input:not([size]):not([type="button" i]):not([type="submit" i]):not([type="reset" i]):not([type="checkbox" i]):not([type="radio" i]) { + width: 100%; +} +[type="color" i] { + min-height: 2.125rem; +} +select:not([multiple]):not([size]) { + padding-right: 1.5rem; + background-repeat: no-repeat; + background-position: right .5rem center; + -moz-appearance: none; + -webkit-appearance: none; + appearance: none; +} +textarea { + width: 100%; + resize: vertical; +} +textarea:not([rows]) { + height: 8rem; +} diff --git a/sass/include/_grid.scss b/sass/include/_grid.scss new file mode 100644 index 0000000..1ced06b --- /dev/null +++ b/sass/include/_grid.scss @@ -0,0 +1,14 @@ +/* Infinity Grid + * https://github.com/vladocar/Basic.css + */ + +[style*="--c:"],section>section{ +color: var(--f2); +padding: var(--s1); +margin: var(--s1); +text-align: center; +} + +section {display: flex; flex-flow: row wrap} + +[style*="--c:"], section>section {flex:var(--c,1); margin:var(--s1)} diff --git a/sass/include/_hr.scss b/sass/include/_hr.scss new file mode 100644 index 0000000..aaa9f4e --- /dev/null +++ b/sass/include/_hr.scss @@ -0,0 +1,15 @@ +/** + * HR + * https://github.com/picocss/pico + */ + +// 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 + border: none; + border-top: 1px solid var(--f1) +} +header hr, footer hr {border-top: 1px solid var(--c4)} diff --git a/sass/include/_icons.scss b/sass/include/_icons.scss new file mode 100644 index 0000000..b98930b --- /dev/null +++ b/sass/include/_icons.scss @@ -0,0 +1,102 @@ +/** + * SVG Icons + * https://github.com/feathericons/feather + * https://github.com/tabler/tabler-icons/find/master + * + * https://yqnn.github.io/svg-path-editor/ + * https://jakearchibald.github.io/svgomg/ + * https://codepen.io/yoksel/pen/MWKeKK + */ + +@function icon($icon-name,$stroke,$stroke-width: 1,$fill:'none'){ + $sc:"%23888";//stroke color + @if $ic { + $sc: $stroke + } + $p: ( + 's': $sc, + 'sw': $stroke-width, + 'f': $fill + ); + $icons: ( + //template-fill: "%3Csvg xmlns='http://www.w3.org/2000/svg' fill='#{map-get($p, f)}' viewBox='0 0 24 24'%3E%3Cpath d=''/%3E%3C/svg%3E", + //template-stroke: "%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='#{map-get($p, s)}' stroke-width='#{map-get($p, sw)}' fill='#{map-get($p, f)}' viewBox='0 0 24 24'%3E%3Cpath d=''/%3E%3C/svg%3E", + ffolder: "%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='#{map-get($p, f)}' d='M464 128H272l-64-64H48C21.49 64 0 85.49 0 112v288c0 26.51 21.49 48 48 48h416c26.51 0 48-21.49 48-48V176c0-26.51-21.49-48-48-48z'/%3E%3C/svg%3E", + ftag: "%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='#{map-get($p, f)}' d='M0 252.118V48C0 21.49 21.49 0 48 0h204.118a48 48 0 0133.941 14.059l211.882 211.882c18.745 18.745 18.745 49.137 0 67.882L293.823 497.941c-18.745 18.745-49.137 18.745-67.882 0L14.059 286.059A48 48 0 010 252.118zM112 64c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.49-48-48-48z'/%3E%3C/svg%3E", + bitbucket: "%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='#{map-get($p, s)}' stroke-width='#{map-get($p, sw)}' fill='#{map-get($p, f)}' viewBox='0 0 24 24'%3E%3Cpath d='M0 0h24v24H0z' stroke='none'/%3E%3Cpath d='M3.648 4a.64.64 0 0 0-.64.744l3.14 14.528c.07.417.43.724.852.728h10a.644.644 0 0 0 .642-.539l3.35-14.71a.641.641 0 0 0-.64-.744L3.648 4z'/%3E%3Cpath d='M14 15h-4L9 9h6z'/%3E%3C/svg%3E", + check: "%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='#{map-get($p, s)}' stroke-width='#{map-get($p, sw)}' fill='#{map-get($p, f)}' viewBox='0 0 24 24'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E", + chevron: "%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='#{map-get($p, s)}' stroke-width='#{map-get($p, sw)}' fill='#{map-get($p, f)}' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E", + clock: "%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='#{map-get($p, s)}' stroke-width='#{map-get($p, sw)}' fill='#{map-get($p, f)}' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 6v6l4 2'/%3E%3C/svg%3E", + date: "%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='#{map-get($p, s)}' stroke-width='#{map-get($p, sw)}' fill='#{map-get($p, f)}' viewBox='0 0 24 24'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E", + docker: "%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='#{map-get($p, s)}' stroke-width='#{map-get($p, sw)}' fill='#{map-get($p, f)}' viewBox='0 0 24 24'%3E%3Cpath d='M0 0h24v24H0z' stroke='none'/%3E%3Cpath d='M22 12.54c-1.804-.345-2.701-1.08-3.523-2.94-.487.696-1.102 1.568-.92 2.4.028.238-.32 1.002-.557 1H3c0 5.208 3.164 7 6.196 7 4.124.022 7.828-1.376 9.854-5 1.146-.101 2.296-1.505 2.95-2.46z'/%3E%3Cpath d='M5 10h3v3H5zM8 10h3v3H8zM11 10h3v3h-3zM8 7h3v3H8zM11 7h3v3h-3zM11 4h3v3h-3zM4.571 18c1.5 0 2.047-.074 2.958-.78M10 16v.01'/%3E%3C/svg%3E%0A", + element: "%3Csvg xmlns='http://www.w3.org/2000/svg' fill='#{map-get($p, f)}' viewBox='0 0 24 24'%3E%3Cpath d='M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0zm-1.314 4.715c3.289 0 5.956 2.66 5.956 5.943a.879.879 0 0 1-1.758 0 4.194 4.194 0 0 0-4.198-4.189.878.878 0 1 1 0-1.754zm-5.092 9.504a.879.879 0 0 1-.879-.877 5.95 5.95 0 0 1 5.956-5.945.878.878 0 1 1 0 1.753 4.195 4.195 0 0 0-4.198 4.191.88.88 0 0 1-.879.878zm7.735 5.067c-3.29 0-5.957-2.662-5.957-5.944a.88.88 0 0 1 1.758 0 4.194 4.194 0 0 0 4.199 4.189.879.879 0 1 1 0 1.755zm0-2.683a.88.88 0 0 1-.88-.876.88.88 0 0 1 .88-.878 4.195 4.195 0 0 0 4.199-4.19.878.878 0 0 1 1.758 0c0 3.282-2.667 5.944-5.957 5.944z'/%3E%3C/svg%3E", + facebook: "%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='#{map-get($p, s)}' stroke-width='#{map-get($p, sw)}' fill='#{map-get($p, f)}' viewBox='0 0 24 24'%3E%3Cpath d='M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z'/%3E%3C/svg%3E", + folder: "%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='#{map-get($p, s)}' stroke-width='#{map-get($p, sw)}' fill='#{map-get($p, f)}' viewBox='0 0 24 24'%3E%3Cpath d='M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z'/%3E%3C/svg%3E", + github: "%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='#{map-get($p, s)}' stroke-width='#{map-get($p, sw)}' fill='#{map-get($p, f)}' viewBox='0 0 24 24'%3E%3Cpath d='M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22'/%3E%3C/svg%3E", + gitlab: "%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='#{map-get($p, s)}' stroke-width='#{map-get($p, sw)}' fill='#{map-get($p, f)}' viewBox='0 0 24 24'%3E%3Cpath d='M22.65 14.39 12 22.13 1.35 14.39a.84.84 0 0 1-.3-.94l1.22-3.78 2.44-7.51A.42.42 0 0 1 4.82 2a.43.43 0 0 1 .58 0 .42.42 0 0 1 .11.18l2.44 7.49h8.1l2.44-7.51A.42.42 0 0 1 18.6 2a.43.43 0 0 1 .58 0 .42.42 0 0 1 .11.18l2.44 7.51L23 13.45a.84.84 0 0 1-.35.94z'/%3E%3C/svg%3E", + globe: "%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='#{map-get($p, s)}' stroke-width='#{map-get($p, sw)}' fill='#{map-get($p, f)}' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M2 12h20M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z'/%3E%3C/svg%3E", + home: "%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='#{map-get($p, s)}' stroke-width='#{map-get($p, sw)}' fill='#{map-get($p, f)}' viewBox='0 0 24 24'%3E%3Cpath d='m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3Cpath d='M9 22V12h6v10'/%3E%3C/svg%3E", + instagram: "%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='#{map-get($p, s)}' stroke-width='#{map-get($p, sw)}' fill='#{map-get($p, f)}' viewBox='0 0 24 24'%3E%3Crect x='2' y='2' width='20' height='20' rx='5' ry='5'/%3E%3Cpath d='M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37zM17.5 6.5h.01'/%3E%3C/svg%3E", + linkedin: "%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='#{map-get($p, s)}' stroke-width='#{map-get($p, sw)}' fill='#{map-get($p, f)}' viewBox='0 0 24 24'%3E%3Cpath d='M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6zM2 9h4v12H2z'/%3E%3Ccircle cx='4' cy='4' r='2'/%3E%3C/svg%3E", + mail: "%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='#{map-get($p, s)}' stroke-width='#{map-get($p, sw)}' fill='#{map-get($p, f)}' viewBox='0 0 24 24'%3E%3Cpath d='M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z'/%3E%3Cpath d='m22 6-10 7L2 6'/%3E%3C/svg%3E", + mastodon: "%3Csvg xmlns='http://www.w3.org/2000/svg' fill='#{map-get($p, f)}' viewBox='0 0 24 24'%3E%3Cpath d='M1.004 7.879c0 6.197-.347 13.894 5.559 15.486 2.132.574 3.964.696 5.438.61 2.674-.15 4.175-.969 4.175-.969l-.09-1.977s-1.911.61-4.059.54c-2.127-.075-4.37-.235-4.717-2.892a5.514 5.514 0 0 1-.047-.745c4.507 1.12 8.349.488 9.408.359 2.954-.359 5.528-2.212 5.855-3.905.515-2.667.474-6.508.474-6.508 0-5.206-3.353-6.733-3.353-6.733-3.291-1.537-12.029-1.521-15.288 0-.002.002-3.355 1.528-3.355 6.734zm4.923-2.667c1.363-1.548 4.201-1.65 5.465.327l.611 1.044.611-1.044c1.269-1.987 4.112-1.864 5.465-.327 1.248 1.463.969 2.838.969 9.373h-2.455V8.469c0-2.662-3.369-2.764-3.369.369v3.348h-2.437V8.838c0-3.133-3.369-3.031-3.369-.369v6.117H4.959c0-6.54-.274-7.922.968-9.374z'/%3E%3C/svg%3E", + matrix: "%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='#{map-get($p, s)}' stroke-width='#{map-get($p, sw)}' fill='#{map-get($p, f)}' viewBox='0 0 24 24'%3E%3Cpath d='M.632.55v22.9H3V24H0V0h3v.55zm7.043 7.26v1.157h.033C10.867 6.726 12 9 12.49 9.329 14.918 6.697 18 8 18 11v5h-1.504v-5a1 1 0 0 0-3.488.019v5h-1.69v-4.973a1 1 0 0 0-3.679-.027V16H6V7.83zm15.693 15.64V.55H21V0h3v24h-3v-.55z'/%3E%3C/svg%3E", + minus: "%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='#{map-get($p, s)}' stroke-width='#{map-get($p, sw)}' fill='#{map-get($p, f)}' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E", + moon: "%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='#{map-get($p, s)}' stroke-width='#{map-get($p, sw)}' fill='#{map-get($p, f)}' viewBox='0 0 24 24'%3E%3Cpath d='M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z'/%3E%3C/svg%3E", + pinterest: "%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='#{map-get($p, s)}' stroke-width='#{map-get($p, sw)}' fill='#{map-get($p, f)}' viewBox='0 0 24 24'%3E%3Cpath d='M0 0h24v24H0z' stroke='none'/%3E%3Cpath d='m8 20 4-9m-1.3 3c.437 1.263 1.43 2 2.55 2 2.071 0 3.75-1.554 3.75-4a5 5 0 1 0-9.7 1.7'/%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3C/svg%3E", + python: "%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='#{map-get($p, s)}' stroke-width='#{map-get($p, sw)}' fill='#{map-get($p, f)}' viewBox='0 0 24 24'%3E%3Cpath d='M0 0h24v24H0z' stroke='none'/%3E%3Cpath d='M12 9H5a2 2 0 0 0-2 2v4a2 2 0 0 0 2 2h3M12 15h7a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-3'/%3E%3Cpath d='M8 9V5a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-4a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h4a2 2 0 0 0 2-2v-4M11 6v.01M13 18v.01'/%3E%3C/svg%3E", + rss: "%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='#{map-get($p, s)}' stroke-width='#{map-get($p, sw)}' fill='#{map-get($p, f)}' viewBox='0 0 24 24'%3E%3Cpath d='M4 11a9 9 0 0 1 9 9M4 4a16 16 0 0 1 16 16'/%3E%3Ccircle cx='5' cy='19' r='1'/%3E%3C/svg%3E", + search: "%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='#{map-get($p, s)}' stroke-width='#{map-get($p, sw)}' fill='#{map-get($p, f)}' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E", + stack: "%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='#{map-get($p, s)}' stroke-width='#{map-get($p, sw)}' fill='#{map-get($p, f)}' viewBox='0 0 24 24'%3E%3Cpath d='M0 0h24v24H0z' stroke='none'/%3E%3Cpath d='M4 17v1a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-1M8 16h8M8.322 12.582l7.956.836M8.787 9.168l7.826 1.664M10.096 5.764l7.608 2.472'/%3E%3C/svg%3E", + sun: "%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='#{map-get($p, s)}' stroke-width='#{map-get($p, sw)}' fill='#{map-get($p, f)}' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='5'/%3E%3Cpath d='M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42'/%3E%3C/svg%3E", + tag: "%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='#{map-get($p, s)}' stroke-width='#{map-get($p, sw)}' fill='#{map-get($p, f)}' viewBox='0 0 24 24'%3E%3Cpath d='m20.59 13.41-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82zM7 7h.01'/%3E%3C/svg%3E", + twitch: "%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='#{map-get($p, s)}' stroke-width='#{map-get($p, sw)}' fill='#{map-get($p, f)}' viewBox='0 0 24 24'%3E%3Cpath d='M21 2H3v16h5v4l4-4h5l4-4V2zm-10 9V7m5 4V7'/%3E%3C/svg%3E", + twitter: "%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='#{map-get($p, s)}' stroke-width='#{map-get($p, sw)}' fill='#{map-get($p, f)}' viewBox='0 0 24 24'%3E%3Cpath d='M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z'/%3E%3C/svg%3E", + x: "%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='#{map-get($p, s)}' stroke-width='#{map-get($p, sw)}' fill='#{map-get($p, f)}' viewBox='0 0 24 24'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E", + youtube: "%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='#{map-get($p, s)}' stroke-width='#{map-get($p, sw)}' fill='#{map-get($p, f)}' viewBox='0 0 24 24'%3E%3Cpath d='M22.54 6.42a2.78 2.78 0 0 0-1.94-2C18.88 4 12 4 12 4s-6.88 0-8.6.46a2.78 2.78 0 0 0-1.94 2A29 29 0 0 0 1 11.75a29 29 0 0 0 .46 5.33A2.78 2.78 0 0 0 3.4 19c1.72.46 8.6.46 8.6.46s6.88 0 8.6-.46a2.78 2.78 0 0 0 1.94-2 29 29 0 0 0 .46-5.25 29 29 0 0 0-.46-5.33z'/%3E%3Cpath d='m9.75 15.02 5.75-3.27-5.75-3.27v6.54z'/%3E%3C/svg%3E" + ); + $icon: map-get($icons, $icon-name); + @return url("data:image/svg+xml,#{$icon}"); +} +@if $enable-icons { + @if $icon-ffolder {.ffolder { background-image: icon(ffolder, "none", 1, "%23888") }} + @if $icon-ftag {.ftag { background-image: icon(ftag, "none", 1, "%23888") }} + @if $icon-bitbucket {.bitbucket { background-image: icon(bitbucket, "%232684ff", 2, "none") }} + @if $icon-check {.check { background-image: icon(check, "%23888", 2, "none") }} + @if $icon-chevron {.chevron { background-image: icon(chevron, "%23888", 2, "none") }} + @if $icon-clock {.clock { background-image: icon(clock, "%23888", 2, "none") }} + @if $icon-date {.date { background-image: icon(date, "%23888", 2, "none") }} + @if $icon-docker {.docker { background-image: icon(docker, "%232391e5", 2, "none") }} + @if $icon-element {.element { background-image: icon(element, "none", 1, "%230dbd8b") }} + @if $icon-facebook {.facebook { background-image: icon(facebook, "%23395498", 2, "none") }} + @if $icon-folder {.folder { background-image: icon(folder, "%23888", 2, "none") }} + @if $icon-github {.github { background-image: icon(github, "%23888", 2, "none") }} + @if $icon-gitlab {.gitlab { background-image: icon(gitlab, "%23ef6824", 2, "none") }} + @if $icon-globe {.globe { background-image: icon(globe, "%23888", 2, "none") }} + @if $icon-home {.home { background-image: icon(home, "%23888", 2, "none") }} + @if $icon-instagram {.instagram { background-image: icon(instagram, "%23e90077", 2, "none") }} + @if $icon-linkedin {.linkedin { background-image: icon(linkedin, "%232362aa", 2, "none") }} + @if $icon-mail {.mail { background-image: icon(mail, "%23888", 2, "none") }} + @if $icon-mastodon {.mastodon { background-image: icon(mastodon, "none", 1, "%232989ce") }} + @if $icon-matrix {.matrix { background-image: icon(matrix, "%23888", 2, "none") }} + @if $icon-minus {.minus { background-image: icon(minus, "%23888", 2, "none") }} + @if $icon-moon {.moon { background-image: icon(moon, "%23888", 2, "none") }} + @if $icon-pinterest {.pinterest { background-image: icon(pinterest, "%23b7081c", 2, "none") }} + @if $icon-python {.python { background-image: icon(python, "%23f2ca45", 2, "none") }} + @if $icon-rss {.rss { background-image: icon(rss, "%23eb9036", 2, "none") }} + @if $icon-search {.search { background-image: icon(search, "%23888", 2, "none") }} + @if $icon-stack {.stack { background-image: icon(stack, "%23e77923", 2, "none") }} + @if $icon-sun {.sun { background-image: icon(sun, "%23888", 2, "none") }} + @if $icon-tag {.tag { background-image: icon(tag, "%23888", 2, "none") }} + @if $icon-twitch {.twitch { background-image: icon(twitch, "%23a970ff", 2, "none") }} + @if $icon-twitter {.twitter { background-image: icon(twitter, "%232ba5da", 2, "none") }} + @if $icon-x {.x { background-image: icon(x, "%23888", 2, "none") }} + @if $icon-youtube {.youtube { background-image: icon(youtube, "%23f00", 2, "none") }} + .svg { + width: 1.5rem; + height: 1.5rem; + display: inline-block; + overflow: hidden; + vertical-align: middle + } +} diff --git a/sass/include/_misc.scss b/sass/include/_misc.scss new file mode 100644 index 0000000..9f9c3b5 --- /dev/null +++ b/sass/include/_misc.scss @@ -0,0 +1,15 @@ +/** + * Miscs + * https://github.com/picocss/pico + */ + +// Add the correct display in IE 10+ +[hidden], +template { + display: none; +} + +// Add the correct display in IE 9- +canvas { + display: inline-block; +} diff --git a/sass/include/_nav.scss b/sass/include/_nav.scss new file mode 100644 index 0000000..9dd4dac --- /dev/null +++ b/sass/include/_nav.scss @@ -0,0 +1,62 @@ +/** + * Horizontal Nav + * https://github.com/raj457036/attriCSS + */ +main nav a, +main nav a:visited { + font-weight: var(--fh); + border: .1rem solid var(--f2); + border-radius: var(--br); + padding: .3rem var(--s1); + margin: var(--s1); +} +main nav a:hover { + border-color: var(--a3); +} +nav { + align-items: center; + display: flex; + justify-content: space-between; + div { + ul { + line-height: 0; + margin-top: 0; + padding-bottom: var(--s1); + } + display: block; + margin-left: auto + } + div h2 { + font-size: 1rem; + &:hover { + color: var(--a3); + } + } + header { + display: inline; + } + header h1, div ul { + margin-bottom: 0 + } + ul li { + display: inline-block; + margin: 0 0.2rem; + position: relative; + text-align: left; + } +} + +@if map-get($breakpoints, "md") { + @media (max-width: map-get($breakpoints, "md")) { + header nav { + display: flex; + flex-direction: column; + header { + text-align: center + } + div { + margin: auto + } + } + } +} diff --git a/sass/include/_recent.scss b/sass/include/_recent.scss new file mode 100644 index 0000000..88b5763 --- /dev/null +++ b/sass/include/_recent.scss @@ -0,0 +1,35 @@ +main { + .toc { + max-width: 260px; + min-width: 240px; + } + .toc-item { + padding: 10px 20px; + color: var(--f1); + } + .toc-item a, .toc-item-child a { + color: var(--f1); + &:hover { + cursor: pointer; + color: var(--a2); + text-decoration: underline; + } + } + .toc-item a.active, .toc-item-child a.active { + color: var(--a2); + } + .toc-item-child { + padding: 0 30px 5px; + color: var(--f1); + } +} +.toc-sticky { + border-radius: var(--br); + border-top: 5px solid var(--a1); + background-color: var(--c2); + position: sticky; + top: 10px; + padding: 10px 0 20px; + max-height: 100vh; + overflow: auto; +} diff --git a/sass/include/_scroller.scss b/sass/include/_scroller.scss new file mode 100644 index 0000000..de1de5e --- /dev/null +++ b/sass/include/_scroller.scss @@ -0,0 +1,17 @@ +/** + * Horizontal scroller (<figure>) + * https://github.com/picocss/pico + */ + +// Wrapper to make any content responsive across all viewports +figure { + display: block; + margin: 0; + padding: 0; + overflow-x: auto; + + figcaption { + padding: var(--s1) 0; + color: var(--c4); + } +} diff --git a/sass/include/_sectioning.scss b/sass/include/_sectioning.scss new file mode 100644 index 0000000..b433ac2 --- /dev/null +++ b/sass/include/_sectioning.scss @@ -0,0 +1,87 @@ +/** + * Sectioning: Container and responsive spacings for header, main, footer + * https://github.com/picocss/pico + */ + +// Render the `main` element consistently in IE +main { + display: flex; + // should always have a single div that holds all content below main. + // TOC or Recent Posts are the only other sections that would be directly under main. + article, div { + flex: 1 1 0; + min-width: 0; + } +} + +body { + width: 100%; + margin: 0; + + > header, + > main, + > footer { + width: 100%; + margin-right: auto; + margin-left: auto; + + // Semantic container + @if $enable-semantic-container { + padding: var(--s1); + + // Centered viewport max-width only + @if $enable-maxwidth { + @media (min-width: $mb) { + min-width: $mb; + max-width: $mw; + } + } + // Centered viewport + @else if $enable-viewport { + @if map-get($breakpoints, "sm") and $enable-viewport { + @media (min-width: map-get($breakpoints, "sm")) { + max-width: map-get($viewports, "sm"); + //padding-right: 0; + //padding-left: 0; + .toc { + display: none; + } + } + } + @if map-get($breakpoints, "md") and $enable-viewport { + @media (min-width: map-get($breakpoints, "md")) { + max-width: map-get($viewports, "md"); + } + } + @if map-get($breakpoints, "lg") and $enable-viewport { + @media (min-width: map-get($breakpoints, "lg")) { + max-width: map-get($viewports, "lg"); + } + } + @if map-get($breakpoints, "xl") and $enable-viewport { + @media (min-width: map-get($breakpoints, "xl")) { + max-width: map-get($viewports, "xl"); + } + } + } + } + // Semantic container + @else { + padding: var(--s1) 0; + } + } + header, main { + padding-top: 0; + margin-top: 0; + padding-bottom: 0; + margin-bottom: 0; + hr { + margin:0.1rem 0 + } + } + footer{ + hr { + margin:0.5rem 0 + } + } +} diff --git a/sass/include/_table.scss b/sass/include/_table.scss new file mode 100644 index 0000000..7b9ddbf --- /dev/null +++ b/sass/include/_table.scss @@ -0,0 +1,30 @@ +// Table +table { + border-collapse: collapse; + width: 100%; + text-indent: 0; /* Remove text indentation from table contents in Chrome, Edge, and Safari. */ +} +table caption { + margin-bottom: .5rem; +} +tr { + border-bottom: var(--bw) solid var(--c3); +} +td, +th { + padding: var(--s1); +} +th { + text-align: left; +} + +// Striped +table { + tbody tr:nth-child(even) { + background-color: var(--c2); + } + thead tr { + border-top: var(--bw) solid var(--c3); + background-color: var(--c2); + } +} diff --git a/sass/include/_toc.scss b/sass/include/_toc.scss new file mode 100644 index 0000000..0ee8476 --- /dev/null +++ b/sass/include/_toc.scss @@ -0,0 +1,44 @@ +main { + .toc { + max-width: 260px; + min-width: 240px; + margin-left: var(--s1); + } + .toc-item { + padding: .4rem 0; + color: var(--f1); + } + .toc-item a, .toc-item-child a { + color: var(--f1); + &:hover { + cursor: pointer; + color: var(--a2); + text-decoration: underline; + } + } + .toc-item a.active, .toc-item-child a.active { + color: var(--a2); + } + .toc-item-child { + padding: 0 var(--s1); + color: var(--f1); + } +} +.toc-sticky { + border-radius: var(--br); + border-top: 5px solid var(--a1); + background-color: var(--c2); + position: sticky; + top: var(--s2); + margin-top: var(--s2); + padding: 0 var(--s2) var(--s2); + max-height: 100vh; + overflow: auto; +} +@if map-get($breakpoints, "md") { + @media (max-width: map-get($breakpoints, "md")) { + .toc { + display: none; + } + } +} diff --git a/sass/include/_typography.scss b/sass/include/_typography.scss new file mode 100644 index 0000000..f9f0caa --- /dev/null +++ b/sass/include/_typography.scss @@ -0,0 +1,136 @@ +// Typography +h1, +h2, +h3, +h4, +h5, +h6 { + padding-left: 0; + color: var(--f2); + margin-bottom: var(--s1); + margin-top: var(--s2); + font-weight: var(--fh); + font-size: var(--fs); +} +h1 { + font-size: 2rem; +} +h2 { + font-size: 1.75rem; +} +h3 { + font-size: 1.5rem; +} +h4 { + font-size: 1.25rem; +} +h5 { + font-size: 1.125rem; +} +header h1 { + margin-top: 0; +} +a { + color: var(--a1); + text-decoration: none; +} +a:hover { + color: var(--a2); + text-decoration: underline; +} +h1 a, h2 a, main nav a { + color: var(--f2); + text-decoration:none; + &:hover { + color: var(--a3); + text-decoration: none; + } +} +article { + padding-bottom: .2rem; +} + +// Abbreviations +// 1. Remove underline decoration in Chrome, Edge, IE, Opera, and Safari +abbr[title] { + border-bottom: var(--bw) dotted; + text-decoration: none; // 1 + cursor: help; +} + +// Highlighted text +mark { + background-color: var(--c4); + color: var(--c1); + vertical-align: baseline; + padding: .1rem .4rem; +} +blockquote { + margin-left: 0; + padding: .5rem 0 .5rem 1.5rem; + border-left: .25rem solid var(--c3); +} +blockquote > :last-child { + margin-bottom: 0; +} +small { + font-size: .875rem; +} + +/* Prevent `sub` and `sup` elements from affecting the line height in all browsers. */ +sub, +sup { + font-size: .75em; + line-height: 0; + position: relative; + vertical-align: baseline; +} +sub { + bottom: -.25em; +} +sup { + top: -.5em; +} + +address, +blockquote, +dl, +figure, +form, +ol, +p, +pre, +table, +ul { + margin: var(--s1) 0; + color: var(--f1); + font-style: normal; + font-weight: var(--fw); + font-size: var(--fs); +} + +/* Lists */ +ul, +ol { + padding-right: 0; + padding-left: var(--s2); + + li { + margin-bottom: var(--s1); + } +} + +ul li { + list-style: square; +} + +// Ins +ins { + color: var(--cg); + text-decoration: none; +} + +// del +del { + color: var(--cr); +} diff --git a/sass/themes/_auto.scss b/sass/themes/_auto.scss new file mode 100644 index 0000000..0997d76 --- /dev/null +++ b/sass/themes/_auto.scss @@ -0,0 +1,100 @@ +:root { + // Typography + --ff: system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", sans-serif; + --fm: Menlo, Consolas, "Roboto Mono", "Ubuntu Monospace", "Noto Mono", "Oxygen Mono", "Liberation Mono", monospace; + --lh: 1.5; //line-height + --fs: 1rem; //font-size + --fw: 400; //font-weight + --fh: 700; //font-weight h1-h6 + + // Colors + --f1: #555; //font color 1 bbb ccc + --f2: #333; //font color 2 fff eee + + --c1: #fff; //color 1 111 + --c2: #eee; //color 2 222 + --c3: #ddd; //color 3 333 + --c4: #777; //color 4 888 + + --a1: #f90; //accent color 1 link + --a2: #fb0; //accent color 2 hover,focus + --a3: #fb0; //accent color 3 h1-h2 hover,focus + + --cg: #483; //ins green + --cr: #d33; //del red + + // Spacings + --s1: .5rem; + --s2: 1rem; + --rc: .5rem; //radius corners + + // Borders + --br: 0.25rem; //border radius + --bw: 0.0625rem; //border width + --ow: 0.1875rem; //outline width + + // Responsive typography + @if $enable-responsive-typography { + @if map-get($breakpoints, "sm") { + @media (min-width: map-get($breakpoints, "sm")) { + --fs: 1rem; + } + } + @if map-get($breakpoints, "md") { + @media (min-width: map-get($breakpoints, "md")) { + --fs: 1.04rem; + } + } + @if map-get($breakpoints, "lg") { + @media (min-width: map-get($breakpoints, "lg")) { + --fs: 1.08rem; + } + } + @if map-get($breakpoints, "xl") { + @media (min-width: map-get($breakpoints, "xl")) { + --fs: 1.12rem; + } + } + } +} +@media (prefers-color-scheme: dark) { + :root { + --f1: #ccc; //font color 1 + --f2: #ddd; //font color 2 + + --c1: #111; //color 1 + --c2: #222; //color 2 + --c3: #333; //color 3 + --c4: #888; //color 4 + } +} + +// Responsives spacings +@if $enable-responsive-spacings { + // Sectionning + body > header, + body > main, + body > footer, + section { + @if map-get($breakpoints, "sm") { + @media (min-width: map-get($breakpoints, "sm")) { + --s1: .5rem; + } + } + @if map-get($breakpoints, "md") { + @media (min-width: map-get($breakpoints, "md")) { + --s1: .6rem; + } + } + @if map-get($breakpoints, "lg") { + @media (min-width: map-get($breakpoints, "lg")) { + --s1: .7rem; + } + } + @if map-get($breakpoints, "xl") { + @media (min-width: map-get($breakpoints, "xl")) { + --s1: .8rem; + } + } + } +} diff --git a/sass/themes/_dark.scss b/sass/themes/_dark.scss new file mode 100644 index 0000000..d05c111 --- /dev/null +++ b/sass/themes/_dark.scss @@ -0,0 +1,89 @@ +:root { + // Typography + --ff: system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", sans-serif; + --fm: Menlo, Consolas, "Roboto Mono", "Ubuntu Monospace", "Noto Mono", "Oxygen Mono", "Liberation Mono", monospace; + --lh: 1.5; //line-height + --fs: 1rem; //font-size + --fw: 400; //font-weight + --fh: 700; //font-weight h1-h6 + + // Colors + --f1: #ccc; //font color 1 + --f2: #ddd; //font color 2 + + --c1: #111; //color 1 + --c2: #222; //color 2 + --c3: #333; //color 3 + --c4: #888; //color 4 + + --a1: #f90; //accent color 1 link + --a2: #fb0; //accent color 2 hover,focus + --a3: #fb0; //accent color 3 h1-h2 hover,focus + + --cg: #483; //ins green + --cr: #d33; //del red + + // Spacings + --s1: .5rem; + --s2: 1rem; + --rc: .5rem; //radius corners + + // Borders + --br: 0.25rem; //border radius + --bw: 0.0625rem; //border width + --ow: 0.1875rem; //outline width + + // Responsive typography + @if $enable-responsive-typography { + @if map-get($breakpoints, "sm") { + @media (min-width: map-get($breakpoints, "sm")) { + --fs: 1rem; + } + } + @if map-get($breakpoints, "md") { + @media (min-width: map-get($breakpoints, "md")) { + --fs: 1.04rem; + } + } + @if map-get($breakpoints, "lg") { + @media (min-width: map-get($breakpoints, "lg")) { + --fs: 1.08rem; + } + } + @if map-get($breakpoints, "xl") { + @media (min-width: map-get($breakpoints, "xl")) { + --fs: 1.12rem; + } + } + } +} + +// Responsives spacings +@if $enable-responsive-spacings { + // Sectionning + body > header, + body > main, + body > footer, + section { + @if map-get($breakpoints, "sm") { + @media (min-width: map-get($breakpoints, "sm")) { + --s1: .5rem; + } + } + @if map-get($breakpoints, "md") { + @media (min-width: map-get($breakpoints, "md")) { + --s1: .6rem; + } + } + @if map-get($breakpoints, "lg") { + @media (min-width: map-get($breakpoints, "lg")) { + --s1: .7rem; + } + } + @if map-get($breakpoints, "xl") { + @media (min-width: map-get($breakpoints, "xl")) { + --s1: .8rem; + } + } + } +} diff --git a/sass/themes/_light.scss b/sass/themes/_light.scss new file mode 100644 index 0000000..2538391 --- /dev/null +++ b/sass/themes/_light.scss @@ -0,0 +1,89 @@ +:root { + // Typography + --ff: system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", sans-serif; + --fm: Menlo, Consolas, "Roboto Mono", "Ubuntu Monospace", "Noto Mono", "Oxygen Mono", "Liberation Mono", monospace; + --lh: 1.5; //line-height + --fs: 1rem; //font-size + --fw: 400; //font-weight + --fh: 700; //font-weight h1-h6 + + // Colors + --f1: #555; //font color 1 bbb ccc + --f2: #333; //font color 2 fff eee + + --c1: #fff; //color 1 111 + --c2: #eee; //color 2 222 + --c3: #ddd; //color 3 333 + --c4: #777; //color 4 888 + + --a1: #f90; //accent color 1 link + --a2: #fb0; //accent color 2 hover,focus + --a3: #fb0; //accent color 3 h1-h2 hover,focus + + --cg: #483; //ins green + --cr: #d33; //del red + + // Spacings + --s1: .5rem; + --s2: 1rem; + --rc: .5rem; //radius corners + + // Borders + --br: 0.25rem; //border radius + --bw: 0.0625rem; //border width + --ow: 0.1875rem; //outline width + + // Responsive typography + @if $enable-responsive-typography { + @if map-get($breakpoints, "sm") { + @media (min-width: map-get($breakpoints, "sm")) { + --fs: 1rem; + } + } + @if map-get($breakpoints, "md") { + @media (min-width: map-get($breakpoints, "md")) { + --fs: 1.04rem; + } + } + @if map-get($breakpoints, "lg") { + @media (min-width: map-get($breakpoints, "lg")) { + --fs: 1.08rem; + } + } + @if map-get($breakpoints, "xl") { + @media (min-width: map-get($breakpoints, "xl")) { + --fs: 1.12rem; + } + } + } +} + +// Responsives spacings +@if $enable-responsive-spacings { + // Sectionning + body > header, + body > main, + body > footer, + section { + @if map-get($breakpoints, "sm") { + @media (min-width: map-get($breakpoints, "sm")) { + --s1: .5rem; + } + } + @if map-get($breakpoints, "md") { + @media (min-width: map-get($breakpoints, "md")) { + --s1: .6rem; + } + } + @if map-get($breakpoints, "lg") { + @media (min-width: map-get($breakpoints, "lg")) { + --s1: .7rem; + } + } + @if map-get($breakpoints, "xl") { + @media (min-width: map-get($breakpoints, "xl")) { + --s1: .8rem; + } + } + } +} diff --git a/screenshot.png b/screenshot.png Binary files differnew file mode 100644 index 0000000..109c038 --- /dev/null +++ b/screenshot.png diff --git a/templates/404.html b/templates/404.html new file mode 100644 index 0000000..1857f55 --- /dev/null +++ b/templates/404.html @@ -0,0 +1,18 @@ +{% extends "base.html" %} + +{# Title #} +{% block title %}<title>Sorry! the page doesn't exist</title>{% endblock title %} +{% block current_url %} +<meta property="og:url" content="{{ get_url(path='/') }}"> +<meta name="twitter:url" content="{{ get_url(path='/') }}"> +{% endblock current_url %} +{# Page heading #} + +{% block content %}<div> + +<h1>404 Error</h1> +<h2>Sorry</h2> +<p>The requested page does not exist or has been moved to another address.</p> +<p>Please go back to <a href="{{ get_url(path="/", trailing_slash=true) }}">home</a>.</p> + +</div>{% endblock content %} diff --git a/templates/base.html b/templates/base.html new file mode 100644 index 0000000..83f5278 --- /dev/null +++ b/templates/base.html @@ -0,0 +1,128 @@ +{% import "macros/social.html" as social_macros %} +<!DOCTYPE html> +<html lang="en"> +<head> + <meta http-equiv="X-UA-Compatible" content="IE=edge"> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> + + {% block title %}<title>{% if page.title %}{{ page.title }} | {% endif %}{{ config.title }}</title>{% endblock title %} + + {% block description %} + {% if page.description %} + <meta name="description" content="{{ page.description }}" /> + <meta name="twitter:description" content="{{ page.description }}"> + <meta property="og:description" content="{{ page.description }}"> + {% else %} + <meta name="description" content="{{ config.description }}" /> + <meta name="twitter:description" content="{{ config.description}}"> + <meta property="og:description" content="{{ config.description }}"> + {% endif %} + {% endblock description %} + + {% if page.extra.keywords %} + <meta name="keywords" content="{{ page.extra.keywords }}, {{ config.extra.keywords }}"> + {% else %} + <meta name="keywords" content="{{ config.extra.keywords }}"> + {% endif %} + + <meta name="author" content="{{ config.extra.author }}"> + <meta name="copyright" content="{{ config.title }}"> + + {% if config.extra.google %}<meta name="google-site-verification" content="{{ config.extra.google | safe }}">{% endif %} + {% if config.extra.bing %}<meta name="msvalidate.01" content="{{ config.extra.bing | safe}}">{% endif %} + <meta name="referrer" content="no-referrer-when-downgrade"> + <meta name="robots" content="index, follow"> + <meta name="googlebot" content="index,follow"> + <meta name="HandheldFriendly" content="True"> + <meta name="mobile-web-app-capable" content="yes"> + <meta name="apple-mobile-web-app-capable" content="yes"> + <meta name="apple-mobile-web-app-status-bar-style" content="default"> + + {% block css %}<link rel="stylesheet" href="{{ get_url(path="abridge.css", trailing_slash=false, cachebust=true) }}">{% endblock css %} + <link rel="shortcut icon" href="/favicon.png" sizes="16x16" type="image/png"/> + <link rel="canonical" href="{{ get_url(path="/") }}"> + {% if config.generate_feed %}<link rel="alternate" type="application/rss+xml" title="RSS" href="{{ get_url(path="atom.xml") }}">{% endif %} + {% block ogp_head %} + + {% if page.title %} + <meta property="og:title" content="{{ page.title }} | {{ config.title }}"> + <meta name="twitter:title" content="{{ page.title }} | {{ config.title }}"> + {% else %} + <meta property="og:title" content="{{ config.title }}"> + <meta name="twitter:title" content="{{ config.title }}"> + {% endif %} + + <meta property="og:site_name" content="{{ config.title }}"> + <meta property="og:locale" content="en_US"> + <meta property="og:type" content="website"> + <meta property="og:updated_time" content="{{ now() }}">{% endblock ogp_head %} + + {% block current_url %}<meta property="og:url" content="{{ current_url | safe }}"> + <meta name="twitter:url" content="{{ current_url | safe }}">{% endblock current_url %} + + {% if config.extra.social.twitter %} + <meta name="twitter:site" content="@{{ config.extra.social.twitter }}"> + <meta name="twitter:creator" content="@{{ config.extra.social.twitter }}"> + {% endif %} + + {% if page.extra.thumbnail %} + <meta name="twitter:card" content="summary_large_image"> + <meta name="twitter:image" content="{{ get_url(path=page.path ~ page.extra.thumbnail, trailing_slash=false) }}"> + <meta property="og:image" content="{{ get_url(path=page.path ~ page.extra.thumbnail, trailing_slash=false) }}"> + {% elif page.extra.static_thumbnail %} + {%if page.extra.static_thumbnail is matching("^http[s]?://") %} + <meta name="twitter:card" content="summary_large_image"> + <meta name="twitter:image" content="{{ page.extra.static_thumbnail }}"> + <meta property="og:image" content="{{ page.extra.static_thumbnail }}"> + {% else %} + <meta name="twitter:card" content="summary_large_image"> + <meta name="twitter:image" content="{{ get_url(path=page.extra.static_thumbnail, trailing_slash=false) }}"> + <meta property="og:image" content="{{ get_url(path=page.extra.static_thumbnail, trailing_slash=false) }}"> + {% endif %} + {% elif config.extra.default_og_image %} + <meta name="twitter:card" content="summary_large_image"> + <meta name="twitter:image" content="{{ get_url(path=config.extra.default_og_image, trailing_slash=false) }}"> + <meta property="og:image" content="{{ get_url(path=config.extra.default_og_image, trailing_slash=false) }}"> + {% elif config.extra.banner %} + <meta name="twitter:card" content="summary_large_image"> + <meta name="twitter:image" content="{{ get_url(path=config.extra.banner, trailing_slash=false) }}"> + <meta property="og:image" content="{{ get_url(path=config.extra.banner, trailing_slash=false) }}"> + {% else %} + <meta name="twitter:card" content="summary"> + {% endif %} + +{% block extra_head %}{% endblock extra_head %} +</head> +<body> +{% block header %}<header> + <nav> + <header> + <h1><a href="{{ get_url(path="/", trailing_slash=true) }}">{{ config.extra.textlogo | safe }}</a></h1> + </header> + <div overflow> + <ul> + {% for i in config.extra.menu %}<li><h2><a href="{{ get_url(path=i.url, trailing_slash=i.slash) }}">{{ i.name }}</a></h2></li>{% endfor %} + </ul> + </div> + </nav> + {% if config.extra.sitedesc %}{% if config.description %}<div>{{ config.description }}</div>{% endif %}{% endif %} + <hr> +</header>{% endblock header %} +<main>{% block content %} +{% endblock content %} +</main> +{% block footer %}<footer> + <hr> + <center> + <p>{{ social_macros::social_links(social_config=config.extra.social) }}</p> + {# Copyright #}<p>Copyright © 2019-{{ now() | date(format="%Y") }} {{ config.title }}</p> + <p>{% for i in config.extra.menu_footer %}<a href="{{ get_url(path=i.url, trailing_slash=i.slash) }}">{{ i.name }}</a> {% endfor %}</p> + {# Optional footer credit #} + {% if config.extra.footer_credit %} + <p>Powered by <a href="https://www.getzola.org/">Zola</a> and <a href="https://github.com/jieiku/abridge/">Abridge</a></p> + {% endif %} + </center> +</footer>{% endblock footer %} +</body> +</html> diff --git a/templates/categories/list.html b/templates/categories/list.html new file mode 100644 index 0000000..89bbc23 --- /dev/null +++ b/templates/categories/list.html @@ -0,0 +1,12 @@ +{% extends "base.html" %} + +{% block content %} + <div> + <center> + <h1>{{ terms | length }} Categories</h1> + <p>{% for term in terms -%}[<a href="#{{ term.name }}">{{ term.name }}</a>] {%- endfor %}</p> + </center> + {% for term in terms -%}<h2 id="{{ term.name }}"><a href="{{ term.permalink | safe }}">{{ term.name }}</a></h2> + {% for page in term.pages -%}<p><a href="{{ page.permalink | safe }}">{{ page.title }}</a> - <time datetime="{{ page.date }}">{{ page.date | date(format=config.extra.timeformat | default(value="%B %e, %Y")) }}</time></p> + {% endfor -%}{% endfor -%} +</div>{% endblock content %} diff --git a/templates/categories/single.html b/templates/categories/single.html new file mode 100644 index 0000000..d5fe5b7 --- /dev/null +++ b/templates/categories/single.html @@ -0,0 +1,8 @@ +{% extends "base.html" %} + +{% block content %} + <div> + <h2>{{ term.name }}</h2> + {% for year, posts in term.pages | group_by(attribute="year") %}<h3>{{ year }}</h3> + {% for page in posts %}<p><a href="{{ page.permalink | safe }}">{{ page.title }}</a> - <time datetime="{{ page.date }}">{{ page.date | date(format=config.extra.timeformat | default(value="%B %e, %Y")) }}</time></p> + {% endfor %}{% endfor %}</div>{% endblock content %} diff --git a/templates/contact.html b/templates/contact.html new file mode 100644 index 0000000..bf37d2d --- /dev/null +++ b/templates/contact.html @@ -0,0 +1,16 @@ +{% extends "base.html" %} + +{% block content %} +<div> +<p>Want to get in touch? Fill out the form below to send me a message and I will get back to you as soon as possible!</p> +<form name="contact" method="POST"> + <p><label>Name</label> + <input type="text" placeholder="Name" id="name" required data-validation-required-message="Please enter your name."></p> + <p><label>Email Address</label> + <input type="email" placeholder="name@example.com" id="email" required data-validation-required-message="Please enter your email address."></p> + <p><label>Message</label> + <textarea rows="5" placeholder="Message" id="message" required data-validation-required-message="Please enter a message."></textarea></p> + <div id="success"></div> + <p><button type="submit" id="sendMessageButton">Send</button></p> +</form> +</div>{% endblock content %} diff --git a/templates/index.html b/templates/index.html new file mode 100644 index 0000000..16eef5b --- /dev/null +++ b/templates/index.html @@ -0,0 +1,17 @@ +{% import "macros/page.html" as page_macros %} +{% import "macros/macros.html" as macros %} +{% extends "base.html" %}{% block content %} + <div>{% for page in paginator.pages %} + <article> +{{ macros::title(page=page) }} <p>{{ page.summary | markdown(inline=true) | safe }} <a href="{{ page.permalink | safe }}">...more</a></p> + </article>{% endfor %} + <nav> + {% if paginator.previous %}<a href="{{ paginator.previous | safe }}">< Previous</a> {% endif %}{% if paginator.next %}<a href="{{ paginator.next | safe }}">Next ></a>{% endif %} + </nav> + </div>{% set section_item = get_section(path="_index.md") %} + <div class="toc"> + <div class="toc-sticky"> + <h3>Recent Posts</h3>{% for page in section_item.pages | slice(end=config.extra.recent_items) %} +{{ page_macros::page_listing(page=page) }}{% endfor %} + </div> + </div>{% endblock content %} diff --git a/templates/macros/macros.html b/templates/macros/macros.html new file mode 100644 index 0000000..f0fc531 --- /dev/null +++ b/templates/macros/macros.html @@ -0,0 +1,7 @@ +{% macro title(page) %} <h1><a href="{{ page.permalink | safe }}">{{ page.title }}</a></h1> + <span>{{ page.date | date(format="%B %d, %Y") }}{% if page.taxonomies.categories %} <span> [{% for cat in page.taxonomies.categories %}<a href="{{ get_taxonomy_url(kind="categories", name=cat) | safe }}">{{ cat }}</a>{% endfor %}] </span> {% endif %} + {% if page.taxonomies.tags %} <span>{% for tag in page.taxonomies.tags %} #<a href="{{ get_taxonomy_url(kind="tags", name=tag) | safe }}">{{ tag }}</a> {% endfor %}</span>{% endif %} +{% endmacro title %} +{% macro footer(page) %} +<h3><a href="#">Back to top</a></h3> +{% endmacro footer %} diff --git a/templates/macros/page.html b/templates/macros/page.html new file mode 100644 index 0000000..69d40f7 --- /dev/null +++ b/templates/macros/page.html @@ -0,0 +1,3 @@ +{% macro page_listing(page) %} <div class="toc-item"> + <a href="{{ page.permalink | safe}}" title="{{ page.title }}">{{ page.title }}</a> + </div>{% endmacro page_listing %} diff --git a/templates/macros/social.html b/templates/macros/social.html new file mode 100644 index 0000000..2fbee61 --- /dev/null +++ b/templates/macros/social.html @@ -0,0 +1,23 @@ +{% macro social_links(social_config) %}<span>{% set base_url = get_url(path="", lang=lang) %} +{% if config.generate_feed %} <a href="{{ get_url(path="atom.xml") }}" target="_blank"><span class="svg rss" title="Rss"></span></a>{% endif %} + +{% if social_config.mail %} <a href="mailto:{{ social_config.mail }}" target="_blank"><span class="svg mail" title="Mail"></span></a>{% endif %} +{% if social_config.mastodon %} <a href="https://mastodon.social/{{ social_config.mastodon }}/" target="_blank"><span class="svg mastodon" title="Mastodon"></span></a>{% endif %} +{% if social_config.element %} <a href="https://{{ social_config.element }}/" target="_blank"><span class="svg element" title="Element"></span></a>{% endif %} +{% if social_config.matrix %} <a href="https://{{ social_config.matrix }}/" target="_blank"><span class="svg matrix" title="Matrix"></span></a>{% endif %} +{% if social_config.twitter %} <a href="https://twitter.com/{{ social_config.twitter }}/" target="_blank"><span class="svg twitter" title="Twitter"></span></a>{% endif %} +{% if social_config.facebook %} <a href="https://www.facebook.com/{{ social_config.facebook }}/" target="_blank"><span class="svg facebook" title="Facebook"></span></a>{% endif %} +{% if social_config.linkedin %} <a href="https://www.linkedin.com/in/{{ social_config.linkedin }}/" target="_blank"><span class="svg linkedin" title="LinkedIn"></span></a>{% endif %} + +{% if social_config.gitlab %} <a href="https://gitlab.com/{{ social_config.gitlab }}/" target="_blank"><span class="svg gitlab" title="Gitlab"></span></a>{% endif %} +{% if social_config.github %} <a href="https://github.com/{{ social_config.github }}/" target="_blank"><span class="svg github" title="Github"></span></a>{% endif %} +{% if social_config.bitbucket %} <a href="https://bitbucket.org/{{ social_config.bitbucket }}/" target="_blank"><span class="svg bitbucket" title="Bitbucket"></span></a>{% endif %} +{% if social_config.python %} <a href="https://pypi.org/user/{{ social_config.python }}/" target="_blank"><span class="svg python" title="Python"></span></a>{% endif %} +{% if social_config.docker %} <a href="https://hub.docker.com/u/{{ social_config.docker }}/" target="_blank"><span class="svg docker" title="Docker"></span></a>{% endif %} +{% if social_config.stack %} <a href="https://stackoverflow.com/users/{{ social_config.stack }}/" target="_blank"><span class="svg stack" title="Stack"></span></a>{% endif %} + +{% if social_config.instagram %} <a href="https://www.instagram.com/{{ social_config.instagram }}/" target="_blank"><span class="svg instagram" title="Instagram"></span></a>{% endif %} +{% if social_config.pinterest %} <a href="https://www.pinterest.com/{{ social_config.pinterest }}/" target="_blank"><span class="svg pinterest" title="Pinterest"></span></a>{% endif %} +{% if social_config.twitch %} <a href="https://www.twitch.tv/{{ social_config.twitch }}/" target="_blank"><span class="svg twitch" title="Twitch"></span></a>{% endif %} +{% if social_config.youtube %} <a href="https://www.youtube.com/channel/{{ social_config.youtube }}/" target="_blank"><span class="svg youtube" title="YouTube"></span></a>{% endif %} + </span>{% endmacro %} diff --git a/templates/page.html b/templates/page.html new file mode 100644 index 0000000..e3388c0 --- /dev/null +++ b/templates/page.html @@ -0,0 +1,40 @@ +{% extends "base.html" %} +{% import "macros/macros.html" as macros %} +{{config.title}} - {{page.title}} +{% block content %} +<article> + {{ macros::title(page=page) }} + {{ page.content | safe }} + {% block page_before_footer %} + {% endblock page_before_footer %} + {% block page_footer %} + {{ macros::footer(page=page) }} + {% endblock page_footer %} + {% block page_after_footer %} + {% endblock page_after_footer %} +</article> +{% block toc %} + {% if page.extra.toc %} + {% set toc = page.toc %} + {% endif %} + {% if toc %} + <div class="toc"> + <div class="toc-sticky"> + <h3>Index</h3> + {% for h in toc %} + <div class="toc-item"> + <a class="subtext" href="{{h.permalink | safe}}">{{ h.title }}</a> + </div> + {% if h.children %} + {% for h2 in h.children %} + <div class="toc-item-child"> + <a class="subtext" href="{{h2.permalink | safe}}"><small>- {{ h2.title }}</small></a> + </div> + {% endfor %} + {% endif %} + {% endfor %} + </div> + </div> + {% endif %} +{% endblock toc %} +{% endblock content %} diff --git a/templates/pages.html b/templates/pages.html new file mode 100644 index 0000000..30c95e9 --- /dev/null +++ b/templates/pages.html @@ -0,0 +1,2 @@ +{% extends "base.html" %}{% block content %} +<div>{{ page.content | safe }}</div>{% endblock content %} diff --git a/templates/posts.html b/templates/posts.html new file mode 100644 index 0000000..7aee3a7 --- /dev/null +++ b/templates/posts.html @@ -0,0 +1,5 @@ +{% extends "base.html" %}{% block content %}{% set section_item = get_section(path="_index.md") %} + <div>{% for year, posts in section_item.pages | group_by(attribute="year") %} + <h2>{{ year }}</h2> + {% for post in posts %}<p><a href="{{ post.permalink | safe }}" title="{{ post.title }}">{{ post.title }}</a> - {{ post.date | date(format="%F") }}</p>{% endfor %}{% endfor %} + </div>{% endblock content %} diff --git a/templates/robots.txt b/templates/robots.txt new file mode 100644 index 0000000..766e67f --- /dev/null +++ b/templates/robots.txt @@ -0,0 +1,4 @@ +Sitemap: {{ get_url(path="sitemap.xml", trailing_slash=false) }} +User-Agent: * +Allow: / +Host: {{ get_url(path="/", trailing_slash=false) }} diff --git a/templates/shortcodes/audio.html b/templates/shortcodes/audio.html new file mode 100644 index 0000000..3f9368e --- /dev/null +++ b/templates/shortcodes/audio.html @@ -0,0 +1,7 @@ +<audio controls> + {% for source in sources -%} + {% set type = source | split(pat=".") | last -%} + <source src="{{ config.base_url | safe }}{{ page.path | safe }}{{ source | safe }}" type="{{ 'audio/' ~ type }}"> + {% endfor -%} + Your browser doesn't support the audio tag and/or the audio formats in use here – sorry! +</audio> diff --git a/templates/shortcodes/gif.html b/templates/shortcodes/gif.html new file mode 100644 index 0000000..3ae56fd --- /dev/null +++ b/templates/shortcodes/gif.html @@ -0,0 +1,7 @@ +<video autoplay loop muted playsinline> + {% for source in sources -%} + {% set type = source | split(pat=".") | last -%} + <source src="{{ config.base_url | safe }}{{ page.path | safe }}{{ source | safe }}" type="{{ 'video/' ~ type }}"> + {% endfor -%} + Your browser doesn't support the video tag, which I use in place of .gifs, and/or the video formats in use here – sorry! +</video> diff --git a/templates/shortcodes/image.html b/templates/shortcodes/image.html new file mode 100644 index 0000000..ea236ef --- /dev/null +++ b/templates/shortcodes/image.html @@ -0,0 +1,7 @@ +<picture> + {% for source in sources -%} + {% set type = source | split(pat=".") | last -%} + <source srcset="{{ config.base_url | safe}}{{ page.path | safe }}{{ source | safe }}" type="{{ 'img/' ~ type }}"> + {% endfor -%} + <img src="{{ fallback_path }}" alt="{{ fallback_alt }}"/> +</picture> diff --git a/templates/shortcodes/img.html b/templates/shortcodes/img.html new file mode 100644 index 0000000..94cb9fa --- /dev/null +++ b/templates/shortcodes/img.html @@ -0,0 +1,42 @@ +{# {{ img(path="", alt="", caption="", extended_width_pct=1.3, quality=90) }} #} + +{# container_width = (pixel size, px) * (.container's max-width) #} +{% set container_width = 16 * 42 %} + +{# figure_width = container_width - (figure margin_blocks) #} +{% set figure_width = container_width - (40 * 2) %} + +{% if path is starting_with("./") %} + {% set relative_path = page.relative_path | split(pat="/") | slice(end=-1) | join(sep="/") %} + {% set img_path = path | trim_start_matches(pat="./") %} + {% set img_path = relative_path ~ "/" ~ img_path %} +{% else %} + {% set img_path = path %} +{% endif %} + +{% if path is not ending_with(".svg") %} + {% set resize = true %} + {% set image_quality = 90 %} + {% if quality %} + {% set image_quality = quality %} + {% endif %} + + {% if extended_width_pct %} + {% if extended_width_pct == -1 %} + {# adjust extended width to container width #} + {% set extended_width_pct = 0.042 %} + {% endif %} + {% set _width = config.extra.images.max_width - figure_width %} + {% set extended_width = (extended_width_pct * _width + figure_width) | round | int %} + {% if extended_width > config.extra.images.max_width %} + {% set extended_width = config.extra.images.max_width %} + {% endif %} + {% set resized_image = resize_image(path=img_path, width=extended_width, op="fit_width", quality=image_quality) %} + {% else %} + {% set resized_image = resize_image(path=img_path, width=figure_width, op="fit_width", quality=image_quality) %} + {% endif %} +{% endif %} +<figure> + <img src="{% if resize %}{{ resized_image.url }}{% else %}{{ path }}{% endif %}" {% if alt %}alt="{{alt}}"{% endif %}/> + {% if caption %}<figcaption>{{ caption | safe }}</figcaption>{% endif %} +</figure> diff --git a/templates/shortcodes/katex.html b/templates/shortcodes/katex.html new file mode 100644 index 0000000..cac8e97 --- /dev/null +++ b/templates/shortcodes/katex.html @@ -0,0 +1 @@ +<script type="math/tex{% if block %};mode=display{% endif %}">{{body}}</script> diff --git a/templates/shortcodes/quote.html b/templates/shortcodes/quote.html new file mode 100644 index 0000000..8238b71 --- /dev/null +++ b/templates/shortcodes/quote.html @@ -0,0 +1,6 @@ +<blockquote> + {{body}}<br /> + {% if author %} + -- {{ author }} + {% endif %} +</blockquote> diff --git a/templates/shortcodes/video.html b/templates/shortcodes/video.html new file mode 100644 index 0000000..a1a2f31 --- /dev/null +++ b/templates/shortcodes/video.html @@ -0,0 +1,7 @@ +<video controls> + {% for source in sources -%} + {% set type = source | split(pat=".") | last -%} + <source src="{{ config.base_url | safe }}{{ page.path | safe }}{{ source | safe }}" type="{{ 'video/' ~ type }}"> + {% endfor -%} + Your browser doesn't support the video tag and/or the video formats in use here – sorry! +</video> diff --git a/templates/shortcodes/vm.html b/templates/shortcodes/vm.html new file mode 100644 index 0000000..230e557 --- /dev/null +++ b/templates/shortcodes/vm.html @@ -0,0 +1,3 @@ +<div style="position:relative;padding-bottom:56.25%;height:0;overflow:hidden;"> + <iframe src="https://player.vimeo.com/video/{{id}}" style="position:absolute;top:0;left:0;"></iframe> +</div> diff --git a/templates/shortcodes/yt.html b/templates/shortcodes/yt.html new file mode 100644 index 0000000..7816bd8 --- /dev/null +++ b/templates/shortcodes/yt.html @@ -0,0 +1,3 @@ +<div style="position:relative;padding-bottom:56.25%;height:0;overflow:hidden;"> + <iframe src="https://www.youtube.com/embed/{{id}}{% if autoplay %}?autoplay=1{% endif %}" style="position:absolute;top:0;left:0;"></iframe> +</div> diff --git a/templates/tags/list.html b/templates/tags/list.html new file mode 100644 index 0000000..e7a6b7d --- /dev/null +++ b/templates/tags/list.html @@ -0,0 +1,11 @@ +{% extends "base.html" %} + +{% block content %} + <div> + <center> + <h1>{{ terms | length }} Tags</h1> + <p>{% for term in terms -%}#<a href="#{{ term.name }}">{{ term.name }}</a> {%- endfor %}</p> + </center> + {% for term in terms -%}<h2 id="{{ term.name }}">#<a href="{{ term.permalink | safe }}">{{ term.name }}</a></h2> + {% for page in term.pages -%}<p><a href="{{ page.permalink | safe }}">{{ page.title }}</a> - <time datetime="{{ page.date }}">{{ page.date | date(format=config.extra.timeformat | default(value="%B %e, %Y")) }}</time></p> + {% endfor -%}{% endfor -%}</div>{% endblock content %} diff --git a/templates/tags/single.html b/templates/tags/single.html new file mode 100644 index 0000000..fd1a10f --- /dev/null +++ b/templates/tags/single.html @@ -0,0 +1,8 @@ +{% extends "base.html" %} + +{% block content %} + <div> + <h2>{{ term.name }}</h2> + {% for year, posts in term.pages | group_by(attribute="year") %}<h3>{{ year }}</h3> + {% for page in term.pages %}<p><a href="{{ page.permalink | safe }}">{{ page.title }}</a> - <time datetime="{{ page.date }}">{{ page.date | date(format=config.extra.timeformat | default(value="%B %e, %Y")) }}</time></p> + {% endfor %}{% endfor %}</div>{% endblock content %} diff --git a/theme.toml b/theme.toml new file mode 100644 index 0000000..1f4c4e5 --- /dev/null +++ b/theme.toml @@ -0,0 +1,12 @@ +name = "abridge" +description = "A fast and lightweight Zola theme using semantic html, abridge.css class-light CSS, and No JS." +license = "MIT" +homepage = "https://github.com/jieiku/abridge" +min_version = "0.14.1" +demo = "https://jieiku.github.io/abridge/" + +[extra] + +[author] +name = "Jake G (jieiku)" +homepage = "https://github.com/jieiku" |
