Changeset - 828baca5a600
[Not reviewed]
0 2 0
Michal Nazarewicz - 6 years ago 2015-12-21 19:09:02
mina86@mina86.com
[PATCH 1/2] Fix unnucessary horizontal scroll bar; simplify header markup.

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.
2 files changed with 12 insertions and 10 deletions:
0 comments (0 inline, 0 general)
www/conservancy/static/css/conservancy.css
Show inline comments
...
 
@@ -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 */
www/conservancy/templates/base_conservancy.html
Show inline comments
...
 
@@ -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>
0 comments (0 inline, 0 general)