wires/hypnagaga
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

buncha stuff

Browse source
This commit is contained in:
Jon McClure 2022-08-14 20:00:21 +01:00
parent e50c078ddf
commit a09b510dc2
27 changed files with 561 additions and 153 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
bin/newComponent/template/YourComponent/YourComponent.svelte
View file

@ -21,23 +21,23 @@
/** Width of the component within the text well. */
export let width: ContainerWidth = 'normal';
import Block from '../../Block/Block.svelte';
</script>
<section class="photo {width}">
<Block {width} cls="photo">
<div
style:background-image={`url(${src})`}
style:height={`${height}px`}
/>
<p class="visually-hidden">{altText}</p>
</section>
</Block>
<style lang="scss">
section.photo {
div {
width: 100%;
background-repeat: no-repeat;
background-size: cover;
}
div {
width: 100%;
background-repeat: no-repeat;
background-size: cover;
}
.visually-hidden {
clip: rect(0 0 0 0);

15
src/components/DatawrapperChart/DatawrapperChart.stories.svelte
View file

@ -38,24 +38,19 @@
src: 'https://graphics.reuters.com/USA-ABORTION/lgpdwggnwvo/media-embed.html',
id: 'abortion-rights-map',
ariaLabel: 'map',
title: 'Global abortion access',
frameTitle: 'Global abortion access',
}}
/>
<Story name="With chatter" {...withStoryDocs(withChatterDocs)}>
<DatawrapperChart
title='Global abortion access'
frameTitle='Global abortion access'
ariaLabel='map'
id='abortion-rights-map'
src='https://graphics.reuters.com/USA-ABORTION/lgvdwemlbpo/media-embed.html'
title="Global abortion access"
description="A map of worldwide access to abortion."
notes={'Note: Different indicators and additional restrictions, including different gestational limits, apply in some countries. Refer to source for full classification. Current as of May 4, 2022.\n\nSource: Center for Reproductive Rights'}
>
<div slot="title" class="title">
<h3>Global abortion access</h3>
<p>A map of worldwide access to abortion.</p>
</div>
<aside slot="notes">
<p class="note">Note: Different indicators and additional restrictions, including different gestational limits, apply in some countries. Refer to source for full classification. Current as of May 4, 2022.</p>
<p class="source">Source: Center for Reproductive Rights</p>
</aside>
</DatawrapperChart>
</Story>

57
src/components/DatawrapperChart/DatawrapperChart.svelte
View file

