Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fix/tpi/home page hero styles #264

Merged
merged 8 commits into from
Mar 13, 2020
Merged

Fix/tpi/home page hero styles #264

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
a8b5416
fix hero unit for desktop and mobile
rapzo Jan 29, 2020
ccd99f5
expose rails server to internal network
rapzo Jan 29, 2020
cf51b7b
small balls height fix
rapzo Jan 29, 2020
7e9796f
Merge branch 'develop' into fix/tpi/home-page-hero-styles
Mar 12, 2020
2965201
fix design
Mar 12, 2020
e1eab53
fix background patterns
Mar 13, 2020
75daff1
code review
Mar 13, 2020
df1a2f5
fixed primary background of buttons
Mar 13, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1,033 changes: 1,033 additions & 0 deletions app/assets/images/homepage/homepage_pattern.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
6 changes: 6 additions & 0 deletions app/assets/stylesheets/tpi.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,3 +40,9 @@
html {
scroll-behavior: smooth;
}

body {
@include mobile {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think our approach was to have default settings for mobile and then changing it accordingly for desktop 🤔
so, it would be:

body {
  overflow-x: hidden;

  @include desktop { ... styles for desktop... }
}

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Will do 👍

overflow-x: hidden;
}
}
238 changes: 138 additions & 100 deletions app/assets/stylesheets/tpi/_hero.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,78 +1,148 @@
@import "colors";
@import "typography";

$home-background: image-url("homepage/homepage-bg.jpg");

.tpi-home__hero {
color: $white;
position: relative;
overflow: hidden;
min-height: 500px;
display: flex;
align-items: center;
overflow: hidden;

&.is-primary {
padding: 0;
background: $blue-dark;
}

.hero__body {
.hero__content {
align-items: center;
@include from($tablet) {
min-height: 500px;
}

@include mobile {
height: 340px;
max-height: 340px;

& > .container > .columns {
z-index: 1;
position: relative;
}
}

.mobile-background {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;
background-image: $home-background;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
opacity: .2;
filter: grayscale(100%);
z-index: 0;
}

.title {
color: $white;
.left-size {
@include mobile {
margin: 26px 15px 43px;
}

.description {
line-height: $size-4;
display: flex;
justify-content: center;
width: 60%;
@include from($tablet) {
margin: 80px 0;
}

@media #{$tablet-portrait} {
justify-content: left;
width: 100%;
}
@include tablet {
margin-left: 20px;
}
}
}

.button__container {
display: flex;
margin-top: 50px;
justify-content: center;
.title {
color: $white;
}

.description {
display: flex;
justify-content: center;
line-height: $size-4;

@media #{$tablet-portrait} {
justify-content: left;
@media #{$tablet-portrait} {
justify-content: left;
width: 100%;
}
}

.button__hero {
@extend .is-medium;
.button__container {
display: flex;
justify-content: center;

height: 5rem;
background-color: $blue-darker;
@include mobile {
margin-top: 20px;
}

&:focus, &.is-focused {
@include from($tablet) {
margin-top: 50px;
justify-content: left;
}

.button__hero {
@extend .is-medium, .is-fullwidth;

height: 3.125rem;
width: 100%;

@include from($tablet) {
height: 5rem;
width: 280px;
max-width: 280px;
margin: 0;
}

$padding: calc(4.125rem - #{$button-border-width});
padding-left: $padding;
padding-right: $padding;
background-color: $blue-darker;
}
}
}

.hero__splash {
position: absolute;
top: 0;
left: 45%;
& > .background {
position: absolute;
width: 100%;
height: 100%;
background: $home-background;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
overflow: hidden;

&::after {
position: absolute;
top: 0;
left: -300px;
right: 0;
bottom: 0;
content: " ";
height: 50%;
background-image: image-url("homepage/homepage_pattern.svg");
background-repeat: no-repeat;
background-size: cover;
background-position-x: 0;
background-position-y: -300px;
}
}
}


&.is-secondary {
background: $blue;
background-image: image-url('hero_background_dark.svg');
background-position: -50px -100px;
background-position: -60px -60px;
background-repeat: no-repeat;
background-size: contain;

@include from($tablet) {
padding-top: 80px;
padding-bottom: 80px;
}

.button__icon {
background: $blue-darker;
Expand All @@ -81,6 +151,11 @@
}

.section-clickable {
margin: 20px 0 30px;
display: flex;
flex-direction: column;
justify-content: space-between;

&:hover {
.subsection-button__container {
.section-button {
Expand All @@ -93,6 +168,11 @@
}
}
}

.subsection-content__container {
display: flex;
flex-direction: column;
}
}

.section-title {
Expand All @@ -103,10 +183,6 @@
.section-description {
margin-bottom: 20px;
color: $white;

@media #{$tablet-portrait} {
margin-bottom: 64px;
}
}

.section-button {
Expand All @@ -130,12 +206,7 @@
display: flex;
align-items: center;
color: $white;
position: unset;

@media #{$tablet-portrait} {
position: absolute;
bottom: 0;
}
bottom: 20px;
}

.button__title {
Expand All @@ -144,77 +215,44 @@
color: $white;
}

.section-separator {
border-right: none;
margin-bottom: 30px;

@media #{$tablet-portrait} {
border-right: 1px solid rgba($white, 0.5);
margin-bottom: 0;
}
}

.right-column {
padding: 0.75rem;

@media #{$tablet-portrait} {
padding: 0.75rem 2.75rem;
}
}
.separator {
opacity: 0.5;

.first-tpi-section {
display: flex;
flex-direction: column;
width: 100%;
max-height: 950px;
background-color: $blue-ribbon;
color: $white;
overflow: hidden;
min-height: 500px;

&.is-primary {
background: $blue-dark;
}

.button__hero {
@extend .is-medium;

height: 5rem;
width: 280px;
background-color: $blue-darker;
@include from($tablet) {
width: 1px;
height: 100%;
border-left: 1px solid $white;
}

.title {
color: $white;
@include mobile {
width: 85%;
height: 2px;
border-top: 1px solid $white;
}

.description {
line-height: $size-4;
margin-bottom: 50px;
&__container {
display: flex;
align-items: center;
justify-content: center;

width: 60%;

@media #{$tablet-portrait} {
justify-content: left;
width: 100%;
}
}
}

.right-column {
padding: 0.75rem;

@media #{$tablet-portrait} {
flex-direction: row;
}
padding: 0.75rem 2.75rem;
}
}

.column-left {
flex: 50%;
margin-bottom: 70px;
margin-top: 50px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-top: 50px;

@media #{$tablet-portrait} {
margin-bottom: 0;
Expand Down
Loading