/* * * 友链 * * 按照顺序 * 1.默认 * 2.深色 * 3.媒体查询 * - 870px * - 2048px */ @import "../base/variables"; .links { >ul { >.friend { font-size: 1.5rem; font-weight: bold; line-height: 2.2rem; color: #262626; } >li { display: flex; justify-content: space-between; font-size: 1rem; padding-bottom: 0.3rem; line-height: 1.5rem; >a { color: #595959; &:hover { color: #59595980; } } } } // =========== 深色 =========== @include darkmode { >ul { >.friend { color: #dbdbdb; } >li { >a { color: #dbdbdb; &:hover { color: #dbdbdb80; } } } } } // =========== 移动端 =========== @media (max-width: 870px) { >ul { padding: 2.5% 1%; >.friend { padding: 2.5% 0; } >li { padding-bottom: 1%; } } } // =========== 桌面端 =========== @media (min-width: 870px) and (max-width: 2048px) { >ul { padding: 0.625rem 0.1rem; >.friend { padding: 0.5rem 0; } >li { padding-bottom: 0.3rem; } } } }