From 8b9e559167e27c490648cc55c4f617c2e9122a18 Mon Sep 17 00:00:00 2001 From: Sarven Capadisli Date: Mon, 2 Mar 2009 00:06:29 +0000 Subject: [PATCH] Updated typography and layout --- theme/base/css/mobile.css | 144 +++++++++++++++++++++++++++++--------- 1 file changed, 111 insertions(+), 33 deletions(-) diff --git a/theme/base/css/mobile.css b/theme/base/css/mobile.css index 3d0455a673..eee98317cc 100644 --- a/theme/base/css/mobile.css +++ b/theme/base/css/mobile.css @@ -2,14 +2,21 @@ * * @package Laconica * @author Meitar Moscovitz + * @author Sarven Capadisli * @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; } +#footer, +#form_notice .form_actions input.submit { +width:auto; +} -/* And liquid. */ -#wrap { width: 95%; } +.form_settings label { +width:25%; +} +.form_settings .form_data p.form_guide { +margin-left:26%; +} -/* Make things bigger on smaller screens. */ -body { font-size: 2em; } -.notices { font-size: 1.5em; } +#site_nav_global_primary { +width:75%; +} -#site_nav_global_primary, #site_nav_global_secondary { text-align: center; } +.entity_profile { +width:65%; +} +.entity_actions { +margin-left:0; +} -.notice div.entry-content { margin-left: 0; } -address { margin: 0; } +#form_notice, +#anon_notice { +clear:both; +} -#anon_notice, #footer { clear: left; font-size: .5em; } +#content, +#aside_primary { +width:96%; +padding-left:2%; +padding-right:2%; +} -#form_notice textarea { width: 80%; height: 5em; } -#form_notice .form_note { right: 20%; top: 6em; } -#form_notice .form_actions input.submit { width: auto; } +#site_notice { +position:static; +float:right; +clear:right; +width:75%; +margin-right:0; +margin-bottom:11px; +} -#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; } +.notices { +font-size:1.5em; +} -#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; } +#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; +}