1
0
forked from ctmesh/web

18 Commits

Author SHA1 Message Date
af040a4096 update redirects 2026-03-18 09:50:10 -04:00
38af7a1e27 fix name 2026-03-09 11:15:16 -04:00
94a0410957 add a rounded icon 2026-03-09 11:13:33 -04:00
afa73644d4 fix cache on logos 2026-03-08 20:27:10 -04:00
7d8e4cd5cc Merge pull request 'New site design & logos' (#7) from staging into master
Reviewed-on: ctmesh/web#7
2026-03-09 00:22:21 +00:00
b4ce029dd6 fix contrast issue with learn button 2026-03-08 20:20:18 -04:00
55a84a03ea redesign header section, background changes, other styling fixes/changes 2026-03-08 18:46:41 -04:00
4a25f00f1b implement new logo design 2026-03-08 17:46:20 -04:00
ba49ce7cf0 Merge pull request 'Updated MQTT configuration information' (#5) from jared/web:feature/mqtt-upload-updates into master
Reviewed-on: ctmesh/web#5
2026-03-08 18:16:19 +00:00
be76e4919e Updated MQTT configuration information 2026-03-07 11:14:38 -05:00
032edad7ac add MeshCore Analyzer to MeshCore resources; verbiage changes 2026-03-06 11:07:09 -05:00
0be6bb21ea Merge pull request 'MeshCore prominence, merge Jared's outreach info, remove old apps' (#4) from staging into master
Reviewed-on: ctmesh/web#4
2026-03-04 02:21:16 +00:00
335c7e7334 mobile display fix for back button not in button group, button color consistency 2026-03-03 09:42:10 -05:00
91664bfb81 Merge pull request 'Improve outreach information' (#3) from jared/web:feature/why-run-node into staging
Reviewed-on: ctmesh/web#3
2026-03-03 14:22:33 +00:00
b23bff5d67 remove legacy wardrive app instead 2026-03-02 13:57:54 -05:00
8b500c4aea old wardrive app now legacy, reorder home for MeshCore prominence 2026-03-02 10:05:52 -05:00
ff5f94d9fd Fix dashes 2026-02-17 21:01:29 -05:00
183fad5ca4 Stage changes to MeshCore resources, mark old wardrive app as legacy, and change verbiage. Will hotlink to mobile apps once published on MeshMapper's website. 2026-02-17 20:57:05 -05:00
9 changed files with 312 additions and 150 deletions

View File

@ -1 +1,3 @@
/discord https://discord.gg/m4F328as3K 302
/merch https://ctmesh.redbubble.com 302
/store https://ctmesh.redbubble.com 302

Binary file not shown.

Before

Width:  |  Height:  |  Size: 72 KiB

After

Width:  |  Height:  |  Size: 34 KiB

BIN
favicon_sq.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 28 KiB

View File

@ -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?2026-1">
<!-- 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?2026-1">
<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?2026-1">
<!-- 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?2026-14">
<link rel="apple-touch-icon" sizes="57x57" href="favicon.png?2026-1">
<link rel="apple-touch-icon" sizes="72x72" href="favicon.png?2026-1">
<link rel="apple-touch-icon" sizes="114x114" href="favicon.png?2026-1">
<link rel="apple-touch-icon" sizes="120x120" href="favicon.png?2026-1">
<link rel="apple-touch-icon" sizes="144x144" href="favicon.png?2026-1">
<link rel="apple-touch-icon" sizes="152x152" href="favicon.png?2026-1">
<link rel="apple-touch-icon" sizes="180x180" href="favicon.png?2026-1">
<meta name="msapplication-TileColor" content="#6EBEE1">
<meta name="msapplication-TileImage" content="favicon.png?2026-1">
<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;
@ -70,14 +85,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;
}
.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;
@ -314,58 +356,34 @@
<div class="overlay"></div>
<div class="splash-box">
<div class="top-section">
<img src="logo_sm.png" alt="CT Mesh Logo" class="logo" />
<img src="logo_sm.png?2026" 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">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 +411,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>

BIN
logo.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 440 KiB

After

Width:  |  Height:  |  Size: 458 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 93 KiB

After

Width:  |  Height:  |  Size: 77 KiB

View File

@ -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,20 +241,20 @@
<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>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 +265,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">

View File

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

View File

@ -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);
@ -116,21 +132,37 @@
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-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;
@ -191,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;
}
@ -214,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>
@ -276,15 +317,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>