vuepress-theme-justskiv
Version:
A flat and clean Blog Theme for VuePress site
89 lines (88 loc) • 2.05 kB
text/stylus
@media (max-width: $MQNarrow)
.theme-main
margin-left 0
.theme-sidebar
z-index 0
opacity 0
@media (min-width: $MQMobile)
.theme-main__inner
margin 2rem auto
max-width 900px
min-width 880px
.theme-search__inner
max-width: var(--theme-content-width);
@media (max-width: $MQMobile)
.theme-main
transform-origin: 0 42%;
transition-property transform border-radius
transition-duration .4s
&__inner
margin 0 auto
.theme-sidebar
border-right none
transition-property opacity
transition-duration .4s
.theme-container
transition-delay .2s
transition-property background
transition-duration .4s
&.sidebar-open
background var(--theme-sidebar-background)
.theme-sidebar
opacity 1
.theme-main
border-radius: .85rem;
transform: translate3d(302px, 0px, 0px) scale3d(0.86, 0.86, 1);
&__inner
height 100vh
overflow hidden
&:before
position: absolute;
border-radius: .85rem;
top: 1.6rem;
bottom: 1.6rem;
left: -1.6rem;
z-index: -1;
width: 100%;
background-color: hsla(0,0%,100%,.2);
content: "";
.article-item
margin 1rem!important
.theme-sidebar__inner
padding-bottom 0
height 100vh
.theme-header
background: none
&__name, &__slogan
color: #ffffff
.theme-SubNav
background: none
.theme-footer
color #ffffff
position static
text-align center
padding: 1rem 1rem .75rem;
a:link, a:visited
color #ffffff
.theme-nav
.search-box
padding-left: 3rem;
padding-right 3rem
text-align: left;
input
width 100%
left 0
.nav-links .nav-item
padding-left: 3rem;
text-align: left;
a:link, a:visited
color #ffffff
a:after
content: none
.theme-search
&__inner
margin-top 0
border-radius 0
.search-box
.suggestions
border-radius 0