diff --git a/.gitignore b/.gitignore index 32dd5b1..b180bd0 100644 --- a/.gitignore +++ b/.gitignore @@ -1,3 +1,5 @@ +.git + # System files # ------------ diff --git a/assets/dist/style.css b/assets/dist/style.css index e4de152..fef8efe 100644 --- a/assets/dist/style.css +++ b/assets/dist/style.css @@ -1 +1,329 @@ -@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 +@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, 0.1) transparent; +} +::-webkit-scrollbar { + width: 6px; + height: 6px; +} +::-webkit-scrollbar-track { + background: transparent; +} +::-webkit-scrollbar-thumb { + background-color: rgba(0, 0, 0, 0.1); + border-radius: 0; + border: none; +} +:root { + --color-background: #000; + --color-primary: #fff; + --color-primary--transparent: hsla(0, 0%, 100%, 0.86); + --color-secondary: rgba(120, 171, 150, 0.86); + --color-secondary--light: rgba(119, 177, 157, 0.25); + --color-secondary--x-light: rgba(119, 177, 157, 0.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) * 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 { + 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-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 0.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 0.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); +} +#texts { + 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, +.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/composer.json b/composer.json index 6f794bb..5ffded1 100644 --- a/composer.json +++ b/composer.json @@ -24,7 +24,7 @@ "require": { "php": "~8.1.0 || ~8.2.0 || ~8.3.0", "getkirby/cms": "^4.0", - "adrienpayet/front-comments": "^0.8.2" + "adrienpayet/front-comments": "^0.8.9" }, "config": { "allow-plugins": { diff --git a/composer.lock b/composer.lock index 92984c0..e95bb77 100644 --- a/composer.lock +++ b/composer.lock @@ -4,15 +4,15 @@ "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies", "This file is @generated automatically" ], - "content-hash": "9740251b02e150964c114e2f27c45d5b", + "content-hash": "4439e672d6e47d4b53afb46c041a4fd6", "packages": [ { "name": "adrienpayet/front-comments", - "version": "0.8.2", + "version": "0.8.9", "source": { "type": "git", "url": "https://framagit.org/isUnknown/kirby-front-comments", - "reference": "d1a5d28580d8705f80460197fbd0be77039a5e47" + "reference": "cc9b03f63b02c0b461fbdbf419c224a96288abb1" }, "require": { "getkirby/composer-installer": "^1.1" @@ -33,7 +33,7 @@ ], "description": "Kirby plugin for adding comments anywhere in front-end pages.", "homepage": "https://framagit.org/isUnknown/kirby-front-comments", - "time": "2024-03-08T10:29:48+00:00" + "time": "2024-03-09T14:04:18+00:00" }, { "name": "christian-riesen/base32", @@ -301,16 +301,16 @@ }, { "name": "getkirby/cms", - "version": "4.0.3", + "version": "4.1.2", "source": { "type": "git", "url": "https://github.com/getkirby/kirby.git", - "reference": "a537a4d95c8db03ecaf3ebfd5c6a7747357fde7c" + "reference": "6b7ac66c55ecac20d6b580ef01a667d1806d5c72" }, "dist": { "type": "zip", - "url": "https://api.github.com/repos/getkirby/kirby/zipball/a537a4d95c8db03ecaf3ebfd5c6a7747357fde7c", - "reference": "a537a4d95c8db03ecaf3ebfd5c6a7747357fde7c", + "url": "https://api.github.com/repos/getkirby/kirby/zipball/6b7ac66c55ecac20d6b580ef01a667d1806d5c72", + "reference": "6b7ac66c55ecac20d6b580ef01a667d1806d5c72", "shasum": "" }, "require": { @@ -400,7 +400,7 @@ "type": "custom" } ], - "time": "2024-01-10T10:28:21+00:00" + "time": "2024-03-06T11:38:42+00:00" }, { "name": "getkirby/composer-installer", @@ -826,16 +826,16 @@ }, { "name": "symfony/polyfill-ctype", - "version": "v1.28.0", + "version": "v1.29.0", "source": { "type": "git", "url": "https://github.com/symfony/polyfill-ctype.git", - "reference": "ea208ce43cbb04af6867b4fdddb1bdbf84cc28cb" + "reference": "ef4d7e442ca910c4764bce785146269b30cb5fc4" }, "dist": { "type": "zip", - "url": "https://api.github.com/repos/symfony/polyfill-ctype/zipball/ea208ce43cbb04af6867b4fdddb1bdbf84cc28cb", - "reference": "ea208ce43cbb04af6867b4fdddb1bdbf84cc28cb", + "url": "https://api.github.com/repos/symfony/polyfill-ctype/zipball/ef4d7e442ca910c4764bce785146269b30cb5fc4", + "reference": "ef4d7e442ca910c4764bce785146269b30cb5fc4", "shasum": "" }, "require": { @@ -849,9 +849,6 @@ }, "type": "library", "extra": { - "branch-alias": { - "dev-main": "1.28-dev" - }, "thanks": { "name": "symfony/polyfill", "url": "https://github.com/symfony/polyfill" @@ -888,7 +885,7 @@ "portable" ], "support": { - "source": "https://github.com/symfony/polyfill-ctype/tree/v1.28.0" + "source": "https://github.com/symfony/polyfill-ctype/tree/v1.29.0" }, "funding": [ { @@ -904,7 +901,7 @@ "type": "tidelift" } ], - "time": "2023-01-26T09:26:14+00:00" + "time": "2024-01-29T20:11:03+00:00" }, { "name": "symfony/polyfill-intl-idn", @@ -995,16 +992,16 @@ }, { "name": "symfony/polyfill-intl-normalizer", - "version": "v1.28.0", + "version": "v1.29.0", "source": { "type": "git", "url": "https://github.com/symfony/polyfill-intl-normalizer.git", - "reference": "8c4ad05dd0120b6a53c1ca374dca2ad0a1c4ed92" + "reference": "bc45c394692b948b4d383a08d7753968bed9a83d" }, "dist": { "type": "zip", - "url": "https://api.github.com/repos/symfony/polyfill-intl-normalizer/zipball/8c4ad05dd0120b6a53c1ca374dca2ad0a1c4ed92", - "reference": "8c4ad05dd0120b6a53c1ca374dca2ad0a1c4ed92", + "url": "https://api.github.com/repos/symfony/polyfill-intl-normalizer/zipball/bc45c394692b948b4d383a08d7753968bed9a83d", + "reference": "bc45c394692b948b4d383a08d7753968bed9a83d", "shasum": "" }, "require": { @@ -1015,9 +1012,6 @@ }, "type": "library", "extra": { - "branch-alias": { - "dev-main": "1.28-dev" - }, "thanks": { "name": "symfony/polyfill", "url": "https://github.com/symfony/polyfill" @@ -1059,7 +1053,7 @@ "shim" ], "support": { - "source": "https://github.com/symfony/polyfill-intl-normalizer/tree/v1.28.0" + "source": "https://github.com/symfony/polyfill-intl-normalizer/tree/v1.29.0" }, "funding": [ { @@ -1075,7 +1069,7 @@ "type": "tidelift" } ], - "time": "2023-01-26T09:26:14+00:00" + "time": "2024-01-29T20:11:03+00:00" }, { "name": "symfony/polyfill-mbstring", diff --git a/site/blueprints/pages/articles.yml b/site/blueprints/pages/articles.yml index 992ea86..bf92710 100644 --- a/site/blueprints/pages/articles.yml +++ b/site/blueprints/pages/articles.yml @@ -1,4 +1,4 @@ -title: Articles +title: texts columns: - width: 1/2 diff --git a/site/blueprints/pages/year.yml b/site/blueprints/pages/year.yml index d484825..fdf4f17 100644 --- a/site/blueprints/pages/year.yml +++ b/site/blueprints/pages/year.yml @@ -6,7 +6,7 @@ image: columns: - width: 1/3 sections: - articles: + texts: type: pages templates: - linear diff --git a/site/collections/years.php b/site/collections/years.php index 323c68c..72920be 100644 --- a/site/collections/years.php +++ b/site/collections/years.php @@ -1,5 +1,5 @@ find('articles')->children(); -}; \ No newline at end of file + return $site->find('texts')->children(); +}; diff --git a/site/config/config.php b/site/config/config.php index 98d300e..f9b2d51 100644 --- a/site/config/config.php +++ b/site/config/config.php @@ -7,17 +7,17 @@ return [ 'site' => [ 'label' => 'Accueil', 'current' => function ($current) { - $path = Kirby::instance()->request()->path()->toString(); - return Str::contains($path, 'site'); + $path = Kirby::instance()->request()->path()->toString(); + return Str::contains($path, 'site'); } ], - 'articles' => [ + 'texts' => [ 'icon' => 'pen', - 'label' => 'Articles', - 'link' => 'pages/articles', + 'label' => 'texts', + 'link' => 'pages/texts', 'current' => function ($current) { - $path = Kirby::instance()->request()->path()->toString(); - return Str::contains($path, 'pages/articles'); + $path = Kirby::instance()->request()->path()->toString(); + return Str::contains($path, 'pages/texts'); } ], '-', @@ -26,8 +26,8 @@ return [ 'label' => 'À propos', 'link' => 'pages/a-propos', 'current' => function ($current) { - $path = Kirby::instance()->request()->path()->toString(); - return Str::contains($path, 'pages/a-propos'); + $path = Kirby::instance()->request()->path()->toString(); + return Str::contains($path, 'pages/a-propos'); } ], 'newsletter' => [ @@ -35,13 +35,14 @@ return [ 'label' => 'Lettre', 'link' => 'pages/lettre', 'current' => function ($current) { - $path = Kirby::instance()->request()->path()->toString(); - return Str::contains($path, 'pages/lettre'); + $path = Kirby::instance()->request()->path()->toString(); + return Str::contains($path, 'pages/lettre'); } ], '-', 'users', + 'comments', 'system' ] ] -]; \ No newline at end of file +]; diff --git a/site/snippets/header.php b/site/snippets/header.php index e378f7b..024d3dd 100644 --- a/site/snippets/header.php +++ b/site/snippets/header.php @@ -8,5 +8,7 @@ + + \ No newline at end of file diff --git a/site/snippets/tabs.php b/site/snippets/tabs.php index 1232213..654eb8e 100644 --- a/site/snippets/tabs.php +++ b/site/snippets/tabs.php @@ -1,4 +1,4 @@ - @@ -15,9 +15,9 @@ $left['slug'] = Str::slug($left['label']); > + :class="activeTab === 'texts' ? 'open' : 'close'" + @click="toggleTab($data, 'texts')" + >textes