Update example styles.

tableau-mkt-archived · Mar 23, 2012 · 6c3aa96 · 6c3aa96
1 parent 907ba83
commit 6c3aa96
Show file tree

Hide file tree

Showing 10 changed files with 47 additions and 27 deletions.
diff --git a/examples/api.html b/examples/api.html
@@ -3,9 +3,7 @@
   <head>
     <title>$.geocomplete()</title>
     <meta charset="UTF-8">
-    <style type="text/css">
-      .map_canvas { width: 600px; height: 400px; }
-    </style>
+    <link rel="stylesheet" type="text/css" href="styles.css" />
   </head>
   <body>
 
@@ -16,6 +14,7 @@
 
     <div class="map_canvas"></div>
 
+    Call: 
     <button id="search">.geocomplete("find", "NYC")</button>
     <button id="center">.geocomplete("map").setCenter()</button>
 

diff --git a/examples/bounds.html b/examples/bounds.html
@@ -3,9 +3,7 @@
   <head>
     <title>$.geocomplete()</title>
     <meta charset="UTF-8">
-    <style type="text/css">
-      .map_canvas { width: 600px; height: 400px; }
-    </style>
+    <link rel="stylesheet" type="text/css" href="styles.css" />
   </head>
   <body>
 

diff --git a/examples/custom_attribute.html b/examples/custom_attribute.html
@@ -3,10 +3,9 @@
   <head>
     <title>$.geocomplete()</title>
     <meta charset="UTF-8">
+    <link rel="stylesheet" type="text/css" href="styles.css" />
     <style type="text/css" media="screen">
-      .map_canvas { width: 600px; height: 400px; float: left;}
-      form { width: 300px; float: left; margin-left: 20px}
-      #geocomplete { width: 200px}
+      form { width: 300px; float: left; }
       fieldset { width: 320px; margin-top: 20px}
       fieldset strong { display: block; margin: 0.5em 0 0em; }
       fieldset input { width: 95%; }

diff --git a/examples/draggable.html b/examples/draggable.html
@@ -3,10 +3,10 @@
   <head>
     <title>$.geocomplete()</title>
     <meta charset="UTF-8">
+    <link rel="stylesheet" type="text/css" href="styles.css" />
     <style type="text/css" media="screen">
-      .map_canvas { width: 600px; height: 400px; float: left;}
       form { width: 300px; float: left; margin-left: 20px}
-      #geocomplete { width: 200px}
+
       fieldset { width: 320px; margin-top: 20px}
       fieldset strong { display: block; margin: 0.5em 0 0em; }
       fieldset input { width: 95%; }

diff --git a/examples/form.html b/examples/form.html
@@ -3,10 +3,10 @@
   <head>
     <title>$.geocomplete()</title>
     <meta charset="UTF-8">
+    <link rel="stylesheet" type="text/css" href="styles.css" />
     <style type="text/css" media="screen">
-      .map_canvas { width: 600px; height: 400px; float: left;}
-      form { width: 300px; float: left; margin-left: 20px}
-      #geocomplete { width: 200px}
+      .map_canvas { float: left; }
+      form { width: 300px; float: left; }
       fieldset { width: 320px; margin-top: 20px}
       fieldset label { display: block; margin: 0.5em 0 0em; }
       fieldset input { width: 95%; }

diff --git a/examples/location.html b/examples/location.html
@@ -3,9 +3,7 @@
   <head>
     <title>GeoComplete</title>
     <meta charset="UTF-8">
-    <style type="text/css">
-      .map_canvas { width: 600px; height: 400px; }
-    </style>
+    <link rel="stylesheet" type="text/css" href="styles.css" />
   </head>
   <body>
 

diff --git a/examples/map.html b/examples/map.html
@@ -3,9 +3,7 @@
   <head>
     <title>GeoComplete</title>
     <meta charset="UTF-8">
-    <style type="text/css">
-      .map_canvas { width: 600px; height: 400px; }
-    </style>
+    <link rel="stylesheet" type="text/css" href="styles.css" />
   </head>
   <body>
 
@@ -15,6 +13,7 @@
     </form>
 
     <div id="examples">
+      Examples:
       <a href="#">Hamburg, Germany</a>
       <a href="#">Juliusstraße 25, Germany</a>
       <a href="#">3rr0r</a>

diff --git a/examples/multiple_results.html b/examples/multiple_results.html
@@ -3,10 +3,7 @@
   <head>
     <title>$.geocomplete()</title>
     <meta charset="UTF-8">
-    <style type="text/css">
-      .map_canvas { width: 600px; height: 400px; }
-      li { cursor: pointer; text-decoration: underline; }
-    </style>
+    <link rel="stylesheet" type="text/css" href="styles.css" />
   </head>
   <body>
 

diff --git a/examples/simple.html b/examples/simple.html
@@ -3,9 +3,7 @@
   <head>
     <title>$.geocomplete()</title>
     <meta charset="UTF-8">
-    <style type="text/css">
-      .map_canvas { width: 600px; height: 400px; }
-    </style>
+    <link rel="stylesheet" type="text/css" href="styles.css" />
   </head>
   <body>
 
@@ -15,6 +13,7 @@
     </form>
 
     <div id="examples">
+      Examples:
       <a href="#">Hamburg, Germany</a>
       <a href="#">3rr0r</a>
       <a href="#">Hauptstraße</a>

diff --git a/examples/styles.css b/examples/styles.css
@@ -0,0 +1,31 @@
+body {
+  color: #333;
+}
+
+body, input, button {
+  line-height: 1.4;
+  font: 13px Helvetica,arial,freesans,clean,sans-serif;
+}
+
+
+a {
+  color: #4183C4;
+  text-decoration: none;
+}
+
+#examples a {
+  text-decoration: underline;
+}
+
+#geocomplete { width: 200px}
+
+.map_canvas { 
+  width: 600px; 
+  height: 400px; 
+  margin: 10px 20px 10px 0;
+}
+
+#multiple li { 
+  cursor: pointer; 
+  text-decoration: underline; 
+}