implement new logo design

Reviewed-on: ctmesh/web#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="apple-touch-icon" sizes="57x57" href="favicon.png?3">
-  <link rel="apple-touch-icon" sizes="72x72" href="favicon.png?3">
-  <link rel="apple-touch-icon" sizes="114x114" href="favicon.png?3">
-  <link rel="apple-touch-icon" sizes="120x120" href="favicon.png?3">
-  <link rel="apple-touch-icon" sizes="144x144" href="favicon.png?3">
-  <link rel="apple-touch-icon" sizes="152x152" href="favicon.png?3">
-  <link rel="apple-touch-icon" sizes="180x180" href="favicon.png?3">
-  <meta name="msapplication-TileColor" content="#67EA94">
-  <meta name="msapplication-TileImage" content="favicon.png?3">
-  <meta name="theme-color" content="#67EA94">
+  <link rel="icon" type="image/png" href="favicon.png?44">
+  <link rel="apple-touch-icon" sizes="57x57" href="favicon.png?4">
+  <link rel="apple-touch-icon" sizes="72x72" href="favicon.png?4">
+  <link rel="apple-touch-icon" sizes="114x114" href="favicon.png?4">
+  <link rel="apple-touch-icon" sizes="120x120" href="favicon.png?4">
+  <link rel="apple-touch-icon" sizes="144x144" href="favicon.png?4">
+  <link rel="apple-touch-icon" sizes="152x152" href="favicon.png?4">
+  <link rel="apple-touch-icon" sizes="180x180" href="favicon.png?4">
+  <meta name="msapplication-TileColor" content="#6EBEE1">
+  <meta name="msapplication-TileImage" content="favicon.png?4">
+  <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">Connecticut Mesh Technologies User Group</p>
+        <p class="sub-header">A Connecticut Mesh Technologies User Group</p>
         <a href="mailto:noah@ctmesh.org" rel="nofollow noindex"><img src="email.svg" alt="Email" /></a>
       </div>
     </div>
@@ -340,32 +339,6 @@
           </a>
         </div>
       </div>
-      <div class="section">
-        <p class="section-title">Meshtastic</p>
-        <div class="btn-group">
-          <a href="https://meshtastic.org/" target="_blank" class="btn">
-            <img src="meshtastic.svg" alt="Meshtastic" />
-            <div class="btn-text">
-              Meshtastic
-              <small>About the project</small>
-            </div>
-          </a>
-          <a href="https://map.ctmesh.org/?lat=41.734429390721&lng=287.3501586914063&zoom=10" target="_blank" class="btn">
-            <img src="map.svg" alt="Map" />
-            <div class="btn-text">
-              Node Map
-              <small>CT Mesh nodes</small>
-            </div>
-          </a>
-          <a href="meshtastic-resources.html" class="btn">
-            <img src="info.svg" alt="Guides & Tools" />
-            <div class="btn-text">
-              Guides & Tools
-              <small>Channels, MQTT, setup</small>
-            </div>
-          </a>
-        </div>
-      </div>
       <div class="section">
         <p class="section-title">MeshCore</p>
         <div class="btn-group">
@@ -393,6 +366,32 @@
         </div>
       </div>
     </div>
+    <div class="section">
+        <p class="section-title">Meshtastic</p>
+        <div class="btn-group">
+          <a href="https://meshtastic.org/" target="_blank" class="btn">
+            <img src="meshtastic.svg" alt="Meshtastic" />
+            <div class="btn-text">
+              Meshtastic
+              <small>About the project</small>
+            </div>
+          </a>
+          <a href="https://map.ctmesh.org/?lat=41.734429390721&lng=287.3501586914063&zoom=10" target="_blank" class="btn">
+            <img src="map.svg" alt="Map" />
+            <div class="btn-text">
+              Node Map
+              <small>CT Mesh nodes</small>
+            </div>
+          </a>
+          <a href="meshtastic-resources.html" class="btn">
+            <img src="info.svg" alt="Guides & Tools" />
+            <div class="btn-text">
+              Guides & Tools
+              <small>Channels, MQTT, setup</small>
+            </div>
+          </a>
+        </div>
+      </div>
     <footer class="site-footer">
       <p><a href="https://ctmesh.org/">CT Mesh</a> is a volunteer-run user group for mesh technology enthusiasts in Connecticut.</p>
       <p><a href="https://creativecommons.org/licenses/by-sa/4.0/" target="_blank" rel="noopener">Content licensed CC BY-SA 4.0</a></p>

