fixed CSS style for small screens. also avoided the floating banner.

Signed-off-by: Yichun Zhang (agentzh) <[email protected]>
qinguanri · Jun 23, 2016 · ef2d792 · ef2d792
1 parent 63c20ae
commit ef2d792
Show file tree

Hide file tree

Showing 8 changed files with 84 additions and 96 deletions.
diff --git a/v2/css/lib.less b/v2/css/lib.less
@@ -83,32 +83,3 @@
         .cl();
     }
 }
-
-
-/*=====================================================================================
-  Reset
-=======================================================================================*/
-a, abbr, address, article, aside, audio, b, blockquote, body, canvas, caption, cite, code, dd, del, details, dfn, div, dl, dt, em, embed, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, html, i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav, object, ol, p, pre, q, samp, section, small, span, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, date, tr, ul, var, video { margin: 0; padding: 0; border: 0; font-size: 100%; vertical-align: baseline; }
-article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary { display: block; }
-a, ins, del { text-decoration: none; }
-blockquote, q { quotes:none; }
-ul, ol { list-style: none; }
-table { border-spacing: 0; border-collapse: collapse; }
-caption, th { text-align: left; }
-blockquote:before, blockquote:after, q:after, q:before { content: ''; }
-/*=====================================================================================
-  Basic Styles
-=======================================================================================*/
-html { height: 100%; }
-body { background: @bg; color: @basic; font-family: @fontstack; font-size: 16px; -webkit-font-smoothing: antialiased; padding-top: 88px;}
-hr { display: none; }
-b, strong { font-weight: bold; }
-em { font-style: italic; }
-del { text-decoration: line-through; }
-address, cite, dfn { font-style: normal; }
-abbr, acronym { border-bottom: 1px dotted #999; cursor: help; }
-img { vertical-align: middle; }
-a, a:visited { color: @link; text-decoration: underline; }
-a:active { color: @link; outline: 0; text-decoration: underline; }
-a:hover { color: darken(@link, 15%); }
-input { font-family: @fontstack; }
diff --git a/v2/css/main.css b/v2/css/main.css
@@ -15,6 +15,14 @@
 @media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
 @media (min-width: @screen-lg-min) { ... }
 */
+.left {
+  float: left;
+  display: inline;
+}
+.right {
+  float: right;
+  display: inline;
+}
 /*=====================================================================================
   Reset
 =======================================================================================*/
@@ -149,7 +157,6 @@ body {
   font-family: "Open Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
   font-size: 16px;
   -webkit-font-smoothing: antialiased;
-  padding-top: 88px;
 }
 hr {
   display: none;
@@ -193,14 +200,6 @@ a:hover {
 input {
   font-family: "Open Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
 }
-.left {
-  float: left;
-  display: inline;
-}
-.right {
-  float: right;
-  display: inline;
-}
 /*=====================================================================================
   Layout
 =======================================================================================*/
@@ -302,15 +301,7 @@ header[role="header"] {
   -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), inset 0 -1px 0 rgba(0,0,0,0.2), 0 2px 4px rgba(0,0,0,0.1);
   -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), inset 0 -1px 0 rgba(0,0,0,0.2), 0 2px 4px rgba(0,0,0,0.1);
   text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
-  top: 0;
-  left: 0;
   z-index: 5;
-  position: absolute;
-}
-@media (min-height: 600px) {
-  header[role="header"] {
-    position: fixed;
-  }
 }
 header[role="header"] .site-name {
   /* text-transform: uppercase; */
@@ -389,22 +380,24 @@ header[role="header"] form input[type=search]:active {
 =======================================================================================*/
 #intro {
   background: #446d44 url(../images/bg-grid.png) top left;
-  width: 100%;
-  height: 180px;
+  min-height: 150px;
   color: #f9fcf9;
 }
 #intro .text {
   width: 80%;
-  height: 100%;
-  min-width: 982px;
   margin: 0 auto;
-  padding-right: 300px;
   box-sizing: border-box;
   -ms-box-sizing: border-box;
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
-  background: url(../images/media-server.png) bottom right no-repeat;
   padding-top: 35px;
+  padding-bottom: 35px;
+}
+@media (min-width: 768px) {
+  #intro .text {
+    padding-right: 300px;
+    background: url(../images/media-server.png) bottom right no-repeat;
+  }
 }
 #intro .text p {
   line-height: 28px;

