diff options
Diffstat (limited to 'themes/hugo-theme-stack/assets/scss/partials/article.scss')
| -rw-r--r-- | themes/hugo-theme-stack/assets/scss/partials/article.scss | 278 |
1 files changed, 0 insertions, 278 deletions
diff --git a/themes/hugo-theme-stack/assets/scss/partials/article.scss b/themes/hugo-theme-stack/assets/scss/partials/article.scss deleted file mode 100644 index 6c2feb1..0000000 --- a/themes/hugo-theme-stack/assets/scss/partials/article.scss +++ /dev/null @@ -1,278 +0,0 @@ -/* Default article style */ -.article-list { - display: flex; - flex-direction: column; - gap: var(--section-separation); - - 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); - } - - .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); - gap: 15px; -} - -.article-title { - font-family: var(--article-font-family); - font-weight: 600; - margin: 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 { - font-weight: normal; - color: var(--card-text-color-secondary); - line-height: 1.5; - margin: 0; - font-size: 1.75rem; - @include respond(xl) { - font-size: 2rem; - } -} - -.article-title-wrapper { - display: flex; - flex-direction: column; - gap: 8px; -} - -.article-time, -.article-translations { - display: flex; - color: var(--card-text-color-tertiary); - gap: 15px; - - svg { - vertical-align: middle; - width: 20px; - height: 20px; - stroke-width: 1.33; - flex-shrink: 0; - } - - time, - a { - font-size: 1.4rem; - color: var(--card-text-color-tertiary); - } - - & > div { - display: inline-flex; - align-items: center; - gap: 15px; - } -} - -.article-time { - flex-wrap: wrap; -} - -.article-translations { - & > div { - flex-wrap: wrap; - } -} - -.article-category, -.article-tags { - display: flex; - gap: 10px; - flex-wrap: wrap; - - 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; - 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; - } - - article { - & > a { - display: flex; - align-items: center; - padding: var(--small-card-padding); - gap: 15px; - } - - &:not(:last-of-type) { - border-bottom: 1.5px solid var(--card-separator-color); - } - - .article-details { - flex-grow: 1; - padding: 0; - min-height: var(--image-size); - gap: 10px; - } - - .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; - } - } - } -} |