hexo-theme-keep/source/css/layout/page.styl

199 lines
3.7 KiB
Stylus

$temp-width = hexo-config('style.left_side_width')
$page-aside-width = $temp-width ? convert($temp-width) : 260px
.page-container {
position relative
box-sizing border-box
width 100%
height auto
background var(--background-color)
transition-t("padding-left", "0", "0.3", "ease-out")
+keep-tablet() {
padding-left 0 !important
}
.page-main-content {
position relative
padding-top $header-height
&.home {
.transparent-1 {
background var(--header-transparent-background-1)
}
.transparent-2 {
background var(--header-transparent-background-2)
}
}
.header-shrink & {
padding-top $header-shrink-height
+keep-tablet() {
padding-top $header-shrink-height * 0.9
}
+keep-mobile() {
padding-top $header-shrink-height * 0.8
}
}
+keep-tablet() {
padding-top $header-height * 0.9
}
+keep-mobile() {
padding-top $header-height * 0.8
}
.page-main-content-top {
position fixed
top 0
right 0
z-index $z-index-5
box-sizing border-box
width 100%
height $header-height
transition-t("transform, padding-left, height", "0, 0, 0", "0.3, 0.2, 0.2", "ease-out, linear, ease")
&.hide {
transform translateY(-105%)
}
.header-shrink & {
height $header-shrink-height
+keep-tablet() {
height $header-shrink-height * 0.9
}
+keep-mobile() {
height $header-shrink-height * 0.8
}
}
+keep-tablet() {
height $header-height * 0.9
padding-left 0 !important
}
+keep-mobile() {
height $header-height * 0.8
}
}
.page-main-content-middle {
display flex
justify-content center
box-sizing border-box
width 100%
padding $component-spacing-value 0
+keep-tablet() {
padding $component-spacing-value * 0.8 0
}
+keep-mobile() {
padding $component-spacing-value * 0.6 0
}
.main-content {
position relative
box-sizing border-box
width $main-content-width
max-width $content-max-width
height 100%
+keep-tablet() {
width $main-content-width-tablet
}
+keep-mobile() {
width $main-content-width-mobile
}
}
}
.page-main-content-bottom {
width 100%
}
}
.page-aside {
position fixed
top 0
bottom 0
left - $page-aside-width
z-index $z-index-6
box-sizing border-box
width $page-aside-width
height 100%
padding 20px
overflow-y auto
background var(--background-color)
hover-style(false, 0, 0)
transition-t("left, transform", "0, 0", "0.3, 0.2", "ease-out, linear")
+keep-tablet() {
left 0 !important
display none !important
}
}
.post-tools {
position fixed
top $header-height + $component-spacing-value
right $component-spacing-value
transition-t("top", "0", "0.2", "ease")
.header-shrink & {
top $header-shrink-height + $component-spacing-value
+keep-tablet() {
top $header-shrink-height * 0.9 + $component-spacing-value
}
+keep-mobile() {
top $header-shrink-height * 0.8 + $component-spacing-value
}
}
+keep-tablet() {
top $header-height * 0.9 + $component-spacing-value
right 10px
transform scale(0.82)
transform-origin right top
}
+keep-mobile() {
top $header-height * 0.8 + $component-spacing-value
right 5px
transform scale(0.72)
}
}
.right-bottom-side-tools {
position fixed
right 0
bottom 5%
}
}