Fully fix subtitle alignment at small breakpoint
This commit is contained in:
parent
107bacfc0d
commit
6638165b75
2 changed files with 45 additions and 0 deletions
44
packages/website/Untitled.jsx
Normal file
44
packages/website/Untitled.jsx
Normal 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>
|
||||
|
||||
|
|
@ -48,6 +48,7 @@
|
|||
padding-block-start: 0;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.description {
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue