mirror of
https://github.com/overleaf/overleaf.git
synced 2024-10-17 21:05:04 -04:00
Merge pull request #20754 from overleaf/mf-bs5-blog-list-style
[web] Implement Bootstrap 5 blog list style GitOrigin-RevId: 1a343fa844cd8b22483097a470f5108ec9bcd914
This commit is contained in:
parent
163966bbb6
commit
04de9f28a2
1 changed files with 74 additions and 2 deletions
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue