Skip to content

Commit 9c0c920

Browse files
GitGab19GitGab19
committed
Redesign landing page with Edge Mining branding
1 parent 4d83cc1 commit 9c0c920

6 files changed

Lines changed: 184 additions & 48 deletions

File tree

‎background-light.png‎

2.55 MB
Loading

‎favicon.jpg‎

2 KB
Loading

‎icon.png‎

2.78 KB
Loading

‎index.html‎

Lines changed: 35 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -2,24 +2,44 @@
22
<html lang="en">
33
<head>
44
<meta charset="UTF-8" />
5-
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
6-
<title>Edge Mining – Bitcoin & Energy</title>
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<meta name="description" content="Edge Mining is open-source Bitcoin mining automation for renewable energy at the edge." />
7+
<meta name="theme-color" content="#151515" />
8+
<meta property="og:title" content="Edge Mining" />
9+
<meta property="og:description" content="Open-source Bitcoin mining automation for renewable energy at the edge." />
10+
<meta property="og:type" content="website" />
11+
<meta property="og:url" content="https://edgemining.energy" />
12+
<meta property="og:image" content="https://edgemining.energy/background-light.png" />
13+
<meta name="twitter:card" content="summary_large_image" />
14+
<meta name="twitter:title" content="Edge Mining" />
15+
<meta name="twitter:description" content="Open-source Bitcoin mining automation for renewable energy at the edge." />
16+
<meta name="twitter:image" content="https://edgemining.energy/background-light.png" />
17+
<title>Edge Mining</title>
18+
<link rel="preconnect" href="https://fonts.googleapis.com" />
19+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
20+
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap" rel="stylesheet" />
21+
<link rel="icon" href="icon.png" type="image/png" />
722
<link rel="stylesheet" href="style.css" />
823
</head>
924
<body>
10-
<div class="logo">
11-
<img src="logo.svg" width="44" height="44" alt="Edge Mining Logo" />
12-
</div>
25+
<main class="site-shell" aria-label="Edge Mining">
26+
<img class="brand-logo" src="logo.svg" width="223" height="90" alt="Edge Mining" />
1327

14-
<div class="description">
15-
<strong>Edge Mining</strong> is a FOSS project that integrates Bitcoin mining with renewable energy systems.<br/><br/>
16-
Designed for small and medium-sized power plants, it helps turn excess energy into economic value. Mining is automated based on energy availability, and the heat generated by the miners can be reused for space heating—maximizing overall energy efficiency.
17-
</div>
28+
<p class="tagline">Open-source Bitcoin mining automation for renewable energy at the edge.</p>
1829

