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

Compare commits

base: ctmesh:be76e4919ef3ad8937dead51ddb7614a180981f0
Branches Tags
ctmesh:master ctmesh:staging ctmesh:new-logo-design
...
compare: ctmesh:master
Branches Tags
ctmesh:master ctmesh:staging ctmesh:new-logo-design

9 Commits
be76e4919e ... master

Author SHA1 Message Date
Noah
af040a4096 update redirects
All checks were successful
Deploy Pages / deploy (push) Successful in 36s
Details
2026-03-18 09:50:10 -04:00
Noah
38af7a1e27 fix name
All checks were successful
Deploy Pages / deploy (push) Successful in 23s
Details
2026-03-09 11:15:16 -04:00
Noah
94a0410957 add a rounded icon
All checks were successful
Deploy Pages / deploy (push) Successful in 25s
Details
2026-03-09 11:13:33 -04:00
Noah
afa73644d4 fix cache on logos
All checks were successful
Deploy Pages / deploy (push) Successful in 19s
Details
2026-03-08 20:27:10 -04:00
noah
7d8e4cd5cc Merge pull request 'New site design & logos' (#7) from staging into master
All checks were successful
Deploy Pages / deploy (push) Successful in 20s
Details 
Reviewed-on: https://git.ctmesh.org/ctmesh/web/pulls/7
 2026-03-09 00:22:21 +00:00
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: https://git.ctmesh.org/ctmesh/web/pulls/5
 2026-03-08 18:16:19 +00:00
9 changed files with 245 additions and 103 deletions
Expand all files Collapse all files

4
_redirects
View File

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

BIN
favicon.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 72 KiB

After

Width:  |  Height:  |  Size: 34 KiB

BIN
favicon_sq.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 28 KiB

170
index.html
View File

@ -7,14 +7,14 @@
<!-- Site Description & Keywords --> <!-- 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="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"> <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 --> <!-- Open Graph / Facebook -->
<meta property="og:title" content="CT Mesh"> <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: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:url" content="https://ctmesh.org">
<meta property="og:type" content="website"> <meta property="og:type" content="website">
@ -22,44 +22,59 @@
<meta name="twitter:card" content="summary_large_image"> <meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="CT Mesh"> <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: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 --> <!-- Fonts and Icons -->
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<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">
<link rel="icon" type="image/png" href="favicon.png?3"> <link rel="icon" type="image/png" href="favicon.png?2026-14">
<link rel="apple-touch-icon" sizes="57x57" href="favicon.png?3"> <link rel="apple-touch-icon" sizes="57x57" href="favicon.png?2026-1">
<link rel="apple-touch-icon" sizes="72x72" href="favicon.png?3"> <link rel="apple-touch-icon" sizes="72x72" href="favicon.png?2026-1">
<link rel="apple-touch-icon" sizes="114x114" href="favicon.png?3"> <link rel="apple-touch-icon" sizes="114x114" href="favicon.png?2026-1">
<link rel="apple-touch-icon" sizes="120x120" href="favicon.png?3"> <link rel="apple-touch-icon" sizes="120x120" href="favicon.png?2026-1">
<link rel="apple-touch-icon" sizes="144x144" href="favicon.png?3"> <link rel="apple-touch-icon" sizes="144x144" href="favicon.png?2026-1">
<link rel="apple-touch-icon" sizes="152x152" href="favicon.png?3"> <link rel="apple-touch-icon" sizes="152x152" href="favicon.png?2026-1">
<link rel="apple-touch-icon" sizes="180x180" href="favicon.png?3"> <link rel="apple-touch-icon" sizes="180x180" href="favicon.png?2026-1">
<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?2026-1">
<meta name="theme-color" content="#67EA94"> <meta name="theme-color" content="#6EBEE1">
<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;
@ -67,17 +82,18 @@
.overlay { .overlay {
position: fixed; position: fixed;
top: 0; top: 0;
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);
@ -90,23 +106,42 @@
} }
.top-section { .top-section {
display: flex; display: flex;
flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
gap: 1em; 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: 200px; width: 540px;
height: auto; height: auto;
padding-right: 30px;
} }
.text-content { .text-content {
text-align: left; text-align: center;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.25em;
} }
.text-content h1 { .text-content h1 {
margin: 0; margin: 0;
@ -117,7 +152,9 @@
} }
.sub-header { .sub-header {
font-weight: bold; font-weight: bold;
padding-bottom: 10px; padding-bottom: 4px;
margin: 0;
color: #e0e0e0;
} }
.btn { .btn {
display: flex; display: flex;
@ -167,8 +204,11 @@
} }
.btn-learn, .btn-learn,
.btn-learn:visited { .btn-learn:visited {
background-color: #FFB347; background-color: #6EBEE1;
color: #1F2230; color: #000;
}
.btn-learn img {
filter: brightness(1);
} }
.btn-meshcore img { .btn-meshcore img {
filter: brightness(0) invert(1); filter: brightness(0) invert(1);
@ -258,18 +298,16 @@
} }
.splash-box { .splash-box {
padding: 2em; padding: 2em;
margin: 1em 0;
width: calc(100% - 5em);
} }
.top-section { .top-section {
flex-direction: column; margin: -2em -2em 0 -2em;
padding-bottom: 20px; padding: 2em 2em 50px 2em;
} }
.logo { .logo {
width: 150px; width: 335px;
padding-right: 0; padding-right: 0;
margin-bottom: 1em;
}
.text-content {
text-align: center;
} }
.btn-group { .btn-group {
flex-direction: column; flex-direction: column;
@ -294,8 +332,12 @@
.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: 120px; width: 300px;
} }
.text-content h1 { .text-content h1 {
font-size: 20px; font-size: 20px;
@ -314,32 +356,34 @@
<div class="overlay"></div> <div class="overlay"></div>
<div class="splash-box"> <div class="splash-box">
<div class="top-section"> <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"> <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" class="email-link" rel="nofollow noindex"><img src="email.svg" alt="Email" /></a>
<a href="mailto:noah@ctmesh.org" 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">

BIN
logo.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 440 KiB

After

Width:  |  Height:  |  Size: 458 KiB

BIN
logo_sm.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 93 KiB

After

Width:  |  Height:  |  Size: 77 KiB

58
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,21 +138,28 @@
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: 44px; width: 300px;
height: auto; height: auto;
} }
.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,10 +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">
<span>CT Mesh</span> <img src="logo_sm.png" alt="CT Mesh" />
</a> </a>
</div>
<h1>MeshCore Resources</h1> <h1>MeshCore Resources</h1>
<h2>Web Tools</h2> <h2>Web Tools</h2>

58
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,21 +156,28 @@
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: 44px; width: 300px;
height: auto; height: auto;
} }
.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,10 +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">
<span>CT Mesh</span> <img src="logo_sm.png" alt="CT Mesh" />
</a> </a>
</div>
<h1>Meshtastic Resources</h1> <h1>Meshtastic Resources</h1>
<h2>Community-run Web Tools</h2> <h2>Community-run Web Tools</h2>

58
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,21 +141,28 @@
.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: 44px; width: 300px;
height: auto; height: auto;
} }
.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,10 +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">
<span>CT Mesh</span> <img src="logo_sm.png" alt="CT Mesh" />
</a> </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>