/
css-variables.styl
76 lines (60 loc) · 3.21 KB
/
css-variables.styl
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
@import "stylus-variables.styl"
:root {
// ==============================================================================================
// global font
// ==============================================================================================
--base-font-size 15.2px
--base-line-height 22px
--base-font-weight 400
--base-font-family Optima-Regular, Optima, PingFang SC, Microsoft YaHei, sans-serif
// ==============================================================================================
// page
// ==============================================================================================
--page-content-width 80%
--page-content-width-tablet 88%
--page-content-width-mobile 90%
--page-content-max-width 960px
--page-content-max-width-2 calc(var(--page-content-max-width) * 1.2)
--component-gap 36px
// ==============================================================================================
// box style
// ==============================================================================================
--box-border-radius 8px
// ==============================================================================================
// header
// ==============================================================================================
--header-height 70px
--header-shrink-height calc(var(--header-height) * 0.72)
--header-backdrop-filter-blur 4px
--header-scroll-progress-bar-height 2px
--header-title-font-family var(--base-font-family)
--header-title-font-size 1.8rem
--header-menu-icon inline-block // Option values: inline-block | none
// ==============================================================================================
// first screen
// ==============================================================================================
--first-screen-display block // Option values: block | none
--first-screen-font-family var(--base-font-family)
--first-screen-font-size 2rem
--first-screen-font-color-light $text-color-3
--first-screen-font-color-dark $dark-text-color-3
--first-screen-font-offset 0
--first-screen-icon-size 1.8rem
--first-screen-icon-color-light $text-color-3
--first-screen-icon-color-dark $dark-text-color-3
--first-screen-header-font-color-light $text-color-3
--first-screen-header-font-color-dark $dark-text-color-3
// ==============================================================================================
// home page
// ==============================================================================================
--home-post-hover-scale 1
// ==============================================================================================
// post page
// ==============================================================================================
--post-title-align left // Option values: left | center | right
--post-author-avatar block // Option values: none | block
--post-author-name flex // Option values: none | flex
--post-create-datetime flex // Option values: none | flex
--post-update-datetime flex // Option values: none | flex
--post-img-align 0 auto 0 0 // Option values: 0 auto 0 0 (left) | 0 auto (center) | 0 0 0 auto (right)
}