diff options
| -rw-r--r-- | CHANGELOG.md | 14 | ||||
| -rw-r--r-- | css/content.scss | 48 | ||||
| -rw-r--r-- | css/fonts.scss | 11 | ||||
| -rw-r--r-- | css/frontPage.scss | 19 | ||||
| -rw-r--r-- | css/main.scss | 8 | ||||
| -rw-r--r-- | css/navigationBar.scss | 18 | ||||
| -rw-r--r-- | html/about.html | 64 | ||||
| -rw-r--r-- | html/ax.html | 37 | ||||
| -rw-r--r-- | html/backspace.html | 25 | ||||
| -rw-r--r-- | html/benoit.html | 18 | ||||
| -rw-r--r-- | html/bowshock.html | 8 | ||||
| -rw-r--r-- | html/bzipper.html | 18 | ||||
| -rw-r--r-- | html/deltaWorld.html | 25 | ||||
| -rw-r--r-- | html/eas.html | 14 | ||||
| -rw-r--r-- | html/luma.html | 10 | ||||
| -rw-r--r-- | html/pollex.html | 16 | ||||
| -rw-r--r-- | js/initImages.ts | 15 | ||||
| -rw-r--r-- | shtml/cloneNotice.shtml | 3 | ||||
| -rw-r--r-- | shtml/navigationBar.shtml | 5 | ||||
| -rw-r--r-- | svg/benoit-background.svg | 18 | ||||
| -rw-r--r-- | svg/glyph/ax.svg | 11 | ||||
| -rw-r--r-- | svg/glyph/bowshock.svg | 4 |
22 files changed, 349 insertions, 60 deletions
diff --git a/CHANGELOG.md b/CHANGELOG.md index cbf2f80..1f27c92 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,19 @@ # Changelog +## 2.0 + +* Elaborate pages +* Don't colour links +* Add credits section to `about` page +* Add Bowshock glyph +* Add new project *Delta World* +* Add new project *AX* +* Misc. styling changes +* Add new project *Backspace* +* Add glow to images +* Add sources link to navigation bar +* Add clone notices + ## 1.0 * Rework navigation bar diff --git a/css/content.scss b/css/content.scss index 03904a5..1934d68 100644 --- a/css/content.scss +++ b/css/content.scss @@ -1,16 +1,19 @@ #content { - background-color: $backgroundColour; - margin: auto; - min-height: 100vh; - max-width: 72rem; - padding: 2rem; + margin: auto; + min-height: 100vh; + max-width: 72rem; + padding: 2rem; - p:not(.heading, #contentHeading) { + p:not(.heading, #contentHeading, #cloneNotice p) { line-height: 2rem; } a, a:visited { - color: $highlightColour; + color: $textColour; + } + + em { + font-style: normal; font-weight: bold; } @@ -18,7 +21,7 @@ &.code { background-color: $foregroundColour; border-radius: calc(1rem / 4); - font-family: "Martian Mono", "monospace"; + font-family: "Fira Mono", "monospace"; padding: calc(1rem / 4); a { @@ -26,10 +29,6 @@ } } - &.fancy { - font-weight: bold; - } - &.small { font-size: 0.75em; } @@ -39,6 +38,7 @@ background-color: $foregroundColour; border-radius: 1rem; display: block; + font-family: "Martian Mono", "monospace"; font-size: 4rem; font-weight: bold; margin: auto; @@ -69,8 +69,11 @@ } x-image { - display: block; - width: fit-content; + background-position: center; + background-repeat: no-repeat; + display: block; + position: relative; + width: 100%; &:nth-of-type(odd) { margin-right: auto; @@ -80,13 +83,28 @@ margin-left: auto; } + img.blur { + filter: blur(1rem); + position: absolute; + z-index: -1; + width: 100%; + } + a { img { border-radius: 1rem; display: block; - height: 16rem; image-rendering: pixelated; + width: 100%; } } } + + #cloneNotice { + background-color: $foregroundColour; + border-radius: 1rem; + font-weight: bold; + padding: 1rem; + text-align: center; + } }
\ No newline at end of file diff --git a/css/fonts.scss b/css/fonts.scss index 6abafc0..2956c3d 100644 --- a/css/fonts.scss +++ b/css/fonts.scss @@ -1,4 +1,15 @@ @font-face { + font-family: "Fira Mono"; + src: url("/ttf/FiraMono-Regular.ttf"); +} + +@font-face { + font-family: "Fira Mono"; + font-weight: bold; + src: url("/ttf/FiraMono-Bold.ttf"); +} + +@font-face { font-family: "Martian Mono"; src: url("/ttf/MartianMono-Regular.ttf"); } diff --git a/css/frontPage.scss b/css/frontPage.scss index dc40d11..44cb7ff 100644 --- a/css/frontPage.scss +++ b/css/frontPage.scss @@ -9,17 +9,34 @@ width: 100vw; body.about & { - background-color: $achernarColour; } + background-color: $achernarColour; + } + + body.ax & { + background-color: #422984; + } + + body.backspace & { + background-color: $backgroundColour; + } body.benoit & { background-image: url("/svg/benoit-background.svg"); background-size: cover; } + body.bowshock & { + background-color: #B61833; + } + body.bzipper & { background-color: #FFFFFF; } + body.deltaWorld & { + background-color: $backgroundColour; + } + body.eas & { background-color: #01CD93; } diff --git a/css/main.scss b/css/main.scss index e3cb1cd..a5e15a6 100644 --- a/css/main.scss +++ b/css/main.scss @@ -21,6 +21,14 @@ $achernarColour: #007B34; box-sizing: border-box; } +ol, ul { + list-style-type: none; +} + +li p::before { + content: "\2014\0020"; +} + @import "navigationBar.scss"; @import "frontPage.scss"; @import "content.scss"; diff --git a/css/navigationBar.scss b/css/navigationBar.scss index 4600437..c52351b 100644 --- a/css/navigationBar.scss +++ b/css/navigationBar.scss @@ -17,18 +17,30 @@ --foregroundColour: #FFFFFF; } + body.ax & { + --foregroundColour: #FFFFFF; + } + + body.backspace & { + --foregroundColour: #FFFFFF; + } + body.benoit & { --foregroundColour: #FFFFFF; } body.bowshock & { - --foregroundColour: #FFFFFF; + --foregroundColour: #FFEEE0; } body.bzipper & { --foregroundColour: #B4202D; } + body.deltaWorld & { + --foregroundColour: #FFFFFF; + } + body.eas & { --foregroundColour: #00291B; } @@ -48,10 +60,6 @@ transition: text-decoration-color 0.125s; &:hover { - cursor: pointer; - } - - &:hover { text-decoration-color: var(--foregroundColour); transition: text-decoration-color 0.125s; } diff --git a/html/about.html b/html/about.html index 6968cd3..2677f0e 100644 --- a/html/about.html +++ b/html/about.html @@ -17,24 +17,20 @@ </div> <div id="content"> - <p id="contentHeading">ABOUT</p> + <p id="contentHeading">About</p> - <p><b>Achernar</b> is a danish-based development studio located in the Capital Region of Denmark.</p> + <p><b>Achernar</b> is a small indie development studio based in the Capital Region of Denmark. 🇩🇰</p> <section> - <p class="heading">THE FUTURE IS NOW</p> + <p class="heading">Vision</p> - <p>...</p> - </section> - - <section> - <p class="heading">VISION</p> - - <p>The goal of <b>Achernar</b> is to promote modern and robustly written open-source projects and alike. In simpler terms, our vision is to develop a human and clean industry and community for technology.</p> + <p>The goal of <b>Achernar</b> is to promote modern and robustly written open-source projects and alike.</p> + <br> + <p>In other words, our vision is to develop a human and clean industry and community for technology.</p> </section> <section> - <p class="heading">INCEPTION</p> + <p class="heading">Inception</p> <p><b>Achernar</b> was founded in the summer of 2024 by I, <em>Gabriel Bjørnager Jensen</em>.</p> <br> @@ -44,6 +40,52 @@ <br> <p>The idea of a company had started in the spring of 2020 – at that time having been named after the binary system <em>Sheliak</em> (Bayer: <span class="code">β Lyræ</span>).</p> </section> + + <section> + <p class="heading">Credits</p> + + <p>Thanks to the following projects which make our webservice possible:</p> + <br> + <ul> + <li> + <p><a href="https://www.freebsd.org//"><em>FreeBSD</em></a></p> + </li> + <li> + <p><a href="https://nginx.org/en/"><em>nginx</em></a></p> + </li> + <li> + <p><a href="https://sass-lang.com/"><em>Sass</em></a></p> + </li> + <li> + <p><a href="https://www.typescriptlang.org/"><em>TypeScript</em></a></p> + </li> + </ul> + <br> + <p>Aditionally thanks to the following creators for the fonts which we use on our website:</p> + <br> + <ul> + <li> + <p>Carrois Apostrophe: <a href="https://fonts.google.com/specimen/Fira+Mono/"><em>Fira Mono</em></a></p> + </li> + <li> + <p>Roman Shamin & the <i>people</i> at Evil Martians 👽: <a href="https://fonts.google.com/specimen/Martian+Mono/"><em>Martian Mono</em></a></p> + </li> + <li> + <p>Sorkin Type: <a href="https://fonts.google.com/specimen/Merriweather/"><em>Merriweather</em></a></p> + </li> + <li> + <p>Julieta Ulanovsky, Sol Matas, Juan Pablo del Peral, and Jacques Le Bailly: <a href="https://fonts.google.com/specimen/Montserrat/"><em>Montserrat</em></a></p> + </li> + <li> + <p>Claus Eggers Sørensen: <a href="https://fonts.google.com/specimen/Playfair+Display/"><em>Playfair Display</em></a></p> + </li> + <li> + <p>Matt McInerney, Pablo Impallari, and Rodrigo Fuenzalida: <a href="https://fonts.google.com/specimen/Raleway/"><em>Raleway</em></a></p> + </li> + </ul> + </section> + + <!--#include virtual="/shtml/cloneNotice.shtml"--> </div> <!--#include virtual="/shtml/initScripts.shtml"--> diff --git a/html/ax.html b/html/ax.html new file mode 100644 index 0000000..d1536c6 --- /dev/null +++ b/html/ax.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="UTF-8"> + + <link href="/svg/favicon.svg" rel="icon" type="image/svg+xml"> + <title id="title">AX</title> + + <link href="/css/main.css" rel="stylesheet"> + </head> + + <body class="ax" id="body"> + <!--#include virtual="/shtml/navigationBar.shtml"--> + + <div id="frontPage"> + <img id="glyph" src="/svg/glyph/ax.svg"> + </div> + + <div id="content"> + <p id="contentHeading">Advanced X</p> + + <section> + <p><em>Advanced X</em> (or just <em>AX</em>) is a C library for developing applications for the <em>AGB</em> line of hardware.</p> + </section> + + <section> + <p class="heading">Status</p> + + <p>The development of <em>AX</em> is currently on hold to prioritise <a href="/html/luma.html"><em>Luma</em></a> and <a href="/html/eas.html"><em>eAS</em></a>.</p> + </section> + + <!--#include virtual="/shtml/cloneNotice.shtml"--> + </div> + + <!--#include virtual="/shtml/initScripts.shtml"--> + </body> +</html> diff --git a/html/backspace.html b/html/backspace.html new file mode 100644 index 0000000..1fec4e5 --- /dev/null +++ b/html/backspace.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="UTF-8"> + + <link href="/svg/favicon.svg" rel="icon" type="image/svg+xml"> + <title id="title">Backspace</title> + + <link href="/css/main.css" rel="stylesheet"> + </head> + + <body class="backspace" id="body"> + <!--#include virtual="/shtml/navigationBar.shtml"--> + + <div id="frontPage"> + <p id="glyph">COMING SOON</p> + </div> + + <div id="content"> + <!--#include virtual="/shtml/cloneNotice.shtml"--> + </div> + + <!--#include virtual="/shtml/initScripts.shtml"--> + </body> +</html> diff --git a/html/benoit.html b/html/benoit.html index 004b1ec..1b3fffa 100644 --- a/html/benoit.html +++ b/html/benoit.html @@ -17,23 +17,31 @@ </div> <div id="content"> - <p id="contentHeading">BENOIT</p> + <p id="contentHeading">Benoit</p> <section> - <p><span class="fancy">Benoit</span> is a Rust-written programme for visualising complex functions, e.g. <em>the Mandelbrot Set</em> and similar fractals.</p> + <p><em>Benoit</em> is a Rust-written programme for visualising complex functions, e.g. <em>the Mandelbrot Set</em> and similar fractals.</p> + <br> + <x-image data-file="benoit_screenshot0"></x-image> <br> <p>The project consists of the core <a href="https://crates.io/crates/benoit/"><span class="code">benoit</span></a> crate, from which the frontends <span class="code">benoit-cli</span> and (in the future) <span class="code">benoit-gui</span> derive.</p> </section> <section> <p class="heading">benoit-cli</p> - <br> + <p>The <span class="code">benoit-cli</span> executable can render and animate using <a href="https://en.wikipedia.org/wiki/TOML/">TOML</a> files right from the commandline.</p> <br> - <x-image data-file="benoit_screenshot0"></x-image> - <br> <x-image data-file="benoit_screenshot1"></x-image> </section> + + <section> + <p class="heading">Docs</p> + + <p>Documentation for the main library can be found on <a href="https://docs.rs/benoit/latest/benoit/"><span class="code">docs.rs</span></a>.</p> + </section> + + <!--#include virtual="/shtml/cloneNotice.shtml"--> </div> <!--#include virtual="/shtml/initScripts.shtml"--> diff --git a/html/bowshock.html b/html/bowshock.html index f9d0d93..3fe82ff 100644 --- a/html/bowshock.html +++ b/html/bowshock.html @@ -13,10 +13,14 @@ <!--#include virtual="/shtml/navigationBar.shtml"--> <div id="frontPage"> - <p id="glyph">COMING SOON</p> + <img id="glyph" src="/svg/glyph/bowshock.svg"> </div> - <div id="content"></div> + <div id="content"> + <p id="contentHeading">COMING SOON</p> + + <!--#include virtual="/shtml/cloneNotice.shtml"--> + </div> <!--#include virtual="/shtml/initScripts.shtml"--> </body> diff --git a/html/bzipper.html b/html/bzipper.html index 6ca7701..56f0b17 100644 --- a/html/bzipper.html +++ b/html/bzipper.html @@ -17,11 +17,21 @@ </div> <div id="content"> - <p id="contentHeading">BZIPPER</p> + <p id="contentHeading">bzipper</p> - <p><span class="fancy">bzipper</span> is a Rust crate for serialisation and deserialisation of binary streams.</p> - <br> - <p>See more at <span class="code"><a href="https://crates.io/crates/bzipper/">crates.io</a></span>.</p> + <section> + <p><em>bzipper</em> is a Rust crate for serialisation and deserialisation of binary streams.</p> + <br> + <p>See more at <span class="code"><a href="https://crates.io/crates/bzipper/">crates.io</a></span>.</p> + </section> + + <section> + <p class="heading">Docs</p> + + <p>See <a href="https://docs.rs/pollex/latest/pollex/"><span class="code">docs.rs</span></a> for documentation.</p> + </section> + + <!--#include virtual="/shtml/cloneNotice.shtml"--> </div> <!--#include virtual="/shtml/initScripts.shtml"--> diff --git a/html/deltaWorld.html b/html/deltaWorld.html new file mode 100644 index 0000000..8a65052 --- /dev/null +++ b/html/deltaWorld.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="UTF-8"> + + <link href="/svg/favicon.svg" rel="icon" type="image/svg+xml"> + <title id="title">Delta World</title> + + <link href="/css/main.css" rel="stylesheet"> + </head> + + <body class="deltaWorld" id="body"> + <!--#include virtual="/shtml/navigationBar.shtml"--> + + <div id="frontPage"> + <p id="glyph">COMING SOON</p> + + <!--#include virtual="/shtml/cloneNotice.shtml"--> + </div> + + <div id="content"></div> + + <!--#include virtual="/shtml/initScripts.shtml"--> + </body> +</html> diff --git a/html/eas.html b/html/eas.html index f1f394b..2b40aa0 100644 --- a/html/eas.html +++ b/html/eas.html @@ -17,7 +17,19 @@ </div> <div id="content"> - <p id="contentHeading"><span class="small">the </span>EMBEDDED ASSEMBLER</p> + <p id="contentHeading"><span class="small">the </span>Embedded Assembler</p> + + <section> + <p>The <em>Embedded Assembler</em> (or simply <em>eAS</em>) is an assembler for cross-compiling to embedded Arm</p> + </section> + + <section> + <p class="heading">Status</p> + + <p>Like <a href="/html/pollex.html"><em>Luma</em></a>, the development of <em>eAS</em> is currently on hold in favour of the <a href="/html/pollex.html"><em>Pollex</em></a> library, which will be used as a backend.</p> + </section> + + <!--#include virtual="/shtml/cloneNotice.shtml"--> </div> <!--#include virtual="/shtml/initScripts.shtml"--> diff --git a/html/luma.html b/html/luma.html index a1aedb6..1b45d69 100644 --- a/html/luma.html +++ b/html/luma.html @@ -17,17 +17,19 @@ </div> <div id="content"> - <p id="contentHeading">LUMA</p> + <p id="contentHeading">Luma</p> <section> - <p><span class="fancy">Luma</span> is an emulator for the <em>Game Boy Advance</em>-line of game consoles by Nintendo Co.</p> + <p><em>Luma</em> is an emulator for the <em>AGB</em> line of game consoles by Nintendo Co.</p> </section> <section> - <p class="heading">STATE</p> + <p class="heading">Status</p> - <p>The state of <span class="fancy">Luma</span> is currently on hold in favour of <a href="/html/pollex.html"><span class="fancy">Pollex</span></a>, which is to be used as a backend.</p> + <p>The development of <em>Luma</em> is currently on hold in favour of <a href="/html/pollex.html"><em>Pollex</em></a>, which is to be used as a backend.</p> </section> + + <!--#include virtual="/shtml/cloneNotice.shtml"--> </div> <!--#include virtual="/shtml/initScripts.shtml"--> diff --git a/html/pollex.html b/html/pollex.html index 0296fef..2a69c82 100644 --- a/html/pollex.html +++ b/html/pollex.html @@ -17,7 +17,21 @@ </div> <div id="content"> - <p id="contentHeading">POLLEX</p> + <p id="contentHeading">Pollex</p> + + <section> + <p><em>Pollex</em> is a Rust library for manipulating Arm ISA instructions.</p> + <br> + <p>See more at <span class="code"><a href="https://crates.io/crates/pollex/">crates.io</a></span>.</p> + </section> + + <section> + <p class="heading">Docs</p> + + <p>As per usual, documentation for <em>Pollex</em> can be found on <a href="https://docs.rs/pollex/latest/pollex/"><span class="code">docs.rs</span></a>.</p> + </section> + + <!--#include virtual="/shtml/cloneNotice.shtml"--> </div> <!--#include virtual="/shtml/initScripts.shtml"--> diff --git a/js/initImages.ts b/js/initImages.ts index 074de76..db81c2c 100644 --- a/js/initImages.ts +++ b/js/initImages.ts @@ -7,11 +7,22 @@ function initImages() { let file = image.getAttribute("data-file")!; console.log("initialising image that links to \"" + file + "\""); + let source_url = "/webp/source/" + file + ".webp"; + let thumbnail_url = "/webp/thumbnail/" + file + ".webp"; + + let blur_element = document.createElement("img"); + blur_element.setAttribute("class", "blur"); + blur_element.setAttribute("src", thumbnail_url); + + image.appendChild(blur_element); + let image_element = document.createElement("img"); - image_element.setAttribute("src", "/webp/thumbnail/" + file + ".webp"); + image_element.setAttribute("src", thumbnail_url); let hyperlink_element = document.createElement("a"); - hyperlink_element.setAttribute("href", "/webp/source/" + file + ".webp"); + hyperlink_element.setAttribute("href", source_url); + hyperlink_element.setAttribute("rel", "noopener noreferrer"); + hyperlink_element.setAttribute("target", "_blank"); hyperlink_element.appendChild(image_element); image.appendChild(hyperlink_element); diff --git a/shtml/cloneNotice.shtml b/shtml/cloneNotice.shtml new file mode 100644 index 0000000..9751c63 --- /dev/null +++ b/shtml/cloneNotice.shtml @@ -0,0 +1,3 @@ +<section id="cloneNotice"> + <p>This webservice can be cloned from <a href="https://mandelbrot.dk/achernar/"><span class="code">mandelbrot.dk</span></a>.</p> +</section> diff --git a/shtml/navigationBar.shtml b/shtml/navigationBar.shtml index 902e6b1..24e5588 100644 --- a/shtml/navigationBar.shtml +++ b/shtml/navigationBar.shtml @@ -1,10 +1,15 @@ <div id="navigationBar"> <a href="/html/about.html">ABOUT</a> <div class="separator"></div> + <a href="/html/ax.html">AX</a> + <a href="/html/backspace.html">BACKSPACE</a> <a href="/html/benoit.html">BENOIT</a> <a href="/html/bowshock.html">BOWSHOCK</a> <a href="/html/bzipper.html">BZIPPER</a> + <a href="/html/deltaWorld.html">DELTA·WORLD</a> <a href="/html/eas.html">eAS</a> <a href="/html/luma.html">LUMA</a> <a href="/html/pollex.html">POLLEX</a> + <div class="separator"></div> + <a href="https://mandelbrot.dk/">SOURCE</a> </div> diff --git a/svg/benoit-background.svg b/svg/benoit-background.svg index dda63a2..a4d8468 100644 --- a/svg/benoit-background.svg +++ b/svg/benoit-background.svg @@ -1,10 +1,10 @@ -<svg height="96" width="96" xmlns="http://www.w3.org/2000/svg"> - <polygon fill="#BA0035" points="0,0 96,0 96,96 0,96" /> <!-- oklch(50% 0.199 17.860) "red" --> - <polygon fill="#CD0325" points="0,0 96,0 96,96 19.096,96" /> - <polygon fill="#DC1D02" points="0,0 96,0 96,96 39.765,96" /> - <polygon fill="#E04400" points="0,0 96,0 96,96 64.145,96" /> - <polygon fill="#E55C04" points="0,0 96,0 96,96 96,96" /> - <polygon fill="#EB6F02" points="0,0 96,0 143.674,96" /> - <polygon fill="#F18103" points="0,0 96,0 231.766,96" /> - <polygon fill="#F79204" points="0,0 96,0 482.625,96" /> <!-- oklch(75% 0.170 63.220) "yellow" --> +<svg height="1" width="1" xmlns="http://www.w3.org/2000/svg"> + <polygon fill="#BA0035" points="0,0 1,0 1,1 0,1" /> <!-- oklch(50% 0.199 17.860) "red" --> + <polygon fill="#CD0325" points="0,0 1,0 1,1 0.198912367,1" /> + <polygon fill="#DC1D02" points="0,0 1,0 1,1 0.414213562,1" /> + <polygon fill="#E04400" points="0,0 1,0 1,1 0.668178638,1" /> + <polygon fill="#E55C04" points="0,0 1,0 1,1 1,1" /> + <polygon fill="#EB6F02" points="0,0 1,0 1,0.668178638" /> + <polygon fill="#F18103" points="0,0 1,0 1,0.414213562" /> + <polygon fill="#F79204" points="0,0 1,0 1,0.198912367" /> <!-- oklch(75% 0.170 63.220) "yellow" --> </svg> diff --git a/svg/glyph/ax.svg b/svg/glyph/ax.svg new file mode 100644 index 0000000..6e19c4a --- /dev/null +++ b/svg/glyph/ax.svg @@ -0,0 +1,11 @@ +<svg height="36" width="84" xmlns="http://www.w3.org/2000/svg"> + <mask id="glyph"> + <polygon fill="white" points="12,0 24,0 36,36 24,36 18,18 12,36 0,36" /> + <polygon fill="black" points="0,0 18,18 0,18" /> + + <polygon fill="white" points="48,0 60,0 66,9 72,0 84,0 72,18 84,36 72,36 66,27 60,36 48,36 60,18" /> + <polygon fill="black" points="48,0 66,18 48,18" /> + </mask> + + <rect fill="#FFFFFF" height="108" mask="url(#glyph)" width="108" x="0" y="0" /> +</svg> diff --git a/svg/glyph/bowshock.svg b/svg/glyph/bowshock.svg new file mode 100644 index 0000000..4e32322 --- /dev/null +++ b/svg/glyph/bowshock.svg @@ -0,0 +1,4 @@ +<svg height="72" width="60" xmlns="http://www.w3.org/2000/svg"> + <circle cx="30" cy="42" fill="none" r="24" stroke="#FFEEE0" stroke-width="12" /> + <circle cx="30" cy="30" fill="none" r="24" stroke="#0F0F0F" stroke-width="12" /> +</svg> |
