330: add linklub configuration

app/components/linklub_logo.php

@@ -0,0 +1,9 @@
+<?php
+
+return function ($display = false) { ?>
+    <?php if (!$display)
+        include "assets/svg/linklub_icon.svg"; ?>
+    <span>
+        <?= $display ? config("name", "linklub") : "linklub" ?>
+    </span>
+<?php } ?>

app/pages/about.php

@@ -0,0 +1,33 @@
+<?php
+page("Login")->css("about.css")->disableNav()->heading(false);
+?>
+<nav>
+    <ul>
+        <li><button role="link" class="outline contrast" onclick="history.back()"><i class="fa fa-caret-left"></i>
+                Retour</button></li>
+    </ul>
+</nav>
+<div class="row center g-4">
+    <div class="col-12 col-md col-lg-7">
+        <h1 class="logo-top">
+            <?php import(__DIR__ . "/../components/linklub_logo.php")(false) ?>
+        </h1>
+        <div class="header">
+            Linklub est une application web qui permet de gérer les événements de votre club. Si vous cherchez un
+            système de
+            gestion d'événements simple et efficace, vous êtes au bon endroit.
+        </div>
+    </div>
+    <div class="col-12 col-md-auto col-lg-5">
+        <div class="mockup-container">
+            <div class="mockup-phone">
+                <div class="camera"></div>
+                <div class="display">
+                    <div class="artboard">
+                        <img class="image" src="assets/images/PhoneMockup.webp" alt="">
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>

app/pages/events/event_list/event_list.php

@@ -22,10 +22,11 @@
     ->setParameter("month", $current_date_month)
     ->setParameter("day", $current_date_day)
     ->getQuery()->getResult();
-
-page("Événements")->css("event_list.css")->heading(false);
-
 $vowels = ["a", "e", "i", "o", "u"];
+
+page("Événements")->css("event_list.css")
+    ->css("about.css") // preload to prevent FOUC
+    ->heading(false);
 ?>
 
 <?php if ($birthday_users): ?>
@@ -40,7 +41,7 @@
     </div>
 <?php endif ?>
 
-<h2 class="center">Événements</h2>
+<h2 class="center main-heading">Événements</h2>
 
 <?= actions($can_edit)?->link("/evenements/nouveau", "Ajouter un événement", "fas fa-plus") ?>
 

app/pages/login.php

@@ -6,12 +6,13 @@
 if ($v->valid()) {
     AuthService::create()->tryLogin($login->value, $password->value, $rememberMe->value, $v) && redirect("/");
 }
-
 page("Login")->css("login.css")->disableNav()->heading(false);
 ?>
 <article>
     <form method="post" hx-boost="false">
-        <h2 class="center">Intranose</h2>
+        <a href="/about" class="center login-logo contrast">
+            <?= import(__DIR__ . "/../components/linklub_logo.php")(env("INTRANOSE")) ?>
+        </a>
         <?= $login->render() ?>
         <?= $password->render() ?>
         <?= $rememberMe->render() ?>

app/template/favicon.php

@@ -0,0 +1,19 @@
+<!-- Favicon -->
+<?php if (env("INTRANOSE")): ?>
+    <link rel="apple-touch-icon" sizes="180x180" href="/assets/favicon/intranose/apple-touch-icon.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="/assets/favicon/intranose/favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="/assets/favicon/intranose/favicon-16x16.png">
+    <link rel="manifest" href="/assets/favicon/intranose/site.webmanifest">
+    <link rel="mask-icon" href="/assets/favicon/intranose/safari-pinned-tab.svg" color="#28b432">
+    <meta name="msapplication-TileColor" content="#00a300">
+<?php else: ?>
+    <link rel="icon" type="image/png" href="/assets/favicon/linklub/favicon-96x96.png" sizes="96x96" />
+    <link rel="icon" type="image/svg+xml" href="/assets/favicon/linklub/favicon.svg" />
+    <link rel="shortcut icon" href="/assets/favicon/linklub/favicon.ico" />
+    <link rel="apple-touch-icon" sizes="180x180" href="/assets/favicon/linklub/apple-touch-icon.png" />
+    <meta name="apple-mobile-web-app-title" content="Linklub" />
+    <link rel="manifest" href="/assets/favicon/linklub/site.webmanifest" />
+<?php endif ?>
+
+<meta name="theme-color" content="#fff" media="(prefers-color-scheme: light)">
+<meta name="theme-color" content="#13171f" media="(prefers-color-scheme: dark)">

