moves scss examples in docs to globa.scss
This commit is contained in:
MinamiFunakoshiTR
parent
80ec9f5b94
commit
90b0eb3a09
1 changed files with 78 additions and 71 deletions
|
|
@ -109,43 +109,46 @@ To customise styles, use CSS to target the class passed to `HeroHeadline`.
|
||||||
<QuakeMap assetsPath={assets || '/'} />
|
<QuakeMap assetsPath={assets || '/'} />
|
||||||
</GraphicBlock>
|
</GraphicBlock>
|
||||||
</HeroHeadline>
|
</HeroHeadline>
|
||||||
|
```
|
||||||
|
|
||||||
<!-- Customise styles using the class (e.g. `custom-hero` here) passed to `HeroHeadline` -->
|
Add styles in `global.scss`:
|
||||||
<style lang="scss">
|
|
||||||
.hero-wrapper {
|
|
||||||
.custom-hero.headline {
|
|
||||||
// Adjust vertical positioning
|
|
||||||
align-items: flex-end !important;
|
|
||||||
|
|
||||||
@media (max-width: 1100px) {
|
```scss
|
||||||
// Adjust line length of title
|
// global.scss
|
||||||
max-width: var(--normal-column-width) !important;
|
// Customise styles using the class (e.g. `custom-hero` here) passed to `HeroHeadline`
|
||||||
}
|
.hero-wrapper {
|
||||||
}
|
.custom-hero.headline {
|
||||||
|
// Adjust vertical positioning
|
||||||
|
align-items: flex-end !important;
|
||||||
|
|
||||||
// Make hero shorter than 100vh
|
@media (max-width: 1100px) {
|
||||||
--heroHeight: 85svh;
|
// Adjust line length of title
|
||||||
|
max-width: var(--normal-column-width) !important;
|
||||||
@media (max-width: 960px) {
|
|
||||||
--heroHeight: 65svh;
|
|
||||||
}
|
|
||||||
|
|
||||||
// For small height
|
|
||||||
@media (max-height: 850px) {
|
|
||||||
--heroHeight: 100svh;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Custom hero sizing for landscape mobile
|
|
||||||
@media (max-width: 960px) and (orientation: landscape) {
|
|
||||||
--heroHeight: 200svh;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Override default fixed height for hero layout in embeds
|
// Make hero shorter than 100vh
|
||||||
.hero-wrapper.embedded {
|
--heroHeight: 85svh;
|
||||||
--heroHeight: 1000px;
|
|
||||||
|
@media (max-width: 960px) {
|
||||||
|
--heroHeight: 65svh;
|
||||||
}
|
}
|
||||||
</style>
|
|
||||||
|
// For small height
|
||||||
|
@media (max-height: 850px) {
|
||||||
|
--heroHeight: 100svh;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Custom hero sizing for landscape mobile
|
||||||
|
@media (max-width: 960px) and (orientation: landscape) {
|
||||||
|
--heroHeight: 200svh;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Override default fixed height for hero layout in embeds
|
||||||
|
.hero-wrapper.embedded {
|
||||||
|
--heroHeight: 1000px;
|
||||||
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
<Canvas of={HeroHeadlineStories.Ai2svelteHero} />
|
<Canvas of={HeroHeadlineStories.Ai2svelteHero} />
|
||||||
|
|
@ -185,24 +188,27 @@ To add a video as the hero, use the [Video](?path=/docs/components-multimedia-vi
|
||||||
ariaDescription="Aerial footage of people houses in refugee camp"
|
ariaDescription="Aerial footage of people houses in refugee camp"
|
||||||
/>
|
/>
|
||||||
</HeroHeadline>
|
</HeroHeadline>
|
||||||
|
```
|
||||||
|
|
||||||
<!-- Customise styles using the class (e.g. `video-hero` here) passed to `HeroHeadline` -->
|
Add styles in `global.scss`:
|
||||||
<style lang="scss">
|
|
||||||
.hero-wrapper {
|
|
||||||
--heroHeight: calc(100svh - 60px);
|
|
||||||
.video-hero.headline {
|
|
||||||
header {
|
|
||||||
// Adjust vertical position as offset from default center
|
|
||||||
top: calc(50svh - 250px);
|
|
||||||
}
|
|
||||||
|
|
||||||
h1 {
|
```scss
|
||||||
color: #ffd430;
|
// global.scss
|
||||||
text-shadow: 3px 4px 7px rgba(81, 67, 21, 0.8);
|
// Customise styles using the class (e.g. `video-hero` here) passed to `HeroHeadline`
|
||||||
}
|
.hero-wrapper {
|
||||||
|
--heroHeight: calc(100svh - 60px);
|
||||||
|
.video-hero.headline {
|
||||||
|
header {
|
||||||
|
// Adjust vertical position as offset from default center
|
||||||
|
top: calc(50svh - 250px);
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
color: #ffd430;
|
||||||
|
text-shadow: 3px 4px 7px rgba(81, 67, 21, 0.8);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
<Canvas of={HeroHeadlineStories.VideoHero} />
|
<Canvas of={HeroHeadlineStories.VideoHero} />
|
||||||
|
|
@ -291,32 +297,33 @@ Since `Headline` internally uses the [Byline](?path=/docs/components-text-elemen
|
||||||
</div>
|
</div>
|
||||||
{/snippet}
|
{/snippet}
|
||||||
</HeroHeadline>
|
</HeroHeadline>
|
||||||
|
|
||||||
<!-- Style your custom hed and dek -->
|
|
||||||
<style lang="scss">
|
|
||||||
.custom-hed {
|
|
||||||
h1 {
|
|
||||||
.body-note {
|
|
||||||
color: #ffffff;
|
|
||||||
}
|
|
||||||
.title {
|
|
||||||
color: #ffffff;
|
|
||||||
text-shadow: 1px 1px 8px #ff7c88;
|
|
||||||
filter: drop-shadow(0px 0px 12px #ff7c88);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.dek {
|
|
||||||
margin-top: 1rem;
|
|
||||||
p {
|
|
||||||
color: #ffffff;
|
|
||||||
text-shadow: 1px 1px 8px #ff7c88;
|
|
||||||
filter: drop-shadow(0px 0px 12px #ff7c88);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</HeroHeadline>
|
|
||||||
```
|
```
|
||||||
|
|
||||||
<Canvas of={HeroHeadlineStories.CustomHed} />
|
Add styles in `global.scss`:
|
||||||
|
|
||||||
|
```scss
|
||||||
|
// global.scss
|
||||||
|
.custom-hed {
|
||||||
|
h1 {
|
||||||
|
.body-note {
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
.title {
|
||||||
|
color: #ffffff;
|
||||||
|
text-shadow: 1px 1px 8px #ff7c88;
|
||||||
|
filter: drop-shadow(0px 0px 12px #ff7c88);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.dek {
|
||||||
|
margin-top: 1rem;
|
||||||
|
p {
|
||||||
|
color: #ffffff;
|
||||||
|
text-shadow: 1px 1px 8px #ff7c88;
|
||||||
|
filter: drop-shadow(0px 0px 12px #ff7c88);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
<Canvas of={HeroHeadlineStories.CustomHed} />{' '}
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue