app/assets/stylesheets/small.css.scss

   1 /* Styles specific to a small screen, such as iPhone, Android, etc... */
   2
   3 * { -webkit-appearance: none; }
   4
   5 /* Default rules for the body of every page */
   6
   7 .column-1 {
   8   width: 100%;
   9 }
  10
  11 /* Rules for the whole left sidebar, including the logo */
  12
  13 #menu-icon {
  14   display: inline-block !important;
  15 }
  16
  17
  18 nav.primary,
  19 nav.secondary {
  20   float: none !important;
  21   position: relative;
  22   display: block;
  23   clear: both;
  24 }
  25
  26 header {
  27   min-height: 54px;
  28   height: auto;
  29   background: #fff;
  30   border-bottom: 1px solid #ddd;
  31   clear: both;
  32   position: fixed;
  33   width: 100%;
  34   top: 0;
  35   h1 { padding-bottom: 15px; }
  36   &.closed {
  37     nav.primary,
  38     nav.secondary {
  39       display: none;
  40     }
  41   }
  42 }
  43
  44 .mobile-hide { display: none !important; }
  45
  46 nav.primary {
  47   padding: 0;
  48   ul, li {
  49     border: none;
  50     border-radius: 0;
  51     width: 100%;
  52   }
  53   ul {
  54     border-top: 1px solid #eee;
  55     li {
  56       border-bottom: 1px solid #eee;
  57       border-right: none;
  58       > a {
  59         border-radius: 0;
  60         width: 100%;
  61         text-align: center;
  62         font-size: 15px;
  63       }
  64     }
  65   }
  66 }
  67
  68 nav.secondary {
  69   .user-menu {
  70     display: block;
  71     width: 100%;
  72     margin-left: 0;
  73     > li {
  74       width: 49%;
  75       > a {
  76         width: 100%;
  77         text-align: center;
  78       }
  79     }
  80   }
  81 }
  82
  83 #compact-secondary-nav {
  84   display: none;
  85 }
  86 .compact-hide {
  87   display: inline-block;
  88 }
  89
  90 #content { margin-top: 58px; }
  91
  92 .map-layout {
  93   #sidebar {
  94     width: 100%;
  95     position: fixed;
  96     top: 58px;
  97     height: 370px;
  98     overflow-x: hidden;
  99     z-index: 1;
 100     background: #fff;
 101     p.large-text {
 102       font-size: 1.2em;
 103       line-height: 1.4em;
 104     }
 105     &.minimized {
 106       background: none;
 107     }
 108   }
 109   #content {
 110     position: fixed;
 111     top: 0;
 112     display: block;
 113     height: 100%;
 114     margin-top: 0;
 115     padding-top: 58px;
 116   }
 117   #map {
 118     width: 100%;
 119     // height: 100%;
 120     // position: fixed;
 121   }
 122 }
 123
 124 .leaflet-top.leaflet-right {
 125   top: 10px !important;
 126   z-index: 0;
 127 }
 128
 129 .content_map {
 130   width: 100%;
 131   border: none;
 132   float: none;
 133   height: 200px;
 134   max-height: none;
 135   min-height: auto;
 136 }
 137
 138 /* Rules for the map UI */
 139
 140 .layers-ui {
 141   .leaflet-container {
 142     display: none;
 143   }
 144
 145   li {
 146     border-radius: 0;
 147     margin-bottom: 0;
 148
 149     &:first-child {
 150       border-radius: 4px 4px 0 0;
 151     }
 152
 153     &:last-child {
 154       border-radius: 0 0 4px 4px;
 155     }
 156   }
 157
 158   .overlay-layers p {
 159     display: none;
 160   }
 161 }
 162
 163 /* Rules for the login form */
 164
 165 #login_login input#user_email {
 166   width: 100%;
 167   max-width: 18em;
 168 }
 169
 170 #login_login input#user_password {
 171   width: 100%;
 172   max-width: 18em;
 173 }
 174
 175 #login_login input#openid_url {
 176   width: 100%;
 177   max-width: 18em;
 178 }
 179
 180 #login_openid_buttons td {
 181   padding: 2px;
 182 }
 183
 184 /* Rules for the user view */
 185
 186 .user_map {
 187   width: 100% !important;
 188   height: 300px !important;
 189 }
 190
 191 #userinformation .deemphasize {
 192   position: relative;
 193   right: auto; left: auto;
 194   margin-top: 10px;
 195   top: auto;
 196 }
 197
 198 /* Rules for the sign-up page */
 199
 200 .user-new,
 201 .user-create {
 202   .col6 {
 203     width: 100%;
 204   }
 205
 206   .aside {
 207     display: none;
 208   }
 209 }
 210
 211 .site-about #content .attr h1 {
 212   font-size: 28px;
 213 }