/* * * 文章 * * 按照顺序 * 1.默认 * 2.深色 * 3.媒体查询 * - 870px * - 2048px */ @import "../base/variables"; .post { >.title { >h1 { >a { letter-spacing: 0.0625rem; font-size: 2rem; line-height: 2rem; color: #262626; &:hover { color: #26262680; } } } >.info { display: flex; border-bottom: 1px solid #d9d9d9; margin-bottom: 1rem; >span { font-weight: 400; font-size: 0.75rem; color: #8c8c8c; i { position: relative; top: 0.125rem; color: #8c8c8c; } } } } // =========== 深色 =========== @include darkmode { >.title { >h1 { >a { color: #dbdbdb; :hover { color: #dbdbdb80; } } } >.info { border-bottom: 1px solid #434343; span { color: #7d7d7d; i { color: #7d7d7d; } } } } } // =========== 移动端 =========== @media (min-width: 320px) and (max-width: 870px) { >.title { margin-top: 10%; >.info{ flex-direction: column; >span{ padding: 1% 1%; } } } } // =========== 桌面端 =========== @media (min-width: 870px) and (max-width: 2048px) { >.title { margin-top: 4rem; >.info{ flex-direction: row; >span{ margin: 0.25rem 0.25rem; } } } } }