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.
372 lines
8.8 KiB
372 lines
8.8 KiB
.l_body |
|
position: relative |
|
margin: $gap |
|
if hexo-config('style.font_smoothing') == true |
|
-webkit-font-smoothing: antialiased |
|
-moz-osx-font-smoothing: grayscale |
|
&.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 |
|
div.meta |
|
.title |
|
font-size: $fontsize-h3 |
|
@media screen and (max-width: $device-mobile) |
|
padding: 1.5 * $gap $gap |
|
|
|
.post-wrapper |
|
margin-bottom: $gap |
|
.post |
|
div.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-row |
|
margin-bottom: $gap-row |
|
.post |
|
padding-top: 0 |
|
padding-bottom: 0 |
|
margin-top: $gap-row |
|
margin-bottom: $gap-row |
|
&.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 |
|
section.meta |
|
color: $color-meta |
|
margin-bottom: $gap |
|
line-height: normal |
|
&#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 |
|
color: $color-text |
|
p |
|
&.h1,&.h2 |
|
margin-top: $gap-paragraph + $gap-row |
|
border-bottom: none |
|
&.h1 |
|
font-size: $fontsize-h1 * 1.1 |
|
&.h2 |
|
font-size: $fontsize-h2 * 1.1 |
|
a |
|
display: inline |
|
font-weight: normal |
|
color: $color-text |
|
&:hover |
|
color: $color-hover |
|
|
|
.new-meta-box |
|
trans(.1s) |
|
padding-top: 4px |
|
padding-bottom: 8px |
|
display: flex |
|
align-items: center |
|
flex-wrap: wrap |
|
-webkit-font-smoothing: auto |
|
-moz-osx-font-smoothing: auto |
|
&,p,i |
|
font-size: $fontsize-code |
|
.new-meta-item |
|
color: $color-meta |
|
&.link-btns |
|
display: flex |
|
flex-wrap: wrap |
|
justify-content: flex-start |
|
.btn |
|
color: white |
|
padding: 1px 4px |
|
border-radius: 2px |
|
margin: 2px |
|
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 |
|
p |
|
color: white |
|
padding-top: 3px |
|
padding-right: 2px |
|
&:hover |
|
color: white |
|
p |
|
color: white |
|
.notlink |
|
cursor: default |
|
&:hover |
|
color: $color-meta |
|
p |
|
color: $color-meta |
|
display: flex |
|
align-items: baseline |
|
justify-content: center |
|
margin: 0 $gap 0 0 |
|
&: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: 3px 0 |
|
a |
|
display: flex |
|
justify-content: center |
|
align-items: center |
|
img |
|
height: 16px |
|
width: 16px |
|
margin-right: 5px |
|
p |
|
margin: 0 |
|
font-weight: normal |
|
trans() |
|
&:hover |
|
color: $color-hover |
|
p |
|
color: $color-hover |
|
|
|
.author |
|
img,i |
|
border-radius: 100% |
|
img |
|
transform: translateY(-0.5px) |
|
|
|
@media screen and (max-width: $device-mobile) |
|
.share |
|
width: 100% |
|
margin-top: $gap |
|
background: $color-codeblock |
|
|
|
.share-body |
|
position: relative |
|
display: flex |
|
justify-content: center; |
|
margin: 0 |
|
padding: 0 2px |
|
border-radius: 2px |
|
a |
|
padding: 0 |
|
margin: 0 1px |
|
img |
|
margin: 2px |
|
height: 24px |
|
@media screen and (max-width: $device-mobile) |
|
height: 32px |
|
margin: 8px |
|
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 |
|
left: 50% |
|
top: -20px |
|
// margin-left: 50% |
|
transform: translate(-50%, -100%) |
|
// margin-left: -4px |
|
// margin-top: 0 - 4px - 64px - 40px |
|
>img |
|
margin: 0 |
|
padding: 0 |
|
height: 128px |
|
width: 128px |
|
min-width: 128px |
|
&:hover |
|
>div.target |
|
display: flex |
|
@media screen and (max-width: $device-mobile) |
|
>div.target |
|
position: absolute |
|
|
|
.comments |
|
.article |
|
p[ct] |
|
margin-top: 0 |
|
margin-bottom: $gap-row |
|
font-size: $fontsize-h4 |
|
color: $color-text |
|
p[cst] |
|
margin-top: $gap-row |
|
margin-bottom: $gap-row |
|
font-size: $fontsize-meta |
|
|
|
|
|
.white-box |
|
background: $color-card |
|
|
|
if hexo-config('plugins.scrollreveal.js') |
|
.reveal |
|
visibility: hidden
|
|
|