abdullahtarawneh.com/assets/scss/layouts/blog/single.scss
a 2247ee2776 June 2024 redesign (#1)
still missing some things but they were missing before anyway. so it's probably better to just push and deploy already.

Reviewed-on: #1
2024-06-03 23:22:36 +00:00

115 lines
2.2 KiB
SCSS

main.blog.single {
--max-container-width: 80ch;
line-height: 1.6;
padding-bottom: 2rem;
article.h-entry {
> header {
background: var(--color-card-background);
color: var(--color-card-text);
padding-block: 1rem;
.entry-title {
margin-block-start: 1rem;
font-family: serif;
}
.entry-summary {
font-family: serif;
}
.h-card {
font-style: normal;
display: inline-block;
a {
display: grid;
grid-template-columns: auto 1fr;
gap: 0.5rem;
align-items: center;
text-decoration: none;
}
img.logo {
width: 2rem;
height: 2rem;
border-radius: 100rem;
}
}
time.dt-published {
display: block;
}
#TableOfContents > ul {
padding-left: 1rem;
}
}
section.e-content {
display: grid;
grid-template-columns: 1em 1fr 1em;
padding-block: 1rem;
gap: 1rem 0;
max-width: 80ch;
margin: 0 auto;
@media (min-width: 55ch) {
grid-template-columns: minmax(1em, 1fr) minmax(45ch, 70ch) minmax(1em, 1fr);
}
> * {
grid-column: 2;
margin: 0;
}
> img, > figure {
grid-column: 1 / span 3;
width: 100%;
img {
width: 100%;
display: block;
}
figcaption {
padding: 1rem;
background: var(--color-card-background);
color: var(--color-card-text);
font-size: 0.8em;
}
}
> blockquote {
padding-inline-start: 0.25rem;
border-inline-start: 0.25rem solid var(--color-highlight);
p:only-child {margin: 0;}
}
.has-pullquote {
@mixin pullquote {
content: attr(data-pullquote);
font-family: serif;
display: block;
margin-block-end: 1rem;
font-size: 1.2rem;
color: var(--color-highlight);
}
&.left {
&.before:before,
&.after:after {
@include pullquote;
}
}
&.right {
&.before:before,
&.after:after {
@include pullquote;
}
}
@media (min-width: 40rem) {
&.left {
&.before:before,
&.after:after {
float: left;
margin-inline-end: 1rem;
max-width: 24ch;
}
}
&.right {
&.before:before,
&.after:after {
float: right;
margin-inline-start: 1rem;
max-width: 24ch;
}
}
}
}
}
}
}