deepStateMirrors/tabi
1
0
Fork 1
mirror of https://github.com/welpo/tabi.git synced 2025-12-17 04:48:44 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

refactor(posts): make meta column width adaptable

Browse source 
The meta column of the blogposts list was fixed to 13.5rem.
I can be annoying when displaying something else but a date as it was initially planned.

Width set to 13.5rem has been kept when displaying a date to avoid any regression.
Nevertheless, it is possible to get rid of it in the future if needed.

Feed has been adapted accordingly.
This commit is contained in:
ZzMzaw 2024-08-04 08:47:22 +02:00
parent 769d5a373f
commit 506a4a86e5
3 changed files with 56 additions and 31 deletions
Download patch file Download diff file Expand all files Collapse all files

66
sass/parts/_posts_list.scss
View file

@ -1,24 +1,28 @@
.bloglist-container {
display: grid;
grid-template-columns: 1fr;
grid-template-columns: 1fr 8fr;
}
.bloglist-row {
.bloglist-meta {
display: flex;
align-items: flex-start;
background-color: var(--navbar-color);
padding-block: 2.5rem;
.bloglist-meta {
ul {
margin-inline-end: 0.7rem;
padding: 0;
width: 13.5rem;
color: var(--meta-color);
font-weight: 300;
font-size: 0.9rem;
li {
list-style-type: none;
white-space: nowrap;
}
li.date {
width: 13.5rem;
}
li.draft-label {
@ -26,23 +30,17 @@
line-height: 1.2rem;
}
}
}
.bloglist-tags {
margin-top: 0.1rem;
.bloglist-content {
display: flex;
align-items: flex-start;
background-color: var(--navbar-color);
padding: 2.5rem 0;
.tag {
display: inline-block;
margin-inline-end: 0.7rem;
font-weight: 400;
font-size: 0.75rem;
text-transform: uppercase;
}
}
.bloglist-content {
div {
flex: 1;
.bloglist-title {
margin: 0;
font-weight: bold;
@ -58,6 +56,18 @@
}
}
.bloglist-tags {
margin-top: 0.1rem;
.tag {
display: inline-block;
margin-inline-end: 0.7rem;
font-weight: 400;
font-size: 0.75rem;
text-transform: uppercase;
}
}
.description p {
margin: 0.5rem 0 1rem;
color: var(--text-color);
@ -86,12 +96,15 @@
}
@media only screen and (max-width: 1100px) {
.bloglist-row {
flex-direction: column;
align-items: flex-start;
padding-block: 2rem;
.bloglist-container {
grid-template-columns: 1fr;
}
.bloglist-meta {
.bloglist-meta {
padding-block: 2rem;
border-bottom: 0;
ul {
margin-block-end: 0;
width: 100%;
@ -100,8 +113,15 @@
margin-inline-end: 0.3rem;
}
}
}
.bloglist-content {
.bloglist-content {
flex-direction: column;
align-items: flex-start;
padding: 0;
padding-bottom: 2rem;
div {
width: 100%;
}
}