# HG changeset patch # User Mads Kiilerich # Date 1511747744 -3600 # Node ID eaf600434cf5def75d4e2b6413c950ee55de038a # Parent 079b24620dce3d10c35449bf14b8a632aa12b00f less: change markup and styling for the logo shown in the top left corner Based on work by Dominik Ruf, but in this changeset, the goal is just to improve markup and styling while keeping exactly the same look and feel. In that process, it also fixes some browser specific issues that gave odd spacing/positioning. All styling (especially the logo image URL) is moved to CSS/LESS, using background-image styling instead of an img tag. The logo image is made a :before on the site branding text and will usually have to align with this text, so we use inline-block to align to the baseline. We set the right amount of negative margin-bottom so the image can go below the baseline. We use a "big enough" negative margin-top to allow the image to bleed outside the line height and into the 12px top padding. We assume the background image doesn't need cropping or panning and do thus not set background-size, background-position, or background-repeat. diff -r 079b24620dce -r eaf600434cf5 kallithea/public/css/style.css --- a/kallithea/public/css/style.css Tue Oct 24 21:41:07 2017 +0200 +++ b/kallithea/public/css/style.css Mon Nov 27 02:55:44 2017 +0100 @@ -98,9 +98,16 @@ min-height: 44px; background-color: #577632; } -nav.navbar #logo > .navbar-brand > img { - margin-top: -9px; - margin-right: 5px; +/* logo */ +.navbar-brand .branding:before { + content: ""; + display: inline-block; + margin-right: .2em; + background-image: url("../images/kallithea-logo.svg"); + width: 140px; + height: 30px; + margin-bottom: -4px; + margin-top: -12px; } /* every direct child of a panel, that is not .panel-heading, should auto * overflow to prevent overflowing of elements like text boxes and tables */ diff -r 079b24620dce -r eaf600434cf5 kallithea/public/less/style.less --- a/kallithea/public/less/style.less Tue Oct 24 21:41:07 2017 +0200 +++ b/kallithea/public/less/style.less Mon Nov 27 02:55:44 2017 +0100 @@ -106,9 +106,19 @@ min-height: 44px; background-color: #577632; } -nav.navbar #logo > .navbar-brand > img { - margin-top: -9px; - margin-right: 5px; + +/* logo */ +.navbar-brand .branding { + &:before { + content: ""; + display: inline-block; + margin-right: .2em; + background-image: url("../images/kallithea-logo.svg"); + width: 140px; + height: 30px; + margin-bottom: -4px; + margin-top: -12px; + } } /* every direct child of a panel, that is not .panel-heading, should auto diff -r 079b24620dce -r eaf600434cf5 kallithea/templates/base/root.html --- a/kallithea/templates/base/root.html Tue Oct 24 21:41:07 2017 +0200 +++ b/kallithea/templates/base/root.html Mon Nov 27 02:55:44 2017 +0100 @@ -116,10 +116,7 @@