Add a "Start Mapping" button

[rails.git] / app / assets / stylesheets / common.css.scss

diff --git a/app/assets/stylesheets/common.css.scss b/app/assets/stylesheets/common.css.scss
index a73c8e86d86799d8a0088a5c053bde369aeba3b7..72bb89ba1ddd884ae0f611abc179be2c8bc406c1 100644 (file)
--- a/app/assets/stylesheets/common.css.scss
+++ b/app/assets/stylesheets/common.css.scss
@@ -57,6 +57,22 @@ abbr, acronym {
     clear: both;
 }
 
+/* Basic grid */
+
+.col0    { float:left; width:04.1666%; }
+.col1    { float:left; width:08.3333%; }
+.col2    { float:left; width:16.6666%; }
+.col3    { float:left; width:25.0000%; }
+.col4    { float:left; width:33.3333%; }
+.col5    { float:left; width:41.6666%; }
+.col6    { float:left; width:50.0000%; }
+.col7    { float:left; width:58.3333%; }
+.col8    { float:left; width:66.6666%; }
+.col9    { float:left; width:75.0000%; }
+.col10   { float:left; width:83.3333%; }
+.col11   { float:left; width:91.6666%; }
+.col12   { width:100%; }
+
 /* Default rules for the body of every page */
 
 * {
@@ -1012,6 +1028,18 @@ ul.results-list li { border-bottom: 1px solid #ccc; }
   border-left: 1px solid #ccc;
 }
 
+.site-copyright,
+.site-welcome {
+  .content-heading {
+    text-align: center;
+  }
+
+  #content {
+    max-width: 700px;
+    margin: auto;
+  }
+}
+
 .wrapper {
   margin-left: 184px;
   border-left: 1px solid #ccc;
@@ -2191,3 +2219,94 @@ a.button {
   border: 0;
   background: #fff;
 }
+
+/* Rules for the "Welcome" page */
+.site-welcome {
+  .center {
+    text-align: center;
+  }
+
+  .drop {
+    margin-top: 20px;
+  }
+
+  .sprite {
+    background-image: image-url("welcome-sprite.png");
+    background-size: 500px 250px;
+    display: inline-block;
+  }
+
+  .sprite.small {
+    width: 50px;
+    height: 50px;
+  }
+
+  .sprite.x {
+    background-position: -50px 0;
+  }
+
+  .sprite.large {
+    width: 350px;
+    height: 200px;
+  }
+
+  .sprite.one-map {
+    background-position: 0 -50px;
+  }
+
+  .sprite.term {
+    margin-right: 10px;
+    vertical-align: middle;
+  }
+
+  .sprite.node {
+    background-position: -100px 0;
+  }
+
+  .sprite.way {
+    background-position: -150px 0;
+  }
+
+  .sprite.changeset {
+    background-position: -200px 0;
+  }
+
+  .sprite.editor {
+    background-position: -250px 0;
+  }
+
+  .sprite.question {
+    background-position: -300px 0;
+  }
+
+  .pad1 {
+    padding: 10px;
+  }
+
+  .pad2 {
+    padding: 20px;
+  }
+
+  .edit-located,
+  .edit-geocoded,
+  .edit-geolocated {
+    display: none;
+  }
+
+  .start-mapping {
+    background: #EB6F67;
+    color: #FFF;
+    display: block;
+    margin: auto;
+    cursor: pointer;
+    border: none;
+    border-radius: 5px;
+    border-bottom: 1px solid #A53931;
+    padding: 20px 40px;
+    font-size: 30px;
+  }
+
+  .note-box {
+    background-color: $offwhite;
+  }
+}