mirror of
https://github.com/welpo/tabi.git
synced 2025-10-11 07:46:15 +02:00
506a4a86e5
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.
128 lines
2.4 KiB
SCSS
128 lines
2.4 KiB
SCSS
.bloglist-container {
|
|
display: grid;
|
|
grid-template-columns: 1fr 8fr;
|
|
}
|
|
|
|
.bloglist-meta {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
background-color: var(--navbar-color);
|
|
padding-block: 2.5rem;
|
|
|
|
ul {
|
|
margin-inline-end: 0.7rem;
|
|
padding: 0;
|
|
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 {
|
|
width: fit-content;
|
|
line-height: 1.2rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
.bloglist-content {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
background-color: var(--navbar-color);
|
|
padding: 2.5rem 0;
|
|
|
|
div {
|
|
flex: 1;
|
|
|
|
.bloglist-title {
|
|
margin: 0;
|
|
font-weight: bold;
|
|
font-size: 1.2em;
|
|
|
|
a {
|
|
color: var(--text-color-high-contrast);
|
|
font-weight: 550;
|
|
|
|
&:hover {
|
|
color: var(--hover-color);
|
|
}
|
|
}
|
|
}
|
|
|
|
.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);
|
|
font-weight: 250;
|
|
font-size: 0.9rem;
|
|
line-height: 1.5rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
.all-posts {
|
|
font-weight: 350;
|
|
font-size: 1.3rem;
|
|
}
|
|
|
|
#all-projects {
|
|
margin-top: 2rem;
|
|
}
|
|
|
|
.posts-first #featured-projects {
|
|
margin-top: 4rem;
|
|
}
|
|
|
|
.projects-first #posts-list {
|
|
margin-top: 4rem;
|
|
}
|
|
|
|
@media only screen and (max-width: 1100px) {
|
|
.bloglist-container {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.bloglist-meta {
|
|
padding-block: 2rem;
|
|
border-bottom: 0;
|
|
|
|
ul {
|
|
margin-block-end: 0;
|
|
width: 100%;
|
|
|
|
li {
|
|
display: inline;
|
|
margin-inline-end: 0.3rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
.bloglist-content {
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
padding: 0;
|
|
padding-bottom: 2rem;
|
|
|
|
div {
|
|
width: 100%;
|
|
}
|
|
}
|
|
}
|