Start9/start9.com
2
0
Fork 0
mirror of https://github.com/Start9Labs/start9.com.git synced 2026-03-26 18:31:54 +00:00
Code Issues Packages Projects Releases Wiki Activity

lucy's feedback on 09/23

Browse Source
This commit is contained in:
Spencer Flagg
2022-09-23 17:49:15 +02:00
parent 025a86da0f
commit bc8b0cfcac
19 changed files with 161 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
.lazyimages.json
View File

File diff suppressed because one or more lines are too long

38
src/_data/media.json Normal file
View File

@@ -0,0 +1,38 @@
[
{
"title": "Start9 Labs to Build on Its Self-Sovereign, Private Internet Solutions With $1.2M in Funding",
"date": "2021-03-11",
"blurb": "The funding round will be followed by a range of upgrades to the computing platform.",
"url": "https://www.coindesk.com/start9-labs-self-sovereign-private-internet-solutions-funding",
"image-url": "https://static.coindesk.com/wp-content/uploads/2021/03/Graph-radicle-710x458.jpg?format=webp",
"source": "Coindesk",
"type": "article"
},
{
"title": "Start9 Labs Pitches a Private At-Home Server. And It Works",
"date": "2020-07-08",
"blurb": "Start9 Labs’ Embassy server sets up its own private internet network and comes with its own operating system. We tried it.",
"url": "https://www.coindesk.com/tech/2020/07/08/start9-labs-pitches-a-private-at-home-server-and-it-works/",
"image-url": "https://static.coindesk.com/wp-content/uploads/2020/07/harrison-broadbent-hSHNPyND_dU-unsplash-300x185.jpg",
"source": "Coindesk",
"type": "article"
},
{
"title": "How Bitcoin Nodes End Censorship on the Internet",
"date": "2022-09-07",
"blurb": "Matt Hill - The future of computing, decentralizing the internet, censorship, and sovereign computing",
"url": "https://bitcointv.com/w/hJcvVJEf5CEbXaTdKghjsw",
"image-url": "https://static.coindesk.com/wp-content/uploads/2020/07/harrison-broadbent-hSHNPyND_dU-unsplash-300x185.jpg",
"source": "Simply Bitcoin",
"type": "podcast"
},
{
"title": "Bitcoin & Owning Your Data with David Croisant",
"date": "2022-05-20",
"blurb": "David Croisant - Building a New Internet with Personal Servers from Start9 Labs",
"url": "https://www.youtube.com/watch?v=J0pFlhvqibc",
"image-url": "https://i1.ytimg.com/vi/J0pFlhvqibc/hqdefault.jpg",
"source": "Bitcoin, Peace, and Music",
"type": "video"
}
]

2
src/_data/menu.json
View File