app/template/layout.php

@@ -7,19 +7,11 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>
-        <?= implode(" | ", array_filter([$page->title, "Intranose"])) ?>
+        <?= implode(" | ", array_filter([$page->title, config("name", "Linklub")])) ?>
     </title>
     <meta name="description" content="<?= $page->description ?>">
 
-    <!-- Favicon -->
-    <link rel="apple-touch-icon" sizes="180x180" href="/assets/favicon/apple-touch-icon.png">
-    <link rel="icon" type="image/png" sizes="32x32" href="/assets/favicon/favicon-32x32.png">
-    <link rel="icon" type="image/png" sizes="16x16" href="/assets/favicon/favicon-16x16.png">
-    <link rel="manifest" href="/assets/favicon/site.webmanifest">
-    <link rel="mask-icon" href="/assets/favicon/safari-pinned-tab.svg" color="#28b432">
-    <meta name="msapplication-TileColor" content="#00a300">
-    <meta name="theme-color" content="#fff" media="(prefers-color-scheme: light)">
-    <meta name="theme-color" content="#13171f" media="(prefers-color-scheme: dark)">
+    <?php include __DIR__ . "/favicon.php" ?>
 
     <!-- FontAwesome -->
     <link rel="stylesheet" href="/assets/css/fontawesome.min.css">
@@ -39,9 +31,7 @@
         <link rel="stylesheet" href="<?= $css ?>">
     <?php endforeach ?>
 
-    <?php if ($page->nav): ?>
-        <link rel="stylesheet" href="/assets/css/navbar.css">
-    <?php endif ?>
+    <link rel="stylesheet" href="/assets/css/navbar.css">
 
     <!-- HTMX -->
     <script src="/assets/js/htmx1.9.5-core.min.js" defer></script>
@@ -57,8 +47,8 @@
     <?php include __DIR__ . "/shoelace.php" ?>
 </head>
 
-<body hx-ext="head-support,loading-states" hx-boost="true" hx-indicator="#hx-indicator"
-    hx-on:show-modal="document.getElementById(event.detail.modalId).showModal()">
+<body hx-ext="head-support,loading-states" <?= has_session("user_id") ? 'hx-boost="true"' : "" ?>
+    hx-indicator="#hx-indicator" hx-on:show-modal="document.getElementById(event.detail.modalId).showModal()">
     <?php
     if ($page->nav && has_session("user_id")) {
         require_once app_path() . "/template/nav.php";
@@ -69,7 +59,7 @@
             echo ControlNotice();
         } ?>
         <?php if ($page->heading !== false): ?>
-            <h2 class="center">
+            <h2 class="center main-heading">
                 <?= $page->heading ?: $page->title ?>
             </h2>
         <?php endif ?>

app/template/nav.php

@@ -29,7 +29,9 @@
     <nav>
         <ul>
             <li>
-                <h3 class="nav-title">Intranose</h3>
+                <h2 class="nav-title">
+                    <?php import(__DIR__ . "/../components/linklub_logo.php")(!!env("INTRANOSE")) ?>
+                </h2>
             </li>
             <?php foreach ($menu->items as $menu_item): ?>
                 <li class="<?= strpos($_SESSION['current_route'], $menu_item->url) !== false ? "active" : "" ?>">

assets/css/about.css

@@ -0,0 +1,82 @@
+.logo-top {
+  margin: 1rem auto 3rem;
+  font-family: "Faro Light";
+}
+
+@media (min-width: 768px) {
+  .logo-top {
+    margin-top: 3rem;
+  }
+}
+
+.mockup-phone {
+  display: inline-block;
+  border: 4px solid #444;
+  border-radius: 50px;
+  background-color: #000;
+  padding: 10px;
+  margin: 0 auto;
+  overflow: hidden;
+  border-color: var(--primary-background);
+}
+
+.mockup-phone .display {
+  border-radius: 40px;
+  margin-top: -25px;
+}
+
+.artboard {
+  width: 320px;
+  height: 568px;
+  border-radius: 1rem;
+  background-color: #15191e;
+  color: #a6adbb;
+  box-shadow: 0 1px 3px #0000001a, 0 1px 2px #0000000f;
+  display: flex;
+  flex: none;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  border-radius: 40px;
+  margin-top: -25px;
+}
+
+.mockup-phone .camera {
+  position: relative;
+  top: 0;
+  left: 0;
+  background: #000;
+  height: 27px;
+  width: 150px;
+  margin: 0 auto;
+  border-bottom-left-radius: 17px;
+  border-bottom-right-radius: 17px;
+  z-index: 11;
+}
+
+.mockup-phone .camera:before {
+  content: "";
+  position: absolute;
+  top: 35%;
+  left: 50%;
+  width: 50px;
+  height: 4px;
+  border-radius: 5px;
+  background-color: #0c0b0e;
+  transform: translate(-50%, -50%);
+}
+
+.mockup-phone .camera:after {
+  content: "";
+  position: absolute;
+  top: 20%;
+  left: 70%;
+  width: 8px;
+  height: 8px;
+  border-radius: 5px;
+  background-color: #0f0b25;
+}
+
+.artboard > img {
+  border-radius: 40px;
+}

