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,158 +1,189 @@
<!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="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>
<main>
<header>
<img src="static/logo.svg" />
<div class="header-links horizontal flex-end">
<a href="#about">ABOUT</a>
<a href="#partners">PARTNERS</a>
</div>
</header>
<div class="vertical align-center">
<div class="splash space-between">
<div class="splash-text-content">
<h1 >
A DIY framework for community-owned 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.
</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>
<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>
<main>
<header>
<img src="static/logo.svg" />
<div class="header-links horizontal flex-end">
<a href="#about">ABOUT</a>
<a href="#partners">PARTNERS</a>
</div>
</div>
</header>
<div class="splash-image-content">
<div class="position-absolute">
<img
alt="technology food pyramid showing serverscoop at the base, with operating systems and applications on top"
src="static/pyramid.png"
class="pyramid-image"
/>
</div>
<div class="position-absolute">
<img
alt="A cute looking person squatting like a hipster"
src="static/squatting-person.svg"
class="squatting-person"
/>
</div>
</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>
</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>
<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.
</p>
<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" />
<h3>
libre software platform
</h3>
<div class="vertical align-center">
<div class="splash space-between">
<div class="splash-text-content">
<h1>
A recipe for self-managed co-operative computing.
</h1>
<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
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
>
</div>
</div>
<div class="box">
<img alt="handshake" src="static/handshake.svg" class="float-right" />
<h3>
co-operative strategy
</h3>
<div class="splash-image-content">
<div>
<img
alt="technology food pyramid showing serverscoop at the base, with operating systems and applications on top"
src="static/pyramid.svg"
class="pyramid-image"
/>
</div>
<div>
<img
alt="A cute looking person squatting like a hipster"
src="static/squatting-person.svg"
class="squatting-person"
/>
</div>
</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
>
</div>
</div>
<img src="static/background-tilt-top.svg" class="background-tilt-top" />
<div class="main-content">
<div class="vertical center">
<h1 id="about">
Reclaiming digital infrastructure
</h1>
<p class="main-content-paragraph">
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="box">
<img
alt="dove carrying olive branch"
src="static/dove.svg"
class="float-right"
/>
<h3>
Libre software platform
</h3>
<p>
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"
/>
<h3>
Co-operative algorithm
</h3>
<p>
Co-operative ownership models and toolkits for software,
hardware and social protocols for creating and operating a
server hosting provider
</p>
</div>
</div>
<p>
More than just a service provider, more than just a business.<br/>
We aim to nurture a co-operative community of small hosters
<br />
<!-- TODO: Fig. 2: The two parts of Serverscoop. Part platform, part community. -->
</p>
</div>
</div>
<p>
<br/> <!-- TODO: Fig. 2: The two parts of Serverscoop. Part platform, part community. -->
</p>
<div class="horizontal expand justify-center">
<div class="position-absolute">
<img
alt="two nerds looking smug, confident, and happy"
src="static/arms-crossed-people.svg"
class="arms-crossed-people-image"
/>
</div>
</div>
<div class="main-content-footer center">
<img
src="static/background-tilt-bottom.png"
class="background-tilt-bottom"
/>
<h1 id="partners">A joint mission</h1>
<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" />
</a>
<a href="https://cyberia.club">
<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" />
</a>
<a href="https://www.webarchitects.coop/">
<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>
<a href="https://mediablazehosts.coop/">
<img
alt="mediablazehosts.coop"
src="static/logo-mediablaze.svg"
/>
</a>
</div>
</div>
</div>
</div>
<div class="horizontal expand justify-center ">
<div class="position-absolute">
<img
alt="two nerds looking smug, confident, and happy"
src="static/arms-crossed-people.svg"
class="arms-crossed-people-image"
/>
</div>
</div>
<div class="main-content-footer center">
<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>
<div class="horizontal wrap justify-center align-center logos">
<a href="https://autonomic.zone">
<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"/>
</a>
<a href="http://mc3.coop/">
<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"/>
</a>
<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"/>
</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>
</html>
<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>
</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);
@ -36,15 +34,18 @@ a {
p {
font-weight: bold;
color: var(--off-black);
line-height: 1.7em;
line-height: 1.7em;
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,9 +115,8 @@ header img {
}
.splash h1 {
margin-top: 1rem;
line-height: 1.6em;
margin-top: 1rem;
line-height: 1.6em;
}
.splash-text-content {
@ -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 {
@ -200,15 +200,18 @@ header img {
max-width: initial;
}
.splash-image-content {
height: 300px;
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;
}
}