maverick/docbrown
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Logo style updates (#15732)

Browse source 
* feat: update logo if, else if

* logo fixes

* .

* Update app/views/layouts/_logo.html.erb

Co-authored-by: Michael Kohl <citizen428@forem.com>

* object fit

Co-authored-by: Paweł Ludwiczak <ludwiczakpawel@gmail.com>
Co-authored-by: Michael Kohl <citizen428@forem.com>
This commit is contained in:
Ridhwana 2021-12-14 18:02:24 +02:00 • committed by GitHub
parent c6868795cd
commit 8f27cd4cbe
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 37 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

43
app/assets/stylesheets/base/main.scss
View file

@ -69,15 +69,28 @@ a {
display: inline-flex;
flex-shrink: 0;
align-self: stretch;
align-self: center;
align-items: center;
vertical-align: middle;
color: var(--base-100);
text-decoration: none;
letter-spacing: -0.01em;
line-height: var(--lh-tight);
letter-spacing: -0.02em;
line-height: 1;
outline: 0;
overflow-wrap: anywhere;
&__img,
svg {
max-width: 100%;
max-height: calc(
var(--header-height) - var(--su-2) * 2
); // making calculations instead of setting fixed value so should be smooth change if we ever decide to change header's height.
object-fit: contain;
vertical-align: middle;
display: inline-block;
outline: 0;
}
@media (min-width: $breakpoint-s) {
--max-width: 150px;
}
@ -95,14 +108,24 @@ a {
&:hover {
color: var(--base-80);
text-decoration: none;
text-decoration: underline;
}
svg {
max-width: 100%;
width: auto;
height: calc(var(--header-height) - var(--su-2) * 2);
vertical-align: middle;
display: inline-block;
// Both focus declarations below are the same but we unfortunately can't
// combine them because Safari doesn't recognize it properly.
// • First declaration is for all browsers that support :focus-visible
// which is basically almost all of them
// • Second declaration is for browsers that do not support :focus-visible
// which basically is only Safari right now.
&:focus-visible {
z-index: var(--z-elevate);
box-shadow: var(--focus-ring);
text-decoration: underline;
}
.js-focus-visible &.focus-visible:focus {
z-index: var(--z-elevate);
box-shadow: var(--focus-ring);
text-decoration: underline;
}
}

8
app/views/layouts/_logo.html.erb
View file

@ -1,8 +1,8 @@
<a href="/" class="<%= "site-logo" unless FeatureFlag.enabled?(:creator_onboarding) %>" aria-label="<%= t("views.main.aria_home") %>">
<% if Settings::General.logo_svg.present? %>
<a href="<%= root_path %>" class="site-logo" aria-label="<%= t("views.main.aria_home", community: community_name) %>">
<% if FeatureFlag.enabled?(:creator_onboarding) %>
<img class="site-logo__img" src="<%= Settings::General.resized_logo %>" alt="<%= community_name %>">
<% elsif Settings::General.logo_svg.present? %>
<%= logo_svg %>
<% elsif FeatureFlag.enabled?(:creator_onboarding) %>
<img class="site-logo" src="<%= Settings::General.resized_logo %>" alt="<%= community_name %>">
<% else %>
<span class="truncate-at-2">
<%= community_name %>