meshcore-resources.html

@@ -130,7 +130,7 @@
       margin-bottom: 1.5em;
     }
     .page-header img {
-      width: 44px;
+      width: 300px;
       height: auto;
     }
     .page-header span {
@@ -212,18 +212,16 @@
   <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>
 
-    <h2>Community-run Web Tools</h2>
+    <h2>Web Tools</h2>
     <div class="community-tools">
-      <p><em>These tools use data reported to our MQTT server by nodes across the state.</em></p>
+      <p><em>These tools use data reported to MQTT using <a href="https://analyzer.letsmesh.net/observer/onboard" target="_blank">Observer Firmware</a> by nodes across the state.</em></p>
       <ul>
-        <li><a href="https://meshcore-map.ctmesh.org/" target="_blank">MeshCore Map</a> <strong>NEW!</strong> - live map showing MeshCore nodes</li>
-        <li><a href="https://bdl.meshmapper.net/" target="_blank">MeshMapper</a> <strong>NEW!</strong> — coverage maps for MeshCore. Contribute to the map via apps coming soon!</li>
-        <li><a href="https://meshcore-wardrive.ctmesh.org/" target="_blank">Wardrive Map</a> - coverage maps for MeshCore. <em>Note: MeshMapper is in testing and is replacing this soon.</em></li>
-        <li><a href="https://meshcore-wardrive.ctmesh.org/wardrive" target="_blank">Wardrive Contribution</a> - upload your wardrive data to improve coverage maps</li>
+        <li><a href="https://meshcore-map.ctmesh.org/" target="_blank">MeshCore Map</a> <strong>NEW!</strong> &ndash; live map showing MeshCore nodes</li>
+        <li><a href="https://bdl.meshmapper.net/" target="_blank">MeshMapper</a> <strong>NEW!</strong> &ndash; coverage maps for MeshCore. Contribute via <a href="https://apps.apple.com/us/app/meshmapper/id6758073991" target="_blank">iOS</a> and <a href="https://play.google.com/store/apps/details?id=net.meshmapper.app" target="_blank">Android</a> mobile apps</li>
+        <li><a href="https://analyzer.letsmesh.net/packets?region=BDL" target="_blank">MeshCore Analyzer</a> &ndash; real-time MeshCore network analytics, node tracking, and packet analysis</li>
       </ul>
     </div>
 
@@ -234,18 +232,26 @@
 
     <h2>MQTT</h2>
     <p>Our MQTT broker is <em>uplink-only</em> and designed for fixed nodes across the state to serve as gateway nodes. Its purpose is not to bridge gaps or extend mesh coverage, but to report local traffic to our own web-based tools for analytical data and metrics to assess the mesh's performance. <strong>This role is best suited for stable, well-placed nodes with reliable coverage.</strong></p>
-    <p>MeshCore MQTT uplink uses <a href="https://github.com/Cisien/meshcoretomqtt" target="_blank">meshcoretomqtt</a> on a Raspberry Pi or similar Linux computer with the service installed. This configuration stanza goes in your <code>.env.local</code> file after the first two MQTT servers that upload to analyzer.letsmesh.net. <strong>This also requires a custom firmware.</strong> See <a href="https://analyzer.letsmesh.net/observer/onboard" target="_blank">custom repeater firmware setup</a>.</p>
+    <p>MeshCore MQTT uplink uses <a href="https://github.com/Cisien/meshcoretomqtt" target="_blank">meshcoretomqtt</a> on a Raspberry Pi or similar Linux computer with the service installed. Configure it with a <a href="https://github.com/Cisien/meshcoretomqtt" target="_blank">Toml file</a> at <code>/etc/mctomqtt/config.d/00-user.toml</code>, with region set in your existing <code>[general]</code> section as <code>iata = "BDL"</code>, and a custom broker named <code>ctmesh</code>. The block below should be added at the end of the config file. Fill in your own broker credentials. <strong>This also requires custom firmware.</strong> See <a href="https://analyzer.letsmesh.net/observer/onboard" target="_blank">custom repeater firmware setup</a>.</p>
 
     <div class="code-block">
       <button class="copy-btn" type="button" data-copy-target="meshcore-mqtt">Copy all</button>
-      <pre id="meshcore-mqtt"># MQTT Broker 3 - CT Mesh
-MCTOMQTT_MQTT3_ENABLED=true
-MCTOMQTT_MQTT3_SERVER=mqtt.ctmesh.org
-MCTOMQTT_MQTT3_PORT=1883
-MCTOMQTT_MQTT3_USE_TLS=false
-MCTOMQTT_MQTT3_USERNAME=meshdev
-MCTOMQTT_MQTT3_PASSWORD=large4cats</pre>
+      <pre id="meshcore-mqtt">[[broker]]
+name = "ctmesh"
+enabled = true
+server = "mqtt.ctmesh.org"
+port = 1883
+transport = "tcp"
+keepalive = 60
+qos = 0
+retain = true
+
+[broker.auth]
+method = "password"
+username = "meshdev"
+password = "large4cats"</pre>
     </div>
+    <p class="note"><strong>Note:</strong> The <code>meshdev</code>/<code>large4cats</code> credentials are intentionally shared secrets for this broker. We recognize the security implications. Specific credentials to this broker can be requested.</p>
 
     <a class="btn back-link" href="index.html">Back to CT Mesh</a>
     <footer class="site-footer">

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

@@ -116,6 +116,15 @@
       background-color: #2B3A4E;
       color: #ffffff;
     }
