status-im/artproject
2
0
Fork 0
mirror of https://github.com/status-im/artproject.git synced 2025-02-23 05:08:24 +00:00
Code Issues Projects Releases Wiki Activity

Add picture to introduction section for mobile

Browse Source
This commit is contained in:
wswidzinski 2018-01-13 13:59:36 +01:00
parent a8df651fe9
commit 783654105b
2 changed files with 73 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
src/hbs/partials/components/introduction.hbs
View File

@ -6,34 +6,36 @@
class="introduction__header" class="introduction__header"
}} }}
<div class="introduction__subheader text--large"> <div class="introduction__img">
{{{ introduction.subheader }}} {{svg 'images/introduction.svg' }}
</div> </div>
<div class="introduction__content"> <div class="introduction__wrapper">
<div class="introduction__paragraph text--small"> <div class="introduction__subheader text--large">
{{#each introduction.content as |paragraph|}} {{{ introduction.subheader }}}
<p>{{paragraph}}</p>
{{/each}}
</div> </div>
<div class="introduction__img"> <div class="introduction__content">
{{svg 'images/introduction.svg' }} <div class="introduction__paragraph text--small">
{{#each introduction.content as |paragraph|}}
<p>{{paragraph}}</p>
{{/each}}
</div>
</div> </div>
</div>
<div class="introduction__button"> <div class="introduction__button">
{{> components/button {{> components/button
label=introduction.button.label label=introduction.button.label
outlineColor="#fff" outlineColor="#fff"
backgroundColor="#000" backgroundColor="#000"
}} }}
</div> </div>
<div class="introduction__link"> <div class="introduction__link">
<a href="#project"> <a href="#project">
{{ introduction.nextSectionLink }} {{ introduction.nextSectionLink }}
</a> </a>
</div>
</div> </div>
</div> </div>
</section> </section>

66
src/styles/components/_introduction.scss
View File

@ -8,23 +8,54 @@
@include container; @include container;
position: relative; position: relative;
@media #{$screen-sm} {
display: flex;
flex-flow: row-reverse wrap;
}
@media #{$screen-lg} {
flex-flow: row wrap;
}
} }
&__content { &__header {
display: flex; margin: 30px 0;
@media #{$screen-sm} {
flex: 0 1 100%;
}
@media #{$screen-lg} {
margin: 80px 0;
}
} }
&__img { &__img {
display: none; margin-bottom: 20px;
svg {
width: 320px;
}
@media #{$screen-sm} { @media #{$screen-sm} {
display: block; flex: 1 0 50%;
max-width: 50%;
svg {
width: 100%;
}
}
@media #{$screen-md} {
flex: initial;
margin-left: auto;
} }
@media #{$screen-lg} { @media #{$screen-lg} {
position: absolute; position: absolute;
top: 60px; top: 10%;
right: 0; right: 25px;
} }
@media #{$screen-xlg} { @media #{$screen-xlg} {
@ -33,14 +64,22 @@
} }
} }
&__header { &__wrapper {
margin: 30px 0; @media #{$screen-sm} {
flex: 1 0 50%;
@media #{$screen-lg} { max-width: 50%;
margin: 80px 0;
} }
} }
&__subheader {
position: relative;
z-index: 2;
}
&__content {
display: flex;
}
&__button { &__button {
margin-bottom: 30px; margin-bottom: 30px;
@ -50,11 +89,6 @@
} }
} }
&__subheader {
position: relative;
z-index: 2;
}
&__link { &__link {
font-size: 12px; font-size: 12px;
text-transform: uppercase; text-transform: uppercase;