theme/base/css/mobile.css

   1 /** theme: base
   2  *
   3  * @package   Laconica
   4  * @author    Meitar Moscovitz <meitar@maymay.net>
   5  * @license   http://www.fsf.org/licensing/licenses/agpl-3.0.html GNU Affero General Public License version 3.0
   6  * @link      http://laconi.ca/
   7  */
   8
   9 /* Go linear. */
  10 #header,
  11 #header address,
  12 #site_nav_global_primary,
  13 #anon_notice,
  14 #site_nav_local_views .nav,
  15 #form_notice,
  16 #form_notice .form_data li,
  17 #core,
  18 #content_inner,
  19 #notices_primary,
  20 .notice,
  21 .notice .entry-title,
  22 .notice div.entry-content,
  23 .notice-options,
  24 .notice .notice-options a,
  25 .pagination,
  26 .pagination .nav,
  27 .aside .section { float: none; }
  28
  29 .notice-options .notice_reply,
  30 .notice-options .notice_delete,
  31 .notice-options .form_favor,
  32 .notice-options .form_disfavor { position: static; }
  33
  34 #form_notice,
  35 #anon_notice,
  36 #content_inner,
  37 #footer { width: auto; }
  38
  39 /* And liquid. */
  40 #wrap { width: 95%; }
  41
  42 /* Make things bigger on smaller screens. */
  43 body { font-size: 2em; }
  44 .notices { font-size: 1.5em; }
  45
  46 #site_nav_global_primary, #site_nav_global_secondary { text-align: center; }
  47
  48 .notice div.entry-content { margin-left: 0; }
  49 address { margin: 0; }
  50
  51 #anon_notice, #footer { clear: left; font-size: .5em; }
  52
  53 #form_notice textarea { width: 80%; height: 5em; }
  54 #form_notice .form_note { right: 20%; top: 6em; }
  55 #form_notice .form_actions input.submit { width: auto; }
  56
  57 #content { padding: 18px 0; width: 100%; }
  58 #content h1, #page_notice, #content_inner { padding: 0 18px; }
  59 .notices .entry-title, .notices div.entry-content { width: 90%; }
  60 .notice .author .photo { height: 4.5em; width: 4.5em; } /* about double physical size; TODO: do this scaling better */
  61 .notice-options { position: absolute; top: 0; right: 0; padding-left: 7%; width: 3%; }
  62 .notice-options .notice_delete a { float: left; } /* Works, but feels like it shouldn't. */
  63 /* TODO: Make the icons of the notice options bigger. Probably with mobile-specific images. */
  64 .pagination .nav { overflow: auto; }
  65
  66 #aside_primary { margin: 10px 0 0 0; border: none; padding: 0; width: 100%; }
  67 #popular_notices { float: none; width: auto; }
  68 /* Columns for supplemental info. */
  69 .aside .section { clear: none; padding: 9px; width: 45%; }
  70 #top_groups_by_post { float: left; }
  71 #featured_users { float: right; }
  72 #export_data { display: none; }