Cleanup style

This is a mild restyling of OpenStreetMap. Changes include:

  * Remove margin from map, add more margin to text content
  * Rearrange permalink & link buttons and gives them a background
  * Pull OpenStreetMap text below logo along with subtitle
  * Simplify sidebar styling
  * Move towards a baseline, start to consolidate text size and line height

This is tested with LTR, RTL, and the compact mode, and looks good. Looks
more uniform in older browsers because it relies less on round corners.

diff --git a/app/assets/stylesheets/common.css.scss b/app/assets/stylesheets/common.css.scss
index 04247ac8bc0fd61331b8dbd312d49b0f0cfa1302..04ee87d9f57b019d43132cbb099c6f59b464b50d 100644 (file)
--- a/app/assets/stylesheets/common.css.scss
+++ b/app/assets/stylesheets/common.css.scss
@@ -3,8 +3,10 @@
 /* Default rules for the body of every page */
 
 body {
-  font-family: Arial,sans-serif;
-  color: #000;
+  font-family: 'Helvetica Neue',Arial,sans-serif;
+  font-size: 14px;
+  line-height: 20px;
+  color: #222;
   background-color: #fff;
   margin: 0px;
   padding: 0px;
@@ -34,12 +36,18 @@ hr {
   height: 1px;
 }
 
+h2 {
+  margin: 5px 0;
+  font-size: 25px;
+  line-height: 30px;
+}
+
 /* Rules for the whole left sidebar, including the logo */
 
 #left {
   position: absolute;
   top: 0px;
-  min-width: 170px;
+  width: 185px;
 }
 
 /* Rules for the OpenStreetMap logo in the top left corner */
@@ -48,22 +56,20 @@ hr {
   width: 170px;
   min-width: 170px;
   padding: 5px;
-  margin: 5px;
-  height: 150px;
-  background: #fff;
-  border: 1px solid #ccd;
-  border-radius: 5px;
-  -moz-border-radius: 5px;
+  text-align: center;
+  margin: 25px 0 5px 0;
 }
 
 #logo h1 {
-  font-size: 14px;
+  font-size: 18px;
+  line-height: 20px;
   text-align: center;
   margin: 0px;
 }
 
 #logo h2 {
   font-size: 10px;
+  line-height: 15px;
   margin: 0px;
 }
 
@@ -76,13 +82,9 @@ hr {
 /* Rules for the introductory text displayed in the left sidebar to new users */
 
 #intro {
-  width: 170px;
-  padding: 5px;
-  margin: 5px;
-  border: 1px solid #ccc;
   font-size: 11px;
-  border-radius: 5px;
-  -moz-border-radius: 5px;
+  line-height: 12px;
+  border-top: 1px solid #ccc;
 }
 
 #intro p {
