github/overleaf
1
0
Fork 0
mirror of https://github.com/overleaf/overleaf.git synced 2024-10-17 21:05:04 -04:00
Code Issues Projects Releases Packages Wiki Activity

Merge pull request #20754 from overleaf/mf-bs5-blog-list-style

Browse source 
[web] Implement Bootstrap 5 blog list style

GitOrigin-RevId: 1a343fa844cd8b22483097a470f5108ec9bcd914
This commit is contained in:
M Fahru 2024-10-03 07:39:04 -07:00 committed by Copybot
parent 163966bbb6
commit 04de9f28a2
1 changed files with 74 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

76
services/web/frontend/stylesheets/bootstrap-5/components/blog-posts.scss
View file

@ -2,6 +2,18 @@
v2 v2
Blog Pages Blog Pages
*/ */
.blog-container {
.blog-list-container-title {
small {
@include body-lg;
display: block;
margin-top: var(--spacing-06);
font-weight: 400;
}
}
}
.blog { .blog {
img { img {
max-width: 100%; max-width: 100%;
@ -13,7 +25,6 @@
padding: 0; padding: 0;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: var(--spacing-09);
.card-header { .card-header {
margin-bottom: var(--margin-sm); margin-bottom: var(--margin-sm);
@ -23,6 +34,21 @@
p { p {
margin-top: 12.5px; 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 { .blog-post-container {
@ -40,12 +66,39 @@
margin-bottom: var(--spacing-04); margin-bottom: var(--spacing-04);
} }
.blog-post-title-link {
margin-top: var(--spacing-04);
margin-bottom: var(--spacing-06);
a {
text-decoration: none;
color: var(--neutral-90);
&:hover {
text-decoration: underline;
}
}
}
.blog-date { .blog-date {
display: block; display: block;
margin-bottom: var(--spacing-08);
} }
.blog-content { .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 { > *:last-child {
margin-bottom: 0; margin-bottom: 0;
} }
@ -54,6 +107,21 @@
.blog-footer-tags { .blog-footer-tags {
margin-top: var(--spacing-12); 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 { .tags {
@ -67,6 +135,10 @@
flex-wrap: wrap; flex-wrap: wrap;
} }
.badge-tag {
padding: 0 var(--bs-badge-padding-x);
}
li { li {
display: inline-flex; display: inline-flex;
} }