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

Merge branch 'v2' of https://git.server.flayks.com/cetrucflotte/housesof into v2

Browse Source
This commit is contained in:
Shelby Kay
2021-10-07 14:47:55 +02:00
parent c66b8b0d90 3679ac9432
commit d397fdb00f
14 changed files with 273 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -11,7 +11,7 @@
}
display: block;
grid-column: 1 / span var(--columns);
grid-column: span var(--columns);
grid-template-columns: 1fr 40%;
grid-column-gap: 48px;
padding: 0;

8
src/style/molecules/_switcher.scss
View File

@@ -2,10 +2,14 @@
$shadow-color: rgba(0, 0, 0, 0.05);
position: fixed;
z-index: 999;
bottom: 0;
left: 0;
bottom: 16px;
left: 16px;
@include bp (sm) {
bottom: 20px;
left: 20px;
}
@include bp (md) {
bottom: 40px;
left: 40px;
}

6
src/style/organisms/_footer.scss
View File

@@ -13,7 +13,7 @@
}
.site-title {
grid-column: 1 / span var(--columns);
grid-column: span var(--columns);
grid-row: 1;
margin-bottom: 40px;
@@ -29,7 +29,7 @@
}
&__links {
grid-column: 1 / span var(--columns);
grid-column: span var(--columns);
grid-row: 2;
@include bp (sm) {
@@ -69,7 +69,7 @@
}
&__ctf {
grid-column: 1 / span var(--columns);
grid-column: span var(--columns);
grid-row: 2;
margin-left: auto;
margin-top: auto;

8
src/style/organisms/_newsletter.scss
View File

@@ -98,21 +98,23 @@
}
a {
display: flex;
align-items: center;
text-decoration: none;
color: $color-text;
}
span {
display: block;
padding-bottom: 2px;
font-size: rem(14px);
color: $color-text;
margin-left: 8px;
border-bottom: 1px solid $color-text;
@include bp (sm) {
margin-left: 16px;
margin-left: 12px;
}
}
p {
color: $color-gray;
line-height: 1.3;

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

@@ -52,7 +52,7 @@
line-height: 1;
@include bp (sm) {
grid-column: 1 / span 8;
grid-column: span 8;
font-size: rem(28px);
}
}

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

@@ -41,7 +41,7 @@
// Modules
.grid-modules {
grid-column: 1 / span var(--columns);
grid-column: span var(--columns);
margin: 96px 20px 0;
padding-bottom: 40px;

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

@@ -9,9 +9,9 @@
// Title
h1 {
margin-top: -20px;
color: $color-secondary;
line-height: 1;
margin-top: -20px;
@include bp (sm) {
margin-top: -100px;
@@ -19,7 +19,7 @@
}
// Text
p {
max-width: 350px;
max-width: 456px;
margin: 20px auto 56px;
@include bp (sm) {
@@ -34,7 +34,11 @@
position: relative;
max-width: 982px;
margin: 0 auto;
padding: 0 32px;
padding: 0 16px;
@include bp (sm) {
padding: 0 32px;
}
// Span
&__label {
@@ -54,13 +58,17 @@
display: flex;
justify-content: center;
align-items: center;
height: 72px;
min-height: 64px;
margin: 20px 0;
padding: 0 22px;
padding: 0 12px;
background: $color-primary-darker;
border-radius: 50vh;
@include bp (mob-lg) {
padding: 0 16px;
}
@include bp (sm) {
height: 72px;
padding: 28px 32px;
}
@@ -72,20 +80,28 @@
}
li {
display: block;
margin: 8px 10px;
font-size: rem(16px);
margin: 8px 2px;
font-size: rem(14px);
color: #fff;
@include bp (sm) {
margin: 0 2px;
font-size: rem(16px);
}
}
img {
color: #fff;
.icon {
display: block;
width: 20px;
height: 20px;
overflow: hidden;
margin-right: 12px;
fill: #fff;
border-radius: 100%;
transition: fill 0.2s;
@include bp (sm) {
margin-right: 16px;
width: 26px;
height: 26px;
}
}
@@ -93,11 +109,15 @@
position: relative;
display: flex;
align-items: center;
padding: 8px 16px;
padding: 8px 12px 8px 8px;
font-weight: 900;
border-radius: 100vh;
transition: background-color 0.2s;
@include bp (sm) {
padding: 8px 16px;
}
select {
opacity: 0;
position: absolute;
@@ -107,8 +127,14 @@
height: 100%;
cursor: pointer;
}
}
&:hover {
// Hover
li:hover {
.icon {
fill: $color-secondary-light;
}
.select {
background-color: $color-primary-tertiary20;
}
}
@@ -142,6 +168,11 @@
// Reset link
.reset {
margin-right: 16px;
padding: 0;
color: rgba($color-tertiary, 0.6);
font-weight: 900;
font-size: rem(14px);
transition: color 0.3s;
&:hover {
@@ -158,7 +189,6 @@
background-color: $color-tertiary;
padding: 0 16px;
border-radius: 50vh;
margin-left: 16px;
}
}
}
@@ -166,18 +196,38 @@
// Content Block
&__content {
background-color: $color-tertiary;
width: 100%;
// margin: 0 12px;
padding: 64px 0;
padding: 20px 0;
border-radius: 6px;
@include bp (sm) {
padding: 64px 0;
border-radius: 8px;
}
}
// Photo Grid
&__grid {
grid-column: 2 / span 22;
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 40px;
grid-column: span var(--columns);
// Template: 2 / 1-1
grid-template-columns: repeat(2, 1fr);
grid-gap: 16px;
@include bp (mob-lg) {
grid-gap: 20px;
}
@include bp (sm) {
// Swich to template: 2-1-1 / 1-1-2 / 4
grid-column: 2 / span 22;
grid-template-columns: repeat(4, 1fr);
grid-gap: 24px;
}
@include bp (sd) {
grid-gap: 40px;
}
// Photo
.photo {
overflow: hidden;
border-radius: 6px;
@@ -188,7 +238,6 @@
height: 100%;
& > picture {
width: 100%;
height: 100%;
img {
@@ -196,32 +245,90 @@
width: 100%;
height: 100%;
object-fit: cover;
pointer-events: none;
user-select: none;
}
}
}
/**
* Photo sizes
*/
// MOBILE
// 1st photo = 2 columns
&:nth-child(5n + 1) {
@include bp (sm, max) {
grid-column: span 2;
grid-row: span 2;
margin-bottom: 8px;
}
}
// 4 next photos = 1 column each
&:nth-child(5n + 4),
&:nth-child(5n + 5) {
@include bp (sm, max) {
margin-bottom: 8px;
}
}
// DESKTOP
// 1st photo = left 2 columns, 2 rows
&:nth-child(11n + 1){
@include bp (sm) {
grid-column: span 2;
grid-row: span 2;
}
}
// 8th photo = right 2 columns, 2 rows
&:nth-child(11n + 8){
@include bp (sm) {
grid-column: 3 / span 2;
grid-row: span 2;
}
}
// 11th photo = 4 columns
&:nth-child(11n){
@include bp (sm) {
grid-column: span 4;
}
}
// Additional spacing between grid patterns
&:nth-child(11n + 11){
@include bp (sm) {
margin-top: 12px;
}
@include bp (sd) {
margin-top: 16px;
}
}
&:nth-child(11n),
&:nth-child(11n + 1),
&:nth-child(11n + 4),
&:nth-child(11n + 5){
@include bp (sm) {
margin-bottom: 12px;
}
@include bp (sd) {
margin-bottom: 16px;
}
}
// Postcard
.post-card {
position: absolute;
bottom: 0;
right: 0;
}
// Photo sizes
&:nth-child(11n+1) {
grid-column: 1 / span 2;
}
&:nth-child(11n+8) {
grid-column: 3 / span 2;
}
&:nth-child(11n) {
grid-column: 1 / span 4;
display: none;
}
}
}
// Controls
/**
* Controls
*/
.controls {
grid-column: 1 / span var(--columns);
grid-column: span var(--columns);
display: grid;
margin: 48px auto;
align-items: center;
@@ -231,7 +338,7 @@
--columns: 22;
grid-column: 2 / span var(--columns);
justify-content: space-between;
margin: 80px auto;
margin: 80px 0;
}
// Updated Date
@@ -245,7 +352,7 @@
margin: 24px 0 48px;
@include bp (sm) {
grid-column: span 4;
grid-column: span 5;
grid-row: 1;
text-align: left;
margin: 0;
@@ -291,7 +398,7 @@
// Modules
.grid-modules {
grid-column: 1 / span var(--columns);
grid-column: span var(--columns);
margin-bottom: 0;
@include bp (sm) {