clan/clan-homepage
9
0
Fork 4
Code Issues 1 Pull Requests 3 Actions Packages Projects Releases Wiki Activity

cherry picked changes from Valentin Gagarin part 2
All checks were successful
buildbot/nix-eval Build done.
Details
check / test (push) Successful in 14s
Details
deploy / test (push) Successful in 15s
Details

Browse Source
This commit is contained in:
Luis Hebendanz 2024-07-08 21:07:46 +02:00
parent 46b4c704ac
commit d72a88cd3a
3 changed files with 100 additions and 104 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
website/assets/css/main.css
View File

@ -13,24 +13,18 @@
.top-header {
background-color: #2C2C2C;
padding: 1em 0;
width: 100%;
position: fixed;
top: 0;
position: sticky;
z-index: 999;
}
.header-nav-links {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
left: 0;
z-index: 1000;
}
.header-nav-links a {
color: #FFFFFF;
text-decoration: none;
white-space: nowrap;
padding: 0.5em;
margin: 0 1em;
font-size: 1.2em;
}
@ -38,6 +32,7 @@
text-decoration: underline;
}
@media screen and (max-width: 480px) {
.header-nav-links a {
font-size: 1.1em;
@ -155,9 +150,9 @@ section {
body {
line-height: 1;
display: flex;
flex-direction: column;
min-height: 100vh;
display: flex;
flex-direction: column;
margin-top: 3.5em;
}
ol,
@ -2959,7 +2954,7 @@ input[type="button"].small,
}
#header h1 {
font-size: 2vw;
font-size: 2em;
margin: 0;
}
@ -3157,16 +3152,16 @@ input[type="button"].small,
@media screen and (max-width: 1280px) {
#header {
padding-bottom: 15vw;
padding-bottom: 6em;
}
#header h1 {
font-size: 4vw;
font-size: 1.4em;
}
#clan-logo {
width: 14em;
height: 14em;
width: 11em;
height: 11em;
}
/* Basic */
@ -3303,15 +3298,15 @@ input[type="button"].small,
@media screen and (max-width: 736px) {
#clan-logo {
width: 12em;
height: 12em;
width: 11em;
height: 11em;
}
/* Basic */
h2 {
font-size: 1em;
font-size: 1.1em;
}
h3 {

143
website/index.html
View File

@ -26,89 +26,96 @@
<header class="top-header">
<div class="container">
<nav class="header-nav-links">
<a href="https://docs.clan.lol/">Get started</a>
<a href="https://docs.clan.lol/blog/">Blog</a>
<a href="https://docs.clan.lol/">Getting Started</a>
<a href="https://matrix.to/#/#clan:lassul.us">Chat</a>
<a href="https://git.clan.lol/clan/clan-core">Code</a>
</nav>
</div>
</header>
<!-- Header -->
<div id="header">
<img src="static/logo/clan-white.png" alt="Clan logo" id="clan-logo">
<h1>Build your own
<span data-value="DARKNET" class="hacker-effect">DARKNET</span>
</h1>
</div>
<!-- Header -->
<div id="header">
<img src="static/logo/clan-white.png" alt="Clan White" id="clan-logo">
<h1>Build your own
<span data-value="DARKNET" class="hacker-effect">TDERKAN</span>
</h1>
</div>
<!-- Main -->
<div id="main">
<!-- Main -->
<div id="main">
<header class="major container medium">
<h2>Peer-to-Peer self-hosting
<br /> made easy for developers
</h2>
</header>
<header class="major container medium">
<h2>Peer-to-Peer self-hosting
<br /> made easy for developers
</h2>
</header>
<div class="box alt container">
<section class="feature left">
<a href="https://docs.clan.lol/" class="image"><img src="images/open_source.webp" alt="" /></a>
<div class="content">
<h3>Community Owned</h3>
<p>
Clan is a proudly open-source project, inviting everyone to contribute and collaborate.
No fear of lock-in or vendor restrictions. Your data, your rules.
</p>
</div>
</section>
<section class="feature right">
<a href="https://docs.clan.lol/" class="image"><img src="images/fleet_management.webp" alt="" /></a>
<div class="content">
<h3>Machine Management</h3>
<p>
Easily manage fleets of interconnected computers without a central server.
Deploy your computers everywhere, with the same configuration and data.
</p>
<div class="box alt container">
<section class="feature left">
<a href="https://docs.clan.lol/" class="image">
<img src="images/fleet_management.webp" alt="" />
<p>Your computers, your rules</p>
</a>
<div class="content">
<h3>Declarative Fleet Management</h3>
<!-- customization and control -->
<p>
Customize and control your entire network from a single Git repository.
Recreate any setup with the same configuration and data on a whim.
</p>
</div>
</section>
<section class="feature right">
<a href="https://docs.clan.lol/" class="image">
<img src="images/mesh_vpn.webp" alt="" />
<p>Become independent of a centralized internet</p>
</a>
<div class="content">
<h3>Private Internet</h3>
<!-- privacy and independence -->
<p>
Connect all your devices in a peer-to-peer virtual private network.
Run self-hosted services and provide access to your family, friends, or coworkers.
</p>
</div>
</section>
<section class="feature left">
<a href="https://docs.clan.lol/" class="image"><img src="images/mesh_vpn.webp" alt="" /></a>
<div class="content">
<h3>Private Internet</h3>
<p>
Connect all your devices into a secure, private network with our peer-to-peer Mesh VPN.
Share services with your friends & coworkers, without the need to expose them to the public internet.
</p>
</div>
</section>
</section>
<section class="feature left">
<a href="https://docs.clan.lol/" class="image">
<img src="images/open_source.webp" alt="" />
<p>Own the code you run</p>
</a>
<div class="content">
<h3>Community Owned</h3>
<!-- ownership and sovereignty -->
<p>
No vendor lock-in or artificial restrictions.
Proudly open-source for everyone to learn, contribute, and collaborate.
</p>
</div>
</section>
</div>
<footer class="major container medium">
<p class="actions special"><a href="what-is-clan.html" class="button">What is Clan?</a></p>
<p>Continue reading to learn more.</p>
</footer>
</div>
<!-- Footer -->
<div id="footer">
<div class="container medium">
<footer class="major container medium">
<h3>What is Clan?</h3>
<p>Discover our features by reading further</p>
<ul class="actions special">
<li><a href="wclan.html" class="button">Learn More</a></li>
</ul>
</footer>
</div>
<!-- Footer -->
<div id="footer">
<div class="container medium">
<ul class="copyright">
<li>&copy; Clan. All rights reserved.</li>
<li>Design: <a href="http://html5up.net">HTML5 UP</a></li>
</ul>
<ul class="copyright">
<li>&copy; Clan. All rights reserved.</li>
<li>Design: <a href="http://html5up.net">HTML5 UP</a></li>
</ul>
</div>
</div>
</div>
<!-- Scripts -->
<script src="assets/js/main.js"></script>
<!-- Scripts -->
<script src="assets/js/main.js"></script>
</body>
</body>
</html>
</html>

22
website/wclan.html → website/what-is-clan.html
View File

@ -2,14 +2,15 @@
<html>
<head>
<title>What is Clan? A feature overview</title>
<title>What is Clan? Feature overview</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<link rel="stylesheet" href="assets/css/main.css" />
<link rel="icon" type="image/png" href="static/dark-favicon/128x128.png">
<meta property="og:title" content="What is Clan?" />
<meta property="og:description" content="What is Clan? A guide through its features" />
<meta property="og:title" content="Clan - Build your own Darknet" />
<meta property="og:description" content="Peer-to-Peer self-hosting made easy for developers. Deploy your computers everywhere, with the same configuration and data." />
<meta property="og:image" content="https://clan.lol/static/dark-favicon/128x128.png" />
<meta property="og:url" content="https://docs.clan.lol" />
<meta property="og:type" content="website" />
@ -40,17 +41,10 @@
padding-bottom: 1em;
}
.highlight {
#highlight {
color: #5b5b5b;
padding: 1em;
border-radius: 5px;
font-size: 1.2em;
font-size: 1.05em;
font-weight: bold;
text-align: center;
margin: 2em 0;
width: 100%;
box-sizing: border-box;
}
</style>
</head>
@ -59,8 +53,8 @@
<header class="top-header">
<div class="container">
<nav class="header-nav-links">
<a href="https://docs.clan.lol/">Get started</a>
<a href="https://docs.clan.lol/blog/">Blog</a>
<a href="https://docs.clan.lol/">Getting Started</a>
<a href="https://matrix.to/#/#clan:lassul.us">Chat</a>
<a href="https://git.clan.lol/clan/clan-core">Code</a>
</nav>
@ -71,7 +65,7 @@
<div id="main">
<header class="major container medium">
<h2>What is Clan?</h2>
<p class="highlight">Clan is a setup tool that centralizes machine configurations for peer-to-peer self-hosted networks.</p>
<p id="highlight">Clan is a setup tool that centralizes machine configurations for peer-to-peer self-hosted networks.</p>
</header>
<div class="box alt container content-section">