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 |