css
This commit is contained in:
parent
ac673cf967
commit
25b5dea806
|
@ -60,7 +60,7 @@ $fs-footnote = .75rem // the smallest (12px)
|
||||||
$sidebar = 280px
|
$sidebar = 280px
|
||||||
|
|
||||||
// max body width
|
// max body width
|
||||||
$layout-max-body-width = 720px
|
$layout-max-body-width = 680px
|
||||||
|
|
||||||
// gap
|
// gap
|
||||||
$gap = 16px // 必须是 px
|
$gap = 16px // 必须是 px
|
||||||
|
|
|
@ -36,6 +36,8 @@
|
||||||
.name
|
.name
|
||||||
padding-top: 0.5em
|
padding-top: 0.5em
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// style
|
// style
|
||||||
.friends-wrap.round .user-simple
|
.friends-wrap.round .user-simple
|
||||||
a
|
a
|
||||||
|
@ -43,6 +45,12 @@
|
||||||
trans1: background
|
trans1: background
|
||||||
img
|
img
|
||||||
border-radius: 64px
|
border-radius: 64px
|
||||||
|
margin-top: 0.5rem
|
||||||
|
margin-bottom: 2rem
|
||||||
|
.name
|
||||||
|
position: absolute
|
||||||
|
height: 2rem
|
||||||
|
bottom: 0
|
||||||
&:hover
|
&:hover
|
||||||
background: var(--hover-block)
|
background: var(--hover-block)
|
||||||
|
|
||||||
|
@ -56,6 +64,10 @@
|
||||||
height: 96px
|
height: 96px
|
||||||
border-radius: 0
|
border-radius: 0
|
||||||
.name
|
.name
|
||||||
padding: 0.5em
|
padding: 0 0.5em
|
||||||
|
height: 2rem
|
||||||
|
display: flex
|
||||||
|
justify-content: center
|
||||||
|
align-items: center
|
||||||
&:hover
|
&:hover
|
||||||
box-shadow: $boxshadow-card-float
|
box-shadow: $boxshadow-card-float
|
||||||
|
|
|
@ -21,10 +21,15 @@ div.related-posts-wrap
|
||||||
display: flex
|
display: flex
|
||||||
flex-direction: column
|
flex-direction: column
|
||||||
overflow: hidden
|
overflow: hidden
|
||||||
width: 360px
|
min-width: 280px
|
||||||
|
width: 40vw
|
||||||
|
max-width: 460px
|
||||||
border: 1px solid var(--hover-block)
|
border: 1px solid var(--hover-block)
|
||||||
.img
|
.img
|
||||||
height: 180px
|
min-width: 100%
|
||||||
|
min-height: 140px
|
||||||
|
height: "calc(%s * 0.5)" % @width
|
||||||
|
max-height: 230px
|
||||||
overflow: hidden
|
overflow: hidden
|
||||||
img
|
img
|
||||||
width: 100%
|
width: 100%
|
||||||
|
@ -33,11 +38,9 @@ div.related-posts-wrap
|
||||||
&:not(.lazyload)
|
&:not(.lazyload)
|
||||||
trans1: transform 1s
|
trans1: transform 1s
|
||||||
@media screen and (max-width: $device-tablet)
|
@media screen and (max-width: $device-tablet)
|
||||||
width: 300px
|
width: 70vw
|
||||||
.img
|
.img
|
||||||
height: 150px
|
height: "calc(%s * 0.5)" % @width
|
||||||
@media screen and (max-width: $device-mobile)
|
|
||||||
width: 300px
|
|
||||||
.title
|
.title
|
||||||
color: var(--text-p1)
|
color: var(--text-p1)
|
||||||
font-weight: 500
|
font-weight: 500
|
||||||
|
|
|
@ -14,9 +14,9 @@
|
||||||
color: var(--text-p1)
|
color: var(--text-p1)
|
||||||
.img
|
.img
|
||||||
width: 100%
|
width: 100%
|
||||||
height 120px
|
|
||||||
@media screen and (max-width: $device-mobile)
|
|
||||||
height 100px
|
height 100px
|
||||||
|
@media screen and (max-width: $device-mobile)
|
||||||
|
height 80px
|
||||||
overflow: hidden
|
overflow: hidden
|
||||||
border-radius: $border-card * 0.5
|
border-radius: $border-card * 0.5
|
||||||
box-shadow: 0 1px 2px 0px rgba(0, 0, 0, 0.2)
|
box-shadow: 0 1px 2px 0px rgba(0, 0, 0, 0.2)
|
||||||
|
|
Loading…
Reference in New Issue