Browse Source

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

pull/149/head
Josh Habdas 2 years ago
parent
commit
d2dadcda9b
Signed by: jhabdas GPG Key ID: B148B31154C75A74
4 changed files with 66 additions and 22 deletions
  1. +22
    -9
      docs/content/_index.md
  2. +4
    -2
      docs/content/feature/svg-favicon.md
  3. +25
    -11
      docs/layouts/index.html
  4. +15
    -0
      docs/static/wtfpl.svg

+ 22
- 9
docs/content/_index.md View File

@ -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

+ 4
- 2
docs/content/feature/svg-favicon.md View File

@ -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.

+ 25
- 11
docs/layouts/index.html View File

@ -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 {

+ 15
- 0
docs/static/wtfpl.svg View File

@ -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>

Loading…
Cancel
Save