ctmesh/web
2
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

changes & fixes. fewer buttons, fix scrolling issue with page top cut off, rejigger resources pages with resources on top, other minor cosmetics.

Browse Source
This commit is contained in:
Noah
2026-02-10 13:33:37 -05:00
parent 6acb31e2a9
commit bc23226733
4 changed files with 92 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files

141
index.html
View File

@ -6,14 +6,14 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
<!-- Site Description & Keywords -->
<meta name="description" content="A Connecticut Meshtastic User Group. Join the local community to connect, share, and explore with fellow enthusiasts.">
<meta name="keywords" content="CT Mesh, Meshtastic, Connecticut, CT, community, user group, Discord, map">
<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="author" content="CT Mesh">
<link rel="shortcut icon" type="image/x-icon" href="favicon.png?3">
<!-- Open Graph / Facebook -->
<meta property="og:title" content="CT Mesh">
<meta property="og:description" content="A Connecticut Meshtastic User Group. Join the local community to connect, share, and explore with fellow enthusiasts.">
<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:url" content="https://ctmesh.org">
<meta property="og:type" content="website">
@ -21,7 +21,7 @@
<!-- Twitter -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="CT Mesh">
<meta name="twitter:description" content="A Connecticut Meshtastic User Group. Join the local community to connect, share, and explore with fellow enthusiasts.">
<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">
<!-- Fonts and Icons -->
@ -48,7 +48,7 @@
margin: 0;
padding: 0;
width: 100%;
height: 100%;
min-height: 100%;
}
body {
font-family: "Roboto", sans-serif;
@ -77,9 +77,9 @@
background-color: #EBEBEB;
border-radius: 30px;
padding: 3em 3em 2em 3em;
margin: 1em;
width: min(100%, 900px);
max-width: 900px;
margin: 2em;
width: min(100%, 700px);
max-width: 700px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
color: #000000;
position: relative;
@ -122,7 +122,7 @@
.btn {
display: flex;
align-items: center;
gap: 8px;
gap: 12px;
background-color: #67EA94;
color: #000000;
border: none;
@ -151,10 +151,38 @@
height: 30px;
filter: brightness(0);
}
.btn-discord {
background-color: #7289da;
.btn-discord,
.btn-discord:visited {
background-color: #5865F2;
color: #ffffff;
}
.btn-discord img {
filter: brightness(0) invert(1);
}
.btn-meshcore,
.btn-meshcore:visited {
background-color: #2B3A4E;
color: #ffffff;
}
.btn-meshcore img {
filter: brightness(0) invert(1);
}
a.btn[target="_blank"]::after {
content: "";
width: 16px;
height: 16px;
margin-left: auto;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5L8.5 3.5M5 3.5h3.5V7'/%3E%3C/svg%3E") no-repeat center;
background-size: contain;
flex-shrink: 0;
opacity: 0.4;
}
.btn-discord::after {
display: none;
}
.btn-meshcore::after {
filter: invert(1) !important;
}
.btn-group {
display: flex;
gap: 1em;
@ -232,23 +260,20 @@
}
.btn-group {
flex-direction: column;
align-items: stretch;
align-items: center;
}
.section-title {
text-align: center;
}
.btn {
width: 100%;
justify-content: center;
width: 340px;
max-width: 100%;
justify-content: flex-start;
padding: 0.8em 1em;
font-size: 16px;
text-align: center;
max-width: 100%;
text-align: left;
flex: none;
}
.btn-text {
align-items: center;
}
}
/* Further adjustments for devices with a viewport width of 480px or less */
@ -256,8 +281,6 @@
.splash-box {
padding: 1.5em;
margin: 1em;
width: 90%;
min-width: 250px;
}
.logo {
width: 120px;
@ -282,7 +305,7 @@
<img src="logo_sm.png" alt="CT Mesh Logo" class="logo" />
<div class="text-content">
<h1>CT Mesh</h1>
<p class="sub-header">Connecticut Meshtastic 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>
@ -290,10 +313,10 @@
<div class="section">
<div class="btn-group">
<a href="https://discord.gg/m4F328as3K" target="_blank" class="btn btn-discord">
<img src="discord.svg" alt="Discord Icon" />
<img src="discord.svg" alt="Discord" />
<div class="btn-text">
Join our Discord
<small>Join the community</small>
<small>Chat with the community</small>
</div>
</a>
</div>
@ -302,38 +325,24 @@
<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 Icon" />
<img src="meshtastic.svg" alt="Meshtastic" />
<div class="btn-text">
Meshtastic
<small>Learn more!</small>
</div>
</a>
<a href="https://malla.ctmesh.org/" target="_blank" class="btn">
<img src="info.svg" alt="Info Icon" />
<div class="btn-text">
Web Dashboard
<small>Network metrics & analytics</small>
<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 Icon" />
<img src="map.svg" alt="Map" />
<div class="btn-text">
CT Map
<small>Nodes seen by CT Mesh</small>
Node Map
<small>CT Mesh nodes</small>
</div>
</a>
<a href="https://meshtastic.liamcottle.net/?lat=26.58852714730864&lng=285.11718750000006&zoom=2" target="_blank" class="btn">
<img src="globe.svg" alt="Globe Icon" />
<a href="meshtastic-resources.html" class="btn">
<img src="info.svg" alt="Guides & Tools" />
<div class="btn-text">
Global Map
<small>Nodes around the world</small>
</div>
</a>
<a href="resources.html" class="btn">
<img src="info.svg" alt="Info Icon" />
<div class="btn-text">
Meshtastic Resources
<small>Channels, MQTT, tools</small>
Guides & Tools
<small>Channels, MQTT, setup</small>
</div>
</a>
</div>
@ -341,39 +350,25 @@
<div class="section">
<p class="section-title">MeshCore</p>
<div class="btn-group">
<a href="https://meshcore.co.uk/" target="_blank" class="btn">
<img src="meshcore.svg" alt="MeshCore Logo" />
<a href="https://meshcore.co.uk/" target="_blank" class="btn btn-meshcore">
<img src="meshcore.svg" alt="MeshCore" />
<div class="btn-text">
Official MeshCore Website
<small>Project website</small>
MeshCore
<small>About the project</small>
</div>
</a>
<a href="https://meshcore-map.ctmesh.org/" target="_blank" class="btn">
<img src="map.svg" alt="Map Icon" />
<a href="https://meshcore-map.ctmesh.org/" target="_blank" class="btn btn-meshcore">
<img src="map.svg" alt="Map" />
<div class="btn-text">
MeshCore Map
<small>Live node map</small>
Node Map
<small>Live MeshCore nodes</small>
</div>
</a>
<a href="https://meshcore-wardrive.ctmesh.org/" target="_blank" class="btn">
<img src="map.svg" alt="Map Icon" />
<a href="meshcore-resources.html" class="btn btn-meshcore">
<img src="info.svg" alt="Guides & Tools" />
<div class="btn-text">
MeshCore Wardrive
<small>Coverage maps</small>
</div>
</a>
<a href="https://meshcore-wardrive.ctmesh.org/wardrive" target="_blank" class="btn">
<img src="wheel.svg" alt="Wheel Icon" />
<div class="btn-text">
Wardrive Contribution
<small>Upload wardrive data</small>
</div>
</a>
<a href="meshcore-resources.html" class="btn">
<img src="info.svg" alt="Info Icon" />
<div class="btn-text">
MeshCore Resources
<small>Tools and maps</small>
Guides & Tools
<small>Wardrive, MQTT, setup</small>
</div>
</a>
</div>