host/julienmonnerie
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Merge gallery and exhibitions pages into home page

Browse source
This commit is contained in:
Paul Nicoué 2022-09-27 16:32:06 +02:00
parent e1654494b3
commit b45fe42a45
13 changed files with 4945 additions and 224 deletions
Download patch file Download diff file Expand all files Collapse all files

185
assets/css/main.scss
View file

@ -50,13 +50,6 @@ em {
font-style: italic;
}
@media screen and (min-width: $desktop-media-query) {
.body--white-background {
background-color: var(--white);
}
}
// Link style
a {
@ -95,71 +88,11 @@ body {
// HEADER
// ----------------------------------------------------------------------------
// Logo
.logo {
width: 100%;
padding: var(--logo-padding);
display: flex;
justify-content: center;
&--fixed-center {
z-index: 2;
width: auto;
padding: 0;
position: fixed;
top: 1rem;
right: calc(50vw - (var(--logo-width) / 2));
display: block;
}
.logo__link {
width: var(--logo-width);
height: var(--logo-height);
display: flex;
justify-content: center;
align-items: center;
}
.logo__icon {
width: 100%;
height: 100%;
&--black {
stroke: var(--black);
transition: stroke 400ms ease-in-out;
}
&--white {
stroke: var(--white);
transition: stroke 400ms ease-in-out;
}
&--rotate-horizontal-bottom {
animation: rotate-horizontal-bottom 800ms ease-in-out infinite;
}
}
}
@media screen and (min-width: $desktop-media-query) {
.logo {
&--fixed-right {
z-index: 2;
width: auto;
padding: 0;
position: fixed;
top: 1rem;
right: 1.5rem;
display: block;
}
}
}
// Sidebar
.sidebar {
position: relative;
z-index: 2;
width: 100%;
padding: var(--sidebar-padding);
display: flex;
@ -167,7 +100,6 @@ body {
justify-content: space-between;
align-items: flex-start;
background-color: transparent;
transition: background-color 400ms ease-in-out;
.sidebar__nav {
max-width: 100%;
@ -186,8 +118,15 @@ body {
overflow-x: hidden;
white-space: nowrap;
text-overflow: ellipsis;
color: var(--black);
transition: color 400ms ease-in-out;
transition: color 200ms ease-in-out;
&--white {
color: var(--white);
&:focus-visible {
outline: 1px dashed var(--white);
}
}
}
.sidebar__social {
@ -208,14 +147,24 @@ body {
+ .sidebar__social-link {
margin: 0 0 0 1rem;
}
}
.sidebar__instagram-icon,
.sidebar__email-icon {
width: 100%;
height: 100%;
fill: var(--black);
transition: fill 400ms ease-in-out;
svg {
width: 100%;
height: 100%;
fill: var(--black);
transition: fill 200ms ease-in-out;
}
&--white {
&:focus-visible {
outline: 1px dashed var(--white);
}
svg {
fill: var(--white);
}
}
}
}
@ -224,9 +173,9 @@ body {
.sidebar {
&--fixed {
z-index: 1;
overflow-y: auto;
position: fixed;
z-index: 3;
overflow-y: auto;
top: 0;
bottom: 0;
left: 0;
@ -240,30 +189,42 @@ body {
color: var(--transparent-black);
}
.sidebar__instagram-icon,
.sidebar__email-icon {
fill: var(--transparent-black);
.sidebar__social-link {
svg {
fill: var(--transparent-black);
}
}
&:hover {
background-color: var(--transparent-feldgrau);
.sidebar__nav-link {
color: var(--black);
}
.sidebar__instagram-icon,
.sidebar__email-icon {
fill: var(--black);
.sidebar__social-link {
svg {
fill: var(--black);
}
}
}
}
&--white-background {
.sidebar__nav-link {
&:hover {
background-color: var(--transparent-white);
&:focus-visible {
color: var(--black);
}
}
.sidebar__social-link {
&:focus-visible {
svg {
fill: var(--black);
}
}
}
}
@ -280,15 +241,32 @@ body {
// Slider section
.splide {
.slider-section {
position: fixed;
z-index: 1;
top: 0;
right: 0;
visibility: visible;
opacity: 1;
transition:
visibility 0ms 400ms,
opacity 400ms ease-in-out;
&__image {
width: 100%;
height: 100%;
object-fit: cover;
&--hidden {
visibility: hidden;
opacity: 0;
transition:
visibility 0ms,
opacity 400ms ease-in-out;
}
}
.splide__image {
width: 100%;
height: 100%;
object-fit: cover;
}
// Exhibition section
.exhibition-section {
@ -298,19 +276,28 @@ body {
@media screen and (min-width: $desktop-media-query) {
.exhibition-section {
position: relative;
z-index: 2;
display: block;
width: 100vw;
height: 100vh;
}
.exhibition {
visibility: hidden;
opacity: 0;
width: 100%;
height: 100%;
transition: opacity 400ms ease-in-out;
transition:
visibility 0ms,
opacity 400ms ease-in-out;
&--visible {
visibility: visible;
opacity: 1;
transition:
visibility 0ms 400ms,
opacity 400ms ease-in-out;
}
}
}

16
assets/css/partials/animations.scss
View file

@ -10,19 +10,3 @@
outline-offset: 2px;
}
}
@keyframes rotate-horizontal-bottom {
0% {
transform: rotateX(0);
transform-origin: bottom;
}
50% {
transform: rotateX(180deg);
transform-origin: bottom;
}
100% {
transform: rotateX(0);
transform-origin: bottom;
}
}

5
assets/css/partials/variables.scss
View file

@ -25,9 +25,6 @@
// Dimensions
--logo-width: 6rem;
--logo-height: 3rem;
--logo-padding: 1rem;
--icon-size: 2.25rem;
--sidebar-padding: 1rem;
@ -37,8 +34,6 @@
--transparent-black: rgba(0, 0, 0, 0.3);
--white: #fff;
--transparent-white: rgba(255, 255, 255, 0.9);
--feldgrau: #4B6259;
--transparent-feldgrau: rgba(75, 98, 89, 0.9);
}
// Media queries