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

New site design & logos #7

Merged
noah merged 3 commits from staging into master 2026-03-09 00:22:22 +00:00
Conversation 0 Commits 3 Files Changed 7 +244 -101
7 changed files with 244 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 55a84a03ea - Show all commits

110
index.html
View File

@ -44,22 +44,37 @@
<title>CT Mesh</title> <title>CT Mesh</title>
<style> <style>
html, body { html {
margin: 0; margin: 0;
padding: 0; padding: 0;
width: 100%; width: 100%;
min-height: 100%; min-height: 100%;
background-color: #272727;
} }
body { body {
margin: 0;
padding: 0;
width: 100%;
min-height: 100%;
font-family: "Roboto", sans-serif; font-family: "Roboto", sans-serif;
background: url('background.svg') no-repeat center center fixed; background-color: transparent;
background-size: cover;
background-color: #EBEBEB;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
position: relative; 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,
a:visited { a:visited {
color: #000000; color: #000000;
@ -70,14 +85,15 @@
left: 0; left: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
background: rgba(87, 87, 87, 0.4); background: rgba(80, 80, 80, 0.35);
pointer-events: none; pointer-events: none;
z-index: 0;
} }
.splash-box { .splash-box {
background-color: #EBEBEB; background-color: #EBEBEB;
border-radius: 30px; border-radius: 30px;
padding: 3em 3em 2em 3em; padding: 3em 3em 2em 3em;
margin: 1em; margin: 2.5em;
width: 90%; width: 90%;
max-width: 700px; max-width: 700px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
@ -95,11 +111,26 @@
justify-content: center; justify-content: center;
gap: 0.5em; gap: 0.5em;
width: 100%; 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; 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 { .logo {
width: 540px; width: 540px;
@ -123,6 +154,7 @@
font-weight: bold; font-weight: bold;
padding-bottom: 4px; padding-bottom: 4px;
margin: 0; margin: 0;
color: #e0e0e0;
} }
.btn { .btn {
display: flex; display: flex;
@ -172,8 +204,14 @@
} }
.btn-learn, .btn-learn,
.btn-learn:visited { .btn-learn:visited {
background-color: #FFB347; background-color: #6EBEE1;
color: #1F2230; color: #ffffff;
}
.btn-learn img {
filter: brightness(0) invert(1);
}
.btn-learn::after {
filter: invert(1) !important;
} }
.btn-meshcore img { .btn-meshcore img {
filter: brightness(0) invert(1); filter: brightness(0) invert(1);
@ -263,9 +301,12 @@
} }
.splash-box { .splash-box {
padding: 2em; padding: 2em;
margin: 1em 0;
width: calc(100% - 5em);
} }
.top-section { .top-section {
padding-bottom: 20px; margin: -2em -2em 0 -2em;
padding: 2em 2em 50px 2em;
} }
.logo { .logo {
width: 335px; width: 335px;
@ -294,6 +335,10 @@
.splash-box { .splash-box {
padding: 1.5em; padding: 1.5em;
} }
.top-section {
margin: -1.5em -1.5em 0 -1.5em;
padding: 1.5em 1.5em 50px 1.5em;
}
.logo { .logo {
width: 300px; width: 300px;
} }
@ -317,28 +362,31 @@
<img src="logo_sm.png" alt="CT Mesh Logo" class="logo" /> <img src="logo_sm.png" alt="CT Mesh Logo" class="logo" />
<div class="text-content"> <div class="text-content">
<p class="sub-header">A 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> <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> </div>
<div class="btn-groups"> <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"> <div class="section">
<p class="section-title">MeshCore</p> <p class="section-title">MeshCore</p>
<div class="btn-group"> <div class="btn-group">

55
meshcore-resources.html
View File

@ -10,23 +10,38 @@
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <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 href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
<style> <style>
html, body { html {
margin: 0; margin: 0;
padding: 0; padding: 0;
width: 100%; width: 100%;
min-height: 100%; min-height: 100%;
background-color: #272727;
} }
body { body {
margin: 0;
padding: 0;
width: 100%;
min-height: 100%;
font-family: "Roboto", sans-serif; font-family: "Roboto", sans-serif;
background: url('background.svg') no-repeat center center fixed; background-color: transparent;
background-size: cover;
background-color: #EBEBEB;
color: #2C2D3C; color: #2C2D3C;
display: flex; display: flex;
align-items: flex-start; align-items: flex-start;
justify-content: center; justify-content: center;
padding: 2em 0; 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,
a:visited { a:visited {
color: #000000; color: #000000;
@ -37,14 +52,15 @@
left: 0; left: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
background: rgba(87, 87, 87, 0.4); background: rgba(80, 80, 80, 0.35);
pointer-events: none; pointer-events: none;
z-index: 0;
} }
.content-box { .content-box {
background-color: #EBEBEB; background-color: #EBEBEB;
border-radius: 30px; border-radius: 30px;
padding: 2.5em 3em; padding: 2.5em 3em;
margin: 1em; margin: 2.5em;
max-width: 820px; max-width: 820px;
width: 90%; width: 90%;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
@ -122,12 +138,19 @@
font-size: 15px; font-size: 15px;
text-decoration: none; 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 { .page-header {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 0.5em; gap: 0.5em;
text-decoration: none; text-decoration: none;
margin-bottom: 1.5em;
} }
.page-header img { .page-header img {
width: 300px; width: 300px;
@ -136,7 +159,7 @@
.page-header span { .page-header span {
font-weight: bold; font-weight: bold;
font-size: 19px; font-size: 19px;
color: #2C2D3C; color: #e0e0e0;
} }
.back-link, .back-link,
.back-link:visited { .back-link:visited {
@ -193,11 +216,19 @@
.content-box { .content-box {
padding: 2em; padding: 2em;
} }
.page-header-bg {
margin: -2em -2em 1.5em -2em;
padding: 2em;
}
} }
@media (max-width: 480px) { @media (max-width: 480px) {
.content-box { .content-box {
padding: 1.5em; padding: 1.5em;
} }
.page-header-bg {
margin: -1.5em -1.5em 1.5em -1.5em;
padding: 1.5em;
}
h1 { h1 {
font-size: 22px; font-size: 22px;
} }
@ -210,9 +241,11 @@
<body> <body>
<div class="overlay"></div> <div class="overlay"></div>
<div class="content-box"> <div class="content-box">
<a href="index.html" class="page-header"> <div class="page-header-bg">
<img src="logo_sm.png" alt="CT Mesh" /> <a href="index.html" class="page-header">
</a> <img src="logo_sm.png" alt="CT Mesh" />
</a>
</div>
<h1>MeshCore Resources</h1> <h1>MeshCore Resources</h1>
<h2>Web Tools</h2> <h2>Web Tools</h2>

55
meshtastic-resources.html
View File

@ -10,23 +10,38 @@
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <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 href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
<style> <style>
html, body { html {
margin: 0; margin: 0;
padding: 0; padding: 0;
width: 100%; width: 100%;
min-height: 100%; min-height: 100%;
background-color: #272727;
} }
body { body {
margin: 0;
padding: 0;
width: 100%;
min-height: 100%;
font-family: "Roboto", sans-serif; font-family: "Roboto", sans-serif;
background: url('background.svg') no-repeat center center fixed; background-color: transparent;
background-size: cover;
background-color: #EBEBEB;
color: #2C2D3C; color: #2C2D3C;
display: flex; display: flex;
align-items: flex-start; align-items: flex-start;
justify-content: center; justify-content: center;
padding: 2em 0; 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,
a:visited { a:visited {
color: #000000; color: #000000;
@ -37,14 +52,15 @@
left: 0; left: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
background: rgba(87, 87, 87, 0.4); background: rgba(80, 80, 80, 0.35);
pointer-events: none; pointer-events: none;
z-index: 0;
} }
.content-box { .content-box {
background-color: #EBEBEB; background-color: #EBEBEB;
border-radius: 30px; border-radius: 30px;
padding: 2.5em 3em; padding: 2.5em 3em;
margin: 1em; margin: 2.5em;
max-width: 820px; max-width: 820px;
width: 90%; width: 90%;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
@ -140,12 +156,19 @@
margin: 0.75em 0 0.5em; margin: 0.75em 0 0.5em;
font-size: 0.95em; 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 { .page-header {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 0.5em; gap: 0.5em;
text-decoration: none; text-decoration: none;
margin-bottom: 1.5em;
} }
.page-header img { .page-header img {
width: 300px; width: 300px;
@ -154,7 +177,7 @@
.page-header span { .page-header span {
font-weight: bold; font-weight: bold;
font-size: 19px; font-size: 19px;
color: #2C2D3C; color: #e0e0e0;
} }
.back-link { .back-link {
margin-top: 1.5em; margin-top: 1.5em;
@ -208,11 +231,19 @@
.content-box { .content-box {
padding: 2em; padding: 2em;
} }
.page-header-bg {
margin: -2em -2em 1.5em -2em;
padding: 2em;
}
} }
@media (max-width: 480px) { @media (max-width: 480px) {
.content-box { .content-box {
padding: 1.5em; padding: 1.5em;
} }
.page-header-bg {
margin: -1.5em -1.5em 1.5em -1.5em;
padding: 1.5em;
}
h1 { h1 {
font-size: 22px; font-size: 22px;
} }
@ -225,9 +256,11 @@
<body> <body>
<div class="overlay"></div> <div class="overlay"></div>
<div class="content-box"> <div class="content-box">
<a href="index.html" class="page-header"> <div class="page-header-bg">
<img src="logo_sm.png" alt="CT Mesh" /> <a href="index.html" class="page-header">
</a> <img src="logo_sm.png" alt="CT Mesh" />
</a>
</div>
<h1>Meshtastic Resources</h1> <h1>Meshtastic Resources</h1>
<h2>Community-run Web Tools</h2> <h2>Community-run Web Tools</h2>

55
why-run-a-node.html
View File

@ -11,23 +11,38 @@
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <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 href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
<style> <style>
html, body { html {
margin: 0; margin: 0;
padding: 0; padding: 0;
width: 100%; width: 100%;
min-height: 100%; min-height: 100%;
background-color: #272727;
} }
body { body {
margin: 0;
padding: 0;
width: 100%;
min-height: 100%;
font-family: "Roboto", sans-serif; font-family: "Roboto", sans-serif;
background: url('background.svg') no-repeat center center fixed; background-color: transparent;
background-size: cover;
background-color: #EBEBEB;
color: #2C2D3C; color: #2C2D3C;
display: flex; display: flex;
align-items: flex-start; align-items: flex-start;
justify-content: center; justify-content: center;
padding: 2em 0; 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,
a:visited { a:visited {
color: #000000; color: #000000;
@ -38,14 +53,15 @@
left: 0; left: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
background: rgba(87, 87, 87, 0.4); background: rgba(80, 80, 80, 0.35);
pointer-events: none; pointer-events: none;
z-index: 0;
} }
.content-box { .content-box {
background-color: #EBEBEB; background-color: #EBEBEB;
border-radius: 30px; border-radius: 30px;
padding: 2.5em 3em; padding: 2.5em 3em;
margin: 1em; margin: 2.5em;
max-width: 820px; max-width: 820px;
width: 90%; width: 90%;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
@ -125,12 +141,19 @@
.btn-discord img { .btn-discord img {
filter: brightness(0) invert(1); 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 { .page-header {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 0.5em; gap: 0.5em;
text-decoration: none; text-decoration: none;
margin-bottom: 1.5em;
} }
.page-header img { .page-header img {
width: 300px; width: 300px;
@ -139,7 +162,7 @@
.page-header span { .page-header span {
font-weight: bold; font-weight: bold;
font-size: 19px; font-size: 19px;
color: #2C2D3C; color: #e0e0e0;
} }
.button-row { .button-row {
display: flex; display: flex;
@ -200,11 +223,19 @@
.content-box { .content-box {
padding: 2em; padding: 2em;
} }
.page-header-bg {
margin: -2em -2em 1.5em -2em;
padding: 2em;
}
} }
@media (max-width: 480px) { @media (max-width: 480px) {
.content-box { .content-box {
padding: 1.5em; padding: 1.5em;
} }
.page-header-bg {
margin: -1.5em -1.5em 1.5em -1.5em;
padding: 1.5em;
}
h1 { h1 {
font-size: 22px; font-size: 22px;
} }
@ -223,9 +254,11 @@
<body> <body>
<div class="overlay"></div> <div class="overlay"></div>
<div class="content-box"> <div class="content-box">
<a href="index.html" class="page-header"> <div class="page-header-bg">
<img src="logo_sm.png" alt="CT Mesh" /> <a href="index.html" class="page-header">
</a> <img src="logo_sm.png" alt="CT Mesh" />
</a>
</div>
<h1 class="page-title">Why Run a Mesh Node?</h1> <h1 class="page-title">Why Run a Mesh Node?</h1>
<p class="subtitle">Learn about the mesh!</p> <p class="subtitle">Learn about the mesh!</p>