feat: add multilingual mode support (#241)

BREAKING CHANGE:  Layout file renamed ´layouts/partials/page-footer.html → layouts/partials/menu-nextprev.html`. If you use overrides, you might need to change the filenames as well.
This commit is contained in:
Robert Kaussow 2022-01-23 13:21:44 +01:00 committed by GitHub
parent 42ebf067bb
commit 5c22ce57dc
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
88 changed files with 437 additions and 144 deletions

View file

@ -204,7 +204,7 @@ img {
.gdoc-menu-header {
&__items {
display: inline-block;
display: flex;
> span {
margin-left: $padding-8;
@ -287,7 +287,7 @@ img {
& ~ label {
cursor: pointer;
.icon {
.icon.toggle {
font-size: $font-size-12;
}
}
@ -323,7 +323,8 @@ img {
}
.gdoc-nav__entry,
.gdoc-search__entry {
.gdoc-search__entry,
.gdoc-language__entry {
flex: 1;
color: var(--body-font-color);
@ -338,8 +339,21 @@ img {
}
}
.gdoc-search__list,
.gdoc-language__list {
background: var(--body-background);
border-radius: $border-radius;
box-shadow: 0 1px 3px 0 var(--accent-color), 0 1px 2px 0 var(--accent-color-lite);
position: absolute;
margin: 0;
padding: $padding-8 !important;
list-style: none;
top: calc(100% + #{$padding-8});
z-index: 2;
}
.gdoc-page {
min-width: $body-min-width;
min-width: calc($body-min-width - $padding-16 * 2);
flex-grow: 1;
padding: $padding-16 0;
@ -594,17 +608,8 @@ img {
&__list {
visibility: hidden;
background: var(--body-background);
border-radius: $border-radius;
box-shadow: 0 1px 3px 0 var(--accent-color), 0 1px 2px 0 var(--accent-color-lite);
position: absolute;
margin: 0;
padding: $padding-8;
list-style: none;
left: 0;
top: calc(100% + #{$padding-8});
width: 100%;
z-index: 2;
ul {
list-style: none;
@ -635,6 +640,33 @@ img {
}
}
.gdoc-language {
&__selector {
position: relative;
list-style: none;
user-select: none;
cursor: pointer;
margin: 0;
padding: 0;
width: 100%;
&:focus,
&:focus-within,
&:active {
.gdoc-language__list {
display: block;
}
}
}
&__list {
display: none;
right: 0;
width: auto;
white-space: nowrap;
}
}
.gdoc-error {
padding: $padding-16 * 6 $padding-16;
margin: 0 auto;

View file

@ -56,10 +56,7 @@ $main-color: rgba(65, 134, 201, 1) !default;
$second-color: rgba(47, 51, 62, 1) !default;
$mark-color: rgba(255, 171, 0, 1) !default;
$body-background-dark: mix(
invert($body-background, 75%),
$second-color
) !default;
$body-background-dark: mix(invert($body-background, 75%), $second-color) !default;
$link-color-dark: rgba(110, 168, 212, 1) !default;
$link-color-visited-dark: rgba(186, 142, 240) !default;
@ -76,5 +73,5 @@ $hint-colors: (
info: rgba(0, 145, 234, 1),
ok: rgba(0, 200, 83, 1),
warning: rgba(255, 171, 0, 1),
danger: rgba(213, 0, 0, 1),
danger: rgba(213, 0, 0, 1)
) !default;

View file

@ -45,8 +45,7 @@
@font-face {
font-family: "Metropolis";
src: url("fonts/Metropolis.woff2") format("woff2"),
url("fonts/Metropolis.woff") format("woff");
src: url("fonts/Metropolis.woff2") format("woff2"), url("fonts/Metropolis.woff") format("woff");
font-weight: normal;
font-style: normal;
font-display: swap;

View file

@ -17,6 +17,7 @@
.gdoc-brand {
font-size: $font-size-24;
line-height: $font-size-24;
&__img {
display: none;
@ -30,7 +31,7 @@
&__control,
&__home {
display: inline-block;
display: flex;
}
}
@ -86,13 +87,13 @@
}
#menu-header-control:checked ~ .gdoc-header {
.gdoc-brand__title {
.gdoc-brand {
display: none;
}
.gdoc-menu-header {
&__items {
display: inline-block;
display: flex;
}
&__control {