hero with graphic
This commit is contained in:
Prasanta Kumar Dutta
parent
f1ae721d3f
commit
10f4c554bd
20 changed files with 1690 additions and 91 deletions
|
|
@ -4,17 +4,22 @@
|
|||
// @ts-ignore
|
||||
import componentDocs from './stories/docs/component.md?raw';
|
||||
// @ts-ignore
|
||||
// import backgroundImageDocs from './stories/docs/backgroundImage.md?raw';
|
||||
import backgroundGraphicDocs from './stories/docs/backgroundGraphic.md?raw';
|
||||
// @ts-ignore
|
||||
import inlineGraphicDocs from './stories/docs/inlineGraphic.md?raw';
|
||||
|
||||
// @ts-ignore
|
||||
import polarImgSrc from './stories/polar.jpg';
|
||||
// import GraphicBlock from '../GraphicBlock/GraphicBlock.svelte';
|
||||
|
||||
import HeroHeadline from './Hero.svelte';
|
||||
import GraphicBlock from '../GraphicBlock/GraphicBlock.svelte';
|
||||
|
||||
import CrashMap from './stories/graphics/crash.svelte';
|
||||
import QuakeMap from './stories/graphics/quakemap.svelte';
|
||||
|
||||
import {
|
||||
withComponentDocs,
|
||||
// withStoryDocs,
|
||||
withStoryDocs,
|
||||
} from '$lib/docs/utils/withParams.js';
|
||||
|
||||
const metaProps = {
|
||||
|
|
@ -25,6 +30,10 @@
|
|||
control: 'select',
|
||||
options: ['small', 'normal', 'big', 'bigger', 'biggest'],
|
||||
},
|
||||
hedWidth: {
|
||||
control: 'select',
|
||||
options: ['normal', 'wide', 'wider', 'widest'],
|
||||
},
|
||||
width: {
|
||||
control: 'select',
|
||||
options: ['normal', 'wide', 'wider', 'widest'],
|
||||
|
|
@ -44,11 +53,10 @@
|
|||
</Template>
|
||||
|
||||
<Story
|
||||
name="Default"
|
||||
name="With backdrop photo"
|
||||
args="{{
|
||||
section: 'World News',
|
||||
hed: 'Reuters Graphics Interactive',
|
||||
hedSize: 'normal',
|
||||
dek: 'The beginning of a beautiful page',
|
||||
authors: ['Simon Scarr', 'Vijdan Mohammad Kawoosa'],
|
||||
publishTime: new Date('2022-03-04').toISOString(),
|
||||
|
|
@ -56,12 +64,85 @@
|
|||
}}"
|
||||
/>
|
||||
|
||||
<!-- <Story name="With inline media" {...withStoryDocs(backgroundImageDocs)}>
|
||||
<Story name="With backdrop graphic" {...withStoryDocs(backgroundGraphicDocs)}>
|
||||
<HeroHeadline
|
||||
hed="{'Earthquake devastates Afghanistan'}"
|
||||
hedSize="{'big'}"
|
||||
hedWidth="wide"
|
||||
class="mb-0"
|
||||
dek=""
|
||||
authors="{[
|
||||
'Anand Katakam',
|
||||
'Vijdan Mohammad Kawoosa',
|
||||
'Adolfo Arranz',
|
||||
'Wen Foo',
|
||||
'Simon Scarr',
|
||||
'Aman Bhargava',
|
||||
'Jitesh Chowdhury',
|
||||
'Manas Sharma',
|
||||
'Aditi Bhandari',
|
||||
]}"
|
||||
publishTime="{new Date('2022-06-24').toISOString()}"
|
||||
>
|
||||
<div slot="background">
|
||||
<GraphicBlock
|
||||
width="fluid"
|
||||
role="figure"
|
||||
class="my-0"
|
||||
textWidth="normal"
|
||||
notes=""
|
||||
ariaDescription="Earthquake impact map"
|
||||
>
|
||||
<svelte:component this="{QuakeMap}" />
|
||||
</GraphicBlock>
|
||||
</div>
|
||||
</HeroHeadline>
|
||||
<style lang="scss">
|
||||
.hero-headline .headline {
|
||||
align-items: flex-end;
|
||||
|
||||
@media (max-width: 1100px) {
|
||||
max-width: var(--normal-column-width) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.hero-wrapper {
|
||||
// Make hero smaller than 100vh
|
||||
--heroHeight: 85svh;
|
||||
|
||||
@media (max-width: 960px) {
|
||||
--heroHeight: 65svh;
|
||||
}
|
||||
|
||||
// Custom hero sizing for landscape mobile
|
||||
@media (max-width: 960px) and (orientation: landscape) {
|
||||
--heroHeight: 200svh;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</Story>
|
||||
|
||||
<Story name="With inline graphic" {...withStoryDocs(inlineGraphicDocs)}>
|
||||
<HeroHeadline
|
||||
hed="{'The plunge from 29,000 feet'}"
|
||||
hedWidth="wide"
|
||||
class="mb-0"
|
||||
dek="{'How China Eastern Airlines flight MU5735 went from an uneventful flight at cruising altitude to disaster in just minutes.'}"
|
||||
section="{'Global news'}"
|
||||
authors="{['Simon Scarr', 'Vijdan Mohammad Kawoosa']}"
|
||||
publishTime="{new Date('2020-01-01').toISOString()}"
|
||||
/>
|
||||
</Story> -->
|
||||
>
|
||||
<div slot="inline">
|
||||
<GraphicBlock
|
||||
width="fluid"
|
||||
role="figure"
|
||||
class="my-0"
|
||||
textWidth="normal"
|
||||
notes="Source: Satellite image from Google, Maxar Technologies, CNES/Airbus, Landsat/Copernicus"
|
||||
ariaDescription="Aerial map showing trajectory of crash"
|
||||
>
|
||||
<svelte:component this="{CrashMap}" />
|
||||
</GraphicBlock>
|
||||
</div>
|
||||
</HeroHeadline>
|
||||
</Story>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
<!-- @component `HeroHeadline` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-HeroHeadline--default) -->
|
||||
<script lang="ts">
|
||||
import { HeadlineSize } from '../@types/global';
|
||||
import cssVariables from '../../actions/cssVariables/index.js';
|
||||
|
||||
/** Set to true for embeddables. */
|
||||
export let embedded: boolean = false;
|
||||
|
|
@ -10,19 +9,7 @@
|
|||
* Path to background image
|
||||
* @type {string}
|
||||
*/
|
||||
export let img: string;
|
||||
|
||||
/**
|
||||
* Size value for CSS property background-size
|
||||
* @type {string}
|
||||
*/
|
||||
export let backgroundSize: 'auto' | 'cover' | 'contain' = 'cover';
|
||||
|
||||
/**
|
||||
* Position value for CSS property background-position
|
||||
* @type {string}
|
||||
*/
|
||||
export let backgroundPos = 'center';
|
||||
export let img: string | null = null;
|
||||
|
||||
/**
|
||||
* ARIA description, passed in as a markdown string.
|
||||
|
|
@ -36,12 +23,6 @@
|
|||
*/
|
||||
export let notes: string | null = null;
|
||||
|
||||
/**
|
||||
* Height as a percetange of viewport height
|
||||
* @type {number}
|
||||
*/
|
||||
export let heroHeight: number = 100;
|
||||
|
||||
/**
|
||||
* Headline, parsed as an _inline_ markdown string in an `h1` element.
|
||||
* @type {string}
|
||||
|
|
@ -64,6 +45,11 @@
|
|||
*/
|
||||
export let hedAlign: 'left' | 'center' | 'right' = 'center';
|
||||
|
||||
/**
|
||||
* Width of the headline.
|
||||
*/
|
||||
export let hedWidth: 'normal' | 'wide' | 'wider' | 'widest' = 'normal';
|
||||
|
||||
/**
|
||||
* Dek, parsed as a markdown string.
|
||||
* @type {string}
|
||||
|
|
@ -90,9 +76,9 @@
|
|||
export let updateTime: string = '';
|
||||
|
||||
/**
|
||||
* Width of the headline.
|
||||
* Width of the Hero graphic.
|
||||
*/
|
||||
export let width: 'normal' | 'wide' | 'wider' | 'widest' = 'normal';
|
||||
export let width: 'normal' | 'wide' | 'wider' | 'widest' = 'widest';
|
||||
|
||||
import Headline from '../Headline/Headline.svelte';
|
||||
import GraphicBlock from '../GraphicBlock/GraphicBlock.svelte';
|
||||
|
|
@ -120,21 +106,15 @@
|
|||
hedClass = 'text-3xl';
|
||||
}
|
||||
}
|
||||
|
||||
$: variables = {
|
||||
heroHeight: embedded ? '850px' : heroHeight + 'svh',
|
||||
backgroundSize,
|
||||
backgroundPos,
|
||||
};
|
||||
</script>
|
||||
|
||||
<div class="hero-wrapper" use:cssVariables="{variables}">
|
||||
<!-- Background media -->
|
||||
<div class="hero-wrapper">
|
||||
<!-- Background media hero-->
|
||||
{#if $$slots.background || img}
|
||||
<Block width="fluid" class="hero-headline fmt-0">
|
||||
<Block width="fluid" class="hero-headline background-hero fmt-0">
|
||||
<Headline
|
||||
class="{cls} mt-0 !text-{hedAlign}"
|
||||
width="{width}"
|
||||
class="{cls} !text-{hedAlign}"
|
||||
width="{hedWidth}"
|
||||
section="{section}"
|
||||
hedSize="{hedSize}"
|
||||
hed="{hed}"
|
||||
|
|
@ -142,11 +122,11 @@
|
|||
/>
|
||||
<div class="background-container">
|
||||
{#if $$slots.background}
|
||||
<!-- Hero named slot -->
|
||||
<!-- Hero graphic named slot -->
|
||||
<slot name="background" />
|
||||
{:else}
|
||||
<GraphicBlock
|
||||
width="fluid"
|
||||
width="{width}"
|
||||
role="img"
|
||||
class="my-0"
|
||||
textWidth="normal"
|
||||
|
|
@ -160,23 +140,34 @@
|
|||
{/if}
|
||||
</div>
|
||||
</Block>
|
||||
{#if notes}
|
||||
<TextBlock width="normal">
|
||||
<aside class="fmt-2">
|
||||
{@html marked(notes)}
|
||||
</aside>
|
||||
</TextBlock>
|
||||
{/if}
|
||||
{/if}
|
||||
{#if notes}
|
||||
<TextBlock width="normal">
|
||||
<aside class="fmt-2">
|
||||
{@html marked(notes)}
|
||||
</aside>
|
||||
</TextBlock>
|
||||
|
||||
<!-- Inline hero -->
|
||||
{#if $$slots.inline}
|
||||
<Block width="fluid" class="hero-headline inline-hero">
|
||||
<Headline
|
||||
class="{cls} !text-{hedAlign}"
|
||||
width="{hedWidth}"
|
||||
section="{section}"
|
||||
hedSize="{hedSize}"
|
||||
hed="{hed}"
|
||||
dek="{dek}"
|
||||
/>
|
||||
<div class="graphic-container">
|
||||
<!-- Hero named slot -->
|
||||
<slot name="inline" />
|
||||
</div>
|
||||
</Block>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
{#if $$slots.inline}
|
||||
<div class="crown-container">
|
||||
<!-- Hero named slot -->
|
||||
<slot name="inline" />
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if $$slots.byline}
|
||||
<!-- Custom byline/dateline -->
|
||||
<slot name="byline" />
|
||||
|
|
@ -194,26 +185,33 @@
|
|||
@import '../../scss/mixins';
|
||||
|
||||
:global {
|
||||
.hero-headline {
|
||||
height: var(--heroHeight);
|
||||
.background-hero {
|
||||
height: var(--heroHeight, 100svh);
|
||||
max-height: 1800px;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
|
||||
.headline {
|
||||
@include fmt-0;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 1;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
height: var(--heroHeight);
|
||||
height: var(--heroHeight, 100svh);
|
||||
max-height: 1800px;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
}
|
||||
|
||||
.byline-container {
|
||||
z-index: 1;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.hero-wrapper {
|
||||
// Caption and Sources
|
||||
aside {
|
||||
|
|
@ -224,17 +222,13 @@
|
|||
}
|
||||
}
|
||||
.background-image {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: var(--heroHeight);
|
||||
width: auto;
|
||||
height: var(--heroHeight, 100svh);
|
||||
max-height: 1800px;
|
||||
top: 0;
|
||||
z-index: 0;
|
||||
left: 0;
|
||||
user-select: none;
|
||||
|
||||
background-repeat: no-repeat;
|
||||
background-position: var(--backgroundPos);
|
||||
background-size: var(--backgroundSize);
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,66 @@
|
|||
Reuters Graphics headline with ai2svelte graphic as background.
|
||||
|
||||
```svelte
|
||||
<script>
|
||||
import { Headline } from '@reuters-graphics/graphics-components';
|
||||
import Map from './ai2svelte/graphic.svelte';
|
||||
import { assets } from '$app/paths';
|
||||
</script>
|
||||
|
||||
<HeroHeadline
|
||||
hed="{'Earthquake devastates Afghanistan'}"
|
||||
hedSize="{'big'}"
|
||||
hedWidth="wide"
|
||||
class="mb-0"
|
||||
dek=""
|
||||
authors="{[
|
||||
'Anand Katakam',
|
||||
'Vijdan Mohammad Kawoosa',
|
||||
'Adolfo Arranz',
|
||||
'Wen Foo',
|
||||
'Simon Scarr',
|
||||
'Aman Bhargava',
|
||||
'Jitesh Chowdhury',
|
||||
'Manas Sharma',
|
||||
'Aditi Bhandari',
|
||||
]}"
|
||||
publishTime="{new Date('2022-06-24').toISOString()}"
|
||||
>
|
||||
<div slot="background">
|
||||
<GraphicBlock
|
||||
width="fluid"
|
||||
role="figure"
|
||||
class="my-0"
|
||||
textWidth="normal"
|
||||
notes=""
|
||||
ariaDescription="Earthquake impact map"
|
||||
>
|
||||
<svelte:component this="{QuakeMap}" />
|
||||
</GraphicBlock>
|
||||
</div>
|
||||
</HeroHeadline>
|
||||
|
||||
<style lang="scss">
|
||||
.hero-headline .headline {
|
||||
align-items: flex-end;
|
||||
|
||||
@media (max-width: 1100px) {
|
||||
max-width: var(--normal-column-width) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.hero-wrapper {
|
||||
// Make hero smaller than 100vh
|
||||
--heroHeight: 85svh;
|
||||
|
||||
@media (max-width: 960px) {
|
||||
--heroHeight: 65svh;
|
||||
}
|
||||
|
||||
// Custom hero sizing for landscape mobile
|
||||
@media (max-width: 960px) and (orientation: landscape) {
|
||||
--heroHeight: 200svh;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
|
@ -1,16 +0,0 @@
|
|||
> 🔨 **Under construction**: We're working on this component to make it better. Pardon our mess.
|
||||
|
||||
Reuters Graphics headline
|
||||
|
||||
```svelte
|
||||
<script>
|
||||
import { Headline } from '@reuters-graphics/graphics-components';
|
||||
</script>
|
||||
|
||||
<Headline
|
||||
hed="{'Reuters Graphics Interactive'}"
|
||||
dek="{'The beginning of a beautiful page'}"
|
||||
section="{'Global news'}"
|
||||
sectionColour="{'orange'}"
|
||||
/>
|
||||
```
|
||||
|
|
@ -1,16 +1,17 @@
|
|||
> 🔨 **Under construction**: We're working on this component to make it better. Pardon our mess.
|
||||
|
||||
Reuters Graphics headline
|
||||
Reuters Graphics headline with a Hero media
|
||||
|
||||
```svelte
|
||||
<script>
|
||||
import { Headline } from '@reuters-graphics/graphics-components';
|
||||
import { HeroHeadline } from '@reuters-graphics/graphics-components';
|
||||
import { assets } from '$app/paths'; // 👈 If using in the Graphics Kit...
|
||||
</script>
|
||||
|
||||
<Headline
|
||||
<HeroHeadline
|
||||
img="{`${assets}/images/myImage.jpg`}"
|
||||
hed="{'Reuters Graphics Interactive'}"
|
||||
dek="{'The beginning of a beautiful page'}"
|
||||
section="{'Global news'}"
|
||||
sectionColour="{'orange'}"
|
||||
section="{'World News'}"
|
||||
authors="{['Simon Scarr', 'Vijdan Mohammad Kawoosa']}"
|
||||
publishTime="{new Date('2022-03-04').toISOString()}"
|
||||
/>
|
||||
```
|
||||
|
|
|
|||
32
src/components/HeroHeadline/stories/docs/inlineGraphic.md
Normal file
32
src/components/HeroHeadline/stories/docs/inlineGraphic.md
Normal file
|
|
@ -0,0 +1,32 @@
|
|||
Reuters Graphics headline followed by a graphic or any media block.
|
||||
|
||||
```svelte
|
||||
<script>
|
||||
import { Headline } from '@reuters-graphics/graphics-components';
|
||||
import Map from './ai2svelte/graphic.svelte';
|
||||
import { assets } from '$app/paths';
|
||||
</script>
|
||||
|
||||
<HeroHeadline
|
||||
hed="{'The plunge from 29,000 feet'}"
|
||||
hedWidth="wide"
|
||||
class="mb-0"
|
||||
dek="{'How China Eastern Airlines flight MU5735 went from an uneventful flight at cruising altitude to disaster in just minutes.'}"
|
||||
section="{'Global news'}"
|
||||
authors="{['Simon Scarr', 'Vijdan Mohammad Kawoosa']}"
|
||||
publishTime="{new Date('2020-01-01').toISOString()}"
|
||||
>
|
||||
<div slot="inline">
|
||||
<GraphicBlock
|
||||
width="fluid"
|
||||
role="figure"
|
||||
class="my-0"
|
||||
textWidth="normal"
|
||||
notes="Source: Satellite image from Google, Maxar Technologies, CNES/Airbus, Landsat/Copernicus"
|
||||
ariaDescription="Aerial map showing trajectory of crash"
|
||||
>
|
||||
<svelte:component this="{Map}" assetsPath="{assets || '/'}" />
|
||||
</GraphicBlock>
|
||||
</div>
|
||||
</HeroHeadline>
|
||||
```
|
||||
BIN
src/components/HeroHeadline/stories/graphics/CRASH_1-lg.jpeg
Normal file
BIN
src/components/HeroHeadline/stories/graphics/CRASH_1-lg.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 497 KiB |
BIN
src/components/HeroHeadline/stories/graphics/CRASH_1-md.jpeg
Normal file
BIN
src/components/HeroHeadline/stories/graphics/CRASH_1-md.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 303 KiB |
BIN
src/components/HeroHeadline/stories/graphics/CRASH_1-sm.jpeg
Normal file
BIN
src/components/HeroHeadline/stories/graphics/CRASH_1-sm.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 216 KiB |
BIN
src/components/HeroHeadline/stories/graphics/CRASH_1-xl.jpeg
Normal file
BIN
src/components/HeroHeadline/stories/graphics/CRASH_1-xl.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 628 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 787 KiB |
BIN
src/components/HeroHeadline/stories/graphics/CRASH_1-xs.jpeg
Normal file
BIN
src/components/HeroHeadline/stories/graphics/CRASH_1-xs.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 118 KiB |
609
src/components/HeroHeadline/stories/graphics/crash.svelte
Normal file
609
src/components/HeroHeadline/stories/graphics/crash.svelte
Normal file
|
|
@ -0,0 +1,609 @@
|
|||
<script>
|
||||
export let assetsPath = './';
|
||||
let width = null;
|
||||
|
||||
// @ts-ignore
|
||||
import chartXs from './CRASH_1-xs.jpeg';
|
||||
// @ts-ignore
|
||||
import chartSm from './CRASH_1-sm.jpeg';
|
||||
// @ts-ignore
|
||||
import chartMd from './CRASH_1-md.jpeg';
|
||||
// @ts-ignore
|
||||
import chartLg from './CRASH_1-lg.jpeg';
|
||||
// @ts-ignore
|
||||
import chartXl from './CRASH_1-xl.jpeg';
|
||||
// @ts-ignore
|
||||
import chartXxl from './CRASH_1-xl_copy.jpeg';
|
||||
</script>
|
||||
|
||||
<!-- Generated by ai2html v0.100.0 - 2022-03-29 17:01 -->
|
||||
|
||||
<div id="g-CRASH_1-box" bind:clientWidth="{width}">
|
||||
<!-- Artboard: xs -->
|
||||
{#if width && width >= 0 && width < 510}
|
||||
<div id="g-CRASH_1-xs" class="g-artboard" style="">
|
||||
<div style="padding: 0 0 93.0303% 0;"></div>
|
||||
<div
|
||||
id="g-CRASH_1-xs-img"
|
||||
class="g-aiImg"
|
||||
alt=""
|
||||
style="{`background-image: url(${chartXs});`}"
|
||||
></div>
|
||||
<div
|
||||
id="g-ai0-1"
|
||||
class="g-xs-text g-aiAbs g-aiPointText"
|
||||
style="top:18.0723%;margin-top:-14.5px;left:7.0539%;width:76px;"
|
||||
>
|
||||
<p class="g-pstyle0">Cruising at</p>
|
||||
<p class="g-pstyle0">29,100 feet</p>
|
||||
</div>
|
||||
<div
|
||||
id="g-ai0-2"
|
||||
class="g-xs-text g-aiAbs g-aiPointText"
|
||||
style="top:20.271%;margin-top:-21.2px;left:26.8941%;width:103px;"
|
||||
>
|
||||
<p class="g-pstyle1">2.21 pm</p>
|
||||
<p class="g-pstyle0">Steep drop from</p>
|
||||
<p class="g-pstyle0">27,025 feet</p>
|
||||
</div>
|
||||
<div
|
||||
id="g-ai0-3"
|
||||
class="g-xs-text g-aiAbs g-aiPointText"
|
||||
style="top:42.7133%;margin-top:-15.1px;right:3.3749%;width:96px;"
|
||||
>
|
||||
<p class="g-pstyle2">Typical path to</p>
|
||||
<p class="g-pstyle2">Guangzhou</p>
|
||||
</div>
|
||||
<div
|
||||
id="g-ai0-4"
|
||||
class="g-xs-text g-aiAbs g-aiPointText"
|
||||
style="top:70.482%;margin-top:-15.4px;right:2.4487%;width:79px;"
|
||||
>
|
||||
<p class="g-pstyle2">Last known</p>
|
||||
<p class="g-pstyle2">location</p>
|
||||
</div>
|
||||
<div
|
||||
id="g-ai0-5"
|
||||
class="g-xs-text g-aiAbs g-aiPointText"
|
||||
style="top:87.4202%;margin-top:-15.4px;right:16.3453%;width:50px;"
|
||||
>
|
||||
<p class="g-pstyle2">Crash</p>
|
||||
<p class="g-pstyle2">site</p>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
<!-- Artboard: sm -->
|
||||
{#if width && width >= 510 && width < 660}
|
||||
<div id="g-CRASH_1-sm" class="g-artboard" style="">
|
||||
<div style="padding: 0 0 77.8431% 0;"></div>
|
||||
<div
|
||||
id="g-CRASH_1-sm-img"
|
||||
class="g-aiImg"
|
||||
alt=""
|
||||
style="{`background-image: url(${chartSm});`}"
|
||||
></div>
|
||||
<div
|
||||
id="g-ai1-1"
|
||||
class="g-sm-text g-aiAbs g-aiPointText"
|
||||
style="top:17.3436%;margin-top:-16.9px;left:16.4992%;width:86px;"
|
||||
>
|
||||
<p class="g-pstyle0">Cruising at</p>
|
||||
<p class="g-pstyle0">29,100 feet</p>
|
||||
</div>
|
||||
<div
|
||||
id="g-ai1-2"
|
||||
class="g-sm-text g-aiAbs g-aiPointText"
|
||||
style="top:20.87%;margin-top:-24.9px;left:32.8523%;width:117px;"
|
||||
>
|
||||
<p class="g-pstyle1">2.21 pm</p>
|
||||
<p class="g-pstyle0">Steep drop from</p>
|
||||
<p class="g-pstyle0">27,025 feet</p>
|
||||
</div>
|
||||
<div
|
||||
id="g-ai1-3"
|
||||
class="g-sm-text g-aiAbs g-aiPointText"
|
||||
style="top:43.9824%;margin-top:-17.6px;right:4.7685%;width:108px;"
|
||||
>
|
||||
<p class="g-pstyle2">Typical path to</p>
|
||||
<p class="g-pstyle2">Guangzhou</p>
|
||||
</div>
|
||||
<div
|
||||
id="g-ai1-4"
|
||||
class="g-sm-text g-aiAbs g-aiPointText"
|
||||
style="top:71.9421%;margin-top:-17.6px;right:4.6892%;width:89px;"
|
||||
>
|
||||
<p class="g-pstyle2">Last known</p>
|
||||
<p class="g-pstyle2">location</p>
|
||||
</div>
|
||||
<div
|
||||
id="g-ai1-5"
|
||||
class="g-sm-text g-aiAbs g-aiPointText"
|
||||
style="top:87.0554%;margin-top:-17.6px;right:19.7924%;width:55px;"
|
||||
>
|
||||
<p class="g-pstyle2">Crash</p>
|
||||
<p class="g-pstyle2">site</p>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
<!-- Artboard: md -->
|
||||
{#if width && width >= 660 && width < 930}
|
||||
<div id="g-CRASH_1-md" class="g-artboard" style="">
|
||||
<div style="padding: 0 0 68.7879% 0;"></div>
|
||||
<div
|
||||
id="g-CRASH_1-md-img"
|
||||
class="g-aiImg"
|
||||
alt=""
|
||||
style="{`background-image: url(${chartMd});`}"
|
||||
></div>
|
||||
<div
|
||||
id="g-ai2-1"
|
||||
class="g-md-text g-aiAbs g-aiPointText"
|
||||
style="top:17.1581%;margin-top:-13.9px;left:3.6766%;width:76px;"
|
||||
>
|
||||
<p class="g-pstyle0">Cruising at</p>
|
||||
<p class="g-pstyle0">29,100 feet</p>
|
||||
</div>
|
||||
<div
|
||||
id="g-ai2-2"
|
||||
class="g-md-text g-aiAbs g-aiPointText"
|
||||
style="top:20.0216%;margin-top:-13.9px;left:19.6076%;width:92px;"
|
||||
>
|
||||
<p class="g-pstyle1">2.20 pm</p>
|
||||
<p class="g-pstyle0">Slight descent</p>
|
||||
</div>
|
||||
<div
|
||||
id="g-ai2-3"
|
||||
class="g-md-text g-aiAbs g-aiPointText"
|
||||
style="top:24.1477%;margin-top:-20.6px;left:34.5493%;width:102px;"
|
||||
>
|
||||
<p class="g-pstyle1">2.21 pm</p>
|
||||
<p class="g-pstyle0">Steep drop from</p>
|
||||
<p class="g-pstyle0">27,025 feet</p>
|
||||
</div>
|
||||
<div
|
||||
id="g-ai2-4"
|
||||
class="g-md-text g-aiAbs g-aiPointText"
|
||||
style="top:46.8149%;margin-top:-14.5px;right:2.8165%;width:95px;"
|
||||
>
|
||||
<p class="g-pstyle2">Typical path to</p>
|
||||
<p class="g-pstyle2">Guangzhou</p>
|
||||
</div>
|
||||
<div
|
||||
id="g-ai2-5"
|
||||
class="g-md-text g-aiAbs g-aiPointText"
|
||||
style="top:80.0748%;margin-top:-14.5px;left:84.28%;width:79px;"
|
||||
>
|
||||
<p class="g-pstyle0">Last known</p>
|
||||
<p class="g-pstyle0">location</p>
|
||||
</div>
|
||||
<div
|
||||
id="g-ai2-6"
|
||||
class="g-md-text g-aiAbs g-aiPointText"
|
||||
style="top:87.5638%;margin-top:-14.5px;right:22.3457%;width:86px;"
|
||||
>
|
||||
<p class="g-pstyle2">Approximate</p>
|
||||
<p class="g-pstyle2">crash site</p>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
<!-- Artboard: lg -->
|
||||
{#if width && width >= 930 && width < 1200}
|
||||
<div id="g-CRASH_1-lg" class="g-artboard" style="">
|
||||
<div style="padding: 0 0 61.3978% 0;"></div>
|
||||
<div
|
||||
id="g-CRASH_1-lg-img"
|
||||
class="g-aiImg"
|
||||
alt=""
|
||||
style="{`background-image: url(${chartLg});`}"
|
||||
></div>
|
||||
<div
|
||||
id="g-ai3-1"
|
||||
class="g-lg-text g-aiAbs g-aiPointText"
|
||||
style="top:16.9729%;margin-top:-17.9px;left:4.0448%;width:90px;"
|
||||
>
|
||||
<p class="g-pstyle0">Cruising at</p>
|
||||
<p class="g-pstyle0">29,100 feet</p>
|
||||
</div>
|
||||
<div
|
||||
id="g-ai3-2"
|
||||
class="g-lg-text g-aiAbs g-aiPointText"
|
||||
style="top:20.3004%;margin-top:-17.9px;left:27.525%;width:111px;"
|
||||
>
|
||||
<p class="g-pstyle1">2.20 pm</p>
|
||||
<p class="g-pstyle2">Slight descent</p>
|
||||
</div>
|
||||
<div
|
||||
id="g-ai3-3"
|
||||
class="g-lg-text g-aiAbs g-aiPointText"
|
||||
style="top:24.5911%;margin-top:-26.4px;left:40.9124%;width:124px;"
|
||||
>
|
||||
<p class="g-pstyle1">2.21 pm</p>
|
||||
<p class="g-pstyle2">Steep drop from</p>
|
||||
<p class="g-pstyle2">27,025 feet</p>
|
||||
</div>
|
||||
<div
|
||||
id="g-ai3-4"
|
||||
class="g-lg-text g-aiAbs g-aiPointText"
|
||||
style="top:47.2373%;margin-top:-18.7px;right:2.986%;width:114px;"
|
||||
>
|
||||
<p class="g-pstyle3">Typical path to</p>
|
||||
<p class="g-pstyle3">Guangzhou</p>
|
||||
</div>
|
||||
<div
|
||||
id="g-ai3-5"
|
||||
class="g-lg-text g-aiAbs g-aiPointText"
|
||||
style="top:80.6874%;margin-top:-18.7px;left:85.4704%;width:94px;"
|
||||
>
|
||||
<p class="g-pstyle2">Last known</p>
|
||||
<p class="g-pstyle2">location</p>
|
||||
</div>
|
||||
<div
|
||||
id="g-ai3-6"
|
||||
class="g-lg-text g-aiAbs g-aiPointText"
|
||||
style="top:88.0429%;margin-top:-18.7px;right:20.5522%;width:102px;"
|
||||
>
|
||||
<p class="g-pstyle3">Approximate</p>
|
||||
<p class="g-pstyle3">crash site</p>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
<!-- Artboard: xl -->
|
||||
{#if width && width >= 1200 && width < 1350}
|
||||
<div id="g-CRASH_1-xl" class="g-artboard" style="">
|
||||
<div style="padding: 0 0 47% 0;"></div>
|
||||
<div
|
||||
id="g-CRASH_1-xl-img"
|
||||
class="g-aiImg"
|
||||
alt=""
|
||||
style="{`background-image: url(${chartXl});`}"
|
||||
></div>
|
||||
<div
|
||||
id="g-ai4-1"
|
||||
class="g-xl-text g-aiAbs g-aiPointText"
|
||||
style="top:16.4851%;margin-top:-19px;left:21.0319%;width:95px;"
|
||||
>
|
||||
<p class="g-pstyle0">Cruising at</p>
|
||||
<p class="g-pstyle0">29,100 feet</p>
|
||||
</div>
|
||||
<div
|
||||
id="g-ai4-2"
|
||||
class="g-xl-text g-aiAbs g-aiPointText"
|
||||
style="top:20.1977%;margin-top:-17.9px;left:38.5203%;width:111px;"
|
||||
>
|
||||
<p class="g-pstyle1">2.20 pm</p>
|
||||
<p class="g-pstyle2">Slight descent</p>
|
||||
</div>
|
||||
<div
|
||||
id="g-ai4-3"
|
||||
class="g-xl-text g-aiAbs g-aiPointText"
|
||||
style="top:24.5417%;margin-top:-26.4px;left:48.8956%;width:124px;"
|
||||
>
|
||||
<p class="g-pstyle1">2.21 pm</p>
|
||||
<p class="g-pstyle2">Steep drop from</p>
|
||||
<p class="g-pstyle2">27,025 feet</p>
|
||||
</div>
|
||||
<div
|
||||
id="g-ai4-4"
|
||||
class="g-xl-text g-aiAbs g-aiPointText"
|
||||
style="top:53.1427%;margin-top:-18.7px;right:2.0477%;width:114px;"
|
||||
>
|
||||
<p class="g-pstyle3">Typical path to</p>
|
||||
<p class="g-pstyle3">Guangzhou</p>
|
||||
</div>
|
||||
<div
|
||||
id="g-ai4-5"
|
||||
class="g-xl-text g-aiAbs g-aiPointText"
|
||||
style="top:81.3342%;margin-top:-18.7px;left:83.4281%;width:94px;"
|
||||
>
|
||||
<p class="g-pstyle2">Last known</p>
|
||||
<p class="g-pstyle2">location</p>
|
||||
</div>
|
||||
<div
|
||||
id="g-ai4-6"
|
||||
class="g-xl-text g-aiAbs g-aiPointText"
|
||||
style="top:88.781%;margin-top:-18.7px;right:21.2395%;width:102px;"
|
||||
>
|
||||
<p class="g-pstyle3">Approximate</p>
|
||||
<p class="g-pstyle3">crash site</p>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
<!-- Artboard: xl_copy -->
|
||||
{#if width && width >= 1350}
|
||||
<div id="g-CRASH_1-xl_copy" class="g-artboard" style="">
|
||||
<div style="padding: 0 0 46.8889% 0;"></div>
|
||||
<div
|
||||
id="g-CRASH_1-xl_copy-img"
|
||||
class="g-aiImg"
|
||||
alt=""
|
||||
style="{`background-image: url(${chartXxl});`}"
|
||||
></div>
|
||||
<div
|
||||
id="g-ai5-1"
|
||||
class="g-xxl-text g-aiAbs g-aiPointText"
|
||||
style="top:13.5823%;margin-top:-19px;left:17.5449%;width:95px;"
|
||||
>
|
||||
<p class="g-pstyle0">Cruising at</p>
|
||||
<p class="g-pstyle0">29,100 feet</p>
|
||||
</div>
|
||||
<div
|
||||
id="g-ai5-2"
|
||||
class="g-xxl-text g-aiAbs g-aiPointText"
|
||||
style="top:16.11%;margin-top:-19px;left:34.2801%;width:117px;"
|
||||
>
|
||||
<p class="g-pstyle1">2.20 pm</p>
|
||||
<p class="g-pstyle0">Slight descent</p>
|
||||
</div>
|
||||
<div
|
||||
id="g-ai5-3"
|
||||
class="g-xxl-text g-aiAbs g-aiPointText"
|
||||
style="top:20.5333%;margin-top:-28px;left:45.3329%;width:130px;"
|
||||
>
|
||||
<p class="g-pstyle1">2.21 pm</p>
|
||||
<p class="g-pstyle0">Steep drop from</p>
|
||||
<p class="g-pstyle0">27,025 feet</p>
|
||||
</div>
|
||||
<div
|
||||
id="g-ai5-4"
|
||||
class="g-xxl-text g-aiAbs g-aiPointText"
|
||||
style="top:51.1596%;margin-top:-19.8px;right:2.3384%;width:121px;"
|
||||
>
|
||||
<p class="g-pstyle2">Typical path to</p>
|
||||
<p class="g-pstyle2">Guangzhou</p>
|
||||
</div>
|
||||
<div
|
||||
id="g-ai5-5"
|
||||
class="g-xxl-text g-aiAbs g-aiPointText"
|
||||
style="top:81.3333%;margin-top:-19.8px;left:82.1208%;width:98px;"
|
||||
>
|
||||
<p class="g-pstyle0">Last known</p>
|
||||
<p class="g-pstyle0">location</p>
|
||||
</div>
|
||||
<div
|
||||
id="g-ai5-6"
|
||||
class="g-xxl-text g-aiAbs g-aiPointText"
|
||||
style="top:89.3902%;margin-top:-19.8px;right:22.7998%;width:108px;"
|
||||
>
|
||||
<p class="g-pstyle2">Approximate</p>
|
||||
<p class="g-pstyle2">crash site</p>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<!-- End ai2html - 2022-03-29 17:01 -->
|
||||
|
||||
<!-- ai file: CRASH_1.ai -->
|
||||
<style lang="scss">
|
||||
#g-CRASH_1-box,
|
||||
#g-CRASH_1-box .g-artboard {
|
||||
margin: 0 auto;
|
||||
}
|
||||
#g-CRASH_1-box p {
|
||||
margin: 0;
|
||||
}
|
||||
#g-CRASH_1-box .g-aiAbs {
|
||||
position: absolute;
|
||||
}
|
||||
#g-CRASH_1-box .g-aiImg {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
display: block;
|
||||
width: 100% !important;
|
||||
height: 100%;
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
#g-CRASH_1-box .g-aiPointText p {
|
||||
white-space: nowrap;
|
||||
}
|
||||
#g-CRASH_1-xs {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
#g-CRASH_1-xs p {
|
||||
font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont,
|
||||
'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
||||
font-weight: 400;
|
||||
line-height: 14px;
|
||||
height: auto;
|
||||
opacity: 1;
|
||||
letter-spacing: 0em;
|
||||
font-size: 12px;
|
||||
text-align: left;
|
||||
color: rgb(255, 255, 255);
|
||||
text-transform: none;
|
||||
padding-bottom: 0;
|
||||
padding-top: 0;
|
||||
mix-blend-mode: normal;
|
||||
font-style: normal;
|
||||
position: static;
|
||||
}
|
||||
#g-CRASH_1-xs .g-pstyle0 {
|
||||
height: 14px;
|
||||
}
|
||||
#g-CRASH_1-xs .g-pstyle1 {
|
||||
font-weight: 700;
|
||||
height: 14px;
|
||||
}
|
||||
#g-CRASH_1-xs .g-pstyle2 {
|
||||
height: 14px;
|
||||
text-align: right;
|
||||
}
|
||||
#g-CRASH_1-sm {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
#g-CRASH_1-sm p {
|
||||
font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont,
|
||||
'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
||||
font-weight: 400;
|
||||
line-height: 16px;
|
||||
height: auto;
|
||||
opacity: 1;
|
||||
letter-spacing: 0em;
|
||||
font-size: 14px;
|
||||
text-align: left;
|
||||
color: rgb(255, 255, 255);
|
||||
text-transform: none;
|
||||
padding-bottom: 0;
|
||||
padding-top: 0;
|
||||
mix-blend-mode: normal;
|
||||
font-style: normal;
|
||||
position: static;
|
||||
}
|
||||
#g-CRASH_1-sm .g-pstyle0 {
|
||||
height: 16px;
|
||||
}
|
||||
#g-CRASH_1-sm .g-pstyle1 {
|
||||
font-weight: 700;
|
||||
height: 16px;
|
||||
}
|
||||
#g-CRASH_1-sm .g-pstyle2 {
|
||||
height: 16px;
|
||||
text-align: right;
|
||||
}
|
||||
#g-CRASH_1-md {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
#g-CRASH_1-md p {
|
||||
font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont,
|
||||
'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
||||
font-weight: 400;
|
||||
line-height: 13px;
|
||||
height: auto;
|
||||
opacity: 1;
|
||||
letter-spacing: 0em;
|
||||
font-size: 12px;
|
||||
text-align: left;
|
||||
color: rgb(255, 255, 255);
|
||||
text-transform: none;
|
||||
padding-bottom: 0;
|
||||
padding-top: 0;
|
||||
mix-blend-mode: normal;
|
||||
font-style: normal;
|
||||
position: static;
|
||||
}
|
||||
#g-CRASH_1-md .g-pstyle0 {
|
||||
height: 13px;
|
||||
}
|
||||
#g-CRASH_1-md .g-pstyle1 {
|
||||
font-weight: 700;
|
||||
height: 13px;
|
||||
}
|
||||
#g-CRASH_1-md .g-pstyle2 {
|
||||
height: 13px;
|
||||
text-align: right;
|
||||
}
|
||||
#g-CRASH_1-lg {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
#g-CRASH_1-lg p {
|
||||
font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont,
|
||||
'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
||||
font-weight: 400;
|
||||
line-height: 17px;
|
||||
height: auto;
|
||||
opacity: 1;
|
||||
letter-spacing: 0em;
|
||||
font-size: 15px;
|
||||
text-align: left;
|
||||
color: rgb(255, 255, 255);
|
||||
text-transform: none;
|
||||
padding-bottom: 0;
|
||||
padding-top: 0;
|
||||
mix-blend-mode: normal;
|
||||
font-style: normal;
|
||||
position: static;
|
||||
}
|
||||
#g-CRASH_1-lg .g-pstyle0 {
|
||||
height: 17px;
|
||||
color: rgb(88, 89, 91);
|
||||
}
|
||||
#g-CRASH_1-lg .g-pstyle1 {
|
||||
font-weight: 700;
|
||||
height: 17px;
|
||||
}
|
||||
#g-CRASH_1-lg .g-pstyle2 {
|
||||
height: 17px;
|
||||
}
|
||||
#g-CRASH_1-lg .g-pstyle3 {
|
||||
height: 17px;
|
||||
text-align: right;
|
||||
}
|
||||
#g-CRASH_1-xl {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
#g-CRASH_1-xl p {
|
||||
font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont,
|
||||
'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
||||
font-weight: 400;
|
||||
line-height: 17px;
|
||||
height: auto;
|
||||
opacity: 1;
|
||||
letter-spacing: 0em;
|
||||
font-size: 15px;
|
||||
text-align: left;
|
||||
color: rgb(255, 255, 255);
|
||||
text-transform: none;
|
||||
padding-bottom: 0;
|
||||
padding-top: 0;
|
||||
mix-blend-mode: normal;
|
||||
font-style: normal;
|
||||
position: static;
|
||||
}
|
||||
#g-CRASH_1-xl .g-pstyle0 {
|
||||
line-height: 18px;
|
||||
height: 18px;
|
||||
font-size: 16px;
|
||||
}
|
||||
#g-CRASH_1-xl .g-pstyle1 {
|
||||
font-weight: 700;
|
||||
height: 17px;
|
||||
}
|
||||
#g-CRASH_1-xl .g-pstyle2 {
|
||||
height: 17px;
|
||||
}
|
||||
#g-CRASH_1-xl .g-pstyle3 {
|
||||
height: 17px;
|
||||
text-align: right;
|
||||
}
|
||||
#g-CRASH_1-xl_copy {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
#g-CRASH_1-xl_copy p {
|
||||
font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont,
|
||||
'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
||||
font-weight: 400;
|
||||
line-height: 18px;
|
||||
height: auto;
|
||||
opacity: 1;
|
||||
letter-spacing: 0em;
|
||||
font-size: 16px;
|
||||
text-align: left;
|
||||
color: rgb(255, 255, 255);
|
||||
text-transform: none;
|
||||
padding-bottom: 0;
|
||||
padding-top: 0;
|
||||
mix-blend-mode: normal;
|
||||
font-style: normal;
|
||||
position: static;
|
||||
}
|
||||
#g-CRASH_1-xl_copy .g-pstyle0 {
|
||||
height: 18px;
|
||||
}
|
||||
#g-CRASH_1-xl_copy .g-pstyle1 {
|
||||
font-weight: 700;
|
||||
height: 18px;
|
||||
}
|
||||
#g-CRASH_1-xl_copy .g-pstyle2 {
|
||||
height: 18px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
/* Custom CSS */
|
||||
</style>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 428 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 256 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 200 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 486 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 127 KiB |
828
src/components/HeroHeadline/stories/graphics/quakemap.svelte
Normal file
828
src/components/HeroHeadline/stories/graphics/quakemap.svelte
Normal file
|
|
@ -0,0 +1,828 @@
|
|||
<script>
|
||||
export let assetsPath = './';
|
||||
let width = null;
|
||||
|
||||
// @ts-ignore
|
||||
import chartXs from './quake-map-top-xs.jpeg';
|
||||
// @ts-ignore
|
||||
import chartSm from './quake-map-top-sm.jpeg';
|
||||
// @ts-ignore
|
||||
import chartMd from '././quake-map-top-md.jpeg';
|
||||
// @ts-ignore
|
||||
import chartLg from '././quake-map-top-lg.jpeg';
|
||||
// @ts-ignore
|
||||
import chartXl from '././quake-map-top-xl.jpeg';
|
||||
</script>
|
||||
|
||||
<div id="g-quake-map-top-box" bind:clientWidth="{width}">
|
||||
<!-- Artboard: xs -->
|
||||
{#if width && width >= 0 && width < 510}
|
||||
<div id="g-quake-map-top-xs" class="g-artboard" style="">
|
||||
<div style="padding: 0 0 117.5758% 0;"></div>
|
||||
<div
|
||||
id="g-quake-map-top-xs-img"
|
||||
class="g-aiImg"
|
||||
alt=""
|
||||
style="{`background-image: url(${chartXs});`}"
|
||||
></div>
|
||||
<div
|
||||
id="g-ai0-1"
|
||||
class="g-tt g-aiAbs g-aiPointText"
|
||||
style="top:-1.3529%;margin-top:-6.8px;left:33.0848%;width:46px;"
|
||||
>
|
||||
<p class="g-pstyle0">Kabul</p>
|
||||
</div>
|
||||
<div
|
||||
id="g-ai0-2"
|
||||
class="g-tt g-aiAbs g-aiPointText"
|
||||
style="top:4.3062%;margin-top:-7.7px;left:4.0902%;width:65px;"
|
||||
>
|
||||
<p class="g-pstyle1">Shaking</p>
|
||||
</div>
|
||||
<div
|
||||
id="g-ai0-3"
|
||||
class="g-tt g-aiAbs g-aiPointText"
|
||||
style="top:8.1722%;margin-top:-7.7px;left:4.0902%;width:78px;"
|
||||
>
|
||||
<p class="g-pstyle2">Very strong</p>
|
||||
</div>
|
||||
<div
|
||||
id="g-ai0-4"
|
||||
class="g-tt g-aiAbs g-aiPointText"
|
||||
style="top:19.5124%;margin-top:-7.7px;left:4.0902%;width:49px;"
|
||||
>
|
||||
<p class="g-pstyle2">Weak</p>
|
||||
</div>
|
||||
<div
|
||||
id="g-ai0-5"
|
||||
class="g-tt g-aiAbs g-aiPointText"
|
||||
style="top:22.4511%;margin-top:-5.1px;left:45.2353%;margin-left:-74px;width:148px;"
|
||||
>
|
||||
<p class="g-pstyle3">AFGHANISTAN</p>
|
||||
</div>
|
||||
<div
|
||||
id="g-ai0-6"
|
||||
class="g-tt g-aiAbs g-aiPointText"
|
||||
style="top:29.7371%;margin-top:-8.4px;left:34.8676%;width:56px;"
|
||||
>
|
||||
<p class="g-pstyle4">Gardez</p>
|
||||
</div>
|
||||
<div
|
||||
id="g-ai0-7"
|
||||
class="g-tt g-aiAbs g-aiPointText"
|
||||
style="top:39.2732%;margin-top:-8.4px;left:65.8508%;width:50px;"
|
||||
>
|
||||
<p class="g-pstyle4">Khost</p>
|
||||
</div>
|
||||
<div
|
||||
id="g-ai0-8"
|
||||
class="g-tt g-aiAbs g-aiPointText"
|
||||
style="top:45.9742%;margin-top:-8.4px;left:46.1799%;width:73px;"
|
||||
>
|
||||
<p class="g-pstyle5">Epicentre</p>
|
||||
</div>
|
||||
<div
|
||||
id="g-ai0-9"
|
||||
class="g-tt g-aiAbs g-aiPointText"
|
||||
style="top:49.8402%;margin-top:-8.4px;left:93.2747%;margin-left:-27px;width:54px;"
|
||||
>
|
||||
<p class="g-pstyle6">Bannu</p>
|
||||
</div>
|
||||
<div
|
||||
id="g-ai0-10"
|
||||
class="g-tt g-aiAbs g-aiPointText"
|
||||
style="top:63.4369%;margin-top:-5.1px;left:65.9996%;margin-left:-50px;width:100px;"
|
||||
>
|
||||
<p class="g-pstyle7">PAKISTAN</p>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
<!-- Artboard: sm -->
|
||||
{#if width && width >= 510 && width < 660}
|
||||
<div id="g-quake-map-top-sm" class="g-artboard" style="">
|
||||
<div style="padding: 0 0 83.5294% 0;"></div>
|
||||
<div
|
||||
id="g-quake-map-top-sm-img"
|
||||
class="g-aiImg"
|
||||
alt=""
|
||||
style="{`background-image: url(${chartSm});`}"
|
||||
></div>
|
||||
<div
|
||||
id="g-ai1-1"
|
||||
class="g-tt g-aiAbs g-aiPointText"
|
||||
style="top:5.3132%;margin-top:-8.6px;left:3.5997%;width:71px;"
|
||||
>
|
||||
<p class="g-pstyle0">Shaking</p>
|
||||
</div>
|
||||
<div
|
||||
id="g-ai1-2"
|
||||
class="g-tt g-aiAbs g-aiPointText"
|
||||
style="top:9.3038%;margin-top:-8.6px;left:3.5997%;width:86px;"
|
||||
>
|
||||
<p class="g-pstyle1">Very strong</p>
|
||||
</div>
|
||||
<div
|
||||
id="g-ai1-3"
|
||||
class="g-tt g-aiAbs g-aiPointText"
|
||||
style="top:18.8592%;margin-top:-5.3px;left:41.2699%;margin-left:-91.5px;width:183px;"
|
||||
>
|
||||
<p class="g-pstyle2">AFGHANISTAN</p>
|
||||
</div>
|
||||
<div
|
||||
id="g-ai1-4"
|
||||
class="g-tt g-aiAbs g-aiPointText"
|
||||
style="top:21.2757%;margin-top:-8.6px;left:3.5997%;width:53px;"
|
||||
>
|
||||
<p class="g-pstyle1">Weak</p>
|
||||
</div>
|
||||
<div
|
||||
id="g-ai1-5"
|
||||
class="g-tt g-aiAbs g-aiPointText"
|
||||
style="top:30.6101%;margin-top:-9.4px;left:40.186%;width:61px;"
|
||||
>
|
||||
<p class="g-pstyle3">Gardez</p>
|
||||
</div>
|
||||
<div
|
||||
id="g-ai1-6"
|
||||
class="g-tt g-aiAbs g-aiPointText"
|
||||
style="top:34.8355%;margin-top:-9.4px;left:9.9042%;width:60px;"
|
||||
>
|
||||
<p class="g-pstyle3">Ghazni</p>
|
||||
</div>
|
||||
<div
|
||||
id="g-ai1-7"
|
||||
class="g-tt g-aiAbs g-aiPointText"
|
||||
style="top:40.4693%;margin-top:-9.4px;left:63.0024%;width:54px;"
|
||||
>
|
||||
<p class="g-pstyle3">Khost</p>
|
||||
</div>
|
||||
<div
|
||||
id="g-ai1-8"
|
||||
class="g-tt g-aiAbs g-aiPointText"
|
||||
style="top:47.2768%;margin-top:-9.4px;left:48.5165%;width:80px;"
|
||||
>
|
||||
<p class="g-pstyle4">Epicentre</p>
|
||||
</div>
|
||||
<div
|
||||
id="g-ai1-9"
|
||||
class="g-tt g-aiAbs g-aiPointText"
|
||||
style="top:50.7979%;margin-top:-9.4px;left:82.1761%;margin-left:-29px;width:58px;"
|
||||
>
|
||||
<p class="g-pstyle5">Bannu</p>
|
||||
</div>
|
||||
<div
|
||||
id="g-ai1-10"
|
||||
class="g-tt g-aiAbs g-aiPointText"
|
||||
style="top:68.3897%;margin-top:-5.3px;left:73.6919%;margin-left:-67.5px;width:135px;"
|
||||
>
|
||||
<p class="g-pstyle2">PAKISTAN</p>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
<!-- Artboard: md -->
|
||||
{#if width && width >= 660 && width < 1200}
|
||||
<div id="g-quake-map-top-md" class="g-artboard" style="">
|
||||
<div style="padding: 0 0 91.8182% 0;"></div>
|
||||
<div
|
||||
id="g-quake-map-top-md-img"
|
||||
class="g-aiImg"
|
||||
alt=""
|
||||
style="{`background-image: url(${chartMd});`}"
|
||||
></div>
|
||||
<div
|
||||
id="g-ai2-1"
|
||||
class="g-tt g-aiAbs g-aiPointText"
|
||||
style="top:3.5477%;margin-top:-7.5px;left:2.6635%;width:62px;"
|
||||
>
|
||||
<p class="g-pstyle0">Shaking</p>
|
||||
</div>
|
||||
<div
|
||||
id="g-ai2-2"
|
||||
class="g-tt g-aiAbs g-aiPointText"
|
||||
style="top:6.188%;margin-top:-7.5px;left:2.6635%;width:74px;"
|
||||
>
|
||||
<p class="g-pstyle1">Very strong</p>
|
||||
</div>
|
||||
<div
|
||||
id="g-ai2-3"
|
||||
class="g-tt g-aiAbs g-aiPointText"
|
||||
style="top:7.0759%;margin-top:-6.9px;right:6.4574%;width:100px;"
|
||||
>
|
||||
<p class="g-pstyle2">Afghanistan</p>
|
||||
</div>
|
||||
<div
|
||||
id="g-ai2-4"
|
||||
class="g-tt g-aiAbs g-aiPointText"
|
||||
style="top:15.2639%;margin-top:-7.5px;left:2.6635%;width:47px;"
|
||||
>
|
||||
<p class="g-pstyle1">Weak</p>
|
||||
</div>
|
||||
<div
|
||||
id="g-ai2-5"
|
||||
class="g-tt g-aiAbs g-aiPointText"
|
||||
style="top:18.7377%;margin-top:-7.6px;left:38.071%;margin-left:-136.5px;width:273px;"
|
||||
>
|
||||
<p class="g-pstyle3">AFGHANISTAN</p>
|
||||
</div>
|
||||
<div
|
||||
id="g-ai2-6"
|
||||
class="g-tt g-aiAbs g-aiPointText"
|
||||
style="top:30.2476%;margin-top:-10.3px;left:38.0816%;width:63px;"
|
||||
>
|
||||
<p class="g-pstyle4">Gardez</p>
|
||||
</div>
|
||||
<div
|
||||
id="g-ai2-7"
|
||||
class="g-tt g-aiAbs g-aiPointText"
|
||||
style="top:33.8779%;margin-top:-10.3px;left:9.3056%;margin-left:-31px;width:62px;"
|
||||
>
|
||||
<p class="g-pstyle5">Ghazni</p>
|
||||
</div>
|
||||
<div
|
||||
id="g-ai2-8"
|
||||
class="g-tt g-aiAbs g-aiPointText"
|
||||
style="top:40.1486%;margin-top:-10.3px;left:63.0563%;width:55px;"
|
||||
>
|
||||
<p class="g-pstyle4">Khost</p>
|
||||
</div>
|
||||
<div
|
||||
id="g-ai2-9"
|
||||
class="g-tt g-aiAbs g-aiPointText"
|
||||
style="top:47.1569%;margin-top:-10.8px;left:47.4444%;width:86px;"
|
||||
>
|
||||
<p class="g-pstyle6">Epicentre</p>
|
||||
</div>
|
||||
<div
|
||||
id="g-ai2-10"
|
||||
class="g-tt g-aiAbs g-aiPointText"
|
||||
style="top:50.8746%;margin-top:-10.3px;left:84.5785%;margin-left:-30px;width:60px;"
|
||||
>
|
||||
<p class="g-pstyle5">Bannu</p>
|
||||
</div>
|
||||
<div
|
||||
id="g-ai2-11"
|
||||
class="g-tt g-aiAbs g-aiPointText"
|
||||
style="top:62.467%;margin-top:-7.6px;left:80.6735%;margin-left:-100px;width:200px;"
|
||||
>
|
||||
<p class="g-pstyle3">PAKISTAN</p>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
<!-- Artboard: lg -->
|
||||
{#if width && width >= 1200 && width < 1300}
|
||||
<div id="g-quake-map-top-lg" class="g-artboard" style="">
|
||||
<div style="padding: 0 0 55.1667% 0;"></div>
|
||||
<div
|
||||
id="g-quake-map-top-lg-img"
|
||||
class="g-aiImg"
|
||||
alt=""
|
||||
style="{`background-image: url(${chartLg});`}"
|
||||
></div>
|
||||
<div
|
||||
id="g-ai3-1"
|
||||
class="g-tt g-aiAbs g-aiPointText"
|
||||
style="top:4.1944%;margin-top:-8.8px;left:1.7817%;width:67px;"
|
||||
>
|
||||
<p class="g-pstyle0">Shaking</p>
|
||||
</div>
|
||||
<div
|
||||
id="g-ai3-2"
|
||||
class="g-tt g-aiAbs g-aiPointText"
|
||||
style="top:6.9135%;margin-top:-8.8px;left:1.7817%;width:81px;"
|
||||
>
|
||||
<p class="g-pstyle1">Very strong</p>
|
||||
</div>
|
||||
<div
|
||||
id="g-ai3-3"
|
||||
class="g-tt g-aiAbs g-aiPointText"
|
||||
style="top:7.006%;margin-top:-7.4px;right:4.4122%;width:100px;"
|
||||
>
|
||||
<p class="g-pstyle2">Afghanistan</p>
|
||||
</div>
|
||||
<div
|
||||
id="g-ai3-4"
|
||||
class="g-tt g-aiAbs g-aiPointText"
|
||||
style="top:14.111%;margin-top:-8.4px;left:29.9587%;margin-left:-151px;width:302px;"
|
||||
>
|
||||
<p class="g-pstyle3">AFGHANISTAN</p>
|
||||
</div>
|
||||
<div
|
||||
id="g-ai3-5"
|
||||
class="g-tt g-aiAbs g-aiPointText"
|
||||
style="top:16.128%;margin-top:-8.8px;left:1.7818%;width:51px;"
|
||||
>
|
||||
<p class="g-pstyle1">Weak</p>
|
||||
</div>
|
||||
<div
|
||||
id="g-ai3-6"
|
||||
class="g-tt g-aiAbs g-aiPointText"
|
||||
style="top:28.2991%;margin-top:-11.3px;left:44.1554%;width:67px;"
|
||||
>
|
||||
<p class="g-pstyle4">Gardez</p>
|
||||
</div>
|
||||
<div
|
||||
id="g-ai3-7"
|
||||
class="g-tt g-aiAbs g-aiPointText"
|
||||
style="top:31.9244%;margin-top:-11.3px;left:26.4286%;margin-left:-33px;width:66px;"
|
||||
>
|
||||
<p class="g-pstyle5">Ghazni</p>
|
||||
</div>
|
||||
<div
|
||||
id="g-ai3-8"
|
||||
class="g-tt g-aiAbs g-aiPointText"
|
||||
style="top:37.676%;margin-top:-8.4px;left:85.4421%;margin-left:-110.5px;width:221px;"
|
||||
>
|
||||
<p class="g-pstyle3">PAKISTAN</p>
|
||||
</div>
|
||||
<div
|
||||
id="g-ai3-9"
|
||||
class="g-tt g-aiAbs g-aiPointText"
|
||||
style="top:38.42%;margin-top:-11.3px;left:59.5142%;width:59px;"
|
||||
>
|
||||
<p class="g-pstyle4">Khost</p>
|
||||
</div>
|
||||
<div
|
||||
id="g-ai3-10"
|
||||
class="g-tt g-aiAbs g-aiPointText"
|
||||
style="top:45.5991%;margin-top:-11.9px;left:49.9132%;width:94px;"
|
||||
>
|
||||
<p class="g-pstyle6">Epicentre</p>
|
||||
</div>
|
||||
<div
|
||||
id="g-ai3-11"
|
||||
class="g-tt g-aiAbs g-aiPointText"
|
||||
style="top:53.9788%;margin-top:-11.3px;left:72.7294%;margin-left:-32px;width:64px;"
|
||||
>
|
||||
<p class="g-pstyle5">Bannu</p>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
<!-- Artboard: xl -->
|
||||
{#if width && width >= 1300}
|
||||
<div id="g-quake-map-top-xl" class="g-artboard" style="">
|
||||
<div style="padding: 0 0 51.2308% 0;"></div>
|
||||
<div
|
||||
id="g-quake-map-top-xl-img"
|
||||
class="g-aiImg"
|
||||
alt=""
|
||||
style="{`background-image: url(${chartXl});`}"
|
||||
></div>
|
||||
<div
|
||||
id="g-ai4-1"
|
||||
class="g-tt g-aiAbs g-aiPointText"
|
||||
style="top:3.8689%;margin-top:-8.8px;left:1.5293%;width:67px;"
|
||||
>
|
||||
<p class="g-pstyle0">Shaking</p>
|
||||
</div>
|
||||
<div
|
||||
id="g-ai4-2"
|
||||
class="g-tt g-aiAbs g-aiPointText"
|
||||
style="top:6.063%;margin-top:-7.4px;right:4.342%;width:100px;"
|
||||
>
|
||||
<p class="g-pstyle1">Afghanistan</p>
|
||||
</div>
|
||||
<div
|
||||
id="g-ai4-3"
|
||||
class="g-tt g-aiAbs g-aiPointText"
|
||||
style="top:6.5716%;margin-top:-8.8px;left:1.5293%;width:81px;"
|
||||
>
|
||||
<p class="g-pstyle2">Very strong</p>
|
||||
</div>
|
||||
<div
|
||||
id="g-ai4-4"
|
||||
class="g-tt g-aiAbs g-aiPointText"
|
||||
style="top:13.726%;margin-top:-8.4px;left:30.8465%;margin-left:-151px;width:302px;"
|
||||
>
|
||||
<p class="g-pstyle3">AFGHANISTAN</p>
|
||||
</div>
|
||||
<div
|
||||
id="g-ai4-5"
|
||||
class="g-tt g-aiAbs g-aiPointText"
|
||||
style="top:15.7308%;margin-top:-8.8px;left:1.5294%;width:51px;"
|
||||
>
|
||||
<p class="g-pstyle2">Weak</p>
|
||||
</div>
|
||||
<div
|
||||
id="g-ai4-6"
|
||||
class="g-tt g-aiAbs g-aiPointText"
|
||||
style="top:27.8288%;margin-top:-11.3px;left:43.9511%;width:67px;"
|
||||
>
|
||||
<p class="g-pstyle4">Gardez</p>
|
||||
</div>
|
||||
<div
|
||||
id="g-ai4-7"
|
||||
class="g-tt g-aiAbs g-aiPointText"
|
||||
style="top:31.4324%;margin-top:-11.3px;left:27.588%;margin-left:-33px;width:66px;"
|
||||
>
|
||||
<p class="g-pstyle5">Ghazni</p>
|
||||
</div>
|
||||
<div
|
||||
id="g-ai4-8"
|
||||
class="g-tt g-aiAbs g-aiPointText"
|
||||
style="top:37.1494%;margin-top:-8.4px;left:82.0619%;margin-left:-110.5px;width:221px;"
|
||||
>
|
||||
<p class="g-pstyle3">PAKISTAN</p>
|
||||
</div>
|
||||
<div
|
||||
id="g-ai4-9"
|
||||
class="g-tt g-aiAbs g-aiPointText"
|
||||
style="top:37.8889%;margin-top:-11.3px;left:58.1285%;width:59px;"
|
||||
>
|
||||
<p class="g-pstyle4">Khost</p>
|
||||
</div>
|
||||
<div
|
||||
id="g-ai4-10"
|
||||
class="g-tt g-aiAbs g-aiPointText"
|
||||
style="top:45.025%;margin-top:-11.9px;left:49.2661%;width:94px;"
|
||||
>
|
||||
<p class="g-pstyle6">Epicentre</p>
|
||||
</div>
|
||||
<div
|
||||
id="g-ai4-11"
|
||||
class="g-tt g-aiAbs g-aiPointText"
|
||||
style="top:53.3543%;margin-top:-11.3px;left:70.3271%;margin-left:-32px;width:64px;"
|
||||
>
|
||||
<p class="g-pstyle5">Bannu</p>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<!-- End ai2html - 2022-06-24 21:49 -->
|
||||
|
||||
<!-- Generated by ai2html v0.100.0 - 2022-06-24 21:49 -->
|
||||
<!-- ai file: quake-map-top.ai -->
|
||||
<style lang="scss">
|
||||
#g-quake-map-top-box,
|
||||
#g-quake-map-top-box .g-artboard {
|
||||
margin: 0 auto;
|
||||
}
|
||||
#g-quake-map-top-box p {
|
||||
margin: 0;
|
||||
}
|
||||
#g-quake-map-top-box .g-aiAbs {
|
||||
position: absolute;
|
||||
}
|
||||
#g-quake-map-top-box .g-aiImg {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
display: block;
|
||||
width: 100% !important;
|
||||
height: 100%;
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
#g-quake-map-top-box .g-aiPointText p {
|
||||
white-space: nowrap;
|
||||
}
|
||||
#g-quake-map-top-xs {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
#g-quake-map-top-xs p {
|
||||
font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont,
|
||||
'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
||||
font-weight: 300;
|
||||
line-height: 14px;
|
||||
height: auto;
|
||||
opacity: 1;
|
||||
letter-spacing: 0em;
|
||||
font-size: 12px;
|
||||
text-align: left;
|
||||
color: rgb(120, 119, 120);
|
||||
text-transform: none;
|
||||
padding-bottom: 0;
|
||||
padding-top: 0;
|
||||
mix-blend-mode: normal;
|
||||
font-style: normal;
|
||||
position: static;
|
||||
}
|
||||
#g-quake-map-top-xs .g-pstyle0 {
|
||||
font-weight: 700;
|
||||
line-height: 11px;
|
||||
height: 11px;
|
||||
font-size: 9px;
|
||||
color: rgb(0, 0, 0);
|
||||
}
|
||||
#g-quake-map-top-xs .g-pstyle1 {
|
||||
font-weight: 600;
|
||||
height: 14px;
|
||||
}
|
||||
#g-quake-map-top-xs .g-pstyle2 {
|
||||
height: 14px;
|
||||
}
|
||||
#g-quake-map-top-xs .g-pstyle3 {
|
||||
line-height: 7px;
|
||||
height: 7px;
|
||||
letter-spacing: 0.3em;
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
color: rgb(94, 94, 94);
|
||||
}
|
||||
#g-quake-map-top-xs .g-pstyle4 {
|
||||
height: 14px;
|
||||
color: rgb(64, 62, 61);
|
||||
}
|
||||
#g-quake-map-top-xs .g-pstyle5 {
|
||||
font-weight: 700;
|
||||
height: 14px;
|
||||
color: rgb(255, 255, 255);
|
||||
}
|
||||
#g-quake-map-top-xs .g-pstyle6 {
|
||||
height: 14px;
|
||||
text-align: center;
|
||||
color: rgb(64, 62, 61);
|
||||
}
|
||||
#g-quake-map-top-xs .g-pstyle7 {
|
||||
line-height: 7px;
|
||||
height: 7px;
|
||||
letter-spacing: 0.3em;
|
||||
text-align: center;
|
||||
color: rgb(94, 94, 94);
|
||||
}
|
||||
#g-quake-map-top-sm {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
#g-quake-map-top-sm p {
|
||||
font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont,
|
||||
'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
||||
font-weight: 300;
|
||||
line-height: 7px;
|
||||
height: auto;
|
||||
opacity: 1;
|
||||
letter-spacing: 0.4em;
|
||||
font-size: 16px;
|
||||
text-align: left;
|
||||
color: rgb(94, 94, 94);
|
||||
text-transform: none;
|
||||
padding-bottom: 0;
|
||||
padding-top: 0;
|
||||
mix-blend-mode: normal;
|
||||
font-style: normal;
|
||||
position: static;
|
||||
}
|
||||
#g-quake-map-top-sm .g-pstyle0 {
|
||||
font-weight: 600;
|
||||
line-height: 16px;
|
||||
height: 16px;
|
||||
letter-spacing: 0em;
|
||||
font-size: 14px;
|
||||
color: rgb(94, 93, 92);
|
||||
}
|
||||
#g-quake-map-top-sm .g-pstyle1 {
|
||||
line-height: 16px;
|
||||
height: 16px;
|
||||
letter-spacing: 0em;
|
||||
font-size: 14px;
|
||||
color: rgb(94, 93, 92);
|
||||
}
|
||||
#g-quake-map-top-sm .g-pstyle2 {
|
||||
height: 7px;
|
||||
text-align: center;
|
||||
}
|
||||
#g-quake-map-top-sm .g-pstyle3 {
|
||||
line-height: 16px;
|
||||
height: 16px;
|
||||
letter-spacing: 0em;
|
||||
font-size: 14px;
|
||||
color: rgb(64, 62, 61);
|
||||
}
|
||||
#g-quake-map-top-sm .g-pstyle4 {
|
||||
font-weight: 700;
|
||||
line-height: 16px;
|
||||
height: 16px;
|
||||
letter-spacing: 0em;
|
||||
font-size: 14px;
|
||||
color: rgb(255, 255, 255);
|
||||
}
|
||||
#g-quake-map-top-sm .g-pstyle5 {
|
||||
line-height: 16px;
|
||||
height: 16px;
|
||||
letter-spacing: 0em;
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
color: rgb(64, 62, 61);
|
||||
}
|
||||
#g-quake-map-top-md {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
#g-quake-map-top-md p {
|
||||
font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont,
|
||||
'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
||||
font-weight: 300;
|
||||
line-height: 11px;
|
||||
height: auto;
|
||||
opacity: 1;
|
||||
letter-spacing: 0.7em;
|
||||
font-size: 19px;
|
||||
text-align: left;
|
||||
color: rgb(94, 94, 94);
|
||||
text-transform: none;
|
||||
padding-bottom: 0;
|
||||
padding-top: 0;
|
||||
mix-blend-mode: normal;
|
||||
font-style: normal;
|
||||
position: static;
|
||||
}
|
||||
#g-quake-map-top-md .g-pstyle0 {
|
||||
font-weight: 600;
|
||||
line-height: 14px;
|
||||
height: 14px;
|
||||
letter-spacing: 0em;
|
||||
font-size: 12px;
|
||||
color: rgb(94, 93, 92);
|
||||
}
|
||||
#g-quake-map-top-md .g-pstyle1 {
|
||||
line-height: 14px;
|
||||
height: 14px;
|
||||
letter-spacing: 0em;
|
||||
font-size: 12px;
|
||||
color: rgb(94, 93, 92);
|
||||
}
|
||||
#g-quake-map-top-md .g-pstyle2 {
|
||||
font-weight: 400;
|
||||
height: 11px;
|
||||
letter-spacing: 0.05em;
|
||||
font-size: 12px;
|
||||
text-align: right;
|
||||
text-transform: uppercase;
|
||||
color: rgb(98, 100, 100);
|
||||
}
|
||||
#g-quake-map-top-md .g-pstyle3 {
|
||||
height: 11px;
|
||||
text-align: center;
|
||||
}
|
||||
#g-quake-map-top-md .g-pstyle4 {
|
||||
line-height: 17px;
|
||||
height: 17px;
|
||||
letter-spacing: 0em;
|
||||
font-size: 14px;
|
||||
color: rgb(64, 62, 61);
|
||||
}
|
||||
#g-quake-map-top-md .g-pstyle5 {
|
||||
line-height: 17px;
|
||||
height: 17px;
|
||||
letter-spacing: 0em;
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
color: rgb(64, 62, 61);
|
||||
}
|
||||
#g-quake-map-top-md .g-pstyle6 {
|
||||
font-weight: 700;
|
||||
line-height: 18px;
|
||||
height: 18px;
|
||||
letter-spacing: 0em;
|
||||
font-size: 15px;
|
||||
color: rgb(255, 255, 255);
|
||||
}
|
||||
#g-quake-map-top-lg {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
#g-quake-map-top-lg p {
|
||||
font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont,
|
||||
'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
||||
font-weight: 300;
|
||||
line-height: 12px;
|
||||
height: auto;
|
||||
opacity: 1;
|
||||
letter-spacing: 0.7em;
|
||||
font-size: 21px;
|
||||
text-align: left;
|
||||
color: rgb(94, 94, 94);
|
||||
text-transform: none;
|
||||
padding-bottom: 0;
|
||||
padding-top: 0;
|
||||
mix-blend-mode: normal;
|
||||
font-style: normal;
|
||||
position: static;
|
||||
}
|
||||
#g-quake-map-top-lg .g-pstyle0 {
|
||||
font-weight: 600;
|
||||
line-height: 16px;
|
||||
height: 16px;
|
||||
letter-spacing: 0em;
|
||||
font-size: 13px;
|
||||
color: rgb(94, 93, 92);
|
||||
}
|
||||
#g-quake-map-top-lg .g-pstyle1 {
|
||||
line-height: 16px;
|
||||
height: 16px;
|
||||
letter-spacing: 0em;
|
||||
font-size: 13px;
|
||||
color: rgb(94, 93, 92);
|
||||
}
|
||||
#g-quake-map-top-lg .g-pstyle2 {
|
||||
font-weight: 400;
|
||||
height: 12px;
|
||||
letter-spacing: 0.05em;
|
||||
font-size: 12px;
|
||||
text-align: right;
|
||||
text-transform: uppercase;
|
||||
color: rgb(98, 100, 100);
|
||||
}
|
||||
#g-quake-map-top-lg .g-pstyle3 {
|
||||
height: 12px;
|
||||
text-align: center;
|
||||
}
|
||||
#g-quake-map-top-lg .g-pstyle4 {
|
||||
line-height: 19px;
|
||||
height: 19px;
|
||||
letter-spacing: 0em;
|
||||
font-size: 16px;
|
||||
color: rgb(64, 62, 61);
|
||||
}
|
||||
#g-quake-map-top-lg .g-pstyle5 {
|
||||
line-height: 19px;
|
||||
height: 19px;
|
||||
letter-spacing: 0em;
|
||||
font-size: 16px;
|
||||
text-align: center;
|
||||
color: rgb(64, 62, 61);
|
||||
}
|
||||
#g-quake-map-top-lg .g-pstyle6 {
|
||||
font-weight: 700;
|
||||
line-height: 20px;
|
||||
height: 20px;
|
||||
letter-spacing: 0em;
|
||||
font-size: 17px;
|
||||
color: rgb(255, 255, 255);
|
||||
}
|
||||
#g-quake-map-top-xl {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
#g-quake-map-top-xl p {
|
||||
font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont,
|
||||
'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
||||
font-weight: 300;
|
||||
line-height: 12px;
|
||||
height: auto;
|
||||
opacity: 1;
|
||||
letter-spacing: 0.7em;
|
||||
font-size: 21px;
|
||||
text-align: left;
|
||||
color: rgb(94, 94, 94);
|
||||
text-transform: none;
|
||||
padding-bottom: 0;
|
||||
padding-top: 0;
|
||||
mix-blend-mode: normal;
|
||||
font-style: normal;
|
||||
position: static;
|
||||
}
|
||||
#g-quake-map-top-xl .g-pstyle0 {
|
||||
font-weight: 600;
|
||||
line-height: 16px;
|
||||
height: 16px;
|
||||
letter-spacing: 0em;
|
||||
font-size: 13px;
|
||||
color: rgb(94, 93, 92);
|
||||
}
|
||||
#g-quake-map-top-xl .g-pstyle1 {
|
||||
font-weight: 400;
|
||||
height: 12px;
|
||||
letter-spacing: 0.05em;
|
||||
font-size: 12px;
|
||||
text-align: right;
|
||||
text-transform: uppercase;
|
||||
color: rgb(98, 100, 100);
|
||||
}
|
||||
#g-quake-map-top-xl .g-pstyle2 {
|
||||
line-height: 16px;
|
||||
height: 16px;
|
||||
letter-spacing: 0em;
|
||||
font-size: 13px;
|
||||
color: rgb(94, 93, 92);
|
||||
}
|
||||
#g-quake-map-top-xl .g-pstyle3 {
|
||||
height: 12px;
|
||||
text-align: center;
|
||||
}
|
||||
#g-quake-map-top-xl .g-pstyle4 {
|
||||
line-height: 19px;
|
||||
height: 19px;
|
||||
letter-spacing: 0em;
|
||||
font-size: 16px;
|
||||
color: rgb(64, 62, 61);
|
||||
}
|
||||
#g-quake-map-top-xl .g-pstyle5 {
|
||||
line-height: 19px;
|
||||
height: 19px;
|
||||
letter-spacing: 0em;
|
||||
font-size: 16px;
|
||||
text-align: center;
|
||||
color: rgb(64, 62, 61);
|
||||
}
|
||||
#g-quake-map-top-xl .g-pstyle6 {
|
||||
font-weight: 700;
|
||||
line-height: 20px;
|
||||
height: 20px;
|
||||
letter-spacing: 0em;
|
||||
font-size: 17px;
|
||||
color: rgb(255, 255, 255);
|
||||
}
|
||||
|
||||
/* Custom CSS */
|
||||
</style>
|
||||
|
|
@ -61,6 +61,10 @@ h6 {
|
|||
@include body-text;
|
||||
}
|
||||
|
||||
text {
|
||||
@include body-note;
|
||||
}
|
||||
|
||||
p {
|
||||
@extend %body-type-block;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue