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

landing graphics, line animations, 'fixed' menu, css tweaks

Browse Source
This commit is contained in:
Spencer Flagg
2022-09-14 18:05:58 +02:00
parent 61682732e4
commit efd2c15ce6
83 changed files with 1449 additions and 497 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -3,7 +3,7 @@
flex-direction: column;
align-items: center;
gap: 6rem;
margin: 0 0 6rem 0;
//margin: 0 0 6rem 0;
padding: 0 6rem 6rem 6rem;
box-sizing: border-box;
width: 100%;
@@ -66,7 +66,7 @@
}
}
ul.services{
.services{
position: absolute;
top: calc(3 * var(--line));
background-color: #353535;
@@ -74,9 +74,73 @@
width: calc(11.5ch - 4rem);
font-size: var(--size);
left: -1rem;
img{
border-radius: 100%;
width: 5rem;
}
.service{
display: flex;
align-items: center;
.service__link{
color: var(--c-1);
font-size: 1rem;
font-weight: 400;
display: flex;
align-items: center;
gap: 1rem;
}
}
}
}
a.btn{
align-self: center;
}
}
.slides-controls {
padding: 10px;
display: flex;
align-items: center;
justify-content: center;
height: 70px;
min-height: 70px;
gap: 2rem;
button{
background: none;
padding: 0;
border: 0;
cursor: pointer;
}
}
.slides-container {
position: relative;
overflow: hidden;
display: none;
flex: 1;
}
.slide {
position: absolute;
font-size: 90px;
font-weight: 700;
color: rgba(255,255,255,0.9);
display: flex;
align-items: center;
justify-content: center;
height: 100%;
width: calc(100% / 3);
width: 100%;
}
.slides-inner {
position: relative;
height: 7rem;
width: 100%;
overflow: hidden;
}

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

