redesign header section, background changes, other styling fixes/changes
All checks were successful
Deploy Pages / deploy (push) Successful in 26s
All checks were successful
Deploy Pages / deploy (push) Successful in 26s
This commit is contained in:
114
index.html
114
index.html
@ -44,22 +44,37 @@
|
||||
<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;
|
||||
@ -67,17 +82,18 @@
|
||||
.overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
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);
|
||||
@ -95,11 +111,26 @@
|
||||
justify-content: center;
|
||||
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: 540px;
|
||||
@ -123,6 +154,7 @@
|
||||
font-weight: bold;
|
||||
padding-bottom: 4px;
|
||||
margin: 0;
|
||||
color: #e0e0e0;
|
||||
}
|
||||
.btn {
|
||||
display: flex;
|
||||
@ -172,8 +204,14 @@
|
||||
}
|
||||
.btn-learn,
|
||||
.btn-learn:visited {
|
||||
background-color: #FFB347;
|
||||
color: #1F2230;
|
||||
background-color: #6EBEE1;
|
||||
color: #ffffff;
|
||||
}
|
||||
.btn-learn img {
|
||||
filter: brightness(0) invert(1);
|
||||
}
|
||||
.btn-learn::after {
|
||||
filter: invert(1) !important;
|
||||
}
|
||||
.btn-meshcore img {
|
||||
filter: brightness(0) invert(1);
|
||||
@ -263,9 +301,12 @@
|
||||
}
|
||||
.splash-box {
|
||||
padding: 2em;
|
||||
margin: 1em 0;
|
||||
width: calc(100% - 5em);
|
||||
}
|
||||
.top-section {
|
||||
padding-bottom: 20px;
|
||||
margin: -2em -2em 0 -2em;
|
||||
padding: 2em 2em 50px 2em;
|
||||
}
|
||||
.logo {
|
||||
width: 335px;
|
||||
@ -294,6 +335,10 @@
|
||||
.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: 300px;
|
||||
}
|
||||
@ -317,28 +362,31 @@
|
||||
<img src="logo_sm.png" alt="CT Mesh Logo" class="logo" />
|
||||
<div class="text-content">
|
||||
<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 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">MeshCore</p>
|
||||
<div class="btn-group">
|
||||
|
||||
Reference in New Issue
Block a user