jcarrier-theme

A Grav CMS theme for <https://jacynthecarrier.com>.
git clone git://soucy.cc/jcarrier-theme.git
Log | Files | Refs | README | LICENSE

commit d041dfda23e7c4cb783429ed692eed5415353ead
parent 6cfde80db012dfba417217e27b14abe8c0050f8a
Author: Hugo Soucy <hugo@soucy.cc>
Date:   Sat, 21 Nov 2020 21:19:20 -0500

Add news module template and styles

Diffstat:
Asrc/scss/modules/_news.scss | 50++++++++++++++++++++++++++++++++++++++++++++++++++
Atemplates/news.html.twig | 34++++++++++++++++++++++++++++++++++
2 files changed, 84 insertions(+), 0 deletions(-)

diff --git a/src/scss/modules/_news.scss b/src/scss/modules/_news.scss @@ -0,0 +1,50 @@ +// News module +.news { + &-list { + & > * + * { + border-top: 1px dotted var(--base-blue); + margin-top: 3rem; + padding-top: 3rem; + } + } + + &-list__item { + display: flex; + flex-direction: column; + position: relative; + + &:focus-within, + &:hover { + background: var(--base-brightest-grey); + box-shadow: 0 0 0 rem-calc(10) var(--base-brightest-grey); + } + + & > * { + margin: 0; + } + } + + &-list__title { + a { + all: inherit; + + &:after { + bottom: 0; + content: ''; + cursor: pointer; + display: block; + left: 0; + position: absolute; + right: 0; + top: 0; + } + } + } + + &-list__date { + color: var(--base-blue); + font-size: rem-calc(12); + order: -1; + margin: 0 0 1em; + } +} diff --git a/templates/news.html.twig b/templates/news.html.twig @@ -0,0 +1,34 @@ +{% extends 'partials/base.html.twig' %} + +{% block content %} + {% if page.content or page.title %} + <header> + <h1 class="rte">{{ page.title }}</h1> + + <div class="rte"> + {{ page.content }} + </div> + </header> + {% endif %} + + <section class="news-list"> + {% for subpage in page.children.visible.order('date', 'desc') %} + <article class="news-list__item"> + <h2 class="news-list__title"> + <a href="{{ subpage.url }}"> + {{ subpage.title }} + </a> + </h2> + + <time class="news-list__date" datetime="{{ subpage.header.publish_date|date("Y-m-d")}}"> + {{ subpage.header.publish_date|date('d') }} {{ 'MONTHS_OF_THE_YEAR'|ta(subpage.header.publish_date|date('n') - 1) }} + {{ subpage.header.publish_date|date("Y")}} + </time> + + <div> + {{ subpage.content }} + </div> + </article> + {% endfor %} + </section> +{% endblock %}