Add logo images

kflorence · Jun 5, 2024 · ff254be · ff254be
1 parent aca5e1a
commit ff254be
Show file tree

Hide file tree

Showing 6 changed files with 55 additions and 0 deletions.
diff --git 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
diff --git a/src/images/logo-black.svg b/src/images/logo-black.svg
diff --git a/src/images/logo-white.svg b/src/images/logo-white.svg
diff --git 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,[email protected],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
@@ -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;