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 #content { margin-top: 58px; }
  84
  85 .map-layout {
  86   #sidebar {
  87     width: 100%;
  88     position: fixed;
  89     top: 58px;
  90     height: 370px;
  91     overflow-x: hidden;
  92     z-index: 1;
  93     background: #fff;
  94     p.large-text {
  95       font-size: 1.2em;
  96       line-height: 1.4em;
  97     }
  98     &.minimized {
  99       background: none;
 100     }
 101   }
 102   #content {
 103     position: fixed;
 104     top: 0;
 105     display: block;
 106     height: 100%;
 107     margin-top: 0;
 108     padding-top: 58px;
 109   }
 110   #map {
 111     width: 100%;
 112     // height: 100%;
 113     // position: fixed;
 114   }
 115 }
 116
 117 .leaflet-top.leaflet-right {
 118   top: 10px !important;
 119   z-index: 0;
 120 }
 121
 122 .content_map {
 123   width: 100%;
 124   border: none;
 125   float: none;
 126   height: 200px;
 127   max-height: none;
 128   min-height: auto;
 129 }
 130
 131 /* Rules for the map UI */
 132
 133 .layers-ui {
 134   .leaflet-container {
 135     display: none;
 136   }
 137
 138   li {
 139     border-radius: 0;
 140     margin-bottom: 0;
 141
 142     &:first-child {
 143       border-radius: 4px 4px 0 0;
 144     }
 145
 146     &:last-child {
 147       border-radius: 0 0 4px 4px;
 148     }
 149   }
 150
 151   .overlay-layers p {
 152     display: none;
 153   }
 154 }
 155
 156 /* Rules for the login form */
 157
 158 #login_login input#user_email {
 159   width: 100%;
 160   max-width: 18em;
 161 }
 162
 163 #login_login input#user_password {
 164   width: 100%;
 165   max-width: 18em;
 166 }
 167
 168 #login_login input#openid_url {
 169   width: 100%;
 170   max-width: 18em;
 171 }
 172
 173 #login_openid_buttons td {
 174   padding: 2px;
 175 }
 176
 177 /* Rules for the user view */
 178
 179 .user_map {
 180   width: 100% !important;
 181   height: 300px !important;
 182 }
 183
 184 #userinformation .deemphasize {
 185   position: relative;
 186   right: auto; left: auto;
 187   margin-top: 10px;
 188   top: auto;
 189 }
 190
 191 /* Rules for the sign-up page */
 192
 193 .user-new,
 194 .user-create {
 195   .col6 {
 196     width: 100%;
 197   }
 198
 199   .aside {
 200     display: none;
 201   }
 202 }
 203
 204 .site-about #content .attr h1 {
 205   font-size: 28px;
 206 }