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

8
src/molecules/Photo.svelte
View File

@@ -33,7 +33,7 @@
onMount(() => {
// Parallax on photo when the image has been loaded
const parallaxNumber = basicScroll.default.create({
elem: photoElement.querySelector('.photo__image--number'),
elem: photoElement.querySelector('.photo__number'),
direct: photoElement,
from: 'top-bottom',
to: 'bottom-top',
@@ -64,7 +64,7 @@
<div class="photo__image wrap">
<div class="align">
<a href={photoHref}>
<picture class="photo__image--img">
<picture class="photo__picture">
{#if layout === 'list'}
<source media="(min-width: 992px)" data-srcset={fn.getThumbnail(photo.image.private_hash, 1300)}>
<source media="(min-width: 768px)" data-srcset={fn.getThumbnail(photo.image.private_hash, 992)}>
@@ -86,10 +86,10 @@
{/if}
</picture>
</a>
<time class="photo__image--date" datetime={dayjs(photo.date).format('YYYY-MM-DDThh:mm:ss')}>
<time class="photo__date" datetime={dayjs(photo.date).format('YYYY-MM-DDThh:mm:ss')}>
{dayjs(photo.date).format('MMM Do, YYYY')}
</time>
<span class="photo__image--number">{(index < 10 ? '0': '') + index}</span>
<span class="photo__number">{(index < 10 ? '0': '') + index}</span>
</div>
</div>
</div>

11
src/molecules/Switcher.svelte
View File

@@ -49,14 +49,3 @@
</a>
</div>
</div>
<!-- <div class="switcher switcher--side">
<p class="switcher__location">
<a href="/">Houses <span class="caps">{locationOf}</span></a> <br>
<strong class="name">{locationName}</strong>
</p>
<a href="/choose" class="switcher__icon icon is-medium has-text-danger">
<i class="fas fa-exchange-alt fa-lg"></i>
</a>
</div> -->

26
src/organisms/Carousel.svelte
View File

@@ -81,7 +81,7 @@
// Hover function
hover = event => {
const button = event.currentTarget.querySelector('button')
const photoActive = document.querySelector('.gallery__images .active')
const photoActive = document.querySelector('.gallery__photo--active')
let photoToHover
if (event.currentTarget.dataset.to === 'prev') {
@@ -122,10 +122,10 @@
<div class="gallery">
<div class="gallery__images">
{#each photos as photo, index}
<picture class="gallery__images--photo"
class:prev={photo === prevPhoto}
class:active={photo === currentPhoto}
class:next={photo === nextPhoto}
<picture class="gallery__photo"
class:gallery__photo--prev={photo === prevPhoto}
class:gallery__photo--active={photo === currentPhoto}
class:gallery__photo--next={photo === nextPhoto}
>
<source media="(min-width: 968px)" srcset={fn.getThumbnail(photo.image.private_hash, 1400)}>
<source media="(min-width: 800px)" srcset={fn.getThumbnail(photo.image.private_hash, 900)}>
@@ -137,14 +137,14 @@
</div>
<div class="carousel__controls">
<div class="carousel__controls--area prev" data-to="prev" on:mouseenter={hover} on:mouseleave={hover} on:click={goToPrev}>
<div class="carousel__area carousel__area--prev" data-to="prev" on:mouseenter={hover} on:mouseleave={hover} on:click={goToPrev}>
<button class="button-control button-control--white dir-left" aria-label="Previous">
<IconArrow direction="left" color="#ff6c89" class="icon" />
<IconArrow direction="left" color="#fff" class="icon" hidden="true" />
</button>
</div>
<div class="carousel__controls--area next" data-to="next" on:mouseenter={hover} on:mouseleave={hover} on:click={goToNext}>
<div class="carousel__area carousel__area--next" data-to="next" on:mouseenter={hover} on:mouseleave={hover} on:click={goToNext}>
<button class="button-control button-control--white dir-right" aria-label="Next">
<IconArrow direction="right" color="#ff6c89" class="icon" />
<IconArrow direction="right" color="#fff" class="icon" hidden="true" />
@@ -160,12 +160,12 @@
</div>
<div class="carousel__infos">
<div class="carousel__infos--locations">
<div class="carousel__locations">
{#each photos as photo, index}
<div class="carousel__infos--location style-location"
class:prev={photo === prevPhoto}
class:active={photo === currentPhoto}
class:next={photo === nextPhoto}
<div class="carousel__location style-location"
class:carousel__location--prev={photo === prevPhoto}
class:carousel__location--active={photo === currentPhoto}
class:carousel__location--next={photo === nextPhoto}
>
<p class="street">{photo.name}</p>
<p class="state style-caps style-caps--transparent">
@@ -175,7 +175,7 @@
{/each}
</div>
{#if viewer}
<p class="carousel__infos--date">{dayjs(currentPhoto.created_on).format('MMM Do, YYYY')}</p>
<p class="carousel__date">{dayjs(currentPhoto.created_on).format('MMM Do, YYYY')}</p>
{/if}
</div>

2
src/routes/credits.svelte
View File

@@ -48,7 +48,7 @@
<div class="page__list">
{#each credits as category}
<div class="page__list--category">
<div class="page__category">
<h2 class="title-category">{category.name}</h2>
{#each category.credits as person}
<dl>

9
src/routes/location/[country]/[location].svelte
View File

@@ -129,7 +129,7 @@
</a>
</div>
<div class="place__description--wrap wrap">
<div class="place__wrap wrap">
<div class="place__description">
<div class="wrapper">
<p>{$site.description}</p>
@@ -158,9 +158,10 @@
</section>
<section class="photos photos--{layoutSetting || 'list'}">
<div class="photos__side--wrap wrap">
<div class="photos__sidewrap wrap">
<aside class="photos__side">
<Switcher type="switcher--side" />
<p class="updated style-caps">
<strong>Updated</strong>
<time datetime={dateUpdatedDatetime} title={dateUpdatedFull}>{lastUpdated}</time>
@@ -186,8 +187,8 @@
on:mouseenter={() => pageTranslate = pageTranslate - ((100 / pagesTotal) * 0.666)}
on:mouseleave={() => pageTranslate = pageTranslate + ((100 / pagesTotal) * 0.666)}
>
<div class="pagination__page--info">page</div>
<div class="pagination__page--numbers">
<div class="pagination__info">page</div>
<div class="pagination__numbers">
<div class="scroll" style="transform: translateY(-{pageTranslate}%);">
{#each pages as page}
<span>{page}</span>

2
src/style/atoms/_link.scss
View File

@@ -67,6 +67,8 @@
// Link with animated letters
.link-translate {
display: inline-block;
.text {
position: relative;
overflow: hidden;

85
src/style/molecules/_location.scss Normal file
View File

@@ -0,0 +1,85 @@
// 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;
}
// Hover
&:hover {
.location__city {
color: $color-tertiary;
}
&:after {
opacity: 1;
transform: translate(-50%, -50%) scale(1);
}
}
// 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;
}
}

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);
}
}
}

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;
}
}

13
src/style/molecules/_footer.scss → src/style/organisms/_footer.scss
View File

@@ -43,6 +43,7 @@
li {
display: block;
text-align: center;
height: 100%;
& > ul {
display: flex;
@@ -57,6 +58,10 @@
li {
margin: 0 20px;
}
a {
display: block;
}
}
}
@@ -84,7 +89,7 @@
justify-content: center;
}
img {
display: inline-block;
display: block;
}
}
@@ -99,8 +104,8 @@
}
img {
display: inline-block;
margin: 8px 0 0 12px;
display: block;
margin: 3px 0 0 12px;
transition: transform 400ms $ease-quart;
will-change: transform;
@@ -111,7 +116,7 @@
// Hover
a:hover img {
transform: scale(1.025);
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);
}
}
}
}
}

