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

style siteheadline as example

Browse source
This commit is contained in:
Jon McClure 2023-07-25 18:48:09 +01:00
parent be8ff06239
commit e89408ccb0
27 changed files with 232 additions and 180 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

31
.storybook/preview.scss
View file

@ -10,6 +10,9 @@ table.docblock-argstable {
}
div.sbdocs-content {
h1 {
font-family: 'Knowledge', sans-serif;
}
& > h2, & > div > div > h2 {
margin-top: 4rem;
margin-bottom: 2rem;
@ -34,15 +37,38 @@ div.sbdocs-content {
line-height: 22px;
}
}
& > div > :where(p, ul, ol),
.sb-anchor > div > :where(p, ul, ol) {
font-size: 18px;
line-height: 29px;
font-family: 'Knowledge', sans-serif;
.highlight {
background-color: rgb(254, 254, 160);
padding: 0 4px;
}
.bold {
font-weight: bold;
}
a {
font-family: 'Knowledge', sans-serif;
color: #0071a1;
text-decoration: none;
text-underline-offset: 2px;
&:hover {
text-decoration: underline;
}
}
}
}
.sbdocs {
.sbdocs-content div.sbdocs:not(.sb-unstyled) {
font-family: 'Knowledge', sans-serif;
h1 {
font-family: 'Knowledge', sans-serif;
}
p, ul, li {
font-size: 18px;
line-height: 29px;
@ -56,7 +82,6 @@ div.sbdocs-content {
font-weight: bold;
}
}
a {
font-family: 'Knowledge', sans-serif;
color: #0071a1;

10
bin/css-to-js/index.js
View file

@ -131,7 +131,15 @@ const capitalize = function capitalize(str) {
};
const sanitize = function sanitize(name) {
return name.replace(/\*/g, 'all-children').replace(/#/g, '$').replace(/\s\s+/g, ' ').replace(/[^a-zA-Z0-9$]/g, '_').replace(/^_+/g, '').replace(/_+$/g, '');
return name
.replace(/\*/g, 'all-children')
.replace(/#/g, '$')
.replace(/\s\s+/g, ' ')
.replace(/(\d)\\\.(\d)/g, '$1|$2') // Added for escaped dots like ".mb-0\.5"
.replace(/[^a-zA-Z0-9$|]/g, '_')
.replace(/^_+/g, '')
.replace(/_+$/g, '')
.replace('|', '.');
};
const fontface = function fontface(rule, result) {

8
src/components/Framer/Typeahead/index.svelte
View file

@ -188,7 +188,7 @@
results.length > 0
? `${id}-result-${selectedIndex}`
: null}"
bind:value
bind:value="{value}"
on:type
on:input
on:change
@ -265,7 +265,7 @@
</div>
<style lang="scss">
@import '../../../scss/fonts/mixins';
@import '../../../scss/mixins';
[data-svelte-typeahead] {
position: relative;
@ -292,7 +292,7 @@
li,
li.no-results {
padding: 0.25rem 1rem;
@include font-display;
@include font-sans;
color: #333;
}
li.no-results {
@ -335,7 +335,7 @@
display: inline-flex;
font-size: 0.75rem;
color: #aaa;
@include font-display;
@include font-sans;
}
:global([data-svelte-search] input) {

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

@ -76,35 +76,34 @@
text-align: center;
margin-top: 4rem;
margin-bottom: 0;
color: var(--theme-colour-text-primary);
@include text-primary;
:global {
h1 {
font-size: 4rem;
margin: 5px 0;
line-height: 1.2;
// font-family: var(--theme-font-family-hed, $font-family-display);
@include font-sans;
color: var(--theme-colour-text-primary);
@include text-primary;
}
p {
font-family: var(--theme-font-family-subhed);
color: var(--theme-colour-text-primary);
@include font-sans;
@include text-primary;
margin: 0;
font-weight: 200;
&.section-title {
font-size: 1rem;
font-weight: 800;
color: var(--theme-colour-accent);
@include text-accent;
}
}
}
.article-metadata {
padding: 40px 0;
font-family: var(--theme-font-family-note);
color: var(--theme-colour-text-primary);
@include font-sans;
@include text-primary;
text-align: center;
@ -115,7 +114,7 @@
.byline {
:global {
a {
color: var(--theme-colour-text-primary);
@include text-primary;
text-decoration: none;
}
}
@ -124,7 +123,7 @@
.dateline-container {
text-transform: uppercase;
color: var(--theme-colour-text-secondary);
@include text-secondary;
font-size: 0.8rem;
line-height: 1.2rem;
letter-spacing: 0.2px;

18
src/components/ReferralBlock/ReferralBlock.svelte
View file

@ -128,11 +128,11 @@
{/if}
<style lang="scss">
@import '../../scss/fonts/mixins';
@import '../../scss/mixins';
h4 {
font-family: var(--theme-font-family-subhed);
color: var(--theme-colour-text-primary, #404040);
@include font-sans;
@include text-primary;
font-size: 1.1rem;
margin: 0 0 5px;
font-weight: bold;
@ -194,23 +194,23 @@
}
}
.kicker {
font-family: var(--theme-font-family-subhed);
color: var(--theme-colour-text-secondary, #666666);
@include font-sans;
@include text-secondary;
font-size: 0.9rem;
margin: 0;
font-weight: 400;
}
.title {
font-family: var(--theme-font-family-subhed);
color: var(--theme-colour-text-primary, #404040);
@include font-sans;
@include text-primary;
font-size: 0.95rem;
line-height: 1.15rem;
font-weight: bold;
margin: 0;
}
.publish-time {
font-family: var(--theme-font-family-subhed);
color: var(--theme-colour-text-secondary, #666666);
@include font-sans;
@include text-secondary;
font-size: 0.75rem;
margin: 2px 0 0;
font-weight: 400;

4
src/components/SiteFooter/CompanyLinks.svelte
View file

@ -50,7 +50,7 @@
@import '../SiteHeader/scss/_breakpoints.scss';
@import '../SiteHeader/scss/_grids.scss';
@import '../../scss/fonts/mixins';
@import '../../scss/mixins';
.content-container {
@include max-width;
@ -149,7 +149,7 @@
}
}
p {
@include font-display;
@include font-sans;
line-height: 1.43;
font-size: 14px;
color: var(--nav-primary);

6
src/components/SiteFooter/LegalLinks.svelte
View file

@ -47,7 +47,7 @@
@import '../SiteHeader/scss/_breakpoints.scss';
@import '../SiteHeader/scss/_grids.scss';
@import '../../scss/fonts/mixins';
@import '../../scss/mixins';
.content-container {
@include max-width;
@ -140,7 +140,7 @@
list-style: none;
align-items: center;
a {
@include font-display;
@include font-sans;
color: var(--nav-primary);
font-size: 14px;
font-weight: 500;
@ -156,7 +156,7 @@
p.copyright,
p.disclaimer {
margin: 0;
@include font-display;
@include font-sans;
font-size: 14px;
color: var(--nav-primary);
a {

4
src/components/SiteFooter/QuickLinks.svelte
View file

@ -121,7 +121,7 @@
@import '../SiteHeader/scss/_breakpoints.scss';
@import '../SiteHeader/scss/_grids.scss';
@import '../../scss/fonts/mixins';
@import '../../scss/mixins';
.content-container {
@include max-width;
@ -147,7 +147,7 @@
display: flex;
align-items: center;
margin: 8px 0;
@include font-display;
@include font-sans;
a {
color: var(--nav-primary);
font-weight: 500;

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

@ -25,7 +25,7 @@
<!-- svelte-ignore css-unused-selector -->
<style lang="scss">
@import '../../../scss/fonts/mixins';
@import '../../../scss/mixins';
a {
text-decoration: none;
@ -53,7 +53,7 @@
}
p {
@include font-display;
@include font-sans;
color: var(--nav-primary, #666);
font-size: 0.9rem;

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

@ -19,7 +19,6 @@
</IntersectionObserver>
<style lang="scss">
@import '../../../scss/fonts/mixins';
@import '../../SiteHeader/scss/_breakpoints.scss';
@import '../../SiteHeader/scss/_grids.scss';

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

@ -47,6 +47,7 @@
--nav-background: var(--theme-colour-background, #fff);
--nav-primary: var(--theme-colour-text-primary, #404040);
--nav-rules: var(--theme-colour-brand-rules, #d0d0d0);
--theme-font-family-sans-serif: Knowledge, sans-serif;
`}"
>
<div>

4
src/components/SiteHeader/MobileMenu/index.svelte
View file

@ -58,7 +58,7 @@
@import '../scss/_grids.scss';
@import '../scss/_colors.scss';
@import '../scss/_z-indexes.scss';
@import '../../../scss/fonts/mixins';
@import '../../../scss/mixins';
$mobile-nav-height: 56px;
@ -157,7 +157,7 @@
.section-link,
.subsection-link {
@include font-display;
@include font-sans;
text-decoration: none;
line-height: 1.2;
color: var(--nav-primary);

6
src/components/SiteHeader/NavBar/NavDropdown/StoryCard/index.svelte
View file

@ -35,7 +35,7 @@
</div>
<style lang="scss">
@import '../../../../../scss/fonts/mixins';
@import '../../../../../scss/mixins';
.story-card a {
display: flex;
@ -66,7 +66,7 @@
color: var(--nav-primary, var(--tr-dark-grey));
font-size: 16px;
font-weight: 500;
@include font-display;
@include font-sans;
@media (min-width: 1300px) {
font-size: 18px;
}
@ -81,7 +81,7 @@
}
time {
@include font-display;
@include font-sans;
margin-top: 8px;
display: block;
font-size: 12px;

6
src/components/SiteHeader/NavBar/index.svelte
View file

@ -124,7 +124,7 @@
@import './../scss/_colors.scss';
@import './../scss/_breakpoints.scss';
@import './../scss/_z-indexes.scss';
@import '../../../scss/fonts/mixins';
@import '../../../scss/mixins';
$nav-height: 64px;
$mobile-nav-height: 56px;
@ -146,7 +146,7 @@
.nav-item {
display: inline-flex;
padding: 0 10px;
@include font-display;
@include font-sans;
font-weight: 500;
font-size: 16px;
@ -219,7 +219,7 @@
background-color: unset;
appearance: none;
cursor: pointer;
@include font-display;
@include font-sans;
font-weight: 500;
font-size: 16px;
color: var(--nav-primary, var(--tr-dark-grey));

1
src/components/SiteHeader/SiteHeader.svelte
View file

@ -42,6 +42,7 @@
--nav-rules: var(--theme-colour-brand-rules, #d0d0d0);
--nav-accent: var(--theme-colour-brand-logo, #fa6400);
--nav-shadow: 0 1px 4px 2px var(--theme-colour-brand-shadow, rgb(255 255 255 / 10%));
--theme-font-family-sans-serif: Knowledge, sans-serif;
`}"
>
<div class="nav-container show-nav">

5
src/components/SiteHeadline/SiteHeadline.stories.svelte
View file

@ -38,7 +38,7 @@
args="{{
section: 'Graphics',
sectionUrl: 'https://graphics.reuters.com',
hed: 'Ukraine makes surprising gains in swift counteroffensive',
hed: 'Ukraine makes surprising gains in counteroffensive',
authors: [
'Dea Bankova',
'Michael Ovaska',
@ -59,6 +59,3 @@
publishTime="{content.Published}"
/>
</Story>
<style lang="scss">
</style>

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

@ -64,29 +64,34 @@
first.getDate() === second.getDate();
</script>
<Block id="{id}" class="headline-container {cls}" width="normal">
<Block id="{id}" class="headline-container !my-16 {cls}" width="normal">
<header class="headline">
<div class="title">
{#if section}
<p class="section-title">
<p
class="section-title mb-2 font-subhed text-sm text-secondary font-bold"
>
{#if sectionUrl}
<a href="{sectionUrl}">{section}</a>
<a class="no-underline !text-secondary" href="{sectionUrl}"
>{section}</a
>
{:else}
{section}
{/if}
</p>
{/if}
{#if hed}
<h1>{hed}</h1>
<h1 class="my-0 font-hed text-primary leading-none text-3xl">{hed}</h1>
{/if}
</div>
<aside class="article-metadata">
<aside class="article-metadata mt-2 font-subhed">
<div class="byline-container">
<div class="byline">
<div class="byline text-primary font-bold leading-tight">
By
{#if authors.length > 0}
{#each authors as author, i}
<a
class="no-underline"
href="https://www.reuters.com/authors/{slugify(author.trim(), {
lower: true,
})}/"
@ -101,7 +106,9 @@
{/if}
</div>
</div>
<div class="dateline-container">
<div
class="dateline-container mt-1.5 text-secondary text-xxs uppercase leading-normal tracking-normal"
>
{#if isValidDate(publishTime)}
<div>
Published
@ -136,96 +143,10 @@
</Block>
<style lang="scss">
@import '../../scss/fonts/variables';
:global(div.article-block.headline-container) {
margin: 4rem auto;
}
// Official styles
header.headline {
text-align: center;
color: var(--theme-colour-text-primary, var(--tr-dark-grey));
h1 {
text-align: left;
font-size: 3rem;
line-height: 1.14;
margin: 0.6rem 0;
font-family: var(--theme-font-family-hed, $font-family-display);
color: var(--theme-colour-text-primary, var(--tr-dark-grey));
@media (max-width: 900px) {
font-size: 2.6rem;
}
@media (max-width: 600px) {
font-size: 2.1rem;
font-weight: 500;
}
}
p {
font-family: var(--theme-font-family-subhed, $font-family-display);
color: var(--theme-colour-text-primary, var(--tr-dark-grey));
margin: 0;
font-weight: 200;
&.section-title {
font-weight: 800;
color: var(--theme-colour-text-secondary, var(--tr-light-grey));
text-align: left;
font-size: 1.2rem;
opacity: 0.8;
@media (max-width: 600px) {
font-size: 1rem;
}
a {
color: var(--theme-colour-text-secondary, var(--tr-light-grey));
text-decoration: none;
}
}
}
.article-metadata {
padding: 40px 0 0;
padding-top: 0;
font-family: var(--theme-font-family-note, $font-family-display);
color: var(--theme-colour-text-primary, var(--tr-dark-grey));
text-align: left;
.byline-container {
margin-bottom: 0px;
}
.byline {
font-weight: bold;
font-weight: 600;
font-size: 1rem;
line-height: 1.4rem;
@media (max-width: 600px) {
font-size: 0.9rem;
line-height: 1.2rem;
}
a {
color: var(--theme-colour-text-primary, var(--tr-dark-grey));
text-decoration: none;
white-space: nowrap;
&:hover {
text-decoration: underline;
}
}
}
.dateline-container {
text-transform: uppercase;
color: var(--theme-colour-text-secondary, var(--tr-medium-grey));
font-size: 0.8rem;
line-height: 1.1rem;
letter-spacing: 0.3px;
margin-top: 0.5rem;
@media (max-width: 600px) {
font-size: 0.75rem;
line-height: 1.05rem;
}
}
.byline a {
text-decoration: none;
&:hover {
text-decoration: underline;
}
}
</style>

4
src/components/Theme/@types/component.ts
View file

@ -12,6 +12,10 @@ interface FontFamily {
'serif': string,
'sans-serif': string,
'monospace': string,
hed: string,
subhed: string,
body: string,
note: string,
}
interface FontSize {

4
src/components/Theme/themes/common.js
View file

@ -6,6 +6,10 @@ export default {
'sans-serif': 'Knowledge, sans-serif',
monospace:
'Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
hed: 'var(--theme-font-family-sans-serif)',
subhed: 'var(--theme-font-family-sans-serif)',
body: 'var(--theme-font-family-serif)',
note: 'var(--theme-font-family-sans-serif)',
},
size: {
xxs: 'clamp(0.79rem, -0.2vw + 0.83rem, 0.67rem)',

27
src/scss/_TO-DEPRECATE/_body-text.scss → src/scss/mixins/texts/_body.scss
View file

@ -1,7 +1,8 @@
@import '../fonts/mixins';
@import '../fonts/variables';
@import '../typography_old/font-size';
@import '../colours/thematic/tr';
// @import '../fonts/mixins';
// @import '../fonts/variables';
// @import '../typography_old/font-size';
// @import '../colours/thematic/tr';
@use '../../mixins' as *;
@mixin body-text {
h2,
@ -12,7 +13,7 @@
p,
li,
blockquote {
color: var(--theme-colour-text-primary, var(--tr-dark-grey));
@include text-primary;
}
p,
@ -21,10 +22,9 @@
ol li,
ol li p {
-webkit-font-smoothing: antialiased;
font-family: var(--theme-font-family-body, $font-family-serif);
color: var(--theme-colour-text-primary, var(--tr-dark-grey));
@extend .paragraph-size;
@include font-serif;
@include text-primary;
@include text-base;
a {
color: currentColor;
@ -53,15 +53,6 @@
margin: 4rem 0 2rem;
text-align: center;
font-weight: 600;
&::after {
display: block;
content: '';
background: var(--theme-colour-text-secondary, var(--tr-medium-grey));
height: 3px;
width: 100px;
margin: 10px auto 2rem;
}
}
ul {

0
src/scss/_TO-DEPRECATE/_graphic.scss → src/scss/mixins/texts/_graphic.scss
View file

0
src/scss/_TO-DEPRECATE/_note-text.scss → src/scss/mixins/texts/_note.scss
View file

4
src/scss/reset/_main.scss
View file

@ -40,3 +40,7 @@ ol ul,
ul ol {
margin-bottom: 0;
}
a {
color: inherit;
}

41
src/scss/tokens/spacers/_margin.scss
View file

@ -1,13 +1,38 @@
$margin-levels: (
'0': 0,
'1': 1rem,
'2': 2rem,
'3': 3rem,
'4': 4rem,
'5': 5rem,
'6': 6rem,
'7': 7rem,
'8': 8rem,
'0\\.5': 0.125rem,
'1': 0.25rem,
'1\\.5': 0.375rem,
'2': 0.5rem,
'2\\.5': 0.625rem,
'3': 0.75rem,
'3\\.5': 0.875rem,
'4': 1rem,
'5': 1.25rem,
'6': 1.5rem,
'7': 1.75rem,
'8': 2rem,
'9': 2.25rem,
'10': 2.5rem,
'11': 2.75rem,
'12': 3rem,
'14': 3.5rem,
'16': 4rem,
'20': 5rem,
'24': 6rem,
'28': 7rem,
'32': 8rem,
'36': 9rem,
'40': 10rem,
'44': 11rem,
'48': 12rem,
'52': 13rem,
'56': 14rem,
'60': 15rem,
'64': 16rem,
'72': 18rem,
'80': 20rem,
'96': 24rem,
);
@each $level, $value in $margin-levels {

41
src/scss/tokens/spacers/_padding.scss
View file

@ -1,13 +1,38 @@
$padding-levels: (
'0': 0,
'1': 0.5rem,
'2': 1rem,
'3': 1.75rem,
'4': 2.25rem,
'5': 3rem,
'6': 4rem,
'7': 5rem,
'8': 6rem,
'0\\.5': 0.125rem,
'1': 0.25rem,
'1\\.5': 0.375rem,
'2': 0.5rem,
'2\\.5': 0.625rem,
'3': 0.75rem,
'3\\.5': 0.875rem,
'4': 1rem,
'5': 1.25rem,
'6': 1.5rem,
'7': 1.75rem,
'8': 2rem,
'9': 2.25rem,
'10': 2.5rem,
'11': 2.75rem,
'12': 3rem,
'14': 3.5rem,
'16': 4rem,
'20': 5rem,
'24': 6rem,
'28': 7rem,
'32': 8rem,
'36': 9rem,
'40': 10rem,
'44': 11rem,
'48': 12rem,
'52': 13rem,
'56': 14rem,
'60': 15rem,
'64': 16rem,
'72': 18rem,
'80': 20rem,
'96': 24rem,
);
@each $level, $value in $padding-levels {

24
src/scss/tokens/text/_font-family.scss
View file

@ -9,6 +9,18 @@
.font-mono {
@include font-mono;
}
.font-hed {
@include font-hed;
}
.font-subhed {
@include font-subhed;
}
.font-body {
@include font-body;
}
.font-note {
@include font-note;
}
.\!font-serif {
@include \!font-serif;
}
@ -18,3 +30,15 @@
.\!font-mono {
@include \!font-mono;
}
.\!font-hed {
@include \!font-hed;
}
.\!font-subhed {
@include \!font-subhed;
}
.\!font-body {
@include \!font-body;
}
.\!font-note {
@include \!font-note;
}

24
src/scss/tokens/text/mixins/_font-family.scss
View file

@ -7,6 +7,18 @@
@mixin font-mono {
font-family: var(--theme-font-family-monospace);
}
@mixin font-hed {
font-family: var(--theme-font-family-hed);
}
@mixin font-subhed {
font-family: var(--theme-font-family-subhed);
}
@mixin font-body {
font-family: var(--theme-font-family-body);
}
@mixin font-note {
font-family: var(--theme-font-family-note);
}
@mixin \!font-serif {
font-family: var(--theme-font-family-serif) !important;
}
@ -16,3 +28,15 @@
@mixin \!font-mono {
font-family: var(--theme-font-family-monospace) !important;
}
@mixin \!font-hed {
font-family: var(--theme-font-family-hed) !important;
}
@mixin \!font-subhed {
font-family: var(--theme-font-family-subhed) !important;
}
@mixin \!font-body {
font-family: var(--theme-font-family-body) !important;
}
@mixin \!font-note {
font-family: var(--theme-font-family-note) !important;
}