assets/css/login.css

@@ -28,3 +28,13 @@ body > main {
 .help::before {
   white-space: pre;
 }
+
+.login-logo {
+  display: block;
+  padding: 1rem;
+  margin: 0 auto 1rem;
+  font-family: "Faro Light";
+  font-size: 2rem;
+  font-weight: 600;
+  text-decoration: none;
+}

assets/css/main.css

@@ -658,3 +658,12 @@ article.notice > header,
     rotate: -90deg;
   }
 }
+
+.main-heading {
+  font-family: "Faro Light";
+}
+
+@font-face {
+  font-family: "Faro Light";
+  src: url(../webfonts/Farro-Light.ttf);
+}

assets/css/navbar.css

@@ -32,7 +32,7 @@
   white-space: nowrap;
   overflow-x: hidden;
   transition: width 0.2s;
-  padding: 4.5rem 0 1rem;
+  padding: 3.5rem 0 1rem;
   background: var(--card-background-color);
   box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.2);
 }
@@ -49,10 +49,15 @@
 }
 
 .sidenav .nav-title {
-  margin: 0;
+  display: block;
+  margin: 0.25rem 0;
+  padding: 0;
+  font-size: 1.5rem;
+  font-weight: 700;
+  font-family: "Faro Light";
 }
 
-body > header {
+body:has(.sidenav) > header {
   position: sticky;
   top: 0;
   z-index: 4;
@@ -65,26 +70,26 @@ body > header {
   box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.2);
 }
 
-body > header > * {
+body:has(.sidenav) > header > * {
   margin: 0;
   padding: 0.5rem;
 }
 
-body > main.container {
+body:has(.sidenav) > main.container {
   padding: 4rem 1rem 1rem;
 }
 
-body > main > .spacing-div {
+body:has(.sidenav) > main > .spacing-div {
   height: 3.75rem;
 }
 
-.icon-buttons {
+.sidenav .icon-buttons {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 0 1rem 1rem;
 }
-.icon-buttons > :last-child {
+.sidenav .icon-buttons > :last-child {
   margin: 0;
   padding: 0;
   border: none;
@@ -95,7 +100,7 @@ body > main > .spacing-div {
   border-radius: 50%;
 }
 /* theme toggle */
-.icon-buttons > :first-child {
+.sidenav .icon-buttons > :first-child {
   --size: 1.4rem;
   line-height: 1rem;
   margin: 0;
@@ -127,7 +132,7 @@ body > main > .spacing-div {
   color: var(--primary);
 }
 
-.active > a {
+.sidenav .active > a {
   color: var(--primary);
 }
 
@@ -146,15 +151,15 @@ body > main > .spacing-div {
     visibility: visible;
   }
 
-  body {
+  body:has(.sidenav) {
     padding-left: 250px;
   }
 
-  body > main.container {
+  body:has(.sidenav) > main.container {
     padding: 4rem 2rem 1rem;
   }
 
-  body > header {
+  body:has(.sidenav) > header {
     width: calc(100% + 250px); /* twice the value of the parent's padding*/
     margin-left: -250px; /* -1 * parent's padding*/
     padding-left: 2rem;

assets/favicon/site.webmanifest → assets/favicon/intranose/site.webmanifest

@@ -3,12 +3,12 @@
   "short_name": "Intranose",
   "icons": [
     {
-      "src": "/assets/favicon/android-chrome-192x192.png",
+      "src": "/assets/favicon/intranose/android-chrome-192x192.png",
       "sizes": "192x192",
       "type": "image/png"
     },
     {
-      "src": "/assets/favicon/android-chrome-512x512.png",
+      "src": "/assets/favicon/intranose/android-chrome-512x512.png",
       "sizes": "512x512",
       "type": "image/png"
     }