Hugo-theme-stack/assets/scss/partials/article.scss
Bachrul uluum dcfc7b5589
feat(article): reading time (#204)
* add reading time feature

* Revert change in jsconfig.json

* feat: add article.readingTime param, and improve style

* Revert change in jsconfig.json x2

* Remove reading time in compact layout

It doesn't look right to me for now

* feat: add i18n support to reading time string

* Hide footer.article-time when there's not content

Co-authored-by: Jimmy Cai <github@jimmycai.com>
2021-07-23 18:37:30 +02:00

270 lines
5.7 KiB
SCSS

/* Default article style */
.article-list {
display: flex;
flex-direction: column;
article {
display: flex;
flex-direction: column;
background-color: var(--card-background);
box-shadow: var(--shadow-l1);
border-radius: var(--card-border-radius);
overflow: hidden;
transition: box-shadow 0.3s ease;
&:hover {
box-shadow: var(--shadow-l2);
}
&:not(:last-of-type) {
margin-bottom: var(--section-separation);
}
.article-image {
img {
width: 100%;
height: 150px;
object-fit: cover;
@include respond(md) {
height: 200px;
}
@include respond(xl) {
height: 250px;
}
}
}
@for $i from 1 through length($defaultTagBackgrounds) {
&:nth-child(#{length($defaultTagBackgrounds)}n + #{$i}) {
.article-category a {
background: nth($defaultTagBackgrounds, $i);
color: nth($defaultTagColors, $i);
}
}
}
}
}
.article-details {
display: flex;
flex-direction: column;
justify-content: center;
padding: var(--card-padding);
}
.article-title {
font-weight: 600;
margin: 10px 0;
color: var(--card-text-color-main);
font-size: 2.2rem;
@include respond(xl) {
font-size: 2.4rem;
}
a {
color: var(--card-text-color-main);
&:hover {
color: var(--card-text-color-main);
}
}
& + .article-subtitle {
margin-top: 0;
}
}
.article-subtitle {
font-weight: normal;
color: var(--card-text-color-secondary);
margin: 5px 0;
line-height: 1.5;
font-size: 1.75rem;
@include respond(xl) {
font-size: 2rem;
}
}
.article-time {
display: flex;
align-items: center;
color: var(--card-text-color-tertiary);
gap: 15px;
margin-top: 10px;
flex-wrap: wrap;
svg {
vertical-align: middle;
margin-right: 15px;
width: 20px;
height: 20px;
stroke-width: 1.33;
}
time {
font-size: 1.4rem;
}
& > div {
display: inline-flex;
align-items: center;
}
}
.article-category,
.article-tags {
a {
color: var(--accent-color-text);
background-color: var(--accent-color);
padding: 8px 16px;
border-radius: var(--tag-border-radius);
display: inline-block;
font-size: 1.4rem;
margin-right: 10px;
margin-bottom: 10px;
transition: background-color 0.5s ease;
&:hover {
color: var(--accent-color-text);
background-color: var(--accent-color-darker);
}
}
}
/* Compact style article list */
.article-list--compact {
border-radius: var(--card-border-radius);
box-shadow: var(--shadow-l1);
background-color: var(--card-background);
--image-size: 50px;
@include respond(md) {
--image-size: 60px;
}
& + .pagination {
margin-top: var(--section-separation);
}
article {
& > a {
display: flex;
align-items: center;
padding: var(--small-card-padding);
}
&:not(:last-of-type) {
border-bottom: 1.5px solid var(--card-separator-color);
}
.article-details {
flex-grow: 1;
padding: 0;
padding-right: 15px;
min-height: var(--image-size);
}
.article-title {
margin: 0;
font-size: 1.6rem;
@include respond(md) {
font-size: 1.8rem;
}
}
.article-image {
img {
width: var(--image-size);
height: var(--image-size);
object-fit: cover;
}
}
.article-time {
font-size: 1.4rem;
}
.article-preview {
font-size: 1.4rem;
color: var(--card-text-color-tertiary);
margin-top: 10px;
line-height: 1.5;
}
}
}
/* Tile style article list */
.article-list--tile {
article {
border-radius: var(--card-border-radius);
overflow: hidden;
position: relative;
height: 350px;
width: 250px;
box-shadow: var(--shadow-l1);
transition: box-shadow 0.3s ease;
background-color: var(--card-background);
&:hover {
box-shadow: var(--shadow-l2);
}
&.has-image {
.article-details {
background-color: rgba(#000, 0.25);
}
.article-title {
color: #fff;
}
}
.article-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
img {
width: 100%;
height: 100%;
object-fit: cover;
}
}
.article-details {
border-radius: var(--card-border-radius);
position: relative;
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
justify-content: flex-end;
z-index: 2;
padding: 15px;
@include respond(sm) {
padding: 20px;
}
}
.article-title {
font-size: 2rem;
font-weight: 500;
color: var(--card-text-color-main);
@include respond(sm) {
font-size: 2.2rem;
}
}
}
}