cherry picked changes from Valentin Gagarin part 2
This commit is contained in:
parent
46b4c704ac
commit
d72a88cd3a
@ -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 {
|
||||
|
@ -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>© Clan. All rights reserved.</li>
|
||||
<li>Design: <a href="http://html5up.net">HTML5 UP</a></li>
|
||||
</ul>
|
||||
<ul class="copyright">
|
||||
<li>© 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>
|
||||
|
@ -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">
|
Loading…
Reference in New Issue
Block a user