SVG logo + non-breaking pattern links

This commit is contained in:
Heydon Pickering 2017-08-02 18:00:38 +01:00
parent fa1afa50f1
commit c927cc1261
37 changed files with 82 additions and 60 deletions

View File

@ -6,5 +6,5 @@ theme = "infusion"
publishDir = "docs"
[params]
description = "Documentation for the **Infusion** pattern library builder. This documentation is constructed using the builder itself."
description = "Documentation for the **Infusion** pattern library builder, built with **Infusion** itself."
codePenUser = "Heydon"

View File

@ -42,6 +42,12 @@ theme = "infusion"
## Including a logo
In the `images/static` folder, you'll find a `logo.png` file. Replace this file with your own company or project logo. Currently, only the PNG format is supported.
In the `images/static` folder, you'll find a `logo.svg` file. Replace this file with your own company or project logo. Currently, only the SVG is supported this easily because SVG the superior format for logotypes. However, if you must use a different format, you can open up the `themes/infusion/layouts/_default/baseof.html` file and edit the image reference:
```html
<a class="logo" href="/" aria-label="{{ .Site.Title }} pattern library home page">
<img src="{{ "images/logo.svg" | absURL }}" alt="">
</a>
```
Now that your logo's in place, everything should be ready. Where next? You can learn about {{% pattern "Library structure" %}} to help you get writing, or find out how to serve the library locally and on Github Pages in {{% pattern "Serving" %}}.

View File

