Revert "revert files to commit a917bd5 so I can see what happened"

This reverts commit ed3374d098.
This commit is contained in:
forest 2021-08-01 12:07:05 -05:00
parent ed3374d098
commit 8a65aa2de0
7 changed files with 360 additions and 194 deletions

View File

@ -1,21 +1,19 @@
<!DOCTYPE HTML>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>servers.coop</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Servers.coop</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="shortcut icon" type="image/png" href="static/favicon.png" />
<link rel="shortcut icon" type="image/png" href="static/favicon.ico" />
<!-- <link rel="apple-touch-icon" href="/static/icon.png" /> -->
<link href="static/vendor/normalize.css" rel="stylesheet">
<link href="static/styleguide.css" rel="stylesheet">
<link href="static/serverscoop.css" rel="stylesheet">
</head>
<body>
<link href="static/vendor/normalize.css" rel="stylesheet" />
<link href="static/styleguide.css" rel="stylesheet" />
<link href="static/serverscoop.css" rel="stylesheet" />
</head>
<body>
<main>
<header>
<img src="static/logo.svg" />
<div class="header-links horizontal flex-end">
@ -26,31 +24,34 @@
<div class="vertical align-center">
<div class="splash space-between">
<div class="splash-text-content">
<h1 >
A DIY framework for community-owned computing
<h1>
A recipe for self-managed co-operative computing.
</h1>
<p>
We believe in a world where our technology services are run
by people we know, instead of remote, profit-hungry advertising companies.
Servers.coop is an algorithm for co-operation: a technical,
governance, and cost-sharing stack which radically reduces the
cost and complexity of setting up a server hosting provider.
</p>
<div class="button-links horizontal">
<a href="https://yolo.servers.coop" class="button-link primary">TRY IT OUT</a>
<a href="mailto:hello@servers.coop" class="button-link">GET IN TOUCH</a>
<a href="https://yolo.servers.coop" class="button-link primary"
>TRY IT OUT</a
>
<a href="mailto:hello@servers.coop" class="button-link"
>GET IN TOUCH</a
>
</div>
</div>
<div class="splash-image-content">
<div class="position-absolute">
<div>
<img
alt="technology food pyramid showing serverscoop at the base, with operating systems and applications on top"
src="static/pyramid.png"
src="static/pyramid.svg"
class="pyramid-image"
/>
</div>
<div class="position-absolute">
<div>
<img
alt="A cute looking person squatting like a hipster"
src="static/squatting-person.svg"
@ -60,49 +61,70 @@
</div>
<div class="button-links horizontal expand justify-center">
<a href="https://yolo.servers.coop" class="button-link primary">TRY IT OUT</a>
<a href="mailto:hello@servers.coop" class="button-link">GET IN TOUCH</a>
<a href="https://yolo.servers.coop" class="button-link primary"
>TRY IT OUT</a
>
<a href="mailto:hello@servers.coop" class="button-link"
>GET IN TOUCH</a
>
</div>
</div>
<img src="static/background-tilt-top.svg" class="background-tilt-top" />
<div class="main-content">
<div class="vertical center">
<h1 id="about">Reclaim Hosting</h1>
<h1 id="about">
Reclaiming digital infrastructure
</h1>
<p class="main-content-paragraph">
We've set out to reclaim the means of hosting,
by making it easier for small organisations
to manage virtual machines on their own hardware.
Our goal is to support an emerging ecosystem of grassroots,
decentralised server hosting providers by stewarding a technical
and social toolkit designed for free software communities
worldwide.
</p>
<div class="boxes-container horizontal expand space-between align-stretch">
<div
class="boxes-container horizontal expand space-between align-stretch"
>
<div class="box">
<img alt="dove carrying olive branch" src="static/dove.svg" class="float-right" />
<img
alt="dove carrying olive branch"
src="static/dove.svg"
class="float-right"
/>
<h3>
libre software platform
Libre software platform
</h3>
<p>
Open source server hosting service utilizing <a href="https://git.autonomic.zone/3wordchant/capsul-flask">Capsul</a>,
a brand new Affero GPL licensed Virtual Machine as a Service platform
Free and libre server hosting service utilizing
<a href="https://git.autonomic.zone/3wordchant/capsul-flask"
>Capsul</a
>, a brand new Affero GPL licensed Virtual Machine as a
Service platform
</p>
</div>
<div class="box">
<img alt="handshake" src="static/handshake.svg" class="float-right" />
<img
alt="handshake"
src="static/handshake.svg"
class="float-right"
/>
<h3>
co-operative strategy
Co-operative algorithm
</h3>
<p>
More than just a service provider, more than just a business.<br/>
We aim to nurture a co-operative community of small hosters
Co-operative ownership models and toolkits for software,
hardware and social protocols for creating and operating a
server hosting provider
</p>
</div>
</div>
<p>
<br/> <!-- TODO: Fig. 2: The two parts of Serverscoop. Part platform, part community. -->
<br />
<!-- TODO: Fig. 2: The two parts of Serverscoop. Part platform, part community. -->
</p>
</div>
</div>
<div class="horizontal expand justify-center ">
<div class="horizontal expand justify-center">
<div class="position-absolute">
<img
alt="two nerds looking smug, confident, and happy"
@ -112,47 +134,56 @@
</div>
</div>
<div class="main-content-footer center">
<img src="static/background-tilt-bottom.png" class="background-tilt-bottom" />
<img
src="static/background-tilt-bottom.png"
class="background-tilt-bottom"
/>
<h1 id="partners">A joint mission</h1>
<p>Serverscoop is the collective effort of new and established entities in the tech co-operative space.</p>
<p>
Servers.coop is the collective effort of new and established
entities in the tech co-operative space.
</p>
<div class="horizontal wrap justify-center align-center logos">
<a href="https://autonomic.zone">
<img alt="autonomic" src="static/logo-autonomic.svg"/>
<img alt="autonomic" src="static/logo-autonomic.svg" />
</a>
<a href="https://cyberia.club">
<img alt="Cyberia Computer Club" width="280px" src="static/logo-cyberia.png"/>
<img
alt="Cyberia Computer Club"
width="280px"
src="static/logo-cyberia.png"
/>
</a>
<a href="http://mc3.coop/">
<img alt="MC3" src="static/logo-mc3.png"/>
<img alt="MC3" src="static/logo-mc3.png" />
</a>
<a href="https://www.webarchitects.coop/">
<img alt="webarchitects" width="120px" src="static/logo-wa.svg"/>
<img alt="webarchitects" width="120px" src="static/logo-wa.svg" />
</a>
<a href="https://cni.coop/" >
<img alt="Co-operative Network Infrastructure" class="darker-background" src="static/logo-cni.svg"/>
<a href="https://cni.coop/">
<img
alt="Co-operative Network Infrastructure"
class="darker-background"
src="static/logo-cni.svg"
/>
</a>
<a href="https://mediablazehosts.coop/">
<img alt="mediablazehosts.coop" src="static/logo-mediablaze.svg"/>
<img
alt="mediablazehosts.coop"
src="static/logo-mediablaze.svg"
/>
</a>
</div>
</div>
</div>
<footer class="horizontal justify-center">
<a href="https://creativecommons.org/licenses/by-sa/4.0/">CC BY-SA</a>
<a href="git.coopcloud.tech/servers.coop/servers.coop">(source code)</a>
</footer>
</main>
</body>
</body>
</html>

