# HG changeset patch # User Mads Kiilerich # Date 2017-11-27 02:55:44 # 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 --git a/kallithea/public/css/style.css b/kallithea/public/css/style.css --- a/kallithea/public/css/style.css +++ b/kallithea/public/css/style.css @@ -98,9 +98,16 @@ nav.navbar { 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 --git a/kallithea/public/less/style.less b/kallithea/public/less/style.less --- a/kallithea/public/less/style.less +++ b/kallithea/public/less/style.less @@ -106,9 +106,19 @@ nav.navbar { 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 --git a/kallithea/templates/base/root.html b/kallithea/templates/base/root.html --- a/kallithea/templates/base/root.html +++ b/kallithea/templates/base/root.html @@ -116,10 +116,7 @@