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

edits for #116

Browse source
This commit is contained in:
Prasanta Kumar Dutta 2023-09-02 21:04:01 +05:30
parent c6a52df97e
commit 4767578aa4
7 changed files with 74 additions and 75 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -51,7 +51,7 @@
* of the text well. Can't ever be wider than `width`.
* @type {string}
*/
export let textWidth: ContainerWidth | null = null;
export let textWidth: ContainerWidth | null = 'normal';
let frameElement;

97
src/components/GraphicBlock/GraphicBlock.svelte
View file

@ -41,7 +41,7 @@
* of the text well. Can't ever be wider than `width`.
* @type {string}
*/
export let textWidth: ContainerWidth | null = null;
export let textWidth: ContainerWidth | null = 'normal';
/**
* Title of the graphic
@ -81,55 +81,53 @@
ariaLabel="{ariaLabel}"
class="graphic fmy-5 {cls}"
>
<div>
{#if $$slots.title}
<PaddingReset containerIsFluid="{width === 'fluid'}">
<TextBlock width="{textWidth}">
<!-- Custom title content -->
<slot name="title" />
</TextBlock>
</PaddingReset>
{:else if title}
<PaddingReset containerIsFluid="{width === 'fluid'}">
<TextBlock width="{textWidth}">
<h3>{title}</h3>
{#if description}
{@html marked(description)}
{/if}
</TextBlock>
</PaddingReset>
{/if}
<AriaHidden hidden="{!!$$slots.aria || !!ariaDescription}">
<!-- Graphic content -->
<slot />
</AriaHidden>
{#if $$slots.aria || ariaDescription}
<div class="visually-hidden">
{#if $$slots.aria}
<!-- Custom ARIA markup -->
<slot name="aria" />
{:else}
{@html marked(ariaDescription)}
{#if $$slots.title}
<PaddingReset containerIsFluid="{width === 'fluid'}">
<TextBlock width="{textWidth}">
<!-- Custom title content -->
<slot name="title" />
</TextBlock>
</PaddingReset>
{:else if title}
<PaddingReset containerIsFluid="{width === 'fluid'}">
<TextBlock width="{textWidth}">
<h3>{title}</h3>
{#if description}
{@html marked(description)}
{/if}
</div>
{/if}
{#if $$slots.notes}
<PaddingReset containerIsFluid="{width === 'fluid'}">
<TextBlock width="{textWidth}">
<!-- Custom notes content -->
<slot name="notes" />
</TextBlock>
</PaddingReset>
{:else if notes}
<PaddingReset containerIsFluid="{width === 'fluid'}">
<TextBlock width="{textWidth}">
<aside class="fmt-2">
{@html marked(notes)}
</aside>
</TextBlock>
</PaddingReset>
{/if}
</div>
</TextBlock>
</PaddingReset>
{/if}
<AriaHidden hidden="{!!$$slots.aria || !!ariaDescription}">
<!-- Graphic content -->
<slot />
</AriaHidden>
{#if $$slots.aria || ariaDescription}
<div class="visually-hidden">
{#if $$slots.aria}
<!-- Custom ARIA markup -->
<slot name="aria" />
{:else}
{@html marked(ariaDescription)}
{/if}
</div>
{/if}
{#if $$slots.notes}
<PaddingReset containerIsFluid="{width === 'fluid'}">
<TextBlock width="{textWidth}">
<!-- Custom notes content -->
<slot name="notes" />
</TextBlock>
</PaddingReset>
{:else if notes}
<PaddingReset containerIsFluid="{width === 'fluid'}">
<TextBlock width="{textWidth}">
<aside class="fmt-2">
{@html marked(notes)}
</aside>
</TextBlock>
</PaddingReset>
{/if}
</Block>
<!-- svelte-ignore css-unused-selector -->
@ -140,6 +138,7 @@
// Dek
p {
@include body-note;
@include font-light;
}
// Caption and Sources
aside {

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

@ -73,7 +73,7 @@
}
</script>
<Block width="{width}" class="headline text-center fmt-9 fmb-5 {cls}">
<Block width="{width}" class="headline text-center fmt-7 fmb-5 {cls}">
<header class="relative">
{#if $$slots.crown}
<div class="crown-container">

5
src/components/NoteText/NoteText.svelte
View file

@ -11,7 +11,7 @@
import Block from '../Block/Block.svelte';
</script>
<Block class="notes">
<Block class="notes fmt-5 fmb-7">
{#if text}
{@html marked.parse(text)}
{/if}
@ -22,9 +22,6 @@
@import '../../scss/mixins';
.article-block.notes {
@include fmb-9;
@include fmt-7;
h2,
h3,
h4,

2
src/components/SiteHeadline/SiteHeadline.svelte
View file

@ -70,7 +70,7 @@
}
</script>
<Block id="{id}" class="headline-container fmt-9 fmb-5 {cls}" width="normal">
<Block id="{id}" class="headline-container fmt-7 fmb-5 {cls}" width="normal">
<header class="headline">
<div class="title">
{#if section}

32
src/scss/reset/_typography.scss
View file

@ -12,7 +12,7 @@ body {
-moz-osx-font-smoothing: grayscale;
.theme {
font-size: calc(0.85 * var(--theme-font-size-base));
font-size: calc(0.9 * var(--theme-font-size-base));
color: var(--theme-colour-text-primary);
}
}
@ -56,26 +56,34 @@ h6 {
// Body text
//////////////
%body-type-block {
display: block;
@include body-text;
}
text {
@include body-note;
}
p {
@extend %body-type-block;
display: block;
@include body-text;
}
ol,
ul {
@extend %body-type-block;
padding-left: 2rem;
ol,
ul {
margin-bottom: 0;
display: block;
@include body-note;
@include fmb-5;
li {
@include fpl-1;
@include fmy-2;
@include font-regular;
}
}
ul {
@include fpl-2;
li::marker {
content: '–';
@include font-light;
@include text-secondary;
}
}

9
src/scss/tokens/text/mixins/_text-role.scss
View file

@ -44,6 +44,7 @@
@include leading-tight;
@include text-sm;
@include text-secondary;
@include font-semibold;
@include tracking-wide;
text-transform: uppercase;
@include fmt-4;
@ -64,8 +65,7 @@
@include fmt-0;
@include fmb-2;
@include font-note;
font-size: calc(0.85 * var(--theme-font-size-base));
@include font-light;
font-size: calc(0.9 * var(--theme-font-size-base));
@include text-primary;
@include leading-tight;
}
@ -87,8 +87,3 @@
text-decoration-thickness: 1px;
text-decoration-color: var(--theme-colour-text-secondary);
}
// @mixin \!h1 {
// @include \!text-primary;
// @include \!font-bold;
// }