2
0
Fork 0
inspin.io/assets/style/pages/article/post.css

179 lines
2.9 KiB
CSS
Raw Normal View History

2024-08-15 12:28:47 +00:00
.post {
max-width: 52rem;
margin: 0 auto;
padding: 2rem 1rem;
.hero {
display: grid;
grid-template-columns: calc(100% - 36rem) 36rem;
width: 100%;
.meta {
padding: 2rem 2rem 0 .3rem;
p {
color: var(--f-color);
font-size: .9rem;
font-weight: 300;
padding: 0;
margin: 0;
b {
font-weight: 700;
}
}
.author,
.date {
margin: 0 0 1.5rem 0;
}
.tags {
display: inline-block;
margin: .5rem .75rem 0 0;
&:not(:last-child):after {
position: relative;
content: ',';
font-size: .9rem;
padding: 0 .1rem;
top: -.05rem;
}
}
}
.head {
padding: 1.65rem 0 1rem 0;
h2 {
font-size: 2.25rem;
font-weight: 700;
line-height: 2.75rem;
letter-spacing: -.05rem;
margin: 0;
}
p {
display: block;
font-size: 1.25rem;
font-weight: 300;
line-height: 1.75rem;
padding: 1.5rem 0 2.5rem 0;
margin: 0;
}
img {
width: 100%;
border: .15rem solid var(--w-color);
}
}
}
.content {
display: grid;
grid-template-columns: calc(100% - 36rem) 36rem;
width: 100%;
h3,
h4,
h5,
h6 {
margin: 0;
2024-08-15 12:28:47 +00:00
a { font-weight: 600 }
}
h3 {
padding: 2.5rem 0 .5rem 0;
2024-08-15 12:28:47 +00:00
a { font-size: 1.75rem }
}
h4 {
padding: 1.5rem 0 0 0;
2024-08-15 12:28:47 +00:00
a { font-size: 1.5rem }
}
p {
display: block;
font-size: 1.25rem;
font-weight: 300;
line-height: 2rem;
padding: .75rem 0;
margin: 0;
a {
color: var(--l-color);
}
em {
display: block;
font-size: .9rem;
padding: 0 0 1rem 0;
text-align: center;
}
strong {
display: block;
font-size: 1.5rem;
font-weight: 300;
line-height: 2rem;
padding: 5.5rem 4rem .5rem 4rem;
&:before,
&:after {
content: '"';
font-size: 1.75rem;
padding: 0 .25rem;
}
}
}
.list {
padding: 1rem 0 1rem 2rem;
li {
color: var(--f-color);
font-family: var(--p-font);
font-size: 1.15rem;
font-weight: 300;
line-height: 1.85rem;
padding: 0 .5rem;
}
}
.from {
padding: 0 4rem 6rem 0;
text-align: right;
&:before {
content: '~';
font-size: 1.25rem;
padding: 0 .25rem;
}
}
img {
width: 100%;
padding: 1.25rem 0;
}
}
}
@media only screen and (--viewport-4) {
.post {
padding: 2rem 2.25rem;
.hero,
.content {
display: block;
}
.hero .head {
padding: 0 0 1rem 0;
h2 {
font-size: 1.75rem;
line-height: 2.25rem;
}
}
}
}