diff options
Diffstat (limited to 'assets/css/components/_page.scss')
-rw-r--r-- | assets/css/components/_page.scss | 134 |
1 files changed, 2 insertions, 132 deletions
diff --git a/assets/css/components/_page.scss b/assets/css/components/_page.scss index 9d1e991..ef39061 100644 --- a/assets/css/components/_page.scss +++ b/assets/css/components/_page.scss | |||
@@ -1,133 +1,3 @@ | |||
1 | .c-page { | 1 | @include component('page') { |
2 | &__prefixed { | 2 | // |
3 | position: relative; | ||
4 | margin-left: -1 * $page--item-prefix--width; | ||
5 | padding-left: $page--item-prefix--width; | ||
6 | |||
7 | &::before { | ||
8 | display: inline-block; | ||
9 | position: absolute; | ||
10 | box-sizing: border-box; | ||
11 | width: $page--item-prefix--width; | ||
12 | margin-left: -1 * $page--item-prefix--width; | ||
13 | padding-right: $page--item-prefix--pad; | ||
14 | color: var(--page--item-prefix--fg); | ||
15 | font-family: $font-fam--mono; | ||
16 | font-weight: normal; | ||
17 | text-align: right; | ||
18 | } | ||
19 | |||
20 | $h1-unscale-factor: px-to-em($font-size, $content--h1--font-size); | ||
21 | |||
22 | &--h1 { | ||
23 | margin-top: $line-height * $h1-unscale-factor; | ||
24 | font-size: px-to-em($content--h1--font-size); | ||
25 | |||
26 | &::before { | ||
27 | content: '#'; | ||
28 | font-size: $h1-unscale-factor; | ||
29 | } | ||
30 | } | ||
31 | |||
32 | &--h2::before { | ||
33 | content: '##'; | ||
34 | } | ||
35 | |||
36 | &--h3::before { | ||
37 | content: '###'; | ||
38 | } | ||
39 | |||
40 | &--pre { | ||
41 | $scale-factor: $font-size / $code-block--font-size; | ||
42 | |||
43 | margin-left: calc(#{-1 * $page--item-prefix--width} * #{$scale-factor}); | ||
44 | padding-left: calc(#{$page--item-prefix--width} * #{$scale-factor}); | ||
45 | border-left: 0; | ||
46 | color: var(--code-block--fg); | ||
47 | font-size: $code-block--font-size; | ||
48 | line-height: $code-block--line-height; | ||
49 | text-overflow: ''; | ||
50 | |||
51 | &::before { | ||
52 | content: str-repeat('``\A', 40); | ||
53 | height: 100%; | ||
54 | overflow: hidden; | ||
55 | color: var(--page--item-prefix--fg); | ||
56 | font-size: px-to-em($font-size, $code-block--font-size); | ||
57 | line-height: $code-block--line-height / $scale-factor; | ||
58 | } | ||
59 | } | ||
60 | |||
61 | &--ref::before { | ||
62 | content: '|>'; | ||
63 | } | ||
64 | |||
65 | &--backref::before { | ||
66 | content: '<|'; | ||
67 | } | ||
68 | } | ||
69 | |||
70 | &__header { | ||
71 | margin-bottom: $line-height * 1em; | ||
72 | |||
73 | &__title { | ||
74 | margin-top: 0; | ||
75 | } | ||
76 | |||
77 | &__backlink__link { | ||
78 | &:link, | ||
79 | &:visited { | ||
80 | color: var(--fg-hi); | ||
81 | |||
82 | &:hover { | ||
83 | color: var(--link--hover--fg); | ||
84 | } | ||
85 | } | ||
86 | } | ||
87 | |||
88 | &__backlink + &__title { | ||
89 | margin-top: $line-height * 1em; | ||
90 | } | ||
91 | |||
92 | &__meta { | ||
93 | margin-top: 0; | ||
94 | color: var(--fg-hi); | ||
95 | font-weight: normal; | ||
96 | } | ||
97 | } | ||
98 | |||
99 | &__content { | ||
100 | padding-left: $page--item-prefix--width; | ||
101 | |||
102 | > :first-child { | ||
103 | margin-top: 0; | ||
104 | } | ||
105 | } | ||
106 | |||
107 | @media (max-width: map-get($breakpoints, 'sm')) { | ||
108 | &__prefixed { | ||
109 | margin-left: 0; | ||
110 | padding-left: $page--item-prefix--width--sm; | ||
111 | |||
112 | &::before { | ||
113 | width: $page--item-prefix--width--sm; | ||
114 | margin-left: -1 * $page--item-prefix--width--sm; | ||
115 | } | ||
116 | |||
117 | &--h1, | ||
118 | &--h2, | ||
119 | &--h3, | ||
120 | &--pre { | ||
121 | padding-left: 0; | ||
122 | |||
123 | &::before { | ||
124 | display: none; | ||
125 | } | ||
126 | } | ||
127 | } | ||
128 | |||
129 | &__content { | ||
130 | padding-left: 0; | ||
131 | } | ||
132 | } | ||
133 | } | 3 | } |