diff --git a/src/style/pages/_homepage.scss b/src/style/pages/_homepage.scss index be49540..354dedd 100644 --- a/src/style/pages/_homepage.scss +++ b/src/style/pages/_homepage.scss @@ -27,7 +27,11 @@ color: $color-text; text-align: center; overflow: hidden; - padding-bottom: clamp(250px, 27vw, 600px); + padding-bottom: calc(96px + 5vw); + + @include bp (sm) { + padding-bottom: calc(280px + 10vw); + } // Button .button { @@ -73,45 +77,48 @@ &__photos { position: relative; max-width: 2000px; - height: clamp(400px, 45vw, 900px); - margin: calc(-1 * clamp(200px, 20vw, 500px)) auto 0; + margin: calc(-1 * 96px + 5vw) 0 80px; @include bp (sm) { - margin: calc(-1 * clamp(300px, 20vw, 500px)) auto 0; + margin: calc(-1 * clamp(300px, 20vw, 500px)) auto clamp(64px, 6.5vw, 128px); } } &__collage { display: grid; grid-template-columns: repeat(16, 1fr); - grid-template-rows: repeat(2, 1fr); - margin: 0 -140px; + grid-template-rows: repeat(3, 1fr); + margin: 0 -14vw; + height: 110vw; @include bp (sm) { grid-template-columns: repeat(32, 1fr); + grid-template-rows: repeat(2, 1fr); + margin: 0 -140px; + height: clamp(400px, 40vw, 800px); } .photo-card { position: relative; display: block; - grid-column-end: span 4; + grid-column-end: span 8; + height: 100%; margin-left: auto; margin-right: auto; transform: rotate(var(--rotation)) translateZ(0); @include bp (sm) { height: clamp(156px, 18vw, 400px); - grid-column-end: span 8; - } - - img { - display: block; - width: 100%; - height: auto; } picture { background: $color-primary-tertiary20; } + img { + display: block; + width: 100%; + height: 100%; + object-fit: cover; + } a { display: block; cursor: zoom-in; @@ -120,53 +127,74 @@ } // First row + // Mobile: Top left &:nth-child(1) { --rotation: -10.5deg; z-index: 5; - grid-column-start: 9; + grid-column-start: 2; grid-row: 1; - top: -100px; @include bp (sm) { - z-index: 11; - top: clamp(16px, 3vw, 48px); - grid-column-start: 2; + z-index: 10; + top: clamp(24px, 8vw, 128px); } } + // Mobile: Middle left &:nth-child(2) { --rotation: 3deg; z-index: 3; - grid-column-start: 7; - grid-row: 1; - margin-left: 0; - top: clamp(16px, 3vw, 48px); + grid-column-start: 1; + grid-row: 2; + margin-top: -10vw; + left: -20vw; @include bp (sm) { z-index: 7; + grid-column-start: 7; + grid-row: 1; + top: clamp(16px, 3vw, 48px); + margin-top: 0; + left: 0; } } + // Mobile: Middle center &:nth-child(3) { z-index: 4; - grid-column-start: 13; - grid-row: 1; + grid-column-start: 5; + grid-row: 2; + margin-top: -12vw; @include bp (sm) { z-index: 6; + grid-column-start: 13; + grid-row: 1; + margin-top: 0; } } + // Mobile: Middle right &:nth-child(4) { --rotation: -3deg; - z-index: 2; - grid-column-start: 19; - grid-row: 1; - top: clamp(16px, 3vw, 48px); + z-index: 3; + grid-column-start: 8; + grid-row: 2; + margin-top: -7vw; + left: 20vw; + + @include bp (sm) { + z-index: 2; + grid-column-start: 19; + grid-row: 1; + top: clamp(16px, 3vw, 48px); + margin-top: 0; + left: 0; + } } + // Mobile: Top right &:nth-child(5) { --rotation: 10.5deg; z-index: 6; - grid-column-start: 16; + grid-column-start: 8; grid-row: 1; - top: -80px; @include bp (sm) { z-index: 1; @@ -177,74 +205,82 @@ // Second row &:nth-child(6) { - --rotation: -5.5deg; display: none; - z-index: 10; - grid-column-start: 1; - grid-row: 2; - top: clamp(24px, 5.5vw, 132px); + --rotation: -5.5deg; @include bp (sm) { display: block; + z-index: 9; + grid-column-start: 1; + grid-row: 2; + top: clamp(24px, 5.5vw, 88px); } } &:nth-child(7) { display: none; --rotation: -8deg; - grid-column-start: 5; - z-index: 9; - grid-row: 1; @include bp (sm) { display: block; + z-index: 8; + grid-column-start: 5; grid-row: 2; } } + // Mobile: Bottom left &:nth-child(8) { --rotation: 8deg; z-index: 2; - grid-column-start: 10; - grid-row: 2; - top: calc(-1 * clamp(20px, 3vw, 48px)); + grid-column-start: 2; + grid-row: 3; + margin-top: -16vw; @include bp (sm) { + z-index: 5; grid-column-start: 11; + grid-row: 2; + top: calc(-1 * clamp(20px, 3vw, 48px)); + margin-top: 0; } } + // Mobile: Bottom right &:nth-child(9) { --rotation: -2deg; z-index: 1; - grid-column-start: 16; - grid-row: 2; - top: calc(-1 * clamp(20px, 3vw, 48px)); + grid-column-start: 8; + grid-row: 3; + margin-top: -16vw; @include bp (sm) { --rotation: 2deg; z-index: 4; grid-column-start: 15; + grid-row: 2; + top: calc(-1 * clamp(20px, 3vw, 48px)); + margin-top: 0; } } &:nth-child(10) { --rotation: 8deg; display: none; - z-index: 3; - grid-column-start: 21; - grid-row: 2; @include bp (sm) { display: block; + z-index: 3; + grid-column-start: 21; + grid-row: 2; } } &:nth-child(11) { --rotation: 5.5deg; display: none; - z-index: 2; - grid-column-start: 25; - grid-row: 2; - top: clamp(24px, 5.5vw, 132px); - margin-right: 0; @include bp (sm) { + z-index: 2; + grid-column-start: 25; + grid-row: 2; + top: clamp(24px, 5.5vw, 88px); + margin-right: 0; display: block; } }