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

blockquotes

Browse source
This commit is contained in:
Jon McClure 2023-07-29 22:29:59 +01:00
parent e19c6f9cde
commit 1557f5ad34
3 changed files with 55 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
.storybook/preview.scss
View file

@ -17,7 +17,7 @@ div.sbdocs :where(p:not(.sb-anchor, .sb-unstyled, .sb-unstyled p)) {
font-size: 16px; font-size: 16px;
} }
div.sbdocs-content { div.sbdocs-content {
h1 { h1 {
font-family: 'Knowledge', sans-serif; font-family: 'Knowledge', sans-serif;
} }
@ -34,18 +34,6 @@ div.sbdocs-content {
margin: 1rem 0; margin: 1rem 0;
} }
blockquote {
background-color: #ededed;
padding: 15px 20px;
border: 1px solid #ccc;
border-radius: 4px;
margin: 2rem auto;
p {
font-size: 16px;
line-height: 22px;
}
}
& > div > :where(p, ul, ol), & > div > :where(p, ul, ol),
.sb-anchor > div > :where(p, ul, ol) { .sb-anchor > div > :where(p, ul, ol) {
font-size: 18px; font-size: 18px;
@ -71,6 +59,20 @@ div.sbdocs-content {
} }
} }
.sbdocs-content {
blockquote:not(.sb-unstyled *) {
background-color: #ededed;
padding: 15px 20px;
border: 1px solid #ccc;
border-radius: 4px;
margin: 2rem auto;
p {
font-size: 16px;
line-height: 22px;
}
}
}
.sbdocs-content div.sbdocs:not(.sb-unstyled) { .sbdocs-content div.sbdocs:not(.sb-unstyled) {
font-family: 'Knowledge', sans-serif; font-family: 'Knowledge', sans-serif;

18
src/components/BodyText/BodyText.stories.svelte
View file

@ -67,6 +67,9 @@ Sirloin beef flank labore cillum venison pariatur cow nulla ut irure in consequa
Biltong enim consequat pork chop, flank ea. Biltong enim consequat pork chop, flank ea.
> Officia ball tip sed tenderloin dolore. Est magna enim, turkey in turducken flank jowl ad lorem buffalo ground
> > Ronald McDonald
Flank bacon sint dolore porchetta strip steak. Tail capicola flank nostrud meatball consequat pastrami lorem cupidatat chuck drumstick ham hock bresaola sint. Flank bacon sint dolore porchetta strip steak. Tail capicola flank nostrud meatball consequat pastrami lorem cupidatat chuck drumstick ham hock bresaola sint.
##### Venison pork chop ##### Venison pork chop
@ -100,11 +103,12 @@ Ham hock id porchetta elit. Sint spare ribs aute buffalo.
padding: 2px 5px; padding: 2px 5px;
border-radius: 4px; border-radius: 4px;
font-weight: 800; font-weight: 800;
line-height: 1;
&:hover { &:hover {
color: #999; color: #999;
} }
@media (max-width: 800px) { @media (max-width: 800px) {
color: white; color: white !important;
} }
} }
.body-text-typography-example-story { .body-text-typography-example-story {
@ -148,5 +152,17 @@ Ham hock id porchetta elit. Sint spare ribs aute buffalo.
font-size: 12px; font-size: 12px;
} }
} }
blockquote {
position: relative;
&:before {
@extend %heading-tag;
content: '“';
font-size: 3rem;
line-height: 3rem;
}
blockquote:before {
display: none;
}
}
} }
</style> </style>

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

@ -113,3 +113,26 @@ figcaption {
@include text-secondary; @include text-secondary;
@include font-note; @include font-note;
} }
blockquote {
margin-inline: 0;
padding-left: 1rem;
border-left: 1px solid $theme-colour-brand-rules;
@extend %fmy-6;
p {
@include font-body;
@include text-lg;
&:last-of-type {
@extend %fmb-2;
}
}
blockquote {
margin-block: 0;
border: 0;
padding-left: 0;
p {
@include text-sm;
@include font-note;
}
}
}