Fully fix subtitle alignment at small breakpoint

This commit is contained in:
Jade Ellis 2024-07-24 23:50:31 +01:00
parent 107bacfc0d
commit 6638165b75
No known key found for this signature in database
GPG key ID: 8705A2A3EBF77BD2
2 changed files with 45 additions and 0 deletions

View file

@ -0,0 +1,44 @@
<div
style={{
display: 'flex',
height: '100%',
width: '100%',
padding: '10px 20px',
// alignItems: 'center',
justifyContent: 'center',
flexDirection: 'column',
backgroundImage: 'linear-gradient(to bottom, #dbf4ff, #eff3fc)',
fontSize: 60,
// letterSpacing: -2,
fontWeight: 700,
// textAlign: 'center',
}}
>
<div style={{
fontSize: 15,
fontWeight: 600,
textTransform: 'uppercase',
letterSpacing: 1,
margin: '25px 0 10px',
color: 'gray',
}}>jade.ellis.link
</div>
<div
style={{
backgroundImage: 'linear-gradient(90deg, rgb(30, 42, 85), rgb(22, 61, 120))',
backgroundClip: 'text',
'-webkit-background-clip': 'text',
color: 'transparent',
}}>The Potential Pitfalls of Pagination</div>
<aside style={{
fontSize: 20,
fontWeight: 500,
color:'#202020',
margin: '10px 0 10px',
}}>
Published on
· By Jade Ellis
· 4 min read
</aside>
</div>

View file

@ -48,6 +48,7 @@
padding-block-start: 0;
font-size: 18px;
font-weight: 600;
text-align: center;
}
.description {