]> git.openstreetmap.org Git - chef.git/commitdiff
Improve planet.osm web styling
authorRuss Garrett <russ@garrett.co.uk>
Fri, 15 Dec 2023 17:35:22 +0000 (17:35 +0000)
committerRuss Garrett <russ@garrett.co.uk>
Fri, 15 Dec 2023 17:43:28 +0000 (17:43 +0000)
cookbooks/planet/files/default/cgi/HEADER.cgi
cookbooks/planet/files/default/html/style.css

index 165cc3e9f34de782f13fa866370b124dc472b9de..d3988dcf8dd13c793947db1818f393f088337600 100644 (file)
@@ -59,47 +59,41 @@ print("""
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
 <html>
  <head>
-  <title>Index of /</title>
+  <title>Planet OSM</title>
   <link href="https://planet.openstreetmap.org/style.css" rel="stylesheet" type="text/css">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body>
 <img id="logo" src="https://planet.openstreetmap.org/logo.png" alt="OSM logo" width="128" height="128">
 <h1>Planet OSM</h1>
 
 <p>
-The files found here are regularly-updated, complete copies of the OpenStreetMap.org
-database, and those published before the 12 September 2012 are distributed under a Creative Commons Attribution-ShareAlike 2.0 license, those published after are  Open Data Commons Open Database License 1.0 licensed. For more information, <a href="https://wiki.openstreetmap.org/wiki/Planet.osm">see the project wiki</a>.
+The files found here are regularly-updated, complete copies of the <a href="https://openstreetmap.org">OpenStreetMap</a> database.
 </p>
-<table id="about">
-  <tr>
-    <th>
-        <h2>Complete OSM Data</h2>
-    </th>
-    <th>
-        <h2>Using The Data</h2>
-    </th>
-    <th>
-        <h2 id="supporting-osm">Supporting OSM</h2>
-    </th>
-  </tr>
-  <tr>
-    <td>
-        <p>%(planet_link)s</p>
-        <p>%(changesets_link)s</p>
-        <p>%(planet_pbf_link)s</p>
-        <p>
-        Each week, a new and complete copy of all data in OpenStreetMap is made
-        available as both a compressed XML file and a custom PBF format file.
-        Also available is the <a href="planet/full-history">'history'</a> file
-        which contains not only up-to-date data but also older versions of data
-        and deleted data items.
-        <p>
-        </p>
-        A smaller file with complete metadata for all changes ('changesets') in
-        XML format is also available.
-        </p>
-    </td>
-    <td>
+<p>
+Files published before the 12 September 2012 are distributed under a Creative Commons Attribution-ShareAlike 2.0 license, those
+published after are Open Data Commons Open Database License 1.0 licensed. For more information, <a href="https://wiki.openstreetmap.org/wiki/Planet.osm">see the project wiki</a>.
+</p>
+<div id="about">
+  <div>
+    <h2>Latest Exports</h2>
+      <p>%(planet_link)s</p>
+      <p>%(changesets_link)s</p>
+      <p>%(planet_pbf_link)s</p>
+      <p>
+      Each week, a new and complete copy of all data in OpenStreetMap is made
+      available as both a compressed XML file and a custom PBF format file.
+      Also available is the <a href="planet/full-history">'history'</a> file
+      which contains not only up-to-date data but also older versions of data
+      and deleted data items.
+      <p>
+      </p>
+      A smaller file with complete metadata for all changes ('changesets') in
+      XML format is also available.
+      </p>
+    </div>
+    <div>
+      <h2>Using the Data</h2>
         <p>
         You are granted permission to use OpenStreetMap data by
         <a href="https://osm.org/copyright">the OpenStreetMap License</a>, which also describes
@@ -124,11 +118,12 @@ database, and those published before the 12 September 2012 are distributed under
         and <a href="https://download.bbbike.org/osm/">BBBike.org</a> are two providers
         of extracts with up-to-date worldwide coverage.
         </p>
-    </td>
-    <td>
+    </div>
+    <div>
+        <h2 id="supporting-osm">Supporting OSM</h2>
         <p>OSM data is free to use, but is not free to make or host. The
         stability and accuracy of OSM.org depends on its volunteers and
-        donations from its users. Please consider 
+        donations from its users. Please consider
         <a href="https://supporting.openstreetmap.org">making an annual
         recurring gift</a> to OSM to support the infrastructure,
         tools, working groups, and other incentives needed to
@@ -144,11 +139,11 @@ database, and those published before the 12 September 2012 are distributed under
         millions should <a
         href="https://osmfoundation.org/wiki/Join_as_a_corporate_member">join as
         a corporate members</a> to receive additional benefits.</p>
-    </td>
-  </tr>
-</table>
+    </div>
+</div>
 
 <p>
 If you find data within OpenStreetMap that you believe is an infringement of someone else's copyright, then please make contact with the <a href="https://wiki.openstreetmap.org/wiki/Data_working_group">OpenStreetMap Data Working Group</a>.
 </p>
+<h2>Files</h2>
 """ % locals())
index a9ca89c4d2c602e88299c610283e275f5cebcc23..26dfdb8b16afb24a34acde29b38d587da409dbb7 100644 (file)
@@ -1,22 +1,59 @@
-body,
-table#about tr *
-{
+body {
     font-family: sans-serif;
     line-height: 1.25em;
+    margin: 2em;
+    min-width: 350px;
+    max-width: 1100px;
 }
 
-body { margin: 2em; }
 img#logo { float: left; }
 img#logo, h1 { margin: 0 1em 0 0; }
-a { white-space: nowrap; }
 
 li { margin-bottom: 1em; }
-body>p { width: 57em; }
 
-table#about
-{
-    clear: left;
-    margin: 3em 0 2em 0;
+p, li {color: #333;}
+
+#about {
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+}
+
+#about > div {
+  padding-right: 2em;
+  flex: 1;
+}
+
+@media(max-width: 900px) {
+  body {
+    margin: 20px 10px;
+  }
+
+  img#logo {
+    width: 64px;
+    height: 64px;
+  }
+
+  #about {
+    flex-direction: column;
+  }
+
+  #about > div {
+    padding-right: 0;
+  }
+
+  pre {
+    width: 100%;
+    overflow: scroll;
+  }
+}
+
+ul {
+  padding-left: 1em;
+}
+
+ul li {
+  margin-bottom: 0.3em;
 }
 
 table tr th { text-align: left; }
@@ -54,8 +91,11 @@ table#about tr td
 }
 
 .alert {
+  clear: both;
   padding: 20px;
   background-color: #ff9800; /* Orange */
   color: white;
-  margin-bottom: 15px;
+  margin: 15px auto;
+  max-width: 42em;
+  border-radius: 4px;
 }