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

Use shorthand to spread grid column

Browse Source
This commit is contained in:
Félix Péault
2022-08-03 10:47:22 +02:00
parent 821e8752e6
commit 297f2ac300
9 changed files with 25 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/style/layout/_grid.scss
View File

@@ -5,7 +5,7 @@
--columns: #{$cols-m}; --columns: #{$cols-m};
display: grid; display: grid;
grid-template-columns: repeat(var(--columns), 1fr); grid-template-columns: repeat(var(--columns), 1fr);
grid-column: 1 / span var(--columns); grid-column: 1 / -1;
align-items: start; align-items: start;
@include bp (sm) { @include bp (sm) {

2
src/style/layout/_modules.scss
View File

@@ -7,7 +7,7 @@
.wrap { .wrap {
display: block; display: block;
grid-column: span var(--columns); grid-column: 1 / -1;
@include bp (sm) { @include bp (sm) {
display: grid; display: grid;

5
src/style/layouts/_poster.scss
View File

@@ -9,7 +9,7 @@
&__title { &__title {
overflow: hidden; overflow: hidden;
width: auto; width: auto;
grid-column: 1 / span var(--columns); grid-column: 1 / -1;
display: flex; display: flex;
margin: clamp(72px, 24vw, 180px) 0 clamp(56px, 24vw, 120px); margin: clamp(72px, 24vw, 180px) 0 clamp(56px, 24vw, 120px);
@@ -29,7 +29,6 @@
margin-bottom: 40px; margin-bottom: 40px;
} }
@include bp (sm) { @include bp (sm) {
grid-column: 2 / span calc(var(--columns) - 1);
font-size: clamp(200px, 20vw, 340px); font-size: clamp(200px, 20vw, 340px);
} }
} }
@@ -41,7 +40,7 @@
*/ */
// Poster Display // Poster Display
&__buy { &__buy {
grid-column: 1 / span var(--columns); grid-column: 1 / -1;
margin: 0 20px 48px; margin: 0 20px 48px;
@include bp (sm) { @include bp (sm) {

6
src/style/molecules/_house.scss
View File

@@ -4,7 +4,7 @@
// Information // Information
&__info { &__info {
--delay: 0.2s; --delay: 0.2s;
grid-column: 1 / span var(--columns); grid-column: 1 / -1;
margin-bottom: 32px; margin-bottom: 32px;
padding: 0 20px; padding: 0 20px;
overflow: hidden; overflow: hidden;
@@ -68,12 +68,12 @@
// Photo // Photo
&__photo { &__photo {
position: relative; position: relative;
grid-column: span var(--columns); grid-column: 1 / -1;
opacity: 0; opacity: 0;
transition: opacity 2s var(--ease-quart); transition: opacity 2s var(--ease-quart);
& > a { & > a {
grid-column: span var(--columns); grid-column: 1 / -1;
width: 100%; width: 100%;
height: 100%; height: 100%;
text-decoration: none; text-decoration: none;

8
src/style/pages/_about.scss
View File

@@ -294,7 +294,7 @@
// Modules // Modules
.grid-modules { .grid-modules {
@include bp (sm) { @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); box-shadow: 0px -24px 120px rgba($color-primary-darker, 0.8);
@include bp (sm) { @include bp (sm) {
grid-column: 2 / span calc(var(--columns) - 2); grid-column: 2 / -2;
margin-bottom: 48px; margin-bottom: 48px;
padding: 120px 0; padding: 120px 0;
} }
h2 { h2 {
grid-column: span var(--columns);
margin-bottom: 56px; margin-bottom: 56px;
grid-column: 1 / -1;
color: #fff; color: #fff;
text-align: center; text-align: center;
@@ -325,7 +325,7 @@
} }
.blocks { .blocks {
@include bp (sm) { @include bp (sm) {
grid-column: 4 / span calc(var(--columns) - 6); grid-column: 4 / -4;
display: grid; display: grid;
grid-template-columns: repeat(2, 1fr); grid-template-columns: repeat(2, 1fr);
column-gap: 11.5%; column-gap: 11.5%;

6
src/style/pages/_location.scss
View File

@@ -20,7 +20,7 @@
.title { .title {
position: relative; position: relative;
z-index: 2; z-index: 2;
grid-column: 1 / span var(--columns); grid-column: 1 / -1;
margin: 0 auto; margin: 0 auto;
padding: 0 32px; padding: 0 32px;
font-family: $font-serif; font-family: $font-serif;
@@ -49,7 +49,7 @@
} }
.housesof { .housesof {
grid-column: span var(--columns); grid-column: 1 / -1;
@include bp (sm) { @include bp (sm) {
display: flex; display: flex;
@@ -83,7 +83,7 @@
// Description // Description
&__description { &__description {
grid-column: span var(--columns); grid-column: 1 / -1;
position: relative; position: relative;
z-index: 2; z-index: 2;
margin-bottom: -8px; margin-bottom: -8px;

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

@@ -89,7 +89,7 @@
// Modules // Modules
:global(.grid-modules) { :global(.grid-modules) {
grid-column: span var(--columns); grid-column: 1 / -1;
margin-bottom: 0; margin-bottom: 0;
@include bp (sd) { @include bp (sd) {
@@ -101,7 +101,7 @@
// Photo Grid // Photo Grid
&__grid { &__grid {
display: grid; display: grid;
grid-column: span var(--columns); grid-column: 1 / -1;
// Template: 2 / 1-1 // Template: 2 / 1-1
grid-template-columns: repeat(2, 1fr); grid-template-columns: repeat(2, 1fr);
grid-gap: 16px; grid-gap: 16px;
@@ -453,7 +453,7 @@
* Controls * Controls
*/ */
.controls { .controls {
grid-column: span var(--columns); grid-column: 1 / -1;
display: grid; display: grid;
margin: 48px auto; margin: 48px auto;
align-items: center; align-items: center;
@@ -470,7 +470,7 @@
// Updated Date // Updated Date
&__date { &__date {
grid-column: span var(--columns); grid-column: 1 / -1;
grid-row: 2; grid-row: 2;
font-size: rem(18px); font-size: rem(18px);
color: rgba($color-gray, 0.6); color: rgba($color-gray, 0.6);
@@ -497,7 +497,7 @@
// See More Photos // See More Photos
:global(.button) { :global(.button) {
grid-column: span var(--columns); grid-column: 1 / -1;
padding-left: 24px; padding-left: 24px;
padding-right: 24px; padding-right: 24px;
grid-row: 1; grid-row: 1;
@@ -513,7 +513,7 @@
// Photo Count // Photo Count
&__count { &__count {
grid-column: span var(--columns); grid-column: 1 / -1;
grid-row: 3; grid-row: 3;
text-align: center; text-align: center;
display: flex; display: flex;

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

@@ -23,7 +23,7 @@
top: 0; top: 0;
left: 50%; left: 50%;
transform: translate3d(-50%, 0, 0); transform: translate3d(-50%, 0, 0);
grid-column: span var(--columns); grid-column: 1 / -1;
display: grid; display: grid;
grid-row-gap: 20px; grid-row-gap: 20px;
width: calc(100% - 40px); width: calc(100% - 40px);

8
src/style/pages/shop/_posters.scss
View File

@@ -36,15 +36,15 @@
// Posters Set // Posters Set
.set { .set {
--gap: 24px; --gap: 24px;
grid-column: span calc(var(--columns)); grid-column: 1 / -1;
display: block; display: block;
cursor: grab; cursor: grab;
@include bp (mob-lg) { @include bp (mob-lg) {
grid-column: 2 / span calc(var(--columns) - 2); grid-column: 2 / -2;
} }
@include bp (sm) { @include bp (sm) {
grid-column: 3 / span calc(var(--columns) - 4); grid-column: 3 / -3;
} }
@include bp (md) { @include bp (md) {
cursor: default; cursor: default;
@@ -156,7 +156,7 @@
// Subscribe // Subscribe
.subscribe { .subscribe {
grid-column: 1 / span var(--columns); grid-column: 1 / -1;
max-width: 380px; max-width: 380px;
margin: 56px auto 0; margin: 56px auto 0;
text-align: center; text-align: center;