diff --git a/app/assets/stylesheets/base/main.scss b/app/assets/stylesheets/base/main.scss index 673591bfe..2ad4e533a 100644 --- a/app/assets/stylesheets/base/main.scss +++ b/app/assets/stylesheets/base/main.scss @@ -36,3 +36,48 @@ a { color: var(--link-brand-color); text-decoration: none; } + +// Logo +.site-logo { + max-width: var(--max-width, 125px); + font-size: var(--font-size, var(--fs-base)); + font-weight: var(--font-weight, var(--fw-medium)); + + display: inline-flex; + align-self: stretch; + align-items: center; + vertical-align: middle; + color: var(--base-100); + text-decoration: none; + letter-spacing: -0.01em; + line-height: var(--lh-tight); + overflow-wrap: anywhere; + + @media (min-width: $breakpoint-s) { + --max-width: 150px; + } + + @media (min-width: $breakpoint-m) { + --max-width: 175px; + --font-size: var(--fs-l); + --font-weight: var(--fw-bold); + } + + @media (min-width: $breakpoint-l) { + --max-width: 200px; + --font-size: var(--fs-xl); + } + + &:hover { + color: var(--base-80); + text-decoration: none; + } + + svg { + max-width: 100%; + width: auto; + height: calc(var(--header-height) - var(--su-2) * 2); + vertical-align: middle; + display: inline-block; + } +} diff --git a/app/assets/stylesheets/components/header.scss b/app/assets/stylesheets/components/header.scss index d2de8a0d6..2cadb301f 100644 --- a/app/assets/stylesheets/components/header.scss +++ b/app/assets/stylesheets/components/header.scss @@ -38,27 +38,6 @@ } } -// Logo -.site-logo { - display: flex; - max-width: 20%; - - .logo { - width: 50px; - height: 40px; - padding: 0 7px 0 9px; // TODO: we have to fix SVG for logo a little... - background: var(--logo-bg); - fill: var(--logo-color); - border-radius: 3px; - } - - svg { - height: calc(var(--header-height)); - width: auto; - padding: 0.5em; - } -} - // Search bar .crayons-header--search { max-width: 420px; diff --git a/app/javascript/article-form/articleForm.jsx b/app/javascript/article-form/articleForm.jsx index c8708f2d9..c502fd412 100644 --- a/app/javascript/article-form/articleForm.jsx +++ b/app/javascript/article-form/articleForm.jsx @@ -47,7 +47,7 @@ export default class ArticleForm extends Component { version: PropTypes.string.isRequired, article: PropTypes.string.isRequired, organizations: PropTypes.string, - logoSvg: PropTypes.string.isRequired, + siteLogo: PropTypes.string.isRequired, }; static defaultProps = { @@ -56,7 +56,7 @@ export default class ArticleForm extends Component { constructor(props) { super(props); - const { article, version, logoSvg } = this.props; + const { article, version, siteLogo } = this.props; let { organizations } = this.props; this.article = JSON.parse(article); organizations = organizations ? JSON.parse(organizations) : null; @@ -101,7 +101,7 @@ export default class ArticleForm extends Component { edited: false, updatedAt: this.article.updated_at, version, - logoSvg, + siteLogo, helpFor: null, helpPosition: null, ...previousContentState, @@ -300,7 +300,7 @@ export default class ArticleForm extends Component { version, helpFor, helpPosition, - logoSvg, + siteLogo, } = this.state; return ( @@ -316,7 +316,7 @@ export default class ArticleForm extends Component { organizations={organizations} organizationId={organizationId} onToggle={this.handleOrgIdChange} - logoSvg={logoSvg} + siteLogo={siteLogo} /> {previewShowing ? ( diff --git a/app/javascript/article-form/components/Header.jsx b/app/javascript/article-form/components/Header.jsx index 2f4e95e3a..c5da0d90d 100644 --- a/app/javascript/article-form/components/Header.jsx +++ b/app/javascript/article-form/components/Header.jsx @@ -10,16 +10,14 @@ export const Header = ({ organizations, organizationId, onToggle, - logoSvg, + siteLogo, }) => { return (
- , root, root.firstElementChild, diff --git a/app/views/articles/_v2_form.html.erb b/app/views/articles/_v2_form.html.erb index 679e6becf..8cc7beb63 100644 --- a/app/views/articles/_v2_form.html.erb +++ b/app/views/articles/_v2_form.html.erb @@ -17,11 +17,13 @@ data-article="<%= article.to_json(only: %i[id title cached_tag_list published body_markdown main_image organization_id canonical_url updated_at], methods: %i[series all_series]) %>" data-organizations="<%= organizations&.to_json(only: %i[id name bg_color_hex text_color_hex], methods: [:profile_image_90]) %>" data-version="<%= version %>" - data-logo-svg='<%= logo_svg %>'> + data-site-logo='<%= render "layouts/logo" %>'>
- +
diff --git a/app/views/layouts/_footer.html.erb b/app/views/layouts/_footer.html.erb index 9be7812e3..a1fc4c32d 100644 --- a/app/views/layouts/_footer.html.erb +++ b/app/views/layouts/_footer.html.erb @@ -1,7 +1,7 @@