let's try to vertically align small logo

This commit is contained in:
Jeff Atwood 2015-02-18 23:55:04 -08:00
parent da036e7de3
commit bf03209f42
3 changed files with 12 additions and 8 deletions

View File

@ -1,15 +1,18 @@
<a href="{{unbound linkUrl}}" data-auto-route="true">
{{#if showSmallLogo}}
{{#if smallLogoUrl}}
<span class="valign-helper"></span>
<img class="logo-small" src="{{unbound smallLogoUrl}}" width="33" height="33">
{{else}}
<i class="fa fa-home"></i>
{{/if}}
{{else}}
{{#if showMobileLogo}}
<span class="valign-helper"></span>
<img id="site-logo" class="logo-big" src="{{unbound mobileBigLogoUrl}}" alt="{{unbound title}}">
{{else}}
{{#if bigLogoUrl}}
<span class="valign-helper"></span>
<img id="site-logo" class="logo-big" src="{{unbound bigLogoUrl}}" alt="{{unbound title}}">
{{else}}
<h2 id="site-text-logo" class="text-logo">{{unbound title}}</h2>

View File

@ -16,12 +16,13 @@
}
.title {
display: table;
float: left;
> a {
display: table-cell;
vertical-align: middle;
}
}
.valign-helper {
display: inline-block;
height: 100%;
vertical-align: middle;
}
#site-logo {

View File

@ -5,17 +5,17 @@
.d-header {
#site-logo {
max-width: 122px;
max-width: 135px;
}
// some protection for text-only site titles
.title {
margin-left: 10px;
max-width: 135px;
max-width: 140px;
height: 39px;
overflow: hidden;
padding: 0;
text-overflow: clip;
display: block; // table causes clipping fail oddities here
}
.icons {