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

9/29 Lucy notes; added list.js, didn't implement

Browse Source
This commit is contained in:
Spencer Flagg
2022-09-30 18:02:17 +02:00
parent a80567811e
commit 62da575385
20 changed files with 173 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/_includes/components/landing/be-your-own.njk
View File

@@ -23,7 +23,7 @@
{% if pseudoservice.slug in service.pseudoservices %}
<div class="service__content" >
<a class="service__link" href="https://marketplace.start9.com/{{service.slug}}" target="_blank">
<img class="service__image service__image--{{ service.slug }}" src="../assets/images/service-icons/{{ service.slug }}.png" alt="{{ service.name }} embassyos service icon" title="{{ service.name }} embassyos service icon"
<img class="service__image service__image--{{ service.slug }}" src="../assets/images/service-icons/{{ service.slug }}.png" alt="{{ service.name }} embassyOS service icon" title="{{ service.name }} embassyOS service icon"
style="filter: drop-shadow(0px 0px 3rem {{ service.color }}C0)"/>
<div class="service__info">
<h3 class="service__name">{{ service.name }}</h3>

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

@@ -21,8 +21,8 @@
<img
class="service-icon service-icon--{{ service.slug }}"
src="../assets/images/service-icons/{{ service.slug }}.png"
alt="{{ service.name }} embassyos service icon"
alt="{{ service.name }} embassyos service icon"/>
alt="{{ service.name }} embassyOS service icon"
alt="{{ service.name }} embassyOS service icon"/>
{% endif %}
{% endfor %}
{% endfor %}

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

@@ -13,7 +13,7 @@
</div>
</div>
</div>
<div class="col">
<div class="col hide-on-mobile">
<div class="code-wrapper"><img src="assets/images/dockerfile.png" alt="screenshot of dockerfile" title="screenshot of dockerfile"></div>
</div>
</div>

2
src/_includes/components/landing/infographics.njk
View File

