Skip to content

Commit 3e819cb

Browse files
chunksnbitschunksnbits
committed
feat: adds language select
1 parent 65240ba commit 3e819cb

3 files changed

Lines changed: 384 additions & 319 deletions

File tree

‎docs/.vuepress/styles/variables.scss‎

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11

2+
// ----------------------------------------------------------------------------- Basic variables
23
$root__base-size: 15px;
34
$root__base-size--print: 10px;
45

@@ -14,8 +15,7 @@ $root__page-max-width:
1415

1516
$root__section--margin-bottom: 36px / $root__base-size * 1rem;
1617

17-
$root__icons--launch: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHdpZHRoPSIxOHB4IiBoZWlnaHQ9IjE4cHgiIHZpZXdCb3g9IjAgMCAxOCAxOCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4gICAgICAgIDx0aXRsZT5TaGFwZTwvdGl0bGU+ICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPiAgICA8ZyBpZD0iUGFnZS0xIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4gICAgICAgIDxnIGlkPSJBcnRib2FyZCIgZmlsbD0iIzAwNjE4RSIgZmlsbC1ydWxlPSJub256ZXJvIj4gICAgICAgICAgICA8cGF0aCBkPSJNMTYsMTYgTDIsMTYgTDIsMiBMOSwyIEw5LDAgTDIsMCBDMC44OSwwIDAsMC45IDAsMiBMMCwxNiBDMCwxNy4xIDAuODksMTggMiwxOCBMMTYsMTggQzE3LjEsMTggMTgsMTcuMSAxOCwxNiBMMTgsOSBMMTYsOSBMMTYsMTYgWiBNMTEsMCBMMTEsMiBMMTQuNTksMiBMNC43NiwxMS44MyBMNi4xNywxMy4yNCBMMTYsMy40MSBMMTYsNyBMMTgsNyBMMTgsMCBMMTEsMCBaIiBpZD0iU2hhcGUiPjwvcGF0aD4gICAgICAgIDwvZz4gICAgPC9nPjwvc3ZnPg==);
18-
18+
// ----------------------------------------------------------------------------- Breakpoints
1919
$root__breakpoints: (
2020
xs: 0px,
2121
sm: 600px,
@@ -25,3 +25,12 @@ $root__breakpoints: (
2525
);
2626

2727
$root__breakpoint--keys: ('xs', 'sm', 'md', 'lg', 'xl');
28+
29+
// ----------------------------------------------------------------------------- Z-Indices
30+
$root__z-index__application-bar: 1000;
31+
$root__z-index__application-drawer-backdrop: 1001;
32+
$root__z-index__application-drawer: 1002;
33+
34+
// ----------------------------------------------------------------------------- CSS only icons
35+
$root__icons--launch: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHdpZHRoPSIxOHB4IiBoZWlnaHQ9IjE4cHgiIHZpZXdCb3g9IjAgMCAxOCAxOCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4gICAgICAgIDx0aXRsZT5TaGFwZTwvdGl0bGU+ICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPiAgICA8ZyBpZD0iUGFnZS0xIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4gICAgICAgIDxnIGlkPSJBcnRib2FyZCIgZmlsbD0iIzAwNjE4RSIgZmlsbC1ydWxlPSJub256ZXJvIj4gICAgICAgICAgICA8cGF0aCBkPSJNMTYsMTYgTDIsMTYgTDIsMiBMOSwyIEw5LDAgTDIsMCBDMC44OSwwIDAsMC45IDAsMiBMMCwxNiBDMCwxNy4xIDAuODksMTggMiwxOCBMMTYsMTggQzE3LjEsMTggMTgsMTcuMSAxOCwxNiBMMTgsOSBMMTYsOSBMMTYsMTYgWiBNMTEsMCBMMTEsMiBMMTQuNTksMiBMNC43NiwxMS44MyBMNi4xNywxMy4yNCBMMTYsMy40MSBMMTYsNyBMMTgsNyBMMTgsMCBMMTEsMCBaIiBpZD0iU2hhcGUiPjwvcGF0aD4gICAgICAgIDwvZz4gICAgPC9nPjwvc3ZnPg==);
36+

‎docs/.vuepress/theme/Layout.styles.scss‎

