diff --git a/CHANGELOG.md b/CHANGELOG.md index 610b66467..08ecddb05 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,4 +1,12 @@ # CHANGELOG +*2.3.1* (2019-12-13) + - 🛠 Fixes & other + - Update markup according to WordPress standards (#429) + +*2.3.0* (2019-12-10) + - ✨ New implementations + - Blog pages design (#425) + *2.2.1* (2019-11-13) - 🛠 Fixes & other - Fix multiple select image (#401) diff --git a/VERSION b/VERSION index c043eea77..2bf1c1ccf 100644 --- a/VERSION +++ b/VERSION @@ -1 +1 @@ -2.2.1 +2.3.1 diff --git a/assets/components/base.scss b/assets/components/base.scss index 61a99fe7c..6e978ddb6 100644 --- a/assets/components/base.scss +++ b/assets/components/base.scss @@ -125,3 +125,4 @@ // // pages: @import 'pages/people-detail/people-detail'; +@import 'pages/blog-single/blog-single'; diff --git a/assets/components/molecules/card-deck/card-deck.scss b/assets/components/molecules/card-deck/card-deck.scss index 753caf9ce..e9258c0be 100644 --- a/assets/components/molecules/card-deck/card-deck.scss +++ b/assets/components/molecules/card-deck/card-deck.scss @@ -5,6 +5,26 @@ margin-left: $spacer * -0.5; margin-right: $spacer * -0.5; flex-wrap: wrap; + + @include media-breakpoint-up(sm) { + + > .card { + + // only one card is present + &:first-child:last-child { + flex: 0 0 60%; + margin-left: auto; + margin-right: auto; + } + + // two or more cards are present + &:nth-last-child(n + 2), + &:nth-last-child(n + 2) ~ * { + flex: 1 1 47%; + margin: $spacer * 0.5; + } + } + } @include media-breakpoint-up(lg) { > .card { @@ -14,8 +34,6 @@ // only one card is present &:first-child:last-child { flex: 0 0 33%; - margin-left: auto; - margin-right: auto; } // two cards are present diff --git a/assets/components/molecules/card-deck/card-deck.twig b/assets/components/molecules/card-deck/card-deck.twig index 70efaa8db..f8b683e26 100644 --- a/assets/components/molecules/card-deck/card-deck.twig +++ b/assets/components/molecules/card-deck/card-deck.twig @@ -2,4 +2,7 @@ {% include '@molecules/card/card-link.twig' %} {% include '@molecules/card/card-link.twig' %} {% include '@molecules/card/card-link.twig' %} + {% include '@molecules/card/card-link.twig' %} + {% include '@molecules/card/card-link.twig' %} + {% include '@molecules/card/card-link.twig' %} diff --git a/assets/components/molecules/card/card.scss b/assets/components/molecules/card/card.scss index cbc75e9b3..c86437dd0 100644 --- a/assets/components/molecules/card/card.scss +++ b/assets/components/molecules/card/card.scss @@ -45,6 +45,10 @@ a.card-gray:hover .card-body { background: $white; } + .card-footer { padding-top: 0; } + + .card-info + p { + margin-top: .5em; + } p:last-of-type { margin-bottom: 0; diff --git a/assets/components/molecules/filters/filters-blog.twig b/assets/components/molecules/filters/filters-blog.twig new file mode 100644 index 000000000..39e0d6b9e --- /dev/null +++ b/assets/components/molecules/filters/filters-blog.twig @@ -0,0 +1,48 @@ + diff --git a/assets/components/molecules/filters/filters.yml b/assets/components/molecules/filters/filters.yml index 444b3e001..f0b47725a 100644 --- a/assets/components/molecules/filters/filters.yml +++ b/assets/components/molecules/filters/filters.yml @@ -2,3 +2,8 @@ name: filters title: Filters notes: | The filters are displayed (in a sidebar) on desktop but have to be collapsed in on mobile. + variants: + - name: blog + title: Blog content filters + notes: | + diff --git a/assets/components/molecules/form-group/form-group.scss b/assets/components/molecules/form-group/form-group.scss index de2826549..bf281c5a0 100644 --- a/assets/components/molecules/form-group/form-group.scss +++ b/assets/components/molecules/form-group/form-group.scss @@ -2,9 +2,13 @@ .form-group { label { - font-size: $font-size-sm; + font-size: 1em; color: $gray-600; } + + .custom-control label { + font-size: $font-size-sm; + } } .invalid-label, diff --git a/assets/components/molecules/tables/tables.scss b/assets/components/molecules/tables/tables.scss index f304cc334..f59af057d 100644 --- a/assets/components/molecules/tables/tables.scss +++ b/assets/components/molecules/tables/tables.scss @@ -6,7 +6,7 @@ thead { th { border-bottom: 3px solid $gray-200; - padding: 0.3rem 0; + padding: 0.3rem 0.45rem; } } @@ -15,7 +15,7 @@ color: $black; td { - padding: 0.3rem 0; + padding: 0.3rem 0.45rem; border-bottom: 1px solid $gray-200; @include media-breakpoint-down(sm) { @@ -50,8 +50,6 @@ thead th, tbody td, tfoot td { - padding-left: 0.45rem; - padding-right: 0.45rem; border-right: 1px solid $gray-200; @include media-breakpoint-down(sm) { diff --git a/assets/components/organisms/fullwidth-teaser/fullwidth-teaser-horizontal.twig b/assets/components/organisms/fullwidth-teaser/fullwidth-teaser-horizontal.twig index 08d78e591..a9016a6a1 100644 --- a/assets/components/organisms/fullwidth-teaser/fullwidth-teaser-horizontal.twig +++ b/assets/components/organisms/fullwidth-teaser/fullwidth-teaser-horizontal.twig @@ -1,4 +1,6 @@ -
+{% set thinner_teaser = thinner_teaser|default(false) %} + +
{% if not img %}{% set img %}./images/styleguide/basic_page_teaser.jpg{% endset %}{% endif %} An image description diff --git a/assets/components/organisms/fullwidth-teaser/fullwidth-teaser.scss b/assets/components/organisms/fullwidth-teaser/fullwidth-teaser.scss index ccfde61e0..47b356b05 100644 --- a/assets/components/organisms/fullwidth-teaser/fullwidth-teaser.scss +++ b/assets/components/organisms/fullwidth-teaser/fullwidth-teaser.scss @@ -283,3 +283,22 @@ } } } + +.fullwidth-teaser-horizontal.thinner-teaser { + background: yellow; + min-height: 24rem; + + @include media-breakpoint-up(xl) { + + picture, + figure { + height: 30vw; + max-height: 50vh; + min-height: 24rem; + } + + .fullwidth-teaser-text { + padding-bottom: $spacer * 3; + } + } +} diff --git a/assets/components/pages/blog-homepage/blog-homepage.twig b/assets/components/pages/blog-homepage/blog-homepage.twig index 486bed77c..b5c79cdd6 100644 --- a/assets/components/pages/blog-homepage/blog-homepage.twig +++ b/assets/components/pages/blog-homepage/blog-homepage.twig @@ -1,5 +1,3 @@ -{% set isSpecial = true %} - {% extends "@templates/base/base.twig" %} {% block header %} @@ -7,21 +5,29 @@ {% endblock %} {% block content %} -
- {% include '@content-types/news/news-highlighted.twig' %} + +
+

Titre du blog

-
-
- {% for 1 in 1..12 %} - {% include '@content-types/news/news-basic-teaser.twig' %} - {% endfor %} +
+
+
+ {% include '@molecules/filters/filters-blog.twig' %} +
+
+
+ {% for 1 in 1..9 %} + {% include '@content-types/news/news-basic-teaser.twig' %} + {% endfor %} +
+
+ {% include '@molecules/pagination/pagination.twig' %} +
+
-
- {% include '@molecules/pagination/pagination-center.twig' %} -
{% endblock %} {% block footer_container %} diff --git a/assets/components/pages/blog-single/blog-single.scss b/assets/components/pages/blog-single/blog-single.scss new file mode 100644 index 000000000..fbe537741 --- /dev/null +++ b/assets/components/pages/blog-single/blog-single.scss @@ -0,0 +1,19 @@ +@charset 'utf-8'; + +article.blog-post { + + header { + border-bottom: 1px solid $gray-100; + } + + footer { + border-color: $gray-100; + } +} + +.entry-content { + + p:last-child { + margin-bottom: 0; + } +} diff --git a/assets/components/pages/blog-single/blog-single.twig b/assets/components/pages/blog-single/blog-single.twig new file mode 100644 index 000000000..db318849f --- /dev/null +++ b/assets/components/pages/blog-single/blog-single.twig @@ -0,0 +1,58 @@ +{% extends "@templates/base/base.twig" %} + +{% block header %} + {% include '@organisms/header/header-light.twig' with { site_title: 'example blog name' } %} +{% endblock %} + +{% block content %} + +
+ +
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit

+
+

Publié le 9 décembre 2019

+

Catégories:

+

+ Catégorie 1 + Catégorie 2 +

+
+
+ +
+ +

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent at pharetra est, non bibendum dolor. Proin turpis neque, viverra a augue vitae, dapibus iaculis tellus. Morbi ante nisi, venenatis vel velit id, ultrices efficitur nisl. Morbi consectetur non turpis eu interdum. Phasellus nec felis at justo efficitur cursus sed quis sapien. Proin facilisis sapien sit amet venenatis pellentesque. Nulla efficitur, massa a facilisis egestas, massa nulla scelerisque tellus, quis fringilla orci ante sed risus.

