style: update lsd font and misc. styles
This commit is contained in:
parent
541a9b9982
commit
f235eac8b6
|
@ -62,7 +62,7 @@ export const ArticleHeading = ({
|
||||||
|
|
||||||
const Headline = styled(Typography)`
|
const Headline = styled(Typography)`
|
||||||
white-space: pre-wrap;
|
white-space: pre-wrap;
|
||||||
margin-top: 16px;
|
margin-top: 24px;
|
||||||
|
|
||||||
${(props) => lsdUtils.breakpoint(props.theme, 'xs', 'down')} {
|
${(props) => lsdUtils.breakpoint(props.theme, 'xs', 'down')} {
|
||||||
&.title {
|
&.title {
|
||||||
|
|
|
@ -20,7 +20,7 @@ export const ArticleImageBlockWrapper = ({ image, order }: Props) => {
|
||||||
}
|
}
|
||||||
|
|
||||||
const Container = styled.figure`
|
const Container = styled.figure`
|
||||||
margin: 32px 0 32px 0;
|
margin: 40px 0 40px 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
|
|
@ -52,13 +52,15 @@ const ArticleHeader = ({
|
||||||
{subtitle}
|
{subtitle}
|
||||||
</ArticleSubtitle>
|
</ArticleSubtitle>
|
||||||
)}
|
)}
|
||||||
|
<AuthorsContainer>
|
||||||
|
<Authors authors={authors} />
|
||||||
|
</AuthorsContainer>
|
||||||
|
|
||||||
<TagsAndSocial
|
<TagsAndSocial
|
||||||
tags={tags.map((tag) => tag.name)}
|
tags={tags.map((tag) => tag.name)}
|
||||||
className={'articleTags'}
|
className={'articleTags'}
|
||||||
/>
|
/>
|
||||||
<AuthorsContainer>
|
|
||||||
<Authors authors={authors} />
|
|
||||||
</AuthorsContainer>
|
|
||||||
{coverImage && (
|
{coverImage && (
|
||||||
<ArticleImageBlockWrapper
|
<ArticleImageBlockWrapper
|
||||||
image={coverImage}
|
image={coverImage}
|
||||||
|
@ -73,6 +75,8 @@ const ArticleHeader = ({
|
||||||
}
|
}
|
||||||
|
|
||||||
const ArticleHeaderContainer = styled.header`
|
const ArticleHeaderContainer = styled.header`
|
||||||
|
margin-bottom: 24px;
|
||||||
|
|
||||||
.mobileSummary {
|
.mobileSummary {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
@ -123,7 +127,7 @@ const ArticleSubtitle = styled(CustomTypography)`
|
||||||
|
|
||||||
const AuthorsContainer = styled.div`
|
const AuthorsContainer = styled.div`
|
||||||
//margin-block: 24px;
|
//margin-block: 24px;
|
||||||
margin-top: 24px;
|
margin-top: 16px;
|
||||||
margin-bottom: 32px;
|
margin-bottom: 32px;
|
||||||
|
|
||||||
${(props) => lsdUtils.breakpoint(props.theme, 'xs', 'down')} {
|
${(props) => lsdUtils.breakpoint(props.theme, 'xs', 'down')} {
|
||||||
|
|
|
@ -13,7 +13,7 @@ const ArticleSummary = ({ summary, className, showLabel }: Props) => {
|
||||||
<ArticleSummaryContainer className={className}>
|
<ArticleSummaryContainer className={className}>
|
||||||
{showLabel && <Typography variant="body3">summary</Typography>}
|
{showLabel && <Typography variant="body3">summary</Typography>}
|
||||||
<SummaryParagraph
|
<SummaryParagraph
|
||||||
variant="h6"
|
variant="h4"
|
||||||
component={'div'}
|
component={'div'}
|
||||||
dangerouslySetInnerHTML={{
|
dangerouslySetInnerHTML={{
|
||||||
__html: removeDynamicSection(summary),
|
__html: removeDynamicSection(summary),
|
||||||
|
|
|
@ -14,7 +14,7 @@ export const JoinDiscordCard: FC<JoinDiscordCardProps> = ({
|
||||||
}) => {
|
}) => {
|
||||||
return (
|
return (
|
||||||
<JoinDiscordCardContainer {...props}>
|
<JoinDiscordCardContainer {...props}>
|
||||||
<Typography variant="body1">Join the discussion</Typography>
|
<Typography variant="h3">Join the discussion</Typography>
|
||||||
<Link
|
<Link
|
||||||
href={discordHref}
|
href={discordHref}
|
||||||
style={{
|
style={{
|
||||||
|
|
|
@ -28,7 +28,9 @@ export default function PodcastShowCard({
|
||||||
height={show.logo.height}
|
height={show.logo.height}
|
||||||
/>
|
/>
|
||||||
<ShowData>
|
<ShowData>
|
||||||
<Title variant="h3">{show.title}</Title>
|
<Title variant="h2" genericFontFamily="serif">
|
||||||
|
{show.title}
|
||||||
|
</Title>
|
||||||
<PodcastHost show={show} />
|
<PodcastHost show={show} />
|
||||||
<Description
|
<Description
|
||||||
variant="body2"
|
variant="body2"
|
||||||
|
|
|
@ -188,7 +188,7 @@ PostCard.styles = {
|
||||||
display: -webkit-box;
|
display: -webkit-box;
|
||||||
-webkit-line-clamp: 2;
|
-webkit-line-clamp: 2;
|
||||||
-webkit-box-orient: vertical;
|
-webkit-box-orient: vertical;
|
||||||
max-height: calc(3 * var(--lsd-h5-lineHeight));
|
max-height: calc(3 * var(--lsd-h4-lineHeight));
|
||||||
}
|
}
|
||||||
|
|
||||||
.post-card__subtitle {
|
.post-card__subtitle {
|
||||||
|
|
|
@ -159,7 +159,7 @@ export const HomePage: React.FC<HomePageProps> = ({
|
||||||
|
|
||||||
<PodcastShowsPreview data={{ shows }} />
|
<PodcastShowsPreview data={{ shows }} />
|
||||||
|
|
||||||
<BrowseAll title="Browser all" size="large">
|
<BrowseAll title="Browse all" size="large">
|
||||||
<TagsTitle>
|
<TagsTitle>
|
||||||
<Typography component="h2" variant="body1">
|
<Typography component="h2" variant="body1">
|
||||||
Tags
|
Tags
|
||||||
|
@ -340,6 +340,11 @@ const FeaturedFirst = styled.div`
|
||||||
margin-top: var(--lsd-spacing-32) !important;
|
margin-top: var(--lsd-spacing-32) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.post-card__title h3 {
|
||||||
|
font-size: var(--lsd-h2-fontSize) !important;
|
||||||
|
line-height: var(--lsd-h2-lineHeight) !important;
|
||||||
|
}
|
||||||
|
|
||||||
.post-card__subtitle {
|
.post-card__subtitle {
|
||||||
margin-top: var(--lsd-spacing-16) !important;
|
margin-top: var(--lsd-spacing-16) !important;
|
||||||
}
|
}
|
||||||
|
@ -354,9 +359,8 @@ const FeaturedSecond = styled.div`
|
||||||
}
|
}
|
||||||
|
|
||||||
.post-card__title-text {
|
.post-card__title-text {
|
||||||
font-size: var(--lsd-h5-fontSize) !important;
|
font-size: var(--lsd-h4-fontSize) !important;
|
||||||
font-weight: var(--lsd-h5-fontWeight) !important;
|
line-height: var(--lsd-h4-lineHeight) !important;
|
||||||
line-height: var(--lsd-h5-lineHeight) !important;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.post-card__label {
|
.post-card__label {
|
||||||
|
@ -365,7 +369,6 @@ const FeaturedSecond = styled.div`
|
||||||
|
|
||||||
.post-card__label * {
|
.post-card__label * {
|
||||||
font-size: var(--lsd-subtitle4-fontSize) !important;
|
font-size: var(--lsd-subtitle4-fontSize) !important;
|
||||||
font-weight: var(--lsd-subtitle4-fontWeight) !important;
|
|
||||||
line-height: var(--lsd-subtitle4-lineHeight) !important;
|
line-height: var(--lsd-subtitle4-lineHeight) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -250,8 +250,8 @@ const Root = styled('div')`
|
||||||
|
|
||||||
${(props) => lsdUtils.breakpoint(props.theme, 'xs', 'down')} {
|
${(props) => lsdUtils.breakpoint(props.theme, 'xs', 'down')} {
|
||||||
.post-card__title-text {
|
.post-card__title-text {
|
||||||
font-size: var(--lsd-h5-fontSize) !important;
|
font-size: var(--lsd-h4-fontSize) !important;
|
||||||
line-height: var(--lsd-h5-lineHeight) !important;
|
line-height: var(--lsd-h4-lineHeight) !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
`
|
`
|
||||||
|
|
|
@ -65,6 +65,15 @@ export default function App({ Component, pageProps }: AppLayoutProps) {
|
||||||
:root {
|
:root {
|
||||||
--lpe-nav-rendered-height: ${uiConfigs.navbarRenderedHeight}px;
|
--lpe-nav-rendered-height: ${uiConfigs.navbarRenderedHeight}px;
|
||||||
--lpe-article-rendered-margin-top: ${uiConfigs.articleRenderedMT}px;
|
--lpe-article-rendered-margin-top: ${uiConfigs.articleRenderedMT}px;
|
||||||
|
|
||||||
|
--lsd-h1-fontSize: 44px;
|
||||||
|
--lsd-h1-lineHeight: 54px;
|
||||||
|
--lsd-h2-fontSize: 36px;
|
||||||
|
--lsd-h2-lineHeight: 48px;
|
||||||
|
--lsd-h3-fontSize: 28px;
|
||||||
|
--lsd-h3-lineHeight: 42px;
|
||||||
|
--lsd-h4-fontSize: 20px;
|
||||||
|
--lsd-h4-lineHeight: 30px;
|
||||||
}
|
}
|
||||||
|
|
||||||
a,
|
a,
|
||||||
|
@ -114,6 +123,10 @@ export default function App({ Component, pageProps }: AppLayoutProps) {
|
||||||
.lsd-dropdown-item__label {
|
.lsd-dropdown-item__label {
|
||||||
text-transform: capitalize;
|
text-transform: capitalize;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.lsd-quote {
|
||||||
|
margin-block: 8px;
|
||||||
|
}
|
||||||
`}
|
`}
|
||||||
/>
|
/>
|
||||||
<QueryClientProvider client={queryClient}>
|
<QueryClientProvider client={queryClient}>
|
||||||
|
|
Loading…
Reference in New Issue