docs(help/home): add wtfpl logo to homepage & add logo animation

docs/content/_index.md

@@ -3,11 +3,22 @@ title = "After Dark"
 description = "After Dark is a complete hypermedia authoring system for the Hugo Static Site Generator."
 +++
 
-<svg class="logo" width="96" viewBox="0 0 46 45" xmlns="http://www.w3.org/2000/svg"><title>After Dark</title><path d="M.708 45L23 .416 45.292 45H.708zM35 38L23 19 11 38h24z" class="logo" fill="#000"/></svg>
+<section class="grid">
+  <div class="cell -12of12">
+    <svg class="shaded animated" viewBox="0 0 46 45" width="92" height="90" xmlns="http://www.w3.org/2000/svg">
+      <title>After Dark</title>
+      <path d="M.708 45L23 .416 45.292 45H.708zM35 38L23 19 11 38h24z" fill="#000"/>
+    </svg>
+  </div>
+</section>
 
-<p class="leading">After Dark is a complete hypermedia authoring system for the {{< external text="Hugo Static Site Generator" href="https://gohugo.io" />}} designed for the creation of engaging websites that are easy to build, fully customizable and secure by design.</p>
+<section class="grid">
+  <div class="cell -12of12">
+    <p class="leading">After Dark is a complete hypermedia authoring system for the {{< external text="Hugo Static Site Generator" href="https://gohugo.io" />}} designed for the creation of engaging websites that are easy to build, fully customizable and secure by design.</p>
+  </div>
+</section>
 
-<!-- <svg viewBox="0 0 32 32" width="32" height="32" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
+<svg viewBox="0 0 32 32" width="32" height="32" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
   <path d="M30 10 L16 26 2 10 Z" />
 </svg>
 <svg viewBox="0 0 32 32" width="32" height="32" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
@@ -15,14 +26,10 @@ description = "After Dark is a complete hypermedia authoring system for the Hugo
 </svg>
 <svg viewBox="0 0 32 32" width="32" height="32" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
   <path d="M30 10 L16 26 2 10 Z" />
-</svg> -->
+</svg>
 
 <section class="hero">
-  {{< figure
-    src="minimal-mac_1600x1200-fs8.png"
-    lqipsrc="minimal-mac_800x600-fs8.png"
-    alt="After Dark Screenshots"
-  >}}
+  {{< figure alt="After Dark screenshots" src="minimal-mac_1600x1200-fs8.png" lqipsrc="minimal-mac_800x600-fs8.png" >}}
 </section>
 
 <section>
@@ -111,4 +118,10 @@ description = "After Dark is a complete hypermedia authoring system for the Hugo
   </div>
 </div>
 
+<section class="grid license" style="margin-top: 3em">
+  <div class="cell -12of12">
+    <img width="96" src="wtfpl.svg">
+  </div>
+</section>
+
 [1]: https://t.me/joinchat/Iw_6FEhmKL9sPUAukX9jzg

docs/content/feature/svg-favicon.md

@@ -6,13 +6,13 @@ tags = ["color", "style", "graphics", "branding"]
 features = ["code highlighter", "snippets", "related content"]
 +++
 
-After Dark ships with a 169B SVG favicon embedded into every page:
+After Dark ships with an 169B optimized[^1] SVG favicon embedded into every page:
 
 {{< highlight html >}}
 {{< include "themes/after-dark/layouts/partials/head/favicon.html" >}}
 {{< /highlight >}}
 
-The default favicon is a black-colored oblique triangle in the shape of a tepee. The center of the triangle uses negative space to give the illusion of a second equilateral triangle in the shape of a pyramid, or open fire, contained within.
+The favicon is a black-colored oblique triangle in the shape of a tepee. The center of the triangle uses negative space to give the illusion of a second equilateral triangle in the shape of a pyramid, or open fire, contained within.
 
 The color of the icon can be modified by changing the `fill` attribute:
 
@@ -80,3 +80,5 @@ If optimizing for platform experiences do so from within `favicon.html`:
 {{< /highlight >}}
 
 See the {{< external href="https://github.com/h5bp/html5-boilerplate/blob/6.1.0/dist/doc/extend.md#web-apps" text="H5BP Wiki" />}} for platform-specific requirements and {{< external href="https://gohugo.io/documentation/" text="Hugo Documentation" />}} for help with templating functions and variables.
+
+[^1]: See [Optimizing SVGs in data URIs](https://codepen.io/tigt/post/optimizing-svgs-in-data-uris) for help optimizing your own SVGs.

docs/layouts/index.html

@@ -19,13 +19,29 @@
     border-bottom: none;
     background-color: inherit;
   }
