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

redesign header section, background changes, other styling fixes/changes
All checks were successful
Deploy Pages / deploy (push) Successful in 26s
Details

Browse Source
This commit is contained in:
Noah
2026-03-08 18:46:41 -04:00
parent 4a25f00f1b
commit 55a84a03ea
4 changed files with 213 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
meshtastic-resources.html
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,12 +156,19 @@
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: 300px;
@ -154,7 +177,7 @@
.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,9 +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" />
</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>