MàJ du style

src/main/kotlin/fr/spacefox/japon/data/Content.kt

@@ -13,8 +13,8 @@ data class Image(val folder: String, val id: String, val title: String) : Conten
         val figCaption = if (title.isBlank()) "" else "<figcaption>$title</figcaption>"
         return """<figure>
                     $figCaption
-                    <a href="photos/${folder}/$id.jpg" title="$title" data-lightbox="imgset">
+                    <a href="/photos/${folder}/$id.jpg" title="$title">
-                        <img src="photos/${folder}/mini/$id.jpg" alt="$title"/>
+                        <img src="/photos/${folder}/mini/$id.jpg" alt="$title"/>
                     </a>
                 </figure>"""
     }

src/main/resources/META-INF/resources/css/main.css

@@ -110,6 +110,10 @@ article {
 }
 
 /* Other behaviours */
+header h1 span {
+    display: none;
+}
+
 nav li {
     /* large line height in nav to simplify navigation */
     line-height: 2rem;
@@ -133,33 +137,45 @@ main article a.title {
     grid-row: 1;
 }
 
-main header h2.date,
+main header h2.date {
-main article .date {
     grid-column: 1;
     grid-row: 2;
-    text-align: left;
+    text-align: start;
     font-size: 0.8rem;
 }
 
-main header h2.place,
+main header h2.place {
-main article .place {
     grid-column: 2;
     grid-row: 2;
-    text-align: right;
+    text-align: end;
+    font-size: 0.8rem;
+}
+
+main article .place {
+    grid-column: 1;
+    grid-row: 2;
+    text-align: start;
+    font-size: 0.8rem;
+}
+
+main article .date {
+    grid-column: 2;
+    grid-row: 2;
+    text-align: end;
     font-size: 0.8rem;
 }
 
 main article a.category {
     grid-column: 1;
     grid-row: 3;
-    text-align: left;
+    text-align: start;
     font-size: 0.8rem;
 }
 
 main article .imgCount {
     grid-column: 2;
     grid-row: 3;
-    text-align: right;
+    text-align: end;
     font-size: 0.8rem;
 }
 
@@ -224,7 +240,7 @@ figure {
 p,
 ul,
 ol {
-    text-align: left;
+    text-align: start;
 }
 
 section h1,
@@ -245,10 +261,10 @@ main header,
 main article,
 main > section,
 footer {
-    box-shadow: 0.25em 0.25em 0.25em rgba(0, 0, 0, 0.25);
+    box-shadow: 0.25em 0.25em 0.25em rgba(50, 50, 50, 0.25);
     margin-bottom: 1rem;
     padding: 1rem;
-    background-color: white;
+    background-color: #fcfcfc;
     max-width: calc(100vw - 2rem);
 }
 
@@ -266,7 +282,28 @@ main figcaption,
 main > p,
 main article,
 main > section {
-    background-color: lightgray;
+    background-color: #ddd;
+}
+
+a {
+    color: darkred;
+    text-decoration: none;
+}
+
+a:focus, a:hover {
+    text-decoration: solid underline darkred 0.1rem;
+}
+
+a:visited {
+    color: #500;
+}
+
+body > header > a,
+body > header > a:hover,
+body > header > a:focus,
+body > header > a:visited {
+    color: #222;
+    text-decoration: none;
 }
 
 /* Boxes behaviour (additional rules after structure for technical reasons) */
@@ -292,8 +329,28 @@ main a[href^="https://"]::after {
 /* ---------- Width-dependent design elements ---------- */
 /* Base = smartphone = all the design above */
 
+@media screen and (min-width: 27rem) {
+    /* Not-so-narrow smartphones don’t require to shrink some texts */
+    main header h2.place,
+    main header h2.date,
+    main article .place,
+    main article .date,
+    main article a.category,
+    main article .imgCount {
+        font-size: 1rem;
+    }
+}
+
+@media screen and (min-width: 29rem) {
+    /* Add emojis in header */
+    header h1 span {
+        display: inline;
+    }
+}
+
 /* Wide screen (desktop) */
 @media screen and (min-width: 42rem) {
+    /* 2-columns menu */
     nav {
         display: grid;
         grid-template-columns: 1fr 1fr;
@@ -312,6 +369,10 @@ main a[href^="https://"]::after {
 }
 
 @media screen and (min-width: 48rem) {
+    body > header h1 {
+        font-size: 3rem;
+    }
+
     main article {
         display: grid;
         grid-template-columns: 1fr 1fr 1fr;
@@ -323,34 +384,34 @@ main a[href^="https://"]::after {
     main article a.title {
         grid-column: 1 / 3;
         grid-row: 1;
-        text-align: left;
+        text-align: start;
     }
 
     main article div.imgCount {
         grid-column: 3;
         grid-row: 1;
-        text-align: right;
+        text-align: end;
         font-size: 1rem;
     }
 
     main article div.date {
         grid-column: 1;
         grid-row: 2;
-        text-align: right;
+        text-align: start;
         font-size: 1rem;
     }
 
     main article div.place {
         grid-column: 2;
         grid-row: 2;
-        text-align: left;
+        text-align: center;
         font-size: 1rem;
     }
 
     main article a.category {
         grid-column: 3;
         grid-row: 2;
-        text-align: right;
+        text-align: end;
         font-size: 1rem;
     }
 }
@@ -360,19 +421,16 @@ main a[href^="https://"]::after {
         max-width: 64rem;
     }
 
-    body > header h1 {
+    main article a.title {
-        font-size: 3rem;
+        font-size: 1.5rem;
     }
 
+    /* Images page header with better style for wide-screen */
     main header h1 {
         padding-left: 0.5rem;
         font-size: 2rem;
     }
 
-    main article a.title {
-        font-size: 1.5rem;
-    }
-
     main header {
         display: grid;
         grid-template-columns: 3fr 1fr;
@@ -383,11 +441,11 @@ main a[href^="https://"]::after {
     main header h1 {
         grid-column: 1;
         grid-row: 1 / 3;
-        text-align: left;
+        text-align: start;
     }
 
     main header h2 {
-        text-align: right;
+        text-align: end;
         line-height: 1rem;
     }
 
@@ -395,7 +453,7 @@ main a[href^="https://"]::after {
         grid-column: 2;
         grid-row: 1;
         font-size: 1rem;
-        text-align: right;
+        text-align: end;
     }
 
     main header h2.place {
@@ -404,6 +462,7 @@ main a[href^="https://"]::after {
         font-size: 1rem;
     }
 
+    /* 3-column footer */
     footer {
         display: grid;
         grid-template-columns: 1fr 1fr 1fr;

src/main/resources/templates/base.qute.html

@@ -4,18 +4,19 @@
     <meta charset="utf-8">
     <meta name="language" content="fr">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <title>Un renard au Japon – {#insert title}Default Title{/}</title>
+    <title>Un renard au Japon – {#insert title}{/}</title>
     <meta name="description" content="Photos de voyage d'un renard au Japon">
     <meta name="author" content="SpaceFox">
     <link rel="icon" type="image/png" href="/favicon.png"/>
-    <base href="https://japon.spacefox.fr/"/>
     <link href="/css/normalize.css" rel="stylesheet"/>
     <link href="/css/main.css" rel="stylesheet"/>
 </head>
 <body>
 <header>
-    <h1>Un renard au Japon</h1>
+    <a href="/">
+        <h1><span>🦊 </span>Un renard au Japon<span> 🇯🇵</span></h1>
         <h2>Votre renard préféré au Japon. Un âne au nom comme un jeu de mots vaseux squatte...</h2>
+    </a>
 </header>
 
 <nav>
@@ -23,7 +24,7 @@
         <h1>Catégories</h1>
         <ul>
             {#for category in categories}
-                <li><a href="category/{category.name}#content">{category.displayName}</a> ({category.imgCount()})</li>
+                <li><a href="/category/{category.name}#content">{category.displayName}</a> ({category.imgCount()})</li>
             {/for}
         </ul>
     </section>
@@ -31,7 +32,7 @@
         <h1>Lieux</h1>
         <ul>
             {#for place in places}
-                <li><a href="place/{place.name}#content">{place.displayName}</a> ({place.imgCount()})</li>
+                <li><a href="/place/{place.name}#content">{place.displayName}</a> ({place.imgCount()})</li>
             {/for}
         </ul>
     </section>

src/main/resources/templates/detail.qute.html

@@ -3,7 +3,7 @@
     <header>
         <h1>{page.title}</h1>
         <h2 class="date">Le {page.dateHuman}</h2>
-        <h2 class="place">à <a href="place/{page.place.name}#content">{page.place.displayName}</a></h2>
+        <h2 class="place">à <a href="/place/{page.place.name}#content">{page.place.displayName}</a></h2>
     </header>
     {#for element in page.content}
         {element.render().raw}

src/main/resources/templates/licences.qute.html

@@ -32,7 +32,7 @@
         </ul>
         <h3 id="exemple-de-crédit-pour-une-réutilisation-dimage">Exemple de crédit pour une réutilisation d’image</h3>
         <p><img src="/photos/quotidien/mini/Himeji%20106.jpg" alt="Image d&rsquo;exemple de réutilisation"></p>
-        <p>« <a href="/d5600_002320/">Tamia pressé</a> » par SpaceFox / <a
+        <p>« <a href="/photos/quotidien/Himeji%20106.jpg">vue sur Himeji</a> » par SpaceFox / <a
                     href="https://creativecommons.org/licenses/by/4.0/deed.fr">CC BY 4.0</a></p>
         <p>Le crédit précise les 4 indications nécessaires :</p>
         <ol>

src/main/resources/templates/list.qute.html

@@ -5,13 +5,11 @@
     </header>
     {#for page in pages}
         <article>
-        <a class="title" href="page/{page.name}#content">{page.title}</a>
+        <a class="title" href="/page/{page.name}#content">{page.title}</a>
         <div class="imgCount">{page.imgCount} images</div>
-        <div class="date">le
+        <div class="date"><time datetime="{page.timestamp}">{page.dateHuman}</time></div>
-            <time datetime="{page.timestamp}">{page.dateHuman}</time>
+        <div class="place"><a href="/place/{page.place.name}#content">{page.place.displayName}</a></div>
-        </div>
+        <a  class="category" href="/category/{page.category.name}#content">{page.category.displayName}</a>
-        <div class="place">à <a href="place/{page.place.name}#content">{page.place.displayName}</a></div>
-        <a  class="category" href="category/{page.category.name}#content">{page.category.displayName}</a>
         </article>
     {/for}
 {/include}

src/main/resources/templates/listWithMap.qute.html

@@ -5,13 +5,11 @@
     </header>
     {#for page in pages}
         <article>
-        <a class="title" href="page/{page.name}#content">{page.title}</a>
+        <a class="title" href="/page/{page.name}#content">{page.title}</a>
         <div class="imgCount">{page.imgCount} images</div>
-        <div class="date">le
+        <div class="date"><time datetime="{page.timestamp}">{page.dateHuman}</time></div>
-            <time datetime="{page.timestamp}">{page.dateHuman}</time>
+        <div class="place"><a href="/place/{page.place.name}#content">{page.place.displayName}</a></div>
-        </div>
+        <a  class="category" href="/category/{page.category.name}#content">{page.category.displayName}</a>
-        <div class="place">à <a href="place/{page.place.name}#content">{page.place.displayName}</a></div>
-        <a  class="category" href="category/{page.category.name}#content">{page.category.displayName}</a>
         </article>
     {/for}
     <iframe width="750" height="400" frameborder="0" scrolling="no" marginheight="0" marginwidth="0"