flayks/housesof
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Readapt the misuse of BEM, Code organization

Browse Source 
- -- is only for a modifier, not a child "child". Use master__child without the parent__ in it to make it more readable.
https://www.smashingmagazine.com/2016/06/battling-bem-extended-edition-common-problems-and-how-to-avoid-them/
- Redefine atom design components
This commit is contained in:
Félix Péault
2020-02-29 18:32:32 +01:00
parent 70ce97e9bc
commit 76c8c31c89
17 changed files with 387 additions and 391 deletions
Download Patch File Download Diff File Expand all files Collapse all files

197
src/style/organisms/_carousel.scss
View File

@@ -41,54 +41,54 @@
height: 0;
padding-bottom: calc(100% / 1.5); // Ratio 3.2
user-select: none;
}
// Photo
&--photo {
$duration: 0.9s;
// Photo
&__photo {
$duration: 0.9s;
opacity: 0;
overflow: hidden;
position: absolute;
z-index: -1;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform: scale($scale);
box-shadow: 0 pxVW(15) pxVW(60) rgba(#000, 0.3);
transition: transform $duration $ease-quart, opacity $duration $ease-quart;
will-change: transform, opacity;
@include breakpoint (sm) {
border-radius: $radius;
}
img {
opacity: 0;
overflow: hidden;
position: relative;
z-index: 1;
display: block;
width: 100%;
height: auto;
}
// Overlay
&:before {
opacity: 0;
content: "";
display: block;
position: absolute;
z-index: -1;
z-index: 2;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform: scale($scale);
box-shadow: 0 pxVW(15) pxVW(60) rgba(#000, 0.3);
transition: transform $duration $ease-quart, opacity $duration $ease-quart;
will-change: transform, opacity;
@include breakpoint (sm) {
border-radius: $radius;
}
img {
opacity: 0;
position: relative;
z-index: 1;
display: block;
width: 100%;
height: auto;
}
// Overlay
&:before {
opacity: 0;
content: "";
display: block;
position: absolute;
z-index: 2;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: $color-primary;
}
right: 0;
bottom: 0;
background-color: $color-primary;
}
// Active photo
.active {
&--active {
opacity: 1;
z-index: 10;
transform: scale(1);
@@ -99,7 +99,7 @@
}
// Previous & next photo
.prev, .next {
&--prev, &--next {
opacity: 1;
img {
@@ -112,7 +112,7 @@
}
// Previous photo
.prev {
&--prev {
z-index: 8;
@include breakpoint (sm) {
@@ -126,7 +126,7 @@
}
// Next photo
.next {
&--next {
z-index: 9;
@include breakpoint (sm) {
@@ -159,28 +159,28 @@
justify-content: space-between;
}
// Hover and clicking area
&--area {
display: flex;
align-items: center;
justify-content: center;
width: 12%;
height: 100%;
cursor: pointer;
&.prev {
margin-left: -6%;
}
&.next {
margin-right: -6%;
}
}
button {
box-shadow: 0 2px 20px rgba(#000, 0.15);
}
}
// Hover and clicking area
&__area {
display: flex;
align-items: center;
justify-content: center;
width: 12%;
height: 100%;
cursor: pointer;
&--prev {
margin-left: -6%;
}
&--next {
margin-right: -6%;
}
}
/*
** Information
@@ -188,49 +188,50 @@
&__infos {
position: relative;
z-index: 3;
}
// Locations
&--locations {
position: relative;
overflow: hidden;
min-height: 128px;
// Locations
&__locations {
position: relative;
overflow: hidden;
min-height: 128px;
}
// Location
&__location {
$distance: 40%;
position: absolute;
top: 0;
left: 0;
width: 100%;
opacity: 0;
text-align: center;
transition: transform 0.9s $ease-quart, opacity 0.9s $ease-quart;
will-change: transform, opacity;
margin-top: 32px;
@include breakpoint (sm) {
margin-top: pxVW(80);
}
@include breakpoint (xl) {
margin-top: 72px;
}
// Location
&--location {
$distance: 40%;
position: absolute;
top: 0;
left: 0;
width: 100%;
opacity: 0;
text-align: center;
transition: transform 0.9s $ease-quart, opacity 0.9s $ease-quart;
will-change: transform, opacity;
margin-top: 32px;
// States
&--prev {
transform: translateY(-$distance);
}
&--active {
transform: translateY(0);
opacity: 1;
}
&--next {
transform: translateY($distance);
}
@include breakpoint (sm) {
margin-top: pxVW(80);
}
@include breakpoint (xl) {
margin-top: 72px;
}
&.prev {
transform: translateY(-$distance);
}
&.active {
transform: translateY(0);
opacity: 1;
}
&.next {
transform: translateY($distance);
}
// State
.state {
margin-top: 6px;
}
// State
.state {
margin-top: 6px;
}
}

123
src/style/organisms/_footer.scss Normal file
View File

@@ -0,0 +1,123 @@
/* ==========================================================================
FOOTER
========================================================================== */
.footer {
background-color: #2D0458;
.wrap {
display: block;
padding-top: 48px;
padding-bottom: 32px;
@include breakpoint (sm) {
display: flex;
justify-content: space-between;
align-items: center;
height: 120px;
padding-top: 0;
padding-bottom: 0;
}
}
// Left part
&__left {
display: flex;
justify-content: center;
margin-bottom: 40px;
@include breakpoint (sm) {
margin: 0;
}
}
// Right part
&__right {
font-size: 14px;
text-align: center;
@include breakpoint (sm) {
display: flex;
align-items: baseline;
}
li {
display: block;
text-align: center;
height: 100%;
& > ul {
display: flex;
justify-content: center;
margin-bottom: 32px;
@include breakpoint (sm) {
margin-bottom: 0;
margin-right: 24px;
}
li {
margin: 0 20px;
}
a {
display: block;
}
}
}
a {
position: relative;
color: #fff;
text-decoration: none;
transition: color 85ms $ease-inout;
img {
margin-right: 16px;
}
// Hover
&:hover {
color: $color-secondary;
}
}
// Instagram
.instagram {
a {
display: inline-flex;
align-items: center;
justify-content: center;
}
img {
display: block;
}
}
// Collective
.cetrucflotte {
display: inline-flex;
align-items: center;
justify-content: center;
span {
color: rgba(#fff, 0.4)
}
img {
display: block;
margin: 3px 0 0 12px;
transition: transform 400ms $ease-quart;
will-change: transform;
@include breakpoint (sm) {
margin-left: 16px;
}
}
// Hover
a:hover img {
transform: scale(1.04);
}
}
}
}

86
src/style/organisms/_locations.scss
View File

@@ -53,88 +53,4 @@
margin-bottom: 232px;
}
}
// Location
.location {
position: relative;
margin-bottom: 48px;
@include breakpoint (sm) {
margin-left: pxVW(72);
margin-right: pxVW(72);
}
@include breakpoint (xl) {
margin-left: 72px;
margin-right: 72px;
}
a {
position: relative;
z-index: 2;
display: flex;
flex-flow: column;
align-items: center;
text-decoration: none;
}
// Flag image
img {
display: block;
width: 32px;
height: auto;
margin: 0 auto;
border-radius: 50vh;
}
// City
&__city {
font-family: $font-serif;
font-size: rem(32px);
color: $color-secondary;
@include breakpoint (sm) {
font-size: rem(48px);
}
}
.mask-city {
height: 40px;
margin: 24px 0 16px;
@include breakpoint (sm) {
height: 64px;
margin-bottom: 24px;
}
}
.mask-country {
height: 16px;
}
// Shape on hover
&:after {
content: "";
pointer-events: none;
opacity: 0;
position: absolute;
z-index: 1;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0.94);
display: block;
width: 216px;
height: 216px;
background: rgba($color-lightpurple, 0.3);
border-radius: 50vh;
transition: all 85ms ease-in-out;
}
&:hover {
.location__city {
color: $color-tertiary;
}
&:after {
opacity: 1;
transform: translate(-50%, -50%) scale(1);
}
}
}
}
}

104
src/style/organisms/_pagination.scss Normal file
View File

@@ -0,0 +1,104 @@
// Pagination
.pagination {
position: relative;
padding: 64px 0 72px;
background-color: $color-tertiary;
text-align: center;
@include breakpoint (sm) {
padding: pxVW(176) 0 pxVW(120);
}
@include breakpoint (xl) {
padding: 176px 0 120px;
}
// Pages
&__page {
position: relative;
display: inline-flex;
justify-content: center;
align-items: center;
margin: 0 auto;
font-family: $font-serif-extra;
font-size: rem(72px);
color: rgba($color-text, 0.15);
line-height: 1;
cursor: pointer;
transition: color 250ms $ease-cubic;
@include breakpoint (sm) {
font-size: rem(160px);
}
// Hover
&:hover {
color: rgba($color-text, 0.25);
}
}
// Numbers
&__numbers {
overflow: hidden;
height: 62px;
margin-right: 4px;
@include breakpoint (sm) {
height: 136px;
}
.scroll {
display: flex;
flex-direction: column;
transform: translate(0, 0);
text-align: right;
line-height: 0.85;
transition: transform 325ms $ease-cubic;
will-change: transform;
}
}
// Info
&__info {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -72%);
font-family: $font-serif;
font-size: 18px;
color: $color-secondary-bright;
@include breakpoint (sm) {
font-size: rem(40px);
}
}
// Caption
&__caption {
max-width: 420px;
margin: 0 auto;
font-size: 10px;
color: $color-lightgray;
letter-spacing: 2px;
line-height: 1.6;
@include breakpoint (sm) {
font-size: 14px;
}
}
// Message
&__message {
padding: pxVW(40) 0;
h3 {
font-family: $font-serif;
font-size: rem(32px);
color: $color-secondary;
margin-bottom: 16px;
@include breakpoint (sm) {
font-size: rem(40px);
}
}
}
}

65
src/style/organisms/_photos.scss
View File

@@ -26,16 +26,6 @@
transform: rotate(-90deg) translateX(-100%);
}
// Container
&--wrap {
@include breakpoint (md) {
position: sticky;
z-index: 10;
top: 32px;
height: 100%;
}
}
p {
font-size: rem(12px);
color: $color-lightgray;
@@ -49,6 +39,16 @@
}
}
// Container
&__sidewrap {
@include breakpoint (md) {
position: sticky;
z-index: 10;
top: 32px;
height: 100%;
}
}
// Each photo
.photo {
position: relative;
@@ -87,14 +87,15 @@
}
// Image
.photo__image {
justify-content: flex-end;
&--date {
.photo {
&__image {
justify-content: flex-end;
}
&__date {
right: 100%;
left: -30px;
}
&--number {
&__number {
right: 77%;
left: auto;
text-align: right;
@@ -104,7 +105,7 @@
}
// Number
&__image--number {
&__number {
@include breakpoint (sm) {
transform: translate(-50%, var(--translate));
will-change: transform;
@@ -185,23 +186,21 @@
}
}
// Image
&__image {
&--img {
border-radius: 8px;
}
&--number {
font-size: rem(96px);
bottom: -88px;
right: 24px;
z-index: 1;
transform: none;
top: auto;
left: auto;
}
&--date {
display: none;
}
// Image informations
&__img {
border-radius: 8px;
}
&__number {
font-size: rem(96px);
bottom: -88px;
right: 24px;
z-index: 1;
transform: none;
top: auto;
left: auto;
}
&__date {
display: none;
}
}