Hugo-theme-stack/assets/scss/partials/article.scss
Jimmy Cai 495a3b0289
refactor: rewrite grid system & style changes (#231)
* refactor(WIP): add new SCSS mixin `respond`

Theme's stylesheet mixes the use of max-width and min-width for responsive design, and it's horrible.

* refactor: update variable.scss to use @mixin respond

* refactor(grid): adjust sidebar max-width

* refactor(partials/article.scss): use `@include respond`

* refactor(layout/article.scss): delete unused SCSS and migrate to `@include respond`

* Adjust left sidebar max-width on xl screen

* fix: right sidebar not sticky

* refactor(breakpoint): simplify `@mixin respond`

* refactor(breakpoints): improve warning message

* fix(breakpoint): return only the requested breakpoint

* fix: add missing padding to .article-details
2021-06-20 12:53:10 +02:00

263 lines
5.6 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);
margin-top: 10px;
svg {
vertical-align: middle;
margin-right: 15px;
width: 20px;
height: 20px;
stroke-width: 1.33;
}
time {
font-size: 1.4rem;
}
}
.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;
}
}
}
}