Start9/start9.com
2
0
Fork 0
mirror of https://github.com/Start9Labs/start9.com.git synced 2026-03-30 20:14:50 +00:00
Code Issues Packages Projects Releases Wiki Activity

landing and about basically finished, minus animation and graphics;

Browse Source
This commit is contained in:
Spencer Flagg
2022-09-02 15:59:11 +02:00
parent 526df49dad
commit 61682732e4
39 changed files with 1057 additions and 164 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -25,19 +25,21 @@
width: 100%;
#ticker__selected-frame {
outline: 1px solid white;
outline-offset: calc(0.1 * var(--size));
//outline: 1px solid white;
//outline-offset: calc(0.1 * var(--size));
font-size: var(--size);
text-transform: uppercase;
line-height: var(--size);
position: absolute;
top: calc(5 * var(--line));
top: calc(2 * var(--line));
left: -.5ch;
right: 0;
display: flex;
align-items: center;
height: var(--size);
padding: var(--p);
background-color: #353535;
border-bottom: 0.5rem #353535 solid;
}
#ticker__window {
height: 50vh;
@@ -48,7 +50,7 @@
position: relative;
}
ul {
ul.pseudoservices {
margin: 0;
padding: 0;
li {
@@ -63,6 +65,16 @@
overflow: hidden;
}
}
ul.services{
position: absolute;
top: calc(3 * var(--line));
background-color: #353535;
padding: 2rem;
width: calc(11.5ch - 4rem);
font-size: var(--size);
left: -1rem;
}
}
a.btn{
align-self: center;

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

@@ -1,5 +1,41 @@
#community {
display: flex;
flex-direction: column;
align-items: center;
min-height: calc(100vh - 2 * var(--section-padding));
input[type="email"] {
width: 31ch;
background: transparent;
border: 0;
border-bottom: 1px dotted var(--c-line-primary);
padding: 0.7em 1em;
font-size: 2rem;
font-family: var(--f-button);
font-weight: 100;
color: var(--c-text-primary);
margin-top: 7rem;
}
.community__icons {
display: flex;
flex-direction: column;
justify-content: space-between;
width: 31ch;
font-size: 2rem;
font-family: var(--f-button);
align-items: center;
}
margin-top: 3rem;
a {
&:hover svg path{
fill: var(--c-text-accent);
}
svg {
width: 3rem;
path{
transition: var(--t-simple);
}
}
}
}
}

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

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

124
src/assets/styles/footer.scss Normal file
View File

@@ -0,0 +1,124 @@
footer{
//position: absolute;
padding: 0;
.footer-content{
display: flex;
.header{
align-self: flex-start;
margin: 5rem 0 0 5rem;
img{
width: 12rem;
}
}
}
background-color: black;
.groups{
display: flex;
flex-wrap: wrap;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr;
.half {
grid-row: span 1;
}
.full {
grid-row: span 2;
}
& > li {
//margin-top: 5rem;
padding: 2.5rem 2.5rem;
&:nth-child(-n+2){
// border-right: var(--b-secondary);
}
}
// & > *{
// outline: 1px solid orange;
// }
}
h1{
font-family: var(--f-accent-bold);
font-size: .9rem;
color: var(--c-text-primary);
margin-bottom: 1.7rem;
}
.groups li > a {
font-family: var(--f-accent);
font-size: 1rem;
line-height: 1.5;
font-weight: 300;
text-transform: uppercase;
letter-spacing: .1em;
color: var(--c-text-primary);
position: relative;
display: flex;
flex-direction: column;
display: inline-block;
white-space: nowrap;
// &::after{
// content: '';
// position: absolute;
// transition: var(--t-simple);
// display: inline-block;
// width:0;
// height: 85%;
// left: 50%;
// opacity: 0;
// }
&:hover {
color: var(--c-text-accent);
// &::after{
// border: var(--b-primary);
// width: 110%;
// left: -5%;
// opacity: 1;
// }
}
&.highlight{
color: var(--c-text-bright);
font-weight: 300;
&::before{
content: '';
z-index: -1;
//border: var(--b-primary);
background-color: var(--c-text-accent);
width: 110%;
left: -5%;
display: inline-block;
height: 85%;
position: absolute;
}
}
}
}
@media only screen and (max-width: 1200px) {
footer .groups li > a {
font-size: 2.2vw;
}
}
@media only screen and (max-width: 650px) {
footer .groups li > a {
font-size: 3.5vmin;
}
footer .groups{
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
}
footer .groups li {
border: 0 !important;
}
}
@media only screen and (max-width: 500px) {
footer .groups li > a {
font-size: 4vmin;
}
footer .groups{
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto;
}
}

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

