update to kirby 4.8
This commit is contained in:
isUnknown
commit
7d7df341d1
636 changed files with 139949 additions and 0 deletions
72
assets/css/custom-panel.css
Normal file
72
assets/css/custom-panel.css
Normal file
|
|
@ -0,0 +1,72 @@
|
|||
/* texts */
|
||||
@font-face {
|
||||
font-family: "iA-Writer-duo-V";
|
||||
font-style: normal;
|
||||
src: url("/assets/fonts/iAWriterDuoV.woff2");
|
||||
}
|
||||
@font-face {
|
||||
font-family: "iA-Writer-duo-V";
|
||||
font-style: italic;
|
||||
src: url("/assets/fonts/iAWriterDuoV-Italic.woff2");
|
||||
}
|
||||
@font-face {
|
||||
font-family: "iA-Writer-Quattro-V";
|
||||
font-style: normal;
|
||||
src: url("/assets/fonts/iAWriterQuattroV.woff2");
|
||||
}
|
||||
@font-face {
|
||||
font-family: "iA-Writer-Quattro-V";
|
||||
font-style: italic;
|
||||
src: url("/assets/fonts/iAWriterQuattroV-Italic.woff2");
|
||||
}
|
||||
|
||||
.k-writer * {
|
||||
font-family: "iA-Writer-Quattro-V", var(--font-sans, sans-serif);
|
||||
line-height: 140%;
|
||||
}
|
||||
.k-writer p {
|
||||
font-size: 1.4375rem;
|
||||
}
|
||||
|
||||
.k-writer h1,
|
||||
.k-writer h2,
|
||||
.k-writer h3,
|
||||
.k-writer h4 {
|
||||
color: var(--color-body, #323131);
|
||||
font-family: "iA-Writer-duo-V", sans-serif;
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
line-height: 120%;
|
||||
}
|
||||
|
||||
.k-writer h1 {
|
||||
font-size: 6.1875rem;
|
||||
}
|
||||
|
||||
.k-writer h2 {
|
||||
margin-top: 6.47rem;
|
||||
font-size: 4.3125rem;
|
||||
}
|
||||
|
||||
.k-writer h3 {
|
||||
margin-top: 4.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
font-size: 3rem;
|
||||
}
|
||||
|
||||
.k-writer h4 {
|
||||
margin-top: 3.09rem;
|
||||
margin-bottom: 1.03rem;
|
||||
font-size: 2.0625rem;
|
||||
}
|
||||
|
||||
.k-writer p {
|
||||
margin-bottom: 1rem;
|
||||
margin-right: calc(var(--padding-body) + var(--margin-right-p));
|
||||
font-size: 1.4375rem;
|
||||
font-weight: 450;
|
||||
}
|
||||
|
||||
/* .k-textarea-input-native {
|
||||
padding: var(--input-padding-multiline);
|
||||
} */
|
||||
755
assets/css/style.css
Normal file
755
assets/css/style.css
Normal file
|
|
@ -0,0 +1,755 @@
|
|||
/* variables */
|
||||
:root {
|
||||
/* colors */
|
||||
--color-grey-dark: #323131;
|
||||
--color-grey-normal: #c8c8c8;
|
||||
--color-grey-light: #e8e8e8;
|
||||
|
||||
--color-grey-dark-rgba: rgba(50, 49, 49, 1);
|
||||
--color-grey-dark-rgba-unvisible: rgba(50, 49, 49, 0);
|
||||
--color-grey-normal-rgba: rgba(200, 200, 200, 1);
|
||||
--color-grey-normal-rgba-unvisible: rgba(200, 200, 200, 0);
|
||||
--color-grey-light-rgba: rgba(232, 232, 232, 1);
|
||||
--color-grey-light-rgba-unvisible: rgba(232, 232, 232, 0);
|
||||
|
||||
/* padding */
|
||||
--padding-body: 9.375vw; /* 120px / 1280px */
|
||||
|
||||
/* font family */
|
||||
--font-family-duo: "iA-Writer-duo-V", sans-serif; /* Monospace */
|
||||
--font-family-quattro: "iA-Writer-Quattro-V", sans-serif; /* Sans serif */
|
||||
|
||||
/* font size */
|
||||
--font-size-base: 1rem;
|
||||
--font-size-scale: 1.44;
|
||||
--font-size-demi-scale: 1.2;
|
||||
--font-size-text: calc(
|
||||
var(--font-size-base) * var(--font-size-scale)
|
||||
); /* 23px */
|
||||
--font-size-caption: calc(
|
||||
var(--font-size-base) * var(--font-size-demi-scale)
|
||||
); /* 19px */
|
||||
--font-size-table: var(--font-size-caption);
|
||||
--font-size-logo: calc(
|
||||
calc(var(--font-size-h1) * var(--font-size-scale)) *
|
||||
var(--font-size-demi-scale)
|
||||
); /* 171px */
|
||||
--font-size-introduction: var(--font-size-h4); /* 33px */
|
||||
--font-size-h1: calc(var(--font-size-h2) * var(--font-size-scale)); /* 99px */
|
||||
--font-size-h2: calc(var(--font-size-h3) * var(--font-size-scale)); /* 69px */
|
||||
--font-size-h3: calc(var(--font-size-h4) * var(--font-size-scale)); /* 48px */
|
||||
--font-size-h4: calc(var(--font-size-h5) * var(--font-size-scale)); /* 33px */
|
||||
--font-size-h5: calc(var(--font-size-text)); /* 23px */
|
||||
|
||||
/* font weight */
|
||||
--font-weight-text: 450;
|
||||
--font-weight-semi-bold: 650;
|
||||
--font-weight-bold: 700;
|
||||
|
||||
/* line height */
|
||||
--line-height-text: 140%;
|
||||
--line-height-heading: 120%;
|
||||
|
||||
/* margin */
|
||||
--margin-heading: 1.5em;
|
||||
--margin-text: 0.5em;
|
||||
--margin-list: 0.25em;
|
||||
--margin-right-p: calc(var(--padding-body) * 2);
|
||||
|
||||
/* linear gradient */
|
||||
--linear-gradient-dotted: linear-gradient(
|
||||
to right,
|
||||
currentColor 50%,
|
||||
transparent 50%
|
||||
);
|
||||
--linear-gradient-solid: linear-gradient(
|
||||
to right,
|
||||
currentColor 100%,
|
||||
transparent 100%
|
||||
);
|
||||
--linear-gradient-background-size: 0.2em 0.09em;
|
||||
}
|
||||
|
||||
/* scrollbar */
|
||||
/* Works on Firefox */
|
||||
|
||||
body,
|
||||
.layer {
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: var(--color-grey-dark) transparent;
|
||||
}
|
||||
|
||||
/* Works on Chrome, Edge, and Safari */
|
||||
|
||||
body::-webkit-scrollbar,
|
||||
.layer::-webkit-scrollbar,
|
||||
table::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
}
|
||||
|
||||
body::-webkit-scrollbar-track,
|
||||
.layer::-webkit-scrollbar-track,
|
||||
table::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
body::-webkit-scrollbar-thumb,
|
||||
.layer::-webkit-scrollbar-thumb,
|
||||
table::-webkit-scrollbar-thumb {
|
||||
background-color: var(--color-grey-dark);
|
||||
border-radius: 0px;
|
||||
border: none;
|
||||
}
|
||||
|
||||
figure {
|
||||
width: 100%;
|
||||
margin: 3rem 0; /*48px 0px */
|
||||
}
|
||||
|
||||
img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.lazysrcset-ratio {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.lazysrcset-ratio > img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
.lazysrcset-ratio > img:after {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 0;
|
||||
content: "";
|
||||
}
|
||||
|
||||
/* html */
|
||||
body,
|
||||
html,
|
||||
p {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: var(--font-family-quattro);
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--color-grey-dark);
|
||||
color: var(--color-grey-light);
|
||||
font-size: var(--font-size-text);
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
button {
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
display: inline-block;
|
||||
font-size: inherit;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
a {
|
||||
cursor: none;
|
||||
}
|
||||
|
||||
hr {
|
||||
color: inherit;
|
||||
background-repeat: repeat-x;
|
||||
background-image: var(--linear-gradient-dotted);
|
||||
background-position: bottom;
|
||||
background-size: var(--linear-gradient-background-size);
|
||||
border: none;
|
||||
height: 0.25rem;
|
||||
margin: 2rem 0;
|
||||
}
|
||||
|
||||
a,
|
||||
button {
|
||||
pointer-events: all;
|
||||
}
|
||||
|
||||
/* texts */
|
||||
@font-face {
|
||||
font-family: "iA-Writer-duo-V";
|
||||
font-style: normal;
|
||||
src: url("/assets/fonts/iAWriterDuoV.woff2");
|
||||
}
|
||||
@font-face {
|
||||
font-family: "iA-Writer-duo-V";
|
||||
font-style: italic;
|
||||
src: url("/assets/fonts/iAWriterDuoV-Italic.woff2");
|
||||
}
|
||||
@font-face {
|
||||
font-family: "iA-Writer-Quattro-V";
|
||||
font-style: normal;
|
||||
src: url("/assets/fonts/iAWriterQuattroV.woff2");
|
||||
}
|
||||
@font-face {
|
||||
font-family: "iA-Writer-Quattro-V";
|
||||
font-style: italic;
|
||||
src: url("/assets/fonts/iAWriterQuattroV-Italic.woff2");
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5 {
|
||||
color: var(--color-grey-dark);
|
||||
font-family: var(--font-family-duo);
|
||||
font-style: normal;
|
||||
font-variation-settings: "wght" var(--font-weight-bold);
|
||||
line-height: var(--line-height-heading);
|
||||
margin-top: var(--margin-heading);
|
||||
margin-bottom: var(--margin-text);
|
||||
overflow-wrap: break-word;
|
||||
-webkit-hyphens: auto;
|
||||
-ms-hyphens: auto;
|
||||
hyphens: auto;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: var(--font-size-h1);
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: var(--font-size-h2);
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: var(--font-size-h3);
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: var(--font-size-h4);
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-size: var(--font-size-h5);
|
||||
}
|
||||
|
||||
button {
|
||||
padding: 0;
|
||||
cursor: none;
|
||||
}
|
||||
|
||||
table th,
|
||||
table td {
|
||||
font-family: var(--font-family-duo);
|
||||
font-size: var(--font-size-table);
|
||||
}
|
||||
table th {
|
||||
font-variation-settings: "wght" var(--font-weight-semi-bold);
|
||||
}
|
||||
table td {
|
||||
font-variation-settings: "wght" var(--font-weight-text);
|
||||
}
|
||||
|
||||
#first-level a,
|
||||
#first-level .note button {
|
||||
text-shadow: -0.08em 0.08em 0 var(--color-grey-dark),
|
||||
0px 0.08em 0 var(--color-grey-dark), 0.04em 0.08em 0 var(--color-grey-dark),
|
||||
0.08em 0.08em 0 var(--color-grey-dark);
|
||||
}
|
||||
#second-level a,
|
||||
#second-level .note button {
|
||||
text-shadow: -0.08em 0.08em 0 var(--color-grey-light),
|
||||
0px 0.08em 0 var(--color-grey-light),
|
||||
0.04em 0.08em 0 var(--color-grey-light),
|
||||
0.08em 0.08em 0 var(--color-grey-light);
|
||||
}
|
||||
#third-level a,
|
||||
#third-level .note button {
|
||||
text-shadow: -0.08em 0.08em 0 var(--color-grey-normal),
|
||||
0px 0.08em 0 var(--color-grey-normal),
|
||||
0.04em 0.08em 0 var(--color-grey-normal),
|
||||
0.08em 0.08em 0 var(--color-grey-normal);
|
||||
}
|
||||
|
||||
a:not(.layer-btn),
|
||||
.note button {
|
||||
color: inherit;
|
||||
font-family: inherit;
|
||||
font-variation-settings: inherit;
|
||||
text-decoration: none;
|
||||
background-repeat: repeat-x;
|
||||
background-image: var(--linear-gradient-dotted);
|
||||
background-position: bottom;
|
||||
background-size: var(--linear-gradient-background-size);
|
||||
}
|
||||
|
||||
a:hover:not(.layer-btn),
|
||||
.note:hover button {
|
||||
background-image: var(--linear-gradient-solid);
|
||||
background-position: bottom;
|
||||
background-size: 100% 0.09em;
|
||||
}
|
||||
|
||||
a:not(figure a)::after {
|
||||
content: "\00A0↗";
|
||||
}
|
||||
a:not([target], figure a)::after {
|
||||
content: "\00A0→";
|
||||
}
|
||||
|
||||
p {
|
||||
margin-bottom: var(--margin-text);
|
||||
margin-right: var(--margin-right-p);
|
||||
font-size: var(--font-size-text);
|
||||
font-variation-settings: "wght" var(--font-weight-text);
|
||||
}
|
||||
.column:not([style="--span:12"]) p {
|
||||
margin-right: 0;
|
||||
}
|
||||
.column:not([style="--span:12"]) figure {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
blockquote footer,
|
||||
figcaption,
|
||||
.callout {
|
||||
font-family: var(--font-family-duo);
|
||||
}
|
||||
|
||||
blockquote,
|
||||
blockquote footer {
|
||||
font-size: var(--font-size-text);
|
||||
font-synthesis: none;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
font-style: italic;
|
||||
font-variation-settings: "wght" var(--font-weight-semi-bold);
|
||||
margin: 2rem 0 2rem 2.5rem;
|
||||
}
|
||||
|
||||
blockquote footer {
|
||||
font-style: normal;
|
||||
font-variation-settings: "wght" var(--font-weight-text);
|
||||
margin-top: var(--margin-text);
|
||||
}
|
||||
|
||||
figcaption {
|
||||
margin-top: var(--margin-text);
|
||||
font-size: var(--font-size-caption);
|
||||
}
|
||||
|
||||
.callout {
|
||||
font-size: var(--font-size-introduction);
|
||||
display: inline;
|
||||
}
|
||||
|
||||
p.callout {
|
||||
margin: var(--margin-heading) 0;
|
||||
width: 100%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
p.callout:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
/* note */
|
||||
|
||||
.note button::after {
|
||||
content: "\00A0+";
|
||||
display: inline-block;
|
||||
}
|
||||
.note.open button::after {
|
||||
content: "–";
|
||||
transform: rotate(90deg);
|
||||
margin-left: calc(var(--margin-text) / 1.25);
|
||||
}
|
||||
|
||||
.details::after {
|
||||
content: "–";
|
||||
margin-left: calc(var(--margin-text) / 1.25);
|
||||
}
|
||||
|
||||
.details {
|
||||
text-decoration: none !important;
|
||||
opacity: 70%;
|
||||
}
|
||||
|
||||
/* generic */
|
||||
.hide {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.unvisible {
|
||||
color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
|
||||
/* cursor */
|
||||
#cursor {
|
||||
display: none;
|
||||
position: absolute;
|
||||
z-index: 999;
|
||||
pointer-events: none;
|
||||
background-color: var(--color-grey-dark);
|
||||
}
|
||||
|
||||
#cursor span {
|
||||
height: var(--font-size-introduction);
|
||||
}
|
||||
|
||||
#cursor #target {
|
||||
width: var(--font-size-introduction);
|
||||
}
|
||||
|
||||
#cursor #text {
|
||||
display: none;
|
||||
background-color: var(--color-grey-light);
|
||||
color: var(--color-grey-dark);
|
||||
font-size: var(--font-size-caption);
|
||||
align-items: center;
|
||||
padding: 0 0.5rem;
|
||||
}
|
||||
|
||||
#cursor.light {
|
||||
background-color: var(--color-grey-light);
|
||||
}
|
||||
#cursor.light #text {
|
||||
background-color: var(--color-grey-dark);
|
||||
color: var(--color-grey-light);
|
||||
}
|
||||
|
||||
/* layout */
|
||||
.empty {
|
||||
display: none;
|
||||
}
|
||||
#introduction {
|
||||
position: fixed;
|
||||
z-index: 999;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background-color: var(--color-grey-dark);
|
||||
padding: var(--padding-body);
|
||||
}
|
||||
|
||||
/* logo */
|
||||
|
||||
.mobile,
|
||||
.tablet {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#introduction h1 {
|
||||
font-size: var(--font-size-logo);
|
||||
color: var(--color-grey-light);
|
||||
hyphens: none;
|
||||
}
|
||||
|
||||
#introduction p {
|
||||
font-size: var(--font-size-introduction) !important;
|
||||
}
|
||||
|
||||
.home p {
|
||||
font-family: var(--font-family-duo);
|
||||
font-size: var(--font-size-introduction);
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
#first-level {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#logo {
|
||||
color: var(--color-grey-light);
|
||||
margin-top: 0;
|
||||
margin-bottom: 6rem;
|
||||
}
|
||||
|
||||
.layer {
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
padding: var(--padding-body);
|
||||
background-color: var(--color-grey-dark);
|
||||
color: var(--color-grey-light);
|
||||
transition: left 0.5s ease-in-out, top 0.5s ease-in-out,
|
||||
color 0.5s ease-in-out;
|
||||
|
||||
height: 100vh;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
#second-level {
|
||||
background-color: var(--color-grey-light);
|
||||
color: var(--color-grey-dark);
|
||||
margin-left: var(--padding-body);
|
||||
width: calc(100vw - var(--padding-body));
|
||||
}
|
||||
#third-level {
|
||||
background-color: var(--color-grey-normal);
|
||||
color: var(--color-grey-dark);
|
||||
margin-left: calc(2 * var(--padding-body));
|
||||
width: calc(100vw - 2 * (var(--padding-body)));
|
||||
}
|
||||
|
||||
.out-screen {
|
||||
left: 100%;
|
||||
}
|
||||
|
||||
.layer-btn {
|
||||
background-image: none;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: var(--padding-body);
|
||||
height: 100%;
|
||||
transition: color 0.2s ease-in-out;
|
||||
color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
.layer-btn::after {
|
||||
content: "" !important;
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
margin: 2rem 0;
|
||||
display: block;
|
||||
width: calc(100vw - 2 * var(--padding-body));
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
table thead,
|
||||
table tr:not(:last-child) {
|
||||
background-repeat: repeat-x;
|
||||
background-image: var(--linear-gradient-dotted);
|
||||
background-position: bottom;
|
||||
background-size: var(--linear-gradient-background-size);
|
||||
}
|
||||
|
||||
table th,
|
||||
table td {
|
||||
padding: 1rem 3rem 1rem 0;
|
||||
}
|
||||
|
||||
table tr th:last-child,
|
||||
table tr td:last-child {
|
||||
padding-right: 29rem;
|
||||
}
|
||||
|
||||
.row {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(12, 1fr);
|
||||
gap: 5vw;
|
||||
margin-bottom: var(--margin-heading);
|
||||
}
|
||||
|
||||
.row .column {
|
||||
grid-column: span var(--span);
|
||||
}
|
||||
|
||||
/* Collapsable section */
|
||||
.collapsable__content {
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
section.collapsable.open .collapsable__content {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
section.collapsable button h4::after {
|
||||
content: "▾";
|
||||
/* content: "↓"; */
|
||||
display: inline-block;
|
||||
margin-left: 2rem;
|
||||
}
|
||||
|
||||
section.collapsable.open button h4::after {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
/* TABLETTE */
|
||||
@media screen and (max-width: 820px) {
|
||||
p {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* TABLET */
|
||||
@media screen and (max-width: 1270px) {
|
||||
.tablet {
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
|
||||
/* MOBILE */
|
||||
@media screen and (max-width: 640px) {
|
||||
:root {
|
||||
--padding-body: 10vw; /* 32px / 320px */
|
||||
--layer-button-height: 3rem;
|
||||
/* font size */
|
||||
--font-size-scale: 1.2;
|
||||
--font-size-demi-scale: 1;
|
||||
--font-size-logo: calc(
|
||||
calc(var(--font-size-h1) * var(--font-size-scale)) * 1.44
|
||||
); /* 69px */
|
||||
}
|
||||
|
||||
/* html */
|
||||
|
||||
.mobile {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
hr {
|
||||
margin: 1.5rem 0;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
table th,
|
||||
table td {
|
||||
font-family: var(--font-family-duo);
|
||||
}
|
||||
|
||||
table tr th:last-child,
|
||||
table tr td:last-child {
|
||||
padding-right: inherit;
|
||||
}
|
||||
|
||||
.empty {
|
||||
display: block;
|
||||
height: var(--layer-button-height);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* layout */
|
||||
|
||||
#logo {
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
|
||||
.layer {
|
||||
background-color: transparent;
|
||||
margin-left: 0 !important;
|
||||
width: 100% !important;
|
||||
height: 100vh;
|
||||
overflow-y: auto;
|
||||
padding: 0;
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
.layer:not(.current) {
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
}
|
||||
.layer:not(.current) .content-background {
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.content-background > * {
|
||||
opacity: 1;
|
||||
transition: opacity 0.5s ease-in-out;
|
||||
}
|
||||
|
||||
.layer:not(.current) .content-background > * {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.layer .content-background {
|
||||
position: relative;
|
||||
pointer-events: all;
|
||||
padding: 0 var(--padding-body) 3rem var(--padding-body);
|
||||
z-index: 2;
|
||||
padding-bottom: 8rem;
|
||||
}
|
||||
|
||||
#first-level .layer-btn {
|
||||
background-color: var(--color-grey-dark);
|
||||
color: var(--color-grey-light-rgba);
|
||||
}
|
||||
#first-level .layer-btn.unvisible {
|
||||
color: var(--color-grey-light-rgba-unvisible);
|
||||
}
|
||||
#second-level {
|
||||
background-color: transparent;
|
||||
}
|
||||
#second-level .layer-btn {
|
||||
background-color: var(--color-grey-light);
|
||||
color: var(--color-grey-dark-rgba);
|
||||
}
|
||||
#second-level .layer-btn.unvisible {
|
||||
color: var(--color-grey-dark-rgba-unvisible);
|
||||
}
|
||||
#second-level .content-background {
|
||||
background-color: var(--color-grey-light);
|
||||
min-height: calc(100vh - var(--layer-button-height));
|
||||
}
|
||||
#second-level .layer-btn {
|
||||
background-color: var(--color-grey-light);
|
||||
}
|
||||
#third-level .content-background {
|
||||
background-color: var(--color-grey-normal);
|
||||
min-height: calc(100vh - 2 * var(--layer-button-height));
|
||||
}
|
||||
|
||||
.column {
|
||||
margin-bottom: calc(var(--margin-text) * 2);
|
||||
}
|
||||
|
||||
.out-screen {
|
||||
top: 100vh;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.layer-btn {
|
||||
position: sticky;
|
||||
display: block;
|
||||
top: 0;
|
||||
background-color: inherit;
|
||||
width: calc(100% - 2 * var(--padding-body));
|
||||
height: calc(var(--layer-button-height) - 2 * 0.7rem);
|
||||
font-size: var(--font-size-text);
|
||||
text-decoration: none;
|
||||
padding: 0.7rem var(--padding-body);
|
||||
z-index: 2;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
p.callout {
|
||||
margin: 2.16rem 0;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
margin: 1.5rem 0 1.5rem 2rem;
|
||||
}
|
||||
|
||||
.note {
|
||||
display: inline;
|
||||
}
|
||||
.note button {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.row {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
BIN
assets/favicon/favicon.png
Normal file
BIN
assets/favicon/favicon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 880 B |
4
assets/favicon/favicon.svg
Normal file
4
assets/favicon/favicon.svg
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
<svg width="260" height="260" viewBox="0 0 260 260" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="260" height="260" fill="#323131"/>
|
||||
<rect x="97.5" y="97.5" width="65" height="65" fill="#E8E8E8"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 218 B |
BIN
assets/fonts/iAWriterDuoV-Italic.woff2
Normal file
BIN
assets/fonts/iAWriterDuoV-Italic.woff2
Normal file
Binary file not shown.
BIN
assets/fonts/iAWriterDuoV.woff2
Normal file
BIN
assets/fonts/iAWriterDuoV.woff2
Normal file
Binary file not shown.
BIN
assets/fonts/iAWriterQuattroV-Italic.woff2
Normal file
BIN
assets/fonts/iAWriterQuattroV-Italic.woff2
Normal file
Binary file not shown.
BIN
assets/fonts/iAWriterQuattroV.woff2
Normal file
BIN
assets/fonts/iAWriterQuattroV.woff2
Normal file
Binary file not shown.
363
assets/js/script.js
Normal file
363
assets/js/script.js
Normal file
|
|
@ -0,0 +1,363 @@
|
|||
document.addEventListener("DOMContentLoaded", () => {
|
||||
// init
|
||||
const introduction = document.querySelector("#introduction");
|
||||
if (introduction) playIntroduction();
|
||||
|
||||
initNav();
|
||||
initNotes();
|
||||
styleCallouts();
|
||||
linkLayersScrolls();
|
||||
|
||||
let currentUrl = location.href;
|
||||
|
||||
window.onpopstate = function () {
|
||||
let target = null;
|
||||
const currentLayerId = document.querySelector(".current").id;
|
||||
|
||||
if (currentLayerId === "first-level") {
|
||||
window.location.href = window.location.href;
|
||||
} else if (currentLayerId === "second-level") {
|
||||
history.pushState(null, document.title, currentUrl);
|
||||
target = document.querySelector("#first-level .layer-btn");
|
||||
const event = {
|
||||
preventDefault: () => {},
|
||||
stopPropagation: () => {},
|
||||
target: target,
|
||||
};
|
||||
go(event);
|
||||
} else if (currentLayerId === "third-level") {
|
||||
history.pushState(null, document.title, currentUrl);
|
||||
target = document.querySelector("#second-level .layer-btn");
|
||||
const event = {
|
||||
preventDefault: () => {},
|
||||
stopPropagation: () => {},
|
||||
target: target,
|
||||
};
|
||||
go(event);
|
||||
}
|
||||
};
|
||||
|
||||
const collapsableSectionBtns = document.querySelectorAll(
|
||||
".collapsable__button"
|
||||
);
|
||||
collapsableSectionBtns.forEach((btn) => {
|
||||
btn.addEventListener("click", () => {
|
||||
const section = btn.parentNode;
|
||||
section.classList.toggle("open");
|
||||
});
|
||||
});
|
||||
|
||||
animateCursor();
|
||||
|
||||
// functions
|
||||
let ticking = false;
|
||||
|
||||
function linkLayersScrolls() {
|
||||
const thirdLayer = document.querySelector("#third-level");
|
||||
let secondLayer = document.querySelector("#second-level");
|
||||
thirdLayer.addEventListener("scroll", () => {
|
||||
if (!ticking) {
|
||||
window.requestAnimationFrame(() => {
|
||||
scrollLayer(secondLayer, thirdLayer.scrollTop);
|
||||
ticking = false;
|
||||
});
|
||||
ticking = true;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function scrollLayer(secondLayer, scrollTop) {
|
||||
if (window.innerWidth > 650) return;
|
||||
const parallaxFactor = 0.5;
|
||||
if (secondLayer.scrollTop <= 40) {
|
||||
let newScrollTop = scrollTop * parallaxFactor;
|
||||
newScrollTop = newScrollTop > 40 ? 40 : newScrollTop;
|
||||
secondLayer.scrollTop = newScrollTop;
|
||||
}
|
||||
}
|
||||
|
||||
function playIntroduction() {
|
||||
const parts = introduction.querySelectorAll("span");
|
||||
const step = 800;
|
||||
parts.forEach((part, index) => {
|
||||
setTimeout(() => {
|
||||
part.classList.remove("hide");
|
||||
}, step + step * index);
|
||||
});
|
||||
setTimeout(() => {
|
||||
introduction.classList.add("hide");
|
||||
}, parts.length + 5 * step);
|
||||
}
|
||||
|
||||
function formatSize(size) {
|
||||
if (size < 1_000) {
|
||||
return {
|
||||
size: size,
|
||||
unit: " o",
|
||||
};
|
||||
} else if (size < 1_000_000) {
|
||||
return {
|
||||
size: size / 1_000,
|
||||
unit: " Ko",
|
||||
};
|
||||
} else if (size < 1_000_000_000) {
|
||||
return {
|
||||
size: size / 1_000_000,
|
||||
unit: " Mo",
|
||||
};
|
||||
} else {
|
||||
return {
|
||||
size: size / 1_000_000_000,
|
||||
unit: " Go",
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
function initNotes() {
|
||||
const notes = document.querySelectorAll(".note");
|
||||
notes.forEach((note) => {
|
||||
note.addEventListener("click", () => {
|
||||
note.classList.toggle("open");
|
||||
note.querySelector(".details").classList.toggle("hide");
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function animateCursor() {
|
||||
const cursor = document.getElementById("cursor");
|
||||
|
||||
let animationFrameId;
|
||||
|
||||
document.addEventListener("mousemove", (e) => {
|
||||
if (window.innerWidth < 640) return;
|
||||
const hoveredLayer = e.target.closest(".layer");
|
||||
if (hoveredLayer.id === "first-level") {
|
||||
cursor.classList.add("light");
|
||||
} else if (!e.target.closest(".collapsable__button")) {
|
||||
cursor.classList.remove("light");
|
||||
}
|
||||
isCursorVisible = true;
|
||||
cursor.style.display = "flex";
|
||||
document.body.style.cursor = "none";
|
||||
|
||||
const x = e.clientX - 16;
|
||||
const y = e.clientY - 16 + window.scrollY;
|
||||
|
||||
cancelAnimationFrame(animationFrameId);
|
||||
|
||||
animationFrameId = requestAnimationFrame(() => {
|
||||
cursor.style.left = x + "px";
|
||||
cursor.style.top = y + "px";
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function initNav() {
|
||||
listenLinks();
|
||||
showTargetPageSize();
|
||||
listenCollapsableSections();
|
||||
}
|
||||
|
||||
function listenLinks() {
|
||||
const internalLinks = document.querySelectorAll("a.internal-link");
|
||||
internalLinks.forEach((btn) => {
|
||||
btn.addEventListener("click", go);
|
||||
});
|
||||
|
||||
const imageLinks = document.querySelectorAll("figure a");
|
||||
|
||||
imageLinks.forEach((link) => {
|
||||
const cursorText = document.querySelector("#cursor #text");
|
||||
link.addEventListener("mouseenter", () => {
|
||||
const href = new URL(link.href);
|
||||
cursorText.style.display = "flex";
|
||||
cursorText.textContent = "ouvrir " + href.host;
|
||||
});
|
||||
link.addEventListener("mouseleave", () => {
|
||||
cursorText.style.display = "";
|
||||
cursorText.textContent = "";
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function removeListeners() {
|
||||
const internalLinks = document.querySelectorAll("a.internal-link");
|
||||
internalLinks.forEach((btn) => {
|
||||
btn.removeEventListener("click", go);
|
||||
});
|
||||
}
|
||||
|
||||
function removeTargetPageListeners() {
|
||||
const internalLinks = document.querySelectorAll("a.internal-link");
|
||||
internalLinks.forEach((link) => {
|
||||
link.removeEventListener("mouseenter", handleMouseEnter);
|
||||
link.removeEventListener("mouseleave", handleMouseLeave);
|
||||
});
|
||||
}
|
||||
|
||||
function handleMouseEnter() {
|
||||
const cursorText = document.querySelector("#cursor #text");
|
||||
if (this.href === window.location.href) return;
|
||||
cursorText.style.display = "flex";
|
||||
cursorText.textContent = this.dataset.size;
|
||||
}
|
||||
|
||||
function handleMouseLeave() {
|
||||
const cursorText = document.querySelector("#cursor #text");
|
||||
cursorText.style.display = "";
|
||||
cursorText.textContent = "";
|
||||
}
|
||||
|
||||
function toggleVisibility(element, condition) {
|
||||
element.classList.remove("unvisible", condition);
|
||||
}
|
||||
|
||||
function moveBackward(wrapper, page) {
|
||||
page.content
|
||||
.querySelector(".current .layer-btn")
|
||||
.classList.remove("unvisible");
|
||||
|
||||
wrapper.innerHTML = page.content.innerHTML;
|
||||
wrapper.classList.add("current");
|
||||
|
||||
setTimeout(() => {
|
||||
wrapper.querySelector(".current .layer-btn").classList.add("unvisible");
|
||||
}, 50);
|
||||
}
|
||||
|
||||
function moveForward(originWrapper, page) {
|
||||
const isThirdLevel = originWrapper.id === "third-level";
|
||||
const targetWrapper = isThirdLevel
|
||||
? document.querySelector("#second-level")
|
||||
: originWrapper.nextElementSibling;
|
||||
|
||||
originWrapper.classList.remove("current");
|
||||
targetWrapper.classList.add("current");
|
||||
|
||||
const emptys = page.content.querySelectorAll(".empty");
|
||||
const current = document.querySelector(".current");
|
||||
|
||||
if (current.id === "second-level" && emptys.length === 3) {
|
||||
const firstEmpty = page.content.querySelector(".empty");
|
||||
firstEmpty.parentNode.removeChild(firstEmpty);
|
||||
}
|
||||
|
||||
targetWrapper.innerHTML = page.content.innerHTML;
|
||||
targetWrapper.classList.remove("out-screen");
|
||||
}
|
||||
|
||||
function go(event) {
|
||||
event.stopPropagation();
|
||||
event.preventDefault();
|
||||
const btn = event.target.closest("a");
|
||||
const wrapper = btn.closest(".layer");
|
||||
const targetUrl = btn.href;
|
||||
|
||||
if (targetUrl === window.location.href) return;
|
||||
|
||||
removeListeners();
|
||||
removeTargetPageListeners();
|
||||
|
||||
fetch(targetUrl)
|
||||
.then((res) => res.text())
|
||||
.then((htmlString) => {
|
||||
const page = getPage(htmlString);
|
||||
history.pushState(null, page.title, targetUrl);
|
||||
|
||||
let timer = 0;
|
||||
|
||||
const currentLevel = document.querySelector(".current");
|
||||
if (currentLevel.scrollTop > 0) {
|
||||
document.querySelector(".current").scrollTo({
|
||||
top: 0,
|
||||
behavior: "smooth",
|
||||
});
|
||||
timer = 500;
|
||||
}
|
||||
|
||||
setTimeout(() => {
|
||||
if (wrapper.classList.contains("current")) {
|
||||
moveForward(wrapper, page);
|
||||
} else {
|
||||
moveBackward(wrapper, page);
|
||||
}
|
||||
|
||||
document.querySelector("title").textContent = `${page.title}`;
|
||||
|
||||
document.querySelectorAll(`.current ~ .layer`).forEach((layer) => {
|
||||
layer.classList.add("out-screen");
|
||||
});
|
||||
|
||||
const layerBtnsToShow = document.querySelectorAll(
|
||||
".layer-btn:not(.current .layer-btn)"
|
||||
);
|
||||
|
||||
layerBtnsToShow.forEach((layerBtn) => {
|
||||
toggleVisibility(layerBtn, window.innerWidth < 640);
|
||||
});
|
||||
|
||||
listenLinks();
|
||||
showTargetPageSize();
|
||||
styleCallouts();
|
||||
initNotes();
|
||||
linkLayersScrolls();
|
||||
currentUrl = window.location.href;
|
||||
}, timer);
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error("Fetch Error:", err);
|
||||
});
|
||||
}
|
||||
|
||||
function showTargetPageSize() {
|
||||
const internalLinks = document.querySelectorAll("a.internal-link");
|
||||
internalLinks.forEach((link) => {
|
||||
link.addEventListener("mouseenter", handleMouseEnter);
|
||||
link.addEventListener("mouseleave", handleMouseLeave);
|
||||
});
|
||||
}
|
||||
|
||||
function listenCollapsableSections() {
|
||||
const collapsableSections = document.querySelectorAll(
|
||||
".collapsable__button"
|
||||
);
|
||||
|
||||
const cursorText = document.querySelector("#cursor #text");
|
||||
collapsableSections.forEach((section) => {
|
||||
section.addEventListener("mouseenter", () => {
|
||||
cursorText.style.display = "flex";
|
||||
cursorText.textContent = "ouvrir/fermer";
|
||||
});
|
||||
section.addEventListener("mouseleave", () => {
|
||||
cursorText.style.display = "";
|
||||
cursorText.textContent = "";
|
||||
});
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
function getPage(htmlString) {
|
||||
const parser = new DOMParser();
|
||||
const fullPage = parser.parseFromString(htmlString, "text/html");
|
||||
const title = fullPage.querySelector("title").textContent;
|
||||
const content = fullPage.querySelector(".layer.current");
|
||||
|
||||
return {
|
||||
title: title,
|
||||
content: content,
|
||||
};
|
||||
}
|
||||
|
||||
function getUrlLastPart(url) {
|
||||
const parts = url.split("/");
|
||||
const lastPart = parts[parts.length - 1];
|
||||
return lastPart;
|
||||
}
|
||||
|
||||
function styleCallouts() {
|
||||
const callouts = document.querySelectorAll(".callout");
|
||||
callouts.forEach((callout) => {
|
||||
if (!callout.closest("p")) return;
|
||||
callout.closest("p").classList.add("callout");
|
||||
});
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue