mirror of
https://github.com/godotengine/godot-website.git
synced 2025-12-31 09:48:43 +03:00
Add localization plugin and initial es translation (#1011)
* Add plugin and initial `es` translation * Add missing features to plugin * Translate home page and sponsors * Add language selector and widen nav * Fix mobile style and language selector * Add js helper file * Update header.css * translate footer
This commit is contained in:
Emi
GitHub
271
assets/css/header.css
Normal file
271
assets/css/header.css
Normal file
@@ -0,0 +1,271 @@
|
||||
header {
|
||||
/* Show on top of GodotCon banner (if any). */
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
|
||||
height: 64px;
|
||||
background-color: var(--navbar-background-color);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
box-shadow: var(--base-shadow);
|
||||
|
||||
.container {
|
||||
overflow: initial;
|
||||
width: 100%;
|
||||
}
|
||||
#logo-link {
|
||||
/* Make the logo's clickable area as tall as for other navigation links. */
|
||||
padding: 0.2rem 0.5rem;
|
||||
padding-top: 6px;
|
||||
margin-left: -9px;
|
||||
padding-right: 15px;
|
||||
margin-right: -23px;
|
||||
}
|
||||
}
|
||||
|
||||
#nav, #nav_head {
|
||||
.fund {
|
||||
margin-right: 0px;
|
||||
margin-left: 0px;
|
||||
padding-left: 7px;
|
||||
&.desktop {
|
||||
@media (max-width: 1200px) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
&.mobile {
|
||||
top: -2px;
|
||||
position: relative;
|
||||
@media (min-width: 1200px) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: #F35774;
|
||||
color: white;
|
||||
background-color: #F35774 !important;
|
||||
border-radius: var(--button-border-radius);
|
||||
box-shadow: inset 0 0 0 2px #F35774;
|
||||
padding: 13px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
#nav_toggle_cb {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#nav_toggle_btn {
|
||||
line-height: 0px;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
border-radius: 100%;
|
||||
@media (min-width: 1200px) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.mobile-language-selector {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.mobile-links {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 49px;
|
||||
align-items: center;
|
||||
@media (min-width: 1200px) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
#nav {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding-left: 26px;
|
||||
a {
|
||||
text-decoration: none;
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
color: var(--navbar-link-color);
|
||||
padding: 1.3175rem 1rem;
|
||||
margin-left: 14px;
|
||||
}
|
||||
ul {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding-left: 0;
|
||||
|
||||
}
|
||||
a:hover, #logo-link:hover {
|
||||
background-color: hsla(0, 0%, 50%, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
#nav > ul {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#nav > ul > :first-child {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
#nav > ul > :last-child {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
#nav > ul li {
|
||||
padding-left: 1rem;
|
||||
margin-bottom: 0;
|
||||
margin-left: -1rem;
|
||||
margin-right: -1rem;
|
||||
}
|
||||
|
||||
#nav li.active > a {
|
||||
color: var(--navbar-link-current-color);
|
||||
}
|
||||
|
||||
#nav > ul ul {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#nav_head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
/* Mobile style */
|
||||
@media (max-width: 1200px) {
|
||||
.hide-on-mobile {
|
||||
display: none;
|
||||
}
|
||||
|
||||
header {
|
||||
height: auto;
|
||||
}
|
||||
header > div {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
#logo-link {
|
||||
margin: 0;
|
||||
}
|
||||
#nav_head {
|
||||
width: 100%;
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
#nav_toggle_btn {
|
||||
display: block;
|
||||
/* Make the navbar toggle button easier to click. */
|
||||
padding: 1.25rem;
|
||||
margin-top: -0.2rem;
|
||||
margin-right: -1rem;
|
||||
}
|
||||
#nav_toggle_btn:hover {
|
||||
background-color: hsla(0, 0%, 50%, 0.15);
|
||||
}
|
||||
#nav_toggle_btn:active {
|
||||
background-color: hsla(0, 0%, 50%, 0.25);
|
||||
}
|
||||
#nav_toggle_cb:checked ~ header nav {
|
||||
display: block;
|
||||
}
|
||||
#nav {
|
||||
display: none;
|
||||
padding-left: 0;
|
||||
}
|
||||
#nav ul {
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
height: auto;
|
||||
}
|
||||
#nav > ul {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
#nav ul li {
|
||||
padding: 0;
|
||||
padding-top: 16px;
|
||||
width: 100%;
|
||||
}
|
||||
#nav ul a {
|
||||
width: 100%;
|
||||
display: block;
|
||||
/* Make links easier to click but still close to each other. */
|
||||
padding-top: 0.75rem;
|
||||
padding-bottom: 0.75rem;
|
||||
padding-left: 1.5rem;
|
||||
padding-right: 1.5rem;
|
||||
margin-top: -0.4375rem;
|
||||
margin-bottom: -0.4375rem;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/* Language selector */
|
||||
.language-selector {
|
||||
background-image: none;
|
||||
}
|
||||
.language-option {
|
||||
@media (max-width: 1200px) {
|
||||
margin-left: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
#nav_toggle_btn {
|
||||
filter: invert(100%)saturate(0%)brightness(120%);
|
||||
}
|
||||
}
|
||||
|
||||
/* Language selector */
|
||||
@media (min-width: 1200px) {
|
||||
#nav {
|
||||
.language-selector {
|
||||
width: 66px;
|
||||
height: 43px;
|
||||
display: block;
|
||||
text-align: center;
|
||||
background-image: url(/assets/icons/language.svg);
|
||||
background-repeat: no-repeat;
|
||||
background-position: 28px 6px;
|
||||
background-size: 42px;
|
||||
opacity: 0.8;
|
||||
margin-left: -10px;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
@media (prefers-color-scheme: light) {
|
||||
background-image: url(/assets/icons/language-light.svg);
|
||||
}
|
||||
}
|
||||
.language-dropdown {
|
||||
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
|
||||
z-index: 1;
|
||||
border-radius: 5px;
|
||||
background: #303030;
|
||||
border: 1px solid #ffffff3b;
|
||||
position: relative;
|
||||
top: 50px;
|
||||
width: 120px;
|
||||
left: -65px;
|
||||
display: none;
|
||||
a {
|
||||
padding: 5px 10px;
|
||||
margin: 0;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
.language-selector.open .language-dropdown {
|
||||
display: block;
|
||||
}
|
||||
.language-option {
|
||||
user-select: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -37,8 +37,6 @@
|
||||
|
||||
--big-button-color: #478cbf;
|
||||
|
||||
--fund-color: #F35774;
|
||||
|
||||
--base-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
|
||||
--more-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
|
||||
--background-color: #d5daea;
|
||||
@@ -125,8 +123,6 @@
|
||||
|
||||
--big-button-color: #478cbf;
|
||||
|
||||
--fund-color: #F35774;
|
||||
|
||||
--base-shadow: 0 0 4px rgba(0, 0, 0, 0.4);
|
||||
--more-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
|
||||
--background-color: #202326;
|
||||
@@ -180,10 +176,7 @@
|
||||
opacity: 0.85;
|
||||
}
|
||||
|
||||
/* Invert hamburger menu button on mobile to be visible on dark navbar. */
|
||||
#nav_toggle_btn {
|
||||
filter: invert(100%) saturate(0%) brightness(120%);
|
||||
}
|
||||
|
||||
|
||||
.dark-invert {
|
||||
filter: invert(100%);
|
||||
@@ -428,168 +421,6 @@ main {
|
||||
padding-right: 0px;
|
||||
}
|
||||
|
||||
header {
|
||||
/* Show on top of GodotCon banner (if any). */
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
|
||||
width: 100vw;
|
||||
height: 64px;
|
||||
background-color: var(--navbar-background-color);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
box-shadow: var(--base-shadow);
|
||||
|
||||
.container {
|
||||
overflow: initial;
|
||||
}
|
||||
|
||||
#nav, #nav_head {
|
||||
.fund {
|
||||
margin-right: 0px;
|
||||
&.desktop {
|
||||
@media (max-width: 1200px) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
&.mobile {
|
||||
top: -2px;
|
||||
position: relative;
|
||||
@media (min-width: 1200px) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: var(--fund-color);
|
||||
color: white;
|
||||
background-color: var(--fund-color) !important; // avoid hover overwrite
|
||||
border-radius: var(--button-border-radius);
|
||||
box-shadow: inset 0 0 0 2px var(--fund-color);
|
||||
padding: 13px;
|
||||
}
|
||||
}
|
||||
}
|
||||
#logo-link {
|
||||
/* Make the logo's clickable area as tall as for other navigation links. */
|
||||
padding: 0.2rem 0.5rem;
|
||||
padding-top: 6px;
|
||||
margin-left: -9px;
|
||||
padding-right: 15px;
|
||||
margin-right: -23px;
|
||||
}
|
||||
}
|
||||
|
||||
header > div.container {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#nav_head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
#nav_toggle_cb,
|
||||
#nav_toggle_btn {
|
||||
display: none;
|
||||
line-height: 0px;
|
||||
cursor: pointer;
|
||||
/* Prevent double-clicking the button from highlighting the icon as selected text on desktop. */
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.mobile-links {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 49px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#nav {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding-right: 1rem;
|
||||
}
|
||||
|
||||
#nav a {
|
||||
text-decoration: none;
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
color: var(--navbar-link-color);
|
||||
/* Make links easier to click. */
|
||||
padding: 1.3175rem 1rem;
|
||||
}
|
||||
|
||||
#nav a:hover,
|
||||
#logo-link:hover {
|
||||
background-color: hsla(0, 0%, 50%, 0.1);
|
||||
}
|
||||
|
||||
#nav ul {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
#nav > ul {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#nav > ul > :first-child {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
#nav > ul > :last-child {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
#nav > ul li {
|
||||
padding-left: 1rem;
|
||||
padding-right: 1rem;
|
||||
margin-bottom: 0;
|
||||
margin-left: -1rem;
|
||||
margin-right: -1rem;
|
||||
}
|
||||
|
||||
#nav li.active > a {
|
||||
color: var(--navbar-link-current-color);
|
||||
}
|
||||
|
||||
#nav > ul ul {
|
||||
display: none;
|
||||
}
|
||||
|
||||
a.patronImgLink {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
a.patronImgLink > img {
|
||||
display: block;
|
||||
}
|
||||
|
||||
a.patreonLink {
|
||||
text-decoration: none;
|
||||
height: 64px !important;
|
||||
margin-left: 16px !important;
|
||||
}
|
||||
|
||||
a.patreonLink > .patreon {
|
||||
height: inherit;
|
||||
padding-left: 8px;
|
||||
padding-right: 8px;
|
||||
}
|
||||
|
||||
a.patreonLink .patreon-brand {
|
||||
background-size: 160px;
|
||||
}
|
||||
|
||||
a.patreonLink .patreon-uppercase {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
ul {
|
||||
padding-left: 2rem;
|
||||
}
|
||||
@@ -1000,75 +831,6 @@ pre > code {
|
||||
article .content {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
header {
|
||||
height: auto;
|
||||
}
|
||||
header > div {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
#logo-link {
|
||||
margin: 0;
|
||||
}
|
||||
#nav_head {
|
||||
width: 100%;
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
#nav_toggle_btn {
|
||||
display: block;
|
||||
/* Make the navbar toggle button easier to click. */
|
||||
padding: 1.25rem;
|
||||
margin-top: -0.2rem;
|
||||
margin-right: -1rem;
|
||||
}
|
||||
#nav_toggle_btn:hover {
|
||||
background-color: hsla(0, 0%, 50%, 0.15);
|
||||
}
|
||||
#nav_toggle_btn:active {
|
||||
background-color: hsla(0, 0%, 50%, 0.25);
|
||||
}
|
||||
#nav_toggle_cb:checked ~ header nav {
|
||||
display: block;
|
||||
}
|
||||
#nav {
|
||||
display: none;
|
||||
}
|
||||
#nav ul {
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
height: auto;
|
||||
}
|
||||
#nav > ul {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
#nav ul li {
|
||||
padding: 0;
|
||||
padding-top: 16px;
|
||||
width: 100%;
|
||||
}
|
||||
#nav ul a {
|
||||
width: 100%;
|
||||
display: block;
|
||||
/* Make links easier to click but still close to each other. */
|
||||
padding-top: 0.75rem;
|
||||
padding-bottom: 0.75rem;
|
||||
padding-left: 1.5rem;
|
||||
padding-right: 1.5rem;
|
||||
margin-top: -0.4375rem;
|
||||
margin-bottom: -0.4375rem;
|
||||
}
|
||||
a.patreonLink {
|
||||
text-decoration: none;
|
||||
height: 64px !important;
|
||||
margin-left: 0px !important;
|
||||
margin-top: 16px;
|
||||
}
|
||||
a.patreonLink > .patreon {
|
||||
height: inherit;
|
||||
padding-left: 8px;
|
||||
padding-right: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1020px) {
|
||||
|
||||
@@ -49,3 +49,9 @@ nav#nav {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#nav .language-selector {
|
||||
@media (min-width: 1200px) {
|
||||
background-image: url(/assets/icons/language.svg) !important;
|
||||
}
|
||||
}
|
||||
1
assets/icons/language-light.svg
Normal file
1
assets/icons/language-light.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path fill="#333f67" d="M0 128C0 92.7 28.7 64 64 64l192 0 48 0 16 0 256 0c35.3 0 64 28.7 64 64l0 256c0 35.3-28.7 64-64 64l-256 0-16 0-48 0L64 448c-35.3 0-64-28.7-64-64L0 128zm320 0l0 256 256 0 0-256-256 0zM178.3 175.9c-3.2-7.2-10.4-11.9-18.3-11.9s-15.1 4.7-18.3 11.9l-64 144c-4.5 10.1 .1 21.9 10.2 26.4s21.9-.1 26.4-10.2l8.9-20.1 73.6 0 8.9 20.1c4.5 10.1 16.3 14.6 26.4 10.2s14.6-16.3 10.2-26.4l-64-144zM160 233.2L179 276l-38 0 19-42.8zM448 164c11 0 20 9 20 20l0 4 44 0 16 0c11 0 20 9 20 20s-9 20-20 20l-2 0-1.6 4.5c-8.9 24.4-22.4 46.6-39.6 65.4c.9 .6 1.8 1.1 2.7 1.6l18.9 11.3c9.5 5.7 12.5 18 6.9 27.4s-18 12.5-27.4 6.9l-18.9-11.3c-4.5-2.7-8.8-5.5-13.1-8.5c-10.6 7.5-21.9 14-34 19.4l-3.6 1.6c-10.1 4.5-21.9-.1-26.4-10.2s.1-21.9 10.2-26.4l3.6-1.6c6.4-2.9 12.6-6.1 18.5-9.8l-12.2-12.2c-7.8-7.8-7.8-20.5 0-28.3s20.5-7.8 28.3 0l14.6 14.6 .5 .5c12.4-13.1 22.5-28.3 29.8-45L448 228l-72 0c-11 0-20-9-20-20s9-20 20-20l52 0 0-4c0-11 9-20 20-20z"/></svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
1
assets/icons/language.svg
Normal file
1
assets/icons/language.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path fill="#ffffff" d="M0 128C0 92.7 28.7 64 64 64l192 0 48 0 16 0 256 0c35.3 0 64 28.7 64 64l0 256c0 35.3-28.7 64-64 64l-256 0-16 0-48 0L64 448c-35.3 0-64-28.7-64-64L0 128zm320 0l0 256 256 0 0-256-256 0zM178.3 175.9c-3.2-7.2-10.4-11.9-18.3-11.9s-15.1 4.7-18.3 11.9l-64 144c-4.5 10.1 .1 21.9 10.2 26.4s21.9-.1 26.4-10.2l8.9-20.1 73.6 0 8.9 20.1c4.5 10.1 16.3 14.6 26.4 10.2s14.6-16.3 10.2-26.4l-64-144zM160 233.2L179 276l-38 0 19-42.8zM448 164c11 0 20 9 20 20l0 4 44 0 16 0c11 0 20 9 20 20s-9 20-20 20l-2 0-1.6 4.5c-8.9 24.4-22.4 46.6-39.6 65.4c.9 .6 1.8 1.1 2.7 1.6l18.9 11.3c9.5 5.7 12.5 18 6.9 27.4s-18 12.5-27.4 6.9l-18.9-11.3c-4.5-2.7-8.8-5.5-13.1-8.5c-10.6 7.5-21.9 14-34 19.4l-3.6 1.6c-10.1 4.5-21.9-.1-26.4-10.2s.1-21.9 10.2-26.4l3.6-1.6c6.4-2.9 12.6-6.1 18.5-9.8l-12.2-12.2c-7.8-7.8-7.8-20.5 0-28.3s20.5-7.8 28.3 0l14.6 14.6 .5 .5c12.4-13.1 22.5-28.3 29.8-45L448 228l-72 0c-11 0-20-9-20-20s9-20 20-20l52 0 0-4c0-11 9-20 20-20z"/></svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
16
assets/js/localize.js
Normal file
16
assets/js/localize.js
Normal file
@@ -0,0 +1,16 @@
|
||||
// Get the language label
|
||||
const languageMap = {
|
||||
'en': 'English',
|
||||
'es': 'Español',
|
||||
'de': 'Deutsch',
|
||||
'ja': '日本語',
|
||||
'zh': '中文',
|
||||
'pt': 'Português'
|
||||
};
|
||||
|
||||
document.querySelectorAll('.localize-language-label').forEach(function(el) {
|
||||
const lang = el.textContent;
|
||||
if (languageMap[lang]) {
|
||||
el.textContent = languageMap[lang];
|
||||
}
|
||||
});
|
||||
Reference in New Issue
Block a user