diff --git a/v2/css/main.less b/v2/css/main.less
@@ -4,6 +4,35 @@
 .right { float: right; display: inline; }
 
 
+/*=====================================================================================
+  Reset
+=======================================================================================*/
+a, abbr, address, article, aside, audio, b, blockquote, body, canvas, caption, cite, code, dd, del, details, dfn, div, dl, dt, em, embed, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, html, i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav, object, ol, p, pre, q, samp, section, small, span, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, date, tr, ul, var, video { margin: 0; padding: 0; border: 0; font-size: 100%; vertical-align: baseline; }
+article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary { display: block; }
+a, ins, del { text-decoration: none; }
+blockquote, q { quotes:none; }
+ul, ol { list-style: none; }
+table { border-spacing: 0; border-collapse: collapse; }
+caption, th { text-align: left; }
+blockquote:before, blockquote:after, q:after, q:before { content: ''; }
+/*=====================================================================================
+  Basic Styles
+=======================================================================================*/
+html { height: 100%; }
+body { background: @bg; color: @basic; font-family: @fontstack; font-size: 16px; -webkit-font-smoothing: antialiased; }
+hr { display: none; }
+b, strong { font-weight: bold; }
+em { font-style: italic; }
+del { text-decoration: line-through; }
+address, cite, dfn { font-style: normal; }
+abbr, acronym { border-bottom: 1px dotted #999; cursor: help; }
+img { vertical-align: middle; }
+a, a:visited { color: @link; text-decoration: underline; }
+a:active { color: @link; outline: 0; text-decoration: underline; }
+a:hover { color: darken(@link, 15%); }
+input { font-family: @fontstack; }
+
+
 /*=====================================================================================
   Layout
 =======================================================================================*/
@@ -83,12 +112,7 @@ header[role="header"] {
     .vg(@green, darken(@green, 5%));
     .bs(~'inset 0 1px 0 rgba(255,255,255,0.2), inset 0 -1px 0 rgba(0,0,0,0.2), 0 2px 4px rgba(0,0,0,0.1)');
     text-shadow: 0 1px 1px rgba(0,0,0,0.3);
-    top: 0; left: 0; z-index: 5;
-    position: absolute;
-
-    @media (min-height: 600px) {
-        position: fixed;
-    }
+    z-index: 5;
 
 	.site-name {
         /* text-transform: uppercase; */
@@ -132,9 +156,21 @@ header[role="header"] {
 =======================================================================================*/
 #intro {
     background: darken(@green, 11%) url(../images/bg-grid.png) top left;
-    .x(100%, 180px);
+    min-height: 150px;
     color: @bg;
-	.text { .x(80%, 100%); min-width: 982px; margin: 0 auto; padding-right: 300px; .box; background: url(../images/media-server.png) bottom right no-repeat; padding-top: 35px;
+
+	.text {
+        width: 80%;
+        margin: 0 auto;
+        .box;
+        padding-top: 35px;
+        padding-bottom: 35px;
+
+        @media (min-width: @screen-sm) {
+            padding-right: 300px;
+            background: url(../images/media-server.png) bottom right no-repeat;
+        }
+
 	 	p { line-height: 28px; font-size: 20px; margin-bottom: 32px;
 	 		&:last-child { margin-bottom: 0; }
 			small { font-size: 16px; }

diff --git a/v2/js/main.js b/v2/js/main.js
@@ -2,8 +2,6 @@ var UI = {
 
 	init: function() {
 		this.navigation();
-
-		this.fixHeaderHeight();
 	},
 
 	navigation: function() {
@@ -15,19 +13,7 @@ var UI = {
 			$('#bar .right').addClass('open');
 			$(this).hide();
 		});
-	},
-
-    fixHeaderHeight: function() {
-        function update(ev) {
-            $(document.body).css(
-                'paddingTop',
-                Math.max($('header[role="header"]').outerHeight(), 88)
-            );
-        }
-
-        $(window).on('resize', update);
-        setTimeout(update, 0);
-    }
+	}
 }
 
 $(document).ready(function() {

diff --git a/v2/lua/openresty_org/templates.lua b/v2/lua/openresty_org/templates.lua
@@ -215,35 +215,35 @@ template_map['index.tt2'] = function (context)
 i = i + 1 output[i] = '<!DOCTYPE html>\n<html lang="en">\n<head>\n	<meta charset="utf-8">\n	<title>'
 -- line 5 "index.tt2"
 i = i + 1 output[i] = stash_get(stash, {'c', 0, 'l', { 'OpenResty - Official Site' }})
-i = i + 1 output[i] = '</title>\n	<link href=\'https://openresty.org/css/fonts.css\' rel=\'stylesheet\' type=\'text/css\'>\n	<!--\n	If you ever wanted to use LESS instead of CSS...\n	<link rel="stylesheet" type="text/less" href="/css/main.less">\n	<script src="/js/less.js"></script>\n	-->\n	<link rel="stylesheet" type="text/css" href="/css/main.css">\n        <script>\n'
--- line 14 "index.tt2"
+i = i + 1 output[i] = '</title>\n    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes">\n	<link href=\'https://openresty.org/css/fonts.css\' rel=\'stylesheet\' type=\'text/css\'>\n	<!--\n	If you ever wanted to use LESS instead of CSS...\n	<link rel="stylesheet" type="text/less" href="/css/main.less">\n	<script src="/js/less.js"></script>\n	-->\n	<link rel="stylesheet" type="text/css" href="/css/main.css">\n        <script>\n'
+-- line 15 "index.tt2"
 i = i + 1 output[i] = context.process(context, 'old-permlink-js.tt2')
 i = i + 1 output[i] = '\n        </script>\n</head>\n<body>\n\n'
--- line 19 "index.tt2"
+-- line 20 "index.tt2"
 i = i + 1 output[i] = context.process(context, 'header.tt2')
 i = i + 1 output[i] = '\n\n	<section id="intro">\n		<div class="text">\n			<p>'
--- line 23 "index.tt2"
+-- line 24 "index.tt2"
 i = i + 1 output[i] = stash_get(stash, {'c', 0, 'l', { 'OpenResty is a dynamic web platform based on NGINX and LuaJIT.' }})
 i = i + 1 output[i] = '</p>\n			<p><small>'
--- line 24 "index.tt2"
+-- line 25 "index.tt2"
 i = i + 1 output[i] = stash_get(stash, {'c', 0, 'l', { 'It’s open-source stuff so you can contribute:' }})
 i = i + 1 output[i] = '</small>\n                           <a href="https://github.com/openresty/" class="github">'
--- line 25 "index.tt2"
+-- line 26 "index.tt2"
 i = i + 1 output[i] = stash_get(stash, {'c', 0, 'l', { 'Contribute on GitHub' }})
 i = i + 1 output[i] = ' &raquo;</a></p>\n		</div><!-- / text -->\n	</section><!-- / intro -->\n\n	<div id="wrapper">\n		<div class="sidebar sleft">\n			<nav id="nav">\n'
--- line 32 "index.tt2"
+-- line 33 "index.tt2"
 i = i + 1 output[i] = stash_get(stash, 'main_menu')
 i = i + 1 output[i] = '\n			</nav><!-- / nav -->\n\n'
--- line 35 "index.tt2"
+-- line 36 "index.tt2"
 i = i + 1 output[i] = context.process(context, 'main-menu-buttons.tt2')
 i = i + 1 output[i] = '\n\n		</div><!-- / sidebar left -->\n		\n		<section id="main">\n'
--- line 40 "index.tt2"
+-- line 41 "index.tt2"
 i = i + 1 output[i] = context.process(context, 'post.tt2')
 i = i + 1 output[i] = '\n		</section><!-- / main -->\n\n'
--- line 43 "index.tt2"
+-- line 44 "index.tt2"
 i = i + 1 output[i] = context.process(context, 'sidebar.tt2')
 i = i + 1 output[i] = '\n\n	</div><!-- / wrapper -->\n\n'
--- line 47 "index.tt2"
+-- line 48 "index.tt2"
 i = i + 1 output[i] = context.process(context, 'footer.tt2')
 i = i + 1 output[i] = '\n\n</body>\n</html>\n'
 
@@ -290,23 +290,23 @@ template_map['page.tt2'] = function (context)
 i = i + 1 output[i] = '<!DOCTYPE html>\n<html lang="en">\n<head>\n	<meta charset="utf-8">\n	<title>OpenResty - '
 -- line 5 "page.tt2"
 i = i + 1 output[i] = stash_get(stash, 'title')
-i = i + 1 output[i] = '</title>\n	<link href=\'https://openresty.org/css/fonts.css\' rel=\'stylesheet\' type=\'text/css\'>\n	<!--\n	If you ever wanted to use LESS instead of CSS...\n	<link rel="stylesheet" type="text/less" href="/css/main.less">\n	<script src="/js/less.js"></script>\n	-->\n	<link rel="stylesheet" type="text/css" href="/css/main.css">\n</head>\n<body>\n\n'
--- line 16 "page.tt2"
+i = i + 1 output[i] = '</title>\n    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes">\n	<link href=\'https://openresty.org/css/fonts.css\' rel=\'stylesheet\' type=\'text/css\'>\n	<!--\n	If you ever wanted to use LESS instead of CSS...\n	<link rel="stylesheet" type="text/less" href="/css/main.less">\n	<script src="/js/less.js"></script>\n	-->\n	<link rel="stylesheet" type="text/css" href="/css/main.css">\n</head>\n<body>\n\n'
+-- line 17 "page.tt2"
 i = i + 1 output[i] = context.process(context, 'header.tt2')
 i = i + 1 output[i] = '\n\n	<div id="wrapper">\n		<div class="sidebar sleft">\n			<nav id="nav">\n'
--- line 21 "page.tt2"
+-- line 22 "page.tt2"
 i = i + 1 output[i] = stash_get(stash, 'main_menu')
 i = i + 1 output[i] = '\n			</nav><!-- / nav -->\n\n'
--- line 24 "page.tt2"
+-- line 25 "page.tt2"
 i = i + 1 output[i] = context.process(context, 'main-menu-buttons.tt2')
 i = i + 1 output[i] = '\n\n		</div><!-- / sidebar left -->\n		\n		<section id="main">\n'
--- line 29 "page.tt2"
+-- line 30 "page.tt2"
 i = i + 1 output[i] = context.process(context, 'post.tt2')
 i = i + 1 output[i] = '\n		</section><!-- / main -->\n\n'
--- line 32 "page.tt2"
+-- line 33 "page.tt2"
 i = i + 1 output[i] = context.process(context, 'sidebar.tt2')
 i = i + 1 output[i] = '\n	</div><!-- / wrapper -->\n\n'
--- line 35 "page.tt2"
+-- line 36 "page.tt2"
 i = i + 1 output[i] = context.process(context, 'footer.tt2')
 i = i + 1 output[i] = '\n\n</body>\n</html>\n'
 

diff --git a/v2/po/cn.po b/v2/po/cn.po
@@ -57,15 +57,15 @@ msgstr "搜索 OpenResty.org 中文站"
 msgid  "OpenResty - Official Site"
 msgstr "OpenResty - 中文官方站"
 
-#: templates/index.tt2:23
+#: templates/index.tt2:24
 msgid  "OpenResty is a dynamic web platform based on NGINX and LuaJIT."
 msgstr "OpenResty 是一个基于 NGINX 和 LuaJIT 的 Web 平台。"
 
-#: templates/index.tt2:24
+#: templates/index.tt2:25
 msgid  "It’s open-source stuff so you can contribute:"
 msgstr "这是一个开源项目，所以你也可以来贡献："
 
-#: templates/index.tt2:25
+#: templates/index.tt2:26
 msgid  "Contribute on GitHub"
 msgstr "在 GitHub 上贡献你的力量"
 

diff --git a/v2/templates/index.tt2 b/v2/templates/index.tt2
@@ -3,6 +3,7 @@
 <head>
 	<meta charset="utf-8">
 	<title>[% c.l("OpenResty - Official Site") %]</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes">
 	<link href='https://openresty.org/css/fonts.css' rel='stylesheet' type='text/css'>
 	<!--
 	If you ever wanted to use LESS instead of CSS...

diff --git a/v2/templates/page.tt2 b/v2/templates/page.tt2
@@ -3,6 +3,7 @@
 <head>
 	<meta charset="utf-8">
 	<title>OpenResty - [% title %]</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes">
 	<link href='https://openresty.org/css/fonts.css' rel='stylesheet' type='text/css'>
 	<!--
 	If you ever wanted to use LESS instead of CSS...