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

261 lines
5.6 KiB
SCSS
Raw Normal View History

2020-08-22 07:20:08 -04:00
/* Default article style */
.article-list {
display: flex;
flex-direction: column;
article {
display: flex;
flex-direction: column;
background-color: var(--card-background);
@include box_shadow(1);
border-radius: var(--card-border-radius);
overflow: hidden;
&:not(:last-of-type) {
margin-bottom: var(--section-separation);
}
2020-08-22 07:20:08 -04:00
.article-image {
img {
width: 100%;
2020-09-03 05:42:01 -04:00
height: 200px;
2020-08-22 07:20:08 -04:00
object-fit: cover;
@media (max-width: $on-tablet) {
height: 150px;
}
2020-09-03 05:42:01 -04:00
@media (min-width: $on-desktop-large) {
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(--content-padding);
2020-08-22 07:20:08 -04:00
}
.article-category {
margin-bottom: 10px;
a {
display: inline-block;
text-decoration: none;
padding: 8px 16px;
font-size: 1.4rem;
background: nth($defaultTagBackgrounds, 1);
color: nth($defaultTagColors, 1);
border-radius: var(--tag-border-radius);
@media (max-width: $on-phone) {
font-size: 1.25rem;
padding: 8px 14px;
}
}
}
.article-title {
2020-09-03 17:32:28 -04:00
font-size: 2.4rem;
2020-08-22 07:20:08 -04:00
font-weight: 600;
margin: 10px 0;
color: var(--card-text-color-main);
2020-08-22 07:20:08 -04:00
a {
color: var(--card-text-color-main);
&:hover {
color: var(--card-text-color-main);
}
}
2020-09-03 05:42:01 -04:00
@media (min-width: $on-desktop-large) {
font-size: 2.4rem;
}
2020-08-22 07:20:08 -04:00
@media (max-width: $on-desktop) {
2020-09-03 05:42:01 -04:00
font-size: 2rem;
2020-08-22 07:20:08 -04:00
}
2020-09-03 17:32:28 -04:00
& + .article-subtitle {
margin-top: 0;
}
2020-08-22 07:20:08 -04:00
}
.article-subtitle {
2020-09-03 17:32:28 -04:00
font-weight: normal;
2020-09-03 05:42:01 -04:00
font-size: 1.8rem;
2020-08-22 07:20:08 -04:00
color: var(--card-text-color-secondary);
margin: 5px 0;
line-height: 1.5;
2020-09-03 05:42:01 -04:00
@media (min-width: $on-desktop-large) {
font-size: 2rem;
2020-08-22 07:20:08 -04:00
}
2020-09-03 17:32:28 -04:00
@media (max-width: $on-desktop) {
font-size: 1.6rem;
}
2020-08-22 07:20:08 -04:00
}
.article-time {
display: flex;
align-items: center;
color: var(--card-text-color-tertiary);
margin-top: 10px;
svg {
vertical-align: middle;
margin-right: 8px;
width: 20px;
height: 20px;
2020-08-22 07:20:08 -04:00
}
time {
font-size: 1.4rem;
2020-08-22 07:20:08 -04:00
}
}
.article-tags {
a {
color: var(--accent-color-text);
background-color: var(--accent-color);
padding: 8px 18px;
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);
@include box_shadow(1);
background-color: var(--card-background);
& + .pagination {
margin-top: var(--section-separation);
2020-08-22 07:20:08 -04:00
}
article {
display: flex;
align-items: center;
padding: var(--small-card-padding);
2020-08-22 07:20:08 -04:00
&:not(:last-of-type) {
border-bottom: 2px solid var(--card-separator-color);
}
.article-details {
flex-grow: 1;
padding: 0;
padding-right: 15px;
}
.article-title {
margin: 0;
font-size: 1.8rem;
2020-08-22 07:20:08 -04:00
@media (max-width: $on-tablet) {
2020-08-22 07:20:08 -04:00
font-size: 1.6rem;
}
}
.article-image {
img {
width: 60px;
height: 60px;
}
}
}
}
/* Tile style article list */
.article-list--tile {
article {
border-radius: var(--card-border-radius);
overflow: hidden;
position: relative;
height: 350px;
width: 250px;
@include box_shadow(1);
transition: box-shadow 0.3s ease;
background-color: var(--card-background);
&:hover {
@include box_shadow(2);
}
&.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: 20px;
@media (max-width: $on-phone) {
padding: 15px;
}
}
.article-title {
font-size: 2.2rem;
font-weight: 500;
color: var(--card-text-color-main);
@media (max-width: $on-phone) {
font-size: 2rem;
}
}
}
}