@ -1,17 +1,33 @@
<script lang="ts">
import { onMount } from 'svelte';
import Block from '../Block/Block.svelte';
import GraphicBlock from '../GraphicBlock/GraphicBlock.svelte';
/**
* Title of the graphic
* @type {string}
*/
export let title: string | null = null;
/**
* Description of the graphic, passed in as a markdown string.
* @type {string}
*/
export let description: string | null = null;
/**
* iFrame title
* iframe title
* @required
*/
export let title: string = '';
export let frameTitle: string = '';
/**
* Notes to the graphic, passed in as a markdown string.
* @type {string}
*/
export let notes: string | null = null;
/**
* iFrame aria label
* iframe aria label
* @required
*/
export let ariaLabel: string = '';
/** iFrame id */
/** iframe id */
export let id: string = '';
/**
* Datawrapper embed URL
@ -21,13 +37,21 @@
type ScrollingOption = 'auto' | 'yes' | 'no';
/** iFrame scrolling option */
/** iframe scrolling option */
export let scrolling: ScrollingOption = 'no';
type ContainerWidth = 'normal' | 'wide' | 'wider' | 'widest' | 'fluid';
/** Width of the chart within the text well. */
export let width: ContainerWidth = 'normal'; // options: wide, wider, widest, fluid
/**
* Set a different width for the text within the text well, for example,
* "normal" to keep the title, description and notes inline with the rest
* of the text well. Can't ever be wider than `width`.
* @type {string}
*/
export let textWidth: ContainerWidth | null = null;
onMount(() => {
if (typeof window !== 'undefined') {
window.addEventListener('message', function (e) {
@ -46,32 +70,29 @@
});
</script>
<Block cls="graphic" {width}>
<GraphicBlock {width} {textWidth} {title} {description} {notes}>
{#if $$slots.title}
<div class="chatter-container">
<!-- Custom headline and chatter slot -->
<slot name="title" />
</div>
<!-- Custom headline and chatter slot -->
<slot name="title" />
{/if}
<div class="datawrapper-chart">
<iframe
title="{title}"
title="{frameTitle}"
aria-label="{ariaLabel}"
id="{id}"
src="{src}"
scrolling="{scrolling}"
frameborder="0"
style="width: 0; min-width: 100% !important; border: none;"></iframe>
style="width: 0; min-width: 100% !important; border: none;"
></iframe>
</div>
{#if $$slots.notes}
<div class="chatter-container">
<!-- Custom notes and source slot -->
<slot name="notes" />
</div>
<!-- Custom notes and source slot -->
<slot name="notes" />
{/if}
</Block>
</GraphicBlock>
<style lang="scss">
.datawrapper-chart {

9
src/components/DatawrapperChart/stories/docs/withChatter.md
View file

@ -1,4 +1,5 @@
By default, Datawrapper will export your chart with the title, chatter and notes. At the moment, these
don't match our styles, can't be made to fit into the well and will necessarily stretch to fit the graph width and
can't be modified. You can do all of these things by removing all the text from your Datawrapper chart before
publishing it and instead adding whatever you need inside the component via slots as below.
By default, Datawrapper will export your chart with the chart chatter like title, description and notes.
At the moment, these don't _exactly_ match our styles and can't be made to fit into the article well.
Instead, it's often better to remove all the text from your Datawrapper chart before publishing it and add that text back via the component props.

82
src/components/GraphicBlock/GraphicBlock.stories.svelte Normal file
View file

@ -0,0 +1,82 @@
<script>
import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
// @ts-ignore
import componentDocs from './stories/docs/component.md?raw';
// @ts-ignore
import customTextDocs from './stories/docs/customText.md?raw';
import GraphicBlock from './GraphicBlock.svelte';
import { withComponentDocs, withStoryDocs } from '$docs/utils/withParams.js';
// @ts-ignore
import PlaceholderImg from './stories/placeholder.png';
const meta = {
title: 'Components/GraphicBlock',
component: GraphicBlock,
...withComponentDocs(componentDocs),
// https://storybook.js.org/docs/svelte/essentials/controls
argTypes: {
width: {
control: 'select',
options: ['normal', 'wide', 'wider', 'widest', 'fluid'],
},
textWidth: {
control: 'select',
options: ['normal', 'wide', 'wider', 'widest', 'fluid'],
},
},
};
</script>
<Meta {...meta} />
<Template let:args>
<GraphicBlock {...args}>
<div class="demo-graphic">
<img src="{PlaceholderImg}" alt="placeholder" />
</div>
</GraphicBlock>
</Template>
<Story
name="Basic"
args="{{
width: 'normal',
title: 'Bacon ipsum dolor amet t-bone',
description: "Pork loin t-bone jowl prosciutto, short loin flank kevin tri-tip cupim pig pork. Meatloaf tri-tip frankfurter short ribs, cupim brisket bresaola chislic tail jerky burgdoggen pancetta.",
notes: "Note: Data current as of Aug. 2, 2022.\n\nSource: [Google research](https://google.com)"
}}"
/>
<Story
name="Custom text"
{...withStoryDocs(customTextDocs)}
>
<GraphicBlock
width="normal"
notes={"Note: Data current as of Aug. 2, 2022.\n\nSource: [Google research](https://google.com)"}
>
<div slot="title">
<h5>My smaller title</h5>
</div>
<div class="demo-graphic">
<img src="{PlaceholderImg}" alt="placeholder" />
</div>
</GraphicBlock>
</Story>
<style lang="scss">
div.demo-graphic {
height: 400px;
background-color: #ddd;
display: flex;
align-items: center;
justify-content: center;
img {
opacity: 0.4;
}
}
</style>

111
src/components/GraphicBlock/GraphicBlock.svelte Normal file
View file

@ -0,0 +1,111 @@
<script lang="ts">
// You can declare custom types to help users implement your component.
type ContainerWidth = 'normal' | 'wide' | 'wider' | 'widest' | 'fluid';
/**
* Width of the component within the text well.
* @type {string}
*/
export let width: ContainerWidth = 'normal';
/**
* Add an id to the block tag to target it with custom CSS.
* @type {string}
*/
export let id: string = '';
/**
* Add extra classes to the block tag to target it with custom CSS.
* @type {string}
*/
export let cls: string = '';
/** Snap block to column widths, rather than fluidly resizing them. */
export let snap: boolean = false;
/** By default, all blocks have a margin bottom, except the last child. Set to `false` to remove this margin or set a `cls`/`id` and target with custom CSS. */
export let noMargin: boolean = false;
/**
* ARIA [role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles) for the block
* @type {string}
*/
export let role: string | null = null;
/**
* Notes to the graphic, passed in as a markdown string.
* @type {string}
*/
export let notes: string | null = null;
/**
* Set a different width for the text within the text well, for example,
* "normal" to keep the title, description and notes inline with the rest
* of the text well. Can't ever be wider than `width`.
* @type {string}
*/
export let textWidth: ContainerWidth | null = null;
/**
* Title of the graphic
* @type {string}
*/
export let title: string | null = null;
/**
* Description of the graphic, passed in as a markdown string.
* @type {string}
*/
export let description: string | null = null;
/**
* ARIA [label](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label) for the block
* @type {string}
*/
export let ariaLabel: string = 'chart';
import GraphicBlockTextWrapper from "./GraphicBlockTextWrapper.svelte";
import Block from "../Block/Block.svelte";
import { marked } from 'marked';
</script>
<Block {id} {snap} {noMargin} {role} {width} {ariaLabel} cls="graphic {cls}">
<div>
{#if $$slots.title}
<GraphicBlockTextWrapper width={textWidth}>
<!-- Custom title content -->
<slot name="title" />
</GraphicBlockTextWrapper>
{:else if (title)}
<GraphicBlockTextWrapper width={textWidth}>
<h3>{title}</h3>
{#if (description)}
{@html marked(description)}
{/if}
</GraphicBlockTextWrapper>
{/if}
<!-- Graphic content -->
<slot></slot>
{#if $$slots.notes}
<GraphicBlockTextWrapper width={textWidth}>
<!-- Custom notes content -->
<slot name="notes" />
</GraphicBlockTextWrapper>
{:else if (notes)}
<GraphicBlockTextWrapper width={textWidth}>
<aside>
{@html marked(notes)}
</aside>
</GraphicBlockTextWrapper>
{/if}
</div>
</Block>
<!-- svelte-ignore css-unused-selector -->
<style lang="scss">
@import "../../scss/mixins";
div {
:global {
@include graphic-text;
}
}
</style>

15
src/components/GraphicBlock/GraphicBlockTextWrapper.svelte Normal file
View file

@ -0,0 +1,15 @@
<script lang="ts">
type ContainerWidth = 'normal' | 'wide' | 'wider' | 'widest' | 'fluid';
/** Width of the component within the text well. */
export let width: ContainerWidth | null = null;
import Block from "../Block/Block.svelte";
</script>
{#if (width)}
<Block {width} noMargin={true}>
<slot></slot>
</Block>
{:else}
<slot></slot>
{/if}

21
src/components/GraphicBlock/stories/docs/component.md Normal file
View file

@ -0,0 +1,21 @@
The `GraphicBlock` component is a more specific type of `Block` that handles text elements around your chart.
Many other components use this one to wrap graphics with styled text. When you use it, you'll also wrap your chart elements or component with it like this:
---
```svelte
<script>
import { GraphicBlock } from '@reuters-graphics/graphics-svelte-components';
</script>
<GraphicBlock
width="normal"
title="Title for my chart"
description="Pork loin t-bone jowl prosciutto, short loin flank kevin tri-tip cupim pig pork. Meatloaf tri-tip frankfurter short ribs, cupim brisket bresaola chislic tail jerky burgdoggen pancetta."
notes="Note: Data current as of Aug. 2, 2022.\n\nSource: [Google research](https://google.com)"
>
<div id="my-chart"/>
</GraphicBlock>
```

11
src/components/GraphicBlock/stories/docs/customText.md Normal file
View file

@ -0,0 +1,11 @@
You can override the markup used to generate the chart text elements by using the `title` and/or `notes` named slots like this:
```svelte
<GraphicBlock
width="normal"
notes={"Note: Data current as of Aug. 2, 2022.\n\nSource: [Google research](https://google.com)"}
>
<h5 slot="title">My smaller title</h5>
<div id="my-chart" />
</GraphicBlock>
```

BIN
src/components/GraphicBlock/stories/placeholder.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 2.3 KiB

139
src/components/Headline/Headline.svelte
View file

@ -15,48 +15,53 @@
* Section colour
*/
export let sectionColour: string = 'red';
import Block from '../Block/Block.svelte';
</script>
<header class="headline">
<!-- Crown named slot -->
<slot name="crown"></slot>
<div class="title">
{#if section}
<p class={`section-title color-${sectionColour}`}>{section}</p>
{/if}
{#if $$slots.hed}
<!-- Headline override named slot -->
<slot name="hed"></slot>
{:else}
<h1>{hed}</h1>
{/if}
{#if dek}
<p>{dek}</p>
{/if}
</div>
{#if ($$slots.byline || $$slots.dateline)}
<aside class="article-metadata">
{#if $$slots.byline}
<div class="byline-container">
<div class="byline">
<!-- Byline named slot -->
<slot name="byline"></slot>
</div>
</div>
<Block>
<header class="headline">
<!-- Crown named slot -->
<slot name="crown"></slot>
<div class="title">
{#if section}
<p class={`section-title color-${sectionColour}`}>{section}</p>
{/if}
{#if $$slots.dateline}
<div class="dateline-container">
<div class="published">
<!-- Dateline named slot -->
<slot name="dateline"></slot>
</div>
</div>
{#if $$slots.hed}
<!-- Headline override named slot -->
<slot name="hed"></slot>
{:else}
<h1>{hed}</h1>
{/if}
</aside>
{/if}
</header>
{#if dek}
<p>{dek}</p>
{/if}
</div>
{#if ($$slots.byline || $$slots.dateline)}
<aside class="article-metadata">
{#if $$slots.byline}
<div class="byline-container">
<div class="byline">
<!-- Byline named slot -->
<slot name="byline"></slot>
</div>
</div>
{/if}
{#if $$slots.dateline}
<div class="dateline-container">
<div class="published">
<!-- Dateline named slot -->
<slot name="dateline"></slot>
</div>
</div>
{/if}
</aside>
{/if}
</header>
</Block>
<style lang="scss">
@import "@reuters-graphics/style-color/scss/thematic/brand";
@import "../../scss/mixins";
header.headline {
@ -64,21 +69,57 @@
margin-top: 4rem;
margin-bottom: 3rem;
h1 {
font-size: 4rem;
margin: 5px 0;
line-height: 1.1;
:global {
h1 {
font-size: 4rem;
margin: 5px 0;
line-height: 1.1;
}
p {
@include font-display;
margin: 0;
font-weight: 200;
&.section-title {
font-size: 1rem;
font-weight: 800;
}
}
}
.article-metadata {
padding: 40px 0;
@include font-sans;
text-align: center;
.byline-container {
margin-bottom: 2px;
}
.byline {
:global {
a {
color: $brand-text;
text-decoration: none;
}
}
}
.dateline-container {
text-transform: uppercase;
color: $brand-text-secondary;
font-size: 0.8rem;
line-height: 1.2rem;
}
}
p {
@include font-display;
margin: 0;
font-weight: 200;
&.section-title {
font-size: 1rem;
font-weight: 800;
section.headline {
.article-metadata {
padding: 2rem 0 0;
}
}
}

2
src/components/SiteFooter/Referrals/Referrals.svelte
View file

@ -52,5 +52,7 @@
.row {
margin-right: -10px;
margin-left: -10px;
display: flex;
flex-wrap: wrap;
}
</style>

4
src/components/SiteFooter/Referrals/index.svelte
View file

@ -37,6 +37,10 @@
color: var(--nav-primary, #666);
a {
color: var(--nav-primary, #666);
text-decoration: none;
&:hover {
text-decoration: underline;
}
}
}
}

3
src/components/SiteFooter/SiteFooter.stories.svelte
View file

@ -71,6 +71,7 @@
<style>
div {
min-height: 89px;
width: calc(100% + 30px);
margin-left: -15px;
}
</style>

11
src/components/SiteFooter/SiteFooter.svelte
View file

@ -66,13 +66,22 @@
</div>
</footer>
<!-- svelte-ignore css-unused-selector -->
<style lang="scss">
footer {
margin-top: 3rem;
margin-top: 4rem;
background-color: var(--nav-background, #fff);
div {
max-width: 1400px;
margin: 0 auto;
}
:global {
a {
text-decoration: none;
&:hover {
text-decoration: underline;
}
}
}
}
</style>

2
src/components/SiteHeader/NavBar/NavDropdown/SectionDropdown.svelte
View file

@ -49,7 +49,7 @@
a {
text-decoration: none;
&:hover {
color: inherit;
color: var(--nav-primary, $tr-dark-grey);
text-decoration: underline !important;
}
}

4
src/components/SiteHeader/SiteHeader.stories.svelte
View file

@ -27,7 +27,7 @@
<Meta {...meta} />
<Template let:args>
<div class="cancel-article">
<div>
<SiteHeader {...args} />
</div>
</Template>
@ -46,7 +46,7 @@
<style>
div.cancel-article {
div {
min-height: 625px;
width: calc(100% + 30px);
margin-left: -15px;

5
src/index.js
View file

@ -1,13 +1,16 @@
// export { default as Ai2svelte } from './Ai2svelte/index.svelte';
export { default as Article } from './components/Article/Article.svelte';
export { default as BeforeAfter } from './components/BeforeAfter/BeforeAfter.svelte';
export { default as Block } from './components/Block/Block.svelte';
export { default as BodyText } from './components/BodyText/BodyText.svelte';
export { default as DatawrapperChart } from './components/DatawrapperChart/DatawrapperChart.svelte';
export { default as EmbedPreviewerLink } from './components/EmbedPreviewerLink/EmbedPreviewerLink.svelte';
export { default as NoteText } from './components/NoteText/NoteText.svelte';
export { default as FeaturePhoto } from './components/FeaturePhoto/FeaturePhoto.svelte';
export { default as Framer } from './components/Framer/Framer.svelte';
export { default as GraphicBlock } from './components/GraphicBlock/GraphicBlock.svelte';
export { default as Headline } from './components/Headline/Headline.svelte';
export { default as Hero } from './components/Hero/Hero.svelte';
export { default as NoteText } from './components/NoteText/NoteText.svelte';
export { default as PymChild } from './components/PymChild/PymChild.svelte';
export { default as ReutersLogo } from './components/ReutersLogo/ReutersLogo.svelte';
// export { default as Scroller } from './Scroller/index.svelte';

1
src/scss/_mixins.scss
View file

@ -1,4 +1,5 @@
@import "mixins/block";
@import "mixins/body-text";
@import "mixins/fonts";
@import "mixins/graphic";
@import "mixins/note-text";

20
src/scss/bootstrap/_main.scss
View file

@ -12,16 +12,16 @@
// Layout & components
@import "bootstrap/scss/root";
@import "bootstrap/scss/reboot";
// @import "bootstrap/scss/type";
// @import "bootstrap/scss/images";
// @import "bootstrap/scss/containers";
// @import "bootstrap/scss/grid";
// @import "bootstrap/scss/tables";
// @import "bootstrap/scss/forms";
// @import "bootstrap/scss/buttons";
// @import "bootstrap/scss/transitions";
// @import "bootstrap/scss/dropdown";
// @import "bootstrap/scss/button-group";
@import "bootstrap/scss/type";
@import "bootstrap/scss/images";
@import "bootstrap/scss/containers";
@import "bootstrap/scss/grid";
@import "bootstrap/scss/tables";
@import "bootstrap/scss/forms";
@import "bootstrap/scss/buttons";
@import "bootstrap/scss/transitions";
@import "bootstrap/scss/dropdown";
@import "bootstrap/scss/button-group";
// // Helpers
// @import "bootstrap/scss/helpers";

40
src/scss/colours/thematic/_nord.scss Normal file
View file

@ -0,0 +1,40 @@
$nord-0: #2E3440;
$nord-polar-night-0: #2E3440;
$nord-black: #2E3440;
$nord-1: #3B4252;
$nord-polar-night-1: #3B4252;
$nord-2: #434C5E;
$nord-polar-night-2: #434C5E;
$nord-3: #4C566A;
$nord-polar-night-3: #4C566A;
$nord-4: #D8DEE9;
$nord-snow-storm-0: #D8DEE9;
$nord-5: #E5E9F0;
$nord-snow-storm-1: #E5E9F0;
$nord-6: #ECEFF4;
$nord-snow-storm-2: #ECEFF4;
$nord-white: #ECEFF4;
$nord-7: #8FBCBB;
$nord-frost-0: #8FBCBB;
$nord-8: #88C0D0;
$nord-frost-1: #88C0D0;
$nord-9: #81A1C1;
$nord-frost-2: #81A1C1;
$nord-10: #5E81AC;
$nord-frost-3: #5E81AC;
$nord-blue: #5E81AC;
$nord-11: #BF616A;
$nord-aurora-0: #BF616A;
$nord-red: #BF616A;
$nord-12: #D08770;
$nord-aurora-1: #D08770;
$nord-orange: #D08770;
$nord-13: #EBCB8B;
$nord-aurora-2: #EBCB8B;
$nord-yellow: #EBCB8B;
$nord-14: #A3BE8C;
$nord-aurora-3: #A3BE8C;
$nord-green: #A3BE8C;
$nord-15: #B48EAD;
$nord-aurora-4: #B48EAD;
$nord-purple: #B48EAD;

27
src/scss/colours/thematic/_tr.scss Normal file
View file

@ -0,0 +1,27 @@
// Brand colours from RCOM's raptor system
// https://github.com/tr/rcom-arc_raptor-ui/blob/develop/packages/rcom-raptor-ui_atomic/styles/_colors.scss
$tr-orange: #fa6400;
$tr-dark-orange: #dc4300;
$tr-light-orange: #ffa100;
$tr-dark-grey: #404040;
$tr-medium-grey: #666666;
$tr-light-grey: #afafaf;
$tr-muted-grey: #d0d0d0;
$tr-contrast-grey: #949494;
$tr-hover-background-grey: #f8f8f8;
$tr-light-muted-grey: #f4f4f4;
$tr-ultra-light-grey: #fafafa;
$tr-dark-blue: #005da2;
$tr-light-blue: #0099c4;
$tr-muted-blue: #4386B9;
$tr-lighter-blue: #7FACCE;
$tr-superlight-blue: #e5eef5;
$tr-dark-purple: #621f95;
$tr-light-purple: #6e3ab7;
$tr-dark-red: #a00000;
$tr-light-red: #dc0a0a;
$tr-dark-green: #387c2b;
$tr-light-green: #77a22d;
$black: #000;
$white: #fff;
$ad-placeholder: #ffb1b1;

41
src/scss/components/_graphic.scss
View file

@ -1,41 +0,0 @@
@import "~@reuters-graphics/style-color/scss/sequential/sesame";
$well-regular: 660px !default;
$well-wide: 930px !default;
$well-wider: 1200px !default;
$graphic-narrower: 330px !default;
$graphic-narrow: 510px !default;
$grid-gutter-width: 30px; // The bootstrap default variable
$component-margin: 3rem !default;
section.graphic {
margin-top: $component-margin;
margin-bottom: $component-margin;
@extend .font-sans;
&.bordered {
@extend .separated;
}
h3 {
margin-bottom: 0.5rem;
}
p {
@extend .font-sans;
@extend .paragraph-size;
}
// Use for footnotes and source lines
aside {
p {
@extend .small-size;
margin-bottom: 5px;
color: $brand-text-secondary;
}
}
}

1
src/scss/main.scss
View file

@ -18,4 +18,3 @@
// Components
@import "components/article-metadata";
@import "components/graphic";

12
src/scss/mixins/_body-text.scss
View file

@ -1,8 +1,6 @@
@import "@reuters-graphics/style-color/scss/sequential/sesame";
@import "@reuters-graphics/style-color/scss/thematic/brand";
@import "fonts";
@import "../typography/font-size";
@import "../colours/thematic/tr";
@mixin body-text {
p,
@ -16,6 +14,8 @@
-webkit-font-smoothing: antialiased;
color: $tr-dark-grey;
a {
color: currentColor;
background-size: 1px 1px;
@ -48,7 +48,7 @@
&::after {
display: block;
content: '';
background: $brand-secondary;
background: $tr-medium-grey;
height: 3px;
width: 100px;
margin: 10px auto 2rem;
@ -65,7 +65,7 @@
blockquote {
margin: 30px 0;
border-left: 2px solid $brand-secondary;
border-left: 2px solid $tr-medium-grey;
padding-left: 15px;
p {
@ -79,7 +79,7 @@
margin: -5px 0 0;
p {
color: $gray-500;
color: $tr-dark-grey;
font-size: 1rem;
@media(max-width: 540px) {

64
src/scss/mixins/_graphic.scss Normal file
View file

@ -0,0 +1,64 @@
@import "../colours/thematic/tr";
@import "fonts";
@mixin graphic-text {
h3 {
margin-bottom: 0.5rem;
color: $tr-dark-grey;
}
p {
-webkit-font-smoothing: antialiased;
@include font-display;
font-size: 1.1rem;
line-height: 1.5rem;
color: $tr-dark-grey;
margin-bottom: 1rem;
// &:last-of-type {
// margin-bottom: 0;
// }
@media(max-width: 540px) {
font-size: 1rem;
line-height: 1.35rem;
}
a {
color: currentColor;
background-size: 1px 1px;
background-image: url('data:image/svg+xml;utf8,<svg preserveAspectRatio="none" viewBox="0 0 1 1" xmlns="http://www.w3.org/2000/svg"><line x1="0" y1="0" x2="2" y2="2" stroke="rgba(0, 0, 0, 0.8)" /></svg>');
background-position: 0 1.1rem;
background-repeat: repeat-x;
text-decoration: none;
&:hover {
text-decoration: none;
}
}
}
// Used for footnotes and source lines
aside {
p {
@include font-display;
margin-bottom: 0;
color: $tr-medium-grey;
font-size: 0.9rem;
line-height: 1.2rem;
@media(max-width: 540px) {
font-size: 0.8rem;
line-height: 1.1rem;
}
a {
color: currentColor;
text-decoration: underline;
&:hover {
text-decoration: underline;
}
}
}
}
}

1
src/scss/mixins/_note-text.scss
View file

@ -10,6 +10,7 @@
margin: 1rem 0 0;
font-size: 1rem;
letter-spacing: 0.5px;
}
p {