@@ -12,7 +12,7 @@
"class": "em"
},
{
"name": "Dev Community",
"name": "Developers",
"slug": "dev",
"url": "https://start9.com/latest/contribute/index",
"target": "",

4
src/_includes/components/landing/dev.njk
View File

@@ -4,8 +4,8 @@
<div class="col">
<div class="wrapper">
<div class="content">
<h3>Interested in packaging a service?</h3>
<h3>Our community runs on devs like <em>you</em>.</h3>
<p style="color: black;">Interested in packaging a service?</p>
<p style="color: black;">Our community runs on devs like <em>you</em>.</p>
</div>
<div class="footer">
<a class="btn" href="{{ site.dev.url }}">learn more</a>

20
src/_includes/components/landing/powered-by.njk
View File

@@ -1,14 +1,16 @@
<section id="powered-by">
<h1>Powered by <em>EmbassyOS</em></h1>
<p>
In the past, running a server was only possible for highly technical people or those who could afford to hire them;
namely software developers, corporations, wealthy individuals, and politicians. Start9 levels the playing field by
making it possible for the rest of us.
</p>
<p>
EmbassyOS (EOS) is a browser-based, graphical operating system for a personal server, designed to turn anyone into a
system’s administrator capable of managing their own server.
</p>
<div>
<p>
In the past, running a server was only possible for highly technical people or those who could afford to hire them;
namely software developers, corporations, wealthy individuals, and politicians. Start9 levels the playing field by
making it possible for the rest of us.
</p>
<p>
EmbassyOS (EOS) is a browser-based, graphical operating system for a personal server, designed to turn anyone into a
system’s administrator capable of managing their own server.
</p>
</div>
<div class="image-with-shadow">
{% include "components/svg/stack.svg" %}
<div class="img-shadow">{% include "components/svg/stack.svg" %}</div>

4
src/_includes/components/landing/products.njk
View File

@@ -1,8 +1,8 @@
<section id="products">
<div class="subsection">
<a class="product product--buy" href="{{ site.products.buyUrl }}">
<img src="../assets/images/buy.png" alt="">
<img class="img-shadow" src="../assets/images/buy.png" alt="">
<img src="../assets/images/buy-centered.png" alt="">
<img class="img-shadow" src="../assets/images/buy-centered.png" alt="">
<div class="heading">
<h1 class="product__header">buy</h1>
<span class="product__subheader">your embassy</span>

BIN
src/assets/images/buy-centered.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.6 KiB

BIN
src/assets/images/buy-centered.png.kra Normal file
View File

Binary file not shown.

BIN
src/assets/images/buy-centered.png~ Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.1 KiB

3
src/assets/styles/bitcoin.scss
View File

@@ -58,6 +58,7 @@ section#bitcoin {
.subsection {
padding: 0 6rem;
gap: 3rem;
}
.subsection:first-of-type {
@@ -65,6 +66,7 @@ section#bitcoin {
flex-direction: column;
place-self: flex-start;
margin-bottom: 6rem;
margin-left: 8rem;
align-items: flex-start;
}
.subsection:nth-of-type(2) {
@@ -72,6 +74,7 @@ section#bitcoin {
display: flex;
flex-direction: column;
align-items: flex-end;
margin-right: 8rem;
h1,
p {
text-align: right;

4
src/assets/styles/footer.scss
View File

@@ -44,10 +44,10 @@ footer{
}
.groups li > a {
font-family: var(--f-accent);
font-size: 1rem;
font-size: .8rem;
line-height: 1.5;
font-weight: 300;
text-transform: uppercase;
//text-transform: uppercase;
letter-spacing: .1em;
color: var(--c-text-primary);
position: relative;

67
src/assets/styles/landing.scss
View File

@@ -81,7 +81,9 @@ section {
}
.section--bold{
background-color: rgba(239,75,99,0.2);
//background-color: rgba(239,75,99,0.2);
background-color: rgba(255,255,255,0.8);
--c-text-primary: black;
backdrop-filter: blur(1rem);
}
@@ -90,7 +92,7 @@ section {
.line svg{
width: calc(100vw - (2 * 6rem));
max-width: 50vw;
max-height: 75vh;
max-height: 60vh;
}
nav {
@@ -120,7 +122,7 @@ nav {
h1 {
font-family: var(--f-hero);
font-size: min(5rem,171px);
font-size: min(4.5rem,171px);
text-transform: uppercase;
line-height: 1;
color: var(--c-text-primary);
@@ -287,3 +289,62 @@ a.btn {
}
}
$pastels: (red, pink) (blue, purple) (green, yellow)
(#a1c4fd, #c2e9fb) (#f6d365, #fda085) (#ffecd2, #fcb69f);
$cube-edge: 4em;
body {
margin: 0;
height: 100vh;
// perspective: 25em; maybe move from main.css?
// background-color: linear-gradient();
}
[class*="cube"] {
position: absolute;
}
.cube {
top: 50%;
left: 50%;
transform-style: preserve-3d;
font-size: 8vmin;
animation: ani 8s ease-in-out infinite;
&__face {
margin: -0.5 * $cube-edge;
width: $cube-edge;
height: $cube-edge;
backface-visibility: hidden;
--i: 0;
--j: 1;
transform: rotate3d(var(--i), var(--j), 0, var(--a))
translateZ(0.5 * $cube-edge);
// interpolate because Sass apparently has issues with this
background: #{"linear-gradient(var(--ga), var(--gs))"};
&:nth-child(n + 5) {
--i: 1;
--j: 0;
}
@for $f from 0 to 6 {
&:nth-child(#{$f + 1}) {
--a: if($f < 4, $f, pow(-1, $f)) * 90deg;
--ga: random(360) * 1deg;
--gs: nth($pastels, $f + 1);
}
}
}
}
@keyframes ani {
from {
transform: rotateY(2turn) rotateX(2turn);
}
to {
transform: rotateY(1turn) rotateX(1turn);
}
}

2
src/assets/styles/main.scss
View File

@@ -219,7 +219,7 @@ nav{
img {
width: 50rem;
max-width: 90vw;
margin-top: 4rem;
margin-top: 6rem;
}
}

6
src/assets/styles/menu.scss
View File

@@ -51,7 +51,7 @@
font-size: 1.9rem;
line-height: 1.5;
font-weight: 100;
text-transform: uppercase;
//text-transform: uppercase;
letter-spacing: .1em;
color: var(--c-text-primary);
position: relative;
@@ -65,7 +65,8 @@
transition: var(--t-simple);
display: inline-block;
width:0;
height: 85%;
height: 84%;
top: 6%;
left: 50%;
opacity: 0;
}
@@ -88,6 +89,7 @@
background-color: var(--c-text-accent);
width: 110%;
left: -5%;
top: 6%;
display: inline-block;
height: 85%;
position: absolute;

1
src/assets/styles/pitch.scss
View File

@@ -4,6 +4,7 @@ section#pitch {
align-items: center;
justify-content: center;
margin-bottom: 6rem;
gap: 3rem;
h1 {
margin: 0;

1
src/assets/styles/powered-by.scss
View File

@@ -3,6 +3,7 @@ section#powered-by {
flex-direction: column;
align-items: center;
padding: 0rem 6rem 0 6rem;
gap: 3rem;
h2{
margin: 0;
text-align: center;

40
src/assets/styles/products.scss
View File

@@ -3,7 +3,7 @@ section#products {
display: flex;
align-items: center;
justify-content: center;
gap: 0rem;
gap: 3rem;
.subsection {
transform-style: preserve-3d;
@@ -51,12 +51,12 @@ section#products {
}
}
&:first-of-type a {
align-items: flex-end;
align-items: center;
.heading {
left: 6rem;
top: 6rem;
position: absolute;
align-self: flex-end;
//left: 6rem;
//top: 6rem;
//position: absolute;
align-self: center;
text-align: center;
display: flex;
flex-direction: column;
@@ -73,13 +73,13 @@ section#products {
&:last-of-type a {
align-items: flex-start;
.heading {
display: inline-block;
right: 6rem;
top: 6rem;
position: absolute;
// right: 6rem;
// top: 6rem;
// position: absolute;
display: flex;
flex-direction: column;
text-align: center;
align-self: center;
}
h1{
letter-spacing: .5rem;
@@ -94,14 +94,14 @@ section#products {
}
}
}
&::after{
content: '';
left:0;
right:0;
display: block;
background-color: blue;
transform: rotateX(90deg);
height: 4rem;
z-index: -1;
}
// &::after{
// content: '';
// left:0;
// right:0;
// display: block;
// background-color: blue;
// transform: rotateX(90deg);
// height: 4rem;
// z-index: -1;
// }
}

1
src/assets/styles/support.scss
View File

@@ -4,6 +4,7 @@ section#support {
align-items: center;
padding: 6rem;
//margin-bottom: 6rem;
gap: 3rem;
.cols {
display: flex;
align-items: center;

9
src/index.njk
View File

@@ -33,6 +33,15 @@ layout: layouts/base.njk
<link rel="stylesheet" href="assets/styles/landing.css">
<div class="cube">
<div class="cube__face"></div>
<div class="cube__face"></div>
<div class="cube__face"></div>
<div class="cube__face"></div>
<div class="cube__face"></div>
<div class="cube__face"></div>
</div>
{% include "components/landing/hero.njk" %}
<div class="line" id="hero-to-pitch">