--- v2 because I spelt "hazelnot" as "hazelnet" in the comments in the SVG files in the first version. 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 @@ +<!doctype html> +<!-- 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 <hi@alyssa.is> + +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 <hi@alyssa.is> + +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 <hi@alyssa.is> + +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 <hi@alyssa.is> + +SPDX-License-Identifier: CC0-1.0 diff --git a/logo/logo_html.svg b/logo/logo_html.svg new file mode 100644 index 0000000..1ac8531 --- /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 hazelnot, 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..c4b55c9 --- /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 hazelnot, 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