Lines changed: 349 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,349 @@
1+
2+
@import '../styles/styles.scss';
3+
4+
:root {
5+
--root__color--text: rgba(0, 0, 0, 0.85);
6+
--root__color--primary: #004B63;
7+
--root__color--border: #5A5A5A;
8+
--root__color--link: #00618E;
9+
}
10+
11+
.root {
12+
display: flex;
13+
flex-direction: row;
14+
justify-content: center;
15+
width: 100%;
16+
transition: padding-right .2s cubic-bezier(0.4, 0, 0.2, 1);
17+
}
18+
19+
.root .application--wrap {
20+
align-items: center;
21+
}
22+
23+
.root__footer {
24+
position: relative !important;
25+
background: none !important;
26+
justify-content: center;;
27+
}
28+
29+
.root__footer-main {
30+
display: flex;
31+
width: 100%;
32+
max-width: $root__page-max-width;
33+
}
34+
35+
.root__footer-title {
36+
display: flex;
37+
flex-direction: row;
38+
justify-content: center;
39+
font-size: rem-size(14px);
40+
width: 100%;
41+
}
42+
43+
.root__footer-meta::before {
44+
content: ' — ';
45+
margin-left: 0.25rem;
46+
}
47+
48+
html,
49+
.application.theme--light {
50+
background: none;
51+
color: var(--root__color--text);
52+
font-family: Roboto, sans-serif !important;
53+
-webkit-font-smoothing: antialiased;
54+
-moz-osx-font-smoothing: grayscale;
55+
font-size: $root__base-size;
56+
font-weight: 200;
57+
scroll-behavior: smooth;
58+
scroll-padding-top: rem-size(15px);
59+
}
60+
61+
h1, h2, h3, h4, h5, h6 {
62+
font-size: 1rem;
63+
}
64+
65+
.root__page-title {
66+
font-size: 20px;
67+
font-weight: 500;
68+
letter-spacing: .02em;
69+
white-space: nowrap;
70+
overflow: hidden;
71+
text-overflow: ellipsis;
72+
}
73+
74+
h2 {
75+
color: var(--root__color--primary);
76+
text-transform: uppercase;
77+
display: inline-block;
78+
margin-bottom: 10px;
79+
80+
&:after {
81+
content: '';
82+
display: block;
83+
border: 1px solid black;
84+
margin-top: 5px;
85+
}
86+
}
87+
88+
h3 {
89+
font-weight: 200;
90+
margin-bottom: rem-size(5px);
91+
92+
strong {
93+
font-weight: 900;
94+
}
95+
}
96+
97+
h4, h5 {
98+
font-weight: 400;
99+
margin-bottom: rem-size(5px);
100+
}
101+
102+
a.header-anchor {
103+
font-size: 0.85em;
104+
float: left;
105+
margin-left: -0.87em;
106+
padding-right: 0.23em;
107+
margin-top: 0.125em;
108+
opacity: 0;
109+
}
110+
111+
a.header-anchor:hover {
112+
text-decoration: none;
113+
}
114+
115+
a.link {
116+
color: var(--root__color--link);
117+
}
118+
119+
a.link--document::after {
120+
content: '';
121+
display: inline-block;
122+
position: relative;
123+
font-size: 0.7rem;
124+
width: rem-size(8px);
125+
height: rem-size(8px);
126+
vertical-align: baseline;
127+
margin-left: rem-size(4px);
128+
top: rem-size(-2px);
129+
background-image: $root__icons--launch;
130+
background-size: contain;
131+
}
132+
133+
.root__application-bar.root__application-bar {
134+
z-index: $root__z-index__application-bar;
135+
}
136+
137+
.root__application-drawer.root__application-drawer {
138+
z-index: $root__z-index__application-drawer;
139+
}
140+
141+
.root > .v-overlay {
142+
z-index: $root__z-index__application-drawer-backdrop;
143+
}
144+
145+
.root__application-bar-drawer.root__application-bar-drawer {
146+
background: none;
147+
}
148+
149+
.root__application-bar.root__application-bar {
150+
background: white;
151+
}
152+
153+
.root__application-bar-drawer .v-toolbar__content,
154+
.root__application-bar .v-toolbar__content {
155+
justify-content: center;
156+
align-items: flex-end;
157+
padding: 0;
158+
}
159+
160+
.root__application-bar {
161+
justify-content: center;
162+
align-content: center;
163+
display: flex;
164+
flex-direction: row;
165+
justify-content: center;
166+
}
167+
168+
.root__application-bar .v-toolbar__content {
169+
display: flex;
170+
width: 100%;
171+
max-width: $root__page-max-width;
172+
padding: 0;
173+
}
174+
175+
.root__application-bar-title {
176+
padding: 0 rem-size(0px) rem-size(5px);
177+
}
178+
179+
.root__application-bar-items {
180+
position: absolute;
181+
right: 0;
182+
align-items: center;
183+
}
184+
185+
.root__page-title {
186+
color: var(--root__color--primary);
187+
border-bottom: 2px solid var(--root__color--border);
188+
}
189+
190+
.root__page {
191+
display: flex;
192+
flex-direction: column;
193+
width: 100%;
194+
padding: rem-size(50px) rem-size(20px) rem-size(10px);
195+
max-width: $root__page-max-width;
196+
box-sizing: border-box;
197+
}
198+
199+
.root__page-body {
200+
display: flex;
201+
flex-direction: column;
202+
flex: 1 1 100%;
203+
}
204+
205+
.root__page-main {
206+
display: flex;
207+
flex: 1 1 100%;
208+
flex-direction: column;
209+
order: 1;
210+
}
211+
212+
.root__page-main h2:not(:first-child) {
213+
margin-top: $root__section--margin-bottom;
214+
}
215+
216+
.root__page-sidebar {
217+
display: flex;
218+
flex-direction: column;
219+
flex: 1 1 100%;
220+
overflow: hidden;
221+
order: 0;
222+
margin-bottom: rem-size(40px);
223+
padding-top: rem-size(50px);
224+
}
225+
226+
.root__language-select {
227+
align-items: center;
228+
height: 100%;
229+
margin-right: rem-size(10px);
230+
}
231+
232+
.root__application-bar-btn {
233+
font-weight: 200;
234+
padding: rem-size(10px) rem-size(20px);
235+
height: auto;
236+
width: auto;
237+
min-width: 0;
238+
min-height: 0;
239+
line-height: 1;
240+
}
241+
242+
.root__language-select-action--active {
243+
font-weight: 900;
244+
}
245+
246+
.root__language-select-action:not(:hover)::before {
247+
background: none;
248+
}
249+
250+
.table-of-contents {
251+
margin-bottom: $root__section--margin-bottom;
252+
}
253+
254+
.root__page-table-of-contents {
255+
padding: rem-size(14px) rem-size(20px) !important;
256+
}
257+
258+
@mixin root-desktop-layout {
259+
.root__page {
260+
flex-direction: column;
261+
}
262+
263+
.root__page-body {
264+
flex-direction: row;
265+
justify-content: space-between;
266+
order: 0;
267+
}
268+
269+
.root__application-bar .v-toolbar__content {
270+
padding: 0 rem-size(20px);
271+
}
272+
273+
.root__application-bar-title {
274+
padding-left: rem-size(10px);
275+
padding-right: rem-size(10px);
276+
}
277+
278+
.root__page-main {
279+
padding: rem-size(57px) rem-size(30px) rem-size(100px);
280+
max-width: $root__main-content-max-width;
281+
}
282+
283+
.root__page-sidebar {
284+
order: 1;
285+
flex-grow: 0;
286+
flex-shrink: 0;
287+
flex-basis: $root__sidebar-width;
288+
max-width: $root__sidebar-width;
289+
margin-bottom: 0;
290+
padding-top: rem-size(57px);
291+
}
292+
}
293+
294+
p, ul {
295+
margin-bottom: 0.5rem;
296+
}
297+
298+
@include breakpoint-greater('sm') {
299+
@include root-desktop-layout;
300+
}
301+
302+
@page {
303+
margin: 2cm 0.75cm;
304+
}
305+
306+
@page:first {
307+
margin-top: 1cm;
308+
}
309+
310+
@media print {
311+
@include root-desktop-layout;
312+
313+
body {
314+
display: table;
315+
table-layout: fixed;
316+
padding-top: 2.5pt;
317+
height: auto;
318+
}
319+
320+
.root__footer {
321+
display: none;
322+
}
323+
324+
html,
325+
.application.theme--light {
326+
font-size: $root__base-size--print;
327+
}
328+
329+
.root__page-sidebar {
330+
flex-basis: $root__sidebar-width--print;
331+
max-width: $root__sidebar-width--print;
332+
padding-top: rem-size(54px);
333+
}
334+
335+
.root__page-main {
336+
max-width: calc(100vw - #{$root__sidebar-width--print + 0.75 * $root__main-max-space});
337+
padding-top: rem-size(54px);
338+
padding-bottom: 0;
339+
}
340+
341+
.root__application-bar {
342+
display: none !important;
343+
}
344+
345+
a,
346+
a.link {
347+
color: var(--root__color--text) !important;
348+
}
349+
}

0 commit comments

Comments
 (0)