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

Edit sidebar style and animation

Browse source
This commit is contained in:
Paul Nicoué 2022-07-22 17:53:26 +02:00
parent 92e940b9cc
commit 5e06917b54
5 changed files with 144 additions and 42 deletions
Download patch file Download diff file Expand all files Collapse all files

65
public/assets/css/main.scss
View file

@ -89,21 +89,30 @@ body {
left: 0;
padding: var(--sidebar-vertical-padding) var(--sidebar-horizontal-padding);
overflow-y: auto;
background-color: transparent;
background-color: var(--transparent-white);
transition: background-color 400ms ease-in-out;
.sidebar__nav {
.sidebar__nav-item {
width: 97vw;
transition: width 400ms ease-in-out;
+ .sidebar__nav-item {
margin: 0.75rem 0 0 0;
}
}
a {
color: var(--transparent-black);
transition: color 400ms ease-in-out;
.sidebar__nav-link {
display: inline-block;
max-width: 100vw;
overflow-x: hidden;
white-space: nowrap;
text-overflow: ellipsis;
color: var(--black);
transition:
max-width 400ms ease-in-out,
color 400ms ease-in-out;
}
}
@ -112,42 +121,66 @@ body {
align-items: center;
margin: 1rem 0 0 0;
a {
.sidebar__social-link {
width: var(--icon-size);
height: var(--icon-size);
display: flex;
justify-content: center;
align-items: center;
+ a {
+ .sidebar__social-link {
margin: 0 0 0 1rem;
}
svg {
width: 100%;
height: 100%;
fill: var(--transparent-black);
fill: var(--black);
transition: fill 400ms ease-in-out;
}
}
}
&:hover {
background-color: var(--transparent-white);
&--slimmed {
background-color: transparent;
.sidebar__nav {
a {
color: var(--black);
.sidebar__nav-item {
width: 15vw;
}
.sidebar__nav-link {
max-width: 15vw;
color: var(--transparent-black);
}
}
.sidebar__social {
svg {
fill: var(--black);
fill: var(--transparent-black);
}
}
&:hover {
background-color: var(--transparent-white);
.sidebar__nav {
.sidebar__nav-link {
color: var(--black);
}
}
.sidebar__social {
svg {
fill: var(--black);
}
}
}
}
}
@ -155,14 +188,14 @@ body {
// MAIN
// ----------------------------------------------------------------------------
// Home section
// Exhibition section
.exhibitions-section {
.exhibition-section {
width: 100vw;
height: 100vh;
}
.exhibitions-section__iframe {
.exhibition-section__iframe {
width: 100%;
height: 100%;
}