diff --git a/app/javascript/flavours/glitch/components/logo.jsx b/app/javascript/flavours/glitch/components/logo.jsx index ee5c22496..60e8f40b2 100644 --- a/app/javascript/flavours/glitch/components/logo.jsx +++ b/app/javascript/flavours/glitch/components/logo.jsx @@ -1,10 +1,15 @@ import React from 'react'; +import logo from 'mastodon/../images/logo.svg'; -const Logo = () => ( - +export const WordmarkLogo = () => ( + Mastodon ); -export default Logo; +export const SymbolLogo = () => ( + Mastodon +); + +export default WordmarkLogo; diff --git a/app/javascript/flavours/glitch/features/ui/components/header.jsx b/app/javascript/flavours/glitch/features/ui/components/header.jsx index f7bab2487..42ed4d901 100644 --- a/app/javascript/flavours/glitch/features/ui/components/header.jsx +++ b/app/javascript/flavours/glitch/features/ui/components/header.jsx @@ -1,5 +1,5 @@ import React from 'react'; -import Logo from 'flavours/glitch/components/logo'; +import { WordmarkLogo, SymbolLogo } from 'flavours/glitch/components/logo'; import { Link, withRouter } from 'react-router-dom'; import { FormattedMessage } from 'react-intl'; import { registrationsOpen, me } from 'flavours/glitch/initial_state'; @@ -74,7 +74,10 @@ class Header extends React.PureComponent { return (
- + + + +
{content} diff --git a/app/javascript/flavours/glitch/styles/components/columns.scss b/app/javascript/flavours/glitch/styles/components/columns.scss index a72afe726..f9a5720e5 100644 --- a/app/javascript/flavours/glitch/styles/components/columns.scss +++ b/app/javascript/flavours/glitch/styles/components/columns.scss @@ -62,10 +62,9 @@ $ui-header-height: 55px; height: $ui-header-height; position: sticky; top: 0; - z-index: 2; + z-index: 3; justify-content: space-between; align-items: center; - overflow: hidden; &__logo { display: inline-flex; @@ -75,6 +74,20 @@ $ui-header-height: 55px; height: $ui-header-height - 30px; width: auto; } + + .logo--wordmark { + display: none; + } + + @media screen and (min-width: 320px) { + .logo--wordmark { + display: block; + } + + .logo--icon { + display: none; + } + } } &__links {