@ -676,6 +676,8 @@ h1 svg {
.pattern-link {
font-weight: bold;
display: inline-block;
hyphens: auto;
}
/* inline demos */

Binary file not shown.

Before

Width:  |  Height:  |  Size: 9.0 KiB

1
docs/images/logo.svg Normal file

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 5.5 KiB

View File

@ -120,10 +120,10 @@
<div>
<div class="intro">
<a class="logo" href="https://heydon.github.io/infusion/" aria-label="Infusion pattern library home page">
<img src="https://heydon.github.io/infusion/images/logo.png" alt="">
<img src="https://heydon.github.io/infusion/images/logo.svg" alt="">
</a>
<p class="library-desc">
Documentation for the <strong>Infusion</strong> pattern library builder. This documentation is constructed using the builder itself.
Documentation for the <strong>Infusion</strong> pattern library builder, built with <strong>Infusion</strong> itself.
<a class="print" href="https://heydon.github.io/infusion/print-version">
<svg viewBox="0 0 50 50" aria-hidden="true">

View File

@ -117,10 +117,10 @@
<div>
<div class="intro">
<a class="logo" href="https://heydon.github.io/infusion/" aria-label="Infusion pattern library home page">
<img src="https://heydon.github.io/infusion/images/logo.png" alt="">
<img src="https://heydon.github.io/infusion/images/logo.svg" alt="">
</a>
<p class="library-desc">
Documentation for the <strong>Infusion</strong> pattern library builder. This documentation is constructed using the builder itself.
Documentation for the <strong>Infusion</strong> pattern library builder, built with <strong>Infusion</strong> itself.
<a class="print" href="https://heydon.github.io/infusion/print-version">
<svg viewBox="0 0 50 50" aria-hidden="true">

View File

@ -117,10 +117,10 @@
<div>
<div class="intro">
<a class="logo" href="https://heydon.github.io/infusion/" aria-label="Infusion pattern library home page">
<img src="https://heydon.github.io/infusion/images/logo.png" alt="">
<img src="https://heydon.github.io/infusion/images/logo.svg" alt="">
</a>
<p class="library-desc">
Documentation for the <strong>Infusion</strong> pattern library builder. This documentation is constructed using the builder itself.
Documentation for the <strong>Infusion</strong> pattern library builder, built with <strong>Infusion</strong> itself.
<a class="print" href="https://heydon.github.io/infusion/print-version">
<svg viewBox="0 0 50 50" aria-hidden="true">

View File

@ -117,10 +117,10 @@
<div>
<div class="intro">
<a class="logo" href="https://heydon.github.io/infusion/" aria-label="Infusion pattern library home page">
<img src="https://heydon.github.io/infusion/images/logo.png" alt="">
<img src="https://heydon.github.io/infusion/images/logo.svg" alt="">
</a>
<p class="library-desc">
Documentation for the <strong>Infusion</strong> pattern library builder. This documentation is constructed using the builder itself.
Documentation for the <strong>Infusion</strong> pattern library builder, built with <strong>Infusion</strong> itself.
<a class="print" href="https://heydon.github.io/infusion/print-version">
<svg viewBox="0 0 50 50" aria-hidden="true">

View File

@ -117,10 +117,10 @@
<div>
<div class="intro">
<a class="logo" href="https://heydon.github.io/infusion/" aria-label="Infusion pattern library home page">
<img src="https://heydon.github.io/infusion/images/logo.png" alt="">
<img src="https://heydon.github.io/infusion/images/logo.svg" alt="">
</a>
<p class="library-desc">
Documentation for the <strong>Infusion</strong> pattern library builder. This documentation is constructed using the builder itself.
Documentation for the <strong>Infusion</strong> pattern library builder, built with <strong>Infusion</strong> itself.
<a class="print" href="https://heydon.github.io/infusion/print-version">
<svg viewBox="0 0 50 50" aria-hidden="true">

View File

@ -117,10 +117,10 @@
<div>
<div class="intro">
<a class="logo" href="https://heydon.github.io/infusion/" aria-label="Infusion pattern library home page">
<img src="https://heydon.github.io/infusion/images/logo.png" alt="">
<img src="https://heydon.github.io/infusion/images/logo.svg" alt="">
</a>
<p class="library-desc">
Documentation for the <strong>Infusion</strong> pattern library builder. This documentation is constructed using the builder itself.
Documentation for the <strong>Infusion</strong> pattern library builder, built with <strong>Infusion</strong> itself.
<a class="print" href="https://heydon.github.io/infusion/print-version">
<svg viewBox="0 0 50 50" aria-hidden="true">

View File

@ -117,10 +117,10 @@
<div>
<div class="intro">
<a class="logo" href="https://heydon.github.io/infusion/" aria-label="Infusion pattern library home page">
<img src="https://heydon.github.io/infusion/images/logo.png" alt="">
<img src="https://heydon.github.io/infusion/images/logo.svg" alt="">
</a>
<p class="library-desc">
Documentation for the <strong>Infusion</strong> pattern library builder. This documentation is constructed using the builder itself.
Documentation for the <strong>Infusion</strong> pattern library builder, built with <strong>Infusion</strong> itself.
<a class="print" href="https://heydon.github.io/infusion/print-version">
<svg viewBox="0 0 50 50" aria-hidden="true">

View File

@ -117,10 +117,10 @@
<div>
<div class="intro">
<a class="logo" href="https://heydon.github.io/infusion/" aria-label="Infusion pattern library home page">
<img src="https://heydon.github.io/infusion/images/logo.png" alt="">
<img src="https://heydon.github.io/infusion/images/logo.svg" alt="">
</a>
<p class="library-desc">
Documentation for the <strong>Infusion</strong> pattern library builder. This documentation is constructed using the builder itself.
Documentation for the <strong>Infusion</strong> pattern library builder, built with <strong>Infusion</strong> itself.
<a class="print" href="https://heydon.github.io/infusion/print-version">
<svg viewBox="0 0 50 50" aria-hidden="true">

View File

@ -117,10 +117,10 @@
<div>
<div class="intro">
<a class="logo" href="https://heydon.github.io/infusion/" aria-label="Infusion pattern library home page">
<img src="https://heydon.github.io/infusion/images/logo.png" alt="">
<img src="https://heydon.github.io/infusion/images/logo.svg" alt="">
</a>
<p class="library-desc">
Documentation for the <strong>Infusion</strong> pattern library builder. This documentation is constructed using the builder itself.
Documentation for the <strong>Infusion</strong> pattern library builder, built with <strong>Infusion</strong> itself.
<a class="print" href="https://heydon.github.io/infusion/print-version">
<svg viewBox="0 0 50 50" aria-hidden="true">

View File

@ -117,10 +117,10 @@
<div>
<div class="intro">
<a class="logo" href="https://heydon.github.io/infusion/" aria-label="Infusion pattern library home page">
<img src="https://heydon.github.io/infusion/images/logo.png" alt="">
<img src="https://heydon.github.io/infusion/images/logo.svg" alt="">
</a>
<p class="library-desc">
Documentation for the <strong>Infusion</strong> pattern library builder. This documentation is constructed using the builder itself.
Documentation for the <strong>Infusion</strong> pattern library builder, built with <strong>Infusion</strong> itself.
<a class="print" href="https://heydon.github.io/infusion/print-version">
<svg viewBox="0 0 50 50" aria-hidden="true">

View File

@ -117,10 +117,10 @@
<div>
<div class="intro">
<a class="logo" href="https://heydon.github.io/infusion/" aria-label="Infusion pattern library home page">
<img src="https://heydon.github.io/infusion/images/logo.png" alt="">
<img src="https://heydon.github.io/infusion/images/logo.svg" alt="">
</a>
<p class="library-desc">
Documentation for the <strong>Infusion</strong> pattern library builder. This documentation is constructed using the builder itself.
Documentation for the <strong>Infusion</strong> pattern library builder, built with <strong>Infusion</strong> itself.
<a class="print" href="https://heydon.github.io/infusion/print-version">
<svg viewBox="0 0 50 50" aria-hidden="true">

View File

@ -117,10 +117,10 @@
<div>
<div class="intro">
<a class="logo" href="https://heydon.github.io/infusion/" aria-label="Infusion pattern library home page">
<img src="https://heydon.github.io/infusion/images/logo.png" alt="">
<img src="https://heydon.github.io/infusion/images/logo.svg" alt="">
</a>
<p class="library-desc">
Documentation for the <strong>Infusion</strong> pattern library builder. This documentation is constructed using the builder itself.
Documentation for the <strong>Infusion</strong> pattern library builder, built with <strong>Infusion</strong> itself.
<a class="print" href="https://heydon.github.io/infusion/print-version">
<svg viewBox="0 0 50 50" aria-hidden="true">
@ -395,7 +395,12 @@ theme = "infusion"
<h2 id="including-a-logo">Including a logo</h2>
<p>In the <code>images/static</code> folder, you&rsquo;ll find a <code>logo.png</code> file. Replace this file with your own company or project logo. Currently, only the PNG format is supported.</p>
<p>In the <code>images/static</code> folder, you&rsquo;ll find a <code>logo.svg</code> file. Replace this file with your own company or project logo. Currently, only the SVG is supported this easily because SVG the superior format for logotypes. However, if you must use a different format, you can open up the <code>themes/infusion/layouts/_default/baseof.html</code> file and edit the image reference:</p>
<pre><code class="language-html">&lt;a class=&quot;logo&quot; href=&quot;/&quot; aria-label=&quot;{{ .Site.Title }} pattern library home page&quot;&gt;
&lt;img src=&quot;{{ &quot;images/logo.svg&quot; | absURL }}&quot; alt=&quot;&quot;&gt;
&lt;/a&gt;
</code></pre>
<p>Now that your logo&rsquo;s in place, everything should be ready. Where next? You can learn about <a class="pattern-link" href="https://heydon.github.io/infusion/patterns/writing/library-structure/"><svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>Library structure</a> to help you get writing, or find out how to serve the library locally and on Github Pages in <a class="pattern-link" href="https://heydon.github.io/infusion/patterns/serving/"><svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>Serving</a>.</p>

View File

@ -117,10 +117,10 @@
<div>
<div class="intro">
<a class="logo" href="https://heydon.github.io/infusion/" aria-label="Infusion pattern library home page">
<img src="https://heydon.github.io/infusion/images/logo.png" alt="">
<img src="https://heydon.github.io/infusion/images/logo.svg" alt="">
</a>
<p class="library-desc">
Documentation for the <strong>Infusion</strong> pattern library builder. This documentation is constructed using the builder itself.
Documentation for the <strong>Infusion</strong> pattern library builder, built with <strong>Infusion</strong> itself.
<a class="print" href="https://heydon.github.io/infusion/print-version">
<svg viewBox="0 0 50 50" aria-hidden="true">

View File

@ -117,10 +117,10 @@
<div>
<div class="intro">
<a class="logo" href="https://heydon.github.io/infusion/" aria-label="Infusion pattern library home page">
<img src="https://heydon.github.io/infusion/images/logo.png" alt="">
<img src="https://heydon.github.io/infusion/images/logo.svg" alt="">
</a>
<p class="library-desc">
Documentation for the <strong>Infusion</strong> pattern library builder. This documentation is constructed using the builder itself.
Documentation for the <strong>Infusion</strong> pattern library builder, built with <strong>Infusion</strong> itself.
<a class="print" href="https://heydon.github.io/infusion/print-version">
<svg viewBox="0 0 50 50" aria-hidden="true">

View File

@ -117,10 +117,10 @@
<div>
<div class="intro">
<a class="logo" href="https://heydon.github.io/infusion/" aria-label="Infusion pattern library home page">
<img src="https://heydon.github.io/infusion/images/logo.png" alt="">
<img src="https://heydon.github.io/infusion/images/logo.svg" alt="">
</a>
<p class="library-desc">
Documentation for the <strong>Infusion</strong> pattern library builder. This documentation is constructed using the builder itself.
Documentation for the <strong>Infusion</strong> pattern library builder, built with <strong>Infusion</strong> itself.
<a class="print" href="https://heydon.github.io/infusion/print-version">
<svg viewBox="0 0 50 50" aria-hidden="true">

View File

@ -117,10 +117,10 @@
<div>
<div class="intro">
<a class="logo" href="https://heydon.github.io/infusion/" aria-label="Infusion pattern library home page">
<img src="https://heydon.github.io/infusion/images/logo.png" alt="">
<img src="https://heydon.github.io/infusion/images/logo.svg" alt="">
</a>
<p class="library-desc">
Documentation for the <strong>Infusion</strong> pattern library builder. This documentation is constructed using the builder itself.
Documentation for the <strong>Infusion</strong> pattern library builder, built with <strong>Infusion</strong> itself.
<a class="print" href="https://heydon.github.io/infusion/print-version">
<svg viewBox="0 0 50 50" aria-hidden="true">

View File

@ -117,10 +117,10 @@
<div>
<div class="intro">
<a class="logo" href="https://heydon.github.io/infusion/" aria-label="Infusion pattern library home page">
<img src="https://heydon.github.io/infusion/images/logo.png" alt="">
<img src="https://heydon.github.io/infusion/images/logo.svg" alt="">
</a>
<p class="library-desc">
Documentation for the <strong>Infusion</strong> pattern library builder. This documentation is constructed using the builder itself.
Documentation for the <strong>Infusion</strong> pattern library builder, built with <strong>Infusion</strong> itself.
<a class="print" href="https://heydon.github.io/infusion/print-version">
<svg viewBox="0 0 50 50" aria-hidden="true">

View File

@ -117,10 +117,10 @@
<div>
<div class="intro">
<a class="logo" href="https://heydon.github.io/infusion/" aria-label="Infusion pattern library home page">
<img src="https://heydon.github.io/infusion/images/logo.png" alt="">
<img src="https://heydon.github.io/infusion/images/logo.svg" alt="">
</a>
<p class="library-desc">
Documentation for the <strong>Infusion</strong> pattern library builder. This documentation is constructed using the builder itself.
Documentation for the <strong>Infusion</strong> pattern library builder, built with <strong>Infusion</strong> itself.
<a class="print" href="https://heydon.github.io/infusion/print-version">
<svg viewBox="0 0 50 50" aria-hidden="true">

View File

@ -117,10 +117,10 @@
<div>
<div class="intro">
<a class="logo" href="https://heydon.github.io/infusion/" aria-label="Infusion pattern library home page">
<img src="https://heydon.github.io/infusion/images/logo.png" alt="">
<img src="https://heydon.github.io/infusion/images/logo.svg" alt="">
</a>
<p class="library-desc">
Documentation for the <strong>Infusion</strong> pattern library builder. This documentation is constructed using the builder itself.
Documentation for the <strong>Infusion</strong> pattern library builder, built with <strong>Infusion</strong> itself.
<a class="print" href="https://heydon.github.io/infusion/print-version">
<svg viewBox="0 0 50 50" aria-hidden="true">

View File

@ -117,10 +117,10 @@
<div>
<div class="intro">
<a class="logo" href="https://heydon.github.io/infusion/" aria-label="Infusion pattern library home page">
<img src="https://heydon.github.io/infusion/images/logo.png" alt="">
<img src="https://heydon.github.io/infusion/images/logo.svg" alt="">
</a>
<p class="library-desc">
Documentation for the <strong>Infusion</strong> pattern library builder. This documentation is constructed using the builder itself.
Documentation for the <strong>Infusion</strong> pattern library builder, built with <strong>Infusion</strong> itself.
<a class="print" href="https://heydon.github.io/infusion/print-version">
<svg viewBox="0 0 50 50" aria-hidden="true">

View File

@ -117,10 +117,10 @@
<div>
<div class="intro">
<a class="logo" href="https://heydon.github.io/infusion/" aria-label="Infusion pattern library home page">
<img src="https://heydon.github.io/infusion/images/logo.png" alt="">
<img src="https://heydon.github.io/infusion/images/logo.svg" alt="">
</a>
<p class="library-desc">
Documentation for the <strong>Infusion</strong> pattern library builder. This documentation is constructed using the builder itself.
Documentation for the <strong>Infusion</strong> pattern library builder, built with <strong>Infusion</strong> itself.
<a class="print" href="https://heydon.github.io/infusion/print-version">
<svg viewBox="0 0 50 50" aria-hidden="true">

View File

@ -117,10 +117,10 @@
<div>
<div class="intro">
<a class="logo" href="https://heydon.github.io/infusion/" aria-label="Infusion pattern library home page">
<img src="https://heydon.github.io/infusion/images/logo.png" alt="">
<img src="https://heydon.github.io/infusion/images/logo.svg" alt="">
</a>
<p class="library-desc">
Documentation for the <strong>Infusion</strong> pattern library builder. This documentation is constructed using the builder itself.
Documentation for the <strong>Infusion</strong> pattern library builder, built with <strong>Infusion</strong> itself.
<a class="print" href="https://heydon.github.io/infusion/print-version">
<svg viewBox="0 0 50 50" aria-hidden="true">

View File

@ -117,10 +117,10 @@
<div>
<div class="intro">
<a class="logo" href="https://heydon.github.io/infusion/" aria-label="Infusion pattern library home page">
<img src="https://heydon.github.io/infusion/images/logo.png" alt="">
<img src="https://heydon.github.io/infusion/images/logo.svg" alt="">
</a>
<p class="library-desc">
Documentation for the <strong>Infusion</strong> pattern library builder. This documentation is constructed using the builder itself.
Documentation for the <strong>Infusion</strong> pattern library builder, built with <strong>Infusion</strong> itself.
<a class="print" href="https://heydon.github.io/infusion/print-version">
<svg viewBox="0 0 50 50" aria-hidden="true">

View File

@ -117,10 +117,10 @@
<div>
<div class="intro">
<a class="logo" href="https://heydon.github.io/infusion/" aria-label="Infusion pattern library home page">
<img src="https://heydon.github.io/infusion/images/logo.png" alt="">
<img src="https://heydon.github.io/infusion/images/logo.svg" alt="">
</a>
<p class="library-desc">
Documentation for the <strong>Infusion</strong> pattern library builder. This documentation is constructed using the builder itself.
Documentation for the <strong>Infusion</strong> pattern library builder, built with <strong>Infusion</strong> itself.
<a class="print" href="https://heydon.github.io/infusion/print-version">
<svg viewBox="0 0 50 50" aria-hidden="true">

View File

@ -115,10 +115,10 @@
<div>
<div class="intro">
<a class="logo" href="https://heydon.github.io/infusion/" aria-label="Infusion pattern library home page">
<img src="https://heydon.github.io/infusion/images/logo.png" alt="">
<img src="https://heydon.github.io/infusion/images/logo.svg" alt="">
</a>
<p class="library-desc">
Documentation for the <strong>Infusion</strong> pattern library builder. This documentation is constructed using the builder itself.
Documentation for the <strong>Infusion</strong> pattern library builder, built with <strong>Infusion</strong> itself.
</a>
</p>
@ -429,7 +429,12 @@ theme = "infusion"
<h2 id="including-a-logo">Including a logo</h2>
<p>In the <code>images/static</code> folder, you&rsquo;ll find a <code>logo.png</code> file. Replace this file with your own company or project logo. Currently, only the PNG format is supported.</p>
<p>In the <code>images/static</code> folder, you&rsquo;ll find a <code>logo.svg</code> file. Replace this file with your own company or project logo. Currently, only the SVG is supported this easily because SVG the superior format for logotypes. However, if you must use a different format, you can open up the <code>themes/infusion/layouts/_default/baseof.html</code> file and edit the image reference:</p>
<pre><code class="language-html">&lt;a class=&quot;logo&quot; href=&quot;/&quot; aria-label=&quot;{{ .Site.Title }} pattern library home page&quot;&gt;
&lt;img src=&quot;{{ &quot;images/logo.svg&quot; | absURL }}&quot; alt=&quot;&quot;&gt;
&lt;/a&gt;
</code></pre>
<p>Now that your logo&rsquo;s in place, everything should be ready. Where next? You can learn about <a class="pattern-link" href="https://heydon.github.io/infusion/patterns/writing/library-structure/"><svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>Library structure</a> to help you get writing, or find out how to serve the library locally and on Github Pages in <a class="pattern-link" href="https://heydon.github.io/infusion/patterns/serving/"><svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>Serving</a>.</p>

File diff suppressed because one or more lines are too long

View File

@ -117,10 +117,10 @@
<div>
<div class="intro">
<a class="logo" href="https://heydon.github.io/infusion/" aria-label="Infusion pattern library home page">
<img src="https://heydon.github.io/infusion/images/logo.png" alt="">
<img src="https://heydon.github.io/infusion/images/logo.svg" alt="">
</a>
<p class="library-desc">
Documentation for the <strong>Infusion</strong> pattern library builder. This documentation is constructed using the builder itself.
Documentation for the <strong>Infusion</strong> pattern library builder, built with <strong>Infusion</strong> itself.
<a class="print" href="https://heydon.github.io/infusion/print-version">
<svg viewBox="0 0 50 50" aria-hidden="true">

View File

@ -117,10 +117,10 @@
<div>
<div class="intro">
<a class="logo" href="https://heydon.github.io/infusion/" aria-label="Infusion pattern library home page">
<img src="https://heydon.github.io/infusion/images/logo.png" alt="">
<img src="https://heydon.github.io/infusion/images/logo.svg" alt="">
</a>
<p class="library-desc">
Documentation for the <strong>Infusion</strong> pattern library builder. This documentation is constructed using the builder itself.
Documentation for the <strong>Infusion</strong> pattern library builder, built with <strong>Infusion</strong> itself.
<a class="print" href="https://heydon.github.io/infusion/print-version">
<svg viewBox="0 0 50 50" aria-hidden="true">

Binary file not shown.

Before

Width:  |  Height:  |  Size: 9.0 KiB

1
static/images/logo.svg Normal file

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 5.5 KiB

View File

@ -44,7 +44,7 @@
<div>
<div class="intro">
<a class="logo" href="/" aria-label="{{ .Site.Title }} pattern library home page">
<img src="{{ "images/logo.png" | absURL }}" alt="">
<img src="{{ "images/logo.svg" | absURL }}" alt="">
</a>
<p class="library-desc">
{{ .Site.Params.Description | markdownify }}

View File

@ -676,6 +676,8 @@ h1 svg {
.pattern-link {
font-weight: bold;
display: inline-block;
hyphens: auto;
}
/* inline demos */