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;
|
||||
}
|
||||
|
||||
.main-infos {
|
||||
width: calc(3 / 4 * var(--index-width));
|
||||
position: relative;
|
||||
float: left;
|
||||
button{
|
||||
position: absolute;
|
||||
width: 50%;
|
||||
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"] {
|
||||
|
||||
main {
|
||||
grid-template-columns: 8;
|
||||
}
|
||||
|
||||
.filter-menu {
|
||||
font-size: var(--font-size-L);
|
||||
position: sticky;
|
||||
|
|
@ -37,6 +42,10 @@ body[data-template="index"] {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.project-description-mobile {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
ul.projects-index {
|
||||
|
|
@ -44,4 +53,204 @@ body[data-template="index"] {
|
|||
flex-direction: column;
|
||||
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;
|
||||
}
|
||||
|
||||
: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 {
|
||||
font-family: var(--main-font);
|
||||
|
|
@ -63,20 +43,10 @@ body {
|
|||
bottom: 0;
|
||||
}
|
||||
|
||||
main {
|
||||
grid-template-columns: 8;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-weight: normal;
|
||||
line-height: inherit;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
p {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
|
|
@ -95,239 +65,6 @@ ul {
|
|||
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;
|
||||
margin: 0;
|
||||
height: var(--slider-height);
|
||||
|
||||
button.all-projects-closer {
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -26,11 +27,13 @@
|
|||
inset: 0;
|
||||
width: auto;
|
||||
height: auto;
|
||||
|
||||
picture,
|
||||
video.slide {
|
||||
inset: 0;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
picture img,
|
||||
video.slide {
|
||||
width: 100%;
|
||||
|
|
@ -64,8 +67,7 @@
|
|||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
padding: var(--font-size-XL) var(--body-margin) var(--body-margin)
|
||||
var(--body-margin);
|
||||
padding: var(--font-size-XL) var(--body-margin) var(--body-margin) var(--body-margin);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
|
|
@ -82,10 +84,12 @@
|
|||
justify-content: center;
|
||||
align-items: center;
|
||||
inset: 0;
|
||||
|
||||
ul,
|
||||
h1 {
|
||||
z-index: 4;
|
||||
}
|
||||
|
||||
.backdrop {
|
||||
inset: 0;
|
||||
background-color: white;
|
||||
|
|
@ -94,6 +98,7 @@
|
|||
z-index: 3;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.title-nav {
|
||||
position: absolute;
|
||||
line-break: strict;
|
||||
|
|
@ -102,6 +107,7 @@
|
|||
margin-top: var(--body-margin);
|
||||
line-height: 0.75;
|
||||
}
|
||||
|
||||
ul {
|
||||
display: flex;
|
||||
font-size: var(--font-size-L);
|
||||
|
|
@ -131,7 +137,7 @@
|
|||
margin: 0 auto;
|
||||
}
|
||||
|
||||
header:hover ~ main {
|
||||
header:hover~main {
|
||||
opacity: 1;
|
||||
transition-duration: 0;
|
||||
}
|
||||
|
|
@ -150,6 +156,12 @@
|
|||
display: none;
|
||||
}
|
||||
|
||||
#home-slideshow .slide {
|
||||
&.portrait-pair.active {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.close-button.closer {
|
||||
position: fixed;
|
||||
top: var(--slider-height);
|
||||
|
|
@ -208,6 +220,7 @@
|
|||
main {
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.filter-menu {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
|
@ -235,11 +248,11 @@
|
|||
padding-bottom: calc(var(--font-size-XL));
|
||||
}
|
||||
|
||||
.selected .fix:hover + .toggle {
|
||||
.selected .fix:hover+.toggle {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.fix:hover + .toggle {
|
||||
.fix:hover+.toggle {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
|
@ -254,11 +267,35 @@
|
|||
left: var(--body-margin);
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.projects-index {
|
||||
.project-description-mobile {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.project-description {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
body[data-template="infos"] {
|
||||
|
||||
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;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -268,4 +305,4 @@
|
|||
padding-right: var(--body-margin);
|
||||
width: calc(100% - var(--body-margin));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -200,3 +200,4 @@ button#mobile-menu-toggle {
|
|||
#mobile-menu-wrapper {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -12,3 +12,11 @@ button {
|
|||
nav li {
|
||||
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");
|
||||
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 {
|
||||
--main-font: "neue-haas-grotesk-display", sans-serif;
|
||||
--font-size-S: 0.9rem;
|
||||
|
|
@ -51,6 +20,45 @@ nav li {
|
|||
--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 {
|
||||
font-family: var(--main-font);
|
||||
font-size: var(--font-size-S);
|
||||
|
|
@ -63,20 +71,10 @@ body {
|
|||
bottom: 0;
|
||||
}
|
||||
|
||||
main {
|
||||
grid-template-columns: 8;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-weight: normal;
|
||||
line-height: inherit;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
p {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
|
|
@ -96,223 +94,6 @@ ul {
|
|||
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 {
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
|
|
@ -544,24 +325,23 @@ button#mobile-menu-toggle {
|
|||
-o-object-fit: cover;
|
||||
object-fit: cover;
|
||||
}
|
||||
#home-slideshow .main-infos {
|
||||
width: calc(0.75 * var(--index-width));
|
||||
position: relative;
|
||||
float: left;
|
||||
#home-slideshow button {
|
||||
position: absolute;
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
}
|
||||
#home-slideshow button.prev {
|
||||
left: 0;
|
||||
cursor: w-resize;
|
||||
}
|
||||
#home-slideshow button.next {
|
||||
right: 0;
|
||||
cursor: e-resize;
|
||||
}
|
||||
|
||||
.skills {
|
||||
width: calc(0.5 * var(--index-width));
|
||||
position: relative;
|
||||
float: left;
|
||||
body[data-template=index] main {
|
||||
grid-template-columns: 8;
|
||||
}
|
||||
|
||||
.clients {
|
||||
width: calc(0.5 * var(--index-width));
|
||||
position: relative;
|
||||
float: left;
|
||||
}
|
||||
|
||||
body[data-template=index] .filter-menu {
|
||||
font-size: var(--font-size-L);
|
||||
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) {
|
||||
display: none;
|
||||
}
|
||||
body[data-template=index] .projects-index .project-description-mobile {
|
||||
display: none;
|
||||
}
|
||||
body[data-template=index] ul.projects-index {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
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) {
|
||||
:root {
|
||||
|
|
@ -730,6 +722,9 @@ body[data-template=index] ul.projects-index {
|
|||
#home-slideshow img:not(.slide.active img) {
|
||||
display: none;
|
||||
}
|
||||
#home-slideshow .slide.portrait-pair.active {
|
||||
display: block;
|
||||
}
|
||||
.close-button.closer {
|
||||
position: fixed;
|
||||
top: var(--slider-height);
|
||||
|
|
@ -811,8 +806,25 @@ body[data-template=index] ul.projects-index {
|
|||
left: var(--body-margin);
|
||||
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 {
|
||||
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) {
|
||||
|
|
|
|||
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/_main.scss";
|
||||
@import "src/_nav.scss";
|
||||
@import "src/_home.scss";
|
||||
@import "src/_index.scss";
|
||||
@import "src/_infos.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");
|
||||
|
||||
if (slideshow) {
|
||||
const items = [...slideshow.querySelectorAll(".slide")];
|
||||
const prev = slideshow.querySelector(".prev");
|
||||
const next = slideshow.querySelector(".next");
|
||||
let current = 0;
|
||||
|
||||
function isDesktopOnly(index) {
|
||||
return (
|
||||
window.innerWidth < 1000 &&
|
||||
items[index].classList.contains("desktop-only")
|
||||
);
|
||||
function isPortrait() {
|
||||
return window.innerHeight > window.innerWidth;
|
||||
}
|
||||
|
||||
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) {
|
||||
let index = (from + direction + items.length) % items.length;
|
||||
let steps = 0;
|
||||
while (isDesktopOnly(index) && steps < items.length) {
|
||||
while (isSkipped(index) && steps < items.length) {
|
||||
index = (index + direction + items.length) % items.length;
|
||||
steps++;
|
||||
}
|
||||
|
|
@ -35,4 +38,11 @@ if (slideshow) {
|
|||
|
||||
prev?.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
|
||||
sections:
|
||||
Fields:
|
||||
type: fields
|
||||
fields:
|
||||
presentation:
|
||||
label: Presentation
|
||||
type: writer
|
||||
contact:
|
||||
label: Contact
|
||||
type: writer
|
||||
skills:
|
||||
label: Compétences
|
||||
type: writer
|
||||
clients:
|
||||
label: Clients
|
||||
type: writer
|
||||
|
||||
columns:
|
||||
- width: 1/3
|
||||
sections:
|
||||
info-fields:
|
||||
type: fields
|
||||
fields:
|
||||
contact:
|
||||
label: Contact
|
||||
type: writer
|
||||
presentation:
|
||||
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
|
||||
clients:
|
||||
label: Clients
|
||||
type: writer
|
||||
- width: 1/3
|
||||
sections:
|
||||
extra-fields:
|
||||
type: fields
|
||||
fields:
|
||||
complementaryInfos:
|
||||
label: Informations complémentaires
|
||||
type: writer
|
||||
|
||||
|
|
|
|||
|
|
@ -44,4 +44,8 @@ tabs:
|
|||
description:
|
||||
label: Description
|
||||
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
|
||||
|
|
|
|||
|
|
@ -4,12 +4,21 @@
|
|||
|
||||
<div id="home-slideshow">
|
||||
|
||||
<button class="prev"></button>
|
||||
<button class="next"></button>
|
||||
|
||||
<?php foreach ($slides as $slide): ?>
|
||||
<?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['b'], 'srcsetName' => 'home-slideshow', 'sizes' => '50vw', 'lazy' => false]) ?>
|
||||
</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'): ?>
|
||||
<div class="slide">
|
||||
<video autoplay muted loop playsinline data-id="<?= $slide['file']->uuid() ?>">
|
||||
|
|
@ -23,10 +32,9 @@
|
|||
<?php endif ?>
|
||||
<?php endforeach ?>
|
||||
|
||||
<button class="prev"></button>
|
||||
<button class="next"></button>
|
||||
</div>
|
||||
|
||||
|
||||
<script src="/assets/js/home-slideshow.js"></script>
|
||||
<script src="/assets/js/mobile-menu-toggle.js"></script>
|
||||
<?php snippet('footer') ?>
|
||||
|
|
|
|||
|
|
@ -61,6 +61,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="project-description"><?= $project->description() ?></div>
|
||||
<div class="project-description-mobile"><?= $project->descriptionMobile() ?></div>
|
||||
<button class="close-button closer"></button>
|
||||
</section>
|
||||
</li>
|
||||
|
|
|
|||
|
|
@ -2,23 +2,37 @@
|
|||
|
||||
<?php snippet('mobile-menu') ?>
|
||||
|
||||
<div class="info-grid">
|
||||
|
||||
<section class="main-infos">
|
||||
<p>
|
||||
<?= $page->presentation() ?>
|
||||
</p>
|
||||
</section>
|
||||
<section class="secondary-infos">
|
||||
<div class="skills">
|
||||
<p>
|
||||
<?= $page->contact() ?><br>
|
||||
<?= $page->skills() ?>
|
||||
</p>
|
||||
</div>
|
||||
<div class="clients">
|
||||
<?= $page->clients() ?>
|
||||
</div>
|
||||
</section>
|
||||
<section class="main-infos">
|
||||
<div class="contact">
|
||||
<p>
|
||||
<?= $page->contact() ?>
|
||||
</p>
|
||||
</div>
|
||||
<div class="presentation">
|
||||
<p><?= $page->presentation()->html() ?></p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="secondary-infos">
|
||||
<div class="services">
|
||||
<h3>Services</h3>
|
||||
<p>
|
||||
<?= $page->services() ?>
|
||||
</p>
|
||||
</div>
|
||||
<div class="clients">
|
||||
<h3>Clients</h3>
|
||||
<?= $page->clients() ?>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="complementary-infos">
|
||||
<?= $page->complementaryInfos() ?>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
|
||||
<script src="/assets/js/mobile-menu-toggle.js"></script>
|
||||
<?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