19-
<div class="links">
20-
Want to get in touch and contribute? <a href="#" target="_blank">Join us on Discord</a><br/>
21-
Want to test edge-mining? <a href="#" target="_blank">Fill out the form</a><br/>
22-
View the code on <a href="https://github.com/edge-mining" target="_blank">GitHub</a>
23-
</div>
30+
<nav class="social-links" aria-label="Social links">
31+
<a class="social-link" href="https://github.com/edge-mining" target="_blank" rel="noreferrer" aria-label="GitHub" title="GitHub">
32+
<svg aria-hidden="true" viewBox="0 0 24 24">
33+
<path d="M12 2C6.48 2 2 6.58 2 12.24c0 4.52 2.86 8.35 6.83 9.71.5.09.68-.22.68-.49l-.01-1.9c-2.78.62-3.37-1.22-3.37-1.22-.45-1.18-1.11-1.5-1.11-1.5-.91-.64.07-.63.07-.63 1 .07 1.53 1.06 1.53 1.06.89 1.56 2.34 1.11 2.91.85.09-.66.35-1.11.63-1.37-2.22-.26-4.56-1.14-4.56-5.06 0-1.12.39-2.03 1.03-2.74-.1-.26-.45-1.3.1-2.71 0 0 .84-.28 2.75 1.05A9.36 9.36 0 0 1 12 6.95c.85 0 1.7.12 2.5.35 1.91-1.33 2.75-1.05 2.75-1.05.55 1.41.2 2.45.1 2.71.64.71 1.03 1.62 1.03 2.74 0 3.93-2.34 4.8-4.57 5.05.36.32.68.94.68 1.9l-.01 2.81c0 .27.18.58.69.48A10.18 10.18 0 0 0 22 12.24C22 6.58 17.52 2 12 2Z" />
34+
</svg>
35+
</a>
36+
37+
<a class="social-link" href="https://discord.gg/PbMzngzeW" target="_blank" rel="noreferrer" aria-label="Discord" title="Discord">
38+
<svg aria-hidden="true" viewBox="0 0 24 24">
39+
<path d="M18.94 5.34A16.5 16.5 0 0 0 14.86 4l-.2.4c1.51.37 2.21.9 2.21.9a13.45 13.45 0 0 0-9.77 0s.72-.56 2.34-.93L9.3 4a16.63 16.63 0 0 0-4.24 1.34C2.38 9.42 1.65 13.4 2 17.32A16.65 16.65 0 0 0 7.05 20l.62-.86a10.86 10.86 0 0 1-1.64-.82l.39-.31a11.92 11.92 0 0 0 11.16 0l.4.31c-.52.31-1.06.58-1.64.82l.62.86A16.55 16.55 0 0 0 22 17.32c.42-4.55-.7-8.5-3.06-11.98ZM8.74 14.9c-.98 0-1.78-.92-1.78-2.04s.78-2.04 1.78-2.04c.99 0 1.8.92 1.78 2.04 0 1.12-.79 2.04-1.78 2.04Zm6.52 0c-.98 0-1.78-.92-1.78-2.04s.78-2.04 1.78-2.04c.99 0 1.8.92 1.78 2.04 0 1.12-.79 2.04-1.78 2.04Z" />
40+
</svg>
41+
</a>
42+
</nav>
43+
</main>
2444
</body>
25-
</html>
45+
</html>

‎logo.svg‎

Lines changed: 2 additions & 8 deletions
Loading

‎style.css‎

Lines changed: 147 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,43 +1,165 @@
1+
:root {
2+
color-scheme: dark;
3+
--color-base-100: oklch(0.1543 0 0);
4+
--color-base-200: oklch(0.1957 0 0);
5+
--color-base-300: oklch(0.3012 0 0);
6+
--color-base-content: oklch(0.931 0 0);
7+
--color-primary: #beffa3;
8+
--color-primary-content: oklch(28% 0.066 53.813);
9+
--color-secondary: oklch(76% 0.177 163.223);
10+
--color-secondary-content: oklch(26% 0.051 172.552);
11+
--color-accent: oklch(71% 0.203 305.504);
12+
--color-accent-content: oklch(29% 0.149 302.717);
13+
--color-neutral: oklch(27% 0.041 260.031);
14+
--color-neutral-content: oklch(98% 0.003 247.858);
15+
--color-info: oklch(58% 0.158 241.966);
16+
--color-info-content: oklch(97% 0.013 236.62);
17+
--color-success: oklch(64% 0.2 131.684);
18+
--color-success-content: oklch(98% 0.031 120.757);
19+
--color-warning: #c46a36;
20+
--color-warning-content: oklch(98% 0.016 73.684);
21+
--color-error: oklch(59% 0.249 0.584);
22+
--color-error-content: oklch(97% 0.014 343.198);
23+
}
24+
25+
* {
26+
box-sizing: border-box;
27+
}
28+
29+
html {
30+
min-height: 100%;
31+
background-color: var(--color-base-100);
32+
}
33+
134
body {
35+
min-height: 100vh;
236
margin: 0;
3-
padding: 0;
4-
background-color: #1f1f1f;
5-
color: white;
6-
font-family: system-ui, sans-serif;
7-
display: flex;
8-
flex-direction: column;
9-
align-items: center;
10-
justify-content: center;
37+
overflow-x: hidden;
38+
color: var(--color-base-content);
39+
font-family: "Plus Jakarta Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
40+
background:
41+
linear-gradient(180deg, rgb(21 21 21 / 0.18), rgb(21 21 21 / 0.7)),
42+
url("background-light.png");
43+
background-color: var(--color-base-100);
44+
background-position: center;
45+
background-repeat: no-repeat;
46+
background-size: cover;
47+
}
48+
49+
body::before,
50+
body::after {
51+
position: fixed;
52+
inset: 0;
53+
z-index: 0;
54+
pointer-events: none;
55+
content: "";
56+
}
57+
58+
body::before {
59+
background:
60+
radial-gradient(circle at 30% 25%, rgb(190 255 163 / 0.24), transparent 28rem),
61+
radial-gradient(circle at 71% 42%, rgb(196 106 54 / 0.24), transparent 26rem),
62+
radial-gradient(circle at 73% 80%, rgb(0 50 78 / 0.58), transparent 30rem);
63+
mix-blend-mode: screen;
64+
}
65+
66+
body::after {
67+
background: rgb(0 0 0 / 0.14);
68+
}
69+
70+
.site-shell {
71+
position: relative;
72+
z-index: 1;
73+
display: grid;
1174
min-height: 100vh;
75+
place-items: center;
76+
align-content: center;
77+
gap: clamp(1.35rem, 3vw, 2rem);
78+
padding: clamp(1.5rem, 5vw, 4rem);
1279
text-align: center;
1380
}
1481

