Use Infinite HD icon as logo

Add it to the header, favicon, iOS home screen and other places. Fixes #141
mihaip · Jan 27, 2024 · 3e2eb3a · 3e2eb3a
1 parent a24e167
commit 3e2eb3a
Show file tree

Hide file tree

Showing 15 changed files with 31 additions and 21 deletions.
diff --git a/Art/Header (2024).acorn b/Art/Header (2024).acorn
diff --git a/Art/Icon 192 (2024).acorn b/Art/Icon 192 (2024).acorn
diff --git a/Art/Icon 512 (2024).acorn b/Art/Icon 512 (2024).acorn
diff --git a/Art/Infinite HD Icon.acorn b/Art/Infinite HD Icon.acorn
diff --git a/Art/Infinite HD Icon.psd b/Art/Infinite HD Icon.psd
diff --git a/index.html b/index.html
@@ -3,6 +3,8 @@
     <head>
         <meta charset="utf-8" />
         <link rel="icon" href="/favicon.ico" />
+        <link rel="icon" type="image/png" sizes="32x32" href="/favicon32.png" />
+        <link rel="icon" type="image/png" sizes="16x16" href="/favicon16.png" />
         <meta name="viewport" content="width=device-width, initial-scale=1" />
         <meta name="apple-mobile-web-app-capable" content="yes" />
         <meta name="theme-color" content="#000000" />

diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/favicon16.png b/public/favicon16.png
diff --git a/public/favicon32.png b/public/favicon32.png
diff --git a/public/logo192.png b/public/logo192.png
diff --git a/public/logo512.png b/public/logo512.png
diff --git a/src/Browser.css b/src/Browser.css
@@ -6,40 +6,48 @@
 
 .Browser {
     --browser-padding: 40px;
-    --browser-logo-scale: 1;
+    --browser-logo-scale: 2;
     padding: var(--browser-padding);
 }
 
-@media (max-width: 400px) {
+@media (max-width: 440px) {
+    .Browser header {
+        flex-direction: column;
+    }
+}
+
+@media (max-width: 640px) {
     .Browser {
-        --browser-padding: 10px;
-        --browser-logo-scale: 0.67;
+        --browser-padding: 15px;
+        --browser-logo-scale: 1;
     }
 }
 
 .Browser header {
-    max-width: 100vw;
-    background-color: #fff;
+    display: flex;
+    gap: var(--browser-padding);
+    background: #d9e5fe;
     margin: calc(var(--browser-padding) * -1);
-    margin-bottom: 0;
     padding: var(--browser-padding);
+    margin-bottom: 0;
+    align-items: center;
 }
 
 .Browser .Logo {
-    background-image: url(./Images/Header.png);
+    flex-shrink: 0;
+    background-image: url(./Images/HeaderLogo.png);
     background-size: cover;
     image-rendering: pixelated;
-    width: calc(325px * var(--browser-logo-scale));
-    height: calc(170px * var(--browser-logo-scale));
-    margin: 0 auto;
+    width: calc(114px * var(--browser-logo-scale));
+    height: calc(74px * var(--browser-logo-scale));
 }
 
-.Browser .Description {
-    margin: 0 calc(var(--browser-padding) * -1);
-    padding: calc(var(--browser-padding) / 2) var(--browser-padding);
-    background: #d9e5fe;
-    max-width: 100vw;
-    box-sizing: border-box;
+.Browser .Description p:first-child {
+    margin-top: 0;
+}
+
+.Browser .Description p:last-child {
+    margin-bottom: 0;
 }
 
 .Browser .Description span {

diff --git a/src/Browser.tsx b/src/Browser.tsx
@@ -42,11 +42,11 @@ export function Browser({
                 <div className="Logo">
                     <h1>Infinite Mac</h1>
                 </div>
+                <Description
+                    onRun={onRun}
+                    initialCustomRunDef={initialCustomRunDef}
+                />
             </header>
-            <Description
-                onRun={onRun}
-                initialCustomRunDef={initialCustomRunDef}
-            />
             <div className="Disks-Container">
                 <NotableToggle
                     notableOnly={notableOnly}

diff --git a/src/Images/Header.png b/src/Images/Header.png
diff --git a/src/Images/HeaderLogo.png b/src/Images/HeaderLogo.png