Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Logo fixes #237

Merged
merged 4 commits into from
Oct 6, 2016
Merged

Logo fixes #237

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
79b197b
Fix logo breaking layout when increasing font size
selfthinker Jul 27, 2016
81108eb
Fix invalid or non-standard CSS around logo
selfthinker Jul 27, 2016
8bbaa06
Remove obsolete CSS around logo
selfthinker Jul 27, 2016
973c9e4
Change logo dimensions to be divisible by 2
selfthinker Aug 10, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file modified source/assets/images/gov.uk_logotype_crown_invert_trans.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
18 changes: 8 additions & 10 deletions source/assets/stylesheets/_core-print.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,23 +37,21 @@ img { max-width: 100% !important; }
select { background: white; }

#global-header {
color: #000;
font-weight: bold;
font-size: 24px;
margin-bottom: 1em;
margin: 3px 0 1em; // 3px additional space at top for countering -3px re-positioning of #logo img

#logo {
@include core-48;
@include bold-48;
font-size: 28pt;
font-weight: bold;
/* `bold-80` can be used instead when govuk_frontend_toolkit gem is >= 4.18.2,
see https://github.com/alphagov/govuk_frontend_toolkit/pull/328 */
text-rendering: optimizeLegibility;

img {
width: 46px;
width: 45px;
height: 40px;
padding-right: 6px;
display: block;
float: left;
position: relative;
top: -3px; // aligns bottom of img with bottom of "G"
vertical-align: bottom;
}
}

Expand Down
28 changes: 5 additions & 23 deletions source/assets/stylesheets/_header.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@
}
}
.header-logo {
margin: 5px 0 2px;
margin-top: 2px;
}
}
}
Expand Down Expand Up @@ -71,44 +71,26 @@

#logo {
float: left;
position: relative;
top: -1px;

height: 30px;
overflow: visible;
vertical-align: baseline;

color: $white;
font-weight: bold;
font-size: 30px;
line-height: 1em;
line-height: 1;
text-decoration: none;
text-rendering: optimizeLegibility;
margin-bottom: -3px;
padding-top: 2px;
border-bottom: 1px solid transparent;

background: image-url('images/gov.uk_logotype_crown.png') no-repeat;
background-size: 35px 31px;
background-size: 36px 32px;
background-position: 0 0;
@include ie-lte(8) {
background-image: image-url('images/gov.uk_logotype_crown-1x.png');
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No update to the IE8 crown image?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

As I mentioned in the description:

I have intentionally not changed the IE8-and-under version of the logo as it doesn't look broken. Please let me know if you think that is important to do.

Mark hadn't send me that file because I only asked him about the two. I didn't realise there were actually four logos involved until his last day before his holiday, because those logos are in two different directories. (I will get rid of the fourth one in a subsequent PR.)

I can make the IE8-and-under logo and implement it if you think it's important.

}

img {
position: relative;
top: -2px;

width: 35px;
height: 31px;

padding-right: 6px;

float: left;
display: inline;
line-height: inherit;
border: none;

margin: 2px 1px 0 0; // top margin aligns bottom of img with bottom of "G"
vertical-align: bottom;
visibility: hidden;
}

Expand Down
Binary file modified source/assets/stylesheets/images/gov.uk_logotype_crown-1x.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified source/assets/stylesheets/images/gov.uk_logotype_crown.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion source/views/layouts/govuk_template.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@
<div class="header-global">
<div class="header-logo">
<a href="<%= content_for?(:homepage_url) ? yield(:homepage_url) : "https://www.gov.uk/" %>" title="<%= content_for?(:logo_link_title) ? yield(:logo_link_title) : "Go to the GOV.UK homepage" %>" id="logo" class="content">
<img src="<%= asset_path 'gov.uk_logotype_crown_invert_trans.png' %>" width="35" height="31" alt=""> <%= content_for?(:global_header_text) ? yield(:global_header_text) : "GOV.UK" %>
<img src="<%= asset_path 'gov.uk_logotype_crown_invert_trans.png' %>" width="36" height="32" alt=""> <%= content_for?(:global_header_text) ? yield(:global_header_text) : "GOV.UK" %>
</a>
</div>
<%= yield :inside_header %>
Expand Down