Make responsive

groonga · Oct 6, 2015 · 25956ac · 25956ac
1 parent 5982b6d
commit 25956ac
Showing 1 changed file with 156 additions and 2 deletions.
diff --git a/css/screen.css b/css/screen.css
@@ -6,6 +6,15 @@ body
     font-family: sans-serif;
 }
 
+@media screen and (max-width: 640px)
+{
+    html,
+    body
+    {
+	margin: 0;
+    }
+}
+
 pre
 {
     overflow: auto;
@@ -17,6 +26,13 @@ pre
     border: 1px solid #DDD;
 }
 
+@media screen and (max-width: 640px)
+{
+    pre
+    {
+	padding: 5px;
+    }
+}
 
 header
 {
@@ -33,6 +49,14 @@ header div.title
     margin-right: 360px;
 }
 
+@media screen and (max-width: 640px)
+{
+    header div.title
+    {
+	margin: 0;
+	margint-left: 5px;
+    }
+}
 
 header div.title a,
 header div.title a:link,
@@ -51,6 +75,15 @@ header div.title a
     margin-bottom:40px;
 }
 
+@media screen and (max-width: 640px)
+{
+    header div.title a
+    {
+	height: auto;
+	margin-bottom: 5px;
+    }
+}
+
 header div.title span
 {
 }
@@ -68,7 +101,16 @@ header div.title span.description
     margin:35px 0 0 240px;
 }
 
-
+@media screen and (max-width: 640px)
+{
+    header div.title span.description
+    {
+	margin-top: 70px;
+	margin-bottom: 0;
+	margin-left: 5px;
+	margin-right: 5px;
+    }
+}
 
 /*===nav===*/
 
@@ -94,6 +136,19 @@ header nav li
     margin-left:20px;
 }
 
+@media screen and (max-width: 640px)
+{
+    header nav ul
+    {
+	line-height: 1.5em;
+    }
+
+    header nav li
+    {
+	margin-left: 5px;
+    }
+}
+
 header nav a,
 header nav a:link,
 header nav a:visited,
@@ -129,6 +184,14 @@ header div.facebook-buttons
     height: 90px;
 }
 
+@media screen and (max-width: 640px)
+{
+    header div.facebook-buttons
+    {
+	display: none;
+    }
+}
+
 header div.other-language-links
 {
     position: absolute;
@@ -138,6 +201,14 @@ header div.other-language-links
     /* width: 50px; */
 }
 
+@media screen and (max-width: 640px)
+{
+    header div.other-language-links
+    {
+	right: 10px;
+    }
+}
+
 header div.other-language-links ul,
 header div.other-language-links li
 {
@@ -161,6 +232,14 @@ div#body h1
     margin-left: 30px;
 }
 
+@media screen and (max-width: 640px)
+{
+    div#body h1
+    {
+	margin: 5px;
+    }
+}
+
 div#content
 {
     background-color: #FAFAFA;
@@ -172,6 +251,15 @@ div#content
     margin-bottom: 10px;
 }
 
+@media screen and (max-width: 640px)
+{
+    div#content
+    {
+	padding: 0;
+	margin: 0;
+    }
+}
+
 div#content h2,
 div#content h3,
 div#content h4,
@@ -195,6 +283,14 @@ div#content h2
     margin: 0;
 }
 
+@media screen and (max-width: 640px)
+{
+    div#content h2
+    {
+	padding: 10px;
+    }
+}
+
 div#content section#related-projects h3
 {
     color: white;
@@ -249,6 +345,15 @@ div#content div.post
     padding-bottom: 10px;
 }
 
+@media screen and (max-width: 640px)
+{
+    div#content section,
+    div#content div.post
+    {
+	padding: 0 5px;
+    }
+}
+
 div#content div#posts
 {
     background-color: white;
@@ -259,9 +364,16 @@ div#content div.post
     margin-bottom: 5em;
 }
 
+@media screen and (max-width: 640px)
+{
+    div#content div.post
+    {
+	margin: 0;
+    }
+}
+
 div#content div.post p
 {
-    text-indent: 1em;
     line-height: 150%;
 }
 
@@ -341,6 +453,14 @@ div#sidebar
     overflow: auto;
 }
 
+@media screen and (max-width: 640px)
+{
+    div#sidebar
+    {
+	display: none;
+    }
+}
+
 div#sidebar h2
 {
     font-size: small;
@@ -434,6 +554,31 @@ div#top-page-content div.notices section#latest
     float: right;
 }
 
+@media screen and (max-width: 640px)
+{
+    div#top-page-content
+    {
+	padding: 0;
+    }
+
+    div#top-page-content div.notices
+    {
+	width: auto;
+    }
+
+    div#top-page-content div.notices section
+    {
+	width: auto;
+	margin: 5px 0;
+    }
+
+    div#top-page-content div.notices section#about,
+    div#top-page-content div.notices section#latest
+    {
+	float: none;
+    }
+}
+
 div#top-page-content div.notices section:hover
 {
     -moz-opacity: 1;
@@ -532,6 +677,15 @@ footer address
     text-align: center;
 }
 
+@media screen and (max-width: 640px)
+{
+    footer p
+    {
+	margin-left: 5px;
+	margin-right: 5px;
+    }
+}
+
 footer address
 {
     padding-top: 5px;