/* * * 归档页面 * * 按照顺序 * 1.默认 * 2.深色 * 3.媒体查询 * - 320px */ @import "../base/variables"; .archives { >ul { >.year { font-size: 1.5rem; font-weight: bold; line-height: 2.2rem; color: #262626; } >li { display: flex; font-size: 0.875rem; padding-bottom: 0.3rem; line-height: 1.75rem; >a { color: #595959; &:hover { color: #59595980; } } >span { color: #8c8c8c; } } } // =========== 深色 =========== @include darkmode { >ul { >.year { color: #dbdbdb; } >li { >a { color: #acacac; &:hover { color: #acacac80; } } >span { color: #7d7d7d; } } } } // =========== 320px 设备 =========== @media (max-width: 320px) { >ul { padding: 2.5% 1%; >.year { padding: 2.5% 0; text-align: center; } >.title { padding: 2.5% 0; text-align: center; } >li { justify-content: center; >span { display: none; } } } } // =========== 768px 设备 =========== @media (min-width: 320px) and (max-width: 768px) { >ul { padding: 2.5% 1%; >.year { padding: 2.5% 0; } >.title { padding: 2.5% 0; } >li { justify-content: space-between; } } } // =========== 2048px 设备 =========== @media (min-width: 768px) and (max-width: 2048px) { >ul { padding: 0.625rem 0.1rem; >.year { padding: 0.5rem 0; } >li { justify-content: space-between; padding-bottom: 0.3rem; } } } }