ben.carrasco/next-static-site
1
0
Fork 0
mirror of https://github.com/jambonz/next-static-site.git synced 2026-10-04 02:04:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

Refactor facts layout on Why jambonz page

Browse Source
This commit is contained in:
kitajchuk
2021-04-06 09:14:34 -07:00
parent 9fef8c0e2e
commit a912bb3723
2 changed files with 40 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/why.js
+12 -10
View File
@@ -7,17 +7,19 @@ function Facts({data}) {
return ( return (
<div className="bg-pink facts"> <div className="bg-pink facts">
<div className="wrap facts__wrap"> <div className="wrap facts__wrap">
{data.map((fact) => { <div className="facts__items">
return ( {data.map((fact) => {
<div key={nanoid()} className="facts__item"> return (
<Icon name={fact.icon} style="fill" /> <div key={nanoid()} className="facts__item">
<div className="facts__text"> <Icon name={fact.icon} style="fill" />
<H5><strong>{fact.title}</strong></H5> <div className="facts__text">
<P>{fact.text}</P> <H5><strong>{fact.title}</strong></H5>
<P>{fact.text}</P>
</div>
</div> </div>
</div> );
); })}
})} </div>
</div> </div>
</div> </div>
); );
styles/pages/_why.scss
+28 -23
View File
@@ -2,12 +2,15 @@
* Jambonz Facts * Jambonz Facts
*******************************************************************************/ *******************************************************************************/
.facts { .facts {
padding-top: 96px; padding-bottom: 96px;
padding-bottom: 32px; padding-top: 32px;
@media (max-width: $width-tablet-1) { @media (max-width: $width-tablet-1) {
padding-top: 64px; padding-bottom: 64px;
padding-bottom: 0; }
@media (max-width: $width-tablet-2) {
padding-top: 0;
} }
.icon { .icon {
@@ -26,24 +29,35 @@
} }
} }
&__wrap { &__items {
display: flex; display: flex;
justify-content: space-between; justify-content: center;
flex-wrap: wrap; flex-wrap: wrap;
@media (max-width: $width-tablet-1) {
margin: 0 -16px;
}
@media (max-width: $width-tablet-2) {
margin: 0;
}
} }
&__item { &__item {
width: 100%; width: 38.8888888889vw;
max-width: 50%; max-width: 560px;
display: flex; display: flex;
align-items: flex-start; margin: 0 32px;
padding-bottom: 64px; padding-top: 64px;
@media (max-width: $width-tablet-2) { @media (max-width: $width-tablet-1) {
max-width: 100%; width: calc(50% - 32px);
margin: 0 16px;
} }
@media (max-width: $width-mobile) { @media (max-width: $width-tablet-2) {
width: 100%;
margin: 0;
flex-wrap: wrap; flex-wrap: wrap;
text-align: center; text-align: center;
justify-content: center; justify-content: center;
@@ -53,23 +67,14 @@
&__text { &__text {
width: calc(100% - #{$icon-size-1}); width: calc(100% - #{$icon-size-1});
padding-left: 16px; padding-left: 16px;
padding-right: 64px;
> div + div { > div + div {
margin-top: 16px; margin-top: 16px;
} }
@media (max-width: $width-tablet-1) {
padding-right: 32px;
}
@media (max-width: $width-tablet-2) { @media (max-width: $width-tablet-2) {
padding-right: 0;
}
@media (max-width: $width-mobile) {
width: 100%; width: 100%;
padding: 0 16px; padding: 0;
margin-top: 16px; margin-top: 16px;
} }
} }