New footer (#2988)

* Update footer to new design

* Update footer with changelog and security notice

* Move mastodon icon

* Make full-width instead of card

* Intl extract, lint
This commit is contained in:
Prospector
2025-02-19 22:01:29 -08:00
committed by GitHub
parent df33ff7f60
commit db09ded836
10 changed files with 399 additions and 274 deletions

View File

@@ -472,97 +472,88 @@
<OrganizationCreateModal ref="modal_organization_creation" />
<slot id="main" />
</main>
<footer>
<div class="logo-info" role="region" aria-label="Modrinth information">
<BrandTextLogo
aria-hidden="true"
class="text-logo button-base mx-auto mb-4 lg:mx-0"
@click="developerModeIncrement()"
/>
<p class="mb-4">
<IntlFormatted :message-id="footerMessages.openSource">
<template #github-link="{ children }">
<a
:target="$external()"
href="https://github.com/modrinth"
class="text-link"
rel="noopener"
>
<component :is="() => children" />
</a>
</template>
</IntlFormatted>
</p>
<p class="mb-4">
{{ config.public.branch }}@<a
:target="$external()"
:href="
'https://github.com/' +
config.public.owner +
'/' +
config.public.slug +
'/tree/' +
config.public.hash
"
class="text-link"
rel="noopener"
>{{ config.public.hash.substring(0, 7) }}</a
>
</p>
<p>© Rinth, Inc.</p>
</div>
<div class="links links-1" role="region" aria-label="Legal">
<h4 aria-hidden="true">{{ formatMessage(footerMessages.companyTitle) }}</h4>
<nuxt-link to="/legal/terms"> {{ formatMessage(footerMessages.terms) }}</nuxt-link>
<nuxt-link to="/legal/privacy"> {{ formatMessage(footerMessages.privacy) }}</nuxt-link>
<nuxt-link to="/legal/rules"> {{ formatMessage(footerMessages.rules) }}</nuxt-link>
<a :target="$external()" href="https://careers.modrinth.com">
{{ formatMessage(footerMessages.careers) }}
<span v-if="false" class="count-bubble">0</span>
</a>
</div>
<div class="links links-2" role="region" aria-label="Resources">
<h4 aria-hidden="true">{{ formatMessage(footerMessages.resourcesTitle) }}</h4>
<a :target="$external()" href="https://support.modrinth.com">
{{ formatMessage(footerMessages.support) }}
</a>
<a :target="$external()" href="https://blog.modrinth.com">
{{ formatMessage(footerMessages.blog) }}
</a>
<a :target="$external()" href="https://docs.modrinth.com">
{{ formatMessage(footerMessages.docs) }}
</a>
<a :target="$external()" href="https://status.modrinth.com">
{{ formatMessage(footerMessages.status) }}
</a>
</div>
<div class="links links-3" role="region" aria-label="Interact">
<h4 aria-hidden="true">{{ formatMessage(footerMessages.interactTitle) }}</h4>
<a rel="noopener" :target="$external()" href="https://discord.modrinth.com"> Discord </a>
<a rel="noopener" :target="$external()" href="https://x.com/modrinth"> X (Twitter) </a>
<a rel="noopener" :target="$external()" href="https://floss.social/@modrinth"> Mastodon </a>
<a rel="noopener" :target="$external()" href="https://crowdin.com/project/modrinth">
Crowdin
</a>
</div>
<div class="buttons">
<nuxt-link class="btn btn-outline btn-primary" to="/app">
<DownloadIcon aria-hidden="true" />
{{ formatMessage(messages.getModrinthApp) }}
</nuxt-link>
<button class="iconified-button raised-button" @click="changeTheme">
<MoonIcon v-if="$theme.active === 'light'" aria-hidden="true" />
<SunIcon v-else aria-hidden="true" />
{{ formatMessage(messages.changeTheme) }}
</button>
<nuxt-link class="iconified-button raised-button" to="/settings">
<SettingsIcon aria-hidden="true" />
{{ formatMessage(commonMessages.settingsLabel) }}
</nuxt-link>
</div>
<div class="not-affiliated-notice">
<footer class="experimental-styles-within">
<div class="flex justify-center p-6 text-center text-sm font-medium">
{{ formatMessage(footerMessages.legalDisclaimer) }}
</div>
<div class="footer-brand-background border-0 border-t-[1px] border-solid">
<div
class="mx-auto grid max-w-screen-xl grid-cols-1 flex-col gap-4 p-7 pb-24 text-primary sm:px-12 md:grid-cols-[1fr_2fr] md:py-12 lg:grid-cols-[auto_auto_auto_auto_auto]"
>
<div
class="flex flex-col items-center gap-3 md:items-start"
role="region"
aria-label="Modrinth information"
>
<BrandTextLogo
aria-hidden="true"
class="text-logo button-base h-6 w-auto text-contrast lg:h-8"
@click="developerModeIncrement()"
/>
<div class="flex flex-wrap justify-center gap-px sm:-mx-2">
<ButtonStyled
v-for="(social, index) in socialLinks"
:key="`footer-social-${index}`"
circular
type="transparent"
>
<a
v-tooltip="social.label"
:href="social.href"
target="_blank"
:rel="`noopener${social.rel ? ` ${social.rel}` : ''}`"
>
<component :is="social.icon" class="h-5 w-5" />
</a>
</ButtonStyled>
</div>
<div class="mt-auto flex flex-wrap justify-center gap-3 md:flex-col">
<p class="m-0">
<IntlFormatted :message-id="footerMessages.openSource">
<template #github-link="{ children }">
<a
href="https://github.com/modrinth/code"
class="text-brand hover:underline"
target="_blank"
rel="noopener"
>
<component :is="() => children" />
</a>
</template>
</IntlFormatted>
</p>
<p class="m-0">© 2024 Rinth, Inc.</p>
</div>
</div>
<div class="mt-4 grid grid-cols-1 gap-6 sm:grid-cols-2 lg:contents">
<div
v-for="group in footerLinks"
:key="group.label"
class="flex flex-col items-center gap-3 sm:items-start"
>
<h3 class="m-0 text-base text-contrast">{{ group.label }}</h3>
<template v-for="item in group.links" :key="item.label">
<nuxt-link
v-if="item.href.startsWith('/')"
:to="item.href"
class="w-fit hover:underline"
>
{{ item.label }}
</nuxt-link>
<a
v-else
:href="item.href"
class="w-fit hover:underline"
target="_blank"
rel="noopener"
>
{{ item.label }}
</a>
</template>
</div>
</div>
</div>
</div>
</footer>
</div>
</template>
@@ -599,6 +590,12 @@ import {
GlassesIcon,
PaintBrushIcon,
PackageOpenIcon,
DiscordIcon,
BlueskyIcon,
TumblrIcon,
TwitterIcon,
MastodonIcon,
GitHubIcon,
XIcon as CrossIcon,
ScaleIcon as ModerationIcon,
BellIcon as NotificationIcon,
@@ -708,50 +705,6 @@ const footerMessages = defineMessages({
id: "layout.footer.open-source",
defaultMessage: "Modrinth is <github-link>open source</github-link>.",
},
companyTitle: {
id: "layout.footer.company.title",
defaultMessage: "Company",
},
terms: {
id: "layout.footer.company.terms",
defaultMessage: "Terms",
},
privacy: {
id: "layout.footer.company.privacy",
defaultMessage: "Privacy",
},
rules: {
id: "layout.footer.company.rules",
defaultMessage: "Rules",
},
careers: {
id: "layout.footer.company.careers",
defaultMessage: "Careers",
},
resourcesTitle: {
id: "layout.footer.resources.title",
defaultMessage: "Resources",
},
support: {
id: "layout.footer.resources.support",
defaultMessage: "Support",
},
blog: {
id: "layout.footer.resources.blog",
defaultMessage: "Blog",
},
docs: {
id: "layout.footer.resources.docs",
defaultMessage: "Docs",
},
status: {
id: "layout.footer.resources.status",
defaultMessage: "Status",
},
interactTitle: {
id: "layout.footer.interact.title",
defaultMessage: "Interact",
},
legalDisclaimer: {
id: "layout.footer.legal-disclaimer",
defaultMessage:
@@ -1023,6 +976,188 @@ const { cycle: changeTheme } = useTheme();
function hideStagingBanner() {
cosmetics.value.hideStagingBanner = true;
}
const socialLinks = [
{
label: formatMessage(
defineMessage({ id: "layout.footer.social.discord", defaultMessage: "Discord" }),
),
href: "https://discord.modrinth.com",
icon: DiscordIcon,
},
{
label: formatMessage(
defineMessage({ id: "layout.footer.social.bluesky", defaultMessage: "Bluesky" }),
),
href: "https://bsky.app/profile/modrinth.com",
icon: BlueskyIcon,
},
{
label: formatMessage(
defineMessage({ id: "layout.footer.social.mastodon", defaultMessage: "Mastodon" }),
),
href: "https://floss.social/@modrinth",
icon: MastodonIcon,
rel: "me",
},
{
label: formatMessage(
defineMessage({ id: "layout.footer.social.tumblr", defaultMessage: "Tumblr" }),
),
href: "https://tumblr.com/modrinth",
icon: TumblrIcon,
},
{
label: formatMessage(defineMessage({ id: "layout.footer.social.x", defaultMessage: "X" })),
href: "https://x.com/modrinth",
icon: TwitterIcon,
},
{
label: formatMessage(
defineMessage({ id: "layout.footer.social.github", defaultMessage: "GitHub" }),
),
href: "https://github.com/modrinth",
icon: GitHubIcon,
},
];
const footerLinks = [
{
label: formatMessage(defineMessage({ id: "layout.footer.about", defaultMessage: "About" })),
links: [
{
href: "https://blog.modrinth.com",
label: formatMessage(
defineMessage({ id: "layout.footer.about.blog", defaultMessage: "Blog" }),
),
},
{
href: "/news/changelog",
label: formatMessage(
defineMessage({ id: "layout.footer.about.changelog", defaultMessage: "Changelog" }),
),
},
{
href: "https://status.modrinth.com",
label: formatMessage(
defineMessage({ id: "layout.footer.about.status", defaultMessage: "Status" }),
),
},
{
href: "/legal/cmp-info",
label: formatMessage(
defineMessage({
id: "layout.footer.about.rewards-program",
defaultMessage: "Rewards Program",
}),
),
},
],
},
{
label: formatMessage(
defineMessage({ id: "layout.footer.products", defaultMessage: "Products" }),
),
links: [
{
href: "/plus",
label: formatMessage(
defineMessage({ id: "layout.footer.products.plus", defaultMessage: "Modrinth+" }),
),
},
{
href: "/app",
label: formatMessage(
defineMessage({ id: "layout.footer.products.app", defaultMessage: "Modrinth App" }),
),
},
{
href: "/servers",
label: formatMessage(
defineMessage({
id: "layout.footer.products.servers",
defaultMessage: "Modrinth Servers",
}),
),
},
],
},
{
label: formatMessage(
defineMessage({ id: "layout.footer.resources", defaultMessage: "Resources" }),
),
links: [
{
href: "https://support.modrinth.com",
label: formatMessage(
defineMessage({
id: "layout.footer.resources.help-center",
defaultMessage: "Help Center",
}),
),
},
{
href: "https://crowdin.com/project/modrinth",
label: formatMessage(
defineMessage({ id: "layout.footer.resources.translate", defaultMessage: "Translate" }),
),
},
{
href: "https://github.com/modrinth/code/issues",
label: formatMessage(
defineMessage({
id: "layout.footer.resources.report-issues",
defaultMessage: "Report issues",
}),
),
},
{
href: "https://docs.modrinth.com/api/",
label: formatMessage(
defineMessage({
id: "layout.footer.resources.api-docs",
defaultMessage: "API documentation",
}),
),
},
],
},
{
label: formatMessage(defineMessage({ id: "layout.footer.legal", defaultMessage: "Legal" })),
links: [
{
href: "/legal/rules",
label: formatMessage(
defineMessage({ id: "layout.footer.legal.rules", defaultMessage: "Content Rules" }),
),
},
{
href: "/legal/terms",
label: formatMessage(
defineMessage({ id: "layout.footer.legal.terms-of-use", defaultMessage: "Terms of Use" }),
),
},
{
href: "/legal/privacy",
label: formatMessage(
defineMessage({
id: "layout.footer.legal.privacy-policy",
defaultMessage: "Privacy Policy",
}),
),
},
{
href: "/legal/security",
label: formatMessage(
defineMessage({
id: "layout.footer.legal.security-notice",
defaultMessage: "Security Notice",
}),
),
},
],
},
];
</script>
<style lang="scss">
@@ -1037,127 +1172,9 @@ function hideStagingBanner() {
min-height: calc(100vh - var(--spacing-card-bg));
}
@media screen and (max-width: 750px) {
margin-bottom: calc(var(--size-mobile-navbar-height) + 2rem);
}
main {
grid-area: main;
}
footer {
margin: 6rem 0 2rem 0;
text-align: center;
display: grid;
grid-template:
"logo-info logo-info logo-info" auto
"links-1 links-2 links-3" auto
"buttons buttons buttons" auto
"notice notice notice" auto
/ 1fr 1fr 1fr;
max-width: 1280px;
.logo-info {
margin-left: auto;
margin-right: auto;
max-width: 15rem;
margin-bottom: 1rem;
grid-area: logo-info;
.text-logo {
width: 10rem;
height: auto;
}
}
.links {
display: flex;
flex-direction: column;
margin-bottom: 1rem;
h4 {
color: var(--color-text-dark);
margin: 0 0 1rem 0;
}
a {
margin: 0 0 1rem 0;
}
&.links-1 {
grid-area: links-1;
}
&.links-2 {
grid-area: links-2;
}
&.links-3 {
grid-area: links-3;
}
.count-bubble {
font-size: 1rem;
border-radius: 5rem;
background: var(--color-brand);
color: var(--color-text-inverted);
padding: 0 0.35rem;
margin-left: 0.25rem;
}
}
.buttons {
margin-left: auto;
margin-right: auto;
grid-area: buttons;
button,
a {
margin-bottom: 0.5rem;
margin-left: auto;
margin-right: auto;
}
}
.not-affiliated-notice {
grid-area: notice;
font-size: var(--font-size-xs);
text-align: center;
font-weight: 500;
margin-top: var(--spacing-card-md);
}
@media screen and (min-width: 1024px) {
display: grid;
margin-inline: auto;
grid-template:
"logo-info links-1 links-2 links-3 buttons" auto
"notice notice notice notice notice" auto;
text-align: unset;
.logo-info {
margin-right: 4rem;
}
.links {
margin-right: 4rem;
}
.buttons {
width: unset;
margin-left: 0;
button,
a {
margin-right: unset;
}
}
.not-affiliated-notice {
margin-top: 0;
}
}
}
}
@media (min-width: 1024px) {
@@ -1445,5 +1462,10 @@ function hideStagingBanner() {
display: flex;
}
}
.footer-brand-background {
background: var(--brand-gradient-strong-bg);
border-color: var(--brand-gradient-border);
}
</style>
<style src="vue-multiselect/dist/vue-multiselect.css"></style>

View File

@@ -287,45 +287,87 @@
"layout.banner.verify-email.title": {
"message": "For security purposes, please verify your email address on Modrinth."
},
"layout.footer.company.careers": {
"message": "Careers"
"layout.footer.about": {
"message": "About"
},
"layout.footer.company.privacy": {
"message": "Privacy"
"layout.footer.about.blog": {
"message": "Blog"
},
"layout.footer.company.rules": {
"message": "Rules"
"layout.footer.about.changelog": {
"message": "Changelog"
},
"layout.footer.company.terms": {
"message": "Terms"
"layout.footer.about.rewards-program": {
"message": "Rewards Program"
},
"layout.footer.company.title": {
"message": "Company"
"layout.footer.about.status": {
"message": "Status"
},
"layout.footer.interact.title": {
"message": "Interact"
"layout.footer.legal": {
"message": "Legal"
},
"layout.footer.legal-disclaimer": {
"message": "NOT AN OFFICIAL MINECRAFT SERVICE. NOT APPROVED BY OR ASSOCIATED WITH MOJANG OR MICROSOFT."
},
"layout.footer.legal.privacy-policy": {
"message": "Privacy Policy"
},
"layout.footer.legal.rules": {
"message": "Content Rules"
},
"layout.footer.legal.security-notice": {
"message": "Security Notice"
},
"layout.footer.legal.terms-of-use": {
"message": "Terms of Use"
},
"layout.footer.open-source": {
"message": "Modrinth is <github-link>open source</github-link>."
},
"layout.footer.resources.blog": {
"message": "Blog"
"layout.footer.products": {
"message": "Products"
},
"layout.footer.resources.docs": {
"message": "Docs"
"layout.footer.products.app": {
"message": "Modrinth App"
},
"layout.footer.resources.status": {
"message": "Status"
"layout.footer.products.plus": {
"message": "Modrinth+"
},
"layout.footer.resources.support": {
"message": "Support"
"layout.footer.products.servers": {
"message": "Modrinth Servers"
},
"layout.footer.resources.title": {
"layout.footer.resources": {
"message": "Resources"
},
"layout.footer.resources.api-docs": {
"message": "API documentation"
},
"layout.footer.resources.help-center": {
"message": "Help Center"
},
"layout.footer.resources.report-issues": {
"message": "Report issues"
},
"layout.footer.resources.translate": {
"message": "Translate"
},
"layout.footer.social.bluesky": {
"message": "Bluesky"
},
"layout.footer.social.discord": {
"message": "Discord"
},
"layout.footer.social.github": {
"message": "GitHub"
},
"layout.footer.social.mastodon": {
"message": "Mastodon"
},
"layout.footer.social.tumblr": {
"message": "Tumblr"
},
"layout.footer.social.x": {
"message": "X"
},
"layout.menu-toggle.action": {
"message": "Toggle menu"
},