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

spacing adjust #116

Browse source
This commit is contained in:
Prasanta Kumar Dutta 2023-09-05 16:54:08 +05:30
parent bd13962b1b
commit cafe0f3209
17 changed files with 94 additions and 90 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
src/components/BeforeAfter/BeforeAfter.svelte
View file

@ -38,6 +38,13 @@
*/
export let afterAlt: string | null = null;
/**
* Set a class to target with SCSS.
* @type {string}
*/
let cls: string = '';
export { cls as class };
/** Drag handle colour */
export let handleColour = 'white';
/** Drag handle opacity */
@ -153,11 +160,12 @@
/>
{#if beforeSrc && beforeAlt && afterSrc && afterAlt}
<Block width="{width}" id="{id}" class="photo before-after">
<Block width="{width}" id="{id}" class="photo before-after fmy-6 {cls}">
<div
style="height: {containerHeight}px;"
bind:clientWidth="{containerWidth}"
>
<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
<figure
style="{figStyle}"
class="before-after-container relative overflow-hidden my-0 mx-auto"

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

@ -18,7 +18,7 @@
import Block from '../Block/Block.svelte';
</script>
<Block id="{id}" class="fmy-5 {cls}">
<Block id="{id}" class="fmy-6 {cls}">
{#if text}
{@html marked.parse(text)}
{/if}

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

@ -90,7 +90,7 @@
});
</script>
<Block width="{width}" class="photo fmy-5 {cls}" id="{id}">
<Block width="{width}" class="photo fmy-6 {cls}" id="{id}">
<figure
bind:this="{container}"
aria-label="media"

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

