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:
@ -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);
|
||||
@ -122,12 +138,19 @@
|
||||
font-size: 15px;
|
||||
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 {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5em;
|
||||
text-decoration: none;
|
||||
margin-bottom: 1.5em;
|
||||
}
|
||||
.page-header img {
|
||||
width: 300px;
|
||||
@ -136,7 +159,7 @@
|
||||
.page-header span {
|
||||
font-weight: bold;
|
||||
font-size: 19px;
|
||||
color: #2C2D3C;
|
||||
color: #e0e0e0;
|
||||
}
|
||||
.back-link,
|
||||
.back-link:visited {
|
||||
@ -193,11 +216,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;
|
||||
}
|
||||
@ -210,9 +241,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>MeshCore Resources</h1>
|
||||
|
||||
<h2>Web Tools</h2>
|
||||
|
||||
Reference in New Issue
Block a user