diff options
Diffstat (limited to 'assets/css/scopes')
-rw-r--r-- | assets/css/scopes/_page.scss | 166 |
1 files changed, 83 insertions, 83 deletions
diff --git a/assets/css/scopes/_page.scss b/assets/css/scopes/_page.scss index 7c9e2d4..a27c1a2 100644 --- a/assets/css/scopes/_page.scss +++ b/assets/css/scopes/_page.scss | |||
@@ -1,106 +1,106 @@ | |||
1 | .s-page { | 1 | .s-page { |
2 | &__content { | 2 | &__content { |
3 | padding-left: $page--item-prefix--width; | 3 | padding-left: $page--item-prefix--width; |
4 | 4 | ||
5 | > :first-child { | 5 | > :first-child { |
6 | margin-top: 0; | 6 | margin-top: 0; |
7 | } | ||
7 | } | 8 | } |
8 | } | 9 | |
9 | 10 | h1, | |
10 | h1, | 11 | h2, |
11 | h2, | 12 | h3, |
12 | h3, | 13 | .c-refs__item, |
13 | .c-refs__item, | 14 | pre { |
14 | pre { | 15 | position: relative; |
15 | position: relative; | 16 | margin-left: -1 * $page--item-prefix--width; |
16 | margin-left: -1 * $page--item-prefix--width; | 17 | padding-left: $page--item-prefix--width; |
17 | padding-left: $page--item-prefix--width; | 18 | |
18 | 19 | &::before { | |
19 | &::before { | 20 | display: inline-block; |
20 | position: absolute; | 21 | position: absolute; |
21 | box-sizing: border-box; | 22 | box-sizing: border-box; |
22 | display: inline-block; | 23 | width: $page--item-prefix--width; |
23 | margin-left: -1 * $page--item-prefix--width; | 24 | margin-left: -1 * $page--item-prefix--width; |
24 | padding-right: $page--item-prefix--pad; | 25 | padding-right: $page--item-prefix--pad; |
25 | width: $page--item-prefix--width; | 26 | color: var(--page--item-prefix--fg); |
26 | color: var(--page--item-prefix--fg); | 27 | font-weight: normal; |
27 | font-weight: normal; | 28 | text-align: right; |
28 | text-align: right; | 29 | } |
29 | } | 30 | } |
30 | } | ||
31 | 31 | ||
32 | h1 { | 32 | h1 { |
33 | font-size: px-to-em($content--h1--font-size); | 33 | font-size: px-to-em($content--h1--font-size); |
34 | 34 | ||
35 | &::before { | 35 | &::before { |
36 | content: "#"; | 36 | content: '#'; |
37 | font-size: px-to-em($font-size, $content--h1--font-size); | 37 | font-size: px-to-em($font-size, $content--h1--font-size); |
38 | } | ||
38 | } | 39 | } |
39 | } | ||
40 | |||
41 | h2::before { | ||
42 | content: "##"; | ||
43 | } | ||
44 | |||
45 | h3::before { | ||
46 | content: "###"; | ||
47 | } | ||
48 | |||
49 | .c-refs__item::before { | ||
50 | content: "|>"; | ||
51 | } | ||
52 | |||
53 | pre { | ||
54 | &::before { | ||
55 | content: str-repeat("``\A", 40); | ||
56 | height: 100%; | ||
57 | color: var(--page--item-prefix--fg); | ||
58 | overflow: hidden; | ||
59 | } | ||
60 | } | ||
61 | |||
62 | hr { | ||
63 | margin-left: -1 * $page--item-prefix--width; | ||
64 | } | ||
65 | 40 | ||
66 | .c-page-header { | 41 | h2::before { |
67 | margin-left: -1 * $page--item-prefix--width; | 42 | content: '##'; |
68 | padding-left: $page--item-prefix--width; | 43 | } |
69 | 44 | ||
70 | &::after { | 45 | h3::before { |
71 | margin-left: -1 * $page--item-prefix--width; | 46 | content: '###'; |
72 | } | 47 | } |
73 | } | ||
74 | 48 | ||
75 | @media (max-width: map-get($breakpoints, "sm")) { | 49 | .c-refs__item::before { |
76 | &__content { | 50 | content: '|>'; |
77 | padding-left: 0; | ||
78 | } | 51 | } |
79 | 52 | ||
80 | h1, | ||
81 | h2, | ||
82 | h3, | ||
83 | .c-refs__item, | ||
84 | pre { | 53 | pre { |
85 | margin-left: 0; | 54 | &::before { |
86 | padding-left: 0; | 55 | content: str-repeat('``\A', 40); |
87 | 56 | height: 100%; | |
88 | &::before { | 57 | overflow: hidden; |
89 | display: none; | 58 | color: var(--page--item-prefix--fg); |
90 | } | 59 | } |
91 | } | 60 | } |
92 | 61 | ||
93 | hr { | 62 | hr { |
94 | margin-left: 0; | 63 | margin-left: -1 * $page--item-prefix--width; |
95 | } | 64 | } |
96 | 65 | ||
97 | .c-page-header { | 66 | .c-page-header { |
98 | margin-left: 0; | 67 | margin-left: -1 * $page--item-prefix--width; |
99 | padding-left: 0; | 68 | padding-left: $page--item-prefix--width; |
69 | |||
70 | &::after { | ||
71 | margin-left: -1 * $page--item-prefix--width; | ||
72 | } | ||
73 | } | ||
100 | 74 | ||
101 | &::after { | 75 | @media (max-width: map-get($breakpoints, 'sm')) { |
102 | margin-left: 0; | 76 | &__content { |
103 | } | 77 | padding-left: 0; |
78 | } | ||
79 | |||
80 | h1, | ||
81 | h2, | ||
82 | h3, | ||
83 | .c-refs__item, | ||
84 | pre { | ||
85 | margin-left: 0; | ||
86 | padding-left: 0; | ||
87 | |||
88 | &::before { | ||
89 | display: none; | ||
90 | } | ||
91 | } | ||
92 | |||
93 | hr { | ||
94 | margin-left: 0; | ||
95 | } | ||
96 | |||
97 | .c-page-header { | ||
98 | margin-left: 0; | ||
99 | padding-left: 0; | ||
100 | |||
101 | &::after { | ||
102 | margin-left: 0; | ||
103 | } | ||
104 | } | ||
104 | } | 105 | } |
105 | } | ||
106 | } | 106 | } |