diff --git a/.eslintrc.yaml b/.eslintrc.yaml index 92b455f3..39283c66 100644 --- a/.eslintrc.yaml +++ b/.eslintrc.yaml @@ -46,7 +46,7 @@ rules: object-curly-newline: - error - multiline: true - no-console: 0 + no-console: error no-continue: 0 no-param-reassign: 0 no-plusplus: 0 @@ -88,3 +88,6 @@ rules: new-cap: - error - properties: false + import/no-extraneous-dependencies: + - error + - devDependencies: true diff --git a/config/_default/menus.en.yaml b/config/_default/menus.en.yaml index 98d00923..6860886f 100644 --- a/config/_default/menus.en.yaml +++ b/config/_default/menus.en.yaml @@ -36,7 +36,10 @@ footer: - name: About url: https://opentermsarchive.org/en/about/ weight: 7 -first_subfooter: + - name: Contact-us + identifier: mailto + weight: 8 +footer_sub: - name: Services status url: https://stats.uptimerobot.com/nXvrBcl0wx weight: 1 @@ -53,13 +56,12 @@ first_subfooter: weight: 4 params: target: _blank -second_subfooter: - name: Legal notice url: https://opentermsarchive.org/en/legal-notice/ - weight: 1 + weight: 5 - name: Privacy policy url: https://opentermsarchive.org/en/privacy-policy/ - weight: 2 + weight: 6 - name: 'Accessibility: not compliant' url: https://opentermsarchive.org/en/accessibility/ - weight: 3 + weight: 7 diff --git a/config/_default/menus.fr.yaml b/config/_default/menus.fr.yaml index 29875d30..51583c12 100644 --- a/config/_default/menus.fr.yaml +++ b/config/_default/menus.fr.yaml @@ -36,7 +36,10 @@ footer: - name: À propos url: https://opentermsarchive.org/fr/a-propos/ weight: 7 -first_subfooter: + - name: Contactez-nous + identifier: mailto + weight: 8 +footer_sub: - name: État des services url: https://stats.uptimerobot.com/nXvrBcl0wx weight: 1 @@ -53,13 +56,12 @@ first_subfooter: weight: 4 params: target: _blank -second_subfooter: - name: Mentions légales url: https://opentermsarchive.org/fr/mentions-legales/ - weight: 1 + weight: 5 - name: Politique de confidentialité url: https://opentermsarchive.org/fr/politique-de-confidentialite/ - weight: 2 + weight: 6 - name: 'Accessibilité : non conforme' url: https://opentermsarchive.org/fr/accessibilite/ - weight: 3 + weight: 7 diff --git a/config/_default/params.yaml b/config/_default/params.yaml index cdb2716f..e5873bb5 100644 --- a/config/_default/params.yaml +++ b/config/_default/params.yaml @@ -1,6 +1,12 @@ +contact_email: contact@opentermsarchive.org github: url: https://github.com/OpenTermsArchive mastodon: url: https://mastodon.social/@opentermsarchive username: "@opentermsarchive@mastodon.social" -email: contact@opentermsarchive.org +linkedin: + url: https://www.linkedin.com/company/opentermsarchive/ +opencollective: + url: https://opencollective.com/opentermsarchive +contribution_tool: + url: https://contribute.opentermsarchive.org/ diff --git a/content/memos/how-to-publish.en.md b/content/memos/how-to-publish.en.md index 39bf68a7..2c5f67d4 100644 --- a/content/memos/how-to-publish.en.md +++ b/content/memos/how-to-publish.en.md @@ -14,7 +14,7 @@ No technical skills are required. ## 1. Send -Send your memo to [{{< param email >}}](mailto:{{< param email >}}?subject=Publish%20a%20memo&body=Dear%20Core%20team%2C%0A%0AI%20would%20like%20to%20publish%20the%20memo%20below.%0A%0AIt%20is%20based%20on%20my%20original%20work%2C%20and%20I%20have%20reviewed%20the%20reference%20at%20docs.opentermsarchive.org%2Fmemos%2Fwriting-reference%2F%20and%20I%20have%20made%20sure%20the%20content%20complies%20with%20it%20before%20sending%20this%20text%20to%20you.%0A%0AI%20understand%20that%20it%20might%20take%20up%20to%20two%20weeks%20for%20this%20text%20to%20be%20reviewed.%0A%0AHave%20a%20good%20day%21) by writing it in the body of the email or as a file attachment. Feel free to add any comments or questions you may have about the content or format. +Send your memo to [{{< param contact_email >}}](mailto:{{< param contact_email >}}?subject=Publish%20a%20memo&body=Dear%20Core%20team%2C%0A%0AI%20would%20like%20to%20publish%20the%20memo%20below.%0A%0AIt%20is%20based%20on%20my%20original%20work%2C%20and%20I%20have%20reviewed%20the%20reference%20at%20docs.opentermsarchive.org%2Fmemos%2Fwriting-reference%2F%20and%20I%20have%20made%20sure%20the%20content%20complies%20with%20it%20before%20sending%20this%20text%20to%20you.%0A%0AI%20understand%20that%20it%20might%20take%20up%20to%20two%20weeks%20for%20this%20text%20to%20be%20reviewed.%0A%0AHave%20a%20good%20day%21) by writing it in the body of the email or as a file attachment. Feel free to add any comments or questions you may have about the content or format. ## 2. Review diff --git a/i18n/en.toml b/i18n/en.toml deleted file mode 100644 index 0eddfc46..00000000 --- a/i18n/en.toml +++ /dev/null @@ -1,9 +0,0 @@ -[header] - github_title = "View source code" - menu_open = "Menu" - menu_close = "Close" - -[footer] - contact = "Contact us" - contact_href = "mailto:contact@opentermsarchive.org" - follow = "Follow us" diff --git a/i18n/en.yaml b/i18n/en.yaml new file mode 100644 index 00000000..7d92d952 --- /dev/null +++ b/i18n/en.yaml @@ -0,0 +1,4 @@ +header: + menu: + open: Menu + close: Close diff --git a/i18n/fr.toml b/i18n/fr.toml deleted file mode 100644 index b4d80dca..00000000 --- a/i18n/fr.toml +++ /dev/null @@ -1,9 +0,0 @@ -[header] - github_title = "Voir le code source" - menu_open = "Menu" - menu_close = "Fermer" - -[footer] - contact = "Contactez-nous" - contact_href = "mailto:contact@opentermsarchive.org" - follow = "Suivez-nous" diff --git a/i18n/fr.yaml b/i18n/fr.yaml new file mode 100644 index 00000000..bf5b99c9 --- /dev/null +++ b/i18n/fr.yaml @@ -0,0 +1,4 @@ +header: + menu: + open: Menu + close: Fermer diff --git a/package-lock.json b/package-lock.json index 78b38ea4..0a00a23f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -21,7 +21,9 @@ "eslint-config-airbnb-base": "^15.0.0", "jsdoc": "^4.0.0", "linkinator": "^5.0.1", + "lucide": "^0.460.0", "markdownlint-cli": "^0.32.2", + "simple-icons": "^13.17.0", "stylelint": "^14.16.1", "stylelint-config-standard": "^29.0.0" } @@ -3472,6 +3474,12 @@ "node": ">=10" } }, + "node_modules/lucide": { + "version": "0.460.0", + "resolved": "https://registry.npmjs.org/lucide/-/lucide-0.460.0.tgz", + "integrity": "sha512-kEqx3yHU+q4S0k7RH183QFaDy6xepEcN3yVjiBhxM1qX/tSMrmOSuUQJCobiIYzB1q9m8RmAN0efPiXZq79JSQ==", + "dev": true + }, "node_modules/map-obj": { "version": "4.3.0", "resolved": "https://registry.npmjs.org/map-obj/-/map-obj-4.3.0.tgz", @@ -5298,6 +5306,19 @@ "integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==", "dev": true }, + "node_modules/simple-icons": { + "version": "13.17.0", + "resolved": "https://registry.npmjs.org/simple-icons/-/simple-icons-13.17.0.tgz", + "integrity": "sha512-pn37igWUYFeTBLckTGjFpwvEYbZuIXc9AB2lza+bzxc/h/sxlNn323dxGlXKglxqMNgLkbnpX75hT6kgsgb5CQ==", + "dev": true, + "engines": { + "node": ">=0.12.18" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/simple-icons" + } + }, "node_modules/slash": { "version": "5.0.0", "resolved": "https://registry.npmjs.org/slash/-/slash-5.0.0.tgz", @@ -8447,6 +8468,12 @@ "yallist": "^4.0.0" } }, + "lucide": { + "version": "0.460.0", + "resolved": "https://registry.npmjs.org/lucide/-/lucide-0.460.0.tgz", + "integrity": "sha512-kEqx3yHU+q4S0k7RH183QFaDy6xepEcN3yVjiBhxM1qX/tSMrmOSuUQJCobiIYzB1q9m8RmAN0efPiXZq79JSQ==", + "dev": true + }, "map-obj": { "version": "4.3.0", "resolved": "https://registry.npmjs.org/map-obj/-/map-obj-4.3.0.tgz", @@ -9611,6 +9638,12 @@ "integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==", "dev": true }, + "simple-icons": { + "version": "13.17.0", + "resolved": "https://registry.npmjs.org/simple-icons/-/simple-icons-13.17.0.tgz", + "integrity": "sha512-pn37igWUYFeTBLckTGjFpwvEYbZuIXc9AB2lza+bzxc/h/sxlNn323dxGlXKglxqMNgLkbnpX75hT6kgsgb5CQ==", + "dev": true + }, "slash": { "version": "5.0.0", "resolved": "https://registry.npmjs.org/slash/-/slash-5.0.0.tgz", diff --git a/package.json b/package.json index 39452b9c..b6a014c2 100644 --- a/package.json +++ b/package.json @@ -28,7 +28,9 @@ "eslint-config-airbnb-base": "^15.0.0", "jsdoc": "^4.0.0", "linkinator": "^5.0.1", + "lucide": "^0.460.0", "markdownlint-cli": "^0.32.2", + "simple-icons": "^13.17.0", "stylelint": "^14.16.1", "stylelint-config-standard": "^29.0.0" }, diff --git a/themes/opentermsarchive/assets/css/components/divider/divider.css b/themes/opentermsarchive/assets/css/components/divider/divider.css index 54349bd8..559e92d4 100644 --- a/themes/opentermsarchive/assets/css/components/divider/divider.css +++ b/themes/opentermsarchive/assets/css/components/divider/divider.css @@ -1,5 +1,6 @@ .divider { & > hr { - border: 1px solid var(--colorBlack400); + border: none; + border-top: 1px solid var(--colorBlack300); } } diff --git a/themes/opentermsarchive/assets/css/components/footer/footer.css b/themes/opentermsarchive/assets/css/components/footer/footer.css index 9be3da0e..81aaf645 100644 --- a/themes/opentermsarchive/assets/css/components/footer/footer.css +++ b/themes/opentermsarchive/assets/css/components/footer/footer.css @@ -1,117 +1,58 @@ .footer { - width: 100%; - padding: 0 0 var(--pL) 0; -} -.version { - color: var(--colorBlack400); - font-size: 0.8em; - text-align: right; - font-style: italic; -} - -@media (--tabletLarge) { - .footer { - text-align: center; - } -} - -.footer_menus { - width: 100%; display: flex; - justify-content: space-between; - margin-top: var(--m2XS); + flex-direction: column; + gap: var(--mM); + align-items: center; + margin: 0 auto; + text-align: center; + + & ul { + display: flex; + flex-flow: row wrap; + justify-content: center; - & div { - &:first-child { - margin-right: var(--gridGutterWidth); + & li { + & a { + display: inline-flex; + color: var(--colorBlack600); + } } - & ul { - display: flex; - flex-direction: row; + } + @media (--mobileExtraLarge) { + & ul { & li { - margin: 0 var(--mXS); - - &:first-child { - margin-left: 0; - } - - &:last-child { - margin-right: 0; - } - - & a { - color: var(--colorBlack600); - } - } - - & + ul { - margin-top: 1rem; + width: 100%; } } } } -@media (--gridPlus) { - .footer { - padding-left: var(--pL); - padding-right: var(--pL); - } +.footer__main-menu { + gap: var(--m2XS) var(--mS); } -@media (--tabletLarge) { - .footer_menus { - justify-content: center; - align-items: flex-start; - - & div { - margin: var(--gridGutterWidth) var(--gridColWidth) 0 var(--gridColWidth); - - &:first-child { - margin-right: 0; - } - - & ul { - flex-direction: column; - - & li { - text-align: left; - margin: var(--mXS); - - &:first-child { - margin-top: 0; - } - - &:first-child { - margin-left: var(--mXS); - } +.footer__sub-menu { + gap: var(--m2XS) var(--mS); +} - &:last-child { - margin-right: var(--mXS); - } - } +.footer__logo { + margin-top: var(--mL); + margin-bottom: var(--mM); - & + ul { - flex-direction: column; - } - } - } + @media (--mobileExtraLarge) { + margin-top: var(--mS); + margin-bottom: var(--mS); } } -@media (--mobileExtraLarge) { - .footer_menus { - justify-content: flex-start; - flex-wrap: wrap; - & div { - width: 100%; - margin: var(--gridGutterWidth) 0 0 0; +.footer__socials { + gap: var(--mXS); + margin-top: var(--mM); + margin-bottom: var(--mM); - & ul { - & li { - text-align: center; - } - } - } + @media (--mobileExtraLarge) { + margin-top: var(--mS); + margin-bottom: var(--mS); } } diff --git a/themes/opentermsarchive/assets/css/components/footerMenu/footerMenu.css b/themes/opentermsarchive/assets/css/components/footerMenu/footerMenu.css deleted file mode 100644 index 1dcf7d89..00000000 --- a/themes/opentermsarchive/assets/css/components/footerMenu/footerMenu.css +++ /dev/null @@ -1,11 +0,0 @@ -.footerMenu { - &.footerMenu__isSmall { - font-size: 1.4rem; - } - - &.footerMenu__alignRight { - & ul { - justify-content: flex-end; - } - } -} diff --git a/themes/opentermsarchive/assets/css/components/header/header.css b/themes/opentermsarchive/assets/css/components/header/header.css index e8edbe95..bb218cd6 100644 --- a/themes/opentermsarchive/assets/css/components/header/header.css +++ b/themes/opentermsarchive/assets/css/components/header/header.css @@ -1,50 +1,25 @@ .header { - width: 100%; + position: relative; display: flex; align-items: center; + width: 100%; padding-top: var(--pL); padding-bottom: var(--pL); - position: relative; - - &.header__isOpen { - & .header_menus { - transition: 0.5s all easeOutCirc; - transform: translateX(0); - } - - & .header_openLink { - display: none; - } - - & .header_closeLink { - display: inline-flex; - } - } -} - -.header { } -@media (--gridPlus) { - .header { - padding-left: var(--pL); - padding-right: var(--pL); - } -} - -.header_logo { +.header__logo { line-height: 0; } -.header_menus { - flex-grow: 1; +.header__menus { display: flex; + flex-grow: 1; & nav { &:first-child { flex-grow: 1; - justify-content: center; align-items: center; + justify-content: center; } &:last-child { @@ -53,19 +28,71 @@ } } +.header__open-link { + @mixin resetButton; + + position: absolute; + top: var(--mL); + right: var(--mL); + display: none; + padding: var(--pS); + font-size: 1.4rem; + color: var(--colorPrimary); +} + +.header__close-link { + @mixin resetButton; + + position: fixed; + top: var(--mL); + right: var(--mL); + z-index: 1; + display: none; + align-items: center; + padding: var(--pS); + font-size: 1.4rem; + color: var(--colorWhite); + + & svg { + margin-left: var(--m2XS); + } +} + +.header--is-open { + & .header__menus { + transition: 0.5s all easeoutcirc; + transform: translateX(0); + } + + & .header__open-link { + display: none; + } + + & .header__close-link { + display: inline-flex; + } +} + +@media (--gridPlus) { + .header { + padding-right: var(--pL); + padding-left: var(--pL); + } +} + @media (--tabletLarge) { - .header_menus { - transition: 0.3s all easeOutExpo; - transform: translateX(100%); - background-color: var(--colorSecondary); + .header__open-link { + display: inline-flex; + } + + .header__menus { position: fixed; + inset: 0; z-index: 1; - left: 0; - right: 0; - top: 0; - bottom: 0; - flex-wrap: wrap; - flex-direction: column; + flex-flow: column wrap; + background-color: var(--colorSecondary); + transition: 0.3s all easeoutexpo; + transform: translateX(100%); & nav { width: 100%; @@ -86,9 +113,9 @@ } &:last-child { + flex-direction: column; margin-top: auto; margin-bottom: var(--mXL); - flex-direction: column; & div { margin-bottom: var(--mL); @@ -97,37 +124,3 @@ } } } - -.header_openLink { - @mixin resetButton; - color: var(--colorPrimary); - display: none; - font-size: 1.4rem; - position: absolute; - padding: var(--pS); - top: var(--mL); - right: var(--mL); -} - -@media (--tabletLarge) { - .header_openLink { - display: inline-flex; - } -} - -.header_closeLink { - @mixin resetButton; - position: fixed; - display: none; - color: var(--colorWhite); - font-size: 1.4rem; - padding: var(--pS); - top: var(--mL); - right: var(--mL); - align-items: center; - z-index: 1; - - & svg { - margin-left: var(--m2XS); - } -} diff --git a/themes/opentermsarchive/assets/css/components/headerMenu/headerMenu.css b/themes/opentermsarchive/assets/css/components/headerMenu/headerMenu.css index 13daa7d3..bc986c0b 100644 --- a/themes/opentermsarchive/assets/css/components/headerMenu/headerMenu.css +++ b/themes/opentermsarchive/assets/css/components/headerMenu/headerMenu.css @@ -1,30 +1,28 @@ -.headerMenu { +.header__menu { display: flex; align-items: center; & ul { display: flex; } +} - &.headerMenu__primary { - & ul { - & li { - margin: 0 var(--mS); - } +.header__menu-primary { + & ul { + & li { + margin: 0 var(--mS); } } +} - &.headerMenu__secondary { - & ul { - & li:not(:last-child) { - margin: 0 var(--m2XS); - } - } +.header__menu-secondary { + & ul { + gap: var(--m2XS); } } @media (--tabletLarge) { - .headerMenu { + .header__menu { & ul { width: 100%; @@ -33,25 +31,25 @@ margin: var(--mS) auto; & a { - color: var(--colorWhite); display: inline-flex; + color: var(--colorWhite); } } } + } - &.headerMenu__primary { - & ul { - & li { - margin: var(--mS) auto; - } + .header__menu-primary { + & ul { + & li { + margin: var(--mS) auto; } } + } - &.headerMenu__secondary { - & ul { - & li:not(:last-child) { - margin: var(--mS) auto; - } + .header__menu-secondary { + & ul { + & li:not(:last-child) { + margin: var(--mS) auto; } } } diff --git a/themes/opentermsarchive/assets/css/components/languageSwitcher/languageSwitcher.css b/themes/opentermsarchive/assets/css/components/languageSwitcher/languageSwitcher.css index 51000637..f01550fa 100644 --- a/themes/opentermsarchive/assets/css/components/languageSwitcher/languageSwitcher.css +++ b/themes/opentermsarchive/assets/css/components/languageSwitcher/languageSwitcher.css @@ -1,53 +1,51 @@ -.languageSwitcher { - text-align: right; +.language-switcher { + position: relative; margin-right: var(--mXS); font-size: 1.4rem; - position: relative; - - &.languageSwitcher__isOpen { - & .languageSwitcher_items { - display: block; - } - } + text-align: right; } -.languageSwitcher_current { +.language-switcher--current { @mixin resetButton; + display: flex; - padding: var(--pXS); - border-radius: 4px; - border: 1px solid var(--colorBlack200); align-items: center; + padding: var(--pXS); background-color: var(--colorWhite); + border: 1px solid var(--colorBlack200); + border-radius: 4px; & > svg { margin-left: var(--m2XS); } - - @media (--tabletLarge) { - } } -.languageSwitcher_items { +.language-switcher__items { position: absolute; right: 0; display: flex; + display: none; flex-direction: column; - text-align: right; + margin-top: -1px; overflow: visible; + text-align: right; + background-color: var(--colorWhite); border: 1px solid var(--colorBlack200); border-radius: 4px; - margin-top: -1px; - display: none; - background-color: var(--colorWhite); } -.languageSwitcher_item { +.language-switcher__item { width: 100%; - white-space: nowrap; padding: var(--pXS); + white-space: nowrap; - &.languageSwitcher_item__isActive { + &.language-switcher__item--is-active { border: 1px solid red; } } + +.language-switcher--is-open { + & .language-switcher__items { + display: block; + } +} diff --git a/themes/opentermsarchive/assets/css/components/logo/logo.css b/themes/opentermsarchive/assets/css/components/logo/logo.css index cad9e3e3..92662008 100644 --- a/themes/opentermsarchive/assets/css/components/logo/logo.css +++ b/themes/opentermsarchive/assets/css/components/logo/logo.css @@ -1,37 +1,29 @@ .logo { - & svg { - height: 40px; - width: 312px; - } + width: 312px; + height: 40px; - &.logo__alternative { - & svg { - height: 76px; - } + & svg { + width: 100%; + height: 100%; } } -.logo__small { -} -.logo__medium { -} -.logo__large { -} - -.logo__full { - width: 100%; +.logo__alternative { + width: 150px; + height: 68px; & svg { - height: auto; width: 100%; + height: 100%; } } -@media (--mobileLarge) { +@media (--mobileExtraLarge) { .logo { - margin-top: 8px; - & svg { - height: 32px; - } + max-width: 234px; + } + + .logo__alternative { + max-width: 112px; } } diff --git a/themes/opentermsarchive/assets/css/elements/icons.css b/themes/opentermsarchive/assets/css/elements/icons.css index f1abd2be..e2d8c9b3 100644 --- a/themes/opentermsarchive/assets/css/elements/icons.css +++ b/themes/opentermsarchive/assets/css/elements/icons.css @@ -2,39 +2,28 @@ --svgfill: none; } -.icon_circle { - background-color: var(--colorBlack400); - border-radius: 50%; - height: 28px; - width: 28px; +.icon__circle-wrapper { display: inline-flex; align-items: center; justify-content: center; - - &.icon_circle__medium { - height: 24px; - width: 24px; - } -} - -.icon_arrowDown{ - width:1em; - height:1em; + width: 28px; + height: 28px; + background-color: var(--colorBlack400); + border-radius: 50%; } -.icon_close{ - width:1em; - height:1em; +.icon__circle-wrapper--small { + width: 2.4rem; + height: 2.4rem; } -.icon_github{ - width:1em; - height:1em; +.icon__circle-wrapper--big { + width: 8.8rem; + height: 8.8rem; } -.icon_contact{ - width:1em; - height:1em; +.icon__circle-wrapper--graylight { + background-color: var(--colorBlack200); } .icon { @@ -42,6 +31,43 @@ height: 1em; } +.icon--size-inherit { + width: inherit; + height: inherit; +} + +.icon--medium { + width: 1.8em; + height: 1.8em; +} + +.icon--big { + width: 2.6em; + height: 2.6em; +} + +.icon--stroke-thin { + stroke-width: 1; +} + +.icon--white { + color: var(--colorWhite); +} + +.icon--primary { + color: var(--colorPrimary); +} + +.icon--gray { + color: var(--colorBlack400); +} + .icon--fill-white { --svgfill: var(--colorWhite); } + +.icon__volunteer-contributors-wrapper { + display: flex; + flex-direction: column; + align-items: center; +} diff --git a/themes/opentermsarchive/assets/css/elements/links.css b/themes/opentermsarchive/assets/css/elements/links.css index 24c2e477..9c81fc21 100644 --- a/themes/opentermsarchive/assets/css/elements/links.css +++ b/themes/opentermsarchive/assets/css/elements/links.css @@ -1,31 +1,25 @@ a { color: var(--colorPrimary); text-decoration: none; - transition: all 0.3s easeOutExpo; + transition: all 0.3s easeoutexpo; &:hover { color: var(--colorSecondary); - transition: all 0.25s easeOutCirc; + transition: all 0.25s easeoutcirc; } } -.a__small { +.a--small { font-size: 1.4rem; } -.a__darked { - &:hover { - color: var(--colorDarkedSecondary); - } -} - -.a_icontext { +.a--icontext { display: flex; align-items: center; } @media (--mobileExtraLarge) { - .a_icontext { + .a--icontext { justify-content: center; } } diff --git a/themes/opentermsarchive/assets/css/loader.css b/themes/opentermsarchive/assets/css/loader.css index d8c6e1b1..597eb617 100644 --- a/themes/opentermsarchive/assets/css/loader.css +++ b/themes/opentermsarchive/assets/css/loader.css @@ -32,7 +32,6 @@ @import "themes/opentermsarchive/assets/css/components/container/container.css"; @import "themes/opentermsarchive/assets/css/components/header/header.css"; @import "themes/opentermsarchive/assets/css/components/footer/footer.css"; -@import "themes/opentermsarchive/assets/css/components/footerMenu/footerMenu.css"; @import "themes/opentermsarchive/assets/css/components/divider/divider.css"; @import "themes/opentermsarchive/assets/css/components/textContent/textContent.css"; @import "themes/opentermsarchive/assets/css/components/aside/aside.css"; diff --git a/themes/opentermsarchive/assets/js/brands.js b/themes/opentermsarchive/assets/js/brands.js new file mode 100644 index 00000000..3cf94f69 --- /dev/null +++ b/themes/opentermsarchive/assets/js/brands.js @@ -0,0 +1,30 @@ +import { siMastodon, siLinkedin, siGithub } from 'simple-icons'; + +const ICONS = { + mastodon: siMastodon, + linkedin: siLinkedin, + github: siGithub, +}; + +async function applyBrandsIcons() { + const elements = document.querySelectorAll('[data-simple-icon]'); + + elements.forEach(element => { + const attribute = element.getAttribute('data-simple-icon').toLowerCase(); + const icon = ICONS[attribute]; + + if (icon) { + const svgDoc = new DOMParser().parseFromString(icon.svg, 'image/svg+xml'); + const svgElement = svgDoc.querySelector('svg'); + const existingClasses = element.getAttribute('class'); + + if (existingClasses) { + svgElement.setAttribute('class', existingClasses); + } + svgElement.setAttribute('fill', 'var(--svgfill)'); + element.replaceWith(svgElement); + } + }); +} + +document.addEventListener('DOMContentLoaded', applyBrandsIcons); diff --git a/themes/opentermsarchive/assets/js/header.js b/themes/opentermsarchive/assets/js/header.js index f08749cf..455a6228 100644 --- a/themes/opentermsarchive/assets/js/header.js +++ b/themes/opentermsarchive/assets/js/header.js @@ -1,9 +1,9 @@ document.addEventListener('DOMContentLoaded', () => { const $header = document.querySelector('.header'); - document.querySelectorAll('.header_openLink, .header_closeLink').forEach($el => { + document.querySelectorAll('.header__open-link, .header__close-link').forEach($el => { $el.addEventListener('click', () => { - $header.classList.toggle('header__isOpen'); + $header.classList.toggle('header--is-open'); }); }); }); diff --git a/themes/opentermsarchive/assets/js/icons.js b/themes/opentermsarchive/assets/js/icons.js new file mode 100644 index 00000000..ff135d18 --- /dev/null +++ b/themes/opentermsarchive/assets/js/icons.js @@ -0,0 +1,14 @@ +import { + ChevronDown, + X, + + createIcons, +} from 'lucide'; + +createIcons({ + icons: { + X, + ChevronDown, + }, + attrs: { 'aria-hidden': true }, +}); diff --git a/themes/opentermsarchive/assets/js/languageSwitcher.js b/themes/opentermsarchive/assets/js/languageSwitcher.js index aacedd3f..d4ca6742 100644 --- a/themes/opentermsarchive/assets/js/languageSwitcher.js +++ b/themes/opentermsarchive/assets/js/languageSwitcher.js @@ -1,9 +1,9 @@ document.addEventListener('DOMContentLoaded', () => { - const $languageSwitcher = document.querySelector('.languageSwitcher'); + const $languageSwitcher = document.querySelector('.language-switcher'); - document.querySelectorAll('.languageSwitcher_current, .languageSwitcher_item').forEach($el => { + document.querySelectorAll('.language-switcher--current, .language-switcher__item').forEach($el => { $el.addEventListener('click', () => { - $languageSwitcher.classList.toggle('languageSwitcher__isOpen'); + $languageSwitcher.classList.toggle('language-switcher--is-open'); }); }); }); diff --git a/themes/opentermsarchive/layouts/partials/footer.html b/themes/opentermsarchive/layouts/partials/footer.html index 07017a68..f706c5fe 100644 --- a/themes/opentermsarchive/layouts/partials/footer.html +++ b/themes/opentermsarchive/layouts/partials/footer.html @@ -1,85 +1,69 @@
-
+
-
+
+{{ $iconsJs := resources.Get "js/icons.js" | js.Build }} + + +{{ $brandsJs := resources.Get "js/brands.js" | js.Build }} + + {{ $languageSwitcherJs := resources.Get "js/languageSwitcher.js" | js.Build }} {{ $headerJs := resources.Get "js/header.js" | js.Build }} - - diff --git a/themes/opentermsarchive/layouts/partials/header.html b/themes/opentermsarchive/layouts/partials/header.html index 3a5563fa..849c6a69 100644 --- a/themes/opentermsarchive/layouts/partials/header.html +++ b/themes/opentermsarchive/layouts/partials/header.html @@ -1,76 +1,81 @@
-
diff --git a/themes/opentermsarchive/layouts/partials/sprite.svg b/themes/opentermsarchive/layouts/partials/sprite.svg index bc3b9f80..c2431c2a 100644 --- a/themes/opentermsarchive/layouts/partials/sprite.svg +++ b/themes/opentermsarchive/layouts/partials/sprite.svg @@ -1,79 +1,34 @@