$header-height: 9em !default; $link-change-time: .3s !default; $middle-width: 960px !default; // TIPS: 若调整 $middle-width 请同步修改 drawer.scss 中 .ml-drawer 之宽度
.ml-main {
margin: 0 auto; padding: $header-height 0 4em; max-width: $middle-width
}
.ml-card-list dt::before {
content: ''; display: inline-block; width: 15px; height: 15px; margin-right: 2em;
}
.ml-block-list li {
list-style: none;
}
.ml-card-list li {
list-style: none; margin: 8px 4px; display: inline-block;
}
.ml-card-list dd {
padding-bottom: 1em;
}
.ml-card-list dt {
position: relative; left: -30px;
}
.ml-card-list {
margin-left: 6px; padding-left: 20px; line-height: 1.2rem;
}
.ml-card-list h2 {
margin: 5px 0;
}
.ml-card-anchor {
width: (($middle-width - 150px) / 2); height: 10rem; display: inline-block; position: relative; border: none; overflow: hidden;
}
.ml-card-anchor .ml-card-text {
position: absolute; bottom: 0; padding: 10px; padding-top: 14px; @media screen and (prefers-reduced-motion: no-preference) { padding-top: 4px; transition: all $link-change-time; }
}
.ml-card-anchor img {
opacity: 0.2; position: absolute; left: 0; top: 0; @media screen and (prefers-reduced-motion: no-preference) { transition: all $link-change-time; }
}
.ml-card-anchor:hover img {
opacity: 0.1;
}
.ml-card-anchor:hover .ml-card-text {
bottom: 10px;
}
@media (min-width: 1600px) {
.ml-main { max-width: 60%; } .ml-card-anchor { width: 30rem; }
}
@media (max-width: 959px) {
.ml-main { margin: 0 1em; padding: $header-height 0 4em; } .ml-card-anchor { width: 40vw; }
}
@media (max-width: 767px) {
.ml-card-anchor { width: 80vw; height: 9rem; }
}
@media (max-width: 539px) {
.ml-card-anchor { height: 12rem; }
}