Sync/hugo-theme-stack
1
0
Fork 1
mirror of https://github.com/CaiJimmy/hugo-theme-stack.git synced 2025-04-29 12:03:31 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Jimmy 2021-06-19 22:49:07 +02:00
parent b61d47622f
commit fe038557cc
1 changed files with 17 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
assets/scss/partials/article.scss
View File

@ -24,14 +24,14 @@
.article-image { .article-image {
img { img {
width: 100%; width: 100%;
height: 200px; height: 150px;
object-fit: cover; object-fit: cover;
@media (max-width: $on-tablet) { @include respond(md) {
height: 150px; height: 200px;
} }
@media (min-width: $on-desktop-large) { @include respond(xl) {
height: 250px; height: 250px;
} }
} }
@ -62,7 +62,7 @@
color: var(--card-text-color-main); color: var(--card-text-color-main);
font-size: 2.2rem; font-size: 2.2rem;
@media (min-width: $on-desktop-large) { @include respond(xl) {
font-size: 2.4rem; font-size: 2.4rem;
} }
@ -86,7 +86,7 @@
line-height: 1.5; line-height: 1.5;
font-size: 1.75rem; font-size: 1.75rem;
@media (min-width: $on-desktop-large) { @include respond(xl) {
font-size: 2rem; font-size: 2rem;
} }
} }
@ -135,10 +135,10 @@
border-radius: var(--card-border-radius); border-radius: var(--card-border-radius);
box-shadow: var(--shadow-l1); box-shadow: var(--shadow-l1);
background-color: var(--card-background); background-color: var(--card-background);
--image-size: 60px; --image-size: 50px;
@media (max-width: $on-tablet) { @include respond(md) {
--image-size: 50px; --image-size: 60px;
} }
& + .pagination { & + .pagination {
@ -165,10 +165,10 @@
.article-title { .article-title {
margin: 0; margin: 0;
font-size: 1.8rem; font-size: 1.6rem;
@media (max-width: $on-tablet) { @include respond(md) {
font-size: 1.6rem; font-size: 1.8rem;
} }
} }
@ -242,20 +242,19 @@
flex-direction: column; flex-direction: column;
justify-content: flex-end; justify-content: flex-end;
z-index: 2; z-index: 2;
padding: 20px;
@media (max-width: $on-phone) { @include respond(sm) {
padding: 15px; padding: 20px;
} }
} }
.article-title { .article-title {
font-size: 2.2rem; font-size: 2rem;
font-weight: 500; font-weight: 500;
color: var(--card-text-color-main); color: var(--card-text-color-main);
@media (max-width: $on-phone) { @include respond(sm) {
font-size: 2rem; font-size: 2.2rem;
} }
} }
} }