You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
335 lines
7.7 KiB
335 lines
7.7 KiB
.l_body |
|
position: relative |
|
margin: $gap |
|
&.nocover |
|
margin-top: $navbar-height |
|
@media screen and (max-width: $device-mobile-l) |
|
margin: $navbar-height + $gap 0 $gap |
|
&.nocover |
|
margin-top: $navbar-height - $gap |
|
|
|
.s-top |
|
trans(0.6s) |
|
z-index: 9 |
|
position: fixed |
|
width: 48px |
|
height: 48px |
|
line-height: 48px |
|
border-radius: 100% |
|
bottom: $gap*2 |
|
right: $gap*2 |
|
transform: translateY(100px) scale(0) |
|
transform-origin: bottom |
|
color: $color-text |
|
@media screen and (max-width: $device-tablet) |
|
right: $gap |
|
&.show |
|
transform: translateY(0) scale(1) |
|
&.hl |
|
background: $color-theme |
|
color: $color-inner |
|
box-shadow: $boxshadow-card |
|
@media screen and (min-width: $device-tablet) |
|
&:hover |
|
transform: scale(1.2) |
|
border-radius: 25% |
|
background: $color-theme |
|
color: white |
|
box-shadow: $boxshadow-card-float |
|
&.hl |
|
box-shadow: $boxshadow-card-float |
|
|
|
.l_main |
|
width: "calc(100% - 1 * %s)" % $sidebar |
|
@media screen and (max-width: $device-tablet) |
|
width: 100% |
|
padding-right: $gap |
|
&.no_sidebar |
|
width: 100% |
|
padding-right: 0 |
|
max-width: $layout-width - $sidebar |
|
@media screen and (min-width: $device-2k) |
|
max-width: "calc(55vw - %s)" % $sidebar |
|
margin: auto |
|
~.l_side |
|
display: none |
|
float: left |
|
.post-list |
|
position: relative |
|
margin: $gap auto |
|
column-gap: $gap |
|
// @media screen and (max-width: $device-mobile) |
|
// margin: 0 |
|
|
|
&.multiple-columns |
|
columns: 320px // 支持多列 |
|
|
|
|
|
.post-wrapper |
|
column-break-inside: avoid |
|
break-inside: avoid-column |
|
|
|
mobile-post() |
|
.post |
|
.meta |
|
margin-bottom: $gap |
|
.title |
|
font-size: $fontsize-h3 |
|
@media screen and (max-width: $device-mobile) |
|
padding: 1.5 * $gap $gap |
|
|
|
.post-wrapper |
|
margin-bottom: $gap |
|
.post |
|
.meta |
|
margin-bottom: $gap |
|
.title |
|
font-size: $fontsize-h2 |
|
a |
|
font-size: $fontsize-h2 |
|
@media screen and (max-width: $device-mobile) |
|
mobile-post() |
|
|
|
.widget |
|
.content |
|
p,ul,ol,table,.tabs,details |
|
margin-top: $gap-p |
|
margin-bottom: $gap-p |
|
.post |
|
padding-top: 0 |
|
padding-bottom: 0 |
|
margin-top: $gap-p |
|
margin-bottom: $gap-p |
|
&.grid .content .grid.fixed a |
|
width: "calc(100%/8 - 0 * %s)" % $gap |
|
@media screen and (max-width: $device-laptop) |
|
width: "calc(100%/7 - 0 * %s)" % $gap |
|
@media screen and (max-width: $device-tablet) |
|
width: "calc(100%/6 - 0 * %s)" % $gap |
|
@media screen and (max-width: $device-mobile) |
|
width: "calc(100%/5 - 0 * %s)" % $gap |
|
@media screen and (max-width: $device-mobile-l) |
|
width: "calc(100%/4 - 0 * %s)" % $gap |
|
@media screen and (max-width: $device-mobile-m) |
|
width: "calc(100%/3 - 0 * %s)" % $gap |
|
|
|
|
|
|
|
|
|
.post |
|
position: relative |
|
margin: $gap auto |
|
padding: 1.5 * $gap |
|
border-radius: $border-card |
|
@media screen and (max-width: $device-mobile-l) |
|
border-radius: 0 |
|
h1 |
|
font-weight: normal |
|
font-size: $fontsize-h1 |
|
.meta |
|
color: $color-meta |
|
&#header-meta |
|
margin-top: 0 |
|
margin-bottom: 1 * $gap |
|
&#footer-meta |
|
margin-top: 2 * $gap |
|
margin-bottom: 0.5 * $gap |
|
.aplayer,.thumbnail |
|
trans() |
|
width: 65px |
|
height: 65px |
|
border-radius: 100% |
|
float: right |
|
margin: 4px |
|
box-shadow: $boxshadow-card |
|
&:hover |
|
border-radius: 25% |
|
transform: scale(1.1) |
|
box-shadow: $boxshadow-card-float |
|
@media screen and (max-width: $device-mobile) |
|
&:hover |
|
border-radius: 100% |
|
transform: scale(1) |
|
box-shadow: $boxshadow-card |
|
.thumbnail |
|
width: auto |
|
border-radius: 4px |
|
box-shadow: none |
|
trans() |
|
&:hover |
|
border-radius: 4px |
|
transform: scale(1.1) rotate(4deg) |
|
box-shadow: none |
|
.title |
|
trans(.1s) |
|
margin: 0 |
|
a |
|
display: inline |
|
font-weight: normal |
|
color: $color-text |
|
&:hover |
|
color: $color-hover |
|
|
|
$cellH = 28px |
|
.new-meta-box |
|
$metaH = 24px |
|
trans(.1s) |
|
padding-top: 4px |
|
padding-bottom: 8px |
|
display: flex |
|
align-items: center |
|
flex-wrap: wrap |
|
&,p,i |
|
font-size: $fontsize-code |
|
.new-meta-item |
|
color: $color-meta |
|
line-height: 1.2 |
|
&.link-btns |
|
display: flex |
|
flex-wrap: wrap |
|
justify-content: flex-start |
|
.btn |
|
color: white |
|
padding: 1px 4px |
|
border-radius: 2px |
|
margin: 2px |
|
&,i,p |
|
line-height: 1.5 |
|
&:hover |
|
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1), 0 8px 16px 0 rgba(0, 0, 0, 0.1) |
|
i |
|
padding-left: 3px |
|
padding-top: 2px |
|
p |
|
color: white |
|
&:hover |
|
color: white |
|
p |
|
color: white |
|
.notlink |
|
cursor: default |
|
&:hover |
|
color: $color-meta |
|
p |
|
color: $color-meta |
|
display: flex |
|
align-items: center |
|
justify-content: center |
|
padding: 2px |
|
margin: 0 8px 0 0 |
|
border-radius: 4px |
|
&:last-child |
|
margin-right: 0 |
|
img,i |
|
display: inline |
|
i |
|
margin-right: 4px |
|
border-radius: 0 |
|
&.fa-hashtag |
|
margin-right: 2px |
|
p,a |
|
color: $color-meta |
|
padding-left: 0 |
|
padding-right: 4px |
|
a |
|
display: flex |
|
justify-content: center |
|
align-items: center |
|
img |
|
height: 1.2em |
|
width: 1.2em |
|
margin-right: 5px |
|
transform: translateY(-1px) |
|
p |
|
margin: 0 |
|
padding-top: 2px |
|
font-weight: normal |
|
trans() |
|
&:hover |
|
color: $color-hover |
|
p |
|
color: $color-hover |
|
|
|
.author |
|
img,i |
|
border-radius: 100% |
|
|
|
.share-body |
|
display: flex |
|
a |
|
padding: 0 |
|
margin-right: 4px |
|
img |
|
height: 1.8em |
|
width: auto |
|
background: transparent |
|
|
|
span>img |
|
display: inline-block |
|
|
|
a |
|
img |
|
display: inline |
|
|
|
|
|
|
|
@media screen and (max-width:$device-tablet) |
|
padding-right: 0 |
|
@media screen and (max-width: $device-mobile) |
|
width: 100% |
|
mobile-post() |
|
|
|
|
|
|
|
|
|
.body-wrapper |
|
position: relative |
|
display: flex |
|
width: 100% |
|
max-width: $layout-width |
|
@media screen and (min-width: $device-2k) |
|
max-width: 55vw |
|
margin: 0 auto |
|
flex-wrap: wrap |
|
justify-content: space-between |
|
align-items: stretch |
|
|
|
|
|
div.hoverbox |
|
display: flex |
|
flex-direction: column |
|
justify-content: center |
|
align-items: center |
|
>div.target |
|
display: none |
|
position: absolute |
|
background: $color-card |
|
border-radius: $border-card |
|
box-shadow: $boxshadow-card-float |
|
padding: 8px |
|
margin-left: -4px |
|
margin-top: 0 - 4px - 64px - 40px |
|
>img |
|
margin: 0 |
|
padding: 0 |
|
height: 128px |
|
width: 128px |
|
&:hover |
|
>div.target |
|
display: flex |
|
|
|
.comments |
|
.article |
|
p[ct] |
|
margin-top: 0 |
|
margin-bottom: $gap-p |
|
font-size: $fontsize-h4 |
|
color: $color-text |
|
p[cst] |
|
margin-top: $gap-p |
|
margin-bottom: $gap-p |
|
font-size: $fontsize-meta |
|
|
|
|
|
.white-box |
|
background: $color-card
|
|
|