15-
.logo {
16-
margin-bottom: 2rem;
82+
.brand-logo {
83+
width: clamp(13.5rem, 28vw, 21rem);
84+
height: auto;
85+
filter:
86+
drop-shadow(0 0 1.4rem rgb(190 255 163 / 0.1))
87+
drop-shadow(0 1.1rem 2.6rem rgb(0 0 0 / 0.4));
1788
}
1889

19-
.description {
20-
max-width: 600px;
21-
line-height: 1.6;
22-
margin-bottom: 2rem;
90+
.tagline {
91+
max-width: min(100%, 58rem);
92+
margin: 0;
93+
color: rgb(255 255 255 / 0.88);
94+
font-size: clamp(1rem, 1.55vw, 1.35rem);
95+
font-weight: 500;
96+
line-height: 1.55;
97+
white-space: nowrap;
98+
text-shadow: 0 0.7rem 2.2rem rgb(0 0 0 / 0.55);
2399
}
24100

25-
.links {
26-
font-style: italic;
27-
font-size: 0.95rem;
101+
.social-links {
102+
display: flex;
103+
align-items: center;
104+
justify-content: center;
105+
gap: 0.8rem;
28106
}
29107

30-
.links a {
31-
color: #00bfff;
108+
.social-link {
109+
display: inline-grid;
110+
width: 3.25rem;
111+
height: 3.25rem;
112+
place-items: center;
113+
border: 1px solid rgb(255 255 255 / 0.24);
114+
border-radius: 0.9rem;
115+
color: rgb(255 255 255 / 0.9);
116+
background: rgb(21 21 21 / 0.2);
32117
text-decoration: none;
118+
transition:
119+
border-color 160ms ease,
120+
color 160ms ease,
121+
background-color 160ms ease,
122+
transform 160ms ease,
123+
box-shadow 160ms ease;
124+
}
125+
126+
.social-link svg {
127+
width: 1.45rem;
128+
height: 1.45rem;
129+
fill: currentColor;
130+
}
131+
132+
.social-link:hover,
133+
.social-link:focus-visible {
134+
border-color: var(--color-primary);
135+
color: var(--color-primary);
136+
background: rgb(190 255 163 / 0.08);
137+
box-shadow: 0 0 1.6rem rgb(190 255 163 / 0.16);
138+
transform: translateY(-2px);
33139
}
34140

35-
.links a:hover {
36-
text-decoration: underline;
141+
.social-link:focus-visible {
142+
outline: 2px solid var(--color-warning);
143+
outline-offset: 4px;
37144
}
38145

39-
@media (max-width: 600px) {
40-
.description {
41-
padding: 0 1rem;
146+
@media (max-width: 560px) {
147+
body {
148+
background-position: 42% center;
149+
}
150+
151+
.site-shell {
152+
gap: 1.25rem;
153+
}
154+
155+
.tagline {
156+
max-width: 22rem;
157+
white-space: normal;
158+
text-wrap: balance;
159+
}
160+
161+
.social-link {
162+
width: 3rem;
163+
height: 3rem;
42164
}
43-
}
165+
}

0 commit comments

Comments
 (0)