Tweak style to better support small screens.

Peter Kuma · Peter Kuma · commit 028b2c6d5dc5 · 2012-03-29T13:44:08.000+02:00
diff --git a/fileshack/static/fileshack/css/base.css b/fileshack/static/fileshack/css/base.css
@@ -12,8 +12,8 @@ body {
 
 h1 {
     font-size: 30pt;
-    margin-top: 80px;
-    margin-bottom: 40px;
+    margin-top: 40px;
+    margin-bottom: 5%;
 }
 
 h1 span {
diff --git a/fileshack/static/fileshack/css/fileshack.css b/fileshack/static/fileshack/css/fileshack.css
@@ -6,7 +6,7 @@
 
 body {
     text-align: center;
-    margin: 50px;
+    margin: 5% 0;
 }
 
 button {
@@ -41,13 +41,13 @@ button::-moz-focus-inner {
 #container {
     margin: 0 auto;
     text-align: left;
-    width: 850px;
+    width: 820px;
+    padding: 0 20px;
 }
 
 #controls {
-    position: absolute;
-    right: 50px;
-    top: 30px;
+    float: right;
+    margin: 12px 0;
 }
 
 .logout:hover,.logout:focus {
diff --git a/fileshack/templates/fileshack/index.html b/fileshack/templates/fileshack/index.html
@@ -27,6 +27,11 @@
     </head>
     <body>
         <div id="container">
+	    <div id="controls">
+                <form action="logout/">
+                    <button type="submit" class="logout">{% trans "Logout" %}</button>
+                </form>
+            </div>
             <h1>{%trans "Welcome to fileshack" %}, <span>{% trans "drop your items" %}</span></h1>
             <div id="subcontainer">
 		<iframe src="iframe/" id="iframe" style="display: none"></iframe>
@@ -78,11 +83,6 @@ <h1>{%trans "Welcome to fileshack" %}, <span>{% trans "drop your items" %}</span
 		    </div>
 		</div>
             </div>
-            <div id="controls">
-                <form action="logout/">
-                    <button type="submit" class="logout">{% trans "Logout" %}</button>
-                </form>
-            </div>
 	    <div id="preload-1"></div>
 	    <div id="preload-2"></div>
 	    <div id="preload-3"></div>

Original file line number	Diff line number	Diff line change
`@@ -12,8 +12,8 @@ body {`
`12`	`12`
`13`	`13`	`h1 {`
`14`	`14`	`font-size: 30pt;`
`15`		`- margin-top: 80px;`
`16`		`- margin-bottom: 40px;`
	`15`	`+ margin-top: 40px;`
	`16`	`+ margin-bottom: 5%;`
`17`	`17`	`}`
`18`	`18`
`19`	`19`	`h1 span {`