Add logo

mileswwatkins · Nov 25, 2023 · 88af58a · 88af58a
1 parent 59e45b0
commit 88af58a
Show file tree

Hide file tree

Showing 3 changed files with 60 additions and 13 deletions.
diff --git a/public/logo.svg b/public/logo.svg
diff --git a/src/App.css b/src/App.css
@@ -1,17 +1,27 @@
 header {
   padding: 1rem 1.5rem;
   border-bottom: 1px solid black;
+  display: flex;
+  align-items: center;
+}
+
+.Header-Logo {
+  height: 2.5rem;
+  margin-right: 1rem;
+}
+
+.Header-Text {
   display: flex;
   align-items: baseline;
 }
 
 .Header-Title {
   margin: 0;
-  margin-right: 1.5rem;
+  margin-right: 1rem;
   font-size: 2rem;
 }
 
-.Header-Text {
+.Header-Explainer {
   margin: 0;
   font-size: 0.75rem;
   font-style: italic;
@@ -23,6 +33,7 @@ header {
 
 .Content-FilterPane {
   flex-basis: 30%;
+  min-width: 250px;
   padding-left: 1.5rem;
   padding-right: 1rem;
   padding-bottom: 1.5rem;
@@ -34,6 +45,7 @@ header {
 
 .Content-Attribution {
   display: block;
+  font-size: 0.75rem;
 }
 
 .Filters-Header {

diff --git a/src/App.js b/src/App.js
@@ -72,7 +72,7 @@ const Filters = ({
         </label>
 
         <label>
-          For this many consecutive days:{"\u00A0"}
+          How many consecutive days:{"\u00A0"}
           <input
             type="number"
             min={1}
@@ -409,16 +409,23 @@ class App extends Component {
     return (
       <Fragment>
         <header>
-          <h1 className="Header-Title">Lookout Hunter</h1>
-          <span className="Header-Text">
-            <a
-              href="https://github.com/mileswwatkins/lookout_hunter#lookout-hunter"
-              rel="noreferrer"
-              target="_blank"
-            >
-              (Wait, what's a lookout?)
-            </a>
-          </span>
+          <img
+            src="logo.svg"
+            alt="the silhouette of a fire lookout tower"
+            className="Header-Logo"
+          ></img>
+          <div className="Header-Text">
+            <h1 className="Header-Title">Lookout Hunter</h1>
+            <span className="Header-Explainer">
+              <a
+                href="https://github.com/mileswwatkins/lookout_hunter#lookout-hunter"
+                rel="noreferrer"
+                target="_blank"
+              >
+                (Wait, what's a lookout?)
+              </a>
+            </span>
+          </div>
         </header>
 
         <section className="Content">
@@ -457,6 +464,12 @@ class App extends Component {
                   Code on GitHub
                 </a>
               </span>
+              <span className="Content-Attribution">
+                Logo based on work by{" "}
+                <a href="https://thenounproject.com/icon/watchtower-1247287/">
+                  Creative Mania
+                </a>
+              </span>
             </div>
           </div>