diff --git a/app/javascript/flavours/glitch/features/getting_started/index.tsx b/app/javascript/flavours/glitch/features/getting_started/index.tsx
index f30598bb49..73a837969e 100644
--- a/app/javascript/flavours/glitch/features/getting_started/index.tsx
+++ b/app/javascript/flavours/glitch/features/getting_started/index.tsx
@@ -13,7 +13,7 @@ const GettingStarted: React.FC = () => {
-
+
diff --git a/app/javascript/flavours/glitch/features/ui/components/compose_panel.tsx b/app/javascript/flavours/glitch/features/ui/components/compose_panel.tsx
index f1c4e508db..54f2730fd4 100644
--- a/app/javascript/flavours/glitch/features/ui/components/compose_panel.tsx
+++ b/app/javascript/flavours/glitch/features/ui/components/compose_panel.tsx
@@ -51,7 +51,7 @@ export const ComposePanel: React.FC = () => {
{signedIn && !hideComposer && <ComposeFormContainer singleColumn />}
{signedIn && hideComposer && <div className='compose-form' />}
- <LinkFooter multiColumn={!singleColumn} />
+ <LinkFooter context={singleColumn ? 'default' : 'multi-column'} />
</div>
);
};
diff --git a/app/javascript/flavours/glitch/features/ui/components/link_footer.module.scss b/app/javascript/flavours/glitch/features/ui/components/link_footer.module.scss
new file mode 100644
index 0000000000..f2b094744e
--- /dev/null
+++ b/app/javascript/flavours/glitch/features/ui/components/link_footer.module.scss
@@ -0,0 +1,61 @@
+.wrapper {
+ z-index: 1;
+ flex: 0 0 auto;
+ display: flex;
+ flex-direction: column;
+ gap: 20px;
+ font-size: 13px;
+ color: var(--color-text-secondary);
+
+ &[data-context='default'] {
+ padding: 20px 0;
+ }
+
+ &[data-context='multi-column'] {
+ padding: 15px;
+ }
+
+ &[data-context='about'] {
+ margin-top: 60px;
+ text-align: center;
+ font-size: 15px;
+ line-height: 22px;
+
+ @media screen and (width >= 1175px) {
+ display: none;
+ }
+ }
+}
+
+.heading {
+ display: inline;
+ margin-inline-end: 0.3em;
+ font-weight: 500;
+}
+
+.list {
+ display: inline;
+
+ li {
+ display: inline;
+
+ &:not(:last-child)::after {
+ content: ' · ';
+ }
+ }
+
+ a {
+ color: var(--color-text-secondary);
+ text-decoration: underline;
+
+ &:hover,
+ &:focus,
+ &:active {
+ text-decoration: none;
+ }
+ }
+}
+
+.version {
+ white-space: nowrap;
+}
diff --git a/app/javascript/flavours/glitch/features/ui/components/link_footer.tsx b/app/javascript/flavours/glitch/features/ui/components/link_footer.tsx
index c5be25ed17..14083f90a4 100644
--- a/app/javascript/flavours/glitch/features/ui/components/link_footer.tsx
+++ b/app/javascript/flavours/glitch/features/ui/components/link_footer.tsx
@@ -11,94 +11,110 @@ import {
termsOfServiceEnabled,
} from 'flavours/glitch/initial_state';
-const DividingCircle: React.FC = () => <span aria-hidden>{' · '}</span>;
+import classes from './link_footer.module.scss';
export const LinkFooter: React.FC<{
- multiColumn: boolean;
-}> = ({ multiColumn }) => {
+ context?: 'default' | 'multi-column' | 'about';
+}> = ({ context = 'default' }) => {
+ const multiColumn = context === 'multi-column';
+
return (
- <div className='link-footer'>
- <p>
- <strong>{domain}</strong>:{' '}
- <Link to='/about' target={multiColumn ? '_blank' : undefined}>
- <FormattedMessage
- id='footer.about_this_server'
- defaultMessage='About'
- />
- </Link>
- {statusPageUrl && (
- <>
- <DividingCircle />
- <a href={statusPageUrl} target='_blank' rel='noopener'>
- <FormattedMessage id='footer.status' defaultMessage='Status' />
- </a>
- </>
- )}
- {canProfileDirectory && (
- <>
- <DividingCircle />
- <Link to='/directory'>
+ <footer className={classes.wrapper} data-context={context}>
+ <section>
+ <h2 className={classes.heading}>{`${domain}:`}</h2>
+ <ul className={classes.list}>
+ <li>
+ <Link to='/about' target={multiColumn ? '_blank' : undefined}>
<FormattedMessage
- id='footer.directory'
- defaultMessage='Profiles directory'
+ id='footer.about_this_server'
+ defaultMessage='About'
/>
</Link>
- </>
- )}
- <DividingCircle />
- <Link
- to='/privacy-policy'
- target={multiColumn ? '_blank' : undefined}
- rel='privacy-policy'
- >
- <FormattedMessage
- id='footer.privacy_policy'
- defaultMessage='Privacy policy'
- />
- </Link>
- {termsOfServiceEnabled && (
- <>
- <DividingCircle />
+ </li>
+ {statusPageUrl && (
+ <li>
+ <a href={statusPageUrl} target='_blank' rel='noopener'>
+ <FormattedMessage id='footer.status' defaultMessage='Status' />
+ </a>
+ </li>
+ )}
+ {canProfileDirectory && (
+ <li>
+ <Link to='/directory'>
+ <FormattedMessage
+ id='footer.directory'
+ defaultMessage='Profiles directory'
+ />
+ </Link>
+ </li>
+ )}
+ <li>
<Link
- to='/terms-of-service'
+ to='/privacy-policy'
target={multiColumn ? '_blank' : undefined}
- rel='terms-of-service'
+ rel='privacy-policy'
>
<FormattedMessage
- id='footer.terms_of_service'
- defaultMessage='Terms of service'
+ id='footer.privacy_policy'
+ defaultMessage='Privacy policy'
/>
</Link>
- </>
- )}
- </p>
-
- <p>
- <strong>Mastodon</strong>:{' '}
- <a href='https://joinmastodon.org' target='_blank' rel='noopener'>
- <FormattedMessage id='footer.about' defaultMessage='About' />
- </a>
- <DividingCircle />
- <a href='https://joinmastodon.org/apps' target='_blank' rel='noopener'>
- <FormattedMessage id='footer.get_app' defaultMessage='Get the app' />
- </a>
- <DividingCircle />
- <Link to='/keyboard-shortcuts'>
- <FormattedMessage
- id='footer.keyboard_shortcuts'
- defaultMessage='Keyboard shortcuts'
- />
- </Link>
- <DividingCircle />
- <a href={source_url} rel='noopener' target='_blank'>
- <FormattedMessage
- id='footer.source_code'
- defaultMessage='View source code'
- />
- </a>
- <DividingCircle />
- <span className='version'>v{version}</span>
- </p>
- </div>
+ </li>
+ {termsOfServiceEnabled && (
+ <li>
+ <Link
+ to='/terms-of-service'
+ target={multiColumn ? '_blank' : undefined}
+ rel='terms-of-service'
+ >
+ <FormattedMessage
+ id='footer.terms_of_service'
+ defaultMessage='Terms of service'
+ />
+ </Link>
+ </li>
+ )}
+ </ul>
+ </section>
+ <section>
+ <h2 className={classes.heading}>Mastodon:</h2>
+ <ul className={classes.list}>
+ <li>
+ <a href='https://joinmastodon.org' target='_blank' rel='noopener'>
+ <FormattedMessage id='footer.about' defaultMessage='About' />
+ </a>
+ </li>
+ <li>
+ <a
+ href='https://joinmastodon.org/apps'
+ target='_blank'
+ rel='noopener'
+ >
+ <FormattedMessage
+ id='footer.get_app'
+ defaultMessage='Get the app'
+ />
+ </a>
+ </li>
+ <li>
+ <Link to='/keyboard-shortcuts'>
+ <FormattedMessage
+ id='footer.keyboard_shortcuts'
+ defaultMessage='Keyboard shortcuts'
+ />
+ </Link>
+ </li>
+ <li>
+ <a href={source_url} rel='noopener' target='_blank'>
+ <FormattedMessage
+ id='footer.source_code'
+ defaultMessage='View source code'
+ />
+ </a>
+ </li>
+ <li className={classes.version}>v{version}</li>
+ </ul>
+ </section>
+ </footer>
);
};
diff --git a/app/javascript/flavours/glitch/styles/mastodon/components.scss b/app/javascript/flavours/glitch/styles/mastodon/components.scss
index eb514988f5..d3d1ed484f 100644
--- a/app/javascript/flavours/glitch/styles/mastodon/components.scss
+++ b/app/javascript/flavours/glitch/styles/mastodon/components.scss
@@ -9977,41 +9977,6 @@ noscript {
}
}
-.link-footer {
- flex: 0 0 auto;
- padding-top: 20px;
- z-index: 1;
- font-size: 13px;
-
- .column & {
- padding: 15px;
- }
-
- p {
- color: var(--color-text-secondary);
- margin-bottom: 20px;
-
- .version {
- white-space: nowrap;
- }
-
- strong {
- font-weight: 500;
- }
-
- a {
- color: var(--color-text-secondary);
- text-decoration: underline;
-
- &:hover,
- &:focus,
- &:active {
- text-decoration: none;
- }
- }
- }
-}
-
.about {
padding: 20px;
border-top: 1px solid var(--color-border-primary);
@@ -10148,18 +10113,6 @@ noscript {
}
}
- .link-footer {
- padding: 0;
- margin-top: 60px;
- text-align: center;
- font-size: 15px;
- line-height: 22px;
-
- @media screen and (min-width: $no-gap-breakpoint) {
- display: none;
- }
- }
-
.account {
padding: 0;
border: 0;