From 297f2ac300ff400513ace761f0f0be61f80c7d61 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fe=CC=81lix=20Pe=CC=81ault?= Date: Wed, 3 Aug 2022 10:47:22 +0200 Subject: [PATCH] Use shorthand to spread grid column --- src/style/layout/_grid.scss | 2 +- src/style/layout/_modules.scss | 2 +- src/style/layouts/_poster.scss | 5 ++--- src/style/molecules/_house.scss | 6 +++--- src/style/pages/_about.scss | 8 ++++---- src/style/pages/_location.scss | 6 +++--- src/style/pages/_photos.scss | 12 ++++++------ src/style/pages/_viewer.scss | 2 +- src/style/pages/shop/_posters.scss | 8 ++++---- 9 files changed, 25 insertions(+), 26 deletions(-) diff --git a/src/style/layout/_grid.scss b/src/style/layout/_grid.scss index c09bdce..52a88c7 100644 --- a/src/style/layout/_grid.scss +++ b/src/style/layout/_grid.scss @@ -5,7 +5,7 @@ --columns: #{$cols-m}; display: grid; grid-template-columns: repeat(var(--columns), 1fr); - grid-column: 1 / span var(--columns); + grid-column: 1 / -1; align-items: start; @include bp (sm) { diff --git a/src/style/layout/_modules.scss b/src/style/layout/_modules.scss index 00c37db..8e5f2d2 100644 --- a/src/style/layout/_modules.scss +++ b/src/style/layout/_modules.scss @@ -7,7 +7,7 @@ .wrap { display: block; - grid-column: span var(--columns); + grid-column: 1 / -1; @include bp (sm) { display: grid; diff --git a/src/style/layouts/_poster.scss b/src/style/layouts/_poster.scss index e6246d1..1a4f93e 100644 --- a/src/style/layouts/_poster.scss +++ b/src/style/layouts/_poster.scss @@ -9,7 +9,7 @@ &__title { overflow: hidden; width: auto; - grid-column: 1 / span var(--columns); + grid-column: 1 / -1; display: flex; margin: clamp(72px, 24vw, 180px) 0 clamp(56px, 24vw, 120px); @@ -29,7 +29,6 @@ margin-bottom: 40px; } @include bp (sm) { - grid-column: 2 / span calc(var(--columns) - 1); font-size: clamp(200px, 20vw, 340px); } } @@ -41,7 +40,7 @@ */ // Poster Display &__buy { - grid-column: 1 / span var(--columns); + grid-column: 1 / -1; margin: 0 20px 48px; @include bp (sm) { diff --git a/src/style/molecules/_house.scss b/src/style/molecules/_house.scss index 793020f..ccd9504 100644 --- a/src/style/molecules/_house.scss +++ b/src/style/molecules/_house.scss @@ -4,7 +4,7 @@ // Information &__info { --delay: 0.2s; - grid-column: 1 / span var(--columns); + grid-column: 1 / -1; margin-bottom: 32px; padding: 0 20px; overflow: hidden; @@ -68,12 +68,12 @@ // Photo &__photo { position: relative; - grid-column: span var(--columns); + grid-column: 1 / -1; opacity: 0; transition: opacity 2s var(--ease-quart); & > a { - grid-column: span var(--columns); + grid-column: 1 / -1; width: 100%; height: 100%; text-decoration: none; diff --git a/src/style/pages/_about.scss b/src/style/pages/_about.scss index 576487a..f8b19fa 100644 --- a/src/style/pages/_about.scss +++ b/src/style/pages/_about.scss @@ -294,7 +294,7 @@ // Modules .grid-modules { @include bp (sm) { - grid-column: 2 / span calc(var(--columns) - 2); + grid-column: 2 / -2; } } } @@ -308,14 +308,14 @@ box-shadow: 0px -24px 120px rgba($color-primary-darker, 0.8); @include bp (sm) { - grid-column: 2 / span calc(var(--columns) - 2); + grid-column: 2 / -2; margin-bottom: 48px; padding: 120px 0; } h2 { - grid-column: span var(--columns); margin-bottom: 56px; + grid-column: 1 / -1; color: #fff; text-align: center; @@ -325,7 +325,7 @@ } .blocks { @include bp (sm) { - grid-column: 4 / span calc(var(--columns) - 6); + grid-column: 4 / -4; display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 11.5%; diff --git a/src/style/pages/_location.scss b/src/style/pages/_location.scss index 90a696c..9060e71 100644 --- a/src/style/pages/_location.scss +++ b/src/style/pages/_location.scss @@ -20,7 +20,7 @@ .title { position: relative; z-index: 2; - grid-column: 1 / span var(--columns); + grid-column: 1 / -1; margin: 0 auto; padding: 0 32px; font-family: $font-serif; @@ -49,7 +49,7 @@ } .housesof { - grid-column: span var(--columns); + grid-column: 1 / -1; @include bp (sm) { display: flex; @@ -83,7 +83,7 @@ // Description &__description { - grid-column: span var(--columns); + grid-column: 1 / -1; position: relative; z-index: 2; margin-bottom: -8px; diff --git a/src/style/pages/_photos.scss b/src/style/pages/_photos.scss index 6908879..2f0b744 100644 --- a/src/style/pages/_photos.scss +++ b/src/style/pages/_photos.scss @@ -89,7 +89,7 @@ // Modules :global(.grid-modules) { - grid-column: span var(--columns); + grid-column: 1 / -1; margin-bottom: 0; @include bp (sd) { @@ -101,7 +101,7 @@ // Photo Grid &__grid { display: grid; - grid-column: span var(--columns); + grid-column: 1 / -1; // Template: 2 / 1-1 grid-template-columns: repeat(2, 1fr); grid-gap: 16px; @@ -453,7 +453,7 @@ * Controls */ .controls { - grid-column: span var(--columns); + grid-column: 1 / -1; display: grid; margin: 48px auto; align-items: center; @@ -470,7 +470,7 @@ // Updated Date &__date { - grid-column: span var(--columns); + grid-column: 1 / -1; grid-row: 2; font-size: rem(18px); color: rgba($color-gray, 0.6); @@ -497,7 +497,7 @@ // See More Photos :global(.button) { - grid-column: span var(--columns); + grid-column: 1 / -1; padding-left: 24px; padding-right: 24px; grid-row: 1; @@ -513,7 +513,7 @@ // Photo Count &__count { - grid-column: span var(--columns); + grid-column: 1 / -1; grid-row: 3; text-align: center; display: flex; diff --git a/src/style/pages/_viewer.scss b/src/style/pages/_viewer.scss index 2e8c875..b3c81f9 100644 --- a/src/style/pages/_viewer.scss +++ b/src/style/pages/_viewer.scss @@ -23,7 +23,7 @@ top: 0; left: 50%; transform: translate3d(-50%, 0, 0); - grid-column: span var(--columns); + grid-column: 1 / -1; display: grid; grid-row-gap: 20px; width: calc(100% - 40px); diff --git a/src/style/pages/shop/_posters.scss b/src/style/pages/shop/_posters.scss index fece985..eccc7ca 100644 --- a/src/style/pages/shop/_posters.scss +++ b/src/style/pages/shop/_posters.scss @@ -36,15 +36,15 @@ // Posters Set .set { --gap: 24px; - grid-column: span calc(var(--columns)); + grid-column: 1 / -1; display: block; cursor: grab; @include bp (mob-lg) { - grid-column: 2 / span calc(var(--columns) - 2); + grid-column: 2 / -2; } @include bp (sm) { - grid-column: 3 / span calc(var(--columns) - 4); + grid-column: 3 / -3; } @include bp (md) { cursor: default; @@ -156,7 +156,7 @@ // Subscribe .subscribe { - grid-column: 1 / span var(--columns); + grid-column: 1 / -1; max-width: 380px; margin: 56px auto 0; text-align: center;