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"> <html lang="en">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>servers.coop</title> <title>Servers.coop</title>
<meta name="viewport" content="width=device-width, initial-scale=1"> <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 rel="apple-touch-icon" href="/static/icon.png" /> -->
<link href="static/vendor/normalize.css" rel="stylesheet"> <link href="static/vendor/normalize.css" rel="stylesheet" />
<link href="static/styleguide.css" rel="stylesheet"> <link href="static/styleguide.css" rel="stylesheet" />
<link href="static/serverscoop.css" rel="stylesheet"> <link href="static/serverscoop.css" rel="stylesheet" />
</head>
</head> <body>
<body> <main>
<main> <header>
<img src="static/logo.svg" />
<header> <div class="header-links horizontal flex-end">
<img src="static/logo.svg" /> <a href="#about">ABOUT</a>
<div class="header-links horizontal flex-end"> <a href="#partners">PARTNERS</a>
<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>
</div> </div>
</div> </header>
<div class="splash-image-content"> <div class="vertical align-center">
<div class="position-absolute"> <div class="splash space-between">
<img <div class="splash-text-content">
alt="technology food pyramid showing serverscoop at the base, with operating systems and applications on top" <h1>
src="static/pyramid.png" A recipe for self-managed co-operative computing.
class="pyramid-image" </h1>
/>
</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>
<p> <p>
Open source server hosting service utilizing <a href="https://git.autonomic.zone/3wordchant/capsul-flask">Capsul</a>, Servers.coop is an algorithm for co-operation: a technical,
a brand new Affero GPL licensed Virtual Machine as a Service platform governance, and cost-sharing stack which radically reduces the
cost and complexity of setting up a server hosting provider.
</p> </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>
<div class="box">
<img alt="handshake" src="static/handshake.svg" class="float-right" /> <div class="splash-image-content">
<h3> <div>
co-operative strategy <img
</h3> 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> <p>
More than just a service provider, more than just a business.<br/> <br />
We aim to nurture a co-operative community of small hosters <!-- TODO: Fig. 2: The two parts of Serverscoop. Part platform, part community. -->
</p> </p>
</div> </div>
</div> </div>
<p> <div class="horizontal expand justify-center">
<br/> <!-- TODO: Fig. 2: The two parts of Serverscoop. Part platform, part community. --> <div class="position-absolute">
</p> <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>
<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> <footer class="horizontal justify-center">
<p>Serverscoop is the collective effort of new and established entities in the tech co-operative space.</p> <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>
<div class="horizontal wrap justify-center align-center logos"> </footer>
<a href="https://autonomic.zone"> </main>
<img alt="autonomic" src="static/logo-autonomic.svg"/> </body>
</a> </html>
<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>

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