+    .btn-discord,
+    .btn-discord:visited {
+      background-color: #5865F2;
+      color: #ffffff;
+      justify-content: center;
+    }
+    .btn-discord img {
+      filter: brightness(0) invert(1);
+    }
     .page-header {
       display: flex;
       align-items: center;
@@ -124,7 +133,7 @@
       margin-bottom: 1.5em;
     }
     .page-header img {
-      width: 44px;
+      width: 300px;
       height: auto;
     }
     .page-header span {
@@ -216,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>
@@ -276,15 +284,19 @@
     <h1>Learn More</h1>
     <p>Start with our local guides, then review official project docs and community channels to choose the right platform for your goals.</p>
     <div class="button-row">
-      <a class="btn" href="meshcore-resources.html">MeshCore Guides & Tools</a>
-      <a class="btn" href="meshtastic-resources.html">Meshtastic Guides & Tools</a>
-      <a class="btn btn-secondary" href="https://ctmesh.org/discord" target="_blank">Join CT Mesh Discord</a>
+      <a class="btn btn-secondary" href="meshcore-resources.html">MeshCore Guides & Tools</a>
       <a class="btn btn-secondary" href="https://meshcore.co.uk/" target="_blank">Official MeshCore Site</a>
-      <a class="btn btn-secondary" href="https://meshtastic.org/" target="_blank">Official Meshtastic Site</a>
     </div>
-
-    <a class="btn btn-secondary back-link" href="index.html">Back to CT Mesh</a>
-
+    <div class="button-row">
+      <a class="btn" href="meshtastic-resources.html">Meshtastic Guides & Tools</a>
+      <a class="btn" href="https://meshtastic.org/" target="_blank">Official Meshtastic Site</a>
+    </div>
+    <div class="button-row">
+      <a class="btn btn-discord" href="https://ctmesh.org/discord" target="_blank">Join CT Mesh Discord</a>
+    </div>
+    <div class="button-row">
+      <a class="btn btn-secondary back-link" href="index.html">Back to CT Mesh</a>
+    </div>
     <footer class="site-footer">
       <p><a href="https://ctmesh.org/">CT Mesh</a> is a volunteer-run user group for mesh technology enthusiasts in Connecticut.</p>
       <p><a href="https://creativecommons.org/licenses/by-sa/4.0/" target="_blank" rel="noopener">Content licensed CC BY-SA 4.0</a></p>