commit 3caa189ff0c2b5a3afbe6f06ad42c75ff227018d Author: Hugo Soucy <hugo@soucy.cc> Date: Sun, 7 Feb 2021 15:43:25 -0500 This is the first self-hosted commit. Diffstat:
64 files changed, 1558 insertions(+), 0 deletions(-)
diff --git a/.editorconfig b/.editorconfig @@ -0,0 +1,16 @@ +# EditorConfig <http://EditorConfig.org> + +root = true + +# Unix-style newlines with a newline ending every file +[*] +charset = utf-8 +end_of_line = lf +insert_final_newline = true +indent_style = space +indent_size = 4 +trim_trailing_whitespace = true + +# 2 space indentation (CSS, YML, and templates HTML big family) +[*.{css,yml,xml,xhtml,html,vm,ftl,mustache,twig,hbs,yaml,lua,json}] +indent_size = 2 diff --git a/CHANGELOG.md b/CHANGELOG.md @@ -0,0 +1,5 @@ +# v0.1.0 +## 08/02/2020 + +1. [](#new) + * ChangeLog started... diff --git a/LICENSE b/LICENSE @@ -0,0 +1,21 @@ +The MIT License (MIT) + +Copyright (c) 2020 Hugo Soucy + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. diff --git a/README.md b/README.md @@ -0,0 +1,13 @@ +# Tri Theme + +The **Tri** Theme is for [Grav CMS](http://github.com/getgrav/grav). This README.md file should be modified to describe the features, installation, configuration, and general usage of this theme. + +## Description + +Theme of the Théâtre Rude Ingénierie website + +## Running Grav with the Built-in PHP Webserver Using `router.php` + +From the grav folder run: + +`php -S localhost:8000 system/router.php` diff --git a/blueprints.yaml b/blueprints.yaml @@ -0,0 +1,32 @@ +name: Tri +slug: tri +type: theme +version: 0.1.0 +description: Theme for the TRI web site +icon: rebel +author: + name: Hugo Soucy + email: hugo@soucy.cc +homepage: https://github.com/hs0ucy/grav-theme-tri +demo: http://demo.yoursite.com +keywords: grav, theme, etc +bugs: https://github.com/hs0ucy/grav-theme-tri/issues +readme: https://github.com/hs0ucy/grav-theme-tri/blob/develop/README.md +license: MIT + +dependencies: + - { name: grav, version: '>=1.6.0' } + +form: + validation: loose + fields: + dropdown.enabled: + type: toggle + label: Dropdown in Menu + highlight: 1 + default: 1 + options: + 1: PLUGIN_ADMIN.ENABLED + 0: PLUGIN_ADMIN.DISABLED + validate: + type: bool diff --git a/blueprints/event.yaml b/blueprints/event.yaml @@ -0,0 +1,111 @@ +title: Event +'@extends': + type: default + context: blueprints://pages + +form: + fields: + tabs: + type: tabs + active: 1 + + fields: + content: + fields: + header.project_event: + ordering@: 1 + type: pages + label: Project associates with this event + show_all: true + show_modular: false + show_root: false + size: large + header.event_place: + ordering@: content + type: fieldset + title: Event place + collapsed: false + collapsible: false + fields: + header.event_place.name: + type: text + label: Event place name + size: medium + placeholder: Ex. Théâtre Périscope + header.event_place.url: + type: text + label: Event place URL + size: medium + placeholder: Ex. https://www.theatreperiscope.qc.ca/ + validate: + type: url + header.event_place.url_ticket: + type: text + label: Buy a ticket here + size: medium + placeholder: Ex. https://www.ticketmaster.ca/event/3100531CA0EE3F60 + validate: + type: url + header.event_dates: + ordering@: content + type: fieldset + title: Dates of the event + collapsed: false + collapsible: false + fields: + header.event_dates.start_date: + type: datetime + label: Date début de l'événement + toggleable: false + validate: + required: false + header.event_dates.end_date: + type: datetime + label: Date de fin + toggleable: false + validate: + required: false + header.event_dates.duration: + type: text + label: Durée en heures et minutes + placeholder: Ex.: 01:45 + help: Doit être au format 00:00 + validate: + pattern: '^((?:[01]\d|2[0-3]):[0-5]\d$)' + header.event_dates.status: + type: toggle + label: Status + highlight: 1 + default: 1 + options: + 1: 'Confirmé' + 0: 'Annulé' + validate: + type: bool + header.event_dates.other_dates: + name: buttons + type: list + label: Autres dates + style: vertical + fields: + .date: + type: datetime + label: Autre + toggleable: true + .status: + type: toggle + label: Status + highlight: 1 + default: 1 + options: + 1: 'Confirmé' + 0: 'Annulé' + validate: + type: bool + header.event_credits_array: + ordering@: header.event_in_time + type: array + label: Crédits + placeholder_key: Photo + placeholder_value: Pierre Jean-Jacques + style: vertical diff --git a/blueprints/project.yaml b/blueprints/project.yaml @@ -0,0 +1,26 @@ +title: Project +'@extends': + type: default + context: blueprints://pages + +form: + fields: + tabs: + type: tabs + active: 1 + + fields: + content: + fields: + header.project_credits_array: + ordering@: content + type: array + label: Crédits + placeholder_key: Photo + placeholder_value: Pierre Jean-Jacques + style: vertical + content: + type: markdown + label: Content of the project + validate: + type: textarea diff --git a/css/styles.css b/css/styles.css @@ -0,0 +1,288 @@ +:root { + --base-fontfamily: 'Rubik', sans-serif; + --base-fontsize: 16; + --base-lineheight: 1.45; + --grid-columns: $grid-columns; + --grid-gutter: calc(1rem * (var(--base-fontsize) / var(--base-fontsize))); + --grid-maxwidth: 1140px; } + +:root { + --base-red: #e31d25; + --base-darkest: #000000; + --base-brightest: #ffffff; + --base-brightest-grey: #eeeeee; + --base-bg: var(--base-brightest); + --base-fg: var(--base-darkest); + --base-link: var(--base-red); } + +@font-face { + font-family: 'Rubik'; + src: url("../fonts/rubik/rubik-mediumitalic-webfont.woff2") format("woff2"), url("../fonts/rubik/rubik-mediumitalic-webfont.woff") format("woff"); + font-weight: 700; + font-style: italic; } + +@font-face { + font-family: 'Rubik'; + src: url("../fonts/rubik/rubik-medium-webfont.woff2") format("woff2"), url("../fonts/rubik/rubik-medium-webfont.woff") format("woff"); + font-weight: 700; + font-style: normal; } + +@font-face { + font-family: 'Rubik'; + src: url("../fonts/rubik/rubik-italic-webfont.woff2") format("woff2"), url("../fonts/rubik/rubik-italic-webfont.woff") format("woff"); + font-weight: 400; + font-style: italic; } + +@font-face { + font-family: 'Rubik'; + src: url("../fonts/rubik/rubik-regular-webfont.woff2") format("woff2"), url("../fonts/rubik/rubik-regular-webfont.woff") format("woff"); + font-weight: 400; + font-style: normal; } + +html, +body { + font-family: var(--base-fontfamily); + height: 100%; + line-height: var(--base-lineheight); + min-height: 100%; } + +body { + margin: 0; + padding: 0; } + body > * { + box-sizing: border-box; + margin: 0 auto; + max-width: var(--grid-maxwidth); + padding: 0 2rem; } + body > * + * { + margin-top: 2.5rem; } + +a { + color: var(--base-link); } + a:focus, a:hover, a:visited { + text-decoration: none; } + a, a:active { + text-decoration: underline; } + +.visuallyhidden { + border: 0; + clip: rect(0 0 0 0); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; } + +.visibilityhidden { + visibility: hidden; } + +[hidden] { + display: none !important; } + +h1, +h2, +h3 { + font-weight: normal; } + +h1 { + background: var(--base-darkest); + color: var(--base-brightest); + font-size: 2rem; + line-height: 1; + margin: 0; + padding: 0.75rem 1rem; + max-width: 30rem; } + .suptitle + h1 { + margin: -0.75rem 0 0; + padding-top: 1rem; } + +img { + height: auto; + max-width: 100%; + width: auto; } + +figure { + margin: 0; } + +nav ol, +nav ul { + list-style-type: none; + margin: 0; + padding: 0; } + +.photo { + position: relative; } + .photo img { + display: block; } + .photo__credit { + background: var(--base-darkest); + bottom: 0; + color: var(--base-brightest); + font-size: 0.6875rem; + left: 0; + opacity: 0.6; + padding: 0.25em 0.5em; + position: absolute; } + +.suptitle { + background: var(--base-red); + color: var(--base-brightest); + display: inline-block; + font-size: 0.75rem; + line-height: 1; + padding: 0.5rem; + position: relative; + text-transform: uppercase; + z-index: 1; } + +.logo { + display: inline-block; + max-width: 520px; + margin: 0 0 1.5rem; + width: auto; } + @media screen and (min-width: 48rem) { + .logo { + margin-right: 3rem; } } + .logo img { + max-width: 100%; + width: auto; } + +.grid { + display: grid; + grid-gap: 1rem; + grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); } + .grid > * { + margin-left: auto; + margin-right: auto; + max-width: 25rem; } + .grid > * + * { + margin-top: 1rem; } + +@supports (display: grid) { + .grid > * { + margin: 0; + max-width: unset; } } + +.card { + background: var(--base-brightest); + border: 1px solid var(--base-darkest); + display: flex; + flex-direction: column; + position: relative; } + .card:focus-within, .card:hover { + box-shadow: 0 0 0 0.25rem var(--base-red); + border-color: var(--base-red); } + .card__body { + display: flex; + flex: 1 0 auto; + flex-direction: column; + padding: 1rem; } + .card__body > * + * { + margin-top: 0.75rem; } + .card__title { + font-size: 1rem; + font-weight: 700; + margin-bottom: 0; } + .card__title a { + color: inherit; + outline: none; + text-decoration: none; } + .card__title a::after { + bottom: 0; + content: ''; + left: 0; + position: absolute; + right: 0; + top: 0; } + .card__img { + background: var(--base-brightest-grey); + clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 1rem)); + height: 9.375rem; + order: -1; } + .card__img img { + height: 100%; + object-fit: cover; + width: 100%; } + +.header-banner { + display: flex; + flex-wrap: wrap; + margin-top: 2.5rem; } + +.footer-banner { + align-items: center; + display: flex; + flex-wrap: wrap; + justify-content: space-between; } + +.nav-alpha { + flex: 1 1 auto; + margin: 0 0 0 auto; } + .nav-alpha__list { + columns: 2 auto; } + .nav-alpha__item { + font-size: 0.875rem; } + .nav-alpha__link, .nav-alpha__sublink { + display: block; + padding: 0.25em 0; } + .nav-alpha__link.is-current, .nav-alpha__sublink.is-current { + text-decoration: none; } + .nav-alpha__link { + color: var(--base-darkest); + text-transform: uppercase; } + +.default > * + * { + margin-top: 2.5rem; } + +.default-list > * + * { + margin: 2.5rem 0 0; } + header + .default-list > * + * { + margin-top: 0; } + +.default-list__list { + padding: 0; + list-style-type: none; } + +.project > * + * { + margin-top: 2.5rem; } + +.project__credits dl > * + * { + margin-top: 1rem; } + +.project__credits dd { + margin-left: 0; } + +.project__aside > * + * { + margin-top: 2.5rem; } + +.project__mosaic { + display: grid; + grid-gap: 1rem; + grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); } + +.project-list__list { + margin: 0; + padding: 0; + list-style-type: none; } + +.event > * + * { + margin-top: 2.5rem; } + +.event__in-time time { + font-weight: 700; } + +.event__metas__item { + margin-left: 0; } + +.event-list__list { + margin: 0; + padding: 0; + list-style-type: none; } + +.event-list__datetime { + font-size: 1.5rem; } + +.event-list__datetime { + order: -1; + margin-top: 0; } diff --git a/fonts/rubik/rubik-bold-webfont.woff b/fonts/rubik/rubik-bold-webfont.woff Binary files differ. diff --git a/fonts/rubik/rubik-bold-webfont.woff2 b/fonts/rubik/rubik-bold-webfont.woff2 Binary files differ. diff --git a/fonts/rubik/rubik-italic-webfont.woff b/fonts/rubik/rubik-italic-webfont.woff Binary files differ. diff --git a/fonts/rubik/rubik-italic-webfont.woff2 b/fonts/rubik/rubik-italic-webfont.woff2 Binary files differ. diff --git a/fonts/rubik/rubik-medium-webfont.woff b/fonts/rubik/rubik-medium-webfont.woff Binary files differ. diff --git a/fonts/rubik/rubik-medium-webfont.woff2 b/fonts/rubik/rubik-medium-webfont.woff2 Binary files differ. diff --git a/fonts/rubik/rubik-mediumitalic-webfont.woff b/fonts/rubik/rubik-mediumitalic-webfont.woff Binary files differ. diff --git a/fonts/rubik/rubik-mediumitalic-webfont.woff2 b/fonts/rubik/rubik-mediumitalic-webfont.woff2 Binary files differ. diff --git a/fonts/rubik/rubik-regular-webfont.woff b/fonts/rubik/rubik-regular-webfont.woff Binary files differ. diff --git a/fonts/rubik/rubik-regular-webfont.woff2 b/fonts/rubik/rubik-regular-webfont.woff2 Binary files differ. diff --git a/images/logo.png b/images/logo.png Binary files differ. diff --git a/images/tri-logo.svg b/images/tri-logo.svg @@ -0,0 +1,2 @@ +<?xml version="1.0" encoding="UTF-8" standalone="no"?> +<svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 765 90" height="90" width="765" xml:space="preserve" version="1.1" id="svg2"><metadata id="metadata8"><rdf:RDF><cc:Work rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/></cc:Work></rdf:RDF></metadata><defs id="defs6"/><g transform="matrix(1.25,0,0,-1.25,0,90)" id="g10"><g transform="scale(0.1,0.1)" id="g12"><path id="path14" style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none" d="m 0,0 6120,0 0,720 L 0,720 0,0 Z"/><path id="path16" style="fill:#e31d25;fill-opacity:1;fill-rule:nonzero;stroke:none" d="m 102.016,520.188 -0.207,-70.875 6.398,0 -0.32,44.125 100.718,0.14 0,-237.156 c 0,-17.883 -1.726,-29.336 -5.175,-34.356 -5.649,-8.156 -15.219,-12.238 -28.711,-12.238 l -11.293,0 0,-10.144 134.308,0 0,10.144 -43.957,-0.019 0,290.382 44.946,0 c 13.175,0 23.8,-2.16 31.882,-6.476 8.079,-4.317 14.547,-11.02 19.411,-20.117 2.98,-5.645 5.332,-15.059 7.062,-28.231 l 8.942,0 -3.532,74.821 -260.472,0"/><path id="path18" style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none" d="m 473.918,289.789 129.145,0 0,-72.762 c 0,-2.578 -0.723,-4.425 -2.172,-5.543 -1.442,-1.129 -3.129,-1.683 -5.059,-1.683 l 0,-10.117 52.289,0 0,216.367 -52.289,0 0,-11.571 c 1.93,0 3.617,-0.566 5.059,-1.683 1.449,-1.133 2.172,-2.977 2.172,-5.547 l 0,-67.941 -129.145,0 0,67.941 c 0,2.57 0.719,4.414 2.168,5.547 1.441,1.117 3.129,1.683 5.059,1.683 l 0,11.571 -51.446,0 0,-216.367 51.446,0 0,10.117 c -1.93,0 -3.618,0.554 -5.059,1.683 -1.449,1.118 -2.168,2.965 -2.168,5.543 l 0,72.762"/><path id="path20" style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none" d="m 933.633,368.34 0,47.711 -187.516,0 0,-216.367 191.856,0 0,46.738 -8.676,0 c 0,-2.891 -1.285,-5.227 -3.852,-6.988 -2.578,-1.766 -5.789,-2.653 -9.64,-2.653 l -123.367,0 0,56.867 70.359,0 c 6.422,0 11.398,-0.41 14.937,-1.207 3.532,-0.804 4.821,-2.972 3.852,-6.503 l 9.641,0 0,51.078 -8.672,0 c 0,-3.539 -1.289,-5.703 -3.86,-6.504 -2.574,-0.809 -6.586,-1.203 -12.047,-1.203 l -74.21,0 0,48.187 117.585,0 c 9.954,0 14.934,-3.058 14.934,-9.156 l 8.676,0"/><path id="path22" style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none" d="m 974.594,199.684 64.576,0 0,10.117 c -2.9,0 -5.15,0.312 -6.75,0.961 -1.61,0.64 -2.41,2.246 -2.41,4.82 0,1.602 0.4,3.445 1.21,5.535 0.8,2.09 1.84,4.414 3.13,6.992 l 13.49,26.028 103.13,0 13.01,-27.473 c 0.96,-2.578 1.76,-4.66 2.4,-6.266 0.65,-1.609 0.97,-3.371 0.97,-5.296 0,-2.579 -0.89,-4.34 -2.65,-5.301 -1.77,-0.969 -3.45,-1.449 -5.06,-1.449 l 0,-8.668 68.43,0 0,10.117 c -2.25,0.637 -4.34,1.601 -6.27,2.89 -1.92,1.278 -3.69,3.368 -5.3,6.262 l -78.07,163.844 c -1.6,3.531 -3.12,6.66 -4.57,9.394 -1.44,2.727 -2.17,5.059 -2.17,6.993 0,2.238 0.56,3.527 1.68,3.851 1.13,0.32 2.17,0.797 3.14,1.445 l 0,11.571 -72.76,0 0,-11.571 c 0.96,-0.648 1.84,-1.203 2.64,-1.683 0.8,-0.488 1.21,-1.688 1.21,-3.613 0,-2.579 -0.56,-5.231 -1.69,-7.954 -1.13,-2.738 -2.65,-6.347 -4.58,-10.843 L 989.531,223.773 c -1.285,-2.578 -3.129,-5.378 -5.543,-8.437 -2.41,-3.055 -5.535,-4.898 -9.394,-5.535 l 0,-10.117 z m 87.706,90.105 34.21,80.957 39.03,-80.957 -73.24,0"/><path id="path24" style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none" d="m 1325.41,199.684 62.16,0 0,10.117 c -5.78,0 -8.67,2.406 -8.67,7.226 l 0,160.469 62.64,0 c 2.57,0 4.98,-0.644 7.23,-1.926 2.25,-1.289 3.38,-3.379 3.38,-6.269 l 8.68,0 0,46.75 -210.11,0 0,-46.75 8.67,0 c 0,2.89 1.12,4.98 3.38,6.269 2.23,1.282 4.65,1.926 7.22,1.926 l 62.65,0 0,-160.469 c 0,-2.578 -0.81,-4.425 -2.41,-5.543 -1.61,-1.129 -3.21,-1.683 -4.82,-1.683 l 0,-10.117"/><path id="path26" style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none" d="m 1523.61,416.051 0,-216.367 54.31,0 0,10.117 c -1.93,0 -3.94,0.554 -6.03,1.683 -2.09,1.118 -3.13,2.965 -3.13,5.543 l 0,68.911 66.99,0 38.06,-56.86 c 4.83,-6.754 7.23,-11.734 7.23,-14.941 0,-2.891 -2.09,-4.336 -6.26,-4.336 l 0,-10.117 73.73,0 0,10.117 c -3.54,0.961 -6.83,2.324 -9.88,4.094 -3.06,1.757 -5.87,4.41 -8.43,7.945 l -47.23,68.918 c 6.75,1.601 13.33,3.93 19.76,6.98 6.43,3.059 12.28,7.067 17.59,12.051 5.3,4.977 9.55,10.84 12.77,17.59 3.2,6.746 4.82,14.457 4.82,23.133 0,22.804 -8.04,38.945 -24.1,48.429 -16.07,9.473 -38.39,17.11 -66.98,17.11 l -123.22,0 z m 46.12,-94.453 0,55.898 76.13,0 c 16.39,0 28.35,-2.336 35.91,-6.992 7.54,-4.652 11.32,-11.008 11.32,-19.035 0,-19.922 -15.74,-29.871 -47.23,-29.871 l -76.13,0"/><path id="path28" style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none" d="m 2004.87,368.34 0,47.711 -187.24,0 0,-216.367 191.58,0 0,46.738 -8.68,0 c 0,-2.891 -1.29,-5.227 -3.85,-6.988 -2.58,-1.766 -5.78,-2.653 -9.64,-2.653 l -123.36,0 0,56.867 70.35,0 c 6.42,0 11.4,-0.41 14.94,-1.207 3.53,-0.804 4.82,-2.972 3.86,-6.503 l 9.64,0 0,51.078 -8.68,0 c 0,-3.539 -1.29,-5.703 -3.85,-6.504 -2.58,-0.809 -6.6,-1.203 -12.05,-1.203 l -74.21,0 0,48.187 117.57,0 c 9.97,0 14.95,-3.058 14.95,-9.156 l 8.67,0"/><path id="path30" style="fill:#e31d25;fill-opacity:1;fill-rule:nonzero;stroke:none" d="m 2284.63,495.508 c 0,0 104.72,14.996 105.18,-60.492 0.48,-76.739 -105.18,-63.84 -105.18,-63.84 l 0,124.332 z m 199.23,-280.414 c -10.19,4.668 -21.31,4.422 -53.81,49.801 l -65.88,91.527 c 26.82,5.957 46.63,16.156 59.41,30.586 12.78,14.433 19.17,31.453 19.17,51.062 0,18.352 -5.61,34.153 -16.82,47.414 -11.22,13.25 -24.86,22.352 -40.94,27.293 -16.08,4.942 -41.06,7.411 -74.94,7.411 l -110.12,0 0,-9.696 39.76,0.012 0,-252.91 c 0,-18.199 -1.64,-29.727 -4.94,-34.59 -5.8,-8.785 -15.45,-13.176 -28.94,-13.176 l -12,0 0,-10.144 120.39,0 0,10.144 -29.72,0 0.15,140.477 c 2.51,-0.164 4.95,-0.278 7.3,-0.36 2.35,-0.078 4.55,-0.109 6.59,-0.109 5.02,0 11.53,0.148 19.53,0.469 l 108,-150.621 57.86,0 -0.05,15.41"/><path id="path32" style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none" d="m 2611.56,416.051 -54.96,0 0.03,-140.715 c 0,-9.961 2.24,-19.52 6.74,-28.672 4.5,-9.16 11.33,-17.273 20.48,-24.34 9.16,-7.066 20.88,-12.605 35.18,-16.621 14.3,-4.019 31.08,-6.019 50.36,-6.019 19.28,0 36.06,2 50.36,6.019 14.29,4.016 26.02,9.555 35.18,16.621 9.15,7.067 15.97,15.18 20.48,24.34 4.49,9.152 6.74,18.711 6.74,28.672 l -0.09,140.715 -56.29,0 0,-11.571 c 8.02,0 12.05,-2.406 12.05,-7.23 l 0,-110.352 c 0,-15.418 -5.63,-27.793 -16.87,-37.097 -11.25,-9.328 -28.43,-13.985 -51.56,-13.985 -23.14,0 -40.32,4.657 -51.56,13.985 -11.25,9.304 -16.87,21.679 -16.87,37.097 l 0,110.352 c 0,4.824 3.53,7.23 10.6,7.23 l 0,11.571"/><path id="path34" style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none" d="m 2871.45,199.684 125.14,0 c 18.95,0 35.01,4.492 48.19,10.593 13.16,6.102 23.93,14.055 32.29,23.86 8.35,9.793 14.45,21.035 18.31,33.73 3.85,12.684 5.78,25.781 5.78,39.274 0,13.488 -2.01,26.574 -6.03,39.269 -4.02,12.692 -10.28,23.938 -18.79,33.742 -8.51,9.793 -19.51,17.743 -33.01,23.848 -13.49,6.098 -29.72,12.051 -48.67,12.051 l -123.21,0 0,-216.367 z m 46.59,37.097 0,140.715 62.65,0 c 9.95,0 19.43,-0.566 28.43,-1.683 8.99,-1.133 16.86,-4.02 23.61,-8.68 6.75,-4.656 12.12,-11.563 16.14,-20.723 4.02,-9.148 6.03,-21.765 6.03,-37.82 0,-16.074 -2.01,-28.844 -6.03,-38.317 -4.02,-9.476 -9.39,-16.703 -16.14,-21.683 -6.75,-4.985 -14.62,-8.192 -23.61,-9.641 -9,-1.445 -18.48,-2.168 -28.43,-2.168 l -62.65,0"/><path id="path36" style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none" d="m 3357.04,368.34 0,47.711 -185.87,0 0,-216.367 190.21,0 0,46.738 -8.68,0 c 0,-2.891 -1.29,-5.227 -3.85,-6.988 -2.58,-1.766 -5.79,-2.653 -9.64,-2.653 l -123.37,0 0,56.867 70.36,0 c 6.42,0 11.4,-0.41 14.94,-1.207 3.53,-0.804 4.82,-2.972 3.86,-6.503 l 9.63,0 0,51.078 -8.67,0 c 0,-3.539 -1.29,-5.703 -3.86,-6.504 -2.57,-0.809 -6.59,-1.203 -12.05,-1.203 l -74.21,0 0,48.187 117.58,0 c 9.96,0 14.94,-3.058 14.94,-9.156 l 8.68,0"/><path id="path38" style="fill:#e31d25;fill-opacity:1;fill-rule:nonzero;stroke:none" d="m 3640.57,209.809 0,253.906 c 0,19.14 1.96,31.219 5.88,36.242 5.96,7.676 15.45,11.523 28.47,11.523 l 11.53,0 0,8.708 -128.26,0 0,-8.708 37.21,-0.097 0,-253.789 c 0,-19.137 -1.89,-31.211 -5.66,-36.239 -5.96,-7.683 -15.53,-11.527 -28.7,-11.527 l -11.3,0 0,-10.144 129.07,0 0,10.144 -38.24,-0.019"/><path id="path40" style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none" d="m 3744.44,199.684 52.08,0 0,10.117 c -6.74,0 -10.12,2.406 -10.12,7.226 l 0,140.223 119.51,-127.215 c 3.85,-4.18 7.3,-7.871 10.36,-11.082 3.05,-3.215 4.58,-5.461 4.58,-6.746 0,-1.609 -1.13,-2.406 -3.37,-2.406 l 0,-10.117 54.59,0 0,216.367 -50.74,0 0,-11.571 c 6.42,0 9.64,-2.406 9.64,-7.23 l 0,-130.59 -115.66,122.403 c -7.06,7.058 -10.6,11.398 -10.6,13.011 0,1.281 1.12,2.082 3.38,2.406 l 0,11.571 -63.65,0 0,-216.367"/><path id="path42" style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none" d="m 4274.56,395.805 -5.79,2.894 c -1.93,-1.609 -3.54,-2.648 -4.82,-3.133 -1.29,-0.484 -3.21,-0.722 -5.78,-0.722 -2.25,0 -5.63,1.117 -10.12,3.375 -4.5,2.242 -10.45,4.652 -17.83,7.226 -7.07,2.567 -15.42,4.977 -25.06,7.227 -9.64,2.246 -20.72,3.379 -33.25,3.379 -20.89,0 -39.76,-2.496 -56.62,-7.473 -16.87,-4.984 -31.17,-12.215 -42.89,-21.687 -11.73,-9.481 -20.73,-20.879 -26.98,-34.211 -6.27,-13.332 -9.4,-28.516 -9.4,-45.539 0,-17.028 3.13,-32.215 9.4,-45.543 6.25,-13.332 15.25,-24.657 26.98,-33.965 11.72,-9.328 26.02,-16.317 42.89,-20.969 16.86,-4.656 35.73,-6.98 56.62,-6.98 15.42,0 28.71,1.976 43.39,4.14 12.56,1.852 21.06,5.02 30.54,8.231 14.47,4.902 30.2,16.535 30.2,16.535 l 0,81.445 -108.95,-0.078 0,-41.848 8.68,0 c 0.64,3.856 2.24,6.504 4.82,7.95 2.56,1.445 5.61,2.168 9.15,2.168 l 49.64,0 0,-30.36 c -10.29,-5.469 -21.62,-9.156 -33.98,-11.086 -12.37,-1.922 -25.46,-2.89 -39.27,-2.89 -9.32,0 -18.97,1.281 -28.92,3.859 -9.96,2.566 -19.03,6.66 -27.22,12.285 -8.2,5.613 -14.87,13.016 -20,22.168 -5.14,9.16 -7.71,20.477 -7.71,33.973 0,13.492 2.41,24.894 7.23,34.215 4.81,9.312 11.24,16.945 19.27,22.89 8.03,5.938 17.35,10.278 27.95,13.012 10.6,2.727 21.85,4.094 33.73,4.094 8.68,0 17.27,-0.891 25.79,-2.649 8.5,-1.765 16.14,-4.101 22.89,-6.992 6.74,-2.891 12.2,-6.023 16.38,-9.394 4.17,-3.368 6.26,-6.504 6.26,-9.399 0,-0.32 -0.32,-2.09 -0.96,-5.297 l 5.78,-3.379 27.96,52.528"/><path id="path44" style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none" d="m 4548.27,368.34 0,47.711 -187.86,0 0,-216.367 192.19,0 0,46.738 -8.67,0 c 0,-2.891 -1.29,-5.227 -3.86,-6.988 -2.57,-1.766 -5.79,-2.653 -9.64,-2.653 l -123.36,0 0,56.867 70.36,0 c 6.41,0 11.39,-0.41 14.93,-1.207 3.53,-0.804 4.82,-2.972 3.86,-6.503 l 9.63,0 0,51.078 -8.67,0 c 0,-3.539 -1.29,-5.703 -3.85,-6.504 -2.58,-0.809 -6.59,-1.203 -12.05,-1.203 l -74.21,0 0,48.187 117.58,0 c 9.95,0 14.94,-3.058 14.94,-9.156 l 8.68,0"/><path id="path46" style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none" d="m 4631.92,199.684 48.38,0 0,10.117 c -6.75,0 -10.12,2.406 -10.12,7.226 l 0,140.223 119.51,-127.215 c 3.85,-4.18 7.3,-7.871 10.36,-11.082 3.05,-3.215 4.58,-5.461 4.58,-6.746 0,-1.609 -1.13,-2.406 -3.38,-2.406 l 0,-10.117 54.86,0 0,216.367 -51,0 0,-11.571 c 6.42,0 9.64,-2.406 9.64,-7.23 l 0,-130.59 -115.65,122.403 c -7.07,7.058 -10.61,11.398 -10.61,13.011 0,1.281 1.12,2.082 3.37,2.406 l 0,11.571 -59.94,0 0,-216.367"/><path id="path48" style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none" d="m 4960.74,199.684 59.28,0 0,10.117 c -8.99,0 -13.49,2.406 -13.49,7.226 l 0,180.223 c 0,4.824 4.5,7.23 13.49,7.23 l 0,11.571 -59.28,0 0,-216.367"/><path id="path50" style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none" d="m 5298.07,368.34 0,47.711 -186.84,0 0,-216.367 191.18,0 0,46.738 -8.67,0 c 0,-2.891 -1.29,-5.227 -3.86,-6.988 -2.57,-1.766 -5.78,-2.653 -9.64,-2.653 l -123.36,0 0,56.867 70.36,0 c 6.42,0 11.4,-0.41 14.93,-1.207 3.54,-0.804 4.83,-2.972 3.86,-6.503 l 9.64,0 0,51.078 -8.67,0 c 0,-3.539 -1.29,-5.703 -3.86,-6.504 -2.57,-0.809 -6.59,-1.203 -12.05,-1.203 l -74.21,0 0,48.187 117.58,0 c 9.95,0 14.94,-3.058 14.94,-9.156 l 8.67,0"/><path id="path52" style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none" d="m 5380.63,416.051 0,-216.367 52.85,0 0,10.117 c -1.92,0 -3.93,0.554 -6.01,1.683 -2.1,1.118 -3.14,2.965 -3.14,5.543 l 0,68.911 66.98,0 38.07,-56.86 c 4.82,-6.754 7.24,-11.734 7.24,-14.941 0,-2.891 -2.1,-4.336 -6.27,-4.336 l 0,-10.117 73.73,0 0,10.117 c -3.54,0.961 -6.83,2.324 -9.89,4.094 -3.05,1.757 -5.86,4.41 -8.43,7.945 l -47.22,68.918 c 6.74,1.601 13.33,3.93 19.76,6.98 6.42,3.059 12.28,7.067 17.58,12.051 5.31,4.977 9.56,10.84 12.78,17.59 3.2,6.746 4.81,14.457 4.81,23.133 0,22.804 -8.03,38.945 -24.09,48.429 -16.07,9.473 -38.39,17.11 -66.98,17.11 l -121.77,0 z m 44.66,-94.453 0,55.898 76.15,0 c 16.38,0 28.34,-2.336 35.9,-6.992 7.54,-4.652 11.32,-11.008 11.32,-19.035 0,-19.922 -15.74,-29.871 -47.22,-29.871 l -76.15,0"/><path id="path54" style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none" d="m 5669.61,199.684 57.61,0 0,216.367 -57.61,0 0,-11.571 c 5.13,0 8.68,-0.566 10.6,-1.683 1.93,-1.133 2.89,-2.977 2.89,-5.547 l 0,-180.223 c 0,-2.578 -0.96,-4.425 -2.89,-5.543 -1.92,-1.129 -5.47,-1.683 -10.6,-1.683 l 0,-10.117"/><path id="path56" style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none" d="m 6020.9,368.34 0,47.711 -187.18,0 0,-216.367 191.52,0 0,46.738 -8.67,0 c 0,-2.891 -1.29,-5.227 -3.86,-6.988 -2.57,-1.766 -5.78,-2.653 -9.64,-2.653 l -123.36,0 0,56.867 70.35,0 c 6.43,0 11.4,-0.41 14.94,-1.207 3.54,-0.804 4.82,-2.972 3.86,-6.503 l 9.64,0 0,51.078 -8.68,0 c 0,-3.539 -1.28,-5.703 -3.85,-6.504 -2.58,-0.809 -6.59,-1.203 -12.05,-1.203 l -74.21,0 0,48.187 117.58,0 c 9.95,0 14.94,-3.058 14.94,-9.156 l 8.67,0"/><path id="path58" style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none" d="m 746.559,429.281 187.402,0 0,13.4492 -187.402,0 0,-13.4492 z"/><path id="path60" style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none" d="m 1042.11,429.281 121.84,0 0,13.4492 -121.84,0 0,-13.4492 z"/><path id="path62" style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none" d="m 4360.57,429.281 187.961,0 0,13.4492 -187.961,0 0,-13.4492 z"/></g></g></svg>+ \ No newline at end of file diff --git a/languages.yaml b/languages.yaml @@ -0,0 +1,23 @@ +en: + MONTHS_OF_THE_YEAR: [January, February, March, April, May, June, July, August, September, October, November, December] + PARTNERS: Partners + CREDITS: Credits + PHOTO_CREDIT: Photo Credit © + NO_EVENTS: No events yet. + PROJECT: Project + BUY_TICKETS: Buy tickets. + READ_MORE: Read more + EVENT: Event + EVENT_S: Event(s) + +fr: + MONTHS_OF_THE_YEAR: [Janvier, Février, Mars, Avril, Mai, Juin, Juillet, Août, Septembre, Octobre, Novembre, Décembre] + PARTNERS: Partenaires + CREDITS: Crédits + PHOTO_CREDIT: Crédit Photo © + NO_EVENTS: Aucun événement pour le moment. + PROJECT: Projet + BUY_TICKETS: Acheter des billets. + READ_MORE: Lire la suite + EVENT: Événement + EVENT_S: Événement(s) diff --git a/screenshot.jpg b/screenshot.jpg Binary files differ. diff --git a/src/README.md b/src/README.md @@ -0,0 +1,6 @@ +Compile SCSS with `find`, `entr` and `sassc`: + +`find . -type f -name "*.scss" | entr -r sassc scss/styles.scss ../css/styles.css` + +* https://github.com/sass/sassc +* http://eradman.com/entrproject/ diff --git a/src/scss/atoms/_photo.scss b/src/scss/atoms/_photo.scss @@ -0,0 +1,19 @@ +// Photo atom +.photo { + position: relative; + + img { + display: block; + } + + &__credit { + background: var(--base-darkest); + bottom: 0; + color: var(--base-brightest); + font-size: rem-calc(11); + left: 0; + opacity: 0.6; + padding: 0.25em 0.5em; + position: absolute; + } +} diff --git a/src/scss/atoms/_typography.scss b/src/scss/atoms/_typography.scss @@ -0,0 +1,12 @@ +// Typography atoms +.suptitle { + background: var(--base-red); + color: var(--base-brightest); + display: inline-block; + font-size: rem-calc(12); + line-height: 1; + padding: rem-calc(8); + position: relative; + text-transform: uppercase; + z-index: 1; +} diff --git a/src/scss/components/_card.scss b/src/scss/components/_card.scss @@ -0,0 +1,62 @@ +// Card component +.card { + background: var(--base-brightest); + border: 1px solid var(--base-darkest); + display: flex; + flex-direction: column; + position: relative; + + &:focus-within, + &:hover { + box-shadow: 0 0 0 rem-calc(4) var(--base-red); + border-color: var(--base-red); + } + + + &__body { + display: flex; + flex: 1 0 auto; + flex-direction: column; + padding: rem-calc(16); + + & > * + * { + margin-top: rem-calc(12); + } + } + + &__title { + font-size: rem-calc(16); + font-weight: 700; + margin-bottom: 0; + + a { + color: inherit; + outline: none; + text-decoration: none; + } + + a::after { + bottom: 0; + content: ''; + left: 0; + position: absolute; + right: 0; + top: 0; + } + } + + + &__img { + background: var(--base-brightest-grey); + clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 1rem)); + height: rem-calc(150); + order: -1; + + img { + //filter: grayscale(100%); + height: 100%; + object-fit: cover; + width: 100%; + } + } +} diff --git a/src/scss/components/_default.scss b/src/scss/components/_default.scss @@ -0,0 +1,20 @@ +.default { + & > * + * { + margin-top: rem-calc(40); + } +} + +.default-list { + & > * + * { + margin: rem-calc(40) 0 0; + + header + & { + margin-top: 0; + } + } + + &__list { + padding: 0; + list-style-type: none; + } +} diff --git a/src/scss/components/_event.scss b/src/scss/components/_event.scss @@ -0,0 +1,33 @@ +// Event component +.event { + & > * + * { + margin-top: rem-calc(40); + } + + &__in-time { + time { + font-weight: 700; + } + } + + &__metas__item { + margin-left: 0; + } +} + +.event-list { + &__list { + margin: 0; + padding: 0; + list-style-type: none; + } + + &__datetime { + font-size: rem-calc(24); + } + + &__datetime { + order: -1; + margin-top: 0; + } +} diff --git a/src/scss/components/_footer-banner.scss b/src/scss/components/_footer-banner.scss @@ -0,0 +1,6 @@ +.footer-banner { + align-items: center; + display: flex; + flex-wrap: wrap; + justify-content: space-between; +} diff --git a/src/scss/components/_grid.scss b/src/scss/components/_grid.scss @@ -0,0 +1,23 @@ +// Grid componen with CSS grid +.grid { + display: grid; + grid-gap: 1rem; + grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); + + & > * { + margin-left: auto; + margin-right: auto; + max-width: 25rem; + } + + & > * + * { + margin-top: 1rem; + } +} + +@supports (display: grid) { + .grid > * { + margin: 0; + max-width: unset; + } +} diff --git a/src/scss/components/_header-banner.scss b/src/scss/components/_header-banner.scss @@ -0,0 +1,5 @@ +.header-banner { + display: flex; + flex-wrap: wrap; + margin-top: rem-calc(40); +} diff --git a/src/scss/components/_logo.scss b/src/scss/components/_logo.scss @@ -0,0 +1,15 @@ +.logo { + display:inline-block; + max-width:520px; + margin: 0 0 rem-calc(24); + width:auto; + + @media screen and (min-width: 48rem) { + margin-right: rem-calc(48); + } + + img { + max-width:100%; + width:auto; + } +} diff --git a/src/scss/components/_nav-alpha.scss b/src/scss/components/_nav-alpha.scss @@ -0,0 +1,28 @@ +.nav-alpha { + flex: 1 1 auto; + margin: 0 0 0 auto; + + &__list { + columns: 2 auto; + } + + &__item { + font-size: rem-calc(14); + } + + &__link, + &__sublink { + display: block; + padding: 0.25em 0; + + &.is-current { + text-decoration: none; + } + } + + &__link { + color: var(--base-darkest); + text-transform: uppercase; + } + +} diff --git a/src/scss/components/_project.scss b/src/scss/components/_project.scss @@ -0,0 +1,35 @@ +.project { + & > * + * { + margin-top: rem-calc(40); + } + + &__credits { + dl > * + * { + margin-top: rem-calc(16); + } + + dd { + margin-left: 0; + } + } + + &__aside { + & > * + * { + margin-top: rem-calc(40); + } + } + + &__mosaic { + display: grid; + grid-gap: 1rem; + grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); + } +} + +.project-list { + &__list { + margin: 0; + padding: 0; + list-style-type: none; + } +} diff --git a/src/scss/global/_abstractions.scss b/src/scss/global/_abstractions.scss @@ -0,0 +1,14 @@ +$base-fontsize: 16; +$base-lineheight: 1.45; +$grid-columns: 12; + +:root { + --base-fontfamily: 'Rubik', sans-serif; + --base-fontsize: #{$base-fontsize}; + --base-lineheight: #{$base-lineheight}; + + // Grid System + --grid-columns: $grid-columns; + --grid-gutter: calc(1rem * (var(--base-fontsize) / var(--base-fontsize))); + --grid-maxwidth: 1140px; +} diff --git a/src/scss/global/_base.scss b/src/scss/global/_base.scss @@ -0,0 +1,97 @@ +html, +body { + font-family:var(--base-fontfamily); + height:100%; + line-height:var(--base-lineheight); + min-height:100%; +} + +body { + margin:0; + padding:0; + + & > * { + box-sizing:border-box; + margin: 0 auto; + max-width:var(--grid-maxwidth); + padding: 0 rem-calc(32); + } + + & > * + * { + margin-top: rem-calc(40); + } +} + +a { + color: var(--base-link); + + &:focus, + &:hover, + &:visited { + text-decoration: none; + } + + &, + &:active { + text-decoration: underline; + } +} + +.visuallyhidden { + border: 0; + clip: rect(0 0 0 0); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; +} + +.visibilityhidden { + visibility: hidden; +} + +[hidden] { + display: none !important; +} + +h1, +h2, +h3 { + font-weight: normal; +} + +h1 { + background: var(--base-darkest); + color: var(--base-brightest); + font-size: rem-calc(32); + line-height: 1; + margin: 0; + padding: rem-calc(12) rem-calc(16); + max-width: rem-calc(480); + + .suptitle + & { + margin: rem-calc(-12) 0 0; + padding-top: rem-calc(16); + } +} + +img { + height: auto; + max-width: 100%; + width: auto; +} + +figure { + margin: 0; +} + +nav { + ol, + ul { + list-style-type: none; + margin: 0; + padding: 0; + } +} diff --git a/src/scss/global/_colors.scss b/src/scss/global/_colors.scss @@ -0,0 +1,10 @@ +// Color palette +:root { + --base-red: #e31d25; + --base-darkest: #000000; + --base-brightest: #ffffff; + --base-brightest-grey: #eeeeee; + --base-bg: var(--base-brightest); + --base-fg: var(--base-darkest); + --base-link: var(--base-red); +} diff --git a/src/scss/global/_fonts.scss b/src/scss/global/_fonts.scss @@ -0,0 +1,33 @@ +// Rubik @font-face +// <https://www.fontsquirrel.com/fonts/rubik> +@font-face { + font-family: 'Rubik'; + src: url('../fonts/rubik/rubik-mediumitalic-webfont.woff2') format('woff2'), + url('../fonts/rubik/rubik-mediumitalic-webfont.woff') format('woff'); + font-weight: 700; + font-style: italic; +} + +@font-face { + font-family: 'Rubik'; + src: url('../fonts/rubik/rubik-medium-webfont.woff2') format('woff2'), + url('../fonts/rubik/rubik-medium-webfont.woff') format('woff'); + font-weight: 700; + font-style: normal; +} + +@font-face { + font-family: 'Rubik'; + src: url('../fonts/rubik/rubik-italic-webfont.woff2') format('woff2'), + url('../fonts/rubik/rubik-italic-webfont.woff') format('woff'); + font-weight: 400; + font-style: italic; +} + +@font-face { + font-family: 'Rubik'; + src: url('../fonts/rubik/rubik-regular-webfont.woff2') format('woff2'), + url('../fonts/rubik/rubik-regular-webfont.woff') format('woff'); + font-weight: 400; + font-style: normal; +} diff --git a/src/scss/global/_functions.scss b/src/scss/global/_functions.scss @@ -0,0 +1,6 @@ +// Sass functions +@function rem-calc($size) { + $remSize: $size / $base-fontsize; + + @return #{$remSize}rem; +} diff --git a/src/scss/styles.scss b/src/scss/styles.scss @@ -0,0 +1,19 @@ +@import "global/_abstractions"; +@import "global/_functions"; +@import "global/_colors"; +@import "global/_fonts"; +@import "global/_base"; + +@import "atoms/_photo"; +@import "atoms/_typography"; + + +@import "components/_logo"; +@import "components/_grid"; +@import "components/_card"; +@import "components/_header-banner"; +@import "components/_footer-banner"; +@import "components/_nav-alpha"; +@import "components/_default"; +@import "components/_project"; +@import "components/_event"; diff --git a/templates/default-list.html.twig b/templates/default-list.html.twig @@ -0,0 +1,33 @@ +{% extends 'partials/base.html.twig' %} + +{% block content %} + <main class="default-list"> + {% if page.content or page.title %} + <header class="default-list__content"> + <h1 class="rte">{{ page.title }}</h1> + + <div class="rte"> + {{ page.content }} + </div> + </header> + {% endif %} + + <ol class="default-list__list grid"> + {% for child in page.children.visible %} + <li class="card"> + <div class="card__body"> + <h2 class="card__title"> + <a href="{{ child.url }}"> + {{ child.title }} + </a> + </h2> + </div> + + <div class="card__img"> + {{ child.media.images|first }} + </div> + </li> + {% endfor %} + </ol> + </main> +{% endblock %} diff --git a/templates/default.html.twig b/templates/default.html.twig @@ -0,0 +1,7 @@ +{% extends 'partials/base.html.twig' %} + +{% block content %} + <main> + {{ page.content }} + </main> +{% endblock %} diff --git a/templates/error.html.twig b/templates/error.html.twig @@ -0,0 +1,8 @@ +{% extends 'partials/base.html.twig' %} + +{% block content %} + <div class="lead text-center"> + <h1>Error!</h1> + {{ page.content }} + </div> +{% endblock %} diff --git a/templates/event.html.twig b/templates/event.html.twig @@ -0,0 +1,87 @@ +{% extends 'partials/base.html.twig' %} +{% block content %} + <main class="event h-event"> + {% set event_project = page.parent().find(header.project_event) %} + + <header class="event__header"> + <span class="suptitle">{{ t("EVENT") }}</span> + + <h1 class="event__title p-name"> + {{ page.title }} + </h1> + + <dl class="event__metas"> + <dt class="event__in-time"> + <time + class="event-list__datetime" + datetime="{{ header.event_dates["start_date"]|date('Y-m-d H:i:s') }}"> + {{ header.event_dates["start_date"]|localizeddate('long', 'none', lang, 'America/Toronto') }} + </time> + + {% if header.event_dates["other_dates"]|length > 0 or header.event_dates["end_date"] %} + <div> + {% for other_date in header.event_dates["other_dates"] %} + <time datetime="{{ other_date["date"]|date('Y-m-d H:i:s') }}"> + {{ other_date["date"]|localizeddate('long', 'none', lang, 'America/Toronto') }} + </time>, + {% endfor %} + <time datetime="{{ header.event_dates["end_date"]|date('Y-m-d H:i:s') }}"> + {{ header.event_dates["end_date"]|localizeddate('long', 'none', lang, 'America/Toronto') }} + </time> + </div> + {% endif %} + </dt> + {% if header.event_place.name %} + <dd class="event__metas__item p-location h-card"> + {% if header.event_place.url %} + <a class="u-url p-name p-org" href="{{ header.event_place.url }}" rel="external nofollow"> + {{ header.event_place.name }} + </a> + {% else %} + <span class="p-name p-org"> + {{ header.event_place.name }} + </span> + {% endif %} + </dd> + {% endif %} + + {% if header.event_place.url_ticket %} + <dd class="event__metas__item"> + <a href="{{ header.event_place.url_ticket }}" rel="external nofollow"> + {{ "BUY_TICKETS"|t }} + </a> + </dd> + {% endif %} + </dl> + </header> + + <section class="event__content"> + {% if page.content %} + {{ page.content }} + {% else %} + {{event_project.summary}} + <a href="{{event_project.url}}">{{ "READ_MORE"|t }}</a> + {% endif %} + </section> + + <figure class="photo"> + {% if page.media.images|length > 0 %} + {{ page.media.images|first.derivatives(320,1600,300).sizes('(max-width: 71.25rem) 100vw, 100vw').html() }} + {% if page.media.images|first.meta.caption %} + <figcaption class="photo__credit"> + {{ "PHOTO_CREDIT"|t }} + {{ page.media.images|first.meta.caption }} + </figcaption> + {% endif %} + {% else %} + {{ event_project.media.images|last.derivatives(320,1600,300).sizes('(max-width: 71.25rem) 100vw, 100vw').html() }} + {% if event_project.media.images|first.meta.caption %} + <figcaption class="photo__credit"> + {{ "PHOTO_CREDIT"|t }} + {{ event_project.media.images|first.meta.caption }} + </figcaption> + {% endif %} + {% endif %} + </figure> + </main> +{% endblock %} diff --git a/templates/events.html.twig b/templates/events.html.twig @@ -0,0 +1,55 @@ +{% extends 'partials/base.html.twig' %} +{% block content %} + <main class="event-list"> + {% if page.content or page.title %} + <header class="event-list__content"> + <h1 class="rte">{{ page.title }}</h1> + + <div class="rte"> + {{ page.content }} + </div> + </header> + {% endif %} + + <ol class="event-list__list grid"> + {% for event in page.collection %} + {% set eventPlaceName = event.header.event_place.name %} + {% set eventLocation = event.header.event.location %} + {% set eventProjectCover = page.find(event.header.project_event).media.images|first %} + + <li class="card"> + <div class="card__body"> + <h2 class="card__title"> + <a href="{{ event.url }}"> + {{ event.title }} + </a> + </h2> + + <div class="event-list__dates"> + <time + class="event-list__datetime" + datetime="{{ event.header.event_dates["start_date"]|date('Y-m-d H:i:s') }}"> + {{ event.header.event_dates["start_date"]|localizeddate('long', 'none', lang, 'America/Toronto') }} + </time> + </div> + + {% if eventPlaceName or eventLocation %} + <div class="event-list__location"> + {{ eventPlaceName ? eventPlaceName ~ ',' }} + {{ eventLocation ? '<em>' ~ eventLocation ~ '</em>' }} + </div> + {% endif %} + </div> + + <div class="card__img"> + {% if event.media.images|length > 0 %} + {{ event.media.images|first }} + {% else %} + {{ eventProjectCover }} + {% endif %} + </div> + </li> + {% endfor %} + </ol> + </main> +{% endblock %} diff --git a/templates/home.html.twig b/templates/home.html.twig @@ -0,0 +1,11 @@ +{% extends 'partials/base.html.twig' %} + +{% block content %} + <main> + {{ page.content }} + + {% for module in page.collection() %} + {{ module.content }} + {% endfor %} + </main> +{% endblock %} diff --git a/templates/macros/event-datetime.twig.html b/templates/macros/event-datetime.twig.html @@ -0,0 +1,23 @@ +<!-- --> +{% macro data(dtime) %} + {% if dtime|length == 1 %} + {% if dtime[0]["end_date"] and dtime[0]["start_date"] %} + {# Start date #} + Du <time class="dt-start" datetime="{{ dtime[0]["start_date"]|date('Y-m-d H:i:s') }}"> + {{ dtime[0]["start_date"]|date('D, d F') }} + </time>, + {# End date #} + au <time class="dt-end" datetime="{{ dtime[0]["end_date"]|date('Y-m-d H:i:s') }}"> + {{ dtime[0]["end_date"]|date('D, d F') }} + </time>, + {# Time #} + à <span>{{ dtime[0]["end_date"]|date("H:i") }}</span> + {% else %} + {# Start date and time #} + le <time class=""dt-start datetime=""> + {{ dtime[0]["start_date"]|date('D, d F') }} + </time>, + à <span>{{ dtime[0]["start_date"]|date("H:i") }}</span> + {% endif %} + {% endif %} +{% endmacro %} diff --git a/templates/modular.html.twig b/templates/modular.html.twig @@ -0,0 +1,9 @@ +{% extends 'partials/base.html.twig' %} + +{% block content %} + {{ page.content }} + {% for module in page.collection() %} + <div id="{{ _self.pageLinkName(module.menu) }}"></div> + {{ module.content }} + {% endfor %} +{% endblock %} diff --git a/templates/modular/.gitkeep b/templates/modular/.gitkeep diff --git a/templates/modular/partners.html.twig b/templates/modular/partners.html.twig @@ -0,0 +1,9 @@ +{% if page.content is not empty %} + <section class="partners"> + <h2 class="partners__title">{{ "PARTNERS"|t }}</h2> + + <div class="partners__content"> + {{ page.content }} + </div> + </section> +{% endif %} diff --git a/templates/modular/tri-intro.html.twig b/templates/modular/tri-intro.html.twig @@ -0,0 +1,15 @@ +{% set image = page.media.images|first.derivatives(320,1600,300).sizes('(max-width: 71.25rem) 100vw, 100vw').html() %} + +<div class="tri-intro"> + <h1>{{page.title}}</h1> + + {% if image %} + <div> + {{ image }} + </div> + {% endif %} + + <div> + {{ content }} + </div> +</div> diff --git a/templates/modular/tri-team.html.twig b/templates/modular/tri-team.html.twig @@ -0,0 +1,9 @@ +{% set image = page.media.images|first.derivatives(320,1600,300).sizes('(max-width: 71.25rem) 100vw, 100vw').html() %} + +<div class="tri-team"> + {{ content }} + + {% if image %} + {{ image }} + {% endif %} +</div> diff --git a/templates/partials/.gitkeep b/templates/partials/.gitkeep diff --git a/templates/partials/_navigation.html.twig b/templates/partials/_navigation.html.twig @@ -0,0 +1,43 @@ +{% set projects = pages.find('/projets') %} +{{dump(projects.menu)}} + +<nav class="nav-alpha"> + <h2 class="nav-alpha__title visuallyhidden">Navigation principal</h2> + + <ul class="nav-alpha__list"> + {% for pge in pages.children.visible %} + {% set is_current = (pge.active) ? 'is-current' : '' %} + + {% if pge != pge.home() %} + <li class="nav-alpha__item"> + <a + class="nav-alpha__link {{ is_current }}" + {% if is_current != true %} + href="{{ pge.url }}" + {% endif %}> + {{ pge.menu }} + </a> + + <ul class="nav-alpha__sublist"> + {% if pge == projects %} + {% for prj in pge.children.visible %} + {% set is_current = (prj.active) ? 'is-current' : '' %} + <li class="nav-alpha__item"> + <a + class="nav-alpha__sublink {{ is_current }}" + {% if is_current != true %} + href="{{ prj.url }}" + {% endif %}> + {{ prj.menu }} + </a> + </li> + {% endfor %} + {% endif %} + </ul> + </li> + {% endif %} + {% endfor %} + + {#% include 'partials/langswitcher.html.twig' %#} + </ul> +</nav> diff --git a/templates/partials/base.html.twig b/templates/partials/base.html.twig @@ -0,0 +1,75 @@ +{% set theme_config = attribute(config.themes, config.system.pages.theme) %} +{% set lang = grav.language.getActive ?: theme_config.default_lang %} +<!DOCTYPE html> +<html lang="{{ grav.language.getActive ?: theme_config.default_lang }}"> + <head> + {% block head %} + <meta charset="utf-8" /> + <title>{% if header.title %}{{ header.title|e('html') }} | {% endif %}{{ site.title|e('html') }}</title> + + {% block stylesheets %} + {% do assets.addCss('theme://css/normalize.css', 98) %} + {% do assets.addCss('theme://css/styles.css', 99) %} + {% endblock %} + + {{ assets.css() }} + + <meta http-equiv="X-UA-Compatible" content="IE=edge"/> + <meta name="viewport" content="width=device-width, initial-scale=1"/> + + {% include 'partials/metadata.html.twig' %} + + <link rel="icon" type="image/png" href="{{ url('theme://images/logo.png') }}" /> + <link rel="canonical" href="{{ page.url(true, true) }}" /> + {% include 'partials/langswitcher.hreflang.html.twig' %} + + {% block javascripts %} + {% do assets.addJs('jquery', 100) %} + {% endblock %} + + {{ assets.js() }} + {% endblock head %} + </head> + + <body id="top" class="{{ page.header.body_classes }}"> + {% block header %} + <header class="header-banner" role="banner"> + <a class="logo" href="{{ base_url == '' ? '/' : base_url }}" rel="index"> + <img alt="{{ config.site.title }}" src="{{ url('theme://images/tri-logo.svg') }}"/> + </a> + + {% block navigation %} + {% include 'partials/navigation.html.twig' %} + {% endblock %} + </header> + {% endblock %} + + {% block body %} + {% block content %}{% endblock %} + {% endblock %} + + {% block footer %} + <footer class="footer-banner"> + <p> + <small> + © <time>{{ now|date('Y') }}</time> + <abbr title="Théâtre Rude Ingénierie">TRI</abbr> + </small> + </p> + + <p> + <a + href="https://www.facebook.com/theatrerudeingenierie/" + rel="external">Facebook</a> | + <a + href="https://vimeo.com/channels/1019729" + rel="external">Vimeo</a> + </p> + </footer> + {% endblock %} + + {% block bottom %} + {{ assets.js('bottom') }} + {% endblock %} + </body> +</html> diff --git a/templates/partials/langswitcher.hreflang.html.twig b/templates/partials/langswitcher.hreflang.html.twig @@ -0,0 +1,11 @@ +{% set langobj = grav['language'] %} + +{% for key in langswitcher.languages %} + {% if key == langswitcher.current %} + {% set lang_url = page.url %} + {% else %} + {% set lang_url = base_url_simple ~ langobj.getLanguageURLPrefix(key) ~ langswitcher.page_route ~ page.urlExtension ?: '/' %} + {% endif %} + + <link href="{{ lang_url ~ uri.params }}" hreflang="{{ key }}" rel="alternate" /> +{% endfor %} diff --git a/templates/partials/langswitcher.html.twig b/templates/partials/langswitcher.html.twig @@ -0,0 +1,36 @@ +{% for language in langswitcher.languages %} + {% set show_language = true %} + {% if language == langswitcher.current %} + {% set lang_url = page.url %} + {% set active_class = ' is-current' %} + {% else %} + {% set base_lang_url = base_url_simple ~ grav.language.getLanguageURLPrefix(language) %} + {% set lang_url = base_lang_url ~ langswitcher.page_route ~ page.urlExtension %} + {% set untranslated_pages_behavior = grav.config.plugins.langswitcher.untranslated_pages_behavior %} + {% if untranslated_pages_behavior != 'none' %} + {% set translated_page = langswitcher.translated_pages[language] %} + {% if (not translated_page) or (not translated_page.published) %} + {% if untranslated_pages_behavior == 'redirect' %} + {% set lang_url = base_lang_url ~ '/' %} + {% elseif untranslated_pages_behavior == 'hide' %} + {% set show_language = false %} + {% endif %} + {% endif %} + {% endif %} + {% set active_class = '' %} + {% endif %} + + {% if show_language %} + <li class="nav-alpha__item"> + <a + class="nav-alpha__link {{ active_class }}" + {% if language != langswitcher.current %} + href="{{ lang_url ~ uri.params }}" + {% else %} + hidden="" + {% endif %}> + {{ native_name(language)|capitalize }} + </a> + </li> + {% endif %} +{% endfor %} diff --git a/templates/partials/metadata.html.twig b/templates/partials/metadata.html.twig @@ -0,0 +1,8 @@ +{% for meta in page.metadata %} + <meta + {% if meta.name %}name="{{ meta.name }}" {% endif %} + {% if meta.http_equiv %}http-equiv="{{ meta.http_equiv }}" {% endif %} + {% if meta.charset %}charset="{{ meta.charset }}" {% endif %} + {% if meta.property %}property="{{ meta.property }}" {% endif %} + {% if meta.content %}content="{{ meta.content }}" {% endif %}/> +{% endfor %} diff --git a/templates/partials/navigation.html.twig b/templates/partials/navigation.html.twig @@ -0,0 +1,26 @@ +{% set projects = pages.find('/projets') %} +{{dump(projects.menu)}} + +<nav class="nav-alpha"> + <h2 class="nav-alpha__title visuallyhidden">Navigation principal</h2> + + <ul class="nav-alpha__list"> + {% for pge in pages.children.visible %} + {% set is_current = (pge.active) ? 'is-current' : '' %} + + {% if pge != pge.home() %} + <li class="nav-alpha__item"> + <a + class="nav-alpha__link {{ is_current }}" + {% if is_current != true %} + href="{{ pge.url }}" + {% endif %}> + {{ pge.menu }} + </a> + </li> + {% endif %} + {% endfor %} + + {% include 'partials/langswitcher.html.twig' %} + </ul> +</nav> diff --git a/templates/project.html.twig b/templates/project.html.twig @@ -0,0 +1,65 @@ +{% extends 'partials/base.html.twig' %} + +{% block content %} + <main class="project"> + <header class="project__header"> + <span class="suptitle">{{ "PROJECT"|t }}</span> + + <h1 class="project__title">{{ page.title }}</h1> + + <figure class="photo"> + {{ page.media.images|first.derivatives(320,1600,300).sizes('(max-width: 71.25rem) 100vw, 100vw').html() }} + {% if page.media.images|first.meta.caption %} + <figcaption class="photo__credit"> + {{ "PHOTO_CREDIT"|t }} + {{ page.media.images|first.meta.caption }} + </figcaption> + {% endif %} + </figure> + </header> + + {% if page.content %} + <section class="project__content"> + {{ page.content }} + </section> + {% endif %} + + {% if header.project_credits_array|length > 0 %} + <section class="project__credits"> + <h2>{{ "CREDITS"|t }}</h2> + + <dl> + {% for k, v in header.project_credits_array %} + <div> + <dt> + <em>{{ k }}</em> + </dt> + <dd>{{ v }}</dd> + </div> + {% endfor %} + </dl> + </section> + {% endif %} + </main> + + <aside class="project__aside"> + {% for module in page.collection() %} + {{ module.content }} + {% endfor %} + + <section class="project__mosaic"> + {% for image in page.media.images|slice(1) %} + {#{ image.derivatives(320,1600,300).sizes('(max-width: 71.25rem) 100vw, 100vw').html() }#} + <figure class="photo"> + {{ image.derivatives(320,1600,300).sizes('(max-width: 71.25rem) 100vw, 100vw').lightbox().cropZoom(380,240).html() }} + {% if page.media.images|first.meta.caption %} + <figcaption class="photo__credit"> + {{ "PHOTO_CREDIT"|t }} + {{ page.media.images|first.meta.caption }} + </figcaption> + {% endif %} + </figure> + {% endfor %} + </section> + </aside> +{% endblock %} diff --git a/templates/projects-list.html.twig b/templates/projects-list.html.twig @@ -0,0 +1,35 @@ +{% extends 'partials/base.html.twig' %} + +{% block content %} + <main class="project-list"> + {% if page.content or page.title %} + <header class="project-list__content"> + <h1 class="rte">{{ page.title }}</h1> + + <div class="rte"> + {{ page.content }} + </div> + </header> + {% endif %} + + <ol class="project-list__list grid"> + {% set projects_page = page.find('/projets') %} + + {% for project_page in projects_page.children.visible %} + <li class="card"> + <div class="card__body"> + <h2 class="card__title"> + <a href="{{ project_page.url }}"> + {{ project_page.title }} + </a> + </h2> + </div> + + <div class="card__img"> + {{ project_page.media.images|first }} + </div> + </li> + {% endfor %} + </ol> + </main> +{% endblock %} diff --git a/thumbnail.jpg b/thumbnail.jpg Binary files differ. diff --git a/tri.php b/tri.php @@ -0,0 +1,9 @@ +<?php +namespace Grav\Theme; + +use Grav\Common\Theme; + +class Tri extends Theme +{ + // Access plugin events in this class +} diff --git a/tri.yaml b/tri.yaml @@ -0,0 +1,3 @@ +enabled: true +dropdown: + enabled: true
