mirror of
https://github.com/alibaba/anyproxy.git
synced 2025-06-06 09:18:21 +00:00
update style for mobile
This commit is contained in:
OttoMao
parent
58b35a70ea
commit
bec5458e45
79
index.css
79
index.css
@ -63,6 +63,12 @@ body {
|
||||
display: inline-block;
|
||||
transition: 0.3s;
|
||||
}
|
||||
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) {
|
||||
.wrapper .actionBtn {
|
||||
font-size: 20px;
|
||||
padding: 10px 20px;
|
||||
}
|
||||
}
|
||||
.wrapper .actionBtn:hover {
|
||||
background: #326eeb;
|
||||
color: #f9f9f9;
|
||||
@ -71,6 +77,11 @@ body {
|
||||
width: 100%;
|
||||
min-width: 890px;
|
||||
}
|
||||
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) {
|
||||
.wrapper > div {
|
||||
min-width: 100%;
|
||||
}
|
||||
}
|
||||
.brief {
|
||||
height: 300px;
|
||||
text-align: center;
|
||||
@ -81,6 +92,7 @@ body {
|
||||
.brief .slogan {
|
||||
font-size: 16px;
|
||||
color: #5a5a5a;
|
||||
padding: 0 20px;
|
||||
}
|
||||
.feature {
|
||||
background: #dedede;
|
||||
@ -89,6 +101,11 @@ body {
|
||||
width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) {
|
||||
.feature .featureContent {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.feature .featureContent .item {
|
||||
padding: 30px 0 20px;
|
||||
width: 280px;
|
||||
@ -125,6 +142,25 @@ body {
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
}
|
||||
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) {
|
||||
.feature .featureContent .item {
|
||||
padding: 20px 0;
|
||||
float: none;
|
||||
margin: 0 auto;
|
||||
font-size: 24px;
|
||||
}
|
||||
.feature .featureContent .iconWrapper {
|
||||
font-size: 25px;
|
||||
line-height: 25px;
|
||||
}
|
||||
.feature .featureContent .iconWrapper .bigger {
|
||||
font-size: 30px;
|
||||
}
|
||||
.feature .featureContent h4 {
|
||||
font-size: 16px;
|
||||
margin: 4px;
|
||||
}
|
||||
}
|
||||
.quickstart {
|
||||
background: #f9f9f9;
|
||||
}
|
||||
@ -136,6 +172,11 @@ body {
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) {
|
||||
.quickstart .screenshot {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.quickstart code.simpleBash {
|
||||
font-family: monospace;
|
||||
font-weight: bold;
|
||||
@ -146,9 +187,19 @@ body {
|
||||
width: 890px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) {
|
||||
.listSection .listContent {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.listSection ul {
|
||||
margin: 0 auto;
|
||||
}
|
||||
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) {
|
||||
.listSection ul {
|
||||
padding: 0 20px 0 30px;
|
||||
}
|
||||
}
|
||||
.listSection li {
|
||||
color: #5a5a5a;
|
||||
font-size: 16px;
|
||||
@ -161,6 +212,11 @@ body {
|
||||
width: 890px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) {
|
||||
.sample .sampleContent {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.sample .item {
|
||||
margin: 10px;
|
||||
}
|
||||
@ -169,6 +225,11 @@ body {
|
||||
margin: 0px 10px;
|
||||
color: #5a5a5a;
|
||||
}
|
||||
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) {
|
||||
.sample .itemTitle {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
.sample .figure {
|
||||
vertical-align: top;
|
||||
}
|
||||
@ -177,9 +238,22 @@ body {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) {
|
||||
.sample pre {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.sample code {
|
||||
width: 495px;
|
||||
}
|
||||
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) {
|
||||
.sample code {
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
word-wrap: break-word;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
.sample hr {
|
||||
border: none;
|
||||
border-top: 1px solid #777777;
|
||||
@ -201,6 +275,11 @@ body {
|
||||
position: relative;
|
||||
padding: 120px 0;
|
||||
}
|
||||
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) {
|
||||
.learnMore {
|
||||
padding: 70px 0;
|
||||
}
|
||||
}
|
||||
.learnMore h4.subtitle {
|
||||
padding: 0;
|
||||
margin-bottom: 30px;
|
||||
|
||||
284
index.html
284
index.html
@ -1,86 +1,88 @@
|
||||
<html>
|
||||
<head>
|
||||
<title>AnyProxy</title>
|
||||
<link rel="stylesheet" type="text/css" href="./index.css">
|
||||
<link rel="shortcut icon" type="image/png" href="/favico.png?t=2" />
|
||||
<title>AnyProxy</title>
|
||||
<link rel="stylesheet" type="text/css" href="./index.css">
|
||||
<link rel="shortcut icon" type="image/png" href="/favico.png?t=2" />
|
||||
<meta name="description" content="AnyProxy - 开放式的HTTP/HTTPS代理，你可以灵活控制各种网络数据">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="wrapper">
|
||||
<a class="cornerBtn" href="https://github.com/alibaba/anyproxy" target="_blank">View on Github</a><br>
|
||||
<div class="wrapper">
|
||||
<a class="cornerBtn" href="https://github.com/alibaba/anyproxy" target="_blank">View on Github</a><br>
|
||||
|
||||
<div class="brief">
|
||||
<div class="logo">
|
||||
<img src="http://gtms04.alicdn.com/tps/i4/TB1XfxDHpXXXXXpapXX20ySQVXX-512-512.png" width="250" height="250" alt="anyproxy logo" />
|
||||
</div>
|
||||
<h2 class="slogan">AnyProxy是一个开放式的HTTP/HTTPS代理，你可以灵活控制各种网络数据</h2>
|
||||
<div class="action">
|
||||
<iframe src="https://ghbtns.com/github-btn.html?user=alibaba&repo=anyproxy&type=star&count=true" frameborder="0" scrolling="0" width="100px" height="20px"></iframe>
|
||||
<iframe src="https://ghbtns.com/github-btn.html?user=alibaba&repo=anyproxy&type=fork&count=true" frameborder="0" scrolling="0" width="100px" height="20px"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
<div class="brief">
|
||||
<div class="logo">
|
||||
<img src="http://gtms04.alicdn.com/tps/i4/TB1XfxDHpXXXXXpapXX20ySQVXX-512-512.png" width="250" height="250" alt="anyproxy logo" />
|
||||
</div>
|
||||
<h2 class="slogan">AnyProxy是一个开放式的HTTP/HTTPS代理，你可以灵活控制各种网络数据</h2>
|
||||
<div class="action">
|
||||
<iframe src="https://ghbtns.com/github-btn.html?user=alibaba&repo=anyproxy&type=star&count=true" frameborder="0" scrolling="0" width="100px" height="20px"></iframe>
|
||||
<iframe src="https://ghbtns.com/github-btn.html?user=alibaba&repo=anyproxy&type=fork&count=true" frameborder="0" scrolling="0" width="100px" height="20px"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="feature">
|
||||
<div class="featureContent">
|
||||
<div class="item">
|
||||
<span class="iconWrapper">
|
||||
<i class="iconfont"></i>
|
||||
</span>
|
||||
<h4>基于Node.js</h4>
|
||||
<h5>全程JavaScript，学习无压力</h5>
|
||||
</div>
|
||||
<div class="item">
|
||||
<span class="iconWrapper">
|
||||
<i class="iconfont"></i>
|
||||
</span>
|
||||
<h4>支持Https</h4>
|
||||
<h5>明文解析Https请求数据 <a href="https://github.com/alibaba/anyproxy/wiki/HTTPS%E7%9B%B8%E5%85%B3%E6%95%99%E7%A8%8B" target="_blank"><br>如何配置>></a></h5>
|
||||
</div>
|
||||
<div class="item">
|
||||
<span class="iconWrapper">
|
||||
<i class="iconfont bigger"></i>
|
||||
</span>
|
||||
<h4>Web界面</h4>
|
||||
<h5>多终端共享，可视化观察每个请求</h5>
|
||||
</div>
|
||||
<div class="item">
|
||||
<span class="iconWrapper">
|
||||
<i class="iconfont"></i>
|
||||
</span>
|
||||
<h4>规则逻辑（Rule）</h4>
|
||||
<h5>编写个性化处理规则，定制专属调试工具</h5>
|
||||
</div>
|
||||
<div style="clear:both"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="feature">
|
||||
<div class="featureContent">
|
||||
<div class="item">
|
||||
<span class="iconWrapper">
|
||||
<i class="iconfont"></i>
|
||||
</span>
|
||||
<h4>基于Node.js</h4>
|
||||
<h5>全程JavaScript，学习无压力</h5>
|
||||
</div>
|
||||
<div class="item">
|
||||
<span class="iconWrapper">
|
||||
<i class="iconfont"></i>
|
||||
</span>
|
||||
<h4>支持Https</h4>
|
||||
<h5>明文解析Https请求数据 <a href="https://github.com/alibaba/anyproxy/wiki/HTTPS%E7%9B%B8%E5%85%B3%E6%95%99%E7%A8%8B" target="_blank"><br>如何配置>></a></h5>
|
||||
</div>
|
||||
<div class="item">
|
||||
<span class="iconWrapper">
|
||||
<i class="iconfont bigger"></i>
|
||||
</span>
|
||||
<h4>Web界面</h4>
|
||||
<h5>多终端共享，可视化观察每个请求</h5>
|
||||
</div>
|
||||
<div class="item">
|
||||
<span class="iconWrapper">
|
||||
<i class="iconfont"></i>
|
||||
</span>
|
||||
<h4>规则逻辑（Rule）</h4>
|
||||
<h5>编写个性化处理规则，定制专属调试工具</h5>
|
||||
</div>
|
||||
<div style="clear:both"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="quickstart listSection">
|
||||
<div class="quickstartContent listContent">
|
||||
<h4 class="subtitle">安装</h4>
|
||||
<ul>
|
||||
<li>安装 <a href="http://nodejs.org/" target="_blank">Node.js</a> >= v0.12</li>
|
||||
<li><code class="simpleBash">npm install -g anyproxy</code>, 可能需要<code class="simpleBash">sudo</code></li>
|
||||
<li><a href="https://github.com/alibaba/anyproxy#quick-start" target="_blank">More>></a></li>
|
||||
</ul>
|
||||
<h4 class="subtitle">使用</h4>
|
||||
<ul>
|
||||
<li>运行 <code class="simpleBash">anyproxy</code></li>
|
||||
<li>把浏览器http代理指向 127.0.0.1:8001</li>
|
||||
<li>访问界面：http://127.0.0.1:8002 </li>
|
||||
<li><a href="https://github.com/alibaba/anyproxy#quick-start" target="_blank">更多用法>></a></li>
|
||||
</ul>
|
||||
<a href="https://github.com/alibaba/anyproxy#step-4---launch-web-interface" target="_blank"><img class="screenshot" src="http://gtms01.alicdn.com/tps/i1/TB1IdgqGXXXXXa9apXXLExM2pXX-854-480.gif" width="350"/></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="quickstart listSection">
|
||||
<div class="quickstartContent listContent">
|
||||
<h4 class="subtitle" id="install">安装</h4>
|
||||
<ul>
|
||||
<li>安装 <a href="http://nodejs.org/" target="_blank">Node.js</a> >= v0.12</li>
|
||||
<li><code class="simpleBash">npm install -g anyproxy</code>, 可能需要<code class="simpleBash">sudo</code></li>
|
||||
<li><a href="https://github.com/alibaba/anyproxy#quick-start" target="_blank">More>></a></li>
|
||||
</ul>
|
||||
<h4 class="subtitle" id="quickstart">使用</h4>
|
||||
<ul>
|
||||
<li>运行 <code class="simpleBash">anyproxy</code></li>
|
||||
<li>把浏览器http代理指向 127.0.0.1:8001</li>
|
||||
<li>访问界面：http://127.0.0.1:8002 </li>
|
||||
<li><a href="https://github.com/alibaba/anyproxy#quick-start" target="_blank">更多用法>></a></li>
|
||||
</ul>
|
||||
<a href="https://github.com/alibaba/anyproxy#step-4---launch-web-interface" target="_blank"><img class="screenshot" src="http://gtms01.alicdn.com/tps/i1/TB1IdgqGXXXXXa9apXXLExM2pXX-854-480.gif" width="350"/></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="sample">
|
||||
<div class="sample">
|
||||
|
||||
<div class="sampleContent">
|
||||
<h4 class="subtitle">规则文件(rule)样例</h4>
|
||||
<div class="sampleContent">
|
||||
<h4 class="subtitle" id="sample ">规则文件(rule)样例</h4>
|
||||
|
||||
<div class="item">
|
||||
<h5 class="itemTitle">在HTML响应末尾加上"hello world"</h5>
|
||||
<pre>
|
||||
<div class="item">
|
||||
<h5 class="itemTitle">在HTML响应末尾加上"hello world"</h5>
|
||||
<pre>
|
||||
<code class="javascript">
|
||||
//append "hello world" to all web pages
|
||||
//file : rule_replace_response_data.js
|
||||
@ -96,15 +98,15 @@ module.exports = {
|
||||
}
|
||||
};
|
||||
</code>
|
||||
</pre>
|
||||
<span class="figure">
|
||||
<img src="https://t.alipayobjects.com/images/rmsweb/T1LcphXf0eXXXXXXXX.png" width="350"/>
|
||||
</span>
|
||||
<hr />
|
||||
</div>
|
||||
<div class="item">
|
||||
<h5 class="itemTitle">去除请求头的if-modified-since字段</h5>
|
||||
<pre>
|
||||
</pre>
|
||||
<span class="figure">
|
||||
<img src="https://t.alipayobjects.com/images/rmsweb/T1LcphXf0eXXXXXXXX.png" width="350"/>
|
||||
</span>
|
||||
<hr />
|
||||
</div>
|
||||
<div class="item">
|
||||
<h5 class="itemTitle">去除请求头的if-modified-since字段</h5>
|
||||
<pre>
|
||||
<code class="javascript">
|
||||
//remove cache related header
|
||||
//file : rule_remove_cache_header.js
|
||||
@ -118,16 +120,16 @@ module.exports = {
|
||||
}
|
||||
};
|
||||
</code>
|
||||
</pre>
|
||||
<span class="figure">
|
||||
<img src="https://t.alipayobjects.com/images/rmsweb/T1ecFhXjxcXXXXXXXX.png" width="350"/>
|
||||
</span>
|
||||
<hr />
|
||||
</div>
|
||||
</pre>
|
||||
<span class="figure">
|
||||
<img src="https://t.alipayobjects.com/images/rmsweb/T1ecFhXjxcXXXXXXXX.png" width="350"/>
|
||||
</span>
|
||||
<hr />
|
||||
</div>
|
||||
|
||||
<div class="item">
|
||||
<h5 class="itemTitle">为某个请求指定目标IP地址</h5>
|
||||
<pre>
|
||||
<div class="item">
|
||||
<h5 class="itemTitle">为某个请求指定目标IP地址</h5>
|
||||
<pre>
|
||||
<code class="javascript">
|
||||
//assign a specific IP adress for some request
|
||||
//file : rule_reverse_proxy.js
|
||||
@ -144,16 +146,16 @@ module.exports = {
|
||||
}
|
||||
};
|
||||
</code>
|
||||
</pre>
|
||||
<span class="figure">
|
||||
<img src="https://t.alipayobjects.com/images/rmsweb/T1hsxhXeddXXXXXXXX.png" width="350"/>
|
||||
</span>
|
||||
<hr />
|
||||
</div>
|
||||
</pre>
|
||||
<span class="figure">
|
||||
<img src="https://t.alipayobjects.com/images/rmsweb/T1hsxhXeddXXXXXXXX.png" width="350"/>
|
||||
</span>
|
||||
<hr />
|
||||
</div>
|
||||
|
||||
<div class="item">
|
||||
<h5 class="itemTitle">把所有图片响应替换成本地图片</h5>
|
||||
<pre>
|
||||
<div class="item">
|
||||
<h5 class="itemTitle">把所有图片响应替换成本地图片</h5>
|
||||
<pre>
|
||||
<code class="javascript">
|
||||
//replace all the images with local one
|
||||
//file : rule_use_local_data.js
|
||||
@ -178,54 +180,54 @@ module.exports = {
|
||||
}
|
||||
};
|
||||
</code>
|
||||
</pre>
|
||||
<span class="figure">
|
||||
<img src="https://t.alipayobjects.com/images/rmsweb/T1Zr4hXeXhXXXXXXXX.png" width="350"/>
|
||||
</span>
|
||||
</div>
|
||||
</pre>
|
||||
<span class="figure">
|
||||
<img src="https://t.alipayobjects.com/images/rmsweb/T1Zr4hXeXhXXXXXXXX.png" width="350"/>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="readmoreBtn">
|
||||
<a href="https://github.com/alibaba/anyproxy/wiki/%E4%BB%A3%E7%90%86%E6%9C%8D%E5%8A%A1%E5%99%A8%E7%9A%84%E6%96%B0%E8%BD%AE%E5%AD%90%EF%BC%9Aanyproxy#%E5%BC%80%E6%94%BE%E5%BC%8F%E4%BB%A3%E7%90%86%E6%9C%8D%E5%8A%A1%E5%99%A8%E8%AE%BE%E8%AE%A1" target="_blank">>> 阅读：规则文件（Rule）API</a>
|
||||
</div>
|
||||
<div class="readmoreBtn">
|
||||
<a href="https://github.com/alibaba/anyproxy/wiki/%E4%BB%A3%E7%90%86%E6%9C%8D%E5%8A%A1%E5%99%A8%E7%9A%84%E6%96%B0%E8%BD%AE%E5%AD%90%EF%BC%9Aanyproxy#%E5%BC%80%E6%94%BE%E5%BC%8F%E4%BB%A3%E7%90%86%E6%9C%8D%E5%8A%A1%E5%99%A8%E8%AE%BE%E8%AE%A1" target="_blank">>> 阅读：规则文件（Rule）API</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="readMore listSection">
|
||||
<div class="listContent">
|
||||
<h4 class="subtitle">其他特性</h4>
|
||||
<ul>
|
||||
<li>Map Local，Log Filter等常规功能</li>
|
||||
<li><a href="https://github.com/alibaba/anyproxy#throttling">低网速网速模拟</a>，调试应用在2G/3G下的表现</li>
|
||||
<li><a href="https://github.com/alibaba/anyproxy#work-as-a-module-for-nodejs" target="_blank">把AnyProxy作为npm模块</a>，基于它做二次开发</li>
|
||||
</ul>
|
||||
<h4 class="subtitle">相关阅读</h4>
|
||||
<ul>
|
||||
<li><a href="https://github.com/alibaba/anyproxy/wiki/%E4%BB%A3%E7%90%86%E6%9C%8D%E5%8A%A1%E5%99%A8%E7%9A%84%E6%96%B0%E8%BD%AE%E5%AD%90%EF%BC%9Aanyproxy" target="_blank">代理服务器的新轮子</a>，介绍AnyProxy的设计初衷，以及它的开放式设计可以解决什么问题。</li>
|
||||
<li><a href="http://www.infoq.com/cn/presentations/alipay-hybrid-application-quality-assurance-practice" target="_blank">QCon - 《支付宝hybrid应用质量保证实践》</a>，涉及到AnyProxy在测试工程中的应用(By 陈晔)</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="readMore listSection">
|
||||
<div class="listContent">
|
||||
<h4 class="subtitle" id="otherfeature">其他特性</h4>
|
||||
<ul>
|
||||
<li>Map Local，Log Filter等常规功能</li>
|
||||
<li><a href="https://github.com/alibaba/anyproxy#throttling">低网速网速模拟</a>，调试应用在2G/3G下的表现</li>
|
||||
<li><a href="https://github.com/alibaba/anyproxy#work-as-a-module-for-nodejs" target="_blank">把AnyProxy作为npm模块</a>，基于它做二次开发</li>
|
||||
</ul>
|
||||
<h4 class="subtitle" id="ref">相关阅读</h4>
|
||||
<ul>
|
||||
<li><a href="https://github.com/alibaba/anyproxy/wiki/%E4%BB%A3%E7%90%86%E6%9C%8D%E5%8A%A1%E5%99%A8%E7%9A%84%E6%96%B0%E8%BD%AE%E5%AD%90%EF%BC%9Aanyproxy" target="_blank">代理服务器的新轮子</a>，介绍AnyProxy的设计初衷，以及它的开放式设计可以解决什么问题。</li>
|
||||
<li><a href="http://www.infoq.com/cn/presentations/alipay-hybrid-application-quality-assurance-practice" target="_blank">QCon - 《支付宝hybrid应用质量保证实践》</a>，涉及到AnyProxy在测试工程中的应用(By 陈晔)</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="learnMore listSection">
|
||||
<div class="btnWrapper">
|
||||
<h4 class="subtitle white">Read More</h4>
|
||||
<a class="actionBtn actionBtnWhite" href="https://github.com/alibaba/anyproxy" target="_blank">https://github.com/alibaba/anyproxy</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="learnMore listSection">
|
||||
<div class="btnWrapper">
|
||||
<h4 class="subtitle white" id="readmore">Read More</h4>
|
||||
<a class="actionBtn actionBtnWhite" href="https://github.com/alibaba/anyproxy" target="_blank">https://github.com/alibaba/anyproxy</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="footer"></div>
|
||||
<div class="footer"></div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="./github.css" />
|
||||
<script src="./lib.js"></script>
|
||||
<script type="text/javascript">
|
||||
$(document).ready(function() {
|
||||
$('.sample code').each(function(i, block) {
|
||||
hljs.highlightBlock(block);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
<link rel="stylesheet" type="text/css" href="./github.css" />
|
||||
<script src="./lib.js"></script>
|
||||
<script type="text/javascript">
|
||||
$(document).ready(function() {
|
||||
$('.sample code').each(function(i, block) {
|
||||
hljs.highlightBlock(block);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
114
index.less
114
index.less
@ -8,6 +8,9 @@
|
||||
@wideContent : 1200px;
|
||||
@normalContent : 890px;
|
||||
|
||||
@wideContentMobile : 100%;
|
||||
@normalContentMobile : 100%;
|
||||
|
||||
@font-face {
|
||||
font-family: 'iconfont';
|
||||
src: url('//at.alicdn.com/t/font_1438330832_106274.eot'); /* IE9*/
|
||||
@ -85,6 +88,14 @@ body{
|
||||
border-radius: 30px;
|
||||
display: inline-block;
|
||||
transition:0.3s;
|
||||
|
||||
@media only screen
|
||||
and (min-device-width: 320px)
|
||||
and (max-device-width: 480px)
|
||||
and (-webkit-min-device-pixel-ratio: 2){
|
||||
font-size:20px;
|
||||
padding: 10px 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.actionBtn:hover{
|
||||
@ -96,8 +107,17 @@ body{
|
||||
.wrapper>div{
|
||||
width: 100%;
|
||||
min-width: @normalContent;
|
||||
|
||||
@media only screen
|
||||
and (min-device-width: 320px)
|
||||
and (max-device-width: 480px)
|
||||
and (-webkit-min-device-pixel-ratio: 2){
|
||||
min-width: @normalContentMobile;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.brief{
|
||||
height: 300px;
|
||||
text-align: center;
|
||||
@ -108,6 +128,7 @@ body{
|
||||
.slogan{
|
||||
font-size: 16px;
|
||||
color: @textDark;
|
||||
padding: 0 20px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -115,6 +136,13 @@ body{
|
||||
background: @darkGray;
|
||||
|
||||
.featureContent{
|
||||
@media only screen
|
||||
and (min-device-width: 320px)
|
||||
and (max-device-width: 480px)
|
||||
and (-webkit-min-device-pixel-ratio: 2){
|
||||
width: @wideContentMobile;
|
||||
}
|
||||
|
||||
width: @wideContent;
|
||||
margin: 0 auto;
|
||||
|
||||
@ -158,6 +186,34 @@ body{
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
|
||||
@media only screen
|
||||
and (min-device-width: 320px)
|
||||
and (max-device-width: 480px)
|
||||
and (-webkit-min-device-pixel-ratio: 2){
|
||||
.item{
|
||||
padding: 20px 0;
|
||||
float :none;
|
||||
margin : 0 auto;
|
||||
font-size : 24px;
|
||||
}
|
||||
|
||||
.iconWrapper{
|
||||
font-size: 25px;
|
||||
line-height: 25px;
|
||||
}
|
||||
|
||||
.iconWrapper .bigger{
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
h4{
|
||||
font-size: 16px;
|
||||
margin: 4px;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -172,6 +228,13 @@ body{
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
|
||||
@media only screen
|
||||
and (min-device-width: 320px)
|
||||
and (max-device-width: 480px)
|
||||
and (-webkit-min-device-pixel-ratio: 2){
|
||||
display : none;
|
||||
}
|
||||
}
|
||||
|
||||
code.simpleBash{
|
||||
@ -184,12 +247,27 @@ body{
|
||||
|
||||
.listSection{
|
||||
.listContent{
|
||||
|
||||
@media only screen
|
||||
and (min-device-width: 320px)
|
||||
and (max-device-width: 480px)
|
||||
and (-webkit-min-device-pixel-ratio: 2){
|
||||
width: @normalContentMobile;
|
||||
}
|
||||
|
||||
width: @normalContent;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
ul{
|
||||
margin: 0 auto;
|
||||
|
||||
@media only screen
|
||||
and (min-device-width: 320px)
|
||||
and (max-device-width: 480px)
|
||||
and (-webkit-min-device-pixel-ratio: 2){
|
||||
padding: 0 20px 0 30px;
|
||||
}
|
||||
}
|
||||
|
||||
li{
|
||||
@ -202,6 +280,14 @@ body{
|
||||
.sample{
|
||||
background: @gray;
|
||||
.sampleContent{
|
||||
|
||||
@media only screen
|
||||
and (min-device-width: 320px)
|
||||
and (max-device-width: 480px)
|
||||
and (-webkit-min-device-pixel-ratio: 2){
|
||||
width: @normalContentMobile;
|
||||
}
|
||||
|
||||
width: @normalContent;
|
||||
margin: 0 auto;
|
||||
}
|
||||
@ -215,6 +301,13 @@ body{
|
||||
font-size: 16px;
|
||||
margin: 0px 10px;
|
||||
color: @textDark;
|
||||
|
||||
@media only screen
|
||||
and (min-device-width: 320px)
|
||||
and (max-device-width: 480px)
|
||||
and (-webkit-min-device-pixel-ratio: 2){
|
||||
margin :0;
|
||||
}
|
||||
}
|
||||
|
||||
.figure{
|
||||
@ -225,10 +318,25 @@ body{
|
||||
margin: 0;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
@media only screen
|
||||
and (min-device-width: 320px)
|
||||
and (max-device-width: 480px)
|
||||
and (-webkit-min-device-pixel-ratio: 2){
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
code{
|
||||
width: 495px;
|
||||
@media only screen
|
||||
and (min-device-width: 320px)
|
||||
and (max-device-width: 480px)
|
||||
and (-webkit-min-device-pixel-ratio: 2){
|
||||
width:100%;
|
||||
margin: 0 auto;
|
||||
word-wrap: break-word;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
hr{
|
||||
@ -255,6 +363,12 @@ body{
|
||||
text-align: center;
|
||||
position: relative;
|
||||
padding: 120px 0;
|
||||
@media only screen
|
||||
and (min-device-width: 320px)
|
||||
and (max-device-width: 480px)
|
||||
and (-webkit-min-device-pixel-ratio: 2){
|
||||
padding: 70px 0;
|
||||
}
|
||||
|
||||
h4.subtitle{
|
||||
padding: 0;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user