BIN
static/favicon.ico Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.4 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 19 KiB

File diff suppressed because one or more lines are too long

Before

Width:  |  Height:  |  Size: 14 KiB

After

Width:  |  Height:  |  Size: 14 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 46 KiB

127
static/pyramid.svg Normal file

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 93 KiB

View File

@ -1,4 +1,3 @@
body {
display: flex;
flex-direction: row;
@ -10,7 +9,7 @@ body {
}
main {
padding: 2rem;
padding: 1.5rem;
width: 1280px;
display: flex;
flex-direction: column;
@ -27,7 +26,6 @@ main {
}
}
a {
text-decoration: initial;
color: var(--accent);
@ -40,11 +38,14 @@ p {
font-size: var(--font-size-m);
}
h1,h2,h3 {
h1,
h2,
h3 {
color: var(--accent);
font-weight: bold;
}
h1,h2 {
h1,
h2 {
font-size: var(--font-size-xl);
}
h3 {
@ -53,13 +54,12 @@ h3 {
header {
margin-top: 1.5vh;
margin-right: 220px;
margin-right: 100px;
display: flex;
flex-direction: row;
justify-content: space-between;
}
header a,
footer a {
margin: 0.6rem;
@ -70,15 +70,13 @@ footer a {
}
header a {
margin: 1.8rem;
margin: 1.2rem;
}
header img {
width: 316px;
}
@media screen and (max-width: 1280px) {
header {
margin-top: 0.4rem;
@ -100,7 +98,7 @@ header img {
header .header-links {
justify-content: flex-start;
}
header .header-links a:first-of-type{
header .header-links a:first-of-type {
margin-left: 0;
}
}
@ -109,7 +107,7 @@ header img {
display: flex;
flex-direction: row;
width: 100%;
margin-top: 2rem;
margin-top: 0.5rem;
}
.splash p {
@ -117,7 +115,6 @@ header img {
}
.splash h1 {
margin-top: 1rem;
line-height: 1.6em;
}
@ -134,12 +131,14 @@ header img {
}
.pyramid-image {
position: relative;
position: absolute;
top: 180px;
left: 800px;
}
.squatting-person {
position: relative;
top: 298px;
top: 360px;
right: 532px;
}
.splash > .button-links {
@ -183,6 +182,7 @@ header img {
.splash > .button-links {
margin: 40px;
margin-bottom: 80px;
margin-top: 100px;
display: flex;
}
.pyramid-image {
@ -203,12 +203,15 @@ header img {
height: 300px;
}
.pyramid-image {
width: 360px;
position: absolute;
width: 420px;
top: 460px;
left: 100px;
}
.squatting-person {
top: 198px;
right: 292px;
width: 80px;
top: 240px;
right: 320px;
width: 100px;
}
.splash > .button-links {
margin-left: 0;
@ -217,9 +220,6 @@ header img {
}
}
.button-link {
font-family: var(--font-family-mono);
padding: 15px 22px;
@ -234,28 +234,28 @@ header img {
color: var(--white);
}
.background-tilt-top, .background-tilt-bottom {
.background-tilt-top,
.background-tilt-bottom {
margin: 0;
width: var(--width-desktop);
}
.background-tilt-top {
margin-top: -4rem;
margin-top: -1rem;
}
@media screen and (max-width: 1280px) {
.background-tilt-top, .background-tilt-bottom {
.background-tilt-top,
.background-tilt-bottom {
width: var(--width-tablet);
}
}
@media screen and (max-width: 768px) {
.background-tilt-top, .background-tilt-bottom {
.background-tilt-top,
.background-tilt-bottom {
width: 100%;
}
}
.main-content {
width: 100%;
margin: 0;
@ -276,7 +276,9 @@ header img {
text-align: left;
}
.box h1,.box h2,.box h3 {
.box h1,
.box h2,
.box h3 {
margin-left: 8px;
}
@ -336,7 +338,6 @@ header img {
}
}
.logos {
max-width: 60%;
margin-bottom: 30px;
@ -414,7 +415,6 @@ footer {
flex-wrap: wrap;
}
.float-right {
float: right;
}