diff options
| -rw-r--r-- | content/overview-abridge.md | 4 | ||||
| -rw-r--r-- | content/overview-markdown-and-style.md | 10 | ||||
| -rw-r--r-- | content/pages/about.md | 2 | ||||
| -rw-r--r-- | sass/_imports.scss | 2 | ||||
| -rw-r--r-- | screenshot.png | bin | 206681 -> 142147 bytes | |||
| -rw-r--r-- | static/banner.png | bin | 20004 -> 14818 bytes | |||
| -rw-r--r-- | templates/shortcodes/imghover.html | 25 |
7 files changed, 27 insertions, 16 deletions
diff --git a/content/overview-abridge.md b/content/overview-abridge.md index e6b8db3..61a048d 100644 --- a/content/overview-abridge.md +++ b/content/overview-abridge.md @@ -7,8 +7,10 @@ categories = ["Features"] tags = ["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. +Abridge is a fast and lightweight Zola theme using semantic html (~6kb css before svg icons), and no JS required apart from the search. Perfect score on [Google's Lighthouse audit](https://web.dev/measure/). <!-- more --> +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. + 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. diff --git a/content/overview-markdown-and-style.md b/content/overview-markdown-and-style.md index 29b938a..0c372b6 100644 --- a/content/overview-markdown-and-style.md +++ b/content/overview-markdown-and-style.md @@ -179,7 +179,7 @@ during Gopherfest, November 18, 2015. [^2]: The quote is the first sentence of Aristotle's [Metaphysics](https://en.wikipedia.org/wiki/Metaphysics_(Aristotle)). -# Forms: +## Forms: <form name="contact" method="POST" > <p><label>Name</label> @@ -271,7 +271,7 @@ during Gopherfest, November 18, 2015. </label> </form> -# Navs +## Navs Site primary menu is created by nesting the nav under a header tag. Refer to the top of this site for an example. @@ -287,9 +287,9 @@ If the nav tag is under the main tag instead of the header tag then the links wi </header> -# Infinity Flex Grid +## Infinity Flex Grid -## Simple Grid +### Simple Grid <section> <section> 1 </section> @@ -310,7 +310,7 @@ If the nav tag is under the main tag instead of the header tag then the links wi <section> 5 </section> </section> -## Complex grid +### Complex grid <section> <section> 1 </section> diff --git a/content/pages/about.md b/content/pages/about.md index 2c083e1..8b7056e 100644 --- a/content/pages/about.md +++ b/content/pages/about.md @@ -11,7 +11,7 @@ Abridge was created by [Jake G (jieiku)](https://github.com/Jieiku) to be fast a Some fun facts about the theme: * Perfect score on Google's Lighthouse audit -* Only ~4 KB of CSS before enabling the SVG CSS icons. +* Only ~6 KB of CSS before enabling the SVG CSS icons. * No JavaScript (except the search which can be disabled) * Now with SEO! diff --git a/sass/_imports.scss b/sass/_imports.scss index 1112ed7..579081d 100644 --- a/sass/_imports.scss +++ b/sass/_imports.scss @@ -21,5 +21,5 @@ @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/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/screenshot.png b/screenshot.png Binary files differindex 0d37465..3b0e13f 100644 --- a/screenshot.png +++ b/screenshot.png diff --git a/static/banner.png b/static/banner.png Binary files differindex 54a9d95..9865019 100644 --- a/static/banner.png +++ b/static/banner.png diff --git a/templates/shortcodes/imghover.html b/templates/shortcodes/imghover.html index 8063378..4bda6da 100644 --- a/templates/shortcodes/imghover.html +++ b/templates/shortcodes/imghover.html @@ -34,14 +34,6 @@ {%- endfor %} -{%- if w and h and p %} - {%- set padding = h / w * p %} -{%- elif w and h %} - {%- set padding = h / w * 50 %} -{%- else %} - {%- set padding = 50 %} -{%- endif %} - <style> {%- for source in src %} @@ -67,6 +59,22 @@ {%- set sourcepath = source | split(pat="/") | last %} {%- set sourcename = pathtype ~ sourcepath | split(pat=".") | first %} + {%- set sourcetype = pathtype ~ sourcepath | split(pat=".") | last %} + + {%- if w and h and p %} + {%- set padding = h / w * p %} + {%- elif w and h %} + {%- set padding = h / w * 50 %} + {%- elif p %} + {%- set metafile = page.path ~ path ~ sourcepath %} + {%- set meta = get_image_metadata(path=metafile) %} + {%- set padding = meta.height / meta.width * p %} + /* height={{meta.height}} width={{meta.width}} (THIS IS BACKWARDS!?) */ + {%- else %} + {%- set padding = 50 %} + {%- endif %} + + {%- if not loop.first %} #{{ sourcename | safe }}image { @@ -76,6 +84,7 @@ width: {{ p | default(value=50) }}%; height: 0; padding-top: {{ padding }}%; + } #{{ sourcename | safe }}image:hover { background-image: url('{{ path | safe }}{{ sourcepath | safe }}'); |