@@ -119,7 +121,7 @@ hr {
   padding: 5px;
   border: 1px solid #ccc;
   background: #ea0;
-  line-height: 1.2em;
+  line-height: 20px;
   font-size: 14px;
   border-radius: 5px;
   -moz-border-radius: 5px;
@@ -128,17 +130,13 @@ hr {
 /* Rules for the menu displayed in the left sidebar */
 
 .left_menu {
-  width: 170px;
-  min-width: 170px;
-  margin: 5px;
-  padding: 5px;
-  border: 1px solid #ccc;
-  background: #ddd;
-  line-height: 1.2em;
+  padding: 10px;
+  margin: 4px 0;
+  border-top: 1px solid #ccc;
+  border-bottom: 1px solid #ccc;
+  line-height: 20px;
   font-size: 14px;
   font-weight: bold;
-  border-radius: 5px;
-  -moz-border-radius: 5px;
 }
 
 .left_menu td {
@@ -182,22 +180,17 @@ hr {
  */
 
 .optionalbox {
-  width: 170px;
-  min-width: 170px;
-  margin: 5px;
   padding: 5px;
-  border: 1px solid #ccc;
-  line-height: 1.2em;
+  margin: 4px 0;
+  border-top: 1px solid #ccc;
+  line-height: 15px;
   font-size: 12px;
-  background: #eee;
-  border-radius: 5px;
-  -moz-border-radius: 5px;
 }
 
 .optionalbox h1 {
   font-size: 14px;
   font-weight: bold;
-  line-height: 22px;
+  line-height: 20px;
   margin: 0px;
   vertical-align: bottom;
 }
@@ -205,13 +198,13 @@ hr {
 /* Rules for the search box */
 
 .whereami {
-  line-height: 22px;
+  line-height: 20px;
   vertical-align: bottom;
 }
 
 .search_container {
-  height: 16px;
-  padding-bottom: 6px;
+  height: 15px;
+  padding-bottom: 5px;
 }
 
 #search_field form {
@@ -232,20 +225,20 @@ hr {
 
 .search_help {
   font-size: 10px;
-  line-height: 1em;
-  margin-top: 3px;
+  line-height: 15px;
+  margin-top: 2px;
   margin-bottom: 0px;
 }
 
 /* Rules for donation request box */
 
 .donate {
-  width: 170px;
-  margin: 5px;
+  width: 155px;
+  margin: 10px 5px;
   padding: 5px;
   border: 1px solid #ccc;
   background: #cbeea7;
-  line-height: 1.2em;
+  line-height: 20px;
   text-align: center;
   font-size: 14px;
   border-radius: 5px;
@@ -261,24 +254,21 @@ hr {
 
 /* Rules for tabbed navigation bar */
 
-#tabnav
-{
+#tabnav {
   height: 20px;
   margin: 0px;
   padding-top: 5px;
   background: image-url('tab_bottom.gif') repeat-x bottom;
 }
 
-#tabnav li
-{
-  margin: 0px; 
+#tabnav li {
+  margin: 0px;
   padding: 0px;
   display: inline;
   list-style-type: none;
 }
 
-#tabnav a, #tabnav a:link, #tabnav a:visited 
-{
+#tabnav a, #tabnav a:link, #tabnav a:visited {
   background: #f3f3f3;
   font-size: 13px;
   line-height: 14px;
@@ -293,21 +283,20 @@ hr {
   -moz-border-radius-topleft: 5px;
 }
 
-#tabnav a:link.active, #tabnav a:visited.active
-{
+#tabnav a:link.active, #tabnav a:visited.active {
   border-bottom: 1px solid #fff;
   background: #fff;
   color: #000;
 }
 
-#tabnav a:link:hover, #tabnav a:visited:hover
-{
+#tabnav a:link:hover, #tabnav a:visited:hover {
   background: #fff;
 }
 
-#tabnav a:link.disabled, #tabnav a:visited.disabled,
-#tabnav a:link:hover.disabled, #tabnav a:visited:hover.disabled
-{
+#tabnav a:link.disabled,
+#tabnav a:visited.disabled,
+#tabnav a:link:hover.disabled,
+#tabnav a:visited:hover.disabled {
   background: #bbbbbb;
   color: white
 }
@@ -319,7 +308,7 @@ hr {
   margin: 0px;
   padding-top: 5px;
   font-size: 13px;
-  line-height: 14px;
+  line-height: 15px;
   background: image-url('tab_bottom.gif') repeat-x bottom;
 }
 
@@ -336,10 +325,8 @@ hr {
 }
 
 /* Rules for OpenLayers maps */
-
 #map {
-  border: 1px solid black;
-  margin: 0px; 
+  margin: 0px;
   padding: 0px;
 }
 
@@ -353,10 +340,16 @@ hr {
 #permalink {
   z-index: 10000;
   position: absolute;
-  bottom: 15px;
-  right: 15px;
+  bottom: 0px;
+  right: 0px;
+  padding: 5px;
+  background:#fff;
   text-align: right;
-  font-size: smaller;
+  font-size: 12px;
+}
+
+#permalink a {
+    padding: 5px;
 }
 
 /* Rules for edit menu */
@@ -396,7 +389,7 @@ hr {
 #sidebar {
   display: none;
   position: absolute;
-  border: 1px solid black;
+  border: 1px solid #888;
   margin: 0px;
   padding: 0px;
   width: 30%;
@@ -408,7 +401,7 @@ hr {
   overflow: auto;
   position: absolute;
   font-size: 13px;
-  line-height: 14px;
+  line-height: 15px;
   top: 29px;
   bottom: 0px;
   left: 0px;
@@ -421,7 +414,7 @@ hr {
   height: 29px;
   font-size: 14px;
   line-height: 15px;
-  border-bottom: 1px solid black;
+  border-bottom: 1px solid #888;
   background: #bbb;
 }
 
@@ -488,9 +481,9 @@ hr {
 
 .export_heading {
   margin: 0px;
-  padding: 3px 6px;
-  border: 1px solid #ccc;
-  background: #ddd;
+  padding: 2px 5px;
+  border-bottom: 1px solid #ccc;
+  font-weight: bold;
 }
 
 .export_bounds {
@@ -530,12 +523,18 @@ hr {
 
 /* Rules for the main content area */
 
-#content {
+body.site #content {
   padding: 0px;
   margin: 0px;
-  position: absolute; 
-  bottom: 10px;
-  line-height: 1.2em;
+  position: absolute;
+  bottom: 0px;
+}
+
+#content {
+  padding: 10px;
+  margin: 0px;
+  position: absolute;
+  bottom: 0px;
 }
 
 #slim_container {
@@ -976,18 +975,20 @@ p#contributorGuidance {
 .fieldName {
   vertical-align: top;
   font-weight: bold;
+  font-size: 12px;
+  line-height: 20px;
 }
 
 .minorNote {
   font-size: 0.8em;
 }
 
-input[type="text"], input[type="email"], input[type="url"], input[type="password"], textarea {
-  border: 1px solid black;
-}
-
-input[type="submit"] {
-  border: 1px solid black;
+input[type="text"],
+input[type="email"],
+input[type="url"],
+input[type="password"],
+textarea {
+  border: 1px solid #888;
 }
 
 /* Rules for user images */
@@ -1025,11 +1026,11 @@ abbr.geo {
 
 /* Rules for doing distinct colour of alternate table rows */
 
-.table0 { 
+.table0 {
   background: #f6f6f6;
 }
 
-.table1 { 
+.table1 {
   background: #fff;
 }
 

diff --git a/app/assets/stylesheets/large.css b/app/assets/stylesheets/large.css
index 1c4d493ec532bb51a81e5734e747911b3c7816c4..c86672e9a0c9a088ddb1ce3b770b6531aa5ed626 100644 (file)
--- a/app/assets/stylesheets/large.css
+++ b/app/assets/stylesheets/large.css
@@ -9,7 +9,7 @@
 /* Rules for the main content area */
 
 #content {
-  top: 35px;
+  top: 25px;
 }
 
 /* Rules for OpenLayers maps */

diff --git a/app/assets/stylesheets/ltr.css.scss b/app/assets/stylesheets/ltr.css.scss
index 817404a799d879e34ad2e65cca634774444028c9..67faffc7776f5e717e7d1e80f093f97d24cf5d77 100644 (file)
--- a/app/assets/stylesheets/ltr.css.scss
+++ b/app/assets/stylesheets/ltr.css.scss
@@ -68,13 +68,11 @@ html body {
 
 /* Rules for tabbed navigation bar */
 
-#tabnav
-{
-  padding-left: 215px;
+#tabnav {
+  margin-left: 185px;
 }
 
-#tabnav a, #tabnav a:link, #tabnav a:visited 
-{
+#tabnav a, #tabnav a:link, #tabnav a:visited {
   float: left;
   margin-right: 4px;
 }
@@ -102,6 +100,10 @@ html body {
   text-align: right;
 }
 
+#map {
+  border-left: 1px solid #ccc;
+}
+
 /* Rules for the popout map sidebar */
 
 #sidebar {
@@ -119,9 +121,14 @@ html body {
 
 /* Rules for the main content area */
 
+body.site #content {
+  border: 0;
+}
+
 #content {
-  left: 192px;
-  right: 10px;
+  border-left: 1px solid #ccc;
+  left: 185px;
+  right: 0px;
   text-align: left;
 }
 

diff --git a/app/assets/stylesheets/rtl.css.scss b/app/assets/stylesheets/rtl.css.scss
index 953efd7a66bc5b2b4f7e7cf1a34e2be4ab220889..5d3bad582ada85b1f35acd0c80cd40d2dfce1ef3 100644 (file)
--- a/app/assets/stylesheets/rtl.css.scss
+++ b/app/assets/stylesheets/rtl.css.scss
@@ -69,13 +69,13 @@ html body {
 /* Rules for tabbed navigation bar */
 
 
-#tabnav
-{
-  padding-right: 215px;
+#tabnav {
+  margin-right: 185px;
 }
 
-#tabnav a, #tabnav a:link, #tabnav a:visited 
-{
+#tabnav a,
+#tabnav a:link,
+#tabnav a:visited {
   float: right;
   margin-left: 4px;
 }
@@ -93,6 +93,11 @@ html body {
   right: 15px
 }
 
+
+#map {
+  border-right: 1px solid #ccc;
+}
+
 /* Rules for attribution text under the main map shown on printouts */
 
 .attribution_license {
@@ -120,9 +125,14 @@ html body {
 
 /* Rules for the main content area */
 
+body.site #content {
+  border: 0;
+}
+
 #content {
-  right: 192px;
-  left: 10px;
+  border-right: 1px solid #ccc;
+  right: 185px;
+  left: 0px;
   text-align: right;
 }
 

diff --git a/app/views/layouts/site.html.erb b/app/views/layouts/site.html.erb
index a2cd2aa403b9493163805746057fc1b157e436f0..f43d3b3950bda3276898b671a9a57da5c2dbb797 100644 (file)
--- a/app/views/layouts/site.html.erb
+++ b/app/views/layouts/site.html.erb
@@ -1,7 +1,7 @@
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<%= I18n.locale %>" lang="<%= I18n.locale %>" dir="<%= t'html.dir' %>">
   <%= render :partial => "layouts/head" %>
-  <body>
+  <body class="<%= params[:controller] %>">
     <div id="small-title">
       <%= link_to(image_tag("osm_logo.png", :size => "16x16", :border => 0, :alt => t('layouts.logo.alt_text')), :controller => 'site', :action => 'index') %>
       <h1><%= t 'layouts.project_name.h1' %></h1>
@@ -64,11 +64,9 @@
 
     <div id="left">
       <div id="logo">
-        <center>
-          <h1><%= t 'layouts.project_name.h1' %></h1>
-          <%= link_to(image_tag("osm_logo.png", :size => "120x120", :border => 0, :alt => t('layouts.logo.alt_text')), :controller => 'site', :action => 'index') %><br/>
-          <h2 class="nowrap"><%= t('layouts.tag_line') %></h2>
-        </center>
+        <%= link_to(image_tag("osm_logo.png", :size => "120x120", :border => 0, :alt => t('layouts.logo.alt_text')), :controller => 'site', :action => 'index') %><br/>
+        <h1><%= t 'layouts.project_name.h1' %></h1>
+        <h2 class="nowrap"><%= t('layouts.tag_line') %></h2>
       </div>
 
       <%= yield :optionals %>

diff --git a/app/views/site/index.html.erb b/app/views/site/index.html.erb
index 38242da0094e34048937a9c0a48edb36e66b186d..0c47227f8ebd420066da62691ff3ea175813a1f8 100644 (file)
--- a/app/views/site/index.html.erb
+++ b/app/views/site/index.html.erb
@@ -18,7 +18,7 @@
 
 <div id="map">
   <div id="permalink">
-    <a href="/" id="permalinkanchor" class="geolink llz layers object"><%= t 'site.index.permalink' %></a><br/>
+    <a href="/" id="permalinkanchor" class="geolink llz layers object"><%= t 'site.index.permalink' %></a>
     <a href="/" id="shortlinkanchor"><%= t 'site.index.shortlink' %></a>
   </div>
 </div>