doc: make responsive

groonga · Oct 6, 2015 · 0c0af15 · 0c0af15
1 parent 7055a88
commit 0c0af15
Showing 1 changed file with 126 additions and 0 deletions.
diff --git a/doc/themes/groonga/static/groonga.css_t b/doc/themes/groonga/static/groonga.css_t
@@ -19,6 +19,15 @@ body
     padding: 0px;
 }
 
+@media screen and (max-width: 640px)
+{
+    html,
+    body
+    {
+        margin: 0;
+    }
+}
+
 body
 {
     font-family: sans-serif;
@@ -41,6 +50,16 @@ div.header h1.title
     margin: 20px;
 }
 
+@media screen and (max-width: 640px)
+{
+    div.header h1.title
+    {
+        margin: 0;
+        margin-top: 5px;
+        margint-left: 5px;
+    }
+}
+
 div.header h1.title a,
 div.header h1.title a:link,
 div.header h1.title a:visited
@@ -64,6 +83,15 @@ div.header h1.title a
     border: 1px solid #FFF;
 }
 
+@media screen and (max-width: 640px)
+{
+    div.header h1.title a
+    {
+        height: auto;
+        margin-bottom: 5px;
+    }
+}
+
 div.header h1.title span
 {
 }
@@ -81,6 +109,17 @@ div.header h1.title span.description
     margin: 35px 0 0 240px;
 }
 
+@media screen and (max-width: 640px)
+{
+    div.header h1.title span.description
+    {
+        margin-top: 75px;
+        margin-bottom: 0;
+        margin-left: 5px;
+        margin-right: 5px;
+    }
+}
+
 div.header div.facebook-buttons
 {
     position: absolute;
@@ -98,6 +137,14 @@ div.header div.facebook-buttons
     overflow: hidden;
 }
 
+@media screen and (max-width: 640px)
+{
+    div.header div.facebook-buttons
+    {
+        display: none;
+    }
+}
+
 div.header div.other-language-links
 {
     position: absolute;
@@ -106,6 +153,14 @@ div.header div.other-language-links
     font-size: small;
 }
 
+@media screen and (max-width: 640px)
+{
+    div.header div.other-language-links
+    {
+        right: 5px;
+    }
+}
+
 div.header div.other-language-links ul,
 div.header div.other-language-links li
 {
@@ -139,6 +194,15 @@ div.documentwrapper
     width: 100%;
 }
 
+@media screen and (max-width: 640px)
+{
+    div.documentwrapper
+    {
+	float: none;
+	width: auto;
+    }
+}
+
 div.bodywrapper
 {
     background-color: #FAFAFA;
@@ -150,6 +214,16 @@ div.bodywrapper
     margin-bottom: 10px;
 }
 
+@media screen and (max-width: 640px)
+{
+    div.bodywrapper
+    {
+	border-width: 0;
+	padding: 0;
+	margin: 0;
+    }
+}
+
 div.body
 {
     background-color: #ffffff;
@@ -158,6 +232,16 @@ div.body
     padding-top: 10px;
 }
 
+@media screen and (max-width: 640px)
+{
+    div.body
+    {
+	padding: 0;
+	padding-left: 5px;
+	padding-right: 5px;
+    }
+}
+
 div.body h1,
 div.body h2,
 div.body h3,
@@ -187,6 +271,15 @@ div.body h1
     margin-top: 0;
 }
 
+@media screen and (max-width: 640px)
+{
+    div.body h1
+    {
+        margin: 0;
+	padding-left: 10px;
+    }
+}
+
 div.body h2
 {
     font-size: large;
@@ -286,6 +379,23 @@ div.related li
     margin-left:20px;
 }
 
+@media screen and (max-width: 640px)
+{
+    div.related ul
+    {
+        padding-top: 5px;
+        padding-bottom: 5px;
+        padding-left: 5px;
+        padding-right: 5px;
+        line-height: 1.5em;
+    }
+
+    div.related li
+    {
+        margin-left: 0;
+    }
+}
+
 div.related a,
 div.related a:link,
 div.related a:visited,
@@ -339,6 +449,14 @@ div.sphinxsidebar
     float: right;
 }
 
+@media screen and (max-width: 640px)
+{
+    div.sphinxsidebar
+    {
+        display: none;
+    }
+}
+
 div.sphinxsidebar h3
 {
     font-family: sans-serif;
@@ -465,6 +583,14 @@ pre
     word-wrap: normal;
 }
 
+@media screen and (max-width: 640px)
+{
+    pre
+    {
+        padding: 5px;
+    }
+}
+
 tt
 {
     background-color: #ecf0f3;