mirror of
https://github.com/interstellar750/hexo_s
synced 2024-10-19 00:23:51 +08:00
172 lines
4.0 KiB
Stylus
172 lines
4.0 KiB
Stylus
|
/* mobile phone and smart portable devices */
|
|||
|
@media screen and (max-width: 479px)
|
|||
|
.main
|
|||
|
padding-top 40pt
|
|||
|
.navbar
|
|||
|
display: none
|
|||
|
|
|||
|
|
|||
|
.navbar-mobile
|
|||
|
display: block !important
|
|||
|
position: fixed
|
|||
|
width: 100%
|
|||
|
z-index: 100
|
|||
|
transition: all 0.6s ease 0s
|
|||
|
.container
|
|||
|
padding: 0
|
|||
|
margin: 0
|
|||
|
//height: 5em
|
|||
|
line-height: 5.5em
|
|||
|
background: $light-background-color
|
|||
|
|
|||
|
.navbar-header
|
|||
|
display: flex
|
|||
|
justify-content: space-between
|
|||
|
align-items: center
|
|||
|
width: 100%
|
|||
|
padding-right: 1em
|
|||
|
padding-left: 1em
|
|||
|
box-sizing: border-box
|
|||
|
position relative
|
|||
|
|
|||
|
|
|||
|
.menu-toggle
|
|||
|
cursor: pointer
|
|||
|
line-height: 5.5em
|
|||
|
padding auto 2em
|
|||
|
|
|||
|
span
|
|||
|
display: block
|
|||
|
background: #000
|
|||
|
width: 36px
|
|||
|
height: 2px
|
|||
|
-webkit-border-radius: 3px
|
|||
|
-moz-border-radius: 3px
|
|||
|
border-radius: 3px
|
|||
|
-webkit-transition: .25s margin .25s, .25s transform
|
|||
|
-moz-transition: .25s margin .25s, .25s transform
|
|||
|
transition: .25s margin .25s, .25s transform
|
|||
|
|
|||
|
.dark-theme &
|
|||
|
background: $dark-font-color
|
|||
|
|
|||
|
|
|||
|
|
|||
|
span:nth-child(1)
|
|||
|
margin-bottom: 8px
|
|||
|
|
|||
|
span:nth-child(3)
|
|||
|
margin-top: 8px
|
|||
|
|
|||
|
|
|||
|
&.active
|
|||
|
span
|
|||
|
-webkit-transition: .25s margin, .25s transform .25s
|
|||
|
-moz-transition: .25s margin, .25s transform .25s
|
|||
|
transition: .25s margin, .25s transform .25s
|
|||
|
|
|||
|
span:nth-child(1)
|
|||
|
-moz-transform: rotate(45deg) translate(4px, 6px)
|
|||
|
-ms-transform: rotate(45deg) translate(4px, 6px)
|
|||
|
-webkit-transform: rotate(45deg) translate(4px, 6px)
|
|||
|
transform: rotate(45deg) translate(4px, 6px)
|
|||
|
|
|||
|
|
|||
|
span:nth-child(2)
|
|||
|
opacity: 0
|
|||
|
|
|||
|
|
|||
|
span:nth-child(3)
|
|||
|
-moz-transform: rotate(-45deg) translate(8px, -10px)
|
|||
|
-ms-transform: rotate(-45deg) translate(8px, -10px)
|
|||
|
-webkit-transform: rotate(-45deg) translate(8px, -10px)
|
|||
|
transform: rotate(-45deg) translate(8px, -10px)
|
|||
|
|
|||
|
|
|||
|
|
|||
|
|
|||
|
|
|||
|
.menu
|
|||
|
text-align: center
|
|||
|
background: #ffffff
|
|||
|
border-top: 1px solid #000000
|
|||
|
padding-top: 1em
|
|||
|
padding-bottom: 1em
|
|||
|
display: none
|
|||
|
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1), 0px 4px 8px rgba(0, 0, 0, 0.1)
|
|||
|
a
|
|||
|
//display: block
|
|||
|
//changed
|
|||
|
display inline-block
|
|||
|
margin 0 1em
|
|||
|
|
|||
|
line-height: 2.5em
|
|||
|
|
|||
|
|
|||
|
&.active
|
|||
|
display: block
|
|||
|
//changed
|
|||
|
white-space nowrap
|
|||
|
box-sizing border-box
|
|||
|
overflow-x auto
|
|||
|
|
|||
|
.dark-theme &
|
|||
|
background: $dark-background-color
|
|||
|
border-top: 2px solid $dark-font-secondary-color
|
|||
|
|
|||
|
|
|||
|
.dark-theme &
|
|||
|
background: $dark-background-color !important
|
|||
|
|
|||
|
|
|||
|
|
|||
|
|
|||
|
.archive
|
|||
|
width 90%
|
|||
|
& .archive-item
|
|||
|
.archive-item-date
|
|||
|
display none
|
|||
|
|
|||
|
|
|||
|
#dynamic-to-top
|
|||
|
display: none !important
|
|||
|
|
|||
|
.footer
|
|||
|
height: 3rem
|
|||
|
width: 100%
|
|||
|
text-align: center
|
|||
|
line-height: 1.5rem
|
|||
|
padding-top: 2em
|
|||
|
|
|||
|
.post-warp
|
|||
|
padding-top: 6em
|
|||
|
.archive-item-date
|
|||
|
display: none
|
|||
|
|
|||
|
.categories
|
|||
|
.categories-card
|
|||
|
.card-item
|
|||
|
width 100%
|
|||
|
display: flex
|
|||
|
min-height 0
|
|||
|
.categories
|
|||
|
overflow: hidden
|
|||
|
|
|||
|
|
|||
|
/* iPads (portrait and landscape) ----------- */
|
|||
|
@media screen and (max-width: 1023px)
|
|||
|
.navbar-mobile
|
|||
|
display none
|
|||
|
|
|||
|
|
|||
|
/* Desktops and laptops ----------- */
|
|||
|
|
|||
|
@media screen and (min-width: 1024px)
|
|||
|
.navbar-mobile
|
|||
|
display none
|
|||
|
|
|||
|
|
|||
|
/* post toc Style */
|
|||
|
@media screen and (max-width: 1279px) // 最大宽度1279px时应用这条规则。(最大宽度小于1279px返回false,屏蔽规则。)
|
|||
|
.post-toc
|
|||
|
display none
|