Updated typography and layout

diff --git a/theme/base/css/mobile.css b/theme/base/css/mobile.css
index 3d0455a6730105aef82f942692c01ab47c23ca97..eee98317ccbdf15aa642e7a276dbef77645543fb 100644 (file)
--- a/theme/base/css/mobile.css
+++ b/theme/base/css/mobile.css
@@ -2,14 +2,21 @@
  *
  * @package   Laconica
  * @author    Meitar Moscovitz <meitar@maymay.net>
+ * @author    Sarven Capadisli <csarven@controlyourself.ca>
  * @license   http://www.fsf.org/licensing/licenses/agpl-3.0.html GNU Affero General Public License version 3.0
  * @link      http://laconi.ca/
  */
 
-/* Go linear. */
+body {
+font-size:2.5em;
+}
+
+#wrap {
+width:95%;
+}
+
 #header,
 #header address,
-#site_nav_global_primary,
 #anon_notice,
 #site_nav_local_views .nav,
 #form_notice,
@@ -24,49 +31,120 @@
 .notice .notice-options a,
 .pagination,
 .pagination .nav,
-.aside .section { float: none; }
+.aside .section {
+float:none;
+}
 
 .notice-options .notice_reply,
 .notice-options .notice_delete,
 .notice-options .form_favor,
-.notice-options .form_disfavor { position: static; }
+.notice-options .form_disfavor {
+position:static;
+}
 
 #form_notice,
 #anon_notice,
-#content_inner,
-#footer { width: auto; }
-
-/* And liquid. */
-#wrap { width: 95%; }
-
-/* Make things bigger on smaller screens. */
-body { font-size: 2em; }
-.notices { font-size: 1.5em; }
-
-#site_nav_global_primary, #site_nav_global_secondary { text-align: center; }
-
-.notice div.entry-content { margin-left: 0; }
-address { margin: 0; }
-
-#anon_notice, #footer { clear: left; font-size: .5em; }
-
-#form_notice textarea { width: 80%; height: 5em; }
-#form_notice .form_note { right: 20%; top: 6em; }
-#form_notice .form_actions input.submit { width: auto; }
-
-#content { padding: 18px 0; width: 100%; }
-#content h1, #page_notice, #content_inner { padding: 0 18px; }
-.notices .entry-title, .notices div.entry-content { width: 90%; }
-.notice .author .photo { height: 4.5em; width: 4.5em; } /* about double physical size; TODO: do this scaling better */
-.notice-options { position: absolute; top: 0; right: 0; padding-left: 7%; width: 3%; }
-.notice-options .notice_delete a { float: left; } /* Works, but feels like it shouldn't. */
-/* TODO: Make the icons of the notice options bigger. Probably with mobile-specific images. */
-.pagination .nav { overflow: auto; }
-
-#aside_primary { margin: 10px 0 0 0; border: none; padding: 0; width: 100%; }
-#popular_notices { float: none; width: auto; }
-/* Columns for supplemental info. */
-.aside .section { clear: none; padding: 9px; width: 45%; }
-#top_groups_by_post { float: left; }
-#featured_users { float: right; }
-#export_data { display: none; }
+#footer,
+#form_notice .form_actions input.submit {
+width:auto;
+}
+
+.form_settings label {
+width:25%;
+}
+.form_settings .form_data p.form_guide {
+margin-left:26%;
+}
+
+#site_nav_global_primary {
+width:75%;
+}
+
+.entity_profile {
+width:65%;
+}
+.entity_actions {
+margin-left:0;
+}
+
+#form_notice,
+#anon_notice {
+clear:both;
+}
+
+#content,
+#aside_primary {
+width:96%;
+padding-left:2%;
+padding-right:2%;
+}
+
+#site_notice {
+position:static;
+float:right;
+clear:right;
+width:75%;
+margin-right:0;
+margin-bottom:11px;
+}
+
+.notices {
+font-size:1.5em;
+}
+
+#form_notice textarea {
+width:80%;
+height:5em;
+}
+#form_notice .form_note {
+right:20%;
+top:6em;
+}
+
+
+.vcard .photo,
+.section .vcard .photo {
+margin-right:18px;
+}
+.notice,
+.profile {
+margin-bottom:18px;
+}
+
+.notices .entry-title,
+.notices div.entry-content {
+width:90%;
+}
+.notice div.entry-content {
+margin-left:0;
+}
+
+.notice .author .photo {
+height:4.5em;
+width:4.5em;
+}
+.notice-options {
+position:absolute;
+top:0;
+right:0;
+padding-left:7%;
+width:3%;
+}
+
+.notice-options .notice_delete a {
+float:left;
+}
+.pagination .nav {
+overflow:auto;
+}
+
+#export_data {
+display:none;
+}
+
+#site_nav_local_views li {
+margin-right:4px;
+}
+#site_nav_local_views a {
+padding:18px 11px;
+}