Kouhei Sutou
null+****@clear*****
Tue Oct 6 15:25:10 JST 2015
Kouhei Sutou 2015-10-06 15:25:10 +0900 (Tue, 06 Oct 2015) New Revision: 25956ac7bed962cca84b6855d21c763e0c9e7d12 https://github.com/groonga/groonga.org/commit/25956ac7bed962cca84b6855d21c763e0c9e7d12 Message: Make responsive Modified files: css/screen.css Modified: css/screen.css (+156 -2) =================================================================== --- css/screen.css 2015-10-06 14:47:09 +0900 (bec27c6) +++ css/screen.css 2015-10-06 15:25:10 +0900 (1b50be3) @@ -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; -------------- next part -------------- HTML����������������������������...Download