summary |
shortlog |
log |
commit | commitdiff |
tree
raw |
patch |
inline | side by side (from parent 1:
5e94143)
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.
/* Default rules for the body of every page */
body {
/* 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;
background-color: #fff;
margin: 0px;
padding: 0px;
+h2 {
+ margin: 5px 0;
+ font-size: 25px;
+ line-height: 30px;
+}
+
/* Rules for the whole left sidebar, including the logo */
#left {
position: absolute;
top: 0px;
/* Rules for the whole left sidebar, including the logo */
#left {
position: absolute;
top: 0px;
}
/* Rules for the OpenStreetMap logo in the top left corner */
}
/* Rules for the OpenStreetMap logo in the top left corner */
width: 170px;
min-width: 170px;
padding: 5px;
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;
+ font-size: 18px;
+ line-height: 20px;
text-align: center;
margin: 0px;
}
#logo h2 {
font-size: 10px;
text-align: center;
margin: 0px;
}
#logo h2 {
font-size: 10px;
/* Rules for the introductory text displayed in the left sidebar to new users */
#intro {
/* Rules for the introductory text displayed in the left sidebar to new users */
#intro {
- width: 170px;
- padding: 5px;
- margin: 5px;
- border: 1px solid #ccc;
- border-radius: 5px;
- -moz-border-radius: 5px;
+ line-height: 12px;
+ border-top: 1px solid #ccc;
padding: 5px;
border: 1px solid #ccc;
background: #ea0;
padding: 5px;
border: 1px solid #ccc;
background: #ea0;
font-size: 14px;
border-radius: 5px;
-moz-border-radius: 5px;
font-size: 14px;
border-radius: 5px;
-moz-border-radius: 5px;
/* Rules for the menu displayed in the left sidebar */
.left_menu {
/* 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;
font-size: 14px;
font-weight: bold;
- border-radius: 5px;
- -moz-border-radius: 5px;
- width: 170px;
- min-width: 170px;
- margin: 5px;
- border: 1px solid #ccc;
- line-height: 1.2em;
+ margin: 4px 0;
+ border-top: 1px solid #ccc;
+ line-height: 15px;
- background: #eee;
- border-radius: 5px;
- -moz-border-radius: 5px;
}
.optionalbox h1 {
font-size: 14px;
font-weight: bold;
}
.optionalbox h1 {
font-size: 14px;
font-weight: bold;
margin: 0px;
vertical-align: bottom;
}
margin: 0px;
vertical-align: bottom;
}
/* Rules for the search box */
.whereami {
/* Rules for the search box */
.whereami {
vertical-align: bottom;
}
.search_container {
vertical-align: bottom;
}
.search_container {
- height: 16px;
- padding-bottom: 6px;
+ height: 15px;
+ padding-bottom: 5px;
.search_help {
font-size: 10px;
.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 {
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;
padding: 5px;
border: 1px solid #ccc;
background: #cbeea7;
text-align: center;
font-size: 14px;
border-radius: 5px;
text-align: center;
font-size: 14px;
border-radius: 5px;
/* Rules for tabbed navigation bar */
/* Rules for tabbed navigation bar */
height: 20px;
margin: 0px;
padding-top: 5px;
background: image-url('tab_bottom.gif') repeat-x bottom;
}
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;
}
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;
background: #f3f3f3;
font-size: 13px;
line-height: 14px;
-moz-border-radius-topleft: 5px;
}
-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;
}
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 {
-#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
}
background: #bbbbbb;
color: white
}
margin: 0px;
padding-top: 5px;
font-size: 13px;
margin: 0px;
padding-top: 5px;
font-size: 13px;
background: image-url('tab_bottom.gif') repeat-x bottom;
}
background: image-url('tab_bottom.gif') repeat-x bottom;
}
}
/* Rules for OpenLayers maps */
}
/* Rules for OpenLayers maps */
- border: 1px solid black;
- margin: 0px;
#permalink {
z-index: 10000;
position: absolute;
#permalink {
z-index: 10000;
position: absolute;
- bottom: 15px;
- right: 15px;
+ bottom: 0px;
+ right: 0px;
+ padding: 5px;
+ background:#fff;
+ font-size: 12px;
+}
+
+#permalink a {
+ padding: 5px;
}
/* Rules for edit menu */
}
/* Rules for edit menu */
#sidebar {
display: none;
position: absolute;
#sidebar {
display: none;
position: absolute;
- border: 1px solid black;
+ border: 1px solid #888;
margin: 0px;
padding: 0px;
width: 30%;
margin: 0px;
padding: 0px;
width: 30%;
overflow: auto;
position: absolute;
font-size: 13px;
overflow: auto;
position: absolute;
font-size: 13px;
top: 29px;
bottom: 0px;
left: 0px;
top: 29px;
bottom: 0px;
left: 0px;
height: 29px;
font-size: 14px;
line-height: 15px;
height: 29px;
font-size: 14px;
line-height: 15px;
- border-bottom: 1px solid black;
+ border-bottom: 1px solid #888;
.export_heading {
margin: 0px;
.export_heading {
margin: 0px;
- padding: 3px 6px;
- border: 1px solid #ccc;
- background: #ddd;
+ padding: 2px 5px;
+ border-bottom: 1px solid #ccc;
+ font-weight: bold;
/* Rules for the main content area */
/* Rules for the main content area */
padding: 0px;
margin: 0px;
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;
.fieldName {
vertical-align: top;
font-weight: bold;
.fieldName {
vertical-align: top;
font-weight: bold;
+ font-size: 12px;
+ line-height: 20px;
}
.minorNote {
font-size: 0.8em;
}
}
.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 */
}
/* Rules for user images */
/* Rules for doing distinct colour of alternate table rows */
/* Rules for doing distinct colour of alternate table rows */
/* Rules for the main content area */
#content {
/* Rules for the main content area */
#content {
}
/* Rules for OpenLayers maps */
}
/* Rules for OpenLayers maps */
/* Rules for tabbed navigation bar */
/* 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;
}
float: left;
margin-right: 4px;
}
+#map {
+ border-left: 1px solid #ccc;
+}
+
/* Rules for the popout map sidebar */
#sidebar {
/* Rules for the popout map sidebar */
#sidebar {
/* Rules for the main content area */
/* Rules for the main content area */
+body.site #content {
+ border: 0;
+}
+
- left: 192px;
- right: 10px;
+ border-left: 1px solid #ccc;
+ left: 185px;
+ right: 0px;
/* Rules for tabbed navigation bar */
/* 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;
}
float: right;
margin-left: 4px;
}
+
+#map {
+ border-right: 1px solid #ccc;
+}
+
/* Rules for attribution text under the main map shown on printouts */
.attribution_license {
/* Rules for attribution text under the main map shown on printouts */
.attribution_license {
/* Rules for the main content area */
/* Rules for the main content area */
+body.site #content {
+ border: 0;
+}
+
- right: 192px;
- left: 10px;
+ border-right: 1px solid #ccc;
+ right: 185px;
+ left: 0px;
<!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" %>
<!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 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>
<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>
<div id="left">
<div id="logo">
<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 %>
</div>
<%= yield :optionals %>
<div id="map">
<div id="permalink">
<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>
<a href="/" id="shortlinkanchor"><%= t 'site.index.shortlink' %></a>
</div>
</div>