From 43cfc5220af50d1174be55351669f8843e14fb77 Mon Sep 17 00:00:00 2001 From: Mandi Cai Date: Fri, 29 Jan 2021 17:47:16 -0500 Subject: [PATCH 1/9] Make queso-ified templates the default --- .../app/styles/_typography-queso.scss | 75 --------- .../__common__/app/styles/_typography.scss | 145 +++++------------- .../app/templates/macros/prose-queso.html | 11 -- templates/feature/app/index-queso.html | 81 ---------- templates/feature/app/index.html | 126 +++++++-------- templates/feature/app/styles/main-queso.scss | 30 ---- templates/feature/app/styles/main.scss | 37 ++--- .../templates/macros/processors-queso.html | 37 ----- .../app/templates/macros/processors.html | 4 +- 9 files changed, 125 insertions(+), 421 deletions(-) delete mode 100644 templates/__common__/app/styles/_typography-queso.scss delete mode 100644 templates/__common__/app/templates/macros/prose-queso.html delete mode 100644 templates/feature/app/index-queso.html delete mode 100644 templates/feature/app/styles/main-queso.scss delete mode 100644 templates/feature/app/templates/macros/processors-queso.html diff --git a/templates/__common__/app/styles/_typography-queso.scss b/templates/__common__/app/styles/_typography-queso.scss deleted file mode 100644 index fde98380..00000000 --- a/templates/__common__/app/styles/_typography-queso.scss +++ /dev/null @@ -1,75 +0,0 @@ -// Overrides of some queso helpers -// and additional data visuals helpers -.t-headline { - font-size: to-rem(24); - margin-top: 1em; - @include mq($from: s) { - font-size: to-rem(28); - } - @include mq($from: m) { - font-size: to-rem(32); - } -} - -.t-subheader { - font-weight: $font-weight-bold; - font-size: 1.4rem; - line-height: $line-height-subtitle; - margin-top: 1em; - margin-bottom: 1em; - margin: auto; - max-width: 24em; - - @include mq($from: m) { - font-size: 1.6rem; - line-height: 2.2rem; - } -} - -.t-byline { - &__item { - display: block; - margin-bottom: $size-tiny; - line-height: 1.3; - &:last-child { - margin-right: 0; - } - } - @include mq($until: bp-s) { - &__item { - margin-right: 0; - } - } - @include mq($from: bp-s) { - &__item { - display: inline-block; - } - } -} - -// Mirrored from old styles and adapted for queso -// For most forms of body copy. Takes most of its notes from the main site's -// body copy. Typically you'll be applying this to each

tag directly, NOT -// to the body copy's container. This makes it easier to float things around -// individual paragraphs. -.t-copy { - font-size: 1.125rem; - line-height: $line-height-body; - margin-bottom: 1em; // Ensures spacing below the

syncs up with font-size - margin-left: auto; // Centers

tag within max-width - margin-right: auto; // Centers

tag within max-width - margin-top: 1em; // Ensures spacing above the

syncs up with font-size - max-width: 34em; // Controls the measure - - &--subheader { - font-size: 1.4rem; - line-height: $line-height-subtitle; - max-width: 27em; - - @include mq($from: m) { - font-size: 1.6rem; - line-height: 2.2rem; - max-width: 24em; - } - } -} diff --git a/templates/__common__/app/styles/_typography.scss b/templates/__common__/app/styles/_typography.scss index 82d1f1d8..fde98380 100644 --- a/templates/__common__/app/styles/_typography.scss +++ b/templates/__common__/app/styles/_typography.scss @@ -1,118 +1,58 @@ -.article-header { - margin-bottom: $gutter; -} - -// The article's title. -.article-title { - font-family: $font-serif; +// Overrides of some queso helpers +// and additional data visuals helpers +.t-headline { font-size: to-rem(24); - font-weight: $font-weight-bold; - line-height: $line-height-title; - margin-bottom: 0.625em; - margin-left: auto; - margin-right: auto; margin-top: 1em; - max-width: 20em; - @include mq($from: s) { font-size: to-rem(28); - margin-bottom: 0.25rem; } - @include mq($from: m) { font-size: to-rem(32); } } -.article-byline { - color: $color-grey; - font-family: $font-sans-serif; - font-size: to-rem(14); - letter-spacing: 0.04em; - margin-bottom: 1em; - margin-top: 1em; - text-transform: uppercase; - - a { - @include default-uppercase-link; - } -} - -.article-author { - display: block; +.t-subheader { + font-weight: $font-weight-bold; + font-size: 1.4rem; line-height: $line-height-subtitle; - margin-bottom: $gutter-quarter; - - @include mq($from: s) { - display: inline; - margin-bottom: 0; - margin-right: $gutter; - } -} - -.article-pub-date { - display: block; + margin-top: 1em; + margin-bottom: 1em; + margin: auto; + max-width: 24em; - @include mq($from: s) { - display: inline; + @include mq($from: m) { + font-size: 1.6rem; + line-height: 2.2rem; } } -.article-pub-update-date { - display: block; - margin-top: $gutter-quarter; - - time { - @include mq($until: s) { - display: block; - margin-top: $gutter-quarter; +.t-byline { + &__item { + display: block; + margin-bottom: $size-tiny; + line-height: 1.3; + &:last-child { + margin-right: 0; } - - &:not(:first-child) { - margin-left: .625rem; - - @include mq($until: s) { - margin-left: 0; - } + } + @include mq($until: bp-s) { + &__item { + margin-right: 0; } } -} - -.article-shares { - display: flex; - flex-direction: row; - flex-wrap: wrap; - justify-content: center; - margin-bottom: $gutter; - margin-top: $gutter; - margin-left: auto; - margin-right: auto; - max-width: to-rem(300); -} - -.article-shares-button { - display: block; - flex-basis: 0; - flex-grow: 1; - font-size: 1rem; - max-width: 100%; - text-align: center; - - > svg { - vertical-align: bottom; + @include mq($from: bp-s) { + &__item { + display: inline-block; + } } } -.article-shares-button + .article-shares-button { - margin-left: $gutter-half; -} - +// Mirrored from old styles and adapted for queso // For most forms of body copy. Takes most of its notes from the main site's // body copy. Typically you'll be applying this to each

tag directly, NOT // to the body copy's container. This makes it easier to float things around // individual paragraphs. -.copy { - font-family: $font-serif; +.t-copy { font-size: 1.125rem; line-height: $line-height-body; margin-bottom: 1em; // Ensures spacing below the

syncs up with font-size @@ -121,22 +61,15 @@ margin-top: 1em; // Ensures spacing above the

syncs up with font-size max-width: 34em; // Controls the measure - > a { - @include default-link; - } -} - -.article-subheader { - font-weight: $font-weight-bold; - font-size: 1.4rem; - line-height: $line-height-subtitle; - margin-top: 1em; - margin-bottom: 1em; - max-width: 27em; + &--subheader { + font-size: 1.4rem; + line-height: $line-height-subtitle; + max-width: 27em; - @include mq($from: m) { - font-size: 1.6rem; - line-height: 2.2rem; - max-width: 24em; + @include mq($from: m) { + font-size: 1.6rem; + line-height: 2.2rem; + max-width: 24em; + } } } diff --git a/templates/__common__/app/templates/macros/prose-queso.html b/templates/__common__/app/templates/macros/prose-queso.html deleted file mode 100644 index b852b40c..00000000 --- a/templates/__common__/app/templates/macros/prose-queso.html +++ /dev/null @@ -1,11 +0,0 @@ -{% import 'macros/processors-queso.html' as processors %} - -{% macro prose(content, context, data) %} -{% for item in content %} - {% if processors[item.type] %} - {{ processors[item.type](item.value, context, data) }} - {% else %} - {{ processors['raw'](item.value, context, data) }} - {% endif %} -{% endfor %} -{% endmacro %} diff --git a/templates/feature/app/index-queso.html b/templates/feature/app/index-queso.html deleted file mode 100644 index bf17c55f..00000000 --- a/templates/feature/app/index-queso.html +++ /dev/null @@ -1,81 +0,0 @@ -{% extends 'base.html' %} -{% from 'macros/prose-queso.html' import prose %} -{% from 'macros/processors-queso.html' import ad %} - -{% set jsPackName = 'main' %} -{% set context = data.text %} -{% set authorComma = joiner() %} - -{% block google_fonts %}{# queso fonts found in CSS #}{% endblock google_fonts %} -{% block css_file %} - -{% endblock css_file %} - -{% block nav %}{% include 'components/navbar.html' %}{% endblock %} - -{% block content_wrap %} -

