This lovely logo was designed for us by hazelnot.
The browser-compatible SVG is incompatible with Firefox, except for the
version (83.0) that just came out a couple of days ago, because it uses
CSS conic gradients. So for a little while we'll need an annoying PNG
fallback.
---
I haven't included the PNG files in this patch, since they take up a lot
of space (compared to text!) and can easily be generated from the SVG
like this if you want to test the fallback:
inkscape -w 70 -h 70 -e logo/logo70.png logo/logo_mesh.svg
inkscape -w 140 -h 140 -e logo/logo140.png logo/logo_mesh.svg
inkscape -w 200 -h 200 -e logo/logo200.png logo/logo_mesh.svg
inkscape -w 400 -h 400 -e logo/logo400.png logo/logo_mesh.svg
index.html | 5 ++++
logo/index.html | 60 +++++++++++++++++++++++++++++++++++++++
logo/logo140.png | Bin 0 -> 21544 bytes
logo/logo140.png.license | 4 +++
logo/logo200.png | Bin 0 -> 36741 bytes
logo/logo200.png.license | 4 +++
logo/logo400.png | Bin 0 -> 98542 bytes
logo/logo400.png.license | 4 +++
logo/logo70.png | Bin 0 -> 7285 bytes
logo/logo70.png.license | 4 +++
logo/logo_html.svg | 33 +++++++++++++++++++++
logo/logo_mesh.svg | 59 ++++++++++++++++++++++++++++++++++++++
style.css | 13 +++++++++
13 files changed, 186 insertions(+)
create mode 100644 logo/index.html
create mode 100644 logo/logo140.png
create mode 100644 logo/logo140.png.license
create mode 100644 logo/logo200.png
create mode 100644 logo/logo200.png.license
create mode 100644 logo/logo400.png
create mode 100644 logo/logo400.png.license
create mode 100644 logo/logo70.png
create mode 100644 logo/logo70.png.license
create mode 100644 logo/logo_html.svg
create mode 100644 logo/logo_mesh.svg
diff --git a/index.html b/index.html
index cbea331..1a3f18e 100644
--- a/index.html
+++ b/index.html
@@ -15,6 +15,11 @@
<body>
+<a href="logo" style="float: left; margin: 0 1em 0.5em 0">
+ <img class="logo" src="logo/logo_html.svg" width="70" height="70" alt="">
+ <img class="no-logo" srcset="logo/logo140.png 140w" src="logo/logo70.png" width="70" height="70" alt="" hidden loading="lazy">
+</a>
+
<h1>Spectrum — a step towards <em>usable</em> secure computing</h1>
<p>
diff --git a/logo/index.html b/logo/index.html
new file mode 100644
index 0000000..93727b7
--- /dev/null
+++ b/logo/index.html
@@ -0,0 +1,60 @@
+
+<!-- SPDX-FileCopyrightText: 2019-2020 Alyssa Ross <hi@alyssa.is> -->
+<!-- SPDX-License-Identifier: CC-BY-SA-4.0 OR GFDL-1.3-or-later -->
+<!-- SPDX-License-Identifier: GPL-3.0-or-later -->
+<html lang="en">
+
+<head>
+
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width,initial-scale=1">
+
+<link rel="stylesheet" href="../style.css">
+
+<title>Spectrum logo</title>
+
+<body>
+
+<nav>
+ <a href="..">Spectrum</a>
+</nav>
+
+<h1>Logo</h1>
+
+<p>
+<img class="logo" src="logo_html.svg" width="200" height="200" alt="" style="margin: 0 auto">
+<img class="no-logo" srcset="logo400.png 400w" src="logo200.png" alt="" width="200" height="200" style="margin: 0 auto" loading="lazy" hidden>
+
+<p>
+The Spectrum logo was designed by hazelnot, and is released under
+the <a href="https://creativecommons.org/publicdomain/zero/1.0/">Creative
+Commons Zero</a> license.
+
+<p>
+Two versions of the logo are available. The first is an SVG file
+suitable for web browsers, and the second is an SVG file suitable for
+<a href="https://inkscape.org/">Inkscape</a>. The difference between
+the versions is in how the colored ring is implemented, since standard
+SVG has no way of drawing conic gradients. The browser version uses
+an embedded HTML element with a CSS conic gradient, and the Inkscape
+version uses the
+not-yet-standard <a href="https://wiki.inkscape.org/wiki/index.php/Mesh_Gradients">SVG
+Mesh Gradients</a>.
+
+<ul>
+
+ <li><a href="logo_html.svg" download>logo_html.svg</a> (for web browsers)
+ <li><a href="logo_mesh.svg" download>logo_mesh.svg</a> (for Inkscape)
+
+</ul>
+
+<p>
+<small>Permission is granted to copy, distribute and/or modify this
+document under either the terms of the
+<a href="https://creativecommons.org/licenses/by-sa/4.0/">Creative
+Commons Attribution-ShareAlike 4.0 International License</a>, or the
+<a href="https://www.gnu.org/licenses/fdl-1.3.html">GNU Free
+Documentation License, Version 1.3</a> or any later version published
+by the Free Software Foundation; with no Invariant Sections, no
+Front-Cover Texts, and no Back-Cover Texts.</small>
+
diff --git a/logo/logo140.png b/logo/logo140.png
new file mode 100644
index 0000000..5978eb9
Binary files /dev/null and b/logo/logo140.png differ
diff --git a/logo/logo140.png.license b/logo/logo140.png.license
new file mode 100644
index 0000000..817f6ad
--- /dev/null
+++ b/logo/logo140.png.license
@@ -0,0 +1,4 @@
+SPDX-FileCopyrightText: 2020 hazelnot
+SPDX-FileCopyrightText: 2020 Alyssa Ross
+
+SPDX-License-Identifier: CC0-1.0
diff --git a/logo/logo200.png b/logo/logo200.png
new file mode 100644
index 0000000..0cd4f1e
Binary files /dev/null and b/logo/logo200.png differ
diff --git a/logo/logo200.png.license b/logo/logo200.png.license
new file mode 100644
index 0000000..817f6ad
--- /dev/null
+++ b/logo/logo200.png.license
@@ -0,0 +1,4 @@
+SPDX-FileCopyrightText: 2020 hazelnot
+SPDX-FileCopyrightText: 2020 Alyssa Ross
+
+SPDX-License-Identifier: CC0-1.0
diff --git a/logo/logo400.png b/logo/logo400.png
new file mode 100644
index 0000000..2cf9ecc
Binary files /dev/null and b/logo/logo400.png differ
diff --git a/logo/logo400.png.license b/logo/logo400.png.license
new file mode 100644
index 0000000..817f6ad
--- /dev/null
+++ b/logo/logo400.png.license
@@ -0,0 +1,4 @@
+SPDX-FileCopyrightText: 2020 hazelnot
+SPDX-FileCopyrightText: 2020 Alyssa Ross
+
+SPDX-License-Identifier: CC0-1.0
diff --git a/logo/logo70.png b/logo/logo70.png
new file mode 100644
index 0000000..664aba4
Binary files /dev/null and b/logo/logo70.png differ
diff --git a/logo/logo70.png.license b/logo/logo70.png.license
new file mode 100644
index 0000000..817f6ad
--- /dev/null
+++ b/logo/logo70.png.license
@@ -0,0 +1,4 @@
+SPDX-FileCopyrightText: 2020 hazelnot
+SPDX-FileCopyrightText: 2020 Alyssa Ross
+
+SPDX-License-Identifier: CC0-1.0
diff --git a/logo/logo_html.svg b/logo/logo_html.svg
new file mode 100644
index 0000000..199c3ca
--- /dev/null
+++ b/logo/logo_html.svg
@@ -0,0 +1,33 @@
+<!-- SPDX-FileCopyrightText: 2020 hazelnot -->
+<!-- SPDX-FileCopyrightText: 2020 Alyssa Ross <hi@alyssa.is> -->
+<!-- SPDX-License-Identifier: CC0-1.0 -->
+<!-- Design by hazelnet, SVG implementation by Alyssa Ross. -->
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 100 100">
+ <defs>
+ <filter id="ring-shadow" x="-10" y="-10" width="120" height="120" color-interpolation-filters="sRGB">
+ <feGaussianBlur in="SourceGraphic" stdDeviation="5" result="blur" />
+ <feComposite in="SourceGraphic" in2="offset" operator="over" />
+ </filter>
+
+ <filter id="center-shadow" x="-10" y="-10" width="120" height="120">
+ <feDropShadow dx="0" dy="0" stdDeviation="6" flood-color="#DDD" />
+ </filter>
+
+ <mask id="ring-mask">
+ <circle stroke="white" stroke-width="5" cx="50" cy="50" r="36" fill="none" />
+ </mask>
+ </defs>
+
+ <!--
+ Firefox doesn't like filters that overflow the bounds of the object
+ they're applied to, when that object is part of a mask. So wrap the
+ ring in a group that we can apply a filter to after it's masked.
+ -->
+ <g filter="url(#ring-shadow)">
+ <foreignObject width="100" height="100" mask="url(#ring-mask)">
+ <div xmlns="http://www.w3.org/1999/xhtml" style="width: 100%; height: 100%; background: conic-gradient(from 0.25turn, red, magenta, blue, aqua, lime, yellow, red)" />
+ </foreignObject>
+ </g>
+
+ <circle cx="50" cy="50" r="27" fill="white" filter="url(#center-shadow)" />
+</svg>
diff --git a/logo/logo_mesh.svg b/logo/logo_mesh.svg
new file mode 100644
index 0000000..ccd6583
--- /dev/null
+++ b/logo/logo_mesh.svg
@@ -0,0 +1,59 @@
+<!-- SPDX-FileCopyrightText: 2020 hazelnot -->
+<!-- SPDX-FileCopyrightText: 2020 Alyssa Ross <hi@alyssa.is> -->
+<!-- SPDX-License-Identifier: CC0-1.0 -->
+<!-- Design by hazelnet, SVG implementation by Alyssa Ross. -->
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 100 100">
+ <defs>
+ <filter id="ring-shadow" x="-10" y="-10" width="120" height="120" color-interpolation-filters="sRGB">
+ <feGaussianBlur in="SourceGraphic" stdDeviation="5" result="blur" />
+ <feComposite in="SourceGraphic" in2="offset" operator="over" />
+ </filter>
+
+ <filter id="center-shadow" x="-10" y="-10" width="120" height="120" color-interpolation-filters="sRGB">
+ <feFlood flood-opacity="1" flood-color="#DDD" result="flood" />
+ <feComposite in="flood" in2="SourceGraphic" operator="in" result="composite1" />
+ <feGaussianBlur in="composite1" stdDeviation="6" result="blur" />
+ <feComposite in="SourceGraphic" in2="blur" operator="over" result="composite2" />
+ </filter>
+
+ <meshgradient id="ring-gradient" x="1.5" y="0.5">
+ <meshrow>
+ <meshpatch>
+ <stop path="L 1 -0.36603" stop-color="red" />
+ <stop path="L 0.5 0.5" stop-color="yellow" />
+ <stop path="L 0.5 0.5" stop-color="yellow" />
+ <stop path="L 1 0.5" stop-color="red" />
+ </meshpatch>
+ <meshpatch>
+ <stop path="L 0 -0.36603" />
+ <stop path="L 0.5 0.5" stop-color="lime" />
+ <stop path="L 0.5 0.5" stop-color="lime" />
+ </meshpatch>
+ <meshpatch>
+ <stop path="L -0.5 0.5" />
+ <stop path="L 0.5 0.5" stop-color="cyan" />
+ <stop path="L 0.5 0.5" stop-color="cyan" />
+ </meshpatch>
+ <meshpatch>
+ <stop path="L 0 1.36603" />
+ <stop path="L 0.5 0.5" stop-color="blue" />
+ <stop path="L 0.5 0.5" stop-color="blue" />
+ </meshpatch>
+ <meshpatch>
+ <stop path="L 1 1.36603" />
+ <stop path="L 0.5 0.5" stop-color="magenta" />
+ <stop path="L 0.5 0.5" stop-color="magenta" />
+ </meshpatch>
+ <meshpatch>
+ <stop path="L 1.5 0.5" />
+ <stop path="L 0.5 0.5" stop-color="red" />
+ <stop path="L 0.5 0.5" stop-color="red" />
+ </meshpatch>
+ </meshrow>
+ </meshgradient>
+ </defs>
+
+ <circle cx="50" cy="50" r="36" fill="none" stroke="url(#ring-gradient)" stroke-width="5" filter="url(#ring-shadow)" />
+
+ <circle cx="50" cy="50" r="27" fill="white" filter="url(#center-shadow)" />
+</svg>
diff --git a/style.css b/style.css
index e9fd751..6463f24 100644
--- a/style.css
+++ b/style.css
@@ -20,3 +20,16 @@ h1, h2, h3, h4 {
var {
font-family: serif;
}
+
+/*
+Firefox only supports conic gradients as of 83.0, so for the time
+being, we need to provide a fallback for the logo.
+*/
+
+.logo { display: none; }
+.no-logo { display: block; }
+
+@supports (background: conic-gradient(from 0.25turn, red, magenta, blue, aqua, lime, yellow, red)) {
+ .logo { display: block; }
+ .no-logo { display: none; }
+}
--
2.27.0
