Skip to content

Commit

Permalink
homepage mobile layout
Browse files Browse the repository at this point in the history
  • Loading branch information
@jaames
jaames committed Apr 15, 2022
1 parent b37c47d commit 7f76fe0
Show file tree
Hide file tree
Showing 3 changed files with 114 additions and 53 deletions.
153 changes: 101 additions & 52 deletions website/src/pages/index.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -243,23 +243,16 @@ import Button from '../components/Button.astro';
<style lang="scss">

.Section {
@include wrapper;
margin-top: 5rem;
margin-bottom: 2rem;

@include wrapper;

a {
font-weight: bold;
}
}

.Section--narrow {
max-width: 608px;

display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}

.Section__title {
// font-weight: 600;
text-align: center;
font-size: 1.25rem;
width: 100%;
Expand Down Expand Up @@ -289,14 +282,19 @@ import Button from '../components/Button.astro';
background: black;
border-radius: 24px;
padding: 20px;
display: inline-block;
box-shadow: $shadow;
}
}

.FeatureGrid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-columns: 1fr;
grid-gap: 20px;

@include breakpoint-desktop {
grid-template-columns: 1fr 1fr 1fr;
}
}

.FeatureGrid__item {
Expand All @@ -316,45 +314,72 @@ import Button from '../components/Button.astro';
border-bottom-right-radius: 4px;

sub {
display: block;
color: $color-text-invert-alt;
line-height: inherit;
margin: 0;
opacity: .7;
vertical-align: baseline;
}

}

.DownloadSection {
.Section__body {
max-width: grid-span(8, 12);
margin: 0 auto;
@include breakpoint-tablet {
max-width: grid-span(8, 12);
margin: 0 auto;
}
}
}

.DownloadCard {
display: flex;
border-radius: 24px;
box-shadow: $shadow;

@include breakpoint-below-desktop {
flex-direction: column;
}
}

.DownloadCard__head {
color: $color-text-invert;
background: $color-bg-invert;
border-top-left-radius: 24px;
border-bottom-left-radius: 24px;
padding: 32px;
// padding-right: 3rem;
// width: 250px;
padding: 24px;

@include breakpoint-below-desktop {
border-top-left-radius: 16px;
border-top-right-radius: 16px;
display: flex;
align-items: center;
justify-content: space-between;
}

@include breakpoint-desktop {
border-radius: 0;
border-top-left-radius: 24px;
border-bottom-left-radius: 24px;
padding: 32px;
}
}

.DownloadCard__body {
background: $color-bg-alt;
flex: 1;
border-top-right-radius: 24px;
border-bottom-right-radius: 24px;
padding: 28px;
padding: 24px;
display: flex;
flex-direction: column;

@include breakpoint-below-desktop {
border-bottom-left-radius: 16px;
border-bottom-right-radius: 16px;
}

@include breakpoint-desktop {
border-top-right-radius: 24px;
border-bottom-right-radius: 24px;
padding: 32px;
}

}

.DownloadCard__title {
Expand All @@ -367,30 +392,44 @@ import Button from '../components/Button.astro';

.DownloadCard__buttons {
color: $color-text-invert-alt;
margin-top: 1em;
margin-bottom: -.5em;

@include breakpoint-desktop {
margin-top: 1em;
margin-bottom: -.5em;
}

:global(.Button) {
display: inline-block;
}
}

.DownloadCard__desc {
margin-bottom: auto;
margin-bottom: 1em;
@include breakpoint-desktop {
margin-bottom: auto;
}
}

.DownloadCard__sideloadNote {
font-size: .9rem;
font-size: .8rem;
@include breakpoint-desktop {
font-size: .9rem;
}
}

.DownloadCard__compatNote {
font-size: .9rem;
font-size: .8rem;
@include breakpoint-desktop {
font-size: .9rem;
}
}

.FaqSection {
.Section__body {
max-width: grid-span(8, 12);
margin: 0 auto;
@include breakpoint-tablet {
max-width: grid-span(8, 12);
margin: 0 auto;
}
}
}

Expand All @@ -417,8 +456,8 @@ import Button from '../components/Button.astro';
display: block;
width: 0;
height: 0;
border-top: 12px solid black;
border-right: 16px solid transparent;
border-top: 20px solid black;
border-right: 28px solid transparent;
}
}

Expand All @@ -441,8 +480,8 @@ import Button from '../components/Button.astro';
display: block;
width: 0;
height: 0;
border-top: 12px solid $color-bg-alt;
border-left: 16px solid transparent;
border-top: 20px solid $color-bg-alt;
border-left: 28px solid transparent;
}
}

Expand All @@ -456,10 +495,12 @@ import Button from '../components/Button.astro';

.CreditsSection {
.Section__body {
background: white;
max-width: grid-span(8, 12);
background: white;
margin: 0 auto;
padding: 32px;
@include breakpoint-desktop {
max-width: grid-span(8, 12);
}
}
}

Expand All @@ -468,24 +509,17 @@ import Button from '../components/Button.astro';
}

.Credits__main {
column-count: 2;
column-gap: 20px;
}

.Credits__foot {
font-size: .8rem;
color: $color-text-alt;
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 20px;

p {
margin: 0;
@include breakpoint-tablet {
column-count: 2;
column-gap: 20px;
}
}

.CreditGroup {
margin-bottom: 1.92em;
margin-bottom: 1em;
@include breakpoint-tablet {
margin-bottom: 1.92em;
}
}

.CreditGroup--breakColumn {
Expand Down Expand Up @@ -521,4 +555,19 @@ import Button from '../components/Button.astro';
grid-column: 2 / span 1;
}

.Credits__foot {
font-size: .8rem;
color: $color-text-alt;
display: grid;
grid-gap: 20px;

@include breakpoint-tablet {
grid-template-columns: 1fr 1fr;
}

p {
margin: 0;
}
}

</style>
7 changes: 6 additions & 1 deletion website/src/styles/global.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,11 @@ html, body {
');
background-position: center top;
background-repeat: repeat;
scroll-behavior:smooth
scroll-behavior: smooth;

@include breakpoint-below-desktop {
font-size: $font-size-global-mobile;
}
}

img, svg {
Expand All @@ -32,6 +36,7 @@ h1, h2, h3, h4, h5, h6 {
a {
cursor: pointer;
color: inherit;
font-weight: bold;
text-decoration: none;
}

Expand Down
7 changes: 7 additions & 0 deletions website/src/styles/mixins/_breakpoints.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,13 @@
}
}

// phone and tablet
@mixin breakpoint-below-desktop {
@media (max-width: 1199px) {
@content;
}
}

// desktop width and up
@mixin breakpoint-desktop {
@media (min-width: 1200px) {
Expand Down

0 comments on commit 7f76fe0

Please sign in to comment.