Fixed home slideshow + new version page infos
All checks were successful
Deploy / Deploy to Production (push) Successful in 7s
All checks were successful
Deploy / Deploy to Production (push) Successful in 7s
This commit is contained in:
parent
9a615bd92d
commit
6bfd9ae262
22 changed files with 755 additions and 603 deletions
BIN
._content
BIN
._content
Binary file not shown.
|
|
@ -37,21 +37,19 @@
|
||||||
object-fit: cover;
|
object-fit: cover;
|
||||||
}
|
}
|
||||||
|
|
||||||
.main-infos {
|
button{
|
||||||
width: calc(3 / 4 * var(--index-width));
|
position: absolute;
|
||||||
position: relative;
|
width: 50%;
|
||||||
float: left;
|
height: 100%;
|
||||||
|
&.prev{
|
||||||
|
left: 0;
|
||||||
|
cursor: w-resize;
|
||||||
|
}
|
||||||
|
&.next{
|
||||||
|
right: 0;
|
||||||
|
cursor: e-resize;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.skills {
|
|
||||||
width: calc(2 / 4 * var(--index-width));
|
|
||||||
position: relative;
|
|
||||||
float: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
.clients {
|
|
||||||
width: calc(2 / 4 * var(--index-width));
|
|
||||||
position: relative;
|
|
||||||
float: left;
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,9 @@
|
||||||
body[data-template="index"] {
|
body[data-template="index"] {
|
||||||
|
|
||||||
|
main {
|
||||||
|
grid-template-columns: 8;
|
||||||
|
}
|
||||||
|
|
||||||
.filter-menu {
|
.filter-menu {
|
||||||
font-size: var(--font-size-L);
|
font-size: var(--font-size-L);
|
||||||
position: sticky;
|
position: sticky;
|
||||||
|
|
@ -37,6 +42,10 @@ body[data-template="index"] {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.project-description-mobile {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
ul.projects-index {
|
ul.projects-index {
|
||||||
|
|
@ -44,4 +53,204 @@ body[data-template="index"] {
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: var(--line-height-S);
|
gap: var(--line-height-S);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* PROJECT TOGGLE */
|
||||||
|
|
||||||
|
.fix {
|
||||||
|
width: 100%;
|
||||||
|
z-index: 1;
|
||||||
|
position: relative;
|
||||||
|
/*! margin-top: var(--line-height-S); */
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: var(--index-width) auto;
|
||||||
|
pointer-events: none;
|
||||||
|
mix-blend-mode: difference;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toggle {
|
||||||
|
display: none;
|
||||||
|
|
||||||
|
p {
|
||||||
|
z-index: 1;
|
||||||
|
position: relative;
|
||||||
|
width: calc(3 / 6 * var(--index-width) - var(--body-margin));
|
||||||
|
display: none;
|
||||||
|
padding-top: var(--line-height-S);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.fix:hover+.toggle {
|
||||||
|
display: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fix .date {
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.closer {
|
||||||
|
cursor: var(--close-cursor);
|
||||||
|
}
|
||||||
|
|
||||||
|
.projects-index:has(.selected) {
|
||||||
|
.project:not(.selected) {
|
||||||
|
opacity: var(--low-opacity);
|
||||||
|
pointer-events: none;
|
||||||
|
|
||||||
|
.fix:hover+.toggle .project-slideshow-container {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// PROJECT SLIDESHOW
|
||||||
|
|
||||||
|
.toggle .project-slideshow-container {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fix:hover+.toggle .project-slideshow-container {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.selected .toggle .project-slideshow-container {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
// -------
|
||||||
|
|
||||||
|
.project:not(.selected):hover {
|
||||||
|
opacity: 1;
|
||||||
|
|
||||||
|
.toggle {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.project>.toggle>.close-button {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.selected {
|
||||||
|
opacity: 1;
|
||||||
|
|
||||||
|
.toggle {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns:
|
||||||
|
calc(3 / 6 * var(--index-width) - var(--body-margin)) calc(3 / 6 * var(--index-width));
|
||||||
|
gap: var(--body-margin);
|
||||||
|
|
||||||
|
p {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.slide-number {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.project-description {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toggle>.close-button {
|
||||||
|
display: block;
|
||||||
|
min-height: calc(var(--line-height-S) * 2);
|
||||||
|
margin-bottom: calc(-1 * var(--line-height-S));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.slide-number {
|
||||||
|
text-align: right;
|
||||||
|
display: none;
|
||||||
|
padding-right: var(--body-margin);
|
||||||
|
color: var(--mix-blend-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.project-toggler.grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns:
|
||||||
|
calc(3 / 6 * var(--index-width) - var(--body-margin)) calc(2 / 6 * var(--index-width) - var(--body-margin)) calc(1 / 6 * var(--index-width) - var(--body-margin));
|
||||||
|
gap: var(--body-margin);
|
||||||
|
pointer-events: all;
|
||||||
|
cursor: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
.project-toggler span {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.project-description {
|
||||||
|
margin-bottom: var(--line-height-S);
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* PROJECT SLIDESHOW */
|
||||||
|
|
||||||
|
.project-slideshow {
|
||||||
|
width: -moz-fit-content;
|
||||||
|
width: fit-content;
|
||||||
|
height: -moz-fit-content;
|
||||||
|
height: fit-content;
|
||||||
|
box-sizing: border-box;
|
||||||
|
max-width: 100%;
|
||||||
|
right: 0;
|
||||||
|
position: absolute;
|
||||||
|
|
||||||
|
picture img,
|
||||||
|
video.slide {
|
||||||
|
max-width: 100%;
|
||||||
|
max-height: calc(100vh - var(--body-margin) * 2);
|
||||||
|
vertical-align: bottom;
|
||||||
|
width: auto;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
picture {
|
||||||
|
inset: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.project-slideshow-container {
|
||||||
|
display: block;
|
||||||
|
position: fixed;
|
||||||
|
height: 100%;
|
||||||
|
background-color: white;
|
||||||
|
top: var(--body-margin);
|
||||||
|
right: var(--body-margin);
|
||||||
|
bottom: var(--body-margin);
|
||||||
|
left: calc(var(--index-width) + var(--body-margin));
|
||||||
|
.closer {
|
||||||
|
inset: 0;
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
width: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
button.prev {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
height: 100%;
|
||||||
|
border: none;
|
||||||
|
cursor: w-resize;
|
||||||
|
z-index: 1;
|
||||||
|
width: 50%;
|
||||||
|
left: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
button.next {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
height: 100%;
|
||||||
|
border: none;
|
||||||
|
cursor: e-resize;
|
||||||
|
z-index: 1;
|
||||||
|
width: 50%;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
59
assets/css/src/_infos.scss
Normal file
59
assets/css/src/_infos.scss
Normal file
|
|
@ -0,0 +1,59 @@
|
||||||
|
[data-template="infos"] {
|
||||||
|
|
||||||
|
header {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main-title {
|
||||||
|
font-size: var(--font-size-XL);
|
||||||
|
line-break: strict;
|
||||||
|
left: -0.65vw;
|
||||||
|
position: relative;
|
||||||
|
top: var(--main-title-top);
|
||||||
|
margin-top: var(--body-margin);
|
||||||
|
line-height: 0.75;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main-title:has(+ nav:hover) {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title-nav {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
main {
|
||||||
|
position: relative;
|
||||||
|
padding-top: calc(var(--line-height-S) + 0.35rem);
|
||||||
|
inset: 0;
|
||||||
|
padding-bottom: var(--font-size-XL);
|
||||||
|
overflow: auto;
|
||||||
|
padding-right: 0;
|
||||||
|
padding-left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 2fr 1fr 1fr;
|
||||||
|
gap: calc(var(--body-margin) *2);
|
||||||
|
margin-top: calc(var(--font-size-L) + var(--line-height-S));
|
||||||
|
max-width: 1700px;
|
||||||
|
|
||||||
|
h3{
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
.presentation, .clients{
|
||||||
|
margin-top: var(--line-height-S);
|
||||||
|
}
|
||||||
|
.presentation{
|
||||||
|
font-size: var(--font-size-L);
|
||||||
|
line-height: 1.2;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
@ -30,26 +30,6 @@
|
||||||
font-stretch: normal;
|
font-stretch: normal;
|
||||||
}
|
}
|
||||||
|
|
||||||
:root {
|
|
||||||
--main-font: "neue-haas-grotesk-display", sans-serif;
|
|
||||||
--font-size-S: 0.9rem;
|
|
||||||
--font-size-L: 1.6rem;
|
|
||||||
--font-size-XL: 11vw;
|
|
||||||
--line-height-S: calc(var(--font-size-S) * 1.2);
|
|
||||||
--text-color: black;
|
|
||||||
--bg-color: white;
|
|
||||||
--body-margin: 0.6rem;
|
|
||||||
--nav-margin: 1rem;
|
|
||||||
--apparition-duration: 0.3s;
|
|
||||||
--disparition-duration: 0.3s;
|
|
||||||
--indentation: 2rem;
|
|
||||||
--low-opacity: 0.2;
|
|
||||||
--half-screen: 50vw;
|
|
||||||
--index-width: 40rem;
|
|
||||||
--close-cursor: url(/assets/images/close-cursor.png), crosshair;
|
|
||||||
--main-title-top: -0.7vw;
|
|
||||||
--mix-blend-color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
body {
|
||||||
font-family: var(--main-font);
|
font-family: var(--main-font);
|
||||||
|
|
@ -63,20 +43,10 @@ body {
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
main {
|
|
||||||
grid-template-columns: 8;
|
|
||||||
}
|
|
||||||
|
|
||||||
a {
|
a {
|
||||||
color: var(--text-color);
|
color: var(--text-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
h1 {
|
|
||||||
font-weight: normal;
|
|
||||||
line-height: inherit;
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
p {
|
p {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
|
@ -95,239 +65,6 @@ ul {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
[data-template="infos"] p:first-of-type {
|
|
||||||
margin-top: var(--line-height-S);
|
|
||||||
}
|
|
||||||
|
|
||||||
#slideshow {
|
|
||||||
inset: 0;
|
|
||||||
position: absolute;
|
|
||||||
z-index: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
button#mobile-menu-toggle {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* PROJECT SLIDESHOW */
|
|
||||||
|
|
||||||
.project-slideshow {
|
|
||||||
width: -moz-fit-content;
|
|
||||||
width: fit-content;
|
|
||||||
height: -moz-fit-content;
|
|
||||||
height: fit-content;
|
|
||||||
box-sizing: border-box;
|
|
||||||
max-width: 100%;
|
|
||||||
right: 0;
|
|
||||||
position: absolute;
|
|
||||||
|
|
||||||
picture img,
|
|
||||||
video.slide {
|
|
||||||
max-width: 100%;
|
|
||||||
max-height: calc(100vh - var(--body-margin) * 2);
|
|
||||||
vertical-align: bottom;
|
|
||||||
width: auto;
|
|
||||||
height: auto;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
picture {
|
|
||||||
inset: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.project-slideshow-container {
|
|
||||||
display: block;
|
|
||||||
position: fixed;
|
|
||||||
height: 100%;
|
|
||||||
background-color: white;
|
|
||||||
top: var(--body-margin);
|
|
||||||
right: var(--body-margin);
|
|
||||||
bottom: var(--body-margin);
|
|
||||||
left: calc(var(--index-width) + var(--body-margin));
|
|
||||||
.closer {
|
|
||||||
inset: 0;
|
|
||||||
display: block;
|
|
||||||
position: absolute;
|
|
||||||
width: auto;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
button.prev {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
height: 100%;
|
|
||||||
border: none;
|
|
||||||
cursor: w-resize;
|
|
||||||
z-index: 1;
|
|
||||||
width: 50%;
|
|
||||||
left: 0;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
button.next {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
right: 0;
|
|
||||||
height: 100%;
|
|
||||||
border: none;
|
|
||||||
cursor: e-resize;
|
|
||||||
z-index: 1;
|
|
||||||
width: 50%;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* PROJECT TOGGLE */
|
|
||||||
|
|
||||||
.fix {
|
|
||||||
width: 100%;
|
|
||||||
z-index: 1;
|
|
||||||
position: relative;
|
|
||||||
/*! margin-top: var(--line-height-S); */
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: var(--index-width) auto;
|
|
||||||
pointer-events: none;
|
|
||||||
mix-blend-mode: difference;
|
|
||||||
}
|
|
||||||
|
|
||||||
.toggle {
|
|
||||||
display: none;
|
|
||||||
p {
|
|
||||||
z-index: 1;
|
|
||||||
position: relative;
|
|
||||||
width: calc(3 / 6 * var(--index-width) - var(--body-margin));
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.fix:hover + .toggle {
|
|
||||||
display: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.fix .date {
|
|
||||||
text-align: right;
|
|
||||||
}
|
|
||||||
|
|
||||||
.closer {
|
|
||||||
cursor: var(--close-cursor);
|
|
||||||
}
|
|
||||||
|
|
||||||
.projects-index:has(.selected) {
|
|
||||||
.project:not(.selected) {
|
|
||||||
opacity: var(--low-opacity);
|
|
||||||
pointer-events: none;
|
|
||||||
.fix:hover + .toggle .project-slideshow-container {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// PROJECT SLIDESHOW
|
|
||||||
|
|
||||||
.toggle .project-slideshow-container {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.fix:hover + .toggle .project-slideshow-container {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.selected .toggle .project-slideshow-container {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
// -------
|
|
||||||
|
|
||||||
.project:not(.selected):hover {
|
|
||||||
opacity: 1;
|
|
||||||
.toggle {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.project > .toggle > .close-button {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.selected {
|
|
||||||
opacity: 1;
|
|
||||||
.toggle {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns:
|
|
||||||
calc(3 / 6 * var(--index-width) - var(--body-margin))
|
|
||||||
calc(3 / 6 * var(--index-width));
|
|
||||||
gap: var(--body-margin);
|
|
||||||
p {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.slide-number {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
.project-description {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
.toggle > .close-button {
|
|
||||||
display: block;
|
|
||||||
min-height: calc(var(--line-height-S) * 2);
|
|
||||||
margin-bottom: calc(-1 * var(--line-height-S));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.slide-number {
|
|
||||||
text-align: right;
|
|
||||||
display: none;
|
|
||||||
padding-right: var(--body-margin);
|
|
||||||
color: var(--mix-blend-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
.project-toggler.grid {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns:
|
|
||||||
calc(3 / 6 * var(--index-width) - var(--body-margin))
|
|
||||||
calc(2 / 6 * var(--index-width) - var(--body-margin)) calc(
|
|
||||||
1 / 6 * var(--index-width) - var(--body-margin)
|
|
||||||
);
|
|
||||||
gap: var(--body-margin);
|
|
||||||
pointer-events: all;
|
|
||||||
cursor: inherit;
|
|
||||||
}
|
|
||||||
|
|
||||||
.project-toggler span {
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.project-description {
|
|
||||||
margin-bottom: var(--line-height-S);
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* INFOS */
|
|
||||||
|
|
||||||
[data-template="infos"] {
|
|
||||||
div {
|
|
||||||
padding-right: var(--body-margin);
|
|
||||||
}
|
|
||||||
main {
|
|
||||||
position: relative;
|
|
||||||
padding-top: calc(var(--line-height-S) + 0.35rem);
|
|
||||||
inset: 0;
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
padding-bottom: var(--font-size-XL);
|
|
||||||
overflow: auto;
|
|
||||||
padding-right: 0;
|
|
||||||
padding-left: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
#mobile-menu {
|
|
||||||
z-index: 2;
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-infos {
|
|
||||||
max-width: 100%;
|
|
||||||
width: 660px;
|
|
||||||
}
|
|
||||||
.secondary-infos {
|
|
||||||
max-width: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
|
||||||
|
|
@ -17,6 +17,7 @@
|
||||||
left: 0;
|
left: 0;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
height: var(--slider-height);
|
height: var(--slider-height);
|
||||||
|
|
||||||
button.all-projects-closer {
|
button.all-projects-closer {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
@ -26,11 +27,13 @@
|
||||||
inset: 0;
|
inset: 0;
|
||||||
width: auto;
|
width: auto;
|
||||||
height: auto;
|
height: auto;
|
||||||
|
|
||||||
picture,
|
picture,
|
||||||
video.slide {
|
video.slide {
|
||||||
inset: 0;
|
inset: 0;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
}
|
}
|
||||||
|
|
||||||
picture img,
|
picture img,
|
||||||
video.slide {
|
video.slide {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
@ -64,8 +67,7 @@
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding: var(--font-size-XL) var(--body-margin) var(--body-margin)
|
padding: var(--font-size-XL) var(--body-margin) var(--body-margin) var(--body-margin);
|
||||||
var(--body-margin);
|
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -82,10 +84,12 @@
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
inset: 0;
|
inset: 0;
|
||||||
|
|
||||||
ul,
|
ul,
|
||||||
h1 {
|
h1 {
|
||||||
z-index: 4;
|
z-index: 4;
|
||||||
}
|
}
|
||||||
|
|
||||||
.backdrop {
|
.backdrop {
|
||||||
inset: 0;
|
inset: 0;
|
||||||
background-color: white;
|
background-color: white;
|
||||||
|
|
@ -94,6 +98,7 @@
|
||||||
z-index: 3;
|
z-index: 3;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
.title-nav {
|
.title-nav {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
line-break: strict;
|
line-break: strict;
|
||||||
|
|
@ -102,6 +107,7 @@
|
||||||
margin-top: var(--body-margin);
|
margin-top: var(--body-margin);
|
||||||
line-height: 0.75;
|
line-height: 0.75;
|
||||||
}
|
}
|
||||||
|
|
||||||
ul {
|
ul {
|
||||||
display: flex;
|
display: flex;
|
||||||
font-size: var(--font-size-L);
|
font-size: var(--font-size-L);
|
||||||
|
|
@ -150,6 +156,12 @@
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#home-slideshow .slide {
|
||||||
|
&.portrait-pair.active {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.close-button.closer {
|
.close-button.closer {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: var(--slider-height);
|
top: var(--slider-height);
|
||||||
|
|
@ -208,6 +220,7 @@
|
||||||
main {
|
main {
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
}
|
}
|
||||||
|
|
||||||
.filter-menu {
|
.filter-menu {
|
||||||
padding-top: 0;
|
padding-top: 0;
|
||||||
}
|
}
|
||||||
|
|
@ -254,11 +267,35 @@
|
||||||
left: var(--body-margin);
|
left: var(--body-margin);
|
||||||
padding-right: 0;
|
padding-right: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.projects-index {
|
||||||
|
.project-description-mobile {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.project-description {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
body[data-template="infos"] {
|
body[data-template="infos"] {
|
||||||
|
|
||||||
main {
|
main {
|
||||||
padding-top: var(--font-size-XL);
|
padding-top: var(--line-height-S);
|
||||||
|
.info-grid{
|
||||||
|
display: block;
|
||||||
|
margin-top: 0;
|
||||||
|
.main-infos{
|
||||||
|
max-width: 800px;
|
||||||
|
}
|
||||||
|
.secondary-infos{
|
||||||
|
margin-top: var(--line-height-S);
|
||||||
|
max-width: 500px;
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -200,3 +200,4 @@ button#mobile-menu-toggle {
|
||||||
#mobile-menu-wrapper {
|
#mobile-menu-wrapper {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -12,3 +12,11 @@ button {
|
||||||
nav li {
|
nav li {
|
||||||
list-style: none;
|
list-style: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
h1,
|
||||||
|
h3 {
|
||||||
|
font-weight: normal;
|
||||||
|
font-size: inherit;
|
||||||
|
line-height: inherit;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
21
assets/css/src/_variables.scss
Normal file
21
assets/css/src/_variables.scss
Normal file
|
|
@ -0,0 +1,21 @@
|
||||||
|
|
||||||
|
:root {
|
||||||
|
--main-font: "neue-haas-grotesk-display", sans-serif;
|
||||||
|
--font-size-S: 0.9rem;
|
||||||
|
--font-size-L: 1.6rem;
|
||||||
|
--font-size-XL: 11vw;
|
||||||
|
--line-height-S: calc(var(--font-size-S) * 1.2);
|
||||||
|
--text-color: black;
|
||||||
|
--bg-color: white;
|
||||||
|
--body-margin: 0.6rem;
|
||||||
|
--nav-margin: 1rem;
|
||||||
|
--apparition-duration: 0.3s;
|
||||||
|
--disparition-duration: 0.3s;
|
||||||
|
--indentation: 2rem;
|
||||||
|
--low-opacity: 0.2;
|
||||||
|
--half-screen: 50vw;
|
||||||
|
--index-width: 40rem;
|
||||||
|
--close-cursor: url(/assets/images/close-cursor.png), crosshair;
|
||||||
|
--main-title-top: -0.7vw;
|
||||||
|
--mix-blend-color: white;
|
||||||
|
}
|
||||||
|
|
@ -1,35 +1,4 @@
|
||||||
@import url("https://p.typekit.net/p.css?s=1&k=wdg5nfi&ht=tk&f=39496.39497&a=95222337&app=typekit&e=css");
|
@import url("https://p.typekit.net/p.css?s=1&k=wdg5nfi&ht=tk&f=39496.39497&a=95222337&app=typekit&e=css");
|
||||||
button {
|
|
||||||
border: none;
|
|
||||||
padding: 0;
|
|
||||||
margin: 0;
|
|
||||||
text-align: inherit;
|
|
||||||
font: inherit;
|
|
||||||
cursor: pointer;
|
|
||||||
background-color: transparent;
|
|
||||||
color: inherit;
|
|
||||||
}
|
|
||||||
|
|
||||||
nav li {
|
|
||||||
list-style: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
@font-face {
|
|
||||||
font-family: "neue-haas-grotesk-display";
|
|
||||||
src: url("https://use.typekit.net/af/174ae3/00000000000000007735bb5a/31/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n5&v=3") format("woff2"), url("https://use.typekit.net/af/174ae3/00000000000000007735bb5a/31/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n5&v=3") format("woff"), url("https://use.typekit.net/af/174ae3/00000000000000007735bb5a/31/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n5&v=3") format("opentype");
|
|
||||||
font-display: auto;
|
|
||||||
font-style: normal;
|
|
||||||
font-weight: 500;
|
|
||||||
font-stretch: normal;
|
|
||||||
}
|
|
||||||
@font-face {
|
|
||||||
font-family: "neue-haas-grotesk-display";
|
|
||||||
src: url("https://use.typekit.net/af/db1ce7/00000000000000007735bb5e/31/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i5&v=3") format("woff2"), url("https://use.typekit.net/af/db1ce7/00000000000000007735bb5e/31/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i5&v=3") format("woff"), url("https://use.typekit.net/af/db1ce7/00000000000000007735bb5e/31/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i5&v=3") format("opentype");
|
|
||||||
font-display: auto;
|
|
||||||
font-style: italic;
|
|
||||||
font-weight: 500;
|
|
||||||
font-stretch: normal;
|
|
||||||
}
|
|
||||||
:root {
|
:root {
|
||||||
--main-font: "neue-haas-grotesk-display", sans-serif;
|
--main-font: "neue-haas-grotesk-display", sans-serif;
|
||||||
--font-size-S: 0.9rem;
|
--font-size-S: 0.9rem;
|
||||||
|
|
@ -51,6 +20,45 @@ nav li {
|
||||||
--mix-blend-color: white;
|
--mix-blend-color: white;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
border: none;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
text-align: inherit;
|
||||||
|
font: inherit;
|
||||||
|
cursor: pointer;
|
||||||
|
background-color: transparent;
|
||||||
|
color: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav li {
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1,
|
||||||
|
h3 {
|
||||||
|
font-weight: normal;
|
||||||
|
font-size: inherit;
|
||||||
|
line-height: inherit;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: "neue-haas-grotesk-display";
|
||||||
|
src: url("https://use.typekit.net/af/174ae3/00000000000000007735bb5a/31/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n5&v=3") format("woff2"), url("https://use.typekit.net/af/174ae3/00000000000000007735bb5a/31/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n5&v=3") format("woff"), url("https://use.typekit.net/af/174ae3/00000000000000007735bb5a/31/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n5&v=3") format("opentype");
|
||||||
|
font-display: auto;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 500;
|
||||||
|
font-stretch: normal;
|
||||||
|
}
|
||||||
|
@font-face {
|
||||||
|
font-family: "neue-haas-grotesk-display";
|
||||||
|
src: url("https://use.typekit.net/af/db1ce7/00000000000000007735bb5e/31/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i5&v=3") format("woff2"), url("https://use.typekit.net/af/db1ce7/00000000000000007735bb5e/31/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i5&v=3") format("woff"), url("https://use.typekit.net/af/db1ce7/00000000000000007735bb5e/31/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i5&v=3") format("opentype");
|
||||||
|
font-display: auto;
|
||||||
|
font-style: italic;
|
||||||
|
font-weight: 500;
|
||||||
|
font-stretch: normal;
|
||||||
|
}
|
||||||
body {
|
body {
|
||||||
font-family: var(--main-font);
|
font-family: var(--main-font);
|
||||||
font-size: var(--font-size-S);
|
font-size: var(--font-size-S);
|
||||||
|
|
@ -63,20 +71,10 @@ body {
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
main {
|
|
||||||
grid-template-columns: 8;
|
|
||||||
}
|
|
||||||
|
|
||||||
a {
|
a {
|
||||||
color: var(--text-color);
|
color: var(--text-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
h1 {
|
|
||||||
font-weight: normal;
|
|
||||||
line-height: inherit;
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
p {
|
p {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
|
@ -96,223 +94,6 @@ ul {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
[data-template=infos] p:first-of-type {
|
|
||||||
margin-top: var(--line-height-S);
|
|
||||||
}
|
|
||||||
|
|
||||||
#slideshow {
|
|
||||||
inset: 0;
|
|
||||||
position: absolute;
|
|
||||||
z-index: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
button#mobile-menu-toggle {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* PROJECT SLIDESHOW */
|
|
||||||
.project-slideshow {
|
|
||||||
width: -moz-fit-content;
|
|
||||||
width: fit-content;
|
|
||||||
height: -moz-fit-content;
|
|
||||||
height: fit-content;
|
|
||||||
box-sizing: border-box;
|
|
||||||
max-width: 100%;
|
|
||||||
right: 0;
|
|
||||||
position: absolute;
|
|
||||||
}
|
|
||||||
.project-slideshow picture img,
|
|
||||||
.project-slideshow video.slide {
|
|
||||||
max-width: 100%;
|
|
||||||
max-height: calc(100vh - var(--body-margin) * 2);
|
|
||||||
vertical-align: bottom;
|
|
||||||
width: auto;
|
|
||||||
height: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
picture {
|
|
||||||
inset: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.project-slideshow-container {
|
|
||||||
display: block;
|
|
||||||
position: fixed;
|
|
||||||
height: 100%;
|
|
||||||
background-color: white;
|
|
||||||
top: var(--body-margin);
|
|
||||||
right: var(--body-margin);
|
|
||||||
bottom: var(--body-margin);
|
|
||||||
left: calc(var(--index-width) + var(--body-margin));
|
|
||||||
}
|
|
||||||
.project-slideshow-container .closer {
|
|
||||||
inset: 0;
|
|
||||||
display: block;
|
|
||||||
position: absolute;
|
|
||||||
width: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
button.prev {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
height: 100%;
|
|
||||||
border: none;
|
|
||||||
cursor: w-resize;
|
|
||||||
z-index: 1;
|
|
||||||
width: 50%;
|
|
||||||
left: 0;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
button.next {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
right: 0;
|
|
||||||
height: 100%;
|
|
||||||
border: none;
|
|
||||||
cursor: e-resize;
|
|
||||||
z-index: 1;
|
|
||||||
width: 50%;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* PROJECT TOGGLE */
|
|
||||||
.fix {
|
|
||||||
width: 100%;
|
|
||||||
z-index: 1;
|
|
||||||
position: relative;
|
|
||||||
/*! margin-top: var(--line-height-S); */
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: var(--index-width) auto;
|
|
||||||
pointer-events: none;
|
|
||||||
mix-blend-mode: difference;
|
|
||||||
}
|
|
||||||
|
|
||||||
.toggle {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
.toggle p {
|
|
||||||
z-index: 1;
|
|
||||||
position: relative;
|
|
||||||
width: calc(0.5 * var(--index-width) - var(--body-margin));
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.fix:hover + .toggle {
|
|
||||||
display: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.fix .date {
|
|
||||||
text-align: right;
|
|
||||||
}
|
|
||||||
|
|
||||||
.closer {
|
|
||||||
cursor: var(--close-cursor);
|
|
||||||
}
|
|
||||||
|
|
||||||
.projects-index:has(.selected) .project:not(.selected) {
|
|
||||||
opacity: var(--low-opacity);
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
|
||||||
.projects-index:has(.selected) .project:not(.selected) .fix:hover + .toggle .project-slideshow-container {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.toggle .project-slideshow-container {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.fix:hover + .toggle .project-slideshow-container {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.selected .toggle .project-slideshow-container {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.project:not(.selected):hover {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
.project:not(.selected):hover .toggle {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.project > .toggle > .close-button {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.selected {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
.selected .toggle {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: calc(0.5 * var(--index-width) - var(--body-margin)) calc(0.5 * var(--index-width));
|
|
||||||
gap: var(--body-margin);
|
|
||||||
}
|
|
||||||
.selected .toggle p {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
.selected .slide-number {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
.selected .project-description {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
.selected .toggle > .close-button {
|
|
||||||
display: block;
|
|
||||||
min-height: calc(var(--line-height-S) * 2);
|
|
||||||
margin-bottom: calc(-1 * var(--line-height-S));
|
|
||||||
}
|
|
||||||
|
|
||||||
.slide-number {
|
|
||||||
text-align: right;
|
|
||||||
display: none;
|
|
||||||
padding-right: var(--body-margin);
|
|
||||||
color: var(--mix-blend-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
.project-toggler.grid {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: calc(0.5 * var(--index-width) - var(--body-margin)) calc(0.3333333333 * var(--index-width) - var(--body-margin)) calc(0.1666666667 * var(--index-width) - var(--body-margin));
|
|
||||||
gap: var(--body-margin);
|
|
||||||
pointer-events: all;
|
|
||||||
cursor: inherit;
|
|
||||||
}
|
|
||||||
|
|
||||||
.project-toggler span {
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.project-description {
|
|
||||||
margin-bottom: var(--line-height-S);
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* INFOS */
|
|
||||||
[data-template=infos] div {
|
|
||||||
padding-right: var(--body-margin);
|
|
||||||
}
|
|
||||||
[data-template=infos] main {
|
|
||||||
position: relative;
|
|
||||||
padding-top: calc(var(--line-height-S) + 0.35rem);
|
|
||||||
inset: 0;
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
padding-bottom: var(--font-size-XL);
|
|
||||||
overflow: auto;
|
|
||||||
padding-right: 0;
|
|
||||||
padding-left: 0;
|
|
||||||
}
|
|
||||||
[data-template=infos] #mobile-menu {
|
|
||||||
z-index: 2;
|
|
||||||
}
|
|
||||||
[data-template=infos] .main-infos {
|
|
||||||
max-width: 100%;
|
|
||||||
width: 660px;
|
|
||||||
}
|
|
||||||
[data-template=infos] .secondary-infos {
|
|
||||||
max-width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
header {
|
header {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
|
|
@ -544,24 +325,23 @@ button#mobile-menu-toggle {
|
||||||
-o-object-fit: cover;
|
-o-object-fit: cover;
|
||||||
object-fit: cover;
|
object-fit: cover;
|
||||||
}
|
}
|
||||||
#home-slideshow .main-infos {
|
#home-slideshow button {
|
||||||
width: calc(0.75 * var(--index-width));
|
position: absolute;
|
||||||
position: relative;
|
width: 50%;
|
||||||
float: left;
|
height: 100%;
|
||||||
|
}
|
||||||
|
#home-slideshow button.prev {
|
||||||
|
left: 0;
|
||||||
|
cursor: w-resize;
|
||||||
|
}
|
||||||
|
#home-slideshow button.next {
|
||||||
|
right: 0;
|
||||||
|
cursor: e-resize;
|
||||||
}
|
}
|
||||||
|
|
||||||
.skills {
|
body[data-template=index] main {
|
||||||
width: calc(0.5 * var(--index-width));
|
grid-template-columns: 8;
|
||||||
position: relative;
|
|
||||||
float: left;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.clients {
|
|
||||||
width: calc(0.5 * var(--index-width));
|
|
||||||
position: relative;
|
|
||||||
float: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
body[data-template=index] .filter-menu {
|
body[data-template=index] .filter-menu {
|
||||||
font-size: var(--font-size-L);
|
font-size: var(--font-size-L);
|
||||||
position: sticky;
|
position: sticky;
|
||||||
|
|
@ -590,11 +370,223 @@ body[data-template=index] .projects-index li.filtered-out {
|
||||||
body[data-template=index] .projects-index li section.toggle .project-slideshow .slide:not(.active) {
|
body[data-template=index] .projects-index li section.toggle .project-slideshow .slide:not(.active) {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
body[data-template=index] .projects-index .project-description-mobile {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
body[data-template=index] ul.projects-index {
|
body[data-template=index] ul.projects-index {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: var(--line-height-S);
|
gap: var(--line-height-S);
|
||||||
}
|
}
|
||||||
|
body[data-template=index] {
|
||||||
|
/* PROJECT TOGGLE */
|
||||||
|
}
|
||||||
|
body[data-template=index] .fix {
|
||||||
|
width: 100%;
|
||||||
|
z-index: 1;
|
||||||
|
position: relative;
|
||||||
|
/*! margin-top: var(--line-height-S); */
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: var(--index-width) auto;
|
||||||
|
pointer-events: none;
|
||||||
|
mix-blend-mode: difference;
|
||||||
|
}
|
||||||
|
body[data-template=index] .toggle {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
body[data-template=index] .toggle p {
|
||||||
|
z-index: 1;
|
||||||
|
position: relative;
|
||||||
|
width: calc(0.5 * var(--index-width) - var(--body-margin));
|
||||||
|
display: none;
|
||||||
|
padding-top: var(--line-height-S);
|
||||||
|
}
|
||||||
|
body[data-template=index] .fix:hover + .toggle {
|
||||||
|
display: auto;
|
||||||
|
}
|
||||||
|
body[data-template=index] .fix .date {
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
body[data-template=index] .closer {
|
||||||
|
cursor: var(--close-cursor);
|
||||||
|
}
|
||||||
|
body[data-template=index] .projects-index:has(.selected) .project:not(.selected) {
|
||||||
|
opacity: var(--low-opacity);
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
body[data-template=index] .projects-index:has(.selected) .project:not(.selected) .fix:hover + .toggle .project-slideshow-container {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
body[data-template=index] .toggle .project-slideshow-container {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
body[data-template=index] .fix:hover + .toggle .project-slideshow-container {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
body[data-template=index] .selected .toggle .project-slideshow-container {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
body[data-template=index] .project:not(.selected):hover {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
body[data-template=index] .project:not(.selected):hover .toggle {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
body[data-template=index] .project > .toggle > .close-button {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
body[data-template=index] .selected {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
body[data-template=index] .selected .toggle {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: calc(0.5 * var(--index-width) - var(--body-margin)) calc(0.5 * var(--index-width));
|
||||||
|
gap: var(--body-margin);
|
||||||
|
}
|
||||||
|
body[data-template=index] .selected .toggle p {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
body[data-template=index] .selected .slide-number {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
body[data-template=index] .selected .project-description {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
body[data-template=index] .selected .toggle > .close-button {
|
||||||
|
display: block;
|
||||||
|
min-height: calc(var(--line-height-S) * 2);
|
||||||
|
margin-bottom: calc(-1 * var(--line-height-S));
|
||||||
|
}
|
||||||
|
body[data-template=index] .slide-number {
|
||||||
|
text-align: right;
|
||||||
|
display: none;
|
||||||
|
padding-right: var(--body-margin);
|
||||||
|
color: var(--mix-blend-color);
|
||||||
|
}
|
||||||
|
body[data-template=index] .project-toggler.grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: calc(0.5 * var(--index-width) - var(--body-margin)) calc(0.3333333333 * var(--index-width) - var(--body-margin)) calc(0.1666666667 * var(--index-width) - var(--body-margin));
|
||||||
|
gap: var(--body-margin);
|
||||||
|
pointer-events: all;
|
||||||
|
cursor: inherit;
|
||||||
|
}
|
||||||
|
body[data-template=index] .project-toggler span {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
body[data-template=index] .project-description {
|
||||||
|
margin-bottom: var(--line-height-S);
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
body[data-template=index] {
|
||||||
|
/* PROJECT SLIDESHOW */
|
||||||
|
}
|
||||||
|
body[data-template=index] .project-slideshow {
|
||||||
|
width: -moz-fit-content;
|
||||||
|
width: fit-content;
|
||||||
|
height: -moz-fit-content;
|
||||||
|
height: fit-content;
|
||||||
|
box-sizing: border-box;
|
||||||
|
max-width: 100%;
|
||||||
|
right: 0;
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
body[data-template=index] .project-slideshow picture img,
|
||||||
|
body[data-template=index] .project-slideshow video.slide {
|
||||||
|
max-width: 100%;
|
||||||
|
max-height: calc(100vh - var(--body-margin) * 2);
|
||||||
|
vertical-align: bottom;
|
||||||
|
width: auto;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
body[data-template=index] picture {
|
||||||
|
inset: 0;
|
||||||
|
}
|
||||||
|
body[data-template=index] .project-slideshow-container {
|
||||||
|
display: block;
|
||||||
|
position: fixed;
|
||||||
|
height: 100%;
|
||||||
|
background-color: white;
|
||||||
|
top: var(--body-margin);
|
||||||
|
right: var(--body-margin);
|
||||||
|
bottom: var(--body-margin);
|
||||||
|
left: calc(var(--index-width) + var(--body-margin));
|
||||||
|
}
|
||||||
|
body[data-template=index] .project-slideshow-container .closer {
|
||||||
|
inset: 0;
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
width: auto;
|
||||||
|
}
|
||||||
|
body[data-template=index] button.prev {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
height: 100%;
|
||||||
|
border: none;
|
||||||
|
cursor: w-resize;
|
||||||
|
z-index: 1;
|
||||||
|
width: 50%;
|
||||||
|
left: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
body[data-template=index] button.next {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
height: 100%;
|
||||||
|
border: none;
|
||||||
|
cursor: e-resize;
|
||||||
|
z-index: 1;
|
||||||
|
width: 50%;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-template=infos] header {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
[data-template=infos] p {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
[data-template=infos] .main-title {
|
||||||
|
font-size: var(--font-size-XL);
|
||||||
|
line-break: strict;
|
||||||
|
left: -0.65vw;
|
||||||
|
position: relative;
|
||||||
|
top: var(--main-title-top);
|
||||||
|
margin-top: var(--body-margin);
|
||||||
|
line-height: 0.75;
|
||||||
|
}
|
||||||
|
[data-template=infos] .main-title:has(+ nav:hover) {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
[data-template=infos] .title-nav {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
[data-template=infos] main {
|
||||||
|
position: relative;
|
||||||
|
padding-top: calc(var(--line-height-S) + 0.35rem);
|
||||||
|
inset: 0;
|
||||||
|
padding-bottom: var(--font-size-XL);
|
||||||
|
overflow: auto;
|
||||||
|
padding-right: 0;
|
||||||
|
padding-left: 0;
|
||||||
|
}
|
||||||
|
[data-template=infos] .info-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 2fr 1fr 1fr;
|
||||||
|
gap: calc(var(--body-margin) * 2);
|
||||||
|
margin-top: calc(var(--font-size-L) + var(--line-height-S));
|
||||||
|
max-width: 1700px;
|
||||||
|
}
|
||||||
|
[data-template=infos] .info-grid h3 {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
[data-template=infos] .info-grid .presentation, [data-template=infos] .info-grid .clients {
|
||||||
|
margin-top: var(--line-height-S);
|
||||||
|
}
|
||||||
|
[data-template=infos] .info-grid .presentation {
|
||||||
|
font-size: var(--font-size-L);
|
||||||
|
line-height: 1.2;
|
||||||
|
}
|
||||||
|
|
||||||
@media screen and (max-width: 1000px) {
|
@media screen and (max-width: 1000px) {
|
||||||
:root {
|
:root {
|
||||||
|
|
@ -730,6 +722,9 @@ body[data-template=index] ul.projects-index {
|
||||||
#home-slideshow img:not(.slide.active img) {
|
#home-slideshow img:not(.slide.active img) {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
#home-slideshow .slide.portrait-pair.active {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
.close-button.closer {
|
.close-button.closer {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: var(--slider-height);
|
top: var(--slider-height);
|
||||||
|
|
@ -811,8 +806,25 @@ body[data-template=index] ul.projects-index {
|
||||||
left: var(--body-margin);
|
left: var(--body-margin);
|
||||||
padding-right: 0;
|
padding-right: 0;
|
||||||
}
|
}
|
||||||
|
body[data-template=index] .projects-index .project-description-mobile {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
body[data-template=index] .projects-index .project-description {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
body[data-template=infos] main {
|
body[data-template=infos] main {
|
||||||
padding-top: var(--font-size-XL);
|
padding-top: var(--line-height-S);
|
||||||
|
}
|
||||||
|
body[data-template=infos] main .info-grid {
|
||||||
|
display: block;
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
body[data-template=infos] main .info-grid .main-infos {
|
||||||
|
max-width: 800px;
|
||||||
|
}
|
||||||
|
body[data-template=infos] main .info-grid .secondary-infos {
|
||||||
|
margin-top: var(--line-height-S);
|
||||||
|
max-width: 500px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@media (max-width: 687px) {
|
@media (max-width: 687px) {
|
||||||
|
|
|
||||||
File diff suppressed because one or more lines are too long
|
|
@ -1,6 +1,8 @@
|
||||||
|
@import "src/_variables.scss";
|
||||||
@import "src/_reset.scss";
|
@import "src/_reset.scss";
|
||||||
@import "src/_main.scss";
|
@import "src/_main.scss";
|
||||||
@import "src/_nav.scss";
|
@import "src/_nav.scss";
|
||||||
@import "src/_home.scss";
|
@import "src/_home.scss";
|
||||||
@import "src/_index.scss";
|
@import "src/_index.scss";
|
||||||
|
@import "src/_infos.scss";
|
||||||
@import "src/_mobile.scss";
|
@import "src/_mobile.scss";
|
||||||
|
|
|
||||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
|
@ -1,22 +1,25 @@
|
||||||
const slideshow = document.getElementById("home-slideshow");
|
const slideshow = document.getElementById("home-slideshow");
|
||||||
|
|
||||||
if (slideshow) {
|
if (slideshow) {
|
||||||
const items = [...slideshow.querySelectorAll(".slide")];
|
const items = [...slideshow.querySelectorAll(".slide")];
|
||||||
const prev = slideshow.querySelector(".prev");
|
const prev = slideshow.querySelector(".prev");
|
||||||
const next = slideshow.querySelector(".next");
|
const next = slideshow.querySelector(".next");
|
||||||
let current = 0;
|
let current = 0;
|
||||||
|
|
||||||
function isDesktopOnly(index) {
|
function isPortrait() {
|
||||||
return (
|
return window.innerHeight > window.innerWidth;
|
||||||
window.innerWidth < 1000 &&
|
}
|
||||||
items[index].classList.contains("desktop-only")
|
|
||||||
);
|
function isSkipped(index) {
|
||||||
|
const el = items[index];
|
||||||
|
if (isPortrait() && el.classList.contains("desktop-only")) return true;
|
||||||
|
if (!isPortrait() && el.classList.contains("mobile-only")) return true;
|
||||||
|
return false;
|
||||||
}
|
}
|
||||||
|
|
||||||
function findNext(from, direction) {
|
function findNext(from, direction) {
|
||||||
let index = (from + direction + items.length) % items.length;
|
let index = (from + direction + items.length) % items.length;
|
||||||
let steps = 0;
|
let steps = 0;
|
||||||
while (isDesktopOnly(index) && steps < items.length) {
|
while (isSkipped(index) && steps < items.length) {
|
||||||
index = (index + direction + items.length) % items.length;
|
index = (index + direction + items.length) % items.length;
|
||||||
steps++;
|
steps++;
|
||||||
}
|
}
|
||||||
|
|
@ -35,4 +38,11 @@ if (slideshow) {
|
||||||
|
|
||||||
prev?.addEventListener("click", () => goTo(findNext(current, -1)));
|
prev?.addEventListener("click", () => goTo(findNext(current, -1)));
|
||||||
next?.addEventListener("click", () => goTo(findNext(current, 1)));
|
next?.addEventListener("click", () => goTo(findNext(current, 1)));
|
||||||
|
|
||||||
|
// Recalculer la slide active si on tourne l'écran
|
||||||
|
window.addEventListener("orientationchange", () => {
|
||||||
|
if (isSkipped(current)) {
|
||||||
|
goTo(findNext(current, 1));
|
||||||
|
}
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
@ -1,18 +1,36 @@
|
||||||
label: À propos
|
title: À propos
|
||||||
icon: info
|
icon: info
|
||||||
|
|
||||||
|
columns:
|
||||||
|
- width: 1/3
|
||||||
sections:
|
sections:
|
||||||
Fields:
|
info-fields:
|
||||||
type: fields
|
type: fields
|
||||||
fields:
|
fields:
|
||||||
presentation:
|
|
||||||
label: Presentation
|
|
||||||
type: writer
|
|
||||||
contact:
|
contact:
|
||||||
label: Contact
|
label: Contact
|
||||||
type: writer
|
type: writer
|
||||||
skills:
|
presentation:
|
||||||
label: Compétences
|
label: Presentation
|
||||||
|
type: writer
|
||||||
|
help: Si besoin d'insérrer une espace fine insécable, copier-coller le caractère entre guillemets « »
|
||||||
|
- width: 1/3
|
||||||
|
sections:
|
||||||
|
service-fields:
|
||||||
|
type: fields
|
||||||
|
fields:
|
||||||
|
services:
|
||||||
|
label: Services
|
||||||
type: writer
|
type: writer
|
||||||
clients:
|
clients:
|
||||||
label: Clients
|
label: Clients
|
||||||
type: writer
|
type: writer
|
||||||
|
- width: 1/3
|
||||||
|
sections:
|
||||||
|
extra-fields:
|
||||||
|
type: fields
|
||||||
|
fields:
|
||||||
|
complementaryInfos:
|
||||||
|
label: Informations complémentaires
|
||||||
|
type: writer
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -44,4 +44,8 @@ tabs:
|
||||||
description:
|
description:
|
||||||
label: Description
|
label: Description
|
||||||
type: writer
|
type: writer
|
||||||
|
help: Si besoin d'insérrer une espace fine insécable, copier-coller le caractère entre guillemets « »
|
||||||
|
descriptionMobile:
|
||||||
|
label: Description pour mobile
|
||||||
|
type: writer
|
||||||
files: tabs/files
|
files: tabs/files
|
||||||
|
|
|
||||||
|
|
@ -4,12 +4,21 @@
|
||||||
|
|
||||||
<div id="home-slideshow">
|
<div id="home-slideshow">
|
||||||
|
|
||||||
|
<button class="prev"></button>
|
||||||
|
<button class="next"></button>
|
||||||
|
|
||||||
<?php foreach ($slides as $slide): ?>
|
<?php foreach ($slides as $slide): ?>
|
||||||
<?php if ($slide['pair']): ?>
|
<?php if ($slide['pair']): ?>
|
||||||
<div class="slide portrait-pair">
|
<div class="slide portrait-pair desktop-only">
|
||||||
<?php snippet('picture', ['file' => $slide['a'], 'srcsetName' => 'home-slideshow', 'sizes' => '50vw', 'lazy' => false]) ?>
|
<?php snippet('picture', ['file' => $slide['a'], 'srcsetName' => 'home-slideshow', 'sizes' => '50vw', 'lazy' => false]) ?>
|
||||||
<?php snippet('picture', ['file' => $slide['b'], 'srcsetName' => 'home-slideshow', 'sizes' => '50vw', 'lazy' => false]) ?>
|
<?php snippet('picture', ['file' => $slide['b'], 'srcsetName' => 'home-slideshow', 'sizes' => '50vw', 'lazy' => false]) ?>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="slide mobile-only">
|
||||||
|
<?php snippet('picture', ['file' => $slide['a'], 'srcsetName' => 'home-slideshow', 'sizes' => '100vw', 'lazy' => false]) ?>
|
||||||
|
</div>
|
||||||
|
<div class="slide mobile-only">
|
||||||
|
<?php snippet('picture', ['file' => $slide['b'], 'srcsetName' => 'home-slideshow', 'sizes' => '100vw', 'lazy' => false]) ?>
|
||||||
|
</div>
|
||||||
<?php elseif ($slide['file']->type() === 'video'): ?>
|
<?php elseif ($slide['file']->type() === 'video'): ?>
|
||||||
<div class="slide">
|
<div class="slide">
|
||||||
<video autoplay muted loop playsinline data-id="<?= $slide['file']->uuid() ?>">
|
<video autoplay muted loop playsinline data-id="<?= $slide['file']->uuid() ?>">
|
||||||
|
|
@ -23,10 +32,9 @@
|
||||||
<?php endif ?>
|
<?php endif ?>
|
||||||
<?php endforeach ?>
|
<?php endforeach ?>
|
||||||
|
|
||||||
<button class="prev"></button>
|
|
||||||
<button class="next"></button>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<script src="/assets/js/home-slideshow.js"></script>
|
<script src="/assets/js/home-slideshow.js"></script>
|
||||||
<script src="/assets/js/mobile-menu-toggle.js"></script>
|
<script src="/assets/js/mobile-menu-toggle.js"></script>
|
||||||
<?php snippet('footer') ?>
|
<?php snippet('footer') ?>
|
||||||
|
|
|
||||||
|
|
@ -61,6 +61,7 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="project-description"><?= $project->description() ?></div>
|
<div class="project-description"><?= $project->description() ?></div>
|
||||||
|
<div class="project-description-mobile"><?= $project->descriptionMobile() ?></div>
|
||||||
<button class="close-button closer"></button>
|
<button class="close-button closer"></button>
|
||||||
</section>
|
</section>
|
||||||
</li>
|
</li>
|
||||||
|
|
|
||||||
|
|
@ -2,23 +2,37 @@
|
||||||
|
|
||||||
<?php snippet('mobile-menu') ?>
|
<?php snippet('mobile-menu') ?>
|
||||||
|
|
||||||
|
<div class="info-grid">
|
||||||
|
|
||||||
<section class="main-infos">
|
<section class="main-infos">
|
||||||
|
<div class="contact">
|
||||||
<p>
|
<p>
|
||||||
<?= $page->presentation() ?>
|
<?= $page->contact() ?>
|
||||||
</p>
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="presentation">
|
||||||
|
<p><?= $page->presentation()->html() ?></p>
|
||||||
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section class="secondary-infos">
|
<section class="secondary-infos">
|
||||||
<div class="skills">
|
<div class="services">
|
||||||
|
<h3>Services</h3>
|
||||||
<p>
|
<p>
|
||||||
<?= $page->contact() ?><br>
|
<?= $page->services() ?>
|
||||||
<?= $page->skills() ?>
|
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="clients">
|
<div class="clients">
|
||||||
|
<h3>Clients</h3>
|
||||||
<?= $page->clients() ?>
|
<?= $page->clients() ?>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
<section class="complementary-infos">
|
||||||
|
<?= $page->complementaryInfos() ?>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
<script src="/assets/js/mobile-menu-toggle.js"></script>
|
<script src="/assets/js/mobile-menu-toggle.js"></script>
|
||||||
<?php snippet('footer') ?>
|
<?php snippet('footer') ?>
|
||||||
13
site/templates/test.html
Normal file
13
site/templates/test.html
Normal file
|
|
@ -0,0 +1,13 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Document</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
 
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Loading…
Add table
Add a link
Reference in a new issue