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 desktop styles for part of the components

Browse Source
This commit is contained in:
Maciej Matuszewski 2018-01-11 01:10:40 +01:00
parent e0d9b10f23
commit 272b556918
2 changed files with 113 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
src/hbs/partials/components/project.hbs
View File

@ -2,30 +2,34 @@
{{> components/heading
text=project.header
class="project_header"
class="project__header"
}}
<div class="project__content">
<div class="project__subheader">{{ project.subheader }}</div>
<div class="project__wrapper">
<div class="project__content">
<div class="project__subheader">{{ project.subheader }}</div>
{{#each project.content as |paragraph|}}
<p>{{ paragraph }}</p>
{{/each}}
{{> components/button
class="project__button"
backgroundColor="#ff5301"
label=project.button.label
icon=(svg project.button.icon)
}}
</div>
<div class="project__images">
{{#each project.images as |imageSrc|}}
<img src={{imageSrc}} class="project__image project__image--{{@index}}" alt="" />
{{/each}}
</div>
{{#each project.content as |paragraph|}}
<p>{{ paragraph }}</p>
{{/each}}
</div>
<div class="project__images">
{{#each project.images as |imageSrc|}}
<img src={{imageSrc}} class="project__image project__image--{{@index}}" alt="" />
{{/each}}
</div>
{{> components/button
class="project__button"
backgroundColor="#ff5301"
label=project.button.label
icon=(svg project.button.icon)
}}
<div class="project__counter">{{ project.counterText }}</div>
<a href="#" class="project__link">

93
src/styles/components/_project.scss
View File

@ -4,10 +4,35 @@
color: $color-white;
background-color: $color-orange;
&__header {
@media #{$screen-md} {
position: absolute;
bottom: 100px;
left: 40px;
}
}
&__content {
margin-top: 20px;
font-size: 18px;
font-weight: 300;
@media #{$screen-sm} {
padding-right: 20px;
}
@media #{$screen-md} {
width: 60%;
padding-right: 0;
padding-left: 50px;
}
}
&__content,
&__images {
@media #{$screen-sm} {
width: 50%;
}
}
&__subheader {
@ -16,15 +41,48 @@
&__images {
padding-top: 10px;
@media #{$screen-sm} {
display: flex;
align-items: center;
flex-direction: column;
margin-top: -50px;
}
@media #{$screen-md} {
width: 40%;
margin-top: 0;
}
}
&__image {
max-width: 100%;
width: 100%;
margin: 10px 0;
@media #{$screen-sm} {
width: 80%;
max-width: 250px;
&--1 {
margin-top: -50px;
margin-left: 80px;
}
&--2 {
margin-top: -70px;
margin-left: 10px;
}
}
}
&__button {
margin-top: 10px;
margin: 10px 0;
@media #{$screen-md} {
position: absolute;
top: 55%;
left: 20%;
}
}
&__counter {
@ -32,8 +90,19 @@
bottom: 20%;
left: 22px;
font-size: 24px;
transform: rotate(-90deg);
transform: rotate(90deg);
transform-origin: left center;
@media #{$screen-sm} {
right: 0;
left: initial;
}
@media #{$screen-md} {
right: 50px;
bottom: 20px;
transform-origin: right center;
}
}
&__link {
@ -42,4 +111,22 @@
font-size: 12px;
text-transform: uppercase;
}
&__wrapper {
@media #{$screen-sm} {
display: flex;
}
@media #{$screen-md} {
flex-direction: row-reverse;
}
}
@media #{$screen-md} {
padding: 50px;
}
@media #{$screen-lg} {
padding: 80px;
}
}