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

Add logo and edit general design

Browse source
This commit is contained in:
Paul Nicoué 2022-07-28 18:59:14 +02:00
parent eb21a245bc
commit e0cb8d46f4
8 changed files with 330 additions and 73 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -80,37 +80,81 @@ body {
// HEADER
// ----------------------------------------------------------------------------
// Logo
.logo {
z-index: 2;
position: fixed;
top: 1rem;
right: 1.5rem;
.logo__link {
width: var(--logo-width);
height: var(--logo-height);
display: flex;
justify-content: center;
align-items: center;
}
.logo__icon {
width: 100%;
height: 100%;
path:nth-child(1) {
stroke: var(--black);
}
path:nth-child(2) {
stroke: var(--white);
}
&--rotate-vertical-left {
animation: rotate-vertical-left 800ms ease-in-out infinite;
}
&--rotate-horizontal-bottom {
animation: rotate-horizontal-bottom 800ms ease-in-out infinite;
}
}
}
// Sidebar
.sidebar {
z-index: 1;
overflow-y: auto;
position: fixed;
top: 0;
bottom: 0;
left: 0;
width: 100%;
padding: var(--sidebar-vertical-padding) var(--sidebar-horizontal-padding);
overflow-y: auto;
background-color: var(--transparent-white);
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: flex-start;
background-color: var(--white);
transition: background-color 400ms ease-in-out;
.sidebar__nav {
max-width: 100%;
}
.sidebar__nav-item {
width: 97vw;
transition: width 400ms ease-in-out;
+ .sidebar__nav-item {
margin: 0.75rem 0 0 0;
margin: 0.5rem 0 0 0;
}
}
.sidebar__nav-link {
display: inline-block;
max-width: 100vw;
max-width: 100%;
overflow-x: hidden;
white-space: nowrap;
text-overflow: ellipsis;
color: var(--black);
transition:
max-width 400ms ease-in-out,
color 400ms ease-in-out;
transition: color 400ms ease-in-out;
}
.sidebar__social {
@ -140,14 +184,10 @@ body {
}
&--slimmed {
width: 15%;
background-color: transparent;
.sidebar__nav-item {
width: 15vw;
}
.sidebar__nav-link {
max-width: 15vw;
color: var(--transparent-black);
}
@ -185,12 +225,13 @@ body {
}
.exhibition {
opacity: 0;
width: 100%;
height: 100%;
padding: 0 0 0 15%;
transition: opacity 400ms ease-in-out;
&--visible {
opacity: 1;
}
}
// ----------------------------------------------------------------------------
// FOOTER
// ----------------------------------------------------------------------------
// Footer bar