status-im
/
artproject
mirror of https://github.com/status-im/artproject.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Add get involved section styles for small tablet

This commit is contained in:
wswidzinski 2018-01-12 23:27:03 +01:00
parent 8e75142564
commit 7d883aed15
2 changed files with 70 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
src/hbs/partials/components/get-involved.hbs
View File

@ -1,39 +1,43 @@
<section class="section get-involved">
<div class="get-involved__container">
<div class="get-involved__content">
{{> components/heading
text=getInvolved.header
class="get-involed__header"
}}
{{> components/heading
text=getInvolved.header
class="get-involved__header"
}}
<div class="get-involved__description text--medium">
{{ getInvolved.description }}
<div class="get-involved__wrapper">
<div class="get-involved__content">
<div class="get-involved__description text--medium">
{{ getInvolved.description }}
</div>
<div class="get-involved__buttons">
{{#each getInvolved.buttons as |button|}}
{{> components/button
class="get-involved__button"
outlineColor="#fff"
label=button.label
icon=(svg button.icon)
}}
{{/each}}
</div>
</div>
{{#each getInvolved.buttons as |button|}}
{{> components/button
class="get-involved__button"
outlineColor="#fff"
label=button.label
icon=(svg button.icon)
}}
{{/each}}
</div>
<div class="get-involved__details">
<div class="get-involved__details-title text--small">
{{ getInvolved.details.title }}
</div>
<div class="get-involved__details">
<div class="get-involved__details-title text--small">
{{ getInvolved.details.title }}
</div>
<ul class="get-involved__list text-small">
{{#each getInvolved.details.list as |listItem|}}
<li class="get-involved__list-item">{{ listItem }}</li>
{{/each}}
</ul>
<ul class="get-involved__list text-small">
{{#each getInvolved.details.list as |listItem|}}
<li class="get-involved__list-item">{{ listItem }}</li>
{{/each}}
</ul>
<div class="get-involved__counter">
{{ getInvolved.counter }}
<div class="get-involved__counter">
{{ getInvolved.counter }}
</div>
</div>
</div>

38
src/styles/components/_get-involved.scss
View File

@ -1,4 +1,7 @@
.get-involved {
display: flex;
align-items: center;
min-height: calc(100vh - #{$header-height--desktop});
color: $color-white;
background-color: $color-gray;
@ -12,6 +15,19 @@
font-weight: 300;
}
&__content {
@media #{$screen-sm} {
width: 50%;
padding-right: 25px;
}
}
&__details {
@media #{$screen-sm} {
width: 50%;
}
}
&__counter {
font-size: 24px;
}
@ -20,12 +36,34 @@
&__header,
&__description,
&__button,
&__details,
&__details-title {
margin-top: 24px;
}
&__buttons {
@media #{$screen-sm} {
display: flex;
flex-direction: column;
}
@media #{$screen-md} {
display: block;
}
}
&__wrapper {
@media #{$screen-sm} {
display: flex;
}
}
&__button + &__button {
margin-top: 20px;
@media #{$screen-md} {
margin-left: 10px;
}
}
&__list {