component text style sweep
This commit is contained in:
Prasanta Kumar Dutta
parent
60ba223098
commit
e7a79c5cfe
23 changed files with 116 additions and 110 deletions
|
|
@ -11,7 +11,7 @@
|
|||
import Block from '../Block/Block.svelte';
|
||||
</script>
|
||||
|
||||
<Block class="notes mb-24">
|
||||
<Block class="notes">
|
||||
{#if text}
|
||||
{@html marked.parse(text)}
|
||||
{/if}
|
||||
|
|
|
|||
|
|
@ -97,7 +97,7 @@
|
|||
};
|
||||
</script>
|
||||
|
||||
<Block width="{width}" id="{id}" class="photo-carousel {cls}">
|
||||
<Block width="{width}" id="{id}" class="photo-carousel fmy-5 {cls}">
|
||||
<div class="carousel-container" bind:clientWidth="{containerWidth}">
|
||||
<Splide
|
||||
hasTrack="{false}"
|
||||
|
|
@ -116,11 +116,11 @@
|
|||
<SplideSlide>
|
||||
<div class="photo-slide w-full h-full relative">
|
||||
<figure
|
||||
class="m-0 w-full relative"
|
||||
class="fm-0 w-full relative"
|
||||
style="height: {carouselHeight}px;"
|
||||
>
|
||||
<img
|
||||
class="w-full h-full my-0"
|
||||
class="w-full h-full fmy-0"
|
||||
data-splide-lazy="{photo.src}"
|
||||
alt="{photo.altText}"
|
||||
style:object-fit="{photo.objectFit ||
|
||||
|
|
@ -132,7 +132,7 @@
|
|||
<slot name="credit" credit="{photo.credit}" />
|
||||
{:else}
|
||||
<span
|
||||
class="credit absolute m-0 leading-tighter font-note text-xxs"
|
||||
class="credit absolute fmb-1 fml-1 leading-tighter font-note text-xxs"
|
||||
class:contain-fit="{photo.objectFit === 'contain' ||
|
||||
defaultImageObjectFit === 'contain'}"
|
||||
>{photo.credit}</span
|
||||
|
|
@ -168,7 +168,7 @@
|
|||
<div class="splide__progress__bar"></div>
|
||||
</div>
|
||||
|
||||
<div class="splide__arrows">
|
||||
<div class="splide__arrows fp-1">
|
||||
<button class="splide__arrow splide__arrow--prev">
|
||||
<Fa icon="{faChevronLeft}" fw />
|
||||
</button>
|
||||
|
|
@ -188,8 +188,8 @@
|
|||
.photo-slide {
|
||||
figure {
|
||||
span.credit {
|
||||
bottom: 4px;
|
||||
left: 10px;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
color: white;
|
||||
text-shadow: -1px -1px 0 #333, 1px -1px 0 #333, -1px 1px 0 #333,
|
||||
1px 1px 0 #333;
|
||||
|
|
@ -210,8 +210,7 @@
|
|||
margin: 0 auto;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 0px;
|
||||
padding-top: 4px;
|
||||
|
||||
button {
|
||||
display: flex;
|
||||
font-size: 14px;
|
||||
|
|
@ -248,11 +247,11 @@
|
|||
flex-wrap: nowrap;
|
||||
li {
|
||||
flex-grow: 1;
|
||||
margin-top: -9px;
|
||||
button {
|
||||
width: 100%;
|
||||
height: 7px;
|
||||
border-radius: 0;
|
||||
margin: 0 0px;
|
||||
padding: 0;
|
||||
border: 1px solid $theme-colour-background;
|
||||
background: $theme-colour-text-secondary;
|
||||
|
|
|
|||
|
|
@ -89,11 +89,8 @@
|
|||
$: rows = groupRows(images, layout);
|
||||
</script>
|
||||
|
||||
<Block width="{width}" id="{id}" class="photopack {cls}">
|
||||
<div
|
||||
class="photopack-container w-full mb-2"
|
||||
bind:clientWidth="{containerWidth}"
|
||||
>
|
||||
<Block width="{width}" id="{id}" class="photopack fmy-5 {cls}">
|
||||
<div class="photopack-container w-full" bind:clientWidth="{containerWidth}">
|
||||
{#each rows as row, ri}
|
||||
<div
|
||||
class="photopack-row flex justify-between"
|
||||
|
|
@ -120,17 +117,19 @@
|
|||
{/each}
|
||||
</div>
|
||||
<PaddingReset containerIsFluid="{width === 'fluid'}">
|
||||
<Block width="{captionWidth}" class="photopack-captions-container">
|
||||
{#each rows as row, ri}
|
||||
{#each row as img, i}
|
||||
{#if img.caption}
|
||||
<div id="{id}-figure-{ri}-{i}" class="caption">
|
||||
{@html marked(img.caption)}
|
||||
</div>
|
||||
{/if}
|
||||
<div class="notes contents">
|
||||
<Block width="{captionWidth}" class="photopack-captions-container">
|
||||
{#each rows as row, ri}
|
||||
{#each row as img, i}
|
||||
{#if img.caption}
|
||||
<div id="{id}-figure-{ri}-{i}" class="caption">
|
||||
{@html marked(img.caption)}
|
||||
</div>
|
||||
{/if}
|
||||
{/each}
|
||||
{/each}
|
||||
{/each}
|
||||
</Block>
|
||||
</Block>
|
||||
</div>
|
||||
</PaddingReset>
|
||||
</Block>
|
||||
|
||||
|
|
@ -150,14 +149,24 @@
|
|||
}
|
||||
}
|
||||
|
||||
:global {
|
||||
.photopack-captions-container {
|
||||
@include \!fmy-2;
|
||||
div.caption {
|
||||
p {
|
||||
@include body-caption;
|
||||
}
|
||||
}
|
||||
.notes {
|
||||
:global(.photopack-captions-container) {
|
||||
@include fmy-2;
|
||||
}
|
||||
|
||||
:global(.photopack-captions-container .caption p) {
|
||||
@include body-caption;
|
||||
}
|
||||
}
|
||||
|
||||
// :global {
|
||||
// .photopack-captions-container {
|
||||
// @include \!fmy-2;
|
||||
// div.caption {
|
||||
// p {
|
||||
// @include body-caption;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -50,7 +50,7 @@
|
|||
args="{{
|
||||
section: '/lifestyle/sports/',
|
||||
number: 4,
|
||||
cls: 'my-3',
|
||||
class: 'fmy-5',
|
||||
heading: 'More World Cup coverage',
|
||||
}}"
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -76,7 +76,7 @@
|
|||
</script>
|
||||
|
||||
{#if $referrals.length === number}
|
||||
<Block width="{width}" id="{id}" class="referrals-block {cls}">
|
||||
<Block width="{width}" id="{id}" class="referrals-block fmy-5 {cls}">
|
||||
{#if heading}
|
||||
<div
|
||||
class="heading h4 font-bold"
|
||||
|
|
|
|||
|
|
@ -47,6 +47,7 @@
|
|||
max-width: initial;
|
||||
.step-foreground {
|
||||
max-width: calc($column-width-normal * 0.9);
|
||||
border-radius: 0.25rem;
|
||||
@include fpy-5;
|
||||
@include fpx-4;
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
|
|
|
|||
|
|
@ -101,7 +101,7 @@
|
|||
</script>
|
||||
|
||||
{#if !embedded}
|
||||
<Block width="fluid" class="scroller-container" id="{id}">
|
||||
<Block width="fluid" class="scroller-container fmy-5" id="{id}">
|
||||
<SvelteScroller
|
||||
bind:index="{index}"
|
||||
bind:offset="{offset}"
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@
|
|||
svg {
|
||||
vertical-align: middle;
|
||||
path {
|
||||
fill: $theme-colour-text-secondary;
|
||||
fill: $theme-colour-brand-rules;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 1.7 KiB After Width: | Height: | Size: 1.7 KiB |
|
|
@ -26,20 +26,22 @@
|
|||
}
|
||||
</script>
|
||||
|
||||
<div class="search" class:active="{active}">
|
||||
<div class="search--icon">
|
||||
<div class="search relative inline-flex items-center" class:active="{active}">
|
||||
<div class="search--icon absolute ml-2 mt-1.5">
|
||||
<MagnifyingGlass />
|
||||
</div>
|
||||
<input
|
||||
id="search--input"
|
||||
class="search--input"
|
||||
class="search--input body-caption pl-8"
|
||||
type="text"
|
||||
placeholder="{searchPlaceholder}"
|
||||
on:input="{input}"
|
||||
bind:value="{value}"
|
||||
/>
|
||||
<div
|
||||
class="search--x"
|
||||
class="search--x absolute mt-1"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
class:invisible="{!active}"
|
||||
on:click="{clear}"
|
||||
on:keyup="{clear}"
|
||||
|
|
@ -52,34 +54,24 @@
|
|||
@use '../../scss/mixins' as *;
|
||||
|
||||
.search {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
width: 256px;
|
||||
padding: 0 0 0 0.1rem;
|
||||
width: 250px;
|
||||
.search--icon {
|
||||
position: absolute;
|
||||
left: 0.5rem;
|
||||
top: 0.15rem;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
fill: $theme-colour-brand-rules;
|
||||
}
|
||||
.search--input {
|
||||
@include font-sans;
|
||||
@include text-primary;
|
||||
padding: 0 0 0 2rem;
|
||||
font-size: 0.8rem;
|
||||
height: 33px;
|
||||
height: 2.15rem;
|
||||
border: 1px solid $theme-colour-brand-rules;
|
||||
background: transparent;
|
||||
border-radius: 6px;
|
||||
border-radius: 0.25rem;
|
||||
width: 100%;
|
||||
}
|
||||
.search--x {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0.15rem;
|
||||
top: 0;
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
fill: $theme-colour-text-primary;
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@
|
|||
svg {
|
||||
vertical-align: middle;
|
||||
path {
|
||||
fill: $theme-colour-text-secondary;
|
||||
fill: $theme-colour-brand-rules;
|
||||
}
|
||||
rect {
|
||||
fill: $theme-colour-background;
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 2 KiB After Width: | Height: | Size: 2 KiB |
|
|
@ -106,7 +106,5 @@
|
|||
name="Default"
|
||||
args="{{
|
||||
dates,
|
||||
symbolColour: '#999',
|
||||
dateColour: '#e05a39',
|
||||
}}"
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@
|
|||
* Set a colour for the timeline bullet symbols and line.
|
||||
* @type {string}
|
||||
*/
|
||||
export let symbolColour: string = '#ccc';
|
||||
export let symbolColour: string = 'var(--theme-colour-brand-rules)';
|
||||
/**
|
||||
* Set a colour for the date headings in the timeline.
|
||||
* @type {string}
|
||||
|
|
@ -44,11 +44,11 @@
|
|||
|
||||
<Block width="normal" id="{id}" class="simple-timeline-container {cls}">
|
||||
<div
|
||||
class="timeline mt-8 pl-2 pr-3.5"
|
||||
class="timeline fmy-5 pl-2 pr-3.5"
|
||||
style="--symbol-colour:{symbolColour};"
|
||||
>
|
||||
{#each dates as date}
|
||||
<div class="date relative m-0 pl-5 pb-4">
|
||||
<div class="date relative pt-0.5 pl-5 pb-4">
|
||||
<svg class="absolute bg" height="25" width="20">
|
||||
<circle
|
||||
cx="10"
|
||||
|
|
@ -59,7 +59,7 @@
|
|||
fill="transparent"></circle>
|
||||
</svg>
|
||||
<div
|
||||
class="timeline-date font-subhed font-bold mt-0 text-sm fmb-1"
|
||||
class="timeline-date font-note text-xs uppercase font-black tracking-wide fmb-0"
|
||||
style:color="{dateColour}"
|
||||
>
|
||||
{date.date}
|
||||
|
|
@ -68,17 +68,13 @@
|
|||
<div class="event pb-2">
|
||||
{#if event.titleLink}
|
||||
<a href="{event.titleLink}" target="_blank">
|
||||
<div
|
||||
class="title font-subhed text-base font-bold text-primary leading-tighter fmb-1"
|
||||
>
|
||||
<div class="title h3">
|
||||
{event.title}
|
||||
<span class="text-sm"><Fa fw icon="{faLink}" /></span>
|
||||
</div>
|
||||
</a>
|
||||
{:else}
|
||||
<div
|
||||
class="title font-subhed text-base font-bold text-primary leading-tighter fmb-1"
|
||||
>
|
||||
<div class="title h3">
|
||||
{event.title}
|
||||
</div>
|
||||
{/if}
|
||||
|
|
@ -105,6 +101,12 @@
|
|||
top: -1px;
|
||||
left: -10px;
|
||||
}
|
||||
div.title {
|
||||
@include fmt-2;
|
||||
@include fmb-1;
|
||||
@include font-medium;
|
||||
}
|
||||
|
||||
div.event {
|
||||
a {
|
||||
text-decoration: none;
|
||||
|
|
@ -121,12 +123,13 @@
|
|||
}
|
||||
}
|
||||
:global(p) {
|
||||
@include fmb-2;
|
||||
@include leading-normal;
|
||||
@include font-light;
|
||||
@include text-sm;
|
||||
@include font-note;
|
||||
@include text-primary;
|
||||
@include body-note;
|
||||
// @include fmb-2;
|
||||
// @include leading-normal;
|
||||
// @include font-light;
|
||||
// @include text-sm;
|
||||
// @include font-note;
|
||||
// @include text-primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -20,9 +20,5 @@ A simple, clean text timeline.
|
|||
];
|
||||
</script>
|
||||
|
||||
<SimpleTimeline
|
||||
dates="{dates}"
|
||||
symbolColour="#999"
|
||||
dateColour="rgb(224, 90, 57)"
|
||||
/>
|
||||
<SimpleTimeline dates="{dates}" />
|
||||
```
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
export let description;
|
||||
</script>
|
||||
|
||||
<div class="referral" title="{description}">
|
||||
<div class="referral py-0 px-3" title="{description}">
|
||||
<a href="{url.replace('index.html', '')}">
|
||||
<IntersectionObserver let:intersecting top="{600}" once="{true}">
|
||||
{#if intersecting}
|
||||
|
|
@ -19,7 +19,7 @@
|
|||
<div class="image"></div>
|
||||
{/if}
|
||||
</IntersectionObserver>
|
||||
<p data-chromatic="ignore">{title}</p>
|
||||
<p class="body-caption" data-chromatic="ignore">{title}</p>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
|
|
@ -40,9 +40,9 @@
|
|||
|
||||
.referral {
|
||||
div.image {
|
||||
margin-bottom: 5px;
|
||||
@include fmb-1;
|
||||
border: 1px solid var(--nav-rules, #efefef);
|
||||
border-radius: 8px;
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
|
|
@ -53,18 +53,13 @@
|
|||
}
|
||||
|
||||
p {
|
||||
@include font-sans;
|
||||
|
||||
color: var(--nav-primary, #666);
|
||||
font-size: 0.9rem;
|
||||
line-height: 1.2rem;
|
||||
text-transform: none;
|
||||
margin: 0;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
width: 25%;
|
||||
padding: 0 10px;
|
||||
// padding: 0 10px;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
width: 33.33333%;
|
||||
|
|
|
|||
|
|
@ -7,8 +7,8 @@
|
|||
|
||||
<IntersectionObserver let:intersecting top="{2400}" once="{true}">
|
||||
{#if intersecting}
|
||||
<section class="referrals">
|
||||
<h2>
|
||||
<section class="referrals px-0 py-5">
|
||||
<h2 class="text-base font-medium">
|
||||
<a href="https://graphics.reuters.com/">More from Reuters Graphics</a>
|
||||
</h2>
|
||||
{#if typeof window !== 'undefined'}
|
||||
|
|
@ -25,14 +25,10 @@
|
|||
section.referrals {
|
||||
margin: 0;
|
||||
max-width: 1400px;
|
||||
padding: 25px 0;
|
||||
@include spacing-single(padding-left padding-right);
|
||||
border-top: 1px solid var(--nav-rules, #999);
|
||||
|
||||
h2 {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
margin: 0 0 10px;
|
||||
color: var(--nav-primary, #666);
|
||||
a {
|
||||
color: var(--nav-primary, #666);
|
||||
|
|
|
|||
|
|
@ -85,6 +85,7 @@
|
|||
display: inline-block;
|
||||
padding: 4px 0;
|
||||
margin-bottom: 2px;
|
||||
font-family: var(--theme-font-family-sans-serif);
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
import Controls from './Controls.svelte';
|
||||
import Block from '../Block/Block.svelte';
|
||||
import type { ContainerWidth } from '../@types/global';
|
||||
|
||||
import { marked } from 'marked';
|
||||
/// //////////////////////////////////
|
||||
/// /////////// Props ////////////////
|
||||
/// //////////////////////////////////
|
||||
|
|
@ -123,7 +123,7 @@
|
|||
on:touchstart="{setInteractedWithDom}"
|
||||
/>
|
||||
|
||||
<Block width="{width}" class="video-container">
|
||||
<Block width="{width}" class="video-container fmy-5">
|
||||
<div
|
||||
on:mouseover="{() => {
|
||||
interactiveControlsOpacity = controlsOpacity;
|
||||
|
|
@ -153,7 +153,7 @@
|
|||
>
|
||||
<div
|
||||
bind:this="{element}"
|
||||
class="video-wrapper relative"
|
||||
class="video-wrapper relative block"
|
||||
aria-hidden="{ariaHidden}"
|
||||
bind:clientWidth="{widthVideoContainer}"
|
||||
bind:clientHeight="{heightVideoContainer}"
|
||||
|
|
@ -258,8 +258,20 @@
|
|||
</div>
|
||||
{/if}
|
||||
{#if caption}
|
||||
<div class="caption text-secondary text-xs">{caption}</div>
|
||||
<aside class="fmt-2">
|
||||
{@html marked(caption)}
|
||||
</aside>
|
||||
{/if}
|
||||
{/if}
|
||||
</div>
|
||||
</Block>
|
||||
|
||||
<style lang="scss">
|
||||
@import '../../scss/mixins';
|
||||
// Caption and Sources
|
||||
aside {
|
||||
:global(p) {
|
||||
@include body-caption;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -19,6 +19,11 @@ body {
|
|||
}
|
||||
}
|
||||
|
||||
img,
|
||||
video {
|
||||
display: block;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
@include fmy-5;
|
||||
|
|
|
|||
|
|
@ -75,7 +75,7 @@ ul {
|
|||
padding-left: 2rem;
|
||||
ol,
|
||||
ul {
|
||||
margin-block-end: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
height: 100%;
|
||||
}
|
||||
.h-screen {
|
||||
height: 100vh;
|
||||
height: 100svh;
|
||||
}
|
||||
.h-1\/2 {
|
||||
height: 50%;
|
||||
|
|
@ -86,7 +86,7 @@
|
|||
height: 100% !important;
|
||||
}
|
||||
.\!h-screen {
|
||||
height: 100vh !important;
|
||||
height: 100svh !important;
|
||||
}
|
||||
.\!h-1\/2 {
|
||||
height: 50% !important;
|
||||
|
|
|
|||
|
|
@ -2,11 +2,11 @@
|
|||
max-height: 100%;
|
||||
}
|
||||
.max-h-screen {
|
||||
max-height: 100vh;
|
||||
max-height: 100svh;
|
||||
}
|
||||
.\!max-h-full {
|
||||
max-height: 100% !important;
|
||||
}
|
||||
.\!max-h-screen {
|
||||
max-height: 100vh !important;
|
||||
max-height: 100svh !important;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,11 +2,11 @@
|
|||
min-height: 100%;
|
||||
}
|
||||
.min-h-screen {
|
||||
min-height: 100vh;
|
||||
min-height: 100svh;
|
||||
}
|
||||
.\!min-h-full {
|
||||
min-height: 100% !important;
|
||||
}
|
||||
.\!min-h-screen {
|
||||
min-height: 100vh !important;
|
||||
min-height: 100svh !important;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -36,7 +36,6 @@
|
|||
}
|
||||
|
||||
@mixin h4 {
|
||||
@include text-primary;
|
||||
@include font-subhed;
|
||||
@include leading-tight;
|
||||
@include text-sm;
|
||||
|
|
|
|||
Loading…
Reference in a new issue