72
src/style/molecules/_pagination.scss → src/style/organisms/_pagination.scss
View File

@@ -30,48 +30,48 @@
font-size: rem(160px);
}
// 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);
}
}
// 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;

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;
}
}

2
src/style/pages/_homepage.scss
View File

@@ -50,7 +50,7 @@
}
// Photos
.gallery__images--photo {
.gallery__photo {
&:before {
background-color: $color-secondary;
}

33
src/style/pages/_page.scss
View File

@@ -40,26 +40,23 @@
}
}
// List
&__list {
// Category
&--category {
margin-bottom: 96px;
text-align: center;
// Category
&__category {
margin-bottom: 96px;
text-align: center;
&:last-child {
margin-bottom: 0;
}
&:last-child {
margin-bottom: 0;
}
h2 {
margin-bottom: 56px;
}
dl {
margin-bottom: 40px;
}
dt {
margin-bottom: 8px;
}
h2 {
margin-bottom: 56px;
}
dl {
margin-bottom: 40px;
}
dt {
margin-bottom: 8px;
}
}

12
src/style/pages/_place.scss
View File

@@ -124,14 +124,14 @@
height: 100%;
background-color: $color-tertiary;
}
}
// Wrap
&--wrap {
padding: 0;
// Wrap
&__wrap {
padding: 0;
@include breakpoint (md) {
padding-left: 128px;
}
@include breakpoint (md) {
padding-left: 128px;
}
}

7
src/style/style.scss
View File

@@ -22,15 +22,16 @@
@import "atoms/switcher";
// Molecules
@import "molecules/location";
@import "molecules/photo";
@import "molecules/pagination";
@import "molecules/globe";
@import "molecules/footer";
// Organisms
@import "organisms/locations";
@import "organisms/carousel";
@import "organisms/photos";
@import "organisms/locations";
@import "organisms/pagination";
@import "organisms/footer";
// Layouts
@import "layouts/explore";