diff options
Diffstat (limited to 'assets/css/components/_page.scss')
-rw-r--r-- | assets/css/components/_page.scss | 80 |
1 files changed, 80 insertions, 0 deletions
diff --git a/assets/css/components/_page.scss b/assets/css/components/_page.scss new file mode 100644 index 0000000..21969d7 --- /dev/null +++ b/assets/css/components/_page.scss | |||
@@ -0,0 +1,80 @@ | |||
1 | .c-page { | ||
2 | &__content { | ||
3 | padding-left: $page--item-prefix--width; | ||
4 | |||
5 | > :first-child { | ||
6 | margin-top: 0; | ||
7 | } | ||
8 | } | ||
9 | |||
10 | &__prefixed { | ||
11 | position: relative; | ||
12 | margin-left: -1 * $page--item-prefix--width; | ||
13 | padding-left: $page--item-prefix--width; | ||
14 | |||
15 | &::before { | ||
16 | display: inline-block; | ||
17 | position: absolute; | ||
18 | box-sizing: border-box; | ||
19 | width: $page--item-prefix--width; | ||
20 | margin-left: -1 * $page--item-prefix--width; | ||
21 | padding-right: $page--item-prefix--pad; | ||
22 | color: var(--page--item-prefix--fg); | ||
23 | font-weight: normal; | ||
24 | text-align: right; | ||
25 | } | ||
26 | |||
27 | &--h1 { | ||
28 | font-size: px-to-em($content--h1--font-size); | ||
29 | |||
30 | &::before { | ||
31 | content: '#'; | ||
32 | font-size: px-to-em($font-size, $content--h1--font-size); | ||
33 | } | ||
34 | } | ||
35 | |||
36 | &--h2::before { | ||
37 | content: '##'; | ||
38 | } | ||
39 | |||
40 | &--h3::before { | ||
41 | content: '###'; | ||
42 | } | ||
43 | |||
44 | &--pre { | ||
45 | $scale-factor: $font-size / $code-block--font-size; | ||
46 | |||
47 | margin-top: $line-height * 1em; | ||
48 | // margin-left: calc(#{-1 * $page--item-prefix--width} * #{$scale-factor}); | ||
49 | // padding-left: calc(#{$page--item-prefix--width} * #{$scale-factor}); | ||
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 | |||
66 | @media (max-width: map-get($breakpoints, 'sm')) { | ||
67 | &__content { | ||
68 | padding-left: 0; | ||
69 | } | ||
70 | |||
71 | &__prefixed { | ||
72 | margin-left: 0; | ||
73 | padding-left: 0; | ||
74 | |||
75 | &::before { | ||
76 | display: none; | ||
77 | } | ||
78 | } | ||
79 | } | ||
80 | } | ||