@@ -11,20 +11,20 @@ section#bitcoin {
z-index: -1;
margin-bottom: -10rem;
&::before{
content: '';
&::before {
content: "";
width: 100%;
height: 100vh;
background-image: linear-gradient(#33333300,var(--c-bkg));
background-image: linear-gradient(#33333300, var(--c-bkg));
position: absolute;
top: -100vh;
}
&::after{
content: '';
&::after {
content: "";
width: 100%;
height: 100vh;
background-image: linear-gradient(var(--c-bkg),#33333300);
background-image: linear-gradient(var(--c-bkg), #33333300);
position: absolute;
bottom: -100vh;
}
@@ -50,13 +50,13 @@ section#bitcoin {
p {
max-width: min(35ch, 50vw);
em{
em {
color: var(--c-1);
font-weight: 700;
}
}
.subsection{
.subsection {
padding: 0 6rem;
}
@@ -69,15 +69,94 @@ section#bitcoin {
display: flex;
flex-direction: column;
align-items: flex-end;
h1, p{
h1,
p {
text-align: right;
}
}
a.btn{
a.btn {
background-color: var(--c-1);
color:var(--c-6);
color: var(--c-6);
border-color: var(--c-6);
font-size: 1.2rem;
}
#flying-icons{
position: absolute;
top: 0;
left:0;
right: 0;
bottom: 0;
overflow: hidden;
}
.service-icon {
border-radius: 100%;
position: absolute;
top:0;
left:0;
z-index: -2;
backdrop-filter: blur(48px);
mix-blend-mode: soft-light;
box-shadow: 0 37px 50px rgb(0 0 0 / 20%);
&.service-icon--spectre {
background-color: var(--c-1);
}
&.service-icon--electrs {
background-color: var(--c-1);
padding: 1rem;
}
&.service-icon--balanceofsatoshis {
width: 5rem;
}
&.service-icon--bitcoind {
width: auto;
}
&.service-icon--btc-rpc-proxy {
width: 9rem;
}
&.service-icon--btcpay-server {
width: 6rem;
}
&.service-icon--c-lightning {
width: auto;
}
&.service-icon--electrs {
width: 7rem;
}
&.service-icon--lightning-jet {
width: 6rem;
}
&.service-icon--lnd {
width: 10rem;
}
&.service-icon--lightning-terminal {
width: 7rem;
}
&.service-icon--lndg {
width: 9rem;
}
&.service-icon--mempool {
width: 8rem;
}
&.service-icon--ride-the-lightning {
width: 8rem;
}
&.service-icon--spark-wallet {
width: 7rem;
}
&.service-icon--specter {
width: 5rem;
}
&.service-icon--sphinx-relay {
width: 6rem;
}
&.service-icon--thunderhub {
width: 5rem;
}
}
}

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

@@ -2,7 +2,7 @@
display: flex;
flex-direction: column;
align-items: center;
min-height: calc(100vh - 2 * var(--section-padding));
//min-height: calc(100vh - 2 * var(--section-padding));
padding: var(--section-padding) 6rem;
h2{
margin: 0;

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

@@ -1,7 +1,9 @@
footer{
//position: absolute;
padding: 0;
.footer-content{
font-weight: 400;
color: gray;
.footer__content{
display: flex;
.header{
align-self: flex-start;
@@ -91,6 +93,11 @@ footer{
}
}
.footer__canary{
text-align: center;
padding: 2rem;
}
@media only screen and (max-width: 1200px) {
footer .groups li > a {
font-size: 2.2vw;

5
src/assets/styles/infographics.scss
View File

@@ -10,13 +10,16 @@ section#infographics{
gap: 3rem;
padding: 6rem;
svg{
width: 100%;
width: 110%;
}
&:first-child{
background-color: black;
}
&:last-child{
background-color: white;
svg{
width: 80%;
}
}
}
}

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

@@ -78,24 +78,6 @@ section {
max-height: 75vh;
}
.img-shadow {
filter: blur(2rem) brightness(0);
z-index: -1;
position: absolute;
top: 5rem;
opacity: .5;
}
#hero-image {
position: relative;
display: flex;
img {
width: 50rem;
max-width: 90vw;
margin-top: 4rem;
}
}
nav {
color: var(--c-text-primary);
}
@@ -183,6 +165,7 @@ p {
em {
font-style: normal;
color: var(--c-text-accent);
font-weight: 400;
}
}

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

@@ -79,7 +79,7 @@ body{
}
main{
transform: translateY(-100vh);
//transform: translateY(-100vh);
}
a {
@@ -106,7 +106,7 @@ ul {
header{
position: fixed;
width: 100vw;
z-index: 1;
z-index: 2;
}
nav{
--padding: 1rem;
@@ -130,9 +130,16 @@ nav{
color: var(--c-text-bright);
font-size: 1.5rem;
padding: 0em 0.5em 0em 0.5em;
&.em{
background-color: var(--c-text-accent);
&:hover{
color: var(--c-text-accent);
background-color: var(--c-text-bright);
}
}
&:hover{
color: var(--c-text-accent);
}
}
}
@@ -163,4 +170,22 @@ nav{
.closed-menu {
//overflow: hidden;
white-space: nowrap;
}
}
#hero-image {
position: relative;
display: flex;
img {
width: 50rem;
max-width: 90vw;
margin-top: 4rem;
}
}
.img-shadow {
filter: blur(2rem) brightness(0);
z-index: -1;
position: absolute;
top: 5rem;
opacity: .5;
}

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

@@ -1,5 +1,6 @@
#menu{
//position: absolute;
position: fixed;
z-index: 1;
padding: 0;
width: 100vw;
height:100vh;

0
src/assets/styles/news.scss Normal file
View File

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

@@ -1,97 +1,172 @@
main{
margin-top: 10rem;
main {
margin-top: 7rem;
display: flex;
flex-direction: column;
align-items: center;
overflow-x: clip;
}
section {
--width: 42ch;
--side-padding: 3rem;
font-family: "Montserrat";
font-weight: 300;
font-size: 1rem;
width: var(--width);
padding: 7rem var(--side-padding);
position: relative;
overflow: visible;
&:nth-of-type(2n + 3) {
&::before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: calc(-1 * ((100vw - var(--width)) / 2) + var(--side-padding));
width: 100vw;
background-color: #212121;
z-index: -1;
}
}
.section__image {
display: flex;
flex-direction: column;
align-items: center;
margin: 2rem 0;
position: relative;
img {
width: 50%;
}
.img-shadow {
top: 3rem;
filter: blur(1rem) brightness(0);
}
}
display: flex;
flex-direction: column;
//align-items: center;
//outline: 1px solid orange;
}
section{
--width: 42ch;
--side-padding: 3rem;
font-family: "Montserrat";
font-weight: 300;
font-size: 1rem;
width: var(--width);
padding: 10rem var(--side-padding);
position: relative;
overflow:visible;
&:nth-of-type(even){
&::before{
content: '';
position: absolute;
top: 0;
bottom: 0;
left: calc(-1 * ((100vw - var(--width)) / 2) + var(--side-padding));
width: 100vw;
background-color: #212121;
z-index: -1;
}
section#hero {
display: flex;
align-items: center;
padding-top: 0;
padding-bottom: 0;
gap: 5rem;
width: calc(100vw - (2 * var(--side-padding)));
justify-content: center;
flex-direction: row;
&::before {
content: none;
}
h1 {
width: 100%;
}
}
@media only screen and (max-width: 1245px) {
section#hero {
flex-direction: column;
}
}
section#virtues {
.section__image img {
width: 75%;
}
}
.section__double-image {
position: relative;
.section__image{
position: absolute;
top:-140%;
width:100%;
}
.section__image--left{
left:-105%;
align-items: flex-end;
}
.section__image--right{
right:-105%;
align-items: flex-start;
}
}
#hero-image img {
margin-top: 0;
width: 28rem;
}
h1 {
font-family: var(--f-hero);
font-size: 4.4rem;
width: 110%;
line-height: 1;
font-family: var(--f-hero);
font-size: 4.2rem;
width: 110%;
line-height: 1;
}
h2 {
font-family: var(--f-hero);
font-size: 3.7rem;
text-align: center;
font-family: var(--f-hero);
font-size: 3.7rem;
text-align: center;
}
section#blurb h2 {
font-size: 2.5rem;
color: var(--c-text-accent);
width: 110%;
line-height: 1;
text-align: left;
margin-bottom: 2rem;
font-size: 2.5rem;
color: var(--c-text-accent);
width: 110%;
line-height: 1;
text-align: left;
margin-bottom: 2rem;
}
h3 {
font-family: var(--f-hero);
font-size: 1.8rem;
width: 112%;
font-family: var(--f-hero);
font-size: 1.8rem;
width: 112%;
}
h4 {
font-weight: 800;
font-weight: 800;
}
h3, h4 {
color: var(--c-text-accent);
h3,
h4 {
color: var(--c-text-accent);
}
ul#sub-menu{
display: flex;
justify-content: space-between;
width: 107%;
li a{
font-family: var(--f-hero);
font-size: 1.2rem;
color: var(--c-text-primary);
text-transform: uppercase;
font-weight: 900;
white-space: nowrap;
transition: var(--t-simple);
&:hover{
color: var(--c-text-accent);
}
ul#sub-menu {
display: flex;
justify-content: space-between;
width: 33rem;
li a {
font-family: var(--f-hero);
font-size: 1.2rem;
color: var(--c-text-primary);
text-transform: uppercase;
font-weight: 900;
white-space: nowrap;
transition: var(--t-simple);
&:hover {
color: var(--c-text-accent);
}
}
}
p{
font-family: "Montserrat";
font-weight: 300;
line-height: 1.9rem;
font-size: 1rem;
margin-top: 0.5rem;
margin-bottom: 2.5rem;
p {
font-family: "Montserrat";
font-weight: 300;
line-height: 1.9rem;
font-size: 1rem;
margin-top: 0.5rem;
margin-bottom: 2.5rem;
strong{
font-weight: 700;
}
}
strong {
font-weight: 700;
}
}

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

@@ -50,7 +50,8 @@ section#powered-by {
}
}
}
img {
width: 20rem;
svg {
width: 45rem;
margin-top: 6rem;
}
}

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

@@ -4,7 +4,7 @@ section#support {
align-items: center;
padding: 6rem;
background: var(--c-1);
margin-bottom: 6rem;
//margin-bottom: 6rem;
.cols {
display: flex;
align-items: center;
@@ -16,10 +16,18 @@ section#support {
}
img {
max-height: 40vh;
max-width: 100%;
transform: rotateZ(5deg);
}
@media only screen and (max-width: 1200px) {
.cols{
flex-direction: column;
.col:nth-child(1){
order: 2;
}
.col:nth-child(2){
order: 1;
}
}
}
}