overleaf/services/web/frontend/stylesheets/bootstrap-5/components/blog-posts.scss
M Fahru 163966bbb6 Merge pull request #20722 from overleaf/mf-bs5-blog-post-style
[web] Implement boostrap-5 blog post style

GitOrigin-RevId: b9dbe4952726e4260a0fcb95c8e54d7bd2db0415
2024-10-14 11:01:42 +00:00

98 lines
1.5 KiB
SCSS

/*
v2
Blog Pages
*/
.blog {
img {
max-width: 100%;
}
.blog-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: var(--spacing-09);
.card-header {
margin-bottom: var(--margin-sm);
padding: 0;
}
p {
margin-top: 12.5px;
}
}
.blog-post-container {
@include media-breakpoint-up(lg) {
padding-right: 0;
}
}
.blog-post {
@include media-breakpoint-up(lg) {
margin-right: var(--spacing-09);
}
.blog-title {
margin-bottom: var(--spacing-04);
}
.blog-date {
display: block;
margin-bottom: var(--spacing-08);
}
.blog-content {
> *:last-child {
margin-bottom: 0;
}
}
.blog-footer-tags {
margin-top: var(--spacing-12);
}
}
.tags {
margin-top: var(--margin-md);
.tags-list {
list-style: none;
padding: 0;
display: flex;
gap: var(--spacing-05);
flex-wrap: wrap;
}
li {
display: inline-flex;
}
a {
font-size: small;
}
}
pre {
border: 1px solid var(--neutral-40);
border-radius: var(--border-radius-base);
padding: var(--spacing-04);
}
.figure {
background-color: #fff;
border: 1px solid var(--neutral-40);
display: inline-block;
margin: 0 auto var(--margin-sm) 0;
max-width: 100%;
padding: var(--spacing-04);
.figure-caption {
padding-top: var(--spacing-04);
font-size: small;
}
}
}