Nouveau design
This commit is contained in:
SpaceFox
parent
24afa79e57
commit
050fa1564f
13 changed files with 1053 additions and 97 deletions
|
|
@ -11,16 +11,14 @@ import javax.ws.rs.PathParam
|
|||
import javax.ws.rs.Produces
|
||||
import javax.ws.rs.core.MediaType
|
||||
|
||||
|
||||
@Path("/")
|
||||
class ListHtmlResource(val list: Template) {
|
||||
|
||||
@GET
|
||||
@Path("accueil")
|
||||
@Produces(MediaType.TEXT_HTML)
|
||||
fun accueil(): TemplateInstance = list.data("title", "Accueil")
|
||||
.data("pages", Page.values())
|
||||
.withMenuData()
|
||||
fun accueil(): TemplateInstance =
|
||||
list.data("title", "Accueil").data("pages", Page.values()).withMenuData()
|
||||
|
||||
@GET
|
||||
@Path("category/{name}")
|
||||
|
|
@ -28,7 +26,7 @@ class ListHtmlResource(val list: Template) {
|
|||
fun category(@PathParam("name") name: String): TemplateInstance {
|
||||
val category = Category.valueOf(name)
|
||||
return list
|
||||
.data("title", "Catégorie :${category.displayName}")
|
||||
.data("title", category.displayName)
|
||||
.data("pages", category.pages())
|
||||
.withMenuData()
|
||||
}
|
||||
|
|
@ -43,25 +41,41 @@ class ListWithMapHtmlResource(val listWithMap: Template) {
|
|||
fun category(@PathParam("name") name: String): TemplateInstance {
|
||||
val place = Place.valueOf(name)
|
||||
return listWithMap
|
||||
.data("title", "Lieu :${place.displayName}")
|
||||
.data("title", place.displayName)
|
||||
.data("place", place)
|
||||
.data("pages", place.pages())
|
||||
.withMenuData()
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@Path("/page/")
|
||||
class PageResource(val detail: Template) {
|
||||
|
||||
@GET
|
||||
@Path("{name}")
|
||||
@Produces(MediaType.TEXT_HTML)
|
||||
fun page(@PathParam("name") name: String): TemplateInstance = detail.data("page", Page.valueOf(name))
|
||||
.withMenuData()
|
||||
fun page(@PathParam("name") name: String): TemplateInstance =
|
||||
detail.data("page", Page.valueOf(name)).withMenuData()
|
||||
}
|
||||
|
||||
@Path("/mentionslegales/")
|
||||
class LegalResource(val mentionslegales: Template) {
|
||||
|
||||
@GET
|
||||
@Path("/")
|
||||
@Produces(MediaType.TEXT_HTML)
|
||||
fun page(): TemplateInstance = mentionslegales.instance().withMenuData()
|
||||
}
|
||||
|
||||
@Path("/licences/")
|
||||
class LicencesResource(val licences: Template) {
|
||||
|
||||
@GET
|
||||
@Path("/")
|
||||
@Produces(MediaType.TEXT_HTML)
|
||||
fun page(): TemplateInstance = licences.instance().withMenuData()
|
||||
}
|
||||
|
||||
private fun TemplateInstance.withMenuData(): TemplateInstance {
|
||||
return this.data("categories", Category.values())
|
||||
.data("places", Place.values())
|
||||
}
|
||||
return this.data("categories", Category.values()).data("places", Place.values())
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,4 +12,6 @@ enum class Category(val displayName: String) {
|
|||
francisla("Francis-La");
|
||||
|
||||
fun pages(): List<Page> = Page.values().filter { it.category == this }
|
||||
|
||||
fun imgCount(): Int = pages().sumOf { it.imgCount() }
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,11 +10,12 @@ data class Text(val text: String) : Content {
|
|||
|
||||
data class Image(val folder: String, val id: String, val title: String) : Content {
|
||||
override fun render(): String {
|
||||
val figCaption = if (title.isBlank()) "" else "<figcaption>$title</figcaption>"
|
||||
return """<figure>
|
||||
<figcaption>$title</figcaption>
|
||||
$figCaption
|
||||
<a href="photos/${folder}/$id.jpg" title="$title" data-lightbox="imgset">
|
||||
<img src="photos/${folder}/mini/$id.jpg" alt="$title"/>
|
||||
</a>
|
||||
</figure>"""
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1855,9 +1855,12 @@ enum class Page(
|
|||
),
|
||||
;
|
||||
|
||||
private val formatter = DateTimeFormatter.ofPattern("EEEE dd MMMM yyyy")
|
||||
fun dateHuman(): String = humanFormatter.format(date)
|
||||
|
||||
fun dateHuman(): String = formatter.format(date)
|
||||
fun timestamp(): String = machineFormatter.format(date)
|
||||
|
||||
fun timestamp(): Long = date.toEpochDay()
|
||||
fun imgCount(): Int = content.count { it is Image }
|
||||
}
|
||||
|
||||
private val machineFormatter = DateTimeFormatter.ofPattern("yyyy-MM-dd")
|
||||
private val humanFormatter = DateTimeFormatter.ofPattern("EEEE dd MMMM yyyy")
|
||||
|
|
|
|||
|
|
@ -54,7 +54,10 @@ enum class Place(val displayName: String, val iframeSrc: String, val link: Strin
|
|||
iframeSrc =
|
||||
"https://maps.google.fr/maps?f=q&source=s_q&hl=fr&geocode=&q=tokyo&aq=&sll=48.680792,2.502588&sspn=3.315151,8.453979&ie=UTF8&hq=&hnear=Tokyo,+Japon&t=p&ll=35.817813,139.658203&spn=7.124687,16.45752&z=6&output=embed",
|
||||
link =
|
||||
"https://maps.google.fr/maps?f=q&source=embed&hl=fr&geocode=&q=tokyo&aq=&sll=48.680792,2.502588&sspn=3.315151,8.453979&ie=UTF8&hq=&hnear=Tokyo,+Japon&t=p&ll=35.817813,139.658203&spn=7.124687,16.45752&z=6"),;
|
||||
"https://maps.google.fr/maps?f=q&source=embed&hl=fr&geocode=&q=tokyo&aq=&sll=48.680792,2.502588&sspn=3.315151,8.453979&ie=UTF8&hq=&hnear=Tokyo,+Japon&t=p&ll=35.817813,139.658203&spn=7.124687,16.45752&z=6"),
|
||||
;
|
||||
|
||||
fun pages(): List<Page> = Page.values().filter { it.place == this }
|
||||
|
||||
fun imgCount(): Int = pages().sumOf { it.imgCount() }
|
||||
}
|
||||
|
|
|
|||
507
src/main/resources/META-INF/resources/css/main.css
Normal file
507
src/main/resources/META-INF/resources/css/main.css
Normal file
|
|
@ -0,0 +1,507 @@
|
|||
/*! HTML5 Boilerplate v8.0.0 | MIT License | https://html5boilerplate.com/ */
|
||||
@import url('https://fonts.googleapis.com/css2?family=Satisfy&family=Oleo+Script&family=Kiwi+Maru&family=Zen+Old+Mincho&family=Noto+Serif+JP&display=swap');
|
||||
|
||||
/* main.css 2.1.0 | MIT License | https://github.com/h5bp/main.css#readme */
|
||||
/*
|
||||
* What follows is the result of much research on cross-browser styling.
|
||||
* Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
|
||||
* Kroc Camen, and the H5BP dev community and team.
|
||||
*/
|
||||
|
||||
/* ==========================================================================
|
||||
Base styles: opinionated defaults
|
||||
========================================================================== */
|
||||
|
||||
html {
|
||||
color: #222;
|
||||
font-size: 1rem;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
/*
|
||||
* Remove text-shadow in selection highlight:
|
||||
* https://twitter.com/miketaylr/status/12228805301
|
||||
*
|
||||
* Vendor-prefixed and regular ::selection selectors cannot be combined:
|
||||
* https://stackoverflow.com/a/16982510/7133471
|
||||
*
|
||||
* Customize the background color to match your design.
|
||||
*/
|
||||
|
||||
::-moz-selection {
|
||||
background: #b3d4fc;
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
::selection {
|
||||
background: #b3d4fc;
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
/*
|
||||
* A better looking default horizontal rule
|
||||
*/
|
||||
|
||||
hr {
|
||||
display: block;
|
||||
height: 1px;
|
||||
border: 0;
|
||||
border-top: 1px solid #ccc;
|
||||
margin: 1em 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/*
|
||||
* Remove the gap between audio, canvas, iframes,
|
||||
* images, videos and the bottom of their containers:
|
||||
* https://github.com/h5bp/html5-boilerplate/issues/440
|
||||
*/
|
||||
|
||||
audio,
|
||||
canvas,
|
||||
iframe,
|
||||
img,
|
||||
svg,
|
||||
video {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
/*
|
||||
* Remove default fieldset styles.
|
||||
*/
|
||||
|
||||
fieldset {
|
||||
border: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/*
|
||||
* Allow only vertical resizing of textareas.
|
||||
*/
|
||||
|
||||
textarea {
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Author's custom styles
|
||||
========================================================================== */
|
||||
|
||||
/* ---------- Structure ---------- */
|
||||
/* Margin/padding reset */
|
||||
h1,
|
||||
h2,
|
||||
nav,
|
||||
figure,
|
||||
figcaption,
|
||||
p {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* Centered blocks */
|
||||
body,
|
||||
nav section,
|
||||
p,
|
||||
figcaption,
|
||||
article {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* Other behaviours */
|
||||
nav li {
|
||||
/* large line height in nav to simplify navigation */
|
||||
line-height: 2rem;
|
||||
}
|
||||
|
||||
body > header {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
main header,
|
||||
main article {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
align-items: center;
|
||||
grid-gap: 1rem;
|
||||
}
|
||||
|
||||
main header h1,
|
||||
main article a.title {
|
||||
grid-column: 1 / 3;
|
||||
grid-row: 1;
|
||||
}
|
||||
|
||||
main header h2.date,
|
||||
main article .date {
|
||||
grid-column: 1;
|
||||
grid-row: 2;
|
||||
text-align: left;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
main header h2.place,
|
||||
main article .place {
|
||||
grid-column: 2;
|
||||
grid-row: 2;
|
||||
text-align: right;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
main article a.category {
|
||||
grid-column: 1;
|
||||
grid-row: 3;
|
||||
text-align: left;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
main article .imgCount {
|
||||
grid-column: 2;
|
||||
grid-row: 3;
|
||||
text-align: right;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
footer {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
align-items: center;
|
||||
grid-gap: 1rem;
|
||||
}
|
||||
|
||||
/* ---------- Fonts ---------- */
|
||||
/* Families */
|
||||
body {
|
||||
font-family: 'Noto Serif JP', serif;
|
||||
}
|
||||
|
||||
body > header h1,
|
||||
main header h1,
|
||||
nav section h1,
|
||||
main article a.title {
|
||||
font-family: 'Oleo Script', 'Noto Serif JP', cursive;
|
||||
}
|
||||
|
||||
/* Sizes */
|
||||
body > header h1 {
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
|
||||
main header h1 {
|
||||
padding-left: 0.5rem;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
main article a.title {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
header h2,
|
||||
main figcaption,
|
||||
main p {
|
||||
font-size: 1rem;
|
||||
line-height: 1.5rem;
|
||||
}
|
||||
|
||||
footer {
|
||||
font-size: 0.8rem;
|
||||
line-height: 1.5rem;
|
||||
}
|
||||
|
||||
footer h1 {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
/* Aligns */
|
||||
h1,
|
||||
body > header,
|
||||
main,
|
||||
figure {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
p,
|
||||
ul,
|
||||
ol {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
section h1,
|
||||
section h2,
|
||||
section h3 {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
/* ---------- Design ---------- */
|
||||
/* Elements in boxes */
|
||||
figure img,
|
||||
iframe,
|
||||
nav section,
|
||||
main figcaption,
|
||||
main > p,
|
||||
body > header,
|
||||
main header,
|
||||
main article,
|
||||
main > section,
|
||||
footer {
|
||||
box-shadow: 0.25em 0.25em 0.25em rgba(0, 0, 0, 0.25);
|
||||
margin-bottom: 1rem;
|
||||
padding: 1rem;
|
||||
background-color: white;
|
||||
max-width: calc(100vw - 2rem);
|
||||
}
|
||||
|
||||
/* Boxes colors */
|
||||
html {
|
||||
background-color: #808080;
|
||||
}
|
||||
|
||||
nav section,
|
||||
main header {
|
||||
background-color: #eee;
|
||||
}
|
||||
|
||||
main figcaption,
|
||||
main > p,
|
||||
main article,
|
||||
main > section {
|
||||
background-color: lightgray;
|
||||
}
|
||||
|
||||
/* Boxes behaviour (additional rules after structure for technical reasons) */
|
||||
main figcaption,
|
||||
main > p {
|
||||
max-width: fit-content;
|
||||
}
|
||||
|
||||
main a[href^="http"]::after,
|
||||
main a[href^="https://"]::after {
|
||||
content: "";
|
||||
width: 0.75rem;
|
||||
height: 0.75rem;
|
||||
margin-left: 0.25rem;
|
||||
margin-bottom: 0.25rem;
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5z'/%3E%3Cpath fill-rule='evenodd' d='M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0v-5z'/%3E%3C/svg%3E");
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
/* ---------- Width-dependent design elements ---------- */
|
||||
/* Base = smartphone = all the design above */
|
||||
|
||||
/* Wide screen (desktop) */
|
||||
@media screen and (min-width: 42rem) {
|
||||
nav {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-gap: 1rem;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
nav > section {
|
||||
width: 17rem;
|
||||
}
|
||||
|
||||
nav li {
|
||||
/* no need for extra height */
|
||||
line-height: initial;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 48rem) {
|
||||
main article {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
grid-gap: 1rem;
|
||||
align-items: center;
|
||||
line-height: 1rem;
|
||||
}
|
||||
|
||||
main article a.title {
|
||||
grid-column: 1 / 3;
|
||||
grid-row: 1;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
main article div.imgCount {
|
||||
grid-column: 3;
|
||||
grid-row: 1;
|
||||
text-align: right;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
main article div.date {
|
||||
grid-column: 1;
|
||||
grid-row: 2;
|
||||
text-align: right;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
main article div.place {
|
||||
grid-column: 2;
|
||||
grid-row: 2;
|
||||
text-align: left;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
main article a.category {
|
||||
grid-column: 3;
|
||||
grid-row: 2;
|
||||
text-align: right;
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 64rem) {
|
||||
body {
|
||||
max-width: 64rem;
|
||||
}
|
||||
|
||||
body > header h1 {
|
||||
font-size: 3rem;
|
||||
}
|
||||
|
||||
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;
|
||||
grid-gap: 1rem;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
main header h1 {
|
||||
grid-column: 1;
|
||||
grid-row: 1 / 3;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
main header h2 {
|
||||
text-align: right;
|
||||
line-height: 1rem;
|
||||
}
|
||||
|
||||
main header h2.date {
|
||||
grid-column: 2;
|
||||
grid-row: 1;
|
||||
font-size: 1rem;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
main header h2.place {
|
||||
grid-column: 2;
|
||||
grid-row: 2;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
footer {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
grid-gap: 1rem;
|
||||
align-items: start;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* ==========================================================================
|
||||
Helper classes
|
||||
========================================================================== */
|
||||
|
||||
/*
|
||||
* Hide visually and from screen readers
|
||||
*/
|
||||
|
||||
.hidden,
|
||||
[hidden] {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/*
|
||||
* Hide only visually, but have it available for screen readers:
|
||||
* https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
|
||||
*
|
||||
* 1. For long content, line feeds are not interpreted as spaces and small width
|
||||
* causes content to wrap 1 word per line:
|
||||
* https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
|
||||
*/
|
||||
|
||||
.sr-only {
|
||||
border: 0;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
height: 1px;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
white-space: nowrap;
|
||||
width: 1px;
|
||||
/* 1 */
|
||||
}
|
||||
|
||||
/*
|
||||
* Extends the .sr-only class to allow the element
|
||||
* to be focusable when navigated to via the keyboard:
|
||||
* https://www.drupal.org/node/897638
|
||||
*/
|
||||
|
||||
.sr-only.focusable:active,
|
||||
.sr-only.focusable:focus {
|
||||
clip: auto;
|
||||
height: auto;
|
||||
margin: 0;
|
||||
overflow: visible;
|
||||
position: static;
|
||||
white-space: inherit;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
/*
|
||||
* Hide visually and from screen readers, but maintain layout
|
||||
*/
|
||||
|
||||
.invisible {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
/*
|
||||
* Clearfix: contain floats
|
||||
*
|
||||
* For modern browsers
|
||||
* 1. The space content is one way to avoid an Opera bug when the
|
||||
* `contenteditable` attribute is included anywhere else in the document.
|
||||
* Otherwise it causes space to appear at the top and bottom of elements
|
||||
* that receive the `clearfix` class.
|
||||
* 2. The use of `table` rather than `block` is only necessary if using
|
||||
* `:before` to contain the top-margins of child elements.
|
||||
*/
|
||||
|
||||
.clearfix::before,
|
||||
.clearfix::after {
|
||||
content: " ";
|
||||
display: table;
|
||||
}
|
||||
|
||||
.clearfix::after {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
349
src/main/resources/META-INF/resources/css/normalize.css
vendored
Normal file
349
src/main/resources/META-INF/resources/css/normalize.css
vendored
Normal file
|
|
@ -0,0 +1,349 @@
|
|||
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
|
||||
|
||||
/* Document
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* 1. Correct the line height in all browsers.
|
||||
* 2. Prevent adjustments of font size after orientation changes in iOS.
|
||||
*/
|
||||
|
||||
html {
|
||||
line-height: 1.15; /* 1 */
|
||||
-webkit-text-size-adjust: 100%; /* 2 */
|
||||
}
|
||||
|
||||
/* Sections
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Remove the margin in all browsers.
|
||||
*/
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Render the `main` element consistently in IE.
|
||||
*/
|
||||
|
||||
main {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct the font size and margin on `h1` elements within `section` and
|
||||
* `article` contexts in Chrome, Firefox, and Safari.
|
||||
*/
|
||||
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
margin: 0.67em 0;
|
||||
}
|
||||
|
||||
/* Grouping content
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* 1. Add the correct box sizing in Firefox.
|
||||
* 2. Show the overflow in Edge and IE.
|
||||
*/
|
||||
|
||||
hr {
|
||||
box-sizing: content-box; /* 1 */
|
||||
height: 0; /* 1 */
|
||||
overflow: visible; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the inheritance and scaling of font size in all browsers.
|
||||
* 2. Correct the odd `em` font sizing in all browsers.
|
||||
*/
|
||||
|
||||
pre {
|
||||
font-family: monospace, monospace; /* 1 */
|
||||
font-size: 1em; /* 2 */
|
||||
}
|
||||
|
||||
/* Text-level semantics
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Remove the gray background on active links in IE 10.
|
||||
*/
|
||||
|
||||
a {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Remove the bottom border in Chrome 57-
|
||||
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
|
||||
*/
|
||||
|
||||
abbr[title] {
|
||||
border-bottom: none; /* 1 */
|
||||
text-decoration: underline; /* 2 */
|
||||
text-decoration: underline dotted; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct font weight in Chrome, Edge, and Safari.
|
||||
*/
|
||||
|
||||
b,
|
||||
strong {
|
||||
font-weight: bolder;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the inheritance and scaling of font size in all browsers.
|
||||
* 2. Correct the odd `em` font sizing in all browsers.
|
||||
*/
|
||||
|
||||
code,
|
||||
kbd,
|
||||
samp {
|
||||
font-family: monospace, monospace; /* 1 */
|
||||
font-size: 1em; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct font size in all browsers.
|
||||
*/
|
||||
|
||||
small {
|
||||
font-size: 80%;
|
||||
}
|
||||
|
||||
/**
|
||||
* Prevent `sub` and `sup` elements from affecting the line height in
|
||||
* all browsers.
|
||||
*/
|
||||
|
||||
sub,
|
||||
sup {
|
||||
font-size: 75%;
|
||||
line-height: 0;
|
||||
position: relative;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
sub {
|
||||
bottom: -0.25em;
|
||||
}
|
||||
|
||||
sup {
|
||||
top: -0.5em;
|
||||
}
|
||||
|
||||
/* Embedded content
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Remove the border on images inside links in IE 10.
|
||||
*/
|
||||
|
||||
img {
|
||||
border-style: none;
|
||||
}
|
||||
|
||||
/* Forms
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* 1. Change the font styles in all browsers.
|
||||
* 2. Remove the margin in Firefox and Safari.
|
||||
*/
|
||||
|
||||
button,
|
||||
input,
|
||||
optgroup,
|
||||
select,
|
||||
textarea {
|
||||
font-family: inherit; /* 1 */
|
||||
font-size: 100%; /* 1 */
|
||||
line-height: 1.15; /* 1 */
|
||||
margin: 0; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Show the overflow in IE.
|
||||
* 1. Show the overflow in Edge.
|
||||
*/
|
||||
|
||||
button,
|
||||
input { /* 1 */
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the inheritance of text transform in Edge, Firefox, and IE.
|
||||
* 1. Remove the inheritance of text transform in Firefox.
|
||||
*/
|
||||
|
||||
button,
|
||||
select { /* 1 */
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct the inability to style clickable types in iOS and Safari.
|
||||
*/
|
||||
|
||||
button,
|
||||
[type="button"],
|
||||
[type="reset"],
|
||||
[type="submit"] {
|
||||
-webkit-appearance: button;
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the inner border and padding in Firefox.
|
||||
*/
|
||||
|
||||
button::-moz-focus-inner,
|
||||
[type="button"]::-moz-focus-inner,
|
||||
[type="reset"]::-moz-focus-inner,
|
||||
[type="submit"]::-moz-focus-inner {
|
||||
border-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Restore the focus styles unset by the previous rule.
|
||||
*/
|
||||
|
||||
button:-moz-focusring,
|
||||
[type="button"]:-moz-focusring,
|
||||
[type="reset"]:-moz-focusring,
|
||||
[type="submit"]:-moz-focusring {
|
||||
outline: 1px dotted ButtonText;
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct the padding in Firefox.
|
||||
*/
|
||||
|
||||
fieldset {
|
||||
padding: 0.35em 0.75em 0.625em;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the text wrapping in Edge and IE.
|
||||
* 2. Correct the color inheritance from `fieldset` elements in IE.
|
||||
* 3. Remove the padding so developers are not caught out when they zero out
|
||||
* `fieldset` elements in all browsers.
|
||||
*/
|
||||
|
||||
legend {
|
||||
box-sizing: border-box; /* 1 */
|
||||
color: inherit; /* 2 */
|
||||
display: table; /* 1 */
|
||||
max-width: 100%; /* 1 */
|
||||
padding: 0; /* 3 */
|
||||
white-space: normal; /* 1 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct vertical alignment in Chrome, Firefox, and Opera.
|
||||
*/
|
||||
|
||||
progress {
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the default vertical scrollbar in IE 10+.
|
||||
*/
|
||||
|
||||
textarea {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Add the correct box sizing in IE 10.
|
||||
* 2. Remove the padding in IE 10.
|
||||
*/
|
||||
|
||||
[type="checkbox"],
|
||||
[type="radio"] {
|
||||
box-sizing: border-box; /* 1 */
|
||||
padding: 0; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct the cursor style of increment and decrement buttons in Chrome.
|
||||
*/
|
||||
|
||||
[type="number"]::-webkit-inner-spin-button,
|
||||
[type="number"]::-webkit-outer-spin-button {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the odd appearance in Chrome and Safari.
|
||||
* 2. Correct the outline style in Safari.
|
||||
*/
|
||||
|
||||
[type="search"] {
|
||||
-webkit-appearance: textfield; /* 1 */
|
||||
outline-offset: -2px; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the inner padding in Chrome and Safari on macOS.
|
||||
*/
|
||||
|
||||
[type="search"]::-webkit-search-decoration {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the inability to style clickable types in iOS and Safari.
|
||||
* 2. Change font properties to `inherit` in Safari.
|
||||
*/
|
||||
|
||||
::-webkit-file-upload-button {
|
||||
-webkit-appearance: button; /* 1 */
|
||||
font: inherit; /* 2 */
|
||||
}
|
||||
|
||||
/* Interactive
|
||||
========================================================================== */
|
||||
|
||||
/*
|
||||
* Add the correct display in Edge, IE 10+, and Firefox.
|
||||
*/
|
||||
|
||||
details {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/*
|
||||
* Add the correct display in all browsers.
|
||||
*/
|
||||
|
||||
summary {
|
||||
display: list-item;
|
||||
}
|
||||
|
||||
/* Misc
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Add the correct display in IE 10+.
|
||||
*/
|
||||
|
||||
template {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct display in IE 10.
|
||||
*/
|
||||
|
||||
[hidden] {
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -2,17 +2,15 @@
|
|||
<html lang="fr">
|
||||
<head>
|
||||
<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>
|
||||
<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="http://japon.kisai.info/"/>
|
||||
<script src="js/jquery-1.10.2.min.js"></script>
|
||||
<script src="js/lightbox-2.6.min.js"></script>
|
||||
<script src="js/jquery.tablesorter.min.js"></script>
|
||||
<link href="css/global.css" rel="stylesheet"/>
|
||||
<link href="css/lightbox.css" rel="stylesheet"/>
|
||||
<link href="js/themes/blue/style.css" rel="stylesheet"/>
|
||||
<base href="http://localhost:8080/"/>
|
||||
<link href="/css/normalize.css" rel="stylesheet"/>
|
||||
<link href="/css/main.css" rel="stylesheet"/>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
|
|
@ -20,33 +18,50 @@
|
|||
<h2>Votre renard préféré au Japon. Un âne au nom comme un jeu de mots vaseux squatte...</h2>
|
||||
</header>
|
||||
|
||||
<aside>
|
||||
<nav>
|
||||
<p><a href="accueil">Accueil</a></p>
|
||||
<nav>
|
||||
<section class="categories">
|
||||
<h1>Catégories</h1>
|
||||
<ul>
|
||||
{#for category in categories}
|
||||
<li><a href="category/{category.name}">{category.displayName}</a></li>
|
||||
<li><a href="category/{category.name}#content">{category.displayName}</a> ({category.imgCount()})</li>
|
||||
{/for}
|
||||
</ul>
|
||||
</section>
|
||||
<section class="places">
|
||||
<h1>Lieux</h1>
|
||||
<ul>
|
||||
{#for place in places}
|
||||
<li><a href="place/{place.name}">{place.displayName}</a></li>
|
||||
<li><a href="place/{place.name}#content">{place.displayName}</a> ({place.imgCount()})</li>
|
||||
{/for}
|
||||
</ul>
|
||||
</nav>
|
||||
<div>
|
||||
<h1>Informations de copyright</h1>
|
||||
<p>Toutes les images sont sous licence <a href="http://creativecommons.org/licenses/by-nc-nd/3.0/"
|
||||
title="Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported Licence"><img
|
||||
src="http://i.creativecommons.org/l/by-nc-nd/3.0/88x31.png"
|
||||
alt="Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported Licence"></a></p>
|
||||
<p>Merci de me contacter pour toute autre utilisation.</p>
|
||||
</div>
|
||||
</aside>
|
||||
<div id="content">
|
||||
</section>
|
||||
</nav>
|
||||
|
||||
<main id="content">
|
||||
{#insert}No body!{/insert}
|
||||
</div>
|
||||
</main>
|
||||
<footer>
|
||||
<section>
|
||||
<h1>Mentions légales</h1>
|
||||
<p>Les mentions légales <a href="/mentionslegales/#content">sont disponibles ici</a>.</p>
|
||||
<p>Le site et son contenu sont intégralement et librement réutilisables, y compris pour des projets
|
||||
commerciaux <a href="/licences/#content">selon les conditions listées ici</a>.</p>
|
||||
</section>
|
||||
<section>
|
||||
<h1>Contenu</h1>
|
||||
<p><a rel="license" href="https://creativecommons.org/licenses/by/4.0/">
|
||||
<img src="/images/cc-by.png" alt="Logo CC BY 4.0">
|
||||
</a>
|
||||
Toutes les images et textes du site sont mis à disposition par SpaceFox selon les termes de la <a
|
||||
rel="license" href="http://creativecommons.org/licenses/by/4.0/">Licence Creative Commons
|
||||
Attribution 4.0 International</a>.</p>
|
||||
</section>
|
||||
<section>
|
||||
<h1>Technique</h1>
|
||||
<p>Le code source du site est mis à disposition par SpaceFox selon les termes de <a
|
||||
href="https://opensource.org/licenses/MIT">la licence MIT</a>. Le code source est disponible <a
|
||||
href="https://github.com/SpaceFox/japon.spacefox.fr">sur Github</a>.</p>
|
||||
</section>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,10 @@
|
|||
{#include base}
|
||||
{#title}{page.title}{/title}
|
||||
<h1>{page.title}</h1>
|
||||
<h2>Le {page.dateHuman} à <a href="place/{page.place.name}">{page.place.displayName}</a></h2>
|
||||
<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>
|
||||
</header>
|
||||
{#for element in page.content}
|
||||
{element.render().raw}
|
||||
{/for}
|
||||
|
|
|
|||
65
src/main/resources/templates/licences.qute.html
Normal file
65
src/main/resources/templates/licences.qute.html
Normal file
|
|
@ -0,0 +1,65 @@
|
|||
{#include base}
|
||||
{#title}Licences{/title}
|
||||
<header><h1>Licences</h1></header>
|
||||
<section>
|
||||
<h2 id="réutiliser-le-contenu-du-site">Réutiliser le contenu du site</h2>
|
||||
<p>Ceci concerne tout le contenu du site : photographies et textes.</p>
|
||||
<h3 id="vous-êtes-autorisé-à-">Vous êtes autorisé à :</h3>
|
||||
<ul>
|
||||
<li><strong>Partager</strong> — copier, distribuer et communiquer le matériel par tous moyens et sous tous
|
||||
formats
|
||||
</li>
|
||||
<li><strong>Adapter</strong> — remixer, transformer et créer à partir du matériel pour toute utilisation, y
|
||||
compris commerciale.
|
||||

|
||||
L’Offrant ne peut retirer les autorisations concédées par la licence tant que vous appliquez les
|
||||
termes de cette licence.
|
||||
</li>
|
||||
</ul>
|
||||
<h3 id="selon-les-conditions-suivantes-">Selon les conditions suivantes :</h3>
|
||||
<ul>
|
||||
<li><strong>Attribution</strong> — Vous devez créditer l'Œuvre, intégrer un lien vers la licence et indiquer
|
||||
si des modifications ont
|
||||
été effectuées à l'Œuvre. Vous devez indiquer ces informations par tous les moyens raisonnables, sans
|
||||
toutefois
|
||||
suggérer que l’Offrant vous soutient ou soutient la façon dont vous avez utilisé son Œuvre.
|
||||
</li>
|
||||
<li><strong>Pas de restrictions complémentaires</strong> — Vous n'êtes pas autorisé à appliquer des
|
||||
conditions légales ou des mesures
|
||||
techniques qui restreindraient légalement autrui à utiliser l'Œuvre dans les conditions décrites par la
|
||||
licence.
|
||||
</li>
|
||||
</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’exemple de réutilisation"></p>
|
||||
<p>« <a href="/d5600_002320/">Tamia pressé</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>
|
||||
<li>Le titre de la photo,</li>
|
||||
<li>L’auteur</li>
|
||||
<li>La source (le lien derrière le titre)</li>
|
||||
<li>La licence (avec un lien vers le résumé)</li>
|
||||
</ol>
|
||||
<p>C’est simple et court, pas besoin de faire plus compliqué !</p>
|
||||
<h3 id="resources">Resources</h3>
|
||||
<ol>
|
||||
<li><a href="https://creativecommons.org/licenses/by/4.0/deed.fr">Le résumé de la licence, sur le site
|
||||
Creative Commons</a></li>
|
||||
<li><a href="https://creativecommons.org/licenses/by/4.0/legalcode.fr">Le texte intégral de la licence, sur
|
||||
le site Creative Commons</a></li>
|
||||
<li><a href="https://wiki.creativecommons.org/wiki/Best_practices_for_attribution">Comment me créditer
|
||||
correctement</a> (en anglais)
|
||||
</li>
|
||||
</ol>
|
||||
</section>
|
||||
<section>
|
||||
<h2 id="réutiliser-le-code-source-du-site">Réutiliser le code source du site</h2>
|
||||
<p>Le code source du site est mis à disposition selon les termes de <a
|
||||
href="https://github.com/SpaceFox/japon.spacefox.fr/blob/master/LICENSE.md">la licence MIT</a>.
|
||||
Il est disponible <a href="https://github.com/SpaceFox/japon.spacefox.fr">sur Github</a>.</p>
|
||||
<p>Vous pouvez donc utiliser, copier, modifier, publier, distribuer, vendre et incorporer le code source du site
|
||||
dans une
|
||||
autre licence tant que les notices de licence et de copyright sont intégrées dans toutes les copies.</p>
|
||||
</section>
|
||||
{/include}
|
||||
|
|
@ -1,30 +1,17 @@
|
|||
{#include base}
|
||||
{#title}{title}{/title}
|
||||
<h1>{title}</h1>
|
||||
<table id="menuTable" class="tablesorter">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Page</th>
|
||||
<th>Date</th>
|
||||
<th>Lieu</th>
|
||||
<th>Catégorie</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<header>
|
||||
<h1>{title}</h1>
|
||||
</header>
|
||||
{#for page in pages}
|
||||
<tr>
|
||||
<td><a href="page/{page.name}"><strong>{page.title}</strong></a></td>
|
||||
<td><span class="hidden">{page.timestamp}</span>{page.dateHuman}</td>
|
||||
<td><a href="place/{page.place.name}">{page.place.displayName}</a></td>
|
||||
<td><a href="category/{page.category.name}">{page.category.displayName}</a></td>
|
||||
</tr>
|
||||
<article>
|
||||
<a class="title" href="page/{page.name}#content">{page.title}</a>
|
||||
<div class="imgCount">{page.imgCount} images</div>
|
||||
<div class="date">le
|
||||
<time datetime="{page.timestamp}">{page.dateHuman}</time>
|
||||
</div>
|
||||
<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}
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<script type="text/javascript">
|
||||
$(function () {
|
||||
$("#menuTable").tablesorter();
|
||||
});
|
||||
</script>
|
||||
{/include}
|
||||
|
|
@ -1,33 +1,20 @@
|
|||
{#include base}
|
||||
{#title}{title}{/title}
|
||||
<h1>{title}</h1>
|
||||
<table id="menuTable" class="tablesorter">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Page</th>
|
||||
<th>Date</th>
|
||||
<th>Lieu</th>
|
||||
<th>Catégorie</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{#for page in pages}
|
||||
<tr>
|
||||
<td><a href="page/{page.name}"><strong>{page.title}</strong></a></td>
|
||||
<td><span class="hidden">{page.timestamp}</span>{page.dateHuman}</td>
|
||||
<td><a href="place/{page.place.name}">{page.place.displayName}</a></td>
|
||||
<td><a href="category/{page.category.name}">{page.category.displayName}</a></td>
|
||||
</tr>
|
||||
{/for}
|
||||
</tbody>
|
||||
</table>
|
||||
<header>
|
||||
<h1>{title}</h1>
|
||||
</header>
|
||||
{#for page in pages}
|
||||
<article>
|
||||
<a class="title" href="page/{page.name}#content">{page.title}</a>
|
||||
<div class="imgCount">{page.imgCount} images</div>
|
||||
<div class="date">le
|
||||
<time datetime="{page.timestamp}">{page.dateHuman}</time>
|
||||
</div>
|
||||
<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"
|
||||
src="{place.iframeSrc.raw}"></iframe>
|
||||
<br/><small><a href="{place.link.raw}" style="color:#0000FF;text-align:left">Agrandir le plan</a></small>
|
||||
|
||||
<script type="text/javascript">
|
||||
$(function () {
|
||||
$("#menuTable").tablesorter();
|
||||
});
|
||||
</script>
|
||||
<p><a href="{place.link.raw}" style="color:#0000FF;text-align:left">Agrandir le plan</a></p>
|
||||
{/include}
|
||||
20
src/main/resources/templates/mentionslegales.qute.html
Normal file
20
src/main/resources/templates/mentionslegales.qute.html
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
{#include base}
|
||||
{#title}Mentions légales{/title}
|
||||
<header><h1>Mentions légales</h1></header>
|
||||
<section>
|
||||
<h2 id="hébergement">Hébergement</h2>
|
||||
<p>PulseHeberg<br>
|
||||
9 Boulevard de Strasbourg<br>
|
||||
83000 Toulon<br>
|
||||
France</p>
|
||||
<p><a href="https://pulseheberg.com">https://pulseheberg.com</a></p></section>
|
||||
<section>
|
||||
<h2 id="cookies">Cookies</h2>
|
||||
<p>Ce site n’utilise pas de cookies à d’autres fins que purement techniques.</p>
|
||||
<p>Il n’utilise aucun système <a
|
||||
href="https://www.cnil.fr/fr/cookies-comment-mettre-mon-site-web-en-conformite">de
|
||||
publicité ciblée, de réseaux sociaux ou de mesure
|
||||
d’audience</a> et donc ne nécessite pas de
|
||||
bandeau d’information qui permettrait de s’opposer à ces cookies.</p>
|
||||
</section>
|
||||
{/include}
|
||||
Loading…
Add table
Reference in a new issue