@ -79,7 +79,7 @@
role="{role}"
width="{width}"
ariaLabel="{ariaLabel}"
class="graphic fmy-5 {cls}"
class="graphic fmy-6 {cls}"
>
{#if $$slots.title}
<PaddingReset containerIsFluid="{width === 'fluid'}">

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

@ -108,7 +108,7 @@
slot="crown"
src="{crownImgSrc}"
width="100"
class="mb-0"
class="mx-auto mb-0"
alt="Illustration of Europe"
/>
<!-- Override the hed with a named slot -->

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

@ -73,72 +73,68 @@
}
</script>
<Block width="{width}" class="headline text-center fmt-7 fmb-5 {cls}">
<header class="relative">
{#if $$slots.crown}
<div class="crown-container">
<!-- Crown named slot -->
<slot name="crown" />
<div class="headline-wrapper" style="display:contents;">
<Block width="{width}" class="headline text-center fmy-7 fmb-6 {cls}">
<header class="relative">
{#if $$slots.crown}
<div class="crown-container">
<!-- Crown named slot -->
<slot name="crown" />
</div>
{/if}
<div class="title">
{#if section}
<p
class="section-title mb-0 font-subhed text-xxs text-secondary font-bold uppercase whitespace-nowrap tracking-wider"
>
{section}
</p>
{/if}
{#if $$slots.hed}
<!-- Headline named slot -->
<slot name="hed" />
{:else}
<h1 class="{hedClass}">{@html marked.parseInline(hed)}</h1>
{/if}
{#if $$slots.dek}
<!-- Dek named slot-->
<div class="dek fmx-auto fmb-5">
<slot name="dek" />
</div>
{:else if dek}
<div class="dek fmx-auto fmb-5">
{@html marked(dek)}
</div>
{/if}
</div>
{/if}
<div class="title">
{#if section}
<p
class="section-title mb-0 font-subhed text-xxs text-secondary font-bold uppercase whitespace-nowrap tracking-wider"
>
{section}
</p>
{#if $$slots.byline}
<!-- Custom byline/dateline -->
<slot name="byline" />
{:else if authors.length > 0 || publishTime}
<Byline
class="fmy-3"
authors="{authors}"
publishTime="{publishTime}"
updateTime="{updateTime}"
align="center"
/>
{/if}
{#if $$slots.hed}
<!-- Headline named slot -->
<slot name="hed" />
{:else}
<h1 class="{hedClass}">{@html marked.parseInline(hed)}</h1>
{/if}
{#if $$slots.dek}
<!-- Dek named slot-->
<div class="dek fmx-auto fmb-5">
<slot name="dek" />
</div>
{:else if dek}
<div class="dek fmx-auto fmb-5">
{@html marked(dek)}
</div>
{/if}
</div>
{#if $$slots.byline}
<!-- Custom byline/dateline -->
<slot name="byline" />
{:else if authors.length > 0 || publishTime}
<Byline
class="fmy-3"
authors="{authors}"
publishTime="{publishTime}"
updateTime="{updateTime}"
align="center"
/>
{/if}
</header>
</Block>
</header>
</Block>
</div>
<style lang="scss">
@use '../../scss/mixins' as *;
:global {
header {
.dek {
max-width: $column-width-normal;
p {
@include fmt-0;
@include fmb-3;
@include font-note;
@include text-base;
@include font-regular;
@include leading-tight;
@include text-primary;
@include font-light;
}
}
.headline-wrapper {
:global(.dek) {
max-width: $column-width-normal;
}
:global(.dek p) {
@include fmt-0;
@include font-note;
@include leading-tight;
@include font-light;
@include fmb-3;
}
}
</style>

2
src/components/Headline/stories/docs/withCrownImage.md
View file

@ -12,7 +12,7 @@ Add a crown image in the `crown` named slot and override the headline in the `he
slot="crown"
src="{crownImgSrc}"
width="100"
class="mb-0"
class="mx-auto mb-0"
alt="Illustration of Europe"
/>
<!-- Override the hed with a named slot -->

6
src/components/HeroHeadline/Hero.svelte
View file

@ -159,7 +159,7 @@
</Block>
{#if notes}
<TextBlock width="normal">
<aside class="fmt-2">
<aside>
{@html marked(notes)}
</aside>
</TextBlock>
@ -226,6 +226,10 @@
position: relative;
}
:global(.hero-headline) {
overflow-x: hidden;
}
:global(.background-hero .headline) {
@include fmt-0;
z-index: 1;

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

@ -11,7 +11,7 @@
import Block from '../Block/Block.svelte';
</script>
<Block class="notes fmt-5 fmb-7">
<Block class="notes fmt-6 fmb-8">
{#if text}
{@html marked.parse(text)}
{/if}
@ -37,6 +37,7 @@
p {
@include body-caption;
@include fmt-0;
}
}
</style>

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

@ -97,7 +97,7 @@
};
</script>
<Block width="{width}" id="{id}" class="photo-carousel fmy-5 {cls}">
<Block width="{width}" id="{id}" class="photo-carousel fmy-6 {cls}">
<div class="carousel-container" bind:clientWidth="{containerWidth}">
<Splide
hasTrack="{false}"

13
src/components/PhotoPack/PhotoPack.svelte
View file

@ -89,7 +89,7 @@
$: rows = groupRows(images, layout);
</script>
<Block width="{width}" id="{id}" class="photopack fmy-5 {cls}">
<Block width="{width}" id="{id}" class="photopack fmy-6 {cls}">
<div class="photopack-container w-full" bind:clientWidth="{containerWidth}">
{#each rows as row, ri}
<div
@ -158,15 +158,4 @@
@include body-caption;
}
}
// :global {
// .photopack-captions-container {
// @include \!fmy-2;
// div.caption {
// p {
// @include body-caption;
// }
// }
// }
// }
</style>

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

@ -76,7 +76,7 @@
</script>
{#if $referrals.length === number}
<Block width="{width}" id="{id}" class="referrals-block fmy-5 {cls}">
<Block width="{width}" id="{id}" class="referrals-block fmy-8 {cls}">
{#if heading}
<div
class="heading h4 font-bold"

9
src/components/Scroller/Scroller.svelte
View file

@ -87,6 +87,13 @@
*/
export let parallax: boolean = false;
/**
* Set a class to target with SCSS.
* @type {string}
*/
let cls: string = '';
export { cls as class };
// @ts-ignore
import SvelteScroller from '@sveltejs/svelte-scroller';
import Background from './Background.svelte';
@ -101,7 +108,7 @@
</script>
{#if !embedded}
<Block width="fluid" class="scroller-container fmy-5" id="{id}">
<Block width="fluid" class="scroller-container fmy-6 {cls}" id="{id}">
<SvelteScroller
bind:index="{index}"
bind:offset="{offset}"

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

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

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

@ -214,7 +214,7 @@
});
</script>
<Block width="{width}" id="{id}" class="fmy-5 {cls}">
<Block width="{width}" id="{id}" class="fmy-6 {cls}">
<article class="table-wrapper">
{#if title || dek || searchable || filterList}
<header class="table--header w-full">

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

@ -118,7 +118,6 @@ kbd {
}
figcaption {
@include fmt-2;
@include body-caption;
}

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

@ -22,7 +22,7 @@
@include leading-tighter;
@include text-xl;
@include fmt-7;
@include fmb-3;
@include fmb-4;
@media (max-width: 768px) {
@include text-2xl;
@ -53,7 +53,7 @@
@mixin body-text {
@include fmt-0;
@include fmb-3;
@include fmb-4;
@include font-body;
@include text-base;
@include font-regular;
@ -76,7 +76,7 @@
@include text-xs;
@include leading-tighter;
@include font-regular;
@include fmb-1;
@include fmy-1;
}
@mixin body-link {