-
- {% block content %} -
-
-

{{ context.headline | widont or 'The only member-supported, digital-first, nonpartisan media organization' | widont }}

-

- By {%- for author in context.authors or ['Super Cool Corgi', 'Friends'] -%} - {% if not loop.last %}{{ authorComma() }}{% elif not loop.first %} and{% endif %} {{ author }} - {% endfor %} - - - {% if context.update_date %} - - Published: - Updated: - - {% else %} - - {% endif %} -

-
- - {% include 'components/share.html' %} -
- -
- {{ prose(context.prose, context, data) }} -

Duis mattis orci a porta maximus. Pellentesque vel pellentesque augue, a condimentum nibh. Integer eget feugiat turpis, at vehicula metus. Vestibulum arcu dui, hendrerit sed purus sed, vulputate aliquam est. Duis quis metus sed odio commodo dapibus. Maecenas pulvinar elit sit amet lorem iaculis blandit. Aliquam vitae sollicitudin urna. Sed viverra tincidunt felis.

- -

{{ 'A cool subhead here' | widont }}

- -

Curabitur vestibulum sagittis diam, vitae pulvinar lorem accumsan ut. Mauris enim massa, vestibulum sed sollicitudin dapibus, ultrices eget ligula. Aenean tempor mi urna, eu porta tortor vehicula quis. Morbi hendrerit, eros nec interdum tempus, sem purus fringilla leo, ut iaculis urna tortor id diam. Duis laoreet maximus sapien, sed scelerisque sapien volutpat vel. Sed est lacus, sollicitudin nec euismod eu, placerat eget turpis. Quisque ultricies urna et mollis bibendum. Quisque tempus, elit ut faucibus hendrerit, augue enim faucibus massa, eu scelerisque dui eros at dolor. Sed rutrum, ipsum id convallis facilisis, justo ex rhoncus ex, in ultrices nisi augue vitae erat. Donec consequat ipsum ac nunc aliquam, eu porttitor quam viverra. Praesent ultrices, diam eget placerat sodales, magna magna porttitor urna, nec mollis ipsum odio at magna. Nulla ac consectetur turpis. Cras non ligula elementum, aliquet arcu ut, interdum nulla.

- -

Nam ornare ante eget erat egestas, eget pulvinar diam tincidunt. Nunc eget ligula ac mi facilisis tempus. Proin molestie nisl at urna pharetra commodo. Praesent tincidunt vestibulum purus, id dictum tortor aliquet ac. Pellentesque semper scelerisque justo ac luctus. Nullam malesuada urna a magna fringilla bibendum. Mauris quis hendrerit nisl, a lacinia lectus.

