fix contrast issue with learn button

redesign header section, background changes, other styling fixes/changes
implement new logo design
2026-03-08 20:20:18 -04:00 · 2026-03-08 18:46:41 -04:00 · 2026-03-08 17:46:20 -04:00 · 2026-03-08 18:16:19 +00:00 · 2026-03-07 11:14:38 -05:00
7 changed files with 241 additions and 101 deletions
--- a/favicon.png
+++ b/favicon.png
--- a/index.html
+++ b/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,44 +22,59 @@
  <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>
  
  <style>
-    html, body {
+    html {
      margin: 0;
      padding: 0;
      width: 100%;
      min-height: 100%;
+      background-color: #272727;
    }
    body {
+      margin: 0;
+      padding: 0;
+      width: 100%;
+      min-height: 100%;
      font-family: "Roboto", sans-serif;
-      background: url('background.svg') no-repeat center center fixed;
-      background-size: cover;
-      background-color: #EBEBEB;
+      background-color: transparent;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
    }
+    body::before {
+      content: "";
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background: url('background.svg') no-repeat center center;
+      background-size: cover;
+      filter: invert(1) brightness(0.85);
+      z-index: 0;
+    }
    a,
    a:visited {
      color: #000000;
@ -67,17 +82,18 @@
    .overlay {
      position: fixed;
      top: 0;
-      left: 0; 
-      width: 100%; 
+      left: 0;
+      width: 100%;
      height: 100%;
-      background: rgba(87, 87, 87, 0.4);
+      background: rgba(80, 80, 80, 0.35);
      pointer-events: none;
+      z-index: 0;
    }
    .splash-box {
      background-color: #EBEBEB;
      border-radius: 30px;
      padding: 3em 3em 2em 3em;
-      margin: 1em;
+      margin: 2.5em;
      width: 90%;
      max-width: 700px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
@ -90,23 +106,42 @@
    }
    .top-section {
      display: flex;
+      flex-direction: column;
      align-items: center;
      justify-content: center;
-      gap: 1em;
+      gap: 0.5em;
      width: 100%;
-      padding-bottom: 15px;
+      background-color: #272727;
+      border-radius: 20px 20px 0 0;
+      margin: -3em -3em 0 -3em;
+      padding: 2.5em 3em 50px 3em;
+      position: relative;
    }
-    .top-section a img {
+    .email-link img {
      width: 35px;
-      filter: invert(15%) sepia(17%) saturate(767%) hue-rotate(198deg) brightness(94%) contrast(91%);
+      filter: brightness(0) invert(0.7);
+    }
+    .wave-divider {
+      position: absolute;
+      bottom: -1px;
+      left: 0;
+      right: 0;
+      line-height: 0;
+    }
+    .wave-divider svg {
+      width: 100%;
+      display: block;
    }
    .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 +152,9 @@
    }
    .sub-header {
      font-weight: bold;
-      padding-bottom: 10px;
+      padding-bottom: 4px;
+      margin: 0;
+      color: #e0e0e0;
    }
    .btn {
      display: flex;
@ -167,8 +204,11 @@
    }
    .btn-learn,
    .btn-learn:visited {
-      background-color: #FFB347;
-      color: #1F2230;
+      background-color: #6EBEE1;
+      color: #000;
+    }
+    .btn-learn img {
+      filter: brightness(1);
    }
    .btn-meshcore img {
      filter: brightness(0) invert(1);
@ -258,18 +298,16 @@
      }
      .splash-box {
        padding: 2em;
+        margin: 1em 0;
+        width: calc(100% - 5em);
      }
      .top-section {
-        flex-direction: column;
-        padding-bottom: 20px;
+        margin: -2em -2em 0 -2em;
+        padding: 2em 2em 50px 2em;
      }
      .logo {
-        width: 150px;
+        width: 335px;
        padding-right: 0;
-        margin-bottom: 1em;
-      }
-      .text-content {
-        text-align: center;
      }
      .btn-group {
        flex-direction: column;
@ -294,8 +332,12 @@
      .splash-box {
        padding: 1.5em;
      }
+      .top-section {
+        margin: -1.5em -1.5em 0 -1.5em;
+        padding: 1.5em 1.5em 50px 1.5em;
+      }
      .logo {
-        width: 120px;
+        width: 300px;
      }
      .text-content h1 {
        font-size: 20px;
@ -316,30 +358,32 @@
    <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>
-        <a href="mailto:noah@ctmesh.org" rel="nofollow noindex"><img src="email.svg" alt="Email" /></a>
+        <p class="sub-header">A Connecticut Mesh Technologies User Group</p>
+        <a href="mailto:noah@ctmesh.org" class="email-link" rel="nofollow noindex"><img src="email.svg" alt="Email" /></a>
+      </div>
+      <div class="btn-group" style="margin-bottom: 1em;">
+        <a href="https://ctmesh.org/discord" target="_blank" class="btn btn-discord">
+          <img src="discord.svg" alt="Discord" />
+          <div class="btn-text">
+            Join our Discord
+            <small>Chat with the community</small>
+          </div>
+        </a>
+        <a href="why-run-a-node.html" class="btn btn-learn">
+          <img src="info.svg" alt="Learn about mesh networking" />
+          <div class="btn-text">
+            Why Mesh?
+            <small>Learn about the mesh!</small>
+          </div>
+        </a>
+      </div>
+      <div class="wave-divider">
+        <svg viewBox="0 0 1440 60" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
+          <path d="M0,30 C240,60 480,0 720,30 C960,60 1200,0 1440,30 L1440,60 L0,60 Z" fill="#EBEBEB"/>
+        </svg>
      </div>
    </div>
    <div class="btn-groups">
-      <div class="section">
-        <div class="btn-group">
-          <a href="https://ctmesh.org/discord" target="_blank" class="btn btn-discord">
-            <img src="discord.svg" alt="Discord" />
-            <div class="btn-text">
-              Join our Discord
-              <small>Chat with the community</small>
-            </div>
-          </a>
-          <a href="why-run-a-node.html" class="btn btn-learn">
-            <img src="info.svg" alt="Learn about mesh networking" />
-            <div class="btn-text">
-              Why Mesh Matters
-              <small>Learn about the mesh!</small>
-            </div>
-          </a>
-        </div>
-      </div>
      <div class="section">
        <p class="section-title">MeshCore</p>
        <div class="btn-group">
--- a/logo.png
+++ b/logo.png
--- a/logo_sm.png
+++ b/logo_sm.png
--- a/meshcore-resources.html
+++ b/meshcore-resources.html
@ -10,23 +10,38 @@
  <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">
  <style>
-    html, body {
+    html {
      margin: 0;
      padding: 0;
      width: 100%;
      min-height: 100%;
+      background-color: #272727;
    }
    body {
+      margin: 0;
+      padding: 0;
+      width: 100%;
+      min-height: 100%;
      font-family: "Roboto", sans-serif;
-      background: url('background.svg') no-repeat center center fixed;
-      background-size: cover;
-      background-color: #EBEBEB;
+      background-color: transparent;
      color: #2C2D3C;
      display: flex;
      align-items: flex-start;
      justify-content: center;
      padding: 2em 0;
    }
+    body::before {
+      content: "";
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background: url('background.svg') no-repeat center center;
+      background-size: cover;
+      filter: invert(1) brightness(0.85);
+      z-index: 0;
+    }
    a,
    a:visited {
      color: #000000;
@ -37,14 +52,15 @@
      left: 0;
      width: 100%;
      height: 100%;
-      background: rgba(87, 87, 87, 0.4);
+      background: rgba(80, 80, 80, 0.35);
      pointer-events: none;
+      z-index: 0;
    }
    .content-box {
      background-color: #EBEBEB;
      border-radius: 30px;
      padding: 2.5em 3em;
-      margin: 1em;
+      margin: 2.5em;
      max-width: 820px;
      width: 90%;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
@ -122,21 +138,28 @@
      font-size: 15px;
      text-decoration: none;
    }
+    .page-header-bg {
+      background-color: #272727;
+      border-radius: 20px 20px 0 0;
+      margin: -2.5em -3em 1.5em -3em;
+      padding: 2em 3em;
+      display: flex;
+      justify-content: center;
+    }
    .page-header {
      display: flex;
      align-items: center;
      gap: 0.5em;
      text-decoration: none;
-      margin-bottom: 1.5em;
    }
    .page-header img {
-      width: 44px;
+      width: 300px;
      height: auto;
    }
    .page-header span {
      font-weight: bold;
      font-size: 19px;
-      color: #2C2D3C;
+      color: #e0e0e0;
    }
    .back-link,
    .back-link:visited {
@ -193,11 +216,19 @@
      .content-box {
        padding: 2em;
      }
+      .page-header-bg {
+        margin: -2em -2em 1.5em -2em;
+        padding: 2em;
+      }
    }
    @media (max-width: 480px) {
      .content-box {
        padding: 1.5em;
      }
+      .page-header-bg {
+        margin: -1.5em -1.5em 1.5em -1.5em;
+        padding: 1.5em;
+      }
      h1 {
        font-size: 22px;
      }
@ -210,10 +241,11 @@
 <body>
  <div class="overlay"></div>
  <div class="content-box">
-    <a href="index.html" class="page-header">
-      <img src="logo_sm.png" alt="CT Mesh" />
-      <span>CT Mesh</span>
-    </a>
+    <div class="page-header-bg">
+      <a href="index.html" class="page-header">
+        <img src="logo_sm.png" alt="CT Mesh" />
+      </a>
+    </div>
    <h1>MeshCore Resources</h1>

    <h2>Web Tools</h2>
--- a/meshtastic-resources.html
+++ b/meshtastic-resources.html
@ -10,23 +10,38 @@
  <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">
  <style>
-    html, body {
+    html {
      margin: 0;
      padding: 0;
      width: 100%;
      min-height: 100%;
+      background-color: #272727;
    }
    body {
+      margin: 0;
+      padding: 0;
+      width: 100%;
+      min-height: 100%;
      font-family: "Roboto", sans-serif;
-      background: url('background.svg') no-repeat center center fixed;
-      background-size: cover;
-      background-color: #EBEBEB;
+      background-color: transparent;
      color: #2C2D3C;
      display: flex;
      align-items: flex-start;
      justify-content: center;
      padding: 2em 0;
    }
+    body::before {
+      content: "";
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background: url('background.svg') no-repeat center center;
+      background-size: cover;
+      filter: invert(1) brightness(0.85);
+      z-index: 0;
+    }
    a,
    a:visited {
      color: #000000;
@ -37,14 +52,15 @@
      left: 0;
      width: 100%;
      height: 100%;
-      background: rgba(87, 87, 87, 0.4);
+      background: rgba(80, 80, 80, 0.35);
      pointer-events: none;
+      z-index: 0;
    }
    .content-box {
      background-color: #EBEBEB;
      border-radius: 30px;
      padding: 2.5em 3em;
-      margin: 1em;
+      margin: 2.5em;
      max-width: 820px;
      width: 90%;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
@ -140,21 +156,28 @@
      margin: 0.75em 0 0.5em;
      font-size: 0.95em;
    }
+    .page-header-bg {
+      background-color: #272727;
+      border-radius: 20px 20px 0 0;
+      margin: -2.5em -3em 1.5em -3em;
+      padding: 2em 3em;
+      display: flex;
+      justify-content: center;
+    }
    .page-header {
      display: flex;
      align-items: center;
      gap: 0.5em;
      text-decoration: none;
-      margin-bottom: 1.5em;
    }
    .page-header img {
-      width: 44px;
+      width: 300px;
      height: auto;
    }
    .page-header span {
      font-weight: bold;
      font-size: 19px;
-      color: #2C2D3C;
+      color: #e0e0e0;
    }
    .back-link {
      margin-top: 1.5em;
@ -208,11 +231,19 @@
      .content-box {
        padding: 2em;
      }
+      .page-header-bg {
+        margin: -2em -2em 1.5em -2em;
+        padding: 2em;
+      }
    }
    @media (max-width: 480px) {
      .content-box {
        padding: 1.5em;
      }
+      .page-header-bg {
+        margin: -1.5em -1.5em 1.5em -1.5em;
+        padding: 1.5em;
+      }
      h1 {
        font-size: 22px;
      }
@ -225,10 +256,11 @@
 <body>
  <div class="overlay"></div>
  <div class="content-box">
-    <a href="index.html" class="page-header">
-      <img src="logo_sm.png" alt="CT Mesh" />
-      <span>CT Mesh</span>
-    </a>
+    <div class="page-header-bg">
+      <a href="index.html" class="page-header">
+        <img src="logo_sm.png" alt="CT Mesh" />
+      </a>
+    </div>
    <h1>Meshtastic Resources</h1>

    <h2>Community-run Web Tools</h2>
--- a/why-run-a-node.html
+++ b/why-run-a-node.html
@ -11,23 +11,38 @@
  <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">
  <style>
-    html, body {
+    html {
      margin: 0;
      padding: 0;
      width: 100%;
      min-height: 100%;
+      background-color: #272727;
    }
    body {
+      margin: 0;
+      padding: 0;
+      width: 100%;
+      min-height: 100%;
      font-family: "Roboto", sans-serif;
-      background: url('background.svg') no-repeat center center fixed;
-      background-size: cover;
-      background-color: #EBEBEB;
+      background-color: transparent;
      color: #2C2D3C;
      display: flex;
      align-items: flex-start;
      justify-content: center;
      padding: 2em 0;
    }
+    body::before {
+      content: "";
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background: url('background.svg') no-repeat center center;
+      background-size: cover;
+      filter: invert(1) brightness(0.85);
+      z-index: 0;
+    }
    a,
    a:visited {
      color: #000000;
@ -38,14 +53,15 @@
      left: 0;
      width: 100%;
      height: 100%;
-      background: rgba(87, 87, 87, 0.4);
+      background: rgba(80, 80, 80, 0.35);
      pointer-events: none;
+      z-index: 0;
    }
    .content-box {
      background-color: #EBEBEB;
      border-radius: 30px;
      padding: 2.5em 3em;
-      margin: 1em;
+      margin: 2.5em;
      max-width: 820px;
      width: 90%;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
@ -125,21 +141,28 @@
    .btn-discord img {
      filter: brightness(0) invert(1);
    }
+    .page-header-bg {
+      background-color: #272727;
+      border-radius: 20px 20px 0 0;
+      margin: -2.5em -3em 1.5em -3em;
+      padding: 2em 3em;
+      display: flex;
+      justify-content: center;
+    }
    .page-header {
      display: flex;
      align-items: center;
      gap: 0.5em;
      text-decoration: none;
-      margin-bottom: 1.5em;
    }
    .page-header img {
-      width: 44px;
+      width: 300px;
      height: auto;
    }
    .page-header span {
      font-weight: bold;
      font-size: 19px;
-      color: #2C2D3C;
+      color: #e0e0e0;
    }
    .button-row {
      display: flex;
@ -200,11 +223,19 @@
      .content-box {
        padding: 2em;
      }
+      .page-header-bg {
+        margin: -2em -2em 1.5em -2em;
+        padding: 2em;
+      }
    }
    @media (max-width: 480px) {
      .content-box {
        padding: 1.5em;
      }
+      .page-header-bg {
+        margin: -1.5em -1.5em 1.5em -1.5em;
+        padding: 1.5em;
+      }
      h1 {
        font-size: 22px;
      }
@ -223,10 +254,11 @@
 <body>
  <div class="overlay"></div>
  <div class="content-box">
-    <a href="index.html" class="page-header">
-      <img src="logo_sm.png" alt="CT Mesh" />
-      <span>CT Mesh</span>
-    </a>
+    <div class="page-header-bg">
+      <a href="index.html" class="page-header">
+        <img src="logo_sm.png" alt="CT Mesh" />
+      </a>
+    </div>

    <h1 class="page-title">Why Run a Mesh Node?</h1>
    <p class="subtitle">Learn about the mesh!</p>
Author	SHA1	Message	Date
Noah	b4ce029dd6	fix contrast issue with learn button All checks were successful Deploy Pages / deploy (push) Successful in 21s Details	2026-03-08 20:20:18 -04:00
Noah	55a84a03ea	redesign header section, background changes, other styling fixes/changes All checks were successful Deploy Pages / deploy (push) Successful in 26s Details	2026-03-08 18:46:41 -04:00
Noah	4a25f00f1b	implement new logo design All checks were successful Deploy Pages / deploy (push) Successful in 16s Details	2026-03-08 17:46:20 -04:00
noah	ba49ce7cf0	Merge pull request 'Updated MQTT configuration information' (#5 ) from jared/web:feature/mqtt-upload-updates into master All checks were successful Deploy Pages / deploy (push) Successful in 20s Details Reviewed-on: #5	2026-03-08 18:16:19 +00:00
Jared Dunbar	be76e4919e	Updated MQTT configuration information	2026-03-07 11:14:38 -05:00