@@ -33,7 +33,7 @@ main{
}
section {
--section-padding: 2vh;
--section-padding: 6vh;
// min-height: calc(100vh - 2 * var(--section-padding));
// padding: 0 var(--section-padding);
// outline: 1px solid orange;

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

@@ -1,6 +1,7 @@
@use 'normalize';
@use 'fonts';
@use 'menu';
@use 'footer';
/* @use 'post'; */
:root {
@@ -38,10 +39,13 @@
--f-accent-bold: 'Montserrat';
--f-accent2-bold: 'Arkibal Mono Rg';
--f-copy: 'Liberation Mono';
--f-button: 'Basis Grotesque Mono Pro';
--t-simple: all .2s ease-in-out;
}
html {
background-color: lime;
//background-color: lime;
font-size: 2vmin;
scroll-behavior: smooth;
color: var(--c-text-primary);
@@ -70,6 +74,10 @@ html {
}
}
body{
background: #333333;
}
main{
transform: translateY(-100vh);
}
@@ -103,8 +111,8 @@ header{
nav{
--padding: 1rem;
width: calc(100% - 2 * var(--padding) - 15px);
font-family: var(--f-accent-bold);
font-weight: 400;
font-family: var(--f-accent);
font-weight: 300;
line-height: 1;
text-transform: uppercase;
padding: var(--padding);
@@ -129,6 +137,20 @@ nav{
}
}
}
&.scrolled-menu{
backdrop-filter: blur(10px);
background-color: rgba(0,0,0,0.1);
}
}
#menu-open{
display: flex;
gap: .5em;
align-items: center;
svg{
height: .7em;
margin-top: -2px;
}
}
.opened-menu {

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

@@ -61,7 +61,7 @@
&::after{
content: '';
position: absolute;
transition: all .2s ease-in-out;
transition: var(--t-simple);
display: inline-block;
width:0;
height: 85%;

97
src/assets/styles/peripheral.scss Normal file
View File

@@ -0,0 +1,97 @@
main{
margin-top: 10rem;
display: flex;
flex-direction: column;
align-items: center;
}
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;
}
}
}
h1 {
font-family: var(--f-hero);
font-size: 4.4rem;
width: 110%;
line-height: 1;
}
h2 {
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;
}
h3 {
font-family: var(--f-hero);
font-size: 1.8rem;
width: 112%;
}
h4 {
font-weight: 800;
}
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);
}
}
}
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;
}
}

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

@@ -10,7 +10,7 @@ section#products {
text-transform: uppercase;
}
img {
transition: all ease-in-out .2s;
transition: var(--t-simple);
width: 42vw;
}
a {
@@ -18,7 +18,7 @@ section#products {
flex-direction: column;
position: relative;
padding: 2rem;
transition: all ease-in-out .2s;
transition: var(--t-simple);
.heading h1 {
line-height: .8;
}

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

@@ -4,4 +4,22 @@ section#support {
align-items: center;
padding: 6rem;
background: var(--c-1);
}
margin-bottom: 6rem;
.cols {
display: flex;
align-items: center;
justify-content: center;
gap: 6rem;
.col {
max-width: 37vw;
}
}
img {
max-height: 40vh;
}
@media only screen and (max-width: 1200px) {
.cols{
flex-direction: column;
}
}
}