-  .hack .logo {
-    margin: 1em 0 3em;
-    filter: drop-shadow(0px -10px 35px #ff2e88) brightness(150%);
+  .shaded {
+    --filter: drop-shadow(0px -25px 45px #ff2e88) brightness(1) drop-shadow(0px -55px 35px #ff2e88) brightness(1) drop-shadow(0px -35px 155px #ff9800) brightness(4);
+    filter: var(--filter);
+    opacity: 0;
   }
-  .hack section.hero {
-    margin-left: -1em;
-    margin-right: -1em;
+  .license {
+    filter: drop-shadow(0px -10px 35px #ff2e88) brightness(2);
+  }
+  .animated {
+    animation: reveal 2s both;
+  }
+  @keyframes reveal {
+    from {
+      filter: var(--filter);
+    }
+    to {
+      filter: drop-shadow(0px -20px 45px #ff2e88) brightness(.1) drop-shadow(0px 0px 5px #ff2e88) brightness(.7) drop-shadow(0px -20px 135px #ff2e88) brightness(2);
+      opacity: 1;
+    }
+  }
+  .hack section.hero figure {
+    margin: 0;
+    min-height: 266px;
   }
   @media screen and (min-width: 768px) {
     .hero img {
@@ -33,13 +49,10 @@
     }
   }
   .hack p.leading {
-    margin-top: 2.5em;
-    margin-bottom: 2.5em;
     font-size: 1.1rem;
     line-height: 1.6;
   }
   .hack .grid {
-    margin: 3.5em;
     justify-content: center;
   }
   .hack header {
@@ -47,7 +60,7 @@
   }
   .hack header h1 {
     margin-top: 0;
-    padding-top: 1em;
+    /* padding-top: 1em; */
   }
   .hack header h1:after {
     content: none;
@@ -62,7 +75,8 @@
   .hack h1 sup::before {
     content: " ";
   }
-  .hack section {
+  .hack section,
+  .hack header {
     margin-bottom: 3em;
   }
   .hack section h2 {

docs/static/wtfpl.svg

@@ -0,0 +1,15 @@
+<svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" id="svg2" version="1.1" inkscape:version="0.48.3.1 r9886" width="297" height="215" sodipodi:docname="logo-297x215.png">
+  <metadata id="metadata8">
+    <rdf:RDF>
+      <cc:Work rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>
+        <dc:title/>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs id="defs6"/>
+  <sodipodi:namedview pagecolor="#ffffff" bordercolor="#666666" borderopacity="1" objecttolerance="10" gridtolerance="10" guidetolerance="10" inkscape:pageopacity="0" inkscape:pageshadow="2" inkscape:window-width="1400" inkscape:window-height="1050" id="namedview4" showgrid="false" inkscape:zoom="1.0976744" inkscape:cx="136.51714" inkscape:cy="88.933051" inkscape:window-x="0" inkscape:window-y="0" inkscape:window-maximized="0" inkscape:current-layer="svg2"/>
+  <path style="fill:#000000;fill-opacity:1;stroke:none" d="M 108.40625 5.90625 C 52.306055 5.90625 6.84375 51.399805 6.84375 107.5 C 6.84375 163.60019 52.306055 209.09375 108.40625 209.09375 C 122.61329 209.09375 136.12775 206.14216 148.40625 200.875 C 160.68475 206.14216 174.19921 209.09375 188.40625 209.09375 C 244.50644 209.09375 290 163.60019 290 107.5 C 290 51.399805 244.50644 5.90625 188.40625 5.90625 C 174.19921 5.90625 160.68475 8.8578414 148.40625 14.125 C 136.12775 8.8578414 122.61329 5.90625 108.40625 5.90625 z M 106.40625 37.8125 C 121.73587 37.8125 135.91647 42.733394 147.46875 51.0625 C 159.02103 42.733394 173.17038 37.8125 188.5 37.8125 C 227.32183 37.8125 258.8125 69.271923 258.8125 108.09375 C 258.8125 146.91558 227.32183 178.40625 188.5 178.40625 C 173.17274 178.40625 159.02006 173.48302 147.46875 165.15625 C 135.91744 173.48302 121.73351 178.40625 106.40625 178.40625 C 67.584423 178.40625 36.125 146.91558 36.125 108.09375 C 36.125 69.271923 67.584423 37.8125 106.40625 37.8125 z " id="path2989"/>
+  <path style="fill:#000000;stroke:none;stroke-width:0.20000000000000001;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;fill-opacity:1" d="m 116.82546,66.192973 -33.419525,0 c -22.54767,46.689617 -3.679505,78.469377 11.230018,85.067227 14.909527,6.59786 39.297897,10.78923 52.843627,-13.64071 11.127,20.91039 36.41018,22.12022 53.22181,14.37696 16.81163,-7.74327 33.12311,-43.11547 11.73047,-85.803477 l -33.99227,2.7e-5 c 11.50159,26.419492 11.73257,62.462 0.009,63.53264 -11.72378,1.07063 -15.09694,-2.84981 -13.76446,-44.285231 l -33.309,-0.149602 c 2.48911,40.900273 -5.08883,48.002003 -15.33865,43.514363 -10.24982,-4.48763 -9.79468,-28.13042 0.78918,-62.612197 z" id="path3768" inkscape:connector-curvature="0" sodipodi:nodetypes="cczczcczcczc"/>
+</svg>