1
- // This file supercedes main.scss with documentation-specific styling.
2
-
3
- @import " vars.scss" ;
4
-
5
- body {
6
- max-width : 100em ;
1
+ @font-face {
2
+ font-family : aktiv grotesk;
3
+ src : url (/ font / AktivGroteskRegular.ttf );
4
+ font-weight : 400 ;
7
5
}
8
-
9
- .sidebar {
10
- border-right : 2px solid lightgray ;
6
+ @font-face {
7
+ font-family : aktiv grotesk;
8
+ src : url (/ font / AktivGroteskMedium.ttf );
9
+ font-weight : 500 ;
11
10
}
12
-
13
- .container-fluid {
14
- width : 75% ;
11
+ @font-face {
12
+ font-family : aktiv grotesk;
13
+ src : url (/ font / AktivGroteskBold.ttf );
14
+ font-weight : 700 ;
15
15
}
16
-
17
- .content-box {
18
- padding-inline-start : 3em ;
16
+ body {
17
+ min-height : 100vh ;
18
+ display : flex ;
19
+ flex-direction : column ;
19
20
}
21
+ @media (max-width : 450px ) {
22
+ body {
23
+ width : 190vw ;
24
+ }
20
25
21
- // Hugo Table of Contents
22
- // ul {
23
- // list-style-type: none;
24
- // padding-inline-start: 0;
25
- // }
26
+ .docs .body > * {
27
+ margin-left : 20px !important ;
28
+ }
26
29
27
- nav > ul , nav > ul > li > ul {
28
- list-style-type : none ;
29
- padding-inline-start : 0 ;
30
+ .sidebar {
31
+ min-width : 90 vw !important ;
32
+ }
30
33
}
34
+ #content {
35
+ flex : 1 ;
36
+ display : flex ;
31
37
32
- #TableOfContents > li {
33
- padding-inline-start : 25px ;
38
+ .docs {
39
+ flex : 1 ;
40
+ }
34
41
}
35
-
36
- aside > dl > ul {
37
- list-style-type : none ;
38
- padding-inline-start : 0 ;
42
+ .docs {
43
+ display : flex ;
44
+ flex-direction : row ;
39
45
}
40
-
41
- .active {
42
- background-color : darken ($background-color , 20% );
46
+ .docs .sidebar {
47
+ position : relative ;
48
+ color : #03193f ;
49
+ min-width : 250px ;
50
+ padding-top : 30px ;
43
51
}
44
-
45
- .content-box > .content {
46
- min-height : 30em ;
52
+ .docs .sidebar .background {
53
+ background-color : #f4f7fc ;
54
+ position : absolute ;
55
+ top : -1000% ;
56
+ right : 0 ;
57
+ bottom : 0 ;
58
+ left : -100000% ;
59
+ z-index : -1 ;
60
+ }
61
+ .docs .sidebar dt {
62
+ letter-spacing : 0.36px ;
63
+ line-height : 18px ;
64
+ font-size : 18px ;
65
+ font-weight : 700 ;
66
+ }
67
+ .docs .sidebar ul {
68
+ list-style : none ;
69
+ padding-left : 20px ;
70
+ }
71
+ .docs .sidebar ul li {
72
+ color : #677189 ;
73
+ position : relative ;
74
+ padding-top : 4px ;
75
+ padding-bottom : 4px ;
76
+ padding-left : 30px ;
77
+ border-radius : 100px 0 0 100px ;
78
+ }
79
+ .docs .sidebar ul li .active {
80
+ color : #4D72F0 ;
81
+ background-color : rgba (77 , 114 , 240 , 0.12 );
47
82
}
83
+ .docs .sidebar ul li .active :after {
84
+ content : " " ;
85
+ background-color : #4D72F0 ;
86
+ width : 3px ;
87
+ top : 0 ;
88
+ bottom : 0 ;
89
+ right : 0 ;
90
+ position : absolute ;
91
+ }
92
+ .docs .sidebar ul li a {
93
+ color : inherit ;
94
+ font-size : 14px ;
95
+ font-weight : 500 ;
96
+ letter-spacing : 0.28px ;
97
+ line-height : 17px ;
98
+ text-decoration : none ;
99
+ }
100
+ .docs .body {
101
+ padding-top : 30px ;
102
+ color : #03193f ;
103
+ position : relative ;
104
+ }
105
+ .docs .body > * {
106
+ margin-left : 52px ;
107
+ }
108
+ .docs .body h1 {
109
+ margin-top : 0 ;
110
+ margin-bottom : 36px ;
111
+ font-size : 36px ;
112
+ font-weight : 500 ;
113
+ letter-spacing : 0.72px ;
114
+ line-height : 24px ;
115
+ }
116
+ .docs .body h2 {
117
+ font-size : 28px ;
118
+ font-weight : 500 ;
119
+ letter-spacing : 0.15px ;
120
+ line-height : 24px ;
121
+ margin-top : 0 ;
122
+ margin-bottom : 18.5px ;
123
+ }
124
+ .docs .body h3 {
125
+ font-size : 18px ;
126
+ font-weight : 500 ;
127
+ letter-spacing : 0.36px ;
128
+ line-height : 23px ;
129
+ margin-top : 0 ;
130
+ margin-bottom : 8px ;
131
+ }
132
+ .docs .body p {
133
+ font-size : 18px ;
134
+ color : #677189 ;
135
+ letter-spacing : 0.36px ;
136
+ line-height : 28px ;
137
+ margin-top : 0 ;
138
+ margin-bottom : 28px ;
139
+ }
140
+ .docs .body hr {
141
+ left : 0 ;
142
+ right : 0 ;
143
+ height : 1px ;
144
+ border : 0 ;
145
+ border-top : 1px solid #e9ecf5 ;
146
+ margin-top : 50px ;
147
+ margin-bottom : 50px ;
148
+ }
149
+ .docs .body code {
150
+ color : #677189 ;
151
+ background-color : #f8fafd ;
152
+ border : 1px solid #e9ecf5 ;
153
+ font-size : 16px ;
154
+ padding : 3px ;
155
+ }
156
+ .docs .body > pre {
157
+ color : #677189 ;
158
+ padding : 3px ;
159
+ font-size : 16px ;
160
+ background-color : #f8fafd ;
161
+ border : 1px solid #e9ecf5 ;
162
+ padding-left : 10px ;
163
+ padding-right : 10px ;
164
+ border-radius : 2px ;
48
165
49
- // Pagination stuff
50
- .pagination > .next {
51
- margin-left : auto ;
52
- }
166
+ code {
167
+ border : 0px ;
168
+ }
169
+ }
170
+ .docs .body ol li {
171
+ line-height : 26px ;
172
+ font-size : 16px ;
173
+ }
174
+ .docs .body ol li :not (:last-child ) {
175
+ margin-bottom : 20px ;
176
+ }
177
+ .docs .body a {
178
+ color : #4D72F0 ;
179
+ text-decoration : none ;
180
+ }
0 commit comments