[PATCH www 1/2] Add Spectrum logo!
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 @@ +<!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..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
We don't do anything to fall back to a PNG favicon for browsers that don't support conic gradients (Firefox <83), because there's not really any good way to do that, and the favicon isn't all that important anyway. --- bibliography.html | 1 + contributing.html | 1 + design.html | 1 + doc/index.html | 1 + index.html | 1 + logo/index.html | 1 + motivation.html | 1 + participating.html | 1 + todo.html | 1 + 9 files changed, 9 insertions(+) diff --git a/bibliography.html b/bibliography.html index cc0851f..aa88f86 100644 --- a/bibliography.html +++ b/bibliography.html @@ -9,6 +9,7 @@ <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> +<link rel="icon" href="logo/logo_html.svg"> <link rel="stylesheet" href="style.css"> <title>Spectrum Bibliography</title> diff --git a/contributing.html b/contributing.html index 25522fc..01946de 100644 --- a/contributing.html +++ b/contributing.html @@ -9,6 +9,7 @@ <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> +<link rel="icon" href="logo/logo_html.svg"> <link rel="stylesheet" href="style.css"> <title>Contributing to Spectrum</title> diff --git a/design.html b/design.html index 3c0e37d..285d743 100644 --- a/design.html +++ b/design.html @@ -9,6 +9,7 @@ <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> +<link rel="icon" href="logo/logo_html.svg"> <link rel="stylesheet" href="style.css"> <title>Spectrum Design</title> diff --git a/doc/index.html b/doc/index.html index a77d4ac..8b29b2d 100644 --- a/doc/index.html +++ b/doc/index.html @@ -9,6 +9,7 @@ <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> +<link rel="icon" href="../logo/logo_html.svg"> <link rel="stylesheet" href="../style.css"> <title>Spectrum documentation</title> diff --git a/index.html b/index.html index 1a3f18e..10dcdeb 100644 --- a/index.html +++ b/index.html @@ -9,6 +9,7 @@ <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> +<link rel="icon" href="logo/logo_html.svg"> <link rel="stylesheet" href="style.css"> <title>Spectrum, a step towards usable secure computing</title> diff --git a/logo/index.html b/logo/index.html index 93727b7..6245858 100644 --- a/logo/index.html +++ b/logo/index.html @@ -9,6 +9,7 @@ <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> +<link rel="icon" href="logo_html.svg"> <link rel="stylesheet" href="../style.css"> <title>Spectrum logo</title> diff --git a/motivation.html b/motivation.html index 4076263..f22c571 100644 --- a/motivation.html +++ b/motivation.html @@ -9,6 +9,7 @@ <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> +<link rel="icon" href="logo/logo_html.svg"> <link rel="stylesheet" href="style.css"> <title>Motivation for Spectrum</title> diff --git a/participating.html b/participating.html index da96473..d04c2e5 100644 --- a/participating.html +++ b/participating.html @@ -10,6 +10,7 @@ <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> +<link rel="icon" href="logo/logo_html.svg"> <link rel="stylesheet" href="style.css"> <title>Participating in Spectrum</title> diff --git a/todo.html b/todo.html index d293664..67cf072 100644 --- a/todo.html +++ b/todo.html @@ -9,6 +9,7 @@ <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> +<link rel="icon" href="logo/logo_html.svg"> <link rel="stylesheet" href="style.css"> <title>Spectrum contribution ideas</title> -- 2.27.0
--- 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
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
There is a typo there. It should be inkscape -w 70 -h 70 -o logo/logo70.png logo/logo_mesh.svg inkscape -w 140 -h 140 -o logo/logo140.png logo/logo_mesh.svg inkscape -w 200 -h 200 -o logo/logo200.png logo/logo_mesh.svg inkscape -w 400 -h 400 -o logo/logo400.png logo/logo_mesh.svg Love the logo.
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
There is a typo there. It should be
inkscape -w 70 -h 70 -o logo/logo70.png logo/logo_mesh.svg inkscape -w 140 -h 140 -o logo/logo140.png logo/logo_mesh.svg inkscape -w 200 -h 200 -o logo/logo200.png logo/logo_mesh.svg inkscape -w 400 -h 400 -o logo/logo400.png logo/logo_mesh.svg
-e works for me with Inkscape 0.92.5! Doesn't matter too much, though, because it's only in the patch commentary (and not in the commit message itself, since that'll include the actual PNG files).
participants (2)
-
Alyssa Ross -
Philipp Steinpaß