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>
 
@@ -233,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
+      <pre id="meshcore-mqtt">[[broker]]
-MCTOMQTT_MQTT3_ENABLED=true
+name = "ctmesh"
-MCTOMQTT_MQTT3_SERVER=mqtt.ctmesh.org
+enabled = true
-MCTOMQTT_MQTT3_PORT=1883
+server = "mqtt.ctmesh.org"
-MCTOMQTT_MQTT3_USE_TLS=false
+port = 1883
-MCTOMQTT_MQTT3_USERNAME=meshdev
+transport = "tcp"
-MCTOMQTT_MQTT3_PASSWORD=large4cats</pre>
+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

@@ -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>