Hugo-theme-stack/assets/scss/partials/article.scss

277 lines
5.7 KiB
SCSS
Raw Normal View History

2020-08-22 07:20:08 -04:00
/* Default article style */
.article-list {
display: flex;
flex-direction: column;
2022-03-03 17:11:19 -05:00
gap: var(--section-separation);
2020-08-22 07:20:08 -04:00
article {
display: flex;
flex-direction: column;
background-color: var(--card-background);
box-shadow: var(--shadow-l1);
2020-08-22 07:20:08 -04:00
border-radius: var(--card-border-radius);
overflow: hidden;
transition: box-shadow 0.3s ease;
&:hover {
box-shadow: var(--shadow-l2);
}
2020-08-22 07:20:08 -04:00
.article-image {
img {
width: 100%;
height: 150px;
2020-08-22 07:20:08 -04:00
object-fit: cover;
@include respond(md) {
height: 200px;
2020-08-22 07:20:08 -04:00
}
@include respond(xl) {
2020-09-03 05:42:01 -04:00
height: 250px;
2020-08-22 07:20:08 -04:00
}
}
}
@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);
gap: 15px;
2020-08-22 07:20:08 -04:00
}
.article-title {
font-weight: 600;
margin: 0;
color: var(--card-text-color-main);
2020-10-04 09:58:32 -04:00
font-size: 2.2rem;
@include respond(xl) {
2020-10-04 09:58:32 -04:00
font-size: 2.4rem;
}
2020-08-22 07:20:08 -04:00
a {
color: var(--card-text-color-main);
&:hover {
color: var(--card-text-color-main);
}
}
}
.article-subtitle {
2020-09-03 17:32:28 -04:00
font-weight: normal;
2020-08-22 07:20:08 -04:00
color: var(--card-text-color-secondary);
line-height: 1.5;
margin: 0;
2020-10-04 09:58:32 -04:00
font-size: 1.75rem;
@include respond(xl) {
2020-09-03 05:42:01 -04:00
font-size: 2rem;
2020-08-22 07:20:08 -04:00
}
}
.article-title-wrapper {
display: flex;
flex-direction: column;
gap: 8px;
}
.article-time,
.article-translations {
2020-08-22 07:20:08 -04:00
display: flex;
color: var(--card-text-color-tertiary);
gap: 15px;
2020-08-22 07:20:08 -04:00
svg {
vertical-align: middle;
width: 20px;
height: 20px;
2020-09-25 05:07:49 -04:00
stroke-width: 1.33;
flex-shrink: 0;
2020-08-22 07:20:08 -04:00
}
time,
a {
font-size: 1.4rem;
color: var(--card-text-color-tertiary);
2020-08-22 07:20:08 -04:00
}
& > div {
display: inline-flex;
align-items: center;
gap: 15px;
}
2020-08-22 07:20:08 -04:00
}
.article-time {
flex-wrap: wrap;
}
.article-translations {
& > div {
flex-wrap: wrap;
}
}
.article-category,
2020-08-22 07:20:08 -04:00
.article-tags {
2022-03-03 17:11:19 -05:00
display: flex;
gap: 10px;
2020-08-22 07:20:08 -04:00
a {
color: var(--accent-color-text);
background-color: var(--accent-color);
padding: 8px 16px;
2020-08-22 07:20:08 -04:00
border-radius: var(--tag-border-radius);
display: inline-block;
font-size: 1.4rem;
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);
2020-08-22 07:20:08 -04:00
background-color: var(--card-background);
--image-size: 50px;
@include respond(md) {
--image-size: 60px;
}
2020-08-22 07:20:08 -04:00
article {
& > a {
display: flex;
align-items: center;
padding: var(--small-card-padding);
2022-03-03 17:11:19 -05:00
gap: 15px;
}
2020-08-22 07:20:08 -04:00
&:not(:last-of-type) {
border-bottom: 1.5px solid var(--card-separator-color);
2020-08-22 07:20:08 -04:00
}
.article-details {
flex-grow: 1;
padding: 0;
min-height: var(--image-size);
2022-03-03 17:39:04 -05:00
gap: 10px;
2020-08-22 07:20:08 -04:00
}
.article-title {
margin: 0;
font-size: 1.6rem;
2020-08-22 07:20:08 -04:00
@include respond(md) {
font-size: 1.8rem;
2020-08-22 07:20:08 -04:00
}
}
.article-image {
img {
width: var(--image-size);
height: var(--image-size);
object-fit: cover;
2020-08-22 07:20:08 -04:00
}
}
.article-time {
font-size: 1.4rem;
}
2020-09-26 05:40:33 -04:00
.article-preview {
2020-09-26 05:40:33 -04:00
font-size: 1.4rem;
color: var(--card-text-color-tertiary);
margin-top: 10px;
2020-09-26 05:40:33 -04:00
line-height: 1.5;
}
2020-08-22 07:20:08 -04:00
}
}
/* 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);
2020-08-22 07:20:08 -04:00
transition: box-shadow 0.3s ease;
background-color: var(--card-background);
&:hover {
box-shadow: var(--shadow-l2);
2020-08-22 07:20:08 -04:00
}
&.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;
2020-08-22 07:20:08 -04:00
@include respond(sm) {
padding: 20px;
2020-08-22 07:20:08 -04:00
}
}
.article-title {
font-size: 2rem;
2020-08-22 07:20:08 -04:00
font-weight: 500;
color: var(--card-text-color-main);
@include respond(sm) {
font-size: 2.2rem;
2020-08-22 07:20:08 -04:00
}
}
}
}