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

Edit sidebar social links

Browse source
This commit is contained in:
Paul Nicoué 2022-07-26 17:03:58 +02:00
parent 5e06917b54
commit eb21a245bc
4 changed files with 79 additions and 83 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -92,92 +92,81 @@ body {
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 {
width: 97vw;
transition: width 400ms ease-in-out;
+ .sidebar__nav-item {
margin: 0.75rem 0 0 0;
}
+ .sidebar__nav-item {
margin: 0.75rem 0 0 0;
}
}
.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;
}
.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;
}
.sidebar__social {
display: flex;
align-items: center;
margin: 1rem 0 0 0;
}
.sidebar__social-link {
width: var(--icon-size);
height: var(--icon-size);
display: flex;
justify-content: center;
align-items: center;
.sidebar__social-link {
width: var(--icon-size);
height: var(--icon-size);
display: flex;
justify-content: center;
align-items: center;
+ .sidebar__social-link {
margin: 0 0 0 1rem;
}
svg {
width: 100%;
height: 100%;
fill: var(--black);
transition: fill 400ms ease-in-out;
}
+ .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;
}
&--slimmed {
background-color: transparent;
.sidebar__nav {
.sidebar__nav-item {
width: 15vw;
}
.sidebar__nav-link {
max-width: 15vw;
color: var(--transparent-black);
}
.sidebar__nav-item {
width: 15vw;
}
.sidebar__social {
.sidebar__nav-link {
max-width: 15vw;
color: var(--transparent-black);
}
svg {
fill: var(--transparent-black);
}
.sidebar__instagram-icon,
.sidebar__email-icon {
fill: var(--transparent-black);
}
&:hover {
background-color: var(--transparent-white);
.sidebar__nav {
.sidebar__nav-link {
color: var(--black);
}
.sidebar__nav-link {
color: var(--black);
}
.sidebar__social {
svg {
fill: var(--black);
}
.sidebar__instagram-icon,
.sidebar__email-icon {
fill: var(--black);
}
}
@ -195,7 +184,7 @@ body {
height: 100vh;
}
.exhibition-section__iframe {
.exhibition {
width: 100%;
height: 100%;
}

4
public/assets/css/partials/variables.scss
View file

@ -25,7 +25,7 @@
// Dimensions
--icon-size: 2rem;
--icon-size: 1.75rem;
--sidebar-vertical-padding: 1rem;
--sidebar-horizontal-padding: 1rem;
@ -57,6 +57,6 @@ $desktop-media-query: 62rem;
// Dimensions
--icon-size: 2.5rem;
--icon-size: 2.25rem;
}
}