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

148
src/style/molecules/_photo.scss
View File

@@ -48,45 +48,45 @@
margin: 0;
padding: 0;
}
}
// Image container
&--img {
overflow: hidden;
position: relative;
z-index: 2;
// Image itself
&__picture {
overflow: hidden;
position: relative;
z-index: 2;
display: block;
width: 100%;
border-radius: 0;
background-color: #fff;
box-shadow: 0 8px 18px rgba(#715E4E, 0.2);
user-select: none;
@include breakpoint (sm) {
border-radius: 8px;
}
img {
display: block;
width: 100%;
border-radius: 0;
background-color: #fff;
box-shadow: 0 8px 18px rgba(#715E4E, 0.2);
user-select: none;
height: auto;
}
@include breakpoint (sm) {
border-radius: 8px;
}
img {
display: block;
width: 100%;
height: auto;
}
// Overlay
&:after {
content: "";
position: absolute;
z-index: 2;
opacity: 0;
pointer-events: none;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-color: $color-primary;
display: block;
z-index: 3;
transition: opacity 150ms $ease-inout;
}
// Overlay
&:after {
content: "";
position: absolute;
z-index: 2;
opacity: 0;
pointer-events: none;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-color: $color-primary;
display: block;
z-index: 3;
transition: opacity 150ms $ease-inout;
}
a {
@@ -103,49 +103,49 @@
}
}
}
}
// Date (on the side)
&--date {
display: block;
margin-top: 16px;
padding: 0 pxVW(128);
font-size: rem(14px);
color: $color-lightgray;
// Date (on the side)
&__date {
display: block;
margin-top: 16px;
padding: 0 pxVW(128);
font-size: rem(14px);
color: $color-lightgray;
@include breakpoint (sm) {
position: absolute;
z-index: 3;
left: calc(100% + 30px);
bottom: 0;
transform: rotate(270deg);
transform-origin: 0 0;
white-space: nowrap;
line-height: 0;
padding: 0;
}
}
// Photo number
&--number {
@include breakpoint (sm) {
position: absolute;
bottom: -80px;
right: 24px;
font-family: $font-serif-extra;
color: rgba($color-tertiary, 0.5);
font-size: rem(124px);
pointer-events: none;
user-select: none;
z-index: 3;
left: calc(100% + 30px);
bottom: 0;
transform: rotate(270deg);
transform-origin: 0 0;
white-space: nowrap;
line-height: 0;
padding: 0;
}
}
@include breakpoint (sm) {
font-size: pxVW(300);
left: 92%;
top: 50%;
z-index: 1;
transform: translate(-50%, -50%);
}
@include breakpoint (xxl) {
font-size: rem(300px);
}
// Photo number
&__number {
position: absolute;
bottom: -80px;
right: 24px;
font-family: $font-serif-extra;
color: rgba($color-tertiary, 0.5);
font-size: rem(124px);
pointer-events: none;
user-select: none;
@include breakpoint (sm) {
font-size: pxVW(300);
left: 92%;
top: 50%;
z-index: 1;
transform: translate(-50%, -50%);
}
@include breakpoint (xxl) {
font-size: rem(300px);
}
}
}