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

[wip] Rework Shop

Browse Source 
- Change strategy for content fetching
- Add a route per page instead of using __layout for all
- Change the behaviors of the posters section (add a carousel on small screens)
- Change Poster buttons styling and make interactions only for desktop
This commit is contained in:
Félix Péault
2021-12-14 23:23:12 +01:00
parent 140e8f1fa2
commit 82f5dd4727
17 changed files with 808 additions and 364 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
src/style/molecules/_poster.scss
View File

@@ -4,7 +4,7 @@
overflow: hidden;
max-width: 326px;
@include bp (sm) {
@include bp (md) {
background-color: $color-primary-tertiary20;
max-width: 600px;
}
@@ -33,12 +33,10 @@
// Buttons
.buttons {
display: flex;
margin-top: 40px;
margin-top: 32px;
justify-content: center;
transform: translate3d(0, 100%, 0);
transition: transform 0.8s var(--ease-quart);
@include bp (sm) {
@include bp (md) {
position: absolute;
z-index: 1;
bottom: 4.25%;
@@ -46,19 +44,43 @@
width: 100%;
align-items: center;
justify-content: center;
margin-top: 40px;
transform: translate3d(0, 100%, 0);
transition: transform 0.8s var(--ease-quart);
}
a {
margin: 0 clamp(4px, 0.3vw, 8px);
text-align: center;
& > * {
background: none;
font-size: rem(14px);
font-weight: 300;
color: $color-tertiary;
padding: 0;
&:first-child {
margin-right: 12px;
&:hover {
background: none;
}
}
&:last-child {
display: inline-flex;
align-items: center;
height: 30px;
padding: 0 12px;
color: $color-secondary;
border: 1px solid rgba($color-secondary, 0.4);
}
}
}
// Hover effect
&:hover {
img {
transform: scale(0.8) translate3d(0, -5%, 0);
border-radius: 8px;
@include bp (md) {
transform: scale(0.8) translate3d(0, -5%, 0);
border-radius: 8px;
}
}
.buttons {
transform: translate3d(0,0,0);