From 49f72d5d171e84b2f2c18825dac6128b81fbd348 Mon Sep 17 00:00:00 2001
From: Jieiku
Date: Tue, 31 May 2022 02:34:04 -0700
Subject: Update Example Content

---
 content/overview-abridge.md            |   4 +++-
 content/overview-markdown-and-style.md |  10 +++++-----
 content/pages/about.md                 |   2 +-
 sass/_imports.scss                     |   2 +-
 screenshot.png                         | Bin 206681 -> 142147 bytes
 static/banner.png                      | Bin 20004 -> 14818 bytes
 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
index 0d37465..3b0e13f 100644
Binary files a/screenshot.png and b/screenshot.png differ
diff --git a/static/banner.png b/static/banner.png
index 54a9d95..9865019 100644
Binary files a/static/banner.png and b/static/banner.png differ
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 }}');
-- 
cgit v1.3.1