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.
This commit is contained in:
Tom MacWright
Tom Hughes
parent
5e9414365c
commit
c241c3c312
6 changed files with 120 additions and 104 deletions
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
/* Rules for the main content area */
|
||||
|
||||
#content {
|
||||
top: 35px;
|
||||
top: 25px;
|
||||
}
|
||||
|
||||
/* Rules for OpenLayers maps */
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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 %>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue