Add asides, thanks https://underscorefunk.com/

Hoverbear · Dec 14, 2024 · 9e5a25c · 9e5a25c
1 parent 9ceebcc
commit 9e5a25c
Show file tree

Hide file tree

Showing 6 changed files with 74 additions and 45 deletions.
diff --git a/sass/_figure.scss b/sass/_figure.scss
@@ -29,4 +29,21 @@ figure.enriched {
     width: 100%;
     height: 100%;
   }
+}
+
+@media only screen and (min-width : 1444px) {
+  figure.aside-right {
+    max-width: 50vw;
+    float: right;
+    margin-bottom: 1rem;
+    margin-top: 1rem;
+    margin-left: 2rem;
+  }
+  figure.aside-left {
+    max-width: 50vw;
+    float: left;
+    margin-bottom: 1rem;
+    margin-top: 1rem;
+    margin-right: 2rem;
+  }
 }
diff --git a/sass/_text.scss b/sass/_text.scss
@@ -99,7 +99,9 @@ hr {
 
 blockquote {
   background-color: var(--color-muted);
-  border-left: 10px solid #ccc;
+  font-family: var(--font-heading);
+  font-size: var(--font-size-quote);
+  letter-spacing: .07em;
   padding-left: 1vw;
   padding-top: 1vh;
   padding-bottom: 1vh;

diff --git a/sass/_variables.scss b/sass/_variables.scss
@@ -11,6 +11,7 @@
   --font-heading: "Architects Daughter", cursive;
   --font-code: "Kode Mono", monospace;
   --font-size-text: 14pt;
+  --font-size-quote: 16pt;
   --margins: 2vw;
   --gradient-fade-up: linear-gradient(0deg, rgba(22, 22, 22,1) 0%,  rgba(22, 22, 22,.9) 20%, rgba(22, 22, 22,.8) 50%, rgba(22, 22, 22,0) 100%);
   --gradient-fade-down: linear-gradient(0deg, rgba(22, 22, 22,0) 0%, rgba(22, 22, 22,.7) 50%,  rgba(22, 22, 22,.9) 80%, rgba(22, 22, 22,1) 100%);

diff --git a/templates/macros/image.html b/templates/macros/image.html
@@ -2,53 +2,58 @@
 
 <!-- Create a 'full' sized image. -->
 {%- macro full(path, alt=false, colocated=false, source=false, photographer=false) -%}
-{%- if colocated == true -%}
-{%- set path = colocated_asset::colocated_asset(path=path) | trim -%}
-{%- endif -%}
-{% set image_1920 = resize_image(path=path, width=1920, height=1080, op='fit_width') %}
-{% set image_3840 = resize_image(path=path, width=3840, height=2160, op='fit_width') %}
-<img srcset="
-              {{ image_1920.url }} 1920w,
-              {{ image_3840.url }} 3840w
-              " sizes="
-                     (max-width: 1200px) 1200px,
-                     (max-width: 1800px) 1800px,set 
-                     3840px" src="{{ image_1920.url }}" alt="{% if alt %}{{ alt }}{% endif %}" />
+  {%- if colocated == true -%}
+    {%- set path = colocated_asset::colocated_asset(path=path) | trim -%}
+  {%- endif -%}
+  {% set image_1920 = resize_image(path=path, width=1920, height=1080, op='fit_width') %}
+  {% set image_3840 = resize_image(path=path, width=3840, height=2160, op='fit_width') %}
+  <img srcset="
+    {{ image_1920.url }} 1920w,
+    {{ image_3840.url }} 3840w
+  "
+  sizes="
+    (max-width: 1200px) 1200px,
+    (max-width: 1800px) 1800px,set 
+    3840px
+  "
+  src="{{ image_1920.url }}"
+  alt="{% if alt %}{{ alt }}{% endif %}"
+  />
 {%- endmacro full -%}
 
 <!-- Create a 'full' sized image. -->
 {%- macro captioned(path, alt=false, colocated=false, source=false, photographer=false, classes="") -%}
 <figure class="captioned {{ classes }}">
-       {{ self::full(path=path, alt=alt | default(value=""), colocated=colocated | default(value=false)) | safe }}
-       <figcaption>
-              {%- if alt -%}
-              {{ alt | markdown(inline=true) | safe }}
-              {%- endif -%}
-              {%- if source and photographer -%}
-              &nbsp;- <a href="{{ source | safe }}">{{ photographer }}</a>
-              {%- elif source -%}
-              &nbsp;- {{ source }}
-              {%- elif photographer -%}
-              &nbsp;- {{ photographer }}
-              {%- endif -%}
-       </figcaption>
+  {{ self::full(path=path, alt=alt | default(value=""), colocated=colocated | default(value=false)) | safe }}
+  <figcaption>
+    {%- if alt -%}
+    {{ alt | markdown(inline=true) | safe }}
+    {%- endif -%}
+    {%- if source and photographer -%}
+    &nbsp;- <a href="{{ source | safe }}">{{ photographer }}</a>
+    {%- elif source -%}
+    &nbsp;- {{ source }}
+    {%- elif photographer -%}
+    &nbsp;- {{ photographer }}
+    {%- endif -%}
+  </figcaption>
 </figure>
 {%- endmacro full -%}
 
 {%- macro enriched(path, alt=false, colocated=false, source=false, photographer=false, classes="", style="") -%}
 <figure class="enriched {{ classes }}" style="{{ style }}">
-       <figcaption>
-              {%- if alt -%}
-              {{ alt | markdown(inline=true) | safe }}
-              {%- endif -%}
-              {%- if source and photographer -%}
-              &nbsp;- <a href="{{ source | safe }}">{{ photographer }}</a>
-              {%- elif source -%}
-              &nbsp;- {{ source }}
-              {%- elif photographer -%}
-              &nbsp;- {{ photographer }}
-              {%- endif -%}
-       </figcaption>
-       {{ self::full(path=path, alt=alt | default(value=""), colocated=colocated | default(value=false)) | safe }}
+  <figcaption>
+    {%- if alt -%}
+    {{ alt | markdown(inline=true) | safe }}
+    {%- endif -%}
+    {%- if source and photographer -%}
+    &nbsp;- <a href="{{ source | safe }}">{{ photographer }}</a>
+    {%- elif source -%}
+    &nbsp;- {{ source }}
+    {%- elif photographer -%}
+    &nbsp;- {{ photographer }}
+    {%- endif -%}
+  </figcaption>
+  {{ self::full(path=path, alt=alt | default(value=""), colocated=colocated | default(value=false)) | safe }}
 </figure>
 {%- endmacro enriched -%}
diff --git a/templates/partials/logo.html b/templates/partials/logo.html
@@ -1,10 +1,7 @@
 <svg class="logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2160 1444" preserveAspectRatio="xMidYMin slice">
   <g id="starfield">
     {%- for idx in range(end=600) -%}
-      <circle
-
-
-      />
+      <circle />
     {%- endfor -%}
   </g>
   <g id="logo" transform="translate(780 152)">

diff --git a/templates/shortcodes/figure.html b/templates/shortcodes/figure.html
@@ -1,4 +1,11 @@
 {%- import "macros/image.html" as image -%}
 
-{{ image::enriched(path=path, alt=alt, colocated=colocated, source=source | default(value=false),
-photographer=photographer | default(value=false), style=style | default(value="")) | safe }}
+{{ image::enriched(
+    path=path,
+    alt=alt,
+    colocated=colocated,
+    source=source | default(value=false),
+    photographer=photographer | default(value=false),
+    style=style | default(value=""),
+    classes=classes | default(value=[]),
+) | safe }}