-
- - {# use 'none' as the value if the ad shoud not have a gray background #} - {# do not put ads inside a container div #} - {{ ad('gray') }} - - {# create another container for more prose if the text needs to be split by an ad #} -
-

Curabitur vestibulum sagittis diam, vitae pulvinar lorem accumsan ut. Mauris enim massa, vestibulum sed sollicitudin dapibus, ultrices eget ligula. Aenean tempor mi urna, eu porta tortor vehicula quis. Morbi hendrerit, eros nec interdum tempus, sem purus fringilla leo, ut iaculis urna tortor id diam. Duis laoreet maximus sapien, sed scelerisque sapien volutpat vel. Sed est lacus, sollicitudin nec euismod eu, placerat eget turpis. Quisque ultricies urna et mollis bibendum. Quisque tempus, elit ut faucibus hendrerit, augue enim faucibus massa, eu scelerisque dui eros at dolor. Sed rutrum, ipsum id convallis facilisis, justo ex rhoncus ex, in ultrices nisi augue vitae erat. Donec consequat ipsum ac nunc aliquam, eu porttitor quam viverra. Praesent ultrices, diam eget placerat sodales, magna magna porttitor urna, nec mollis ipsum odio at magna. Nulla ac consectetur turpis. Cras non ligula elementum, aliquet arcu ut, interdum nulla.

- -

Nam ornare ante eget erat egestas, eget pulvinar diam tincidunt. Nunc eget ligula ac mi facilisis tempus. Proin molestie nisl at urna pharetra commodo. Praesent tincidunt vestibulum purus, id dictum tortor aliquet ac. Pellentesque semper scelerisque justo ac luctus. Nullam malesuada urna a magna fringilla bibendum. Mauris quis hendrerit nisl, a lacinia lectus.

-
- - {{ ad('gray', 'footer') }} - {% endblock content %} -
-
- -{% endblock content_wrap %} - -{% block inline_data %} - -{% endblock inline_data %} diff --git a/templates/feature/app/index.html b/templates/feature/app/index.html index 2f8a277c..0a47ec9d 100644 --- a/templates/feature/app/index.html +++ b/templates/feature/app/index.html @@ -3,70 +3,74 @@ {% from 'macros/processors.html' import ad %} {% set jsPackName = 'main' %} - -{# data.text --> data/text.json #} {% set context = data.text %} - -{# data.data --> data/data.json #} -{% set featureData = data.data %} - {% set authorComma = joiner() %} -{% block content %} -
-
-

{{ context.headline | widont or 'The only member-supported, digital-first, nonpartisan media organization' | widont }}

-

- By {%- for author in context.authors or ['Super Cool Corgi', 'Friends'] -%} - {% if not loop.last %}{{ authorComma() }}{% elif not loop.first %} and{% endif %} {{ author }} - {%- endfor -%} - - {% if context.update_date %} - - - - - {% else %} - - - - {% endif %} -

-
- - {% include 'includes/shares.html' %} -
- -
-
- {{ prose(context.prose, context, featureData) }} -

Duis mattis orci a porta maximus. Pellentesque vel pellentesque augue, a condimentum nibh. Integer eget feugiat turpis, at vehicula metus. Vestibulum arcu dui, hendrerit sed purus sed, vulputate aliquam est. Duis quis metus sed odio commodo dapibus. Maecenas pulvinar elit sit amet lorem iaculis blandit. Aliquam vitae sollicitudin urna. Sed viverra tincidunt felis.

- -

{{ 'A cool subhead here' | widont }}

- -

Curabitur vestibulum sagittis diam, vitae pulvinar lorem accumsan ut. Mauris enim massa, vestibulum sed sollicitudin dapibus, ultrices eget ligula. Aenean tempor mi urna, eu porta tortor vehicula quis. Morbi hendrerit, eros nec interdum tempus, sem purus fringilla leo, ut iaculis urna tortor id diam. Duis laoreet maximus sapien, sed scelerisque sapien volutpat vel. Sed est lacus, sollicitudin nec euismod eu, placerat eget turpis. Quisque ultricies urna et mollis bibendum. Quisque tempus, elit ut faucibus hendrerit, augue enim faucibus massa, eu scelerisque dui eros at dolor. Sed rutrum, ipsum id convallis facilisis, justo ex rhoncus ex, in ultrices nisi augue vitae erat. Donec consequat ipsum ac nunc aliquam, eu porttitor quam viverra. Praesent ultrices, diam eget placerat sodales, magna magna porttitor urna, nec mollis ipsum odio at magna. Nulla ac consectetur turpis. Cras non ligula elementum, aliquet arcu ut, interdum nulla.

- -

Nam ornare ante eget erat egestas, eget pulvinar diam tincidunt. Nunc eget ligula ac mi facilisis tempus. Proin molestie nisl at urna pharetra commodo. Praesent tincidunt vestibulum purus, id dictum tortor aliquet ac. Pellentesque semper scelerisque justo ac luctus. Nullam malesuada urna a magna fringilla bibendum. Mauris quis hendrerit nisl, a lacinia lectus.

-
-
- -{# use 'none' as the value if the ad shoud not have a gray background #} -{# do not put ads inside a container div #} -{{ ad('gray') }} - -{# create another container for more prose if the text needs to be split by an ad #} -
-

Curabitur vestibulum sagittis diam, vitae pulvinar lorem accumsan ut. Mauris enim massa, vestibulum sed sollicitudin dapibus, ultrices eget ligula. Aenean tempor mi urna, eu porta tortor vehicula quis. Morbi hendrerit, eros nec interdum tempus, sem purus fringilla leo, ut iaculis urna tortor id diam. Duis laoreet maximus sapien, sed scelerisque sapien volutpat vel. Sed est lacus, sollicitudin nec euismod eu, placerat eget turpis. Quisque ultricies urna et mollis bibendum. Quisque tempus, elit ut faucibus hendrerit, augue enim faucibus massa, eu scelerisque dui eros at dolor. Sed rutrum, ipsum id convallis facilisis, justo ex rhoncus ex, in ultrices nisi augue vitae erat. Donec consequat ipsum ac nunc aliquam, eu porttitor quam viverra. Praesent ultrices, diam eget placerat sodales, magna magna porttitor urna, nec mollis ipsum odio at magna. Nulla ac consectetur turpis. Cras non ligula elementum, aliquet arcu ut, interdum nulla.

- -

Nam ornare ante eget erat egestas, eget pulvinar diam tincidunt. Nunc eget ligula ac mi facilisis tempus. Proin molestie nisl at urna pharetra commodo. Praesent tincidunt vestibulum purus, id dictum tortor aliquet ac. Pellentesque semper scelerisque justo ac luctus. Nullam malesuada urna a magna fringilla bibendum. Mauris quis hendrerit nisl, a lacinia lectus.

-
- -{{ ad('gray', 'footer') }} - -
- -
-{% endblock content %} +{% block google_fonts %}{# queso fonts found in CSS #}{% endblock google_fonts %} +{% block css_file %} + +{% endblock css_file %} + +{% block nav %}{% include 'components/navbar.html' %}{% endblock %} + +{% block content_wrap %} +
+
+ {% block content %} +
+
+

{{ context.headline | widont or 'The only member-supported, digital-first, nonpartisan media organization' | widont }}

+

+ By {%- for author in context.authors or ['Super Cool Corgi', 'Friends'] -%} + {% if not loop.last %}{{ authorComma() }}{% elif not loop.first %} and{% endif %} {{ author }} + {% endfor %} + + + {% if context.update_date %} + + Published: + Updated: + + {% else %} + + {% endif %} +

+
+ + {% include 'components/share.html' %} +
+ +
+ {{ prose(context.prose, context, data) }} +

Duis mattis orci a porta maximus. Pellentesque vel pellentesque augue, a condimentum nibh. Integer eget feugiat turpis, at vehicula metus. Vestibulum arcu dui, hendrerit sed purus sed, vulputate aliquam est. Duis quis metus sed odio commodo dapibus. Maecenas pulvinar elit sit amet lorem iaculis blandit. Aliquam vitae sollicitudin urna. Sed viverra tincidunt felis.

+ +

{{ 'A cool subhead here' | widont }}

+ +

Curabitur vestibulum sagittis diam, vitae pulvinar lorem accumsan ut. Mauris enim massa, vestibulum sed sollicitudin dapibus, ultrices eget ligula. Aenean tempor mi urna, eu porta tortor vehicula quis. Morbi hendrerit, eros nec interdum tempus, sem purus fringilla leo, ut iaculis urna tortor id diam. Duis laoreet maximus sapien, sed scelerisque sapien volutpat vel. Sed est lacus, sollicitudin nec euismod eu, placerat eget turpis. Quisque ultricies urna et mollis bibendum. Quisque tempus, elit ut faucibus hendrerit, augue enim faucibus massa, eu scelerisque dui eros at dolor. Sed rutrum, ipsum id convallis facilisis, justo ex rhoncus ex, in ultrices nisi augue vitae erat. Donec consequat ipsum ac nunc aliquam, eu porttitor quam viverra. Praesent ultrices, diam eget placerat sodales, magna magna porttitor urna, nec mollis ipsum odio at magna. Nulla ac consectetur turpis. Cras non ligula elementum, aliquet arcu ut, interdum nulla.

+ +

Nam ornare ante eget erat egestas, eget pulvinar diam tincidunt. Nunc eget ligula ac mi facilisis tempus. Proin molestie nisl at urna pharetra commodo. Praesent tincidunt vestibulum purus, id dictum tortor aliquet ac. Pellentesque semper scelerisque justo ac luctus. Nullam malesuada urna a magna fringilla bibendum. Mauris quis hendrerit nisl, a lacinia lectus.

+
+ + {# use 'none' as the value if the ad shoud not have a gray background #} + {# do not put ads inside a container div #} + {{ ad('gray') }} + + {# create another container for more prose if the text needs to be split by an ad #} +
+

Curabitur vestibulum sagittis diam, vitae pulvinar lorem accumsan ut. Mauris enim massa, vestibulum sed sollicitudin dapibus, ultrices eget ligula. Aenean tempor mi urna, eu porta tortor vehicula quis. Morbi hendrerit, eros nec interdum tempus, sem purus fringilla leo, ut iaculis urna tortor id diam. Duis laoreet maximus sapien, sed scelerisque sapien volutpat vel. Sed est lacus, sollicitudin nec euismod eu, placerat eget turpis. Quisque ultricies urna et mollis bibendum. Quisque tempus, elit ut faucibus hendrerit, augue enim faucibus massa, eu scelerisque dui eros at dolor. Sed rutrum, ipsum id convallis facilisis, justo ex rhoncus ex, in ultrices nisi augue vitae erat. Donec consequat ipsum ac nunc aliquam, eu porttitor quam viverra. Praesent ultrices, diam eget placerat sodales, magna magna porttitor urna, nec mollis ipsum odio at magna. Nulla ac consectetur turpis. Cras non ligula elementum, aliquet arcu ut, interdum nulla.

+ +

Nam ornare ante eget erat egestas, eget pulvinar diam tincidunt. Nunc eget ligula ac mi facilisis tempus. Proin molestie nisl at urna pharetra commodo. Praesent tincidunt vestibulum purus, id dictum tortor aliquet ac. Pellentesque semper scelerisque justo ac luctus. Nullam malesuada urna a magna fringilla bibendum. Mauris quis hendrerit nisl, a lacinia lectus.

+
+ + {{ ad('gray', 'footer') }} + {% endblock content %} +
+
+ +{% endblock content_wrap %} {% block inline_data %} - - - + + {% block google_fonts %} + + + + + + + + {% endblock google_fonts %} + + {% block css_file %}{% endblock css_file %} {% block head_scripts %} {{ javascriptPack(jsPackName, { mjs: true }) }} {% endblock head_scripts %} diff --git a/templates/graphic/app/templates/macros/processors.html b/templates/graphic/app/templates/macros/processors.html index 5a33ec6b..dcfbe221 100644 --- a/templates/graphic/app/templates/macros/processors.html +++ b/templates/graphic/app/templates/macros/processors.html @@ -5,11 +5,11 @@ {% endmacro %} {% macro text(value, context, data) %} -

{{ value | renderStringWithNunjucks(data) }}

+

{{ value | renderStringWithNunjucks(data) }}

{% endmacro %} {% macro list(value) %} -