kennethreitz/12factor
1
0
Fork 0
mirror of https://github.com/kennethreitz/12factor.git synced 2026-06-05 23:10:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

Adding mobile-optimized CSS

Browse Source 
Minor typography and layout tweaks
This commit is contained in:
Mattt Thompson
2012-01-30 08:40:19 -08:00
parent 4d96a072c0
commit 6e1bec0b7a
4 changed files with 77 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/css/mobile.css
+52
View File
@@ -0,0 +1,52 @@
@media screen and (max-width: 480px) {
header {
font-size: 0.75em;
}
section, article, nav, footer {
min-width: 320px;
max-width: 480px;
}
article h1, article h2, article h3, article p, article table {
text-align: left;
padding-left: 1em;
padding-right: 1em;
}
article h2 {
padding-left: 0.75em;
}
article ul, article ol {
padding-left: 2em;
padding-right: 1em;
}
article table {
font-size: 0.5em;
}
article table td {
padding-left: 0.25em;
padding-right: 0.25em;
}
article img {
max-width: 100%;
margin-bottom: 1em;
}
#prev {
margin-left: 1em;
}
#next {
margin-right: 1em;
}
footer {
padding-left: 0;
padding-right: 0;
}
}
public/style.css → public/css/screen.css
+17 -4
View File
@@ -11,6 +11,10 @@ h1, h2, h3 {
margin: 0;
}
h1, h2 {
line-height: 1.25em;
}
header {
margin: 0;
margin-bottom: 8pt;
@@ -23,6 +27,11 @@ header {
text-align: center;
box-shadow: 0px 2px 12px #888;
}
header h1 {
margin-top:0.25em;
}
header a {
text-decoration: none;
color: #fff;
@@ -43,7 +52,7 @@ article {
article, nav {
margin: 0 auto;
text-align: justify;
width: 55em;
max-width: 55em;
}
article p a, article li a {
text-decoration: none;
@@ -63,8 +72,8 @@ section.concrete {
}
section.concrete h1 {
font-size: 28pt;
margin-bottom: 30pt;
text-decoration: underline;
margin-bottom: 32pt;
text-align: center;
}
section.concrete h2 {
margin-top: 12pt;
@@ -128,11 +137,15 @@ footer {
background: #000;
padding-top: 24pt;
padding-bottom: 16pt;
text-align: right;
text-align: center;
padding-right: 64pt;
min-height: 56pt;
}
footer span {
display: block;
}
article img {
float: right;
margin-left: 32pt;
views/home.erb
+3 -3
View File
@@ -9,7 +9,7 @@
</section>
<footer>
<div>Written by Adam Wiggins</div>
<div>Last updated Dec 22, 2011</div>
<div><a href="http://github.com/adamwiggins/12factor">Sourecode</a></div>
<span>Written by Adam Wiggins</span>
<span>Last updated Dec 22, 2011</span>
<span><a href="http://github.com/adamwiggins/12factor">Sourecode</a></span>
</footer>
views/layout.erb
+5 -3
View File
@@ -1,4 +1,5 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
@@ -9,15 +10,16 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="/favicon.ico">
<link rel="stylesheet" href="/style.css">
<link rel="stylesheet" href="/css/screen.css" media="screen">
<link rel="stylesheet" href="/css/mobile.css" media="screen">
<script type="text/javascript" src="http://use.typekit.com/rsq7tro.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
</head>
<body>
<header>
<img src="/images/symbol.png" />
<h1><a href="/">The Twelve-Factor App</a></h1>
<h1><a href="/" title="The Twelve-Factor App">The Twelve-Factor App</a></h1>
</header>
<%= yield %>