+

Sed varius volutpat mollis. Vestibulum suscipit hendrerit congue. Donec ante urna, molestie et magna quis, pellentesque auctor urna. Donec porta ligula sed nisl consequat vehicula. Maecenas aliquet, sapien vitae iaculis vestibulum, arcu neque viverra tellus, nec pulvinar diam sem id massa. Nunc vestibulum lacus nunc. Nunc sodales nisi in ante molestie gravida. Sed iaculis, libero quis efficitur fermentum, lacus orci sagittis lacus, sit amet consectetur lectus nibh vel nisi. Sed et accumsan orci. Cras imperdiet nibh odio, vitae dictum purus luctus in. Maecenas a nunc sit amet mauris fermentum fermentum. Curabitur sit amet neque sit amet lorem commodo rutrum vitae sed magna. Sed quis lectus dolor. Nullam placerat augue ut sollicitudin pharetra.

+ +
+

In ut viverra mauris. Duis hendrerit, nulla ac condimentum condimentum, quam sem dignissim nulla, ut suscipit lorem purus sodales sapien. Mauris luctus scelerisque malesuada. Maecenas id augue velit. Donec malesuada, dolor vel auctor fermentum, eros enim auctor tellus, non vestibulum felis elit ut arcu. Maecenas sed euismod arcu, quis aliquam mi. Donec faucibus tristique ex, id cursus metus varius quis. Aenean neque mauris, pulvinar id placerat ac, finibus vel quam.

+
+ — Prénom Nom, chef d’unité +
+
+ +

In ut viverra mauris. Duis hendrerit, nulla ac condimentum condimentum, quam sem dignissim nulla, ut suscipit lorem purus sodales sapien. Mauris luctus scelerisque malesuada. Maecenas id augue velit. Donec malesuada, dolor vel auctor fermentum, eros enim auctor tellus, non vestibulum felis elit ut arcu. Maecenas sed euismod arcu, quis aliquam mi. Donec faucibus tristique ex, id cursus metus varius quis. Aenean neque mauris, pulvinar id placerat ac, finibus vel quam. Praesent fringilla neque ante, et auctor augue gravida at. Nunc pulvinar, nibh fringilla suscipit interdum, augue velit convallis enim, tempor rutrum risus justo ac mauris. Praesent lobortis odio augue. Curabitur vestibulum condimentum ipsum, a rhoncus est malesuada quis. Fusce luctus nisl et tortor varius ornare.

+

Nunc id imperdiet est. Phasellus a semper ante. Sed purus nisi, iaculis non purus id, ultricies vulputate leo. Ut dignissim vitae quam eget gravida. Nulla nec metus tortor. Nullam quis nisl at purus commodo consequat. Nullam sem dolor, faucibus in turpis eleifend, condimentum ultricies nisi. Phasellus vitae gravida lectus. Nam tellus magna, lacinia vel congue non, egestas at erat. Mauris consequat, justo in lobortis pharetra, nibh sapien gravida risus, vitae commodo nunc tellus eu nisi. Fusce tempus nisl laoreet diam luctus dictum. Aenean nisi felis, maximus nec ante ut, sodales viverra nisl. Vivamus iaculis fermentum lorem, vel sagittis erat imperdiet ac. In hac habitasse platea dictumst. Vivamus congue augue eget mi mollis tristique.

+

Cras non sem sed erat feugiat pellentesque. In in risus est. Praesent ut lectus sit amet leo viverra scelerisque. Nulla facilisi. Cras vel lectus tortor. In auctor dictum odio vitae mollis. Donec fringilla viverra suscipit. Curabitur cursus nibh a purus volutpat imperdiet. Integer mollis varius enim eu porttitor.

+ +
+ + + +
+{% endblock %} diff --git a/assets/components/pages/blog-single/blog-single.yml b/assets/components/pages/blog-single/blog-single.yml new file mode 100644 index 000000000..f222ec5e7 --- /dev/null +++ b/assets/components/pages/blog-single/blog-single.yml @@ -0,0 +1,2 @@ +title: Blog single +name: blog-single diff --git a/assets/config/typography.scss b/assets/config/typography.scss index a85d5eac7..8eb9b6c11 100644 --- a/assets/config/typography.scss +++ b/assets/config/typography.scss @@ -80,6 +80,8 @@ s { color: $gray-600; } blockquote, .blockquote { font-size: 1.5rem; + margin-bottom: 2.5rem; + margin-top: 2.5rem; } blockquote { diff --git a/package.json b/package.json index 6818921e6..6435b97e0 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "epfl-elements", - "version": "2.2.1", + "version": "2.3.1", "license": "MIT", "main": "index.html", "repository": {