github/overleaf
1
0
Fork 0
mirror of https://github.com/overleaf/overleaf.git synced 2024-11-14 20:40:17 -05: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
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%;
@ -13,7 +25,6 @@
padding: 0;
display: flex;
flex-direction: column;
gap: var(--spacing-09);
.card-header {
margin-bottom: var(--margin-sm);
@ -23,6 +34,21 @@
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 {
@ -40,12 +66,39 @@
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 {
display: block;
margin-bottom: var(--spacing-08);
}
.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;
}
@ -54,6 +107,21 @@
.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 {
@ -67,6 +135,10 @@
flex-wrap: wrap;
}
.badge-tag {
padding: 0 var(--bs-badge-padding-x);
}
li {
display: inline-flex;
}