ben.carrasco/next-static-site
1
0
Fork 0
mirror of https://github.com/jambonz/next-static-site.git synced 2025-12-19 04:47:44 +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

22
pages/why.js
View File

@@ -7,17 +7,19 @@ function Facts({data}) {
return (
<div className="bg-pink facts">
<div className="wrap facts__wrap">
{data.map((fact) => {
return (
<div key={nanoid()} className="facts__item">
<Icon name={fact.icon} style="fill" />
<div className="facts__text">
<H5><strong>{fact.title}</strong></H5>
<P>{fact.text}</P>
<div className="facts__items">
{data.map((fact) => {
return (
<div key={nanoid()} className="facts__item">
<Icon name={fact.icon} style="fill" />
<div className="facts__text">
<H5><strong>{fact.title}</strong></H5>
<P>{fact.text}</P>
</div>
</div>
</div>
);
})}
);
})}
</div>
</div>
</div>
);

51
styles/pages/_why.scss
View File

@@ -2,12 +2,15 @@
* Jambonz Facts
*******************************************************************************/
.facts {
padding-top: 96px;
padding-bottom: 32px;
padding-bottom: 96px;
padding-top: 32px;
@media (max-width: $width-tablet-1) {
padding-top: 64px;
padding-bottom: 0;
padding-bottom: 64px;
}
@media (max-width: $width-tablet-2) {
padding-top: 0;
}
.icon {
@@ -26,24 +29,35 @@
}
}
&__wrap {
&__items {
display: flex;
justify-content: space-between;
justify-content: center;
flex-wrap: wrap;
@media (max-width: $width-tablet-1) {
margin: 0 -16px;
}
@media (max-width: $width-tablet-2) {
margin: 0;
}
}
&__item {
width: 100%;
max-width: 50%;
width: 38.8888888889vw;
max-width: 560px;
display: flex;
align-items: flex-start;
padding-bottom: 64px;
margin: 0 32px;
padding-top: 64px;
@media (max-width: $width-tablet-2) {
max-width: 100%;
@media (max-width: $width-tablet-1) {
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;
text-align: center;
justify-content: center;
@@ -53,23 +67,14 @@
&__text {
width: calc(100% - #{$icon-size-1});
padding-left: 16px;
padding-right: 64px;
> div + div {
margin-top: 16px;
}
@media (max-width: $width-tablet-1) {
padding-right: 32px;
}
@media (max-width: $width-tablet-2) {
padding-right: 0;
}
@media (max-width: $width-mobile) {
width: 100%;
padding: 0 16px;
padding: 0;
margin-top: 16px;
}
}