From ff254be061a765819b98849aca2689040abfa012 Mon Sep 17 00:00:00 2001
From: Kyle Florence <kyle.florence@gmail.com>
Date: Tue, 4 Jun 2024 20:16:49 -0500
Subject: [PATCH] Add logo images

---
 readme.md                 |   2 ++
 src/images/favicon.png    | Bin 0 -> 761 bytes
 src/images/logo-black.svg |  21 +++++++++++++++++++++
 src/images/logo-white.svg |  22 ++++++++++++++++++++++
 src/index.html            |   4 ++++
 src/styles.css            |   6 ++++++
 6 files changed, 55 insertions(+)
 create mode 100644 src/images/favicon.png
 create mode 100644 src/images/logo-black.svg
 create mode 100644 src/images/logo-white.svg

diff --git a/readme.md b/readme.md
index 061f494..0d4c83a 100644
--- a/readme.md
+++ b/readme.md
@@ -1,3 +1,5 @@
+<img alt="Beaming Logo" src="src/images/logo-white.svg" width="480px" />
+
 # Beaming
 
 Beaming is a free, open source puzzle game that involves directing beams through a hexagonal grid. The rules and
diff --git a/src/images/favicon.png b/src/images/favicon.png
new file mode 100644
index 0000000000000000000000000000000000000000..0e01111e4d32d99893c96f3f45d2bc4b528dc4c0
GIT binary patch
literal 761
zcmV<V0tWqwP)<h;3K|Lk000e1NJLTq001xm001xu1^@s6R|5Hm00009a7bBm000XT
z000XT0n*)m`~Uy~t4TybRA_<inY~WqKoo_)thPdm<d#&Xp(f%5oEn7ELS-5#H*bK`
zBc-PaZ$Oa;2oC@XEi|?SN`ZtD2|<Aroh`=BI$?qQjBQq%Pns(BopZ+L#`YM#DUuvX
zfuwHHTINQQFKHmdzhgj>C#k1NzP|xUuB3}Z@ym<U@6Tr7XI>)zh9n1Q0KWidG=hE~
z9v`7xhV}KYYZPWck`J5!E*R1MK8!~5)yds}q%EKYcmU7O5Jm9zwphK~48(D10X`VP
zQDh7(LoNm+1*CGG#Ki`g8jw`Sthx*E^aS_!^XL3CGBF^@1=^%?{_p^=ulDD%Y9P+}
z3FfbnC^9R)wq|pdNq*QWB&h*}Kw~(BW)rGa*x7-zv*nxhBTCB_kmO<F;sTtX8}U&z
zd0eFeM@O)`J6qjy88$ZoxGa@QwU3Tl_zEPqf1nGvH#bnL!QtV1@nHUSf&h+>;qGqH
zS>H3af#fk46PNmMXhc`5aC!Ol`PbKQaA2;IjabcPAin*Fm`0`9gpCaon|bMUU~kX#
zN9IgF=3ZP#t}B6^QK?9$r_$BcpK*I@;c+_7c{`~ThLY#m6Fxn*x1~<Uu7R#34F*!9
zk)81AvA=IjSTm62s(&;*Z#DzgZe&HVGEg)t14XkkP&6w8MYA$cG%Eu|vocUL|Azt3
z%UDHLb4qF@uSLCHK5u58XXZ-LTGoV@<&H!$T-Vf2(TjKe?4Zd{p9%uWah4bEIHp#L
zLA?KDpLkbp9IG&te1CEAzHe%z<07-eoh|WxQFpv;(4DV8JkOkyqAT-FAz$MD7_VWw
z{due$#~hO)w3_oJj5Lz|7z|9Nr^N?>`7M?6M$x(_i2Gx_zF{cU>t;;lyq!zV7e&%m
rx<96JzE!lonUPeFGakx(t;~eqM=4AhpxSZa00000NkvXXu0mjfog84Z

literal 0
HcmV?d00001

diff --git a/src/images/logo-black.svg b/src/images/logo-black.svg
new file mode 100644
index 0000000..8fb2da2
--- /dev/null
+++ b/src/images/logo-black.svg
@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_2" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 118.42 113.58">
+  <defs>
+    <style>
+      .cls-1 {
+        stroke-width: 0px;
+      }
+    </style>
+  </defs>
+  <g id="Layer_1-2" data-name="Layer 1">
+    <g>
+      <path class="cls-1" d="M58.25,30.82l-16.99-9.81,16.99-9.81L38.85,0l-18.19,10.5v21.01l18.19,10.5,19.4-11.2ZM38.85,2.77l14.59,8.42-14.91,8.61h-15.47v-7.92l15.79-9.12ZM23.06,22.21h15.47l14.91,8.61-14.59,8.42-15.79-9.12v-7.92Z"/>
+      <polygon class="cls-1" points="97.76 31.86 96.56 29.78 80.17 39.24 64.37 30.13 64.37 22.21 97.16 22.21 97.16 19.81 64.37 19.81 64.37 11.89 80.17 2.77 96.56 12.24 97.76 10.16 80.17 0 61.97 10.5 61.97 31.51 80.17 42.02 97.76 31.86"/>
+      <path class="cls-1" d="M33.99,58.29v7.92l-7.9,4.56,1.2,2.08,9.1-5.25v-21.01l-18.19-10.5L0,46.58v20.31h2.4v-8.61h31.58ZM18.19,38.85l15.79,9.12v7.92H2.4v-7.92l15.79-9.12Z"/>
+      <polygon class="cls-1" points="75.3 47.97 75.3 66.2 67.4 70.76 68.61 72.84 77.7 67.59 77.7 46.58 59.51 36.08 41.31 46.58 41.31 66.9 43.72 66.9 43.72 47.97 58.31 39.55 58.31 57.09 60.71 57.09 60.71 39.55 75.3 47.97"/>
+      <polygon class="cls-1" points="102.03 74.33 102.03 39.25 117.22 48.02 118.42 45.94 100.82 35.78 83.23 45.94 84.43 48.02 99.62 39.25 99.62 74.33 84.43 65.56 83.23 67.64 100.82 77.8 118.42 67.64 117.22 65.56 102.03 74.33"/>
+      <polygon class="cls-1" points="80.17 93.77 95.96 93.77 95.96 101.69 80.17 110.8 64.37 101.69 64.37 83.45 80.17 74.33 96.56 83.8 97.76 81.72 80.17 71.56 61.97 82.06 61.97 103.07 80.17 113.58 98.36 103.07 98.36 91.37 80.17 91.37 80.17 93.77"/>
+      <polygon class="cls-1" points="38.25 73.99 54.64 83.45 54.64 100.3 20.66 80.68 20.66 103.07 38.25 113.23 39.45 111.15 23.06 101.69 23.06 84.84 57.05 104.46 57.05 82.06 39.45 71.91 38.25 73.99"/>
+    </g>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/src/images/logo-white.svg b/src/images/logo-white.svg
new file mode 100644
index 0000000..8880936
--- /dev/null
+++ b/src/images/logo-white.svg
@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_2" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 118.42 113.58">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #fff;
+        stroke-width: 0px;
+      }
+    </style>
+  </defs>
+  <g id="Layer_1-2" data-name="Layer 1">
+    <g>
+      <path class="cls-1" d="M58.25,30.82l-16.99-9.81,16.99-9.81L38.85,0l-18.19,10.5v21.01l18.19,10.5,19.4-11.2ZM38.85,2.77l14.59,8.42-14.91,8.61h-15.47v-7.92l15.79-9.12ZM23.06,22.21h15.47l14.91,8.61-14.59,8.42-15.79-9.12v-7.92Z"/>
+      <polygon class="cls-1" points="97.76 31.86 96.56 29.78 80.17 39.24 64.37 30.13 64.37 22.21 97.16 22.21 97.16 19.81 64.37 19.81 64.37 11.89 80.17 2.77 96.56 12.24 97.76 10.16 80.17 0 61.97 10.5 61.97 31.51 80.17 42.02 97.76 31.86"/>
+      <path class="cls-1" d="M33.99,58.29v7.92l-7.9,4.56,1.2,2.08,9.1-5.25v-21.01l-18.19-10.5L0,46.58v20.31h2.4v-8.61h31.58ZM18.19,38.85l15.79,9.12v7.92H2.4v-7.92l15.79-9.12Z"/>
+      <polygon class="cls-1" points="75.3 47.97 75.3 66.2 67.4 70.76 68.61 72.84 77.7 67.59 77.7 46.58 59.51 36.08 41.31 46.58 41.31 66.9 43.72 66.9 43.72 47.97 58.31 39.55 58.31 57.09 60.71 57.09 60.71 39.55 75.3 47.97"/>
+      <polygon class="cls-1" points="102.03 74.33 102.03 39.25 117.22 48.02 118.42 45.94 100.82 35.78 83.23 45.94 84.43 48.02 99.62 39.25 99.62 74.33 84.43 65.56 83.23 67.64 100.82 77.8 118.42 67.64 117.22 65.56 102.03 74.33"/>
+      <polygon class="cls-1" points="80.17 93.77 95.96 93.77 95.96 101.69 80.17 110.8 64.37 101.69 64.37 83.45 80.17 74.33 96.56 83.8 97.76 81.72 80.17 71.56 61.97 82.06 61.97 103.07 80.17 113.58 98.36 103.07 98.36 91.37 80.17 91.37 80.17 93.77"/>
+      <polygon class="cls-1" points="38.25 73.99 54.64 83.45 54.64 100.3 20.66 80.68 20.66 103.07 38.25 113.23 39.45 111.15 23.06 101.69 23.06 84.84 57.05 104.46 57.05 82.06 39.45 71.91 38.25 73.99"/>
+    </g>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/src/index.html b/src/index.html
index 1d13162..1a1ee16 100644
--- a/src/index.html
+++ b/src/index.html
@@ -13,6 +13,7 @@
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Noto+Sans+Mono&display=swap" />
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
     <link rel="stylesheet" href="styles.css" />
+    <link rel="icon" href="images/favicon.png" />
   </head>
   <body>
     <dialog id="dialog">
@@ -24,6 +25,9 @@ <h1 class="flex-left">Beaming</h1>
           </button>
         </form>
       </header>
+      <div class="flex-center">
+        <img alt="Beaming logo" id="logo" src="images/logo-black.svg" />
+      </div>
       <p>
         <em>Beaming</em> is a free, open source, browser-based puzzle game that involves directing beams through a
         hexagonal grid. The rules and solution for each puzzle can be inferred by interaction and visual cues. Both
diff --git a/src/styles.css b/src/styles.css
index 5609c20..e02dac1 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -188,6 +188,12 @@ main {
   justify-content: center;
 }
 
+#logo {
+  margin: 2em 0 1em 0;
+  max-width: 480px;
+  width: 75%;
+}
+
 #message {
   align-items: center;
   display: flex;