style: optimize archive page style

This commit is contained in:
XPoet 2020-11-17 18:21:16 +08:00
parent f952f1b3b8
commit 5904d32cae
3 changed files with 40 additions and 48 deletions

View File

@ -4,7 +4,7 @@
<section class="archive-item">
<div class="archive-item-header">
<span class="archive-year"><%= postYear.year %></span>
<span class="archive-year-post-count">[<%= postYear.postList.length %>]</span>
<span class="archive-year-post-count">(<%= postYear.postList.length %>)</span>
</div>
<ul class="article-list">
<% postYear.postList.forEach(post => { %>

View File

@ -2,18 +2,21 @@
$archive-year-font-size = 1.8em;
$archive-year-count-font-size = 1.2em;
$article-title-font-size = 1.12em;
$article-date-font-size = 0.8em;
$article-title-font-size = 1.2em;
$article-date-font-size = 1em;
.archive-list-container {
.archive-item {
margin-bottom: $component-interspace + 10px;
margin-bottom: 58px;
&:last-child {
margin-bottom: 0;
}
.archive-item-header {
margin-bottom: 10px;
.archive-year {
font-size: $archive-year-font-size;
@ -26,7 +29,6 @@ $article-date-font-size = 0.8em;
margin-right: 6px;
}
.archive-year-post-count {
font-size: $archive-year-count-font-size;
@ -43,6 +45,12 @@ $article-date-font-size = 0.8em;
.article-list {
padding-left: 10px;
+ils-tablet() {
padding-left: 0;
}
.article-item {
margin-top: 18px;
@ -54,11 +62,15 @@ $article-date-font-size = 0.8em;
margin-top: 14px;
}
&:hover {
color: var(--primary-color);
}
a.article-title {
color: var(--normal-text-color);
&:hover {
color: $primary-color;
color: var(--primary-color);
}
}

View File

@ -53,7 +53,7 @@ $temp-color = hexo-config('style.primary_color');
$primary-color = $temp-color ? convert($temp-color):#0066CC;
$background-color = #fff; // light background color
$second-background-color = darken($background-color, 2%); // second light background color
$normal-text-color = #393939; //
$normal-text-color = #3f3f3f; //
$first-text-color = darken($normal-text-color, 10%); //
$second-text-color = darken($normal-text-color, 5%); //
$third-text-color = lighten($normal-text-color, 40%); //
@ -90,59 +90,39 @@ $default-font-weight = 400;
// ========================================================================
// light/dark color
// light/dark mode color
// ========================================================================
root-light() {
--background-color: $background-color;
--second-background-color: $second-background-color;
--primary-color: $primary-color;
--first-text-color: $first-text-color;
--second-text-color: $second-text-color;
--third-text-color: $third-text-color;
--fourth-text-color: $fourth-text-color;
--normal-text-color: $normal-text-color;
--border-color: $border-color;
--selection-color: $selection-color;
--shadow-color: $shadow-color;
--shadow-hover-color: $shadow-hover-color;
--scroll-bar-color: $scroll-bar-color;
}
root-dark() {
--background-color: $dark-background-color;
--second-background-color: $dark-second-background-color;
--primary-color: $dark-primary-color;
--first-text-color: $dark-first-text-color;
--second-text-color: $dark-second-text-color;
--third-text-color: $dark-third-text-color;
--fourth-text-color: $dark-fourth-text-color;
--normal-text-color: $dark-normal-text-color;
--border-color: $dark-border-color;
--selection-color: $dark-selection-color;
--shadow-color: $dark-shadow-color;
--shadow-hover-color: $dark-shadow-hover-color;
--scroll-bar-color: $dark-scroll-bar-color;
root-color(mode) {
--background-color: mode == 'light' ? $background-color : $dark-background-color;
--second-background-color: mode == 'light' ? $second-background-color : $dark-second-background-color;
--primary-color: mode == 'light' ? $primary-color : $dark-primary-color;
--first-text-color: mode == 'light' ? $first-text-color : $dark-first-text-color;
--second-text-color: mode == 'light' ? $second-text-color : $dark-second-text-color;
--third-text-color: mode == 'light' ? $third-text-color : $dark-third-text-color;
--fourth-text-color: mode == 'light' ? $fourth-text-color : $dark-fourth-text-color;
--normal-text-color: mode == 'light' ? $normal-text-color : $dark-normal-text-color;
--border-color: mode == 'light' ? $border-color : $dark-border-color;
--selection-color: mode == 'light' ? $selection-color : $dark-selection-color;
--shadow-color: mode == 'light' ? $shadow-color : $dark-shadow-color;
--shadow-hover-color: mode == 'light' ? $shadow-hover-color : $dark-shadow-hover-color;
--scroll-bar-color: mode == 'light' ? $scroll-bar-color : $dark-scroll-bar-color;
}
:root {
root-light();
root-color('light');
}
@media (prefers-color-scheme: dark) {
:root {
root-dark();
root-color('dark');
}
}
.dark-mode {
root-dark();
}
.light-mode {
root-light();
root-color('light');
}
.dark-mode {
root-color('dark');
}