diff options
author | Jimmy Cai <jimmehcai@gmail.com> | 2020-09-25 00:59:00 +0300 |
---|---|---|
committer | Jimmy Cai <jimmehcai@gmail.com> | 2020-09-25 00:59:00 +0300 |
commit | 96897be941795908a312c71b095214c0f0894420 (patch) | |
tree | c18c95d275fb3e600fb1f3eb09a1dd0d7d98f973 /assets | |
parent | c6661196ad92dfa72513582c40f75a6a5f514851 (diff) |
feat(article list): article clickable and equal height
Diffstat (limited to 'assets')
-rw-r--r-- | assets/scss/partials/article.scss | 28 | ||||
-rw-r--r-- | assets/scss/partials/layout/article.scss | 2 | ||||
-rw-r--r-- | assets/scss/variables.scss | 5 |
3 files changed, 25 insertions, 10 deletions
diff --git a/assets/scss/partials/article.scss b/assets/scss/partials/article.scss index 834912d..0a22ef7 100644 --- a/assets/scss/partials/article.scss +++ b/assets/scss/partials/article.scss @@ -11,8 +11,8 @@ border-radius: var(--card-border-radius); overflow: hidden; - transition: box-shadow .3s ease; - + transition: box-shadow 0.3s ease; + &:hover { box-shadow: var(--shadow-l2); } @@ -159,24 +159,32 @@ border-radius: var(--card-border-radius); box-shadow: var(--shadow-l1); background-color: var(--card-background); + --image-size: 60px; + + @media (max-width: $on-tablet) { + --image-size: 50px; + } & + .pagination { margin-top: var(--section-separation); } article { - display: flex; - align-items: center; - padding: var(--small-card-padding); + & > a { + display: flex; + align-items: center; + padding: var(--small-card-padding); + } &:not(:last-of-type) { - border-bottom: 2px solid var(--card-separator-color); + 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 { @@ -190,10 +198,14 @@ .article-image { img { - width: 60px; - height: 60px; + width: var(--image-size); + height: var(--image-size); } } + + .article-time { + font-size: 1.4rem; + } } } diff --git a/assets/scss/partials/layout/article.scss b/assets/scss/partials/layout/article.scss index cd36496..5427859 100644 --- a/assets/scss/partials/layout/article.scss +++ b/assets/scss/partials/layout/article.scss @@ -43,7 +43,7 @@ } } - article { + .main-article { background: var(--card-background); border-radius: var(--card-border-radius); box-shadow: var(--shadow-l1); diff --git a/assets/scss/variables.scss b/assets/scss/variables.scss index 8c40575..d3ed0ce 100644 --- a/assets/scss/variables.scss +++ b/assets/scss/variables.scss @@ -63,6 +63,9 @@ $defaultTagColors: #fff, #fff, #fff, #fff, #fff; } --small-card-padding: 25px; + @media (max-width: $on-tablet) { + --small-card-padding: 25px 20px; + } @media (prefers-color-scheme: dark) { --card-background: #424242; @@ -129,4 +132,4 @@ $defaultTagColors: #fff, #fff, #fff, #fff, #fff; --shadow-l3: 0px 10px 20px rgba(0, 0, 0, 0.04), 0px 2px 6px rgba(0, 0, 0, 0.04), 0px 0px 1px rgba(0, 0, 0, 0.04); --shadow-l4: 0px 24px 32px rgba(0, 0, 0, 0.04), 0px 16px 24px rgba(0, 0, 0, 0.04), 0px 4px 8px rgba(0, 0, 0, 0.04), 0px 0px 1px rgba(0, 0, 0, 0.04); -}
\ No newline at end of file +} |