From 61c1067f22d554c86a7c1a4c0420227c10209a3d Mon Sep 17 00:00:00 2001 From: isUnknown Date: Fri, 26 Jan 2024 11:03:42 +0100 Subject: [PATCH] add footer and style home --- assets/css/src/articles.css | 31 +++ assets/css/src/footer.css | 5 + assets/css/src/generic.css | 66 ++++++ assets/css/src/header.css | 38 ++++ assets/css/src/html.css | 58 +++++ assets/css/src/reset.css | 31 +++ assets/css/src/tabs.css | 27 +++ assets/css/src/texts.css | 52 +++++ assets/css/src/variables.css | 15 ++ assets/css/style.css | 430 +---------------------------------- assets/dist/style.css | 2 +- site/snippets/footer.php | 22 +- site/snippets/header.php | 20 +- site/templates/home.php | 14 +- 14 files changed, 364 insertions(+), 447 deletions(-) create mode 100644 assets/css/src/articles.css create mode 100644 assets/css/src/footer.css create mode 100644 assets/css/src/generic.css create mode 100644 assets/css/src/header.css create mode 100644 assets/css/src/html.css create mode 100644 assets/css/src/reset.css create mode 100644 assets/css/src/tabs.css create mode 100644 assets/css/src/texts.css create mode 100644 assets/css/src/variables.css diff --git a/assets/css/src/articles.css b/assets/css/src/articles.css new file mode 100644 index 0000000..515c50d --- /dev/null +++ b/assets/css/src/articles.css @@ -0,0 +1,31 @@ +#articles { + margin: 0 var(--unit--horizontal); +} +#organize { + margin-bottom: calc(var(--unit--vertical)); +} +.article { + position: relative; + margin-bottom: calc(var(--unit--vertical) * 2); + box-sizing: border-box; +} + +.article__infos, +.article__labels { + transform: translateY(calc(0rem - (var(--unit--vertical) * 0.1))); +} + +.article__infos { + display: flex; +} + +.article__labels { + display: flex; +} + +.article .label { + margin-right: var(--unit--horizontal); + text-decoration: underline; + text-decoration-style: dotted; + text-underline-offset: 6px; +} diff --git a/assets/css/src/footer.css b/assets/css/src/footer.css new file mode 100644 index 0000000..aaec82a --- /dev/null +++ b/assets/css/src/footer.css @@ -0,0 +1,5 @@ +#main-footer { + position: absolute; + left: 0; + bottom: 0; +} diff --git a/assets/css/src/generic.css b/assets/css/src/generic.css new file mode 100644 index 0000000..f4ca74a --- /dev/null +++ b/assets/css/src/generic.css @@ -0,0 +1,66 @@ +.hidden { + display: none; +} + +.grid { + background-size: var(--unit--horizontal) var(--unit--vertical); + background-image: linear-gradient( + to right, + var(--color-secondary--x-light) 1px, + transparent 1px + ), + linear-gradient( + to bottom, + var(--color-secondary--light) 1px, + transparent 1px + ), + linear-gradient( + to bottom, + var(--color-secondary--x-light) 1px, + transparent 1px + ); + background-position: 0 0, 0 0, 0 calc(var(--unit--vertical) / 2); + background-attachment: fixed; +} + +.left:not(.padding) { + margin-left: calc(var(--unit--horizontal) * var(--left)); +} +.padding.left { + padding-left: calc(var(--unit--horizontal) * var(--left)); +} +.top:not(.padding) { + margin-top: calc(var(--unit--vertical) * var(--top)); +} +.padding.top { + padding-top: calc(var(--unit--vertical) * var(--top)); +} +.right:not(.padding) { + margin-right: calc(var(--unit--horizontal) * var(--right)); +} +.padding.right { + padding-right: calc(var(--unit--horizontal) * var(--right)); +} +.bottom:not(.padding) { + margin-bottom: calc(var(--unit--horizontal) * var(--bottom)); +} +.padding.bottom { + padding-bottom: calc(var(--unit--horizontal) * var(--bottom)); +} + +.full-width { + width: 100%; +} + +.width { + width: calc(var(--unit--horizontal) * var(--width)); +} + +.flex { + display: flex; + justify-content: var(--content); + gap: calc(var(--gap) * var(--unit--horizontal)); +} +.flex.column { + flex-direction: column; +} diff --git a/assets/css/src/header.css b/assets/css/src/header.css new file mode 100644 index 0000000..1a4b421 --- /dev/null +++ b/assets/css/src/header.css @@ -0,0 +1,38 @@ +#header { + position: fixed; + z-index: 1; + top: 0; + left: 0; + box-sizing: border-box; + width: 100%; + height: calc(var(--unit--vertical) * 5); + padding: var(--unit--vertical) var(--unit--horizontal); + + transition: height 0.2s ease-in-out; +} +#header.minimized { + height: calc(var(--unit--vertical) * 3); +} +#logo { + position: relative; +} + +#header.open #actuel { + color: var(--color-background); +} +#logo #actuel { + color: var(--color-primary--transparent); + position: relative; + z-index: 1; + margin-left: calc(var(--unit--horizontal) * 2); +} +#logo #inactuel { + position: absolute; + z-index: 0; + color: var(--color-secondary); + bottom: -48%; + transition: bottom 0.2s ease-in-out; +} +#header.minimized #logo #inactuel { + bottom: 0%; +} diff --git a/assets/css/src/html.css b/assets/css/src/html.css new file mode 100644 index 0000000..847671c --- /dev/null +++ b/assets/css/src/html.css @@ -0,0 +1,58 @@ +body { + position: relative; + box-sizing: border-box; + min-height: 100vh; + padding: var(--unit--vertical) var(--unit--horizontal); + background-color: var(--color-background); + color: var(--color-primary); +} + +hr { + height: calc(var(--unit--vertical) / 2); + border: none; + background-color: var(--color-primary); + width: calc(var(--unit--horizontal) * 4); + margin: calc(var(--unit--vertical) * 2) calc(var(--unit--horizontal)); +} + +nav hr { + background-color: var(--color-background); + margin-left: 0; +} + +/* ================= SCROLLBAR ================= */ +body, +html { + scroll-behavior: smooth; +} + +/* Works on Firefox */ + +* { + scrollbar-width: thin; + scrollbar-color: rgba(0, 0, 0, 0.1) transparent; +} + +/* Works on Chrome, Edge, and Safari */ + +*::-webkit-scrollbar { + width: 6px; + height: 6px; +} + +*::-webkit-scrollbar-track { + background: transparent; +} + +*::-webkit-scrollbar-thumb { + background-color: rgba(0, 0, 0, 0.1); + border-radius: 0px; + border: none; +} + +a:not(.no-line) { + text-decoration: dotted; + text-decoration-color: #fff; + text-decoration-line: underline; + text-underline-offset: 0.2rem; +} diff --git a/assets/css/src/reset.css b/assets/css/src/reset.css new file mode 100644 index 0000000..e51b601 --- /dev/null +++ b/assets/css/src/reset.css @@ -0,0 +1,31 @@ +html, +body, +h1, +h2, +h3, +h4, +h5, +p, +ul { + margin: 0; + padding: 0; +} + +button { + background: none; + color: inherit; + border: none; + padding: 0; + font: inherit; + cursor: pointer; + outline: inherit; +} + +a { + text-decoration: none; + color: inherit; +} + +li { + list-style-type: none; +} diff --git a/assets/css/src/tabs.css b/assets/css/src/tabs.css new file mode 100644 index 0000000..9f1292c --- /dev/null +++ b/assets/css/src/tabs.css @@ -0,0 +1,27 @@ +button.toggle.open { + font-weight: bold; +} + +button.toggle.left::after { + margin-left: var(--unit--horizontal); +} +button.toggle.left.close::after { + content: "+"; +} +button.toggle.left.open::after { + content: "-"; +} + +button.toggle.right::before { + margin-right: var(--unit--horizontal); +} +button.toggle.right.close::before { + content: "+"; +} +button.toggle.right.open::before { + content: "-"; +} + +.content { + margin-top: calc(var(--unit--vertical) * 2); +} diff --git a/assets/css/src/texts.css b/assets/css/src/texts.css new file mode 100644 index 0000000..65d339e --- /dev/null +++ b/assets/css/src/texts.css @@ -0,0 +1,52 @@ +@font-face { + font-family: "Switzer-Variable"; + src: url("/assets/fonts/Switzer-Variable.woff2") format("woff2"), + url("/assets/fonts/Switzer-Variable.woff") format("woff"), + url("/assets/fonts/Switzer-Variable.ttf") format("truetype"); + font-weight: 100 900; + font-display: swap; + font-style: normal; +} + +* { + font-family: "Switzer-Variable", sans-serif; +} + +h1 { + font-size: 25vw; + line-height: 4rem; + transform: translate(-2px, -13px); + font-weight: 550; +} + +p, +li, +button, +.fs-m { + transform: translateY(calc(var(--unit--vertical) * 0.12)); + font-size: var(--font-size-m); + line-height: calc(var(--unit--vertical)); +} +p, +li, +button, +.fw-light { + font-weight: var(--font-weight-light); +} + +.ta-center { + text-align: center; +} + +p { + transform: translateY(3px); +} + +button { + display: flex; + align-items: center; +} + +article p { + margin-bottom: var(--unit--vertical); +} diff --git a/assets/css/src/variables.css b/assets/css/src/variables.css new file mode 100644 index 0000000..39e3dbd --- /dev/null +++ b/assets/css/src/variables.css @@ -0,0 +1,15 @@ +:root { + --color-background: #000; + --color-primary: #ffffff; + --color-primary--transparent: rgba(255, 255, 255, 0.86); + --color-secondary: rgb(120, 171, 150, 0.86); + --color-secondary--light: rgb(119, 177, 157, 0.25); + --color-secondary--x-light: rgb(119, 177, 157, 0.15); + + --unit--horizontal: 5vw; + --unit--vertical: 1.3rem; + + --font-size-m: 1.2rem; + + --font-weight-light: 200; +} diff --git a/assets/css/style.css b/assets/css/style.css index 8ac4f78..e3d8ed7 100644 --- a/assets/css/style.css +++ b/assets/css/style.css @@ -1,422 +1,8 @@ -/* ================= FONTFACE ================= */ -@font-face { - font-family: "Switzer-Variable"; - src: url("/assets/fonts/Switzer-Variable.woff2") format("woff2"), - url("/assets/fonts/Switzer-Variable.woff") format("woff"), - url("/assets/fonts/Switzer-Variable.ttf") format("truetype"); - font-weight: 100 900; - font-display: swap; - font-style: normal; -} - -/* ================= RESET ================= */ -body, -html { - scroll-behavior: smooth; -} - -html, -body, -h1, -h2, -h3, -h4, -h5, -p, -ul { - margin: 0; - padding: 0; - font-family: "Switzer-Variable", sans-serif; -} - -button { - background: none; - color: inherit; - border: none; - padding: 0; - font: inherit; - cursor: pointer; - outline: inherit; -} - -a { - text-decoration: none; - color: inherit; -} - -li { - list-style-type: none; -} - -/* ================= SCROLLBAR ================= */ -/* BROWSERS */ - -/* Works on Firefox */ - -* { - scrollbar-width: thin; - scrollbar-color: rgba(0, 0, 0, 0.1) transparent; -} - -/* Works on Chrome, Edge, and Safari */ - -*::-webkit-scrollbar { - width: 6px; - height: 6px; -} - -*::-webkit-scrollbar-track { - background: transparent; -} - -*::-webkit-scrollbar-thumb { - background-color: rgba(0, 0, 0, 0.1); - border-radius: 0px; - border: none; -} - -/* ================= VARIABLES ================= */ -:root { - --color-background: #000; - --color-primary: #ffffff; - --color-primary--transparent: rgba(255, 255, 255, 0.86); - --color-secondary: rgb(120, 171, 150, 0.86); - --color-secondary--light: rgb(119, 177, 157, 0.25); - --color-secondary--x-light: rgb(119, 177, 157, 0.15); - - --unit--horizontal: 5vw; - --unit--vertical: 1.3rem; - - --font-size-m: 1.2rem; -} - -* { - scroll-behavior: smooth; -} - -body { - padding: var(--unit--vertical) var(--unit--horizontal); - background-color: var(--color-background); - color: var(--color-primary); - font-family: sans-serif; -} - -/* ================= GENERIC CLASSES ================= */ -.hidden { - display: none; -} - -.grid { - background-size: var(--unit--horizontal) var(--unit--vertical); - background-image: linear-gradient( - to right, - var(--color-secondary--x-light) 1px, - transparent 1px - ), - linear-gradient( - to bottom, - var(--color-secondary--light) 1px, - transparent 1px - ), - linear-gradient( - to bottom, - var(--color-secondary--x-light) 1px, - transparent 1px - ); - background-position: 0 0, 0 0, 0 calc(var(--unit--vertical) / 2); - background-attachment: fixed; -} - -/* ================= HTML ================= */ -hr { - height: calc(var(--unit--vertical) / 2); - border: none; - background-color: var(--color-primary); - width: calc(var(--unit--horizontal) * 4); - margin: calc(var(--unit--vertical) * 2) calc(var(--unit--horizontal)); -} -hr.center { - width: calc(100% - (var(--unit--horizontal) * 2)); -} - -nav hr { - background-color: var(--color-background); - margin-left: 0; -} - -/* ================= TEXTS ================= */ -h1 { - font-size: 25vw; - line-height: 4rem; - transform: translate(-2px, -13px); - font-weight: 550; -} - -p, -li, -button, -#baseline { - transform: translateY(calc(var(--unit--vertical) * 0.12)); - font-weight: lighter; - font-size: var(--font-size-m); - line-height: calc(var(--unit--vertical)); -} - -p { - transform: translateY(3px); -} - -button { - display: flex; - align-items: center; -} - -article p { - margin-bottom: var(--unit--vertical); -} - -/* ================= HEADER ================= */ -#header { - position: fixed; - z-index: 1; - top: 0; - left: 0; - box-sizing: border-box; - width: 100%; - height: calc(var(--unit--vertical) * 5); - padding: var(--unit--vertical) var(--unit--horizontal); - - transition: height 0.2s ease-in-out; -} -#header.minimized { - height: calc(var(--unit--vertical) * 3); -} -#logo, -#logo-nav { - position: relative; -} - -#logo-nav { - margin-top: var(--unit--vertical); - margin-left: var(--unit--horizontal); -} - -#header.open #actuel { - color: var(--color-background); -} -#logo #actuel, -#logo-nav #actuel-nav { - color: var(--color-primary--transparent); - position: relative; - z-index: 1; - margin-left: calc(var(--unit--horizontal) * 2); -} -#logo #inactuel, -#logo-nav #inactuel-nav { - position: absolute; - z-index: 0; - color: var(--color-secondary); - bottom: -48%; - transition: bottom 0.2s ease-in-out; -} -#header.minimized #logo #inactuel, -#header.minimized #logo-nav #inactuel-nav { - bottom: 0%; -} - -/* NAV */ - -#nav-btn { - z-index: 3; - position: absolute; - top: var(--unit--vertical); - right: var(--unit--horizontal); - width: calc(var(--unit--horizontal) * 2); - height: var(--unit--vertical); - display: flex; - justify-content: center; - /* transform: rotate(-45deg); */ -} - -#nav-btn .line-up, -#nav-btn .line-center, -#nav-btn .line-down { - position: absolute; - height: 2px; - background-color: var(--color-primary); - transition: all 0.3s ease-in-out; -} - -#header.open .line-up, -#header.open .line-center, -#header.open .line-down { - background-color: var(--color-background); -} - -#nav-btn .line-up { - width: var(--unit--horizontal); - transform: translateY(calc(0rem - (var(--unit--vertical) / 3))) rotate(0deg); -} - -#nav-btn .line-center { - height: 4px; - width: calc(var(--unit--horizontal) * 2); -} - -#nav-btn .line-down { - width: var(--unit--horizontal); - transform: translateY(calc(var(--unit--vertical) / 3)) rotate(0deg); -} - -/* NAV OPEN */ -#nav-btn.open .line-up { - transform: translateY(0) rotate(90deg); - width: calc(var(--unit--horizontal) * 2); -} -#nav-btn.open .line-center { - height: 2px; -} -#nav-btn.open .line-down { - transform: translateY(0) rotate(-45deg); - width: calc(var(--unit--vertical) * 2); -} - -/* NAV PANEL */ -nav { - position: fixed; - z-index: 2; - top: 0; - left: 0; - width: 100vw; - height: 0vh; - background-color: var(--color-primary); - color: var(--color-background); - overflow: hidden; - - transition: all 0.5s ease-in-out; -} - -#header.open nav { - height: 100vh; -} - -#spaces { - margin-left: var(--unit--horizontal); -} - -#spaces li { - margin-bottom: var(--unit--vertical); -} - -/* ================= MAIN ================= */ -main, -#spaces { - margin-top: calc(var(--unit--vertical) * 6); -} - -#baseline { - font-weight: 300; - margin-left: calc(var(--unit--horizontal) * 5); - margin-bottom: calc(var(--unit--vertical) * 10); - width: calc(var(--unit--horizontal) * 12); -} - -section.closed { - height: var(--unit--vertical); -} - -h2.right { - display: flex; - justify-content: flex-end; - color: var(--color-secondary); -} - -h2.right::after, -h2.left::before { - display: inline-block; - content: ""; - height: calc(var(--unit--vertical) / 2); - background-color: var(--color-primary); - width: calc(var(--unit--horizontal) * 1); -} - -h2.right::after { - margin-right: calc(0vw - var(--unit--horizontal)); - margin-left: var(--unit--horizontal); - background-color: var(--color-secondary); -} -h2.left::before { - margin-left: calc(0vw - var(--unit--horizontal)); - margin-right: var(--unit--horizontal); -} - -h2.left.open::before { - width: calc(var(--unit--horizontal) * 4); -} - -/* ================= TABS ================= */ -.toggle-btns { - display: flex; - justify-content: space-between; -} - -button.toggle.open { - font-weight: bold; -} - -button.toggle.left::after { - margin-left: var(--unit--horizontal); -} -button.toggle.left.close::after { - content: "+"; -} -button.toggle.left.open::after { - content: "-"; -} - -button.toggle.right::before { - margin-right: var(--unit--horizontal); -} -button.toggle.right.close::before { - content: "+"; -} -button.toggle.right.open::before { - content: "-"; -} - -.content { - margin-top: calc(var(--unit--vertical) * 2); -} - -/* ================= ARTICLES LIST ================= */ -#articles { - margin: 0 var(--unit--horizontal); -} -#organize { - margin-bottom: calc(var(--unit--vertical)); -} -.article { - position: relative; - margin-bottom: calc(var(--unit--vertical) * 2); - box-sizing: border-box; -} - -.article__infos, -.article__labels { - transform: translateY(calc(0rem - (var(--unit--vertical) * 0.1))); -} - -.article__infos { - display: flex; -} - -.article__labels { - display: flex; -} - -.article .label { - margin-right: var(--unit--horizontal); - text-decoration: underline; - text-decoration-style: dotted; - text-underline-offset: 6px; -} +@import url("src/reset.css"); +@import url("src/variables.css"); +@import url("src/html.css"); +@import url("src/generic.css"); +@import url("src/texts.css"); +@import url("src/header.css"); +@import url("src/tabs.css"); +@import url("src/footer.css"); diff --git a/assets/dist/style.css b/assets/dist/style.css index c13e553..e4de152 100644 --- a/assets/dist/style.css +++ b/assets/dist/style.css @@ -1 +1 @@ -@font-face{font-family:Switzer-Variable;src:url(/assets/fonts/Switzer-Variable.woff2) format("woff2"),url(/assets/fonts/Switzer-Variable.woff) format("woff"),url(/assets/fonts/Switzer-Variable.ttf) format("truetype");font-weight:100 900;font-display:swap;font-style:normal}body,html{scroll-behavior:smooth}body,h1,h2,h3,h4,h5,html,p,ul{margin:0;padding:0;font-family:Switzer-Variable,sans-serif}button{background:none;border:none;padding:0;font:inherit;cursor:pointer;outline:inherit}a,button{color:inherit}a{text-decoration:none}li{list-style-type:none}*{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.1) transparent}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background-color:rgba(0,0,0,.1);border-radius:0;border:none}:root{--color-background:#000;--color-primary:#fff;--color-primary--transparent:hsla(0,0%,100%,.86);--color-secondary:rgba(120,171,150,.86);--color-secondary--light:rgba(119,177,157,.25);--color-secondary--x-light:rgba(119,177,157,.15);--unit--horizontal:5vw;--unit--vertical:1.3rem;--font-size-m:1.2rem}*{scroll-behavior:smooth}body{padding:var(--unit--vertical) var(--unit--horizontal);background-color:var(--color-background);color:var(--color-primary);font-family:sans-serif}.hidden{display:none}.grid{background-size:var(--unit--horizontal) var(--unit--vertical);background-image:linear-gradient(90deg,var(--color-secondary--x-light) 1px,transparent 0),linear-gradient(180deg,var(--color-secondary--light) 1px,transparent 0),linear-gradient(180deg,var(--color-secondary--x-light) 1px,transparent 0);background-position:0 0,0 0,0 calc(var(--unit--vertical) / 2);background-attachment:fixed}hr{height:calc(var(--unit--vertical) / 2);border:none;background-color:var(--color-primary);width:calc(var(--unit--horizontal) * 4);margin:calc(var(--unit--vertical) * 2) calc(var(--unit--horizontal))}hr.center{width:calc(100% - (var(--unit--horizontal) * 2))}nav hr{background-color:var(--color-background);margin-left:0}h1{font-size:25vw;line-height:4rem;transform:translate(-2px,-13px);font-weight:550}#baseline,button,li,p{transform:translateY(calc(var(--unit--vertical) * .12));font-weight:lighter;font-size:var(--font-size-m);line-height:calc(var(--unit--vertical))}p{transform:translateY(3px)}button{display:flex;align-items:center}article p{margin-bottom:var(--unit--vertical)}#header{position:fixed;z-index:1;top:0;left:0;box-sizing:border-box;width:100%;height:calc(var(--unit--vertical) * 5);padding:var(--unit--vertical) var(--unit--horizontal);transition:height .2s ease-in-out}#header.minimized{height:calc(var(--unit--vertical) * 3)}#logo,#logo-nav{position:relative}#logo-nav{margin-top:var(--unit--vertical);margin-left:var(--unit--horizontal)}#header.open #actuel{color:var(--color-background)}#logo #actuel,#logo-nav #actuel-nav{color:var(--color-primary--transparent);position:relative;z-index:1;margin-left:calc(var(--unit--horizontal) * 2)}#logo #inactuel,#logo-nav #inactuel-nav{position:absolute;z-index:0;color:var(--color-secondary);bottom:-48%;transition:bottom .2s ease-in-out}#header.minimized #logo #inactuel,#header.minimized #logo-nav #inactuel-nav{bottom:0}#nav-btn{z-index:3;position:absolute;top:var(--unit--vertical);right:var(--unit--horizontal);width:calc(var(--unit--horizontal) * 2);height:var(--unit--vertical);display:flex;justify-content:center}#nav-btn .line-center,#nav-btn .line-down,#nav-btn .line-up{position:absolute;height:2px;background-color:var(--color-primary);transition:all .3s ease-in-out}#header.open .line-center,#header.open .line-down,#header.open .line-up{background-color:var(--color-background)}#nav-btn .line-up{width:var(--unit--horizontal);transform:translateY(calc(0rem - (var(--unit--vertical) / 3))) rotate(0deg)}#nav-btn .line-center{height:4px;width:calc(var(--unit--horizontal) * 2)}#nav-btn .line-down{width:var(--unit--horizontal);transform:translateY(calc(var(--unit--vertical) / 3)) rotate(0deg)}#nav-btn.open .line-up{transform:translateY(0) rotate(90deg);width:calc(var(--unit--horizontal) * 2)}#nav-btn.open .line-center{height:2px}#nav-btn.open .line-down{transform:translateY(0) rotate(-45deg);width:calc(var(--unit--vertical) * 2)}nav{position:fixed;z-index:2;top:0;left:0;width:100vw;height:0;background-color:var(--color-primary);color:var(--color-background);overflow:hidden;transition:all .5s ease-in-out}#header.open nav{height:100vh}#spaces{margin-left:var(--unit--horizontal)}#spaces li{margin-bottom:var(--unit--vertical)}#spaces,main{margin-top:calc(var(--unit--vertical) * 6)}#baseline{font-weight:300;margin-left:calc(var(--unit--horizontal) * 5);margin-bottom:calc(var(--unit--vertical) * 10);width:calc(var(--unit--horizontal) * 12)}section.closed{height:var(--unit--vertical)}h2.right{display:flex;justify-content:flex-end;color:var(--color-secondary)}h2.left:before,h2.right:after{display:inline-block;content:"";height:calc(var(--unit--vertical) / 2);background-color:var(--color-primary);width:calc(var(--unit--horizontal) * 1)}h2.right:after{margin-right:calc(0vw - var(--unit--horizontal));margin-left:var(--unit--horizontal);background-color:var(--color-secondary)}h2.left:before{margin-left:calc(0vw - var(--unit--horizontal));margin-right:var(--unit--horizontal)}h2.left.open:before{width:calc(var(--unit--horizontal) * 4)}.toggle-btns{display:flex;justify-content:space-between}button.toggle.open{font-weight:700}button.toggle.left:after{margin-left:var(--unit--horizontal)}button.toggle.left.close:after{content:"+"}button.toggle.left.open:after{content:"-"}button.toggle.right:before{margin-right:var(--unit--horizontal)}button.toggle.right.close:before{content:"+"}button.toggle.right.open:before{content:"-"}.content{margin-top:calc(var(--unit--vertical) * 2)}#articles{margin:0 var(--unit--horizontal)}#organize{margin-bottom:calc(var(--unit--vertical))}.article{position:relative;margin-bottom:calc(var(--unit--vertical) * 2);box-sizing:border-box}.article__infos,.article__labels{transform:translateY(calc(0rem - (var(--unit--vertical) * .1)))}.article__infos,.article__labels{display:flex}.article .label{margin-right:var(--unit--horizontal);text-decoration:underline;text-decoration-style:dotted;text-underline-offset:6px} \ No newline at end of file +@font-face{font-family:Switzer-Variable;src:url(/assets/fonts/Switzer-Variable.woff2) format("woff2"),url(/assets/fonts/Switzer-Variable.woff) format("woff"),url(/assets/fonts/Switzer-Variable.ttf) format("truetype");font-weight:100 900;font-display:swap;font-style:normal}body,h1,h2,h3,h4,h5,html,p,ul{margin:0;padding:0}button{background:none;border:none;padding:0;font:inherit;cursor:pointer;outline:inherit}a,button{color:inherit}a{text-decoration:none}li{list-style-type:none}body,html{scroll-behavior:smooth}*{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.1) transparent}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background-color:rgba(0,0,0,.1);border-radius:0;border:none}:root{--color-background:#000;--color-primary:#fff;--color-primary--transparent:hsla(0,0%,100%,.86);--color-secondary:rgba(120,171,150,.86);--color-secondary--light:rgba(119,177,157,.25);--color-secondary--x-light:rgba(119,177,157,.15);--unit--horizontal:5vw;--unit--vertical:1.3rem;--font-size-m:1.2rem}*{font-family:Switzer-Variable,sans-serif}.hidden{display:none}.grid{background-size:var(--unit--horizontal) var(--unit--vertical);background-image:linear-gradient(90deg,var(--color-secondary--x-light) 1px,transparent 0),linear-gradient(180deg,var(--color-secondary--light) 1px,transparent 0),linear-gradient(180deg,var(--color-secondary--x-light) 1px,transparent 0);background-position:0 0,0 0,0 calc(var(--unit--vertical) / 2);background-attachment:fixed}hr{height:calc(var(--unit--vertical) / 2);border:none;background-color:var(--color-primary);width:calc(var(--unit--horizontal) * 4);margin:calc(var(--unit--vertical) * 2) calc(var(--unit--horizontal))}hr.center{width:calc(100% - (var(--unit--horizontal) * 2))}nav hr{background-color:var(--color-background);margin-left:0}h1{font-size:25vw;line-height:4rem;transform:translate(-2px,-13px);font-weight:550}#baseline,button,li,p{transform:translateY(calc(var(--unit--vertical) * .12));font-weight:lighter;font-size:var(--font-size-m);line-height:calc(var(--unit--vertical))}p{transform:translateY(3px)}button{display:flex;align-items:center}article p{margin-bottom:var(--unit--vertical)}#header{position:fixed;z-index:1;top:0;left:0;box-sizing:border-box;width:100%;height:calc(var(--unit--vertical) * 5);padding:var(--unit--vertical) var(--unit--horizontal);transition:height .2s ease-in-out}#header.minimized{height:calc(var(--unit--vertical) * 3)}#logo,#logo-nav{position:relative}#logo-nav{margin-top:var(--unit--vertical);margin-left:var(--unit--horizontal)}#header.open #actuel{color:var(--color-background)}#logo #actuel,#logo-nav #actuel-nav{color:var(--color-primary--transparent);position:relative;z-index:1;margin-left:calc(var(--unit--horizontal) * 2)}#logo #inactuel,#logo-nav #inactuel-nav{position:absolute;z-index:0;color:var(--color-secondary);bottom:-48%;transition:bottom .2s ease-in-out}#header.minimized #logo #inactuel,#header.minimized #logo-nav #inactuel-nav{bottom:0}#nav-btn{z-index:3;position:absolute;top:var(--unit--vertical);right:var(--unit--horizontal);width:calc(var(--unit--horizontal) * 2);height:var(--unit--vertical);display:flex;justify-content:center}#nav-btn .line-center,#nav-btn .line-down,#nav-btn .line-up{position:absolute;height:2px;background-color:var(--color-primary);transition:all .3s ease-in-out}#header.open .line-center,#header.open .line-down,#header.open .line-up{background-color:var(--color-background)}#nav-btn .line-up{width:var(--unit--horizontal);transform:translateY(calc(0rem - (var(--unit--vertical) / 3))) rotate(0deg)}#nav-btn .line-center{height:4px;width:calc(var(--unit--horizontal) * 2)}#nav-btn .line-down{width:var(--unit--horizontal);transform:translateY(calc(var(--unit--vertical) / 3)) rotate(0deg)}#nav-btn.open .line-up{transform:translateY(0) rotate(90deg);width:calc(var(--unit--horizontal) * 2)}#nav-btn.open .line-center{height:2px}#nav-btn.open .line-down{transform:translateY(0) rotate(-45deg);width:calc(var(--unit--vertical) * 2)}nav{position:fixed;z-index:2;top:0;left:0;width:100vw;height:0;background-color:var(--color-primary);color:var(--color-background);overflow:hidden;transition:all .5s ease-in-out}#header.open nav{height:100vh}#spaces{margin-left:var(--unit--horizontal)}#spaces li{margin-bottom:var(--unit--vertical)}#spaces,main{margin-top:calc(var(--unit--vertical) * 6)}#baseline{font-weight:300;margin-left:calc(var(--unit--horizontal) * 5);margin-bottom:calc(var(--unit--vertical) * 10);width:calc(var(--unit--horizontal) * 12)}section.closed{height:var(--unit--vertical)}h2.right{display:flex;justify-content:flex-end;color:var(--color-secondary)}h2.left:before,h2.right:after{display:inline-block;content:"";height:calc(var(--unit--vertical) / 2);background-color:var(--color-primary);width:calc(var(--unit--horizontal) * 1)}h2.right:after{margin-right:calc(0vw - var(--unit--horizontal));margin-left:var(--unit--horizontal);background-color:var(--color-secondary)}h2.left:before{margin-left:calc(0vw - var(--unit--horizontal));margin-right:var(--unit--horizontal)}h2.left.open:before{width:calc(var(--unit--horizontal) * 4)}.toggle-btns{display:flex;justify-content:space-between}button.toggle.open{font-weight:700}button.toggle.left:after{margin-left:var(--unit--horizontal)}button.toggle.left.close:after{content:"+"}button.toggle.left.open:after{content:"-"}button.toggle.right:before{margin-right:var(--unit--horizontal)}button.toggle.right.close:before{content:"+"}button.toggle.right.open:before{content:"-"}.content{margin-top:calc(var(--unit--vertical) * 2)}#articles{margin:0 var(--unit--horizontal)}#organize{margin-bottom:calc(var(--unit--vertical))}.article{position:relative;margin-bottom:calc(var(--unit--vertical) * 2);box-sizing:border-box}.article__infos,.article__labels{transform:translateY(calc(0rem - (var(--unit--vertical) * .1)))}.article__infos,.article__labels{display:flex}.article .label{margin-right:var(--unit--horizontal);text-decoration:underline;text-decoration-style:dotted;text-underline-offset:6px} \ No newline at end of file diff --git a/site/snippets/footer.php b/site/snippets/footer.php index d38604d..72eeda2 100644 --- a/site/snippets/footer.php +++ b/site/snippets/footer.php @@ -1,6 +1,22 @@ -