overleaf/services/web/frontend/stylesheets/bootstrap-5/components/blog-posts.scss
M Fahru 2a99415c69 Merge pull request #20829 from overleaf/mf-blog-list-title-link-size
[web] Reduce blog title link size on bootstrap 5 blog list page

GitOrigin-RevId: cd22fef67488c5b8d291c358e812e0d94cb303ef
2024-10-14 11:04:13 +00:00

172 lines
2.7 KiB
SCSS

/*
v2
Blog Pages
*/
.blog-container {
.blog-list-container-title {
small {
@include body-lg;
display: block;
margin-top: var(--spacing-06);
font-weight: 400;
}
}
}
.blog {
img {
max-width: 100%;
}
.blog-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
.card-header {
margin-bottom: var(--margin-sm);
padding: 0;
}
p {
margin-top: 12.5px;
}
> li {
.blog-date {
margin-top: var(--spacing-07);
}
&:not(:last-child) {
padding-bottom: var(--spacing-09);
border-bottom: 1px solid var(--neutral-20);
}
&:not(:first-child) {
padding-top: var(--spacing-09);
}
}
}
.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-post-title-link {
@include heading-lg;
margin-top: var(--spacing-04);
margin-bottom: var(--spacing-06);
a {
text-decoration: none;
color: var(--neutral-90);
&:hover {
text-decoration: underline;
}
}
}
.blog-date {
display: block;
}
.blog-content {
margin-top: var(--spacing-08);
> *:last-child {
margin-bottom: 0;
}
}
.blog-content-preview {
margin-bottom: var(--spacing-06);
> *:first-child {
margin-top: 0;
}
> *:last-child {
margin-bottom: 0;
}
}
.blog-footer-tags {
margin-top: var(--spacing-12);
}
.blog-read-more {
margin-bottom: var(--spacing-07);
a {
@extend .dm-mono;
text-decoration: none;
font-weight: 500;
&:hover {
text-decoration: underline;
}
}
}
}
.tags {
margin-top: var(--margin-md);
.tags-list {
list-style: none;
padding: 0;
display: flex;
gap: var(--spacing-05);
flex-wrap: wrap;
}
.badge-tag {
padding: 0 var(--bs-badge-padding-x);
}
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;
}
}
}