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

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

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

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

@@ -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) {

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

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

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

@@ -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%;

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

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

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

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

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

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

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

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