@@ -29,6 +29,6 @@
{% include "components/svg/embassyos-network-diagram_red_extended.svg" %}
<div class="img-shadow">{% include "components/svg/embassyos-network-diagram_red_extended.svg" %}</div>
</div>
{# {% include "components/svg/embassyos-network-diagram_red_extended.svg" %} #}
{# {% include "components/svg/embassyOS-network-diagram_red_extended.svg" %} #}
</div>
</section>

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

@@ -1,8 +1,8 @@
<section id="powered-by">
<h1>Powered by <em>EmbassyOS</em></h1>
<h1>Powered by <em>embassyOS</em></h1>
<div>
<p>
EmbassyOS (EOS) is a browser-based, graphical operating system for a personal server, designed to <em>
embassyOS (eOS) is a browser-based, graphical operating system for a personal server, designed to <em>
turn anyone into a
system administrator
</em> capable of managing their own server.

2
src/_includes/components/svg/stack-new.svg
View File

@@ -1,4 +1,4 @@
<svg width="1027" height="679" viewBox="0 0 1027 679" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<svg viewBox="0 0 1027 679" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g clip-path="url(#clip0_477_3444)">
<rect y="-15" width="669" height="694" fill="url(#pattern-stack)"/>
<path d="M616.505 91.5H618.479V81.0714L625.984 66.5H623.878L618.216 77.8571C617.953 78.3929 617.722 78.8929 617.492 79.5C617.262 78.8929 617.031 78.3929 616.768 77.8571L611.106 66.5H609L616.505 81.0714V91.5ZM637.918 92C643.974 92 648.746 86.9286 648.746 79C648.746 71.0714 643.974 66 637.918 66C631.861 66 627.088 71.0714 627.088 79C627.088 86.9286 631.861 92 637.918 92ZM637.918 90.1429C632.782 90.1429 629.063 85.6786 629.063 79C629.063 72.3214 632.782 67.8571 637.918 67.8571C643.052 67.8571 646.771 72.3214 646.771 79C646.771 85.6786 643.052 90.1429 637.918 90.1429ZM661.739 92C666.742 92 670 88.7857 670 83.1072V66.5H668.025V83.0714C668.025 87.4286 665.392 90.1429 661.739 90.1429C658.085 90.1429 655.452 87.4286 655.452 83.0714V66.5H653.477V83.1072C653.477 88.7857 656.736 92 661.739 92Z" fill="var(--c-1)"/>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 66 KiB

After

Width:  |  Height:  |  Size: 66 KiB

29
src/_includes/layouts/peripheral.njk
View File

@@ -6,13 +6,24 @@ layout: layouts/base.njk
{{ content | safe }}
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/gsap.min.js"></script>
<script src="{{ '/assets/js/gsap.min.js' | url }}"></script>
<script src="{{ '/assets/js/ScrollTrigger.min.js' | url }}"></script>
<script src="{{ '/assets/js/ScrollSmoother.min.js' | url }}"></script>
<script src="{{ '/assets/js/DrawSVGPlugin.min.js' | url }}"></script>
<script src="{{ '/assets/js/CustomEase.min.js' | url }}"></script>
<script src="{{ '/assets/js/_header.js' | url }}"></script>
<script src="{{ '/assets/js/_menu.js' | url }}"></script>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/gsap.min.js"></script>
<script defer src="{{ '/assets/js/gsap.min.js' | url }}"></script>
<script defer src="{{ '/assets/js/ScrollTrigger.min.js' | url }}"></script>
<script defer src="{{ '/assets/js/ScrollSmoother.min.js' | url }}"></script>
<script defer src="{{ '/assets/js/DrawSVGPlugin.min.js' | url }}"></script>
<script defer src="{{ '/assets/js/CustomEase.min.js' | url }}"></script>
<script defer src="{{ '/assets/js/list.min.js' | url }}"></script>
<script defer src="{{ '/assets/js/_header.js' | url }}"></script>
<script defer src="{{ '/assets/js/_menu.js' | url }}"></script>
<script defer src="{{ '/assets/js/_hero.js' | url }}"></script>
<script src="{{ '/assets/js/peripheral.js' | url }}"></script>
<script defer src="{{ '/assets/js/peripheral.js' | url }}"></script>
{# <script defer>
var options = {
valueNames: [ 'name', 'city' ]
};
var hackerList = new List('hacker-list', options);
</script> #}

30
src/assets/js/_hero.js
View File

@@ -1,18 +1,18 @@
//////////////////////////////////////////
// HERO
gsap.from("#hero-image", {
duration: 1,
//y: "-10rem",
scale: 0.95,
opacity: 0,
filter: "blur(10px)",
delay: 0.5,
});
gsap.from("#logo", {
duration: 0.5,
y: "-5rem",
opacity: 0,
delay: 1.25,
//ease: "in-out"
});
gsap.to("#hero-image", {
duration: 1,
//y: "-10rem",
scale: 1,
opacity: 1,
filter: "blur(0px)",
delay: 0.5,
});
gsap.to("#logo", {
duration: 0.5,
y: 0,
opacity: 1,
delay: 1.25,
//ease: "in-out"
});

2
src/assets/js/list.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

6
src/assets/styles/be-your-own.scss
View File

@@ -75,8 +75,8 @@
align-items: center;
height: var(--size);
padding: var(--p);
background-color: #353535;
border-bottom: 0.5rem #353535 solid;
background: linear-gradient(90deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));
border-bottom: 0.5rem transparent solid;
}
#ticker__window {
height: calc(var(--rows-height) * var(--line));
@@ -174,7 +174,7 @@
&::before{
position: absolute;
top: -4rem;
top: calc(-4rem + 2px);
content: '';
display: block;
//width: 0;

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

@@ -1,3 +1,7 @@
#bitcoin-to-be svg{
max-height: 50vh;
}
section#bitcoin {
background-image: linear-gradient(180deg, #f7931a 0%, #7b1af8 100%);
background-repeat: no-repeat;

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

@@ -8,6 +8,7 @@ section#community {
h1{
margin-bottom: 6rem;
padding: 0 3rem;
}
form{

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

@@ -1,8 +1,12 @@
footer{
transform: translate(0px, 0vh);
//position: absolute;
padding: 0;
font-weight: 400;
color: gray;
.footer__copyright, .footer__donate{
font-size: max(14px, 0.8rem);
}
.footer__content{
display: flex;
.header{
@@ -44,7 +48,7 @@ footer{
}
.groups li > a {
font-family: var(--f-accent);
font-size: .8rem;
font-size: max(14px,.8rem);
line-height: 1.5;
font-weight: 300;
//text-transform: uppercase;
@@ -100,7 +104,7 @@ footer{
@media only screen and (max-width: 1200px) {
footer .groups li > a {
font-size: 2.2vw;
font-size: 2vw;
}
}

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

@@ -353,3 +353,12 @@ body {
transform: rotateY(1turn) rotateX(1turn);
}
}
@media screen and (max-width: 500px) {
#hero{
margin-top: 25vh;
}
.line svg{
max-height: 40vh;
}
}

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

@@ -47,6 +47,7 @@
html {
//background-color: lime;
font-size: 2vmin;
font-size: max(2vmin, 10px);
scroll-behavior: smooth;
color: var(--c-text-primary);
font-family: var(--f-accent);
@@ -154,11 +155,10 @@ header{
}
&:hover{
svg path{
stroke-width: 0.4rem;
stroke-width: 0.2rem;
stroke: var(--c-text-primary);
}
svg path:last-child{
stroke-width: 0.4rem;
stroke: var(--c-text-accent);
}
}
@@ -243,6 +243,9 @@ nav{
#hero-image {
position: relative;
display: flex;
scale: 0.95;
opacity: 0;
filter: blur(10px);
img {
width: 50rem;
max-width: 90vw;

99
src/assets/styles/peripheral.scss
View File

@@ -1,4 +1,4 @@
@use 'community';
@use "community";
main {
margin-top: 7rem;
@@ -9,7 +9,7 @@ main {
background-color: #333;
}
#menu{
#menu {
box-shadow: inset 0 -5rem 5rem -2rem rgb(0 0 0 / 40%);
}
@@ -83,6 +83,7 @@ section#hero {
@media only screen and (max-width: 1245px) {
section#hero {
flex-direction: column;
margin-bottom: 6rem;
}
}
@@ -109,25 +110,30 @@ section#virtues {
align-items: flex-start;
}
}
#logo{
margin-bottom: -6rem;
h1 { font-size: 5rem; }
#logo {
transform: translateY(-5rem);
opacity: 0;
margin-bottom: -6rem;
h1 {
font-size: 5rem;
}
}
#hero-image img {
margin-top: 0;
width: 25rem;
}
.hero--about{
.hero--about {
#hero-image img {
margin-top: 0;
width: 28rem;
}
#logo{
#logo {
margin-bottom: 0;
h1 { font-size: 4.2rem; }
h1 {
font-size: 4.2rem;
}
}
}
@@ -202,8 +208,8 @@ p {
/* about */
section#origin{
.section__image img{
section#origin {
.section__image img {
transform: rotate(-3deg);
}
}
@@ -223,82 +229,85 @@ section#origin{
box-shadow: 0 3rem 2rem 0rem rgb(0 0 0 / 40%);
}
p {
font-size: .8rem;
font-size: 0.8rem;
line-height: 1.4;
}
}
}
section#jobs {
p{
p {
line-height: 1.4;
}
.job {
list-style: none;
}
ul, ol {
ul,
ol {
display: block;
list-style: disc outside none;
margin: 1em 0;
padding: 0 0 0 2rem;
}
ol {
}
ol {
list-style-type: decimal;
}
li {
display: list-item;
list-style: disc;
margin-bottom: .5rem;
&:last-child{
margin-bottom: 2rem;
}
li {
display: list-item;
list-style: disc;
margin-bottom: 0.5rem;
&:last-child {
margin-bottom: 2rem;
}
}
ul ul,
ol ul {
list-style-type: circle;
margin-left: 15px;
}
ol ol,
ul ol {
list-style-type: lower-latin;
margin-left: 15px;
}
}
ul ul, ol ul {
list-style-type: circle;
margin-left: 15px;
}
ol ol, ul ol {
list-style-type: lower-latin;
margin-left: 15px;
}
}
section#news{
ul{
section#news {
ul {
display: flex;
flex-direction: column;
gap: 4rem;
}
li a{
li a {
display: flex;
flex-direction: column;
gap: .5rem;
gap: 0.5rem;
align-items: flex-start;
outline: 1px solid rgb(255 255 255 / 0%);
outline-offset: .5rem;
outline-offset: 0.5rem;
transition: var(--t-simple);
&:hover{
&:hover {
outline: 1px solid rgb(255 255 255 / 100%);
outline-offset: 2rem;
}
}
h3{
h3 {
text-transform: unset;
color: var(--c-text-primary);
}
.creator{
.creator {
border-radius: 999px;
background-color: var(--c-text-accent);
color: var(--c-text-primary);
padding: .2em .5em;
font-size: .8rem;
padding: 0.2em 0.5em;
font-size: 0.8rem;
font-weight: 500;
opacity: .6;
opacity: 0.6;
}
.twitter-text{
.twitter-text {
color: var(--c-text-primary);
font-size: 1.2rem;
line-height: 1.4;
margin: 0;
}
}
}

1
src/index.njk
View File

@@ -98,6 +98,7 @@ layout: layouts/base.njk
<script defer src="{{ '/assets/js/ScrollSmoother.min.js' | url }}"></script>
<script defer src="{{ '/assets/js/DrawSVGPlugin.min.js' | url }}"></script>
<script defer src="{{ '/assets/js/CustomEase.min.js' | url }}"></script>
<script defer src="{{ '/assets/js/list.min.js' | url }}"></script>
<script defer src="{{ '/assets/js/_header.js' | url }}"></script>
<script defer src="{{ '/assets/js/_menu.js' | url }}"></script>
<script defer src="{{ '/assets/js/_hero.js' | url }}"></script>

15
src/news.njk
View File

@@ -39,4 +39,17 @@ layout: layouts/peripheral.njk
</li>
{% endfor %}
</ul>
</section>
</section>
{# <div id="hacker-list">
<ul class="list">
<li>
<h3 class="name">Jonny</h3>
<p class="city">Stockholm</p>
</li>
<li>
<h3 class="name">Jonas</h3>
<p class="city">Berlin</p>
</li>
</ul>
</div> #}