implement new logo design

Reviewed-on: #5

index.html

@@ -7,14 +7,14 @@
 
   <!-- Site Description & Keywords -->
   <meta name="description" content="A Connecticut mesh technologies user group. Join the local community to connect, share, and explore with fellow enthusiasts.">
-  <meta name="keywords" content="CT Mesh, Meshtastic, MeshCore, Connecticut, CT, community, mesh networking, user group, Discord, map">
+  <meta name="keywords" content="CT Mesh, Mesh, MeshCore, Meshtastic, Connecticut, CT, community, networking, user group, Discord, map, radio">
   <meta name="author" content="CT Mesh">
-  <link rel="shortcut icon" type="image/x-icon" href="favicon.png?3">
+  <link rel="shortcut icon" type="image/x-icon" href="favicon.png?4">
 
   <!-- Open Graph / Facebook -->
   <meta property="og:title" content="CT Mesh">
   <meta property="og:description" content="A Connecticut mesh technologies user group. Join the local community to connect, share, and explore with fellow enthusiasts.">
-  <meta property="og:image" content="favicon.png?3">
+  <meta property="og:image" content="favicon.png?4">
   <meta property="og:url" content="https://ctmesh.org">
   <meta property="og:type" content="website">
 
@@ -22,24 +22,24 @@
   <meta name="twitter:card" content="summary_large_image">
   <meta name="twitter:title" content="CT Mesh">
   <meta name="twitter:description" content="A Connecticut mesh technologies user group. Join the local community to connect, share, and explore with fellow enthusiasts.">
-  <meta name="twitter:image" content="favicon.png?3">
+  <meta name="twitter:image" content="favicon.png?4">
 
   <!-- Fonts and Icons -->
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">  
 
-  <link rel="icon" type="image/png" href="favicon.png?3">
+  <link rel="icon" type="image/png" href="favicon.png?44">
-  <link rel="apple-touch-icon" sizes="57x57" href="favicon.png?3">
+  <link rel="apple-touch-icon" sizes="57x57" href="favicon.png?4">
-  <link rel="apple-touch-icon" sizes="72x72" href="favicon.png?3">
+  <link rel="apple-touch-icon" sizes="72x72" href="favicon.png?4">
-  <link rel="apple-touch-icon" sizes="114x114" href="favicon.png?3">
+  <link rel="apple-touch-icon" sizes="114x114" href="favicon.png?4">
-  <link rel="apple-touch-icon" sizes="120x120" href="favicon.png?3">
+  <link rel="apple-touch-icon" sizes="120x120" href="favicon.png?4">
-  <link rel="apple-touch-icon" sizes="144x144" href="favicon.png?3">
+  <link rel="apple-touch-icon" sizes="144x144" href="favicon.png?4">
-  <link rel="apple-touch-icon" sizes="152x152" href="favicon.png?3">
+  <link rel="apple-touch-icon" sizes="152x152" href="favicon.png?4">
-  <link rel="apple-touch-icon" sizes="180x180" href="favicon.png?3">
+  <link rel="apple-touch-icon" sizes="180x180" href="favicon.png?4">
-  <meta name="msapplication-TileColor" content="#67EA94">
+  <meta name="msapplication-TileColor" content="#6EBEE1">
-  <meta name="msapplication-TileImage" content="favicon.png?3">
+  <meta name="msapplication-TileImage" content="favicon.png?4">
-  <meta name="theme-color" content="#67EA94">
+  <meta name="theme-color" content="#6EBEE1">
 
   <title>CT Mesh</title>
   
@@ -90,9 +90,10 @@
     }
     .top-section {
       display: flex;
+      flex-direction: column;
       align-items: center;
       justify-content: center;
-      gap: 1em;
+      gap: 0.5em;
       width: 100%;
       padding-bottom: 15px;
     }
@@ -101,12 +102,15 @@
       filter: invert(15%) sepia(17%) saturate(767%) hue-rotate(198deg) brightness(94%) contrast(91%);
     }
     .logo {
-      width: 200px;
+      width: 540px;
       height: auto;
-      padding-right: 30px;
     }
     .text-content {
-      text-align: left;
+      text-align: center;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 0.25em;
     }
     .text-content h1 {
       margin: 0;
@@ -117,7 +121,8 @@
     }
     .sub-header {
       font-weight: bold;
-      padding-bottom: 10px;
+      padding-bottom: 4px;
+      margin: 0;
     }
     .btn {
       display: flex;
@@ -260,16 +265,11 @@
         padding: 2em;
       }
       .top-section {
-        flex-direction: column;
         padding-bottom: 20px;
       }
       .logo {
-        width: 150px;
+        width: 335px;
         padding-right: 0;
-        margin-bottom: 1em;
-      }
-      .text-content {
-        text-align: center;
       }
       .btn-group {
         flex-direction: column;
@@ -295,7 +295,7 @@
         padding: 1.5em;
       }
       .logo {
-        width: 120px;
+        width: 300px;
       }
       .text-content h1 {
         font-size: 20px;
@@ -316,8 +316,7 @@
     <div class="top-section">
       <img src="logo_sm.png" alt="CT Mesh Logo" class="logo" />
       <div class="text-content">
-        <h1>CT Mesh</h1>
+        <p class="sub-header">A Connecticut Mesh Technologies User Group</p>
-        <p class="sub-header">Connecticut Mesh Technologies User Group</p>
         <a href="mailto:noah@ctmesh.org" rel="nofollow noindex"><img src="email.svg" alt="Email" /></a>
       </div>
     </div>

meshcore-resources.html

@@ -130,7 +130,7 @@
       margin-bottom: 1.5em;
     }
     .page-header img {
-      width: 44px;
+      width: 300px;
       height: auto;
     }
     .page-header span {
@@ -212,7 +212,6 @@
   <div class="content-box">
     <a href="index.html" class="page-header">
       <img src="logo_sm.png" alt="CT Mesh" />
-      <span>CT Mesh</span>
     </a>
     <h1>MeshCore Resources</h1>
 

meshtastic-resources.html

@@ -148,7 +148,7 @@
       margin-bottom: 1.5em;
     }
     .page-header img {
-      width: 44px;
+      width: 300px;
       height: auto;
     }
     .page-header span {
@@ -227,7 +227,6 @@
   <div class="content-box">
     <a href="index.html" class="page-header">
       <img src="logo_sm.png" alt="CT Mesh" />
-      <span>CT Mesh</span>
     </a>
     <h1>Meshtastic Resources</h1>
 

why-run-a-node.html

@@ -133,7 +133,7 @@
       margin-bottom: 1.5em;
     }
     .page-header img {
-      width: 44px;
+      width: 300px;
       height: auto;
     }
     .page-header span {
@@ -225,7 +225,6 @@
   <div class="content-box">
     <a href="index.html" class="page-header">
       <img src="logo_sm.png" alt="CT Mesh" />
-      <span>CT Mesh</span>
     </a>
 
     <h1 class="page-title">Why Run a Mesh Node?</h1>