Conservancy/website
6
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

[PATCH 1/2] Fix unnucessary horizontal scroll bar; simplify header markup.

Browse source 
Because #logobutton had a fixed width, browser window narrower than 933
pixels resulted in an unnecessary horizontal scroll bar.  Fix that by
using a dynamic 100% width which results in the header image being
automatically clipped as necessary.

To avoid clipping the tree and the text though, include min-width so
that very narrow windows result in a horizontal scroll bar so the whole
name can be seen.

Furthermore, simplify the markup by removing wrapper DIV and SPAN
elements which weren’t really necessary.  As a consequence of that
change, the whole top of the page is now a link to the homepage (i.e.
‘/’).  Prior to this change, the link wasn’t clickable.
This commit is contained in:
Michal Nazarewicz 2015-12-01 17:06:13 +01:00 • committed by Bradley M. Kuhn
parent 1c62ecc521
commit 828baca5a6
2 changed files with 12 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
www/conservancy/static/css/conservancy.css
View file

@ -64,7 +64,10 @@ h3 { margin-top: .6em; margin-bottom: .4em; }
/* Header */
#conservancyheader {
height: 140px;
margin: 0;
/* Leave 0 padding on the right so the header image is clipped by the edge of
* the browser window. */
padding: 10px 0 10px 17px;
/* background-color: #d1ff96; */
/* background-color: #92CC58; */
/* background-color: #BDD8A2; */
@ -72,15 +75,16 @@ h3 { margin-top: .6em; margin-bottom: .4em; }
/* background-color: #b5cd9d; */
background-color: #ffffff;
border-bottom: 1px solid #808080;
}
#conservancyheader h1 {
text-indent: -5000px;
margin: 0; /* hide in favor of image */
text-indent: -5000px; /* hide in favor of image */
}
#logobutton {
display: block;
position: absolute; left: 17px; top: 10px; height: 120px; width: 933px;
background: url(/img/conservancy-header.png) left center no-repeat;
margin: 0;
padding: 0;
height: 120px;
width: 100%;
min-width: 350px; /* So at least tree and text is visible */
background: url(/img/conservancy-header.png) no-repeat;
}
/* Navigation bar */

4
www/conservancy/templates/base_conservancy.html
View file

@ -24,9 +24,7 @@
</head>
<body class="conservancy-{% block category %}other{% endblock %}">
<div id="conservancyheader">
<h1><span id="logobutton"><a href="/">Software Freedom Conservancy</a></span></h1>
</div>
<h1 id="conservancyheader"><a id="logobutton" href="/">Software Freedom Conservancy</a></h1>
<div id="navbar-outer">
<div id="navbar">
<ul>