hexo-theme-stellar/source/css/_layout/sidebar/ghuser.styl

80 lines
1.7 KiB
Stylus

.widget-wrap#github-user
.widget-header+.widget-body
margin: 0.75rem 0
.widget-wrap#github-user .widget-body
text-align: center
background: var(--card)
border-radius: $border-card
padding: 1rem
.widget-wrap#github-user .widget-body .avatar
display: block
border-radius: 100%
margin: 1rem auto 1.25rem auto
max-width: 75%
overflow: hidden
img
display: block
@media screen and (max-width: $device-tablet)
max-width: 50%
.widget-wrap#github-user .widget-body .username
font-weight: 900
font-size: $fs-h2
color: var(--text-p0)
margin: 0.5rem 0
.widget-wrap#github-user .widget-body .bio
font-size: $fs-13
margin: 0.5rem 0
.widget-wrap#github-user .widget-body .follow
font-weight: 500
border-radius: 64px
padding: 0.5rem 1rem
background: $color-theme
color: var(--card)
font-size: 1rem
align-self: stretch
text-align: center
line-height: 1.5
display: flex
align-items: center
justify-content: center
trans1: background
svg
margin-right: 6px
&:hover
background: $color-hover
.widget-wrap#github-user .widget-body .buttons
margin: 1rem 0
align-self: stretch
display: grid
grid-gap: 2px
grid-template-columns: repeat(auto-fill, "calc((100% - 2 * %s) / 3)" % 2px)
.widget-wrap#github-user .widget-body .btn
display: flex
flex-direction: column
align-items: center
color: inherit
border: 1px solid transparent
border-radius: 4px
padding: 0.25rem 0
trans1: background
&:hover
background: var(--block)
.widget-wrap#github-user .widget-body .buttons .btn .title
font-size: 1rem
font-weight: 700
.widget-wrap#github-user .widget-body .buttons .btn .desc
font-size: $fs-12
color: var(--text-p3)
font-weight: 500