reconstruct the site

This commit is contained in:
OttoMao 2015-08-05 15:44:28 +08:00
parent c9956b57c4
commit 864edfe6b1
23 changed files with 760 additions and 1120 deletions

BIN
.DS_Store vendored Normal file

Binary file not shown.

2
CNAME
View File

@ -1 +1 @@
anyproxy.org anyproxy.io

123
github.css Normal file
View File

@ -0,0 +1,123 @@
/*
github.com style (c) Vasily Polovnyov <vast@whiteants.net>
*/
.hljs {
display: block;
overflow-x: auto;
padding: 0.5em;
color: #333;
background: #f8f8f8;
-webkit-text-size-adjust: none;
}
.hljs-comment,
.diff .hljs-header {
color: #998;
font-style: italic;
}
.hljs-keyword,
.css .rule .hljs-keyword,
.hljs-winutils,
.nginx .hljs-title,
.hljs-subst,
.hljs-request,
.hljs-status {
color: #333;
font-weight: bold;
}
.hljs-number,
.hljs-hexcolor,
.ruby .hljs-constant {
color: #008080;
}
.hljs-string,
.hljs-tag .hljs-value,
.hljs-doctag,
.tex .hljs-formula {
color: #d14;
}
.hljs-title,
.hljs-id,
.scss .hljs-preprocessor {
color: #900;
font-weight: bold;
}
.hljs-list .hljs-keyword,
.hljs-subst {
font-weight: normal;
}
.hljs-class .hljs-title,
.hljs-type,
.vhdl .hljs-literal,
.tex .hljs-command {
color: #458;
font-weight: bold;
}
.hljs-tag,
.hljs-tag .hljs-title,
.hljs-rule .hljs-property,
.django .hljs-tag .hljs-keyword {
color: #000080;
font-weight: normal;
}
.hljs-attribute,
.hljs-variable,
.lisp .hljs-body,
.hljs-name {
color: #008080;
}
.hljs-regexp {
color: #009926;
}
.hljs-symbol,
.ruby .hljs-symbol .hljs-string,
.lisp .hljs-keyword,
.clojure .hljs-keyword,
.scheme .hljs-keyword,
.tex .hljs-special,
.hljs-prompt {
color: #990073;
}
.hljs-built_in {
color: #0086b3;
}
.hljs-preprocessor,
.hljs-pragma,
.hljs-pi,
.hljs-doctype,
.hljs-shebang,
.hljs-cdata {
color: #999;
font-weight: bold;
}
.hljs-deletion {
background: #fdd;
}
.hljs-addition {
background: #dfd;
}
.diff .hljs-change {
background: #0086b3;
}
.hljs-chunk {
color: #aaa;
}

Binary file not shown.

Before

Width:  |  Height:  |  Size: 78 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 463 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 108 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 216 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 14 KiB

189
index.css Normal file
View File

@ -0,0 +1,189 @@
@font-face {
font-family: 'iconfont';
src: url('//at.alicdn.com/t/font_1438330832_106274.eot');
src: url('//at.alicdn.com/t/font_1438330832_106274.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('//at.alicdn.com/t/font_1438330832_106274.woff') format('woff'), /* chrome、firefox */ url('//at.alicdn.com/t/font_1438330832_106274.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/ url('//at.alicdn.com/t/font_1438330832_106274.svg#iconfont') format('svg');
/* IE9*/
/* iOS 4.1- */
}
i.iconfont {
font-family: "iconfont";
font-style: normal;
}
body {
margin: 0;
padding: 0;
font-family: 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.wrapper .cornerBtn {
position: absolute;
right: 10px;
top: 10px;
}
.wrapper a,
.wrapper a:hover {
text-decoration: none;
}
.wrapper a {
font-size: 16px;
color: #00aaee;
line-height: 40px;
}
.wrapper h4.subTitle {
font-size: 30px;
margin: 0;
padding: 30px 0;
width: 100%;
text-align: center;
}
.wrapper code {
display: inline-block;
}
.wrapper .actionBtn.actionBtnWhite {
color: #FFF;
border: 1px solid #FFF;
}
.wrapper .actionBtn.actionBtnWhite:hover {
background: #f9f9f9;
color: #326eeb;
}
.wrapper .actionBtn {
color: #326eeb;
border: 1px solid #326eeb;
line-height: 30px;
font-size: 30px;
padding: 20px 45px;
border-radius: 30px;
display: inline-block;
transition: 0.3s;
}
.wrapper .actionBtn:hover {
background: #326eeb;
color: #f9f9f9;
}
.brief {
height: 300px;
width: 100%;
text-align: center;
padding: 100px 0;
position: relative;
}
.brief .slogan {
font-size: 16px;
color: #636373;
}
.feature {
background: #dedede;
width: 100%;
}
.feature .featureContent {
width: 1200px;
margin: 0 auto;
}
.feature .featureContent .item {
width: 280px;
height: 190px;
/*border: 1px solid #AAA;*/
margin: 0 10px;
float: left;
box-sizing: border-box;
-webkit-box-sizing: border-box;
font-size: 30px;
}
.feature .featureContent .iconWrapper {
float: left;
display: inline-block;
height: 190px;
line-height: 190px;
width: 70px;
text-align: center;
font-size: 40px;
color: #636373;
}
.feature .featureContent h4 {
color: #636373;
margin: 60px 0 15px 0;
font-size: 20px;
}
.feature .featureContent h5 {
color: #777777;
margin: 0;
font-size: 14px;
}
.quickstart {
background: #f9f9f9;
width: 100%;
}
.quickstart .quickstartContent {
position: relative;
}
.quickstart .screenshot {
position: absolute;
right: 0;
bottom: 0;
}
.quickstart code.simpleBash {
font-family: monospace;
font-weight: bold;
color: #333;
padding: 0;
}
.listSection .listContent {
width: 1200px;
margin: 0 auto;
}
.listSection ul {
margin: 0 200px;
}
.listSection li {
color: #636373;
font-size: 16px;
line-height: 40px;
}
.sample {
background: #f9f9f9;
}
.sample .sampleContent {
width: 1200px;
margin: 0 auto;
}
.sample .item {
width: 1000px;
margin: 20px auto 0;
}
.sample .figure {
vertical-align: top;
}
.sample pre {
margin: 0;
display: inline-block;
vertical-align: top;
}
.sample code {
width: 530px;
}
.sample .readmore {
/*text-align: center;*/
padding-bottom: 20px;
}
.readMore {
background: #f9f9f9;
padding-bottom: 50px;
}
.learnMore {
width: 100%;
height: 300px;
background: #326eeb;
text-align: center;
position: relative;
}
.learnMore .btnWrapper {
width: 100%;
text-align: center;
height: 60px;
margin-top: -30px;
position: absolute;
top: 50%;
}

View File

@ -1,268 +1,221 @@
<!DOCTYPE html>
<html> <html>
<head>
<title>AnyProxy</title>
<link rel="stylesheet" type="text/css" href="./index.css">
</head>
<body>
<head> <div class="wrapper">
<meta charset='utf-8'> <a class="cornerBtn" href="https://github.com/alibaba/anyproxy" target="_blank">View on Github</a><br>
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<meta name="description" content="Anyproxy : A fully configurable proxy in NodeJS, which can handle HTTPS requests perfectly.">
<link rel="stylesheet" type="text/css" media="screen" href="stylesheets/stylesheet.css"> <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>&nbsp;&nbsp;&nbsp;
<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>
<title>Anyproxy</title> <div class="feature">
</head> <div class="featureContent">
<div class="item">
<span class="iconWrapper">
<i class="iconfont">&#xe603;</i>
</span>
<h4>基于Node.js</h4>
<h5>全程JavaScript学习无压力</h5>
</div>
<div class="item">
<span class="iconWrapper">
<i class="iconfont">&#xe601;</i>
</span>
<h4>支持Https</h4>
<h5>用AnyProxy自制根证书明文解析Https请求数据 <a href="https://github.com/alibaba/anyproxy/wiki/HTTPS%E7%9B%B8%E5%85%B3%E6%95%99%E7%A8%8B" target="_blank">如何配置&gt;&gt;</a></h5>
</div>
<div class="item">
<span class="iconWrapper">
<i class="iconfont">&#xe600;</i>
</span>
<h4>Web界面</h4>
<h5>多终端共享,可视化观察每个请求</h5>
</div>
<div class="item">
<span class="iconWrapper">
<i class="iconfont">&#xe604;</i>
</span>
<h4>规则逻辑Rule</h4>
<h5>随心所欲编写处理规则,定制我的专属调试工具</h5>
</div>
<div style="clear:both"></div>
</div>
</div>
<body> <div class="quickstart listSection">
<div class="quickstartContent listContent">
<h4 class="subtitle">安装</h4>
<ul>
<li>安装 <a href="http://nodejs.org/" target="_blank">Node.js</a> &gt;= 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&gt;&gt;</a></li>
</ul>
<h4 class="subtitle">使用</h4>
<ul>
<li>运行&nbsp;&nbsp;<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">更多用法&gt;&gt;</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>
<!-- HEADER --> <div class="sample">
<div id="header_wrap" class="outer">
<header class="inner">
<a id="forkme_banner" href="https://github.com/alibaba/anyproxy">View on GitHub</a>
<h1 id="project_title">Anyproxy</h1> <div class="sampleContent">
<h2 id="project_tagline">A fully configurable proxy in NodeJS, which can handle HTTPS requests perfectly.</h2> <h4 class="subtitle">规则文件(rule)样例</h4>
<div class="item">
<section id="downloads"> <pre>
<a class="zip_download_link" href="https://github.com/alibaba/anyproxy/zipball/master">Download this project as a .zip file</a> <code class="javascript">
<a class="tar_download_link" href="https://github.com/alibaba/anyproxy/tarball/master">Download this project as a tar.gz file</a> //remove cache related header
</section> //file : rule_remove_cache_header.js
</header> //rule : anyproxy --rule rule_remove_cache_header.js
</div> module.exports = {
replaceRequestOption : function(req,option){
<!-- MAIN CONTENT --> var newOption = option;
<div id="main_content_wrap" class="outer"> delete newOption.headers['if-modified-since'];
<section id="main_content" class="inner">
<h1>
<a id="anyproxy" class="anchor" href="#anyproxy" aria-hidden="true"><span class="octicon octicon-link"></span></a>anyproxy</h1>
<p>A fully configurable proxy in NodeJS, which can handle HTTPS requests perfectly.</p>
<h2>
<a id="feature" class="anchor" href="#feature" aria-hidden="true"><span class="octicon octicon-link"></span></a>Feature</h2>
<ul>
<li>work as http or https proxy</li>
<li>fully configurable, you can modify a request at any stage by your own javascript code</li>
<li>when working as https proxy, it can generate and intercept https requests for any domain without complaint by browser (after you trust its root CA)</li>
<li>provide a web interface</li>
</ul>
<p><img src="http://gtms03.alicdn.com/tps/i3/TB1ddyqGXXXXXbXXpXXihxC1pXX-1000-549.jpg_640x640q90.jpg" alt="screenshot"></p>
<h2>
<a id="usage" class="anchor" href="#usage" aria-hidden="true"><span class="octicon octicon-link"></span></a>Usage</h2>
<h3>
<a id="step-1---install" class="anchor" href="#step-1---install" aria-hidden="true"><span class="octicon octicon-link"></span></a>step 1 - install</h3>
<ul>
<li>install <a href="http://nodejs.org/">NodeJS</a>
</li>
<li>
<code>npm install -g anyproxy</code> , may require <code>sudo</code>
</li>
</ul>
<h3>
<a id="step-2---start-server" class="anchor" href="#step-2---start-server" aria-hidden="true"><span class="octicon octicon-link"></span></a>step 2 - start server</h3>
<ul>
<li>start with default settings : <code>anyproxy</code>
</li>
<li>start with a specific port: <code>anyproxy --port 8001</code>
</li>
</ul>
<h3>
<a id="step-3---launch-web-interface" class="anchor" href="#step-3---launch-web-interface" aria-hidden="true"><span class="octicon octicon-link"></span></a>step 3 - launch web interface</h3>
<ul>
<li>visit <a href="http://127.0.0.1:8002">http://127.0.0.1:8002</a> with modern browsers</li>
</ul>
<h2>
<a id="how-to-write-your-own-rule-file" class="anchor" href="#how-to-write-your-own-rule-file" aria-hidden="true"><span class="octicon octicon-link"></span></a>How to write your own rule file</h2>
<ul>
<li>with rule file, you can modify a request at any stage, no matter it's just before sending or after servers' responding.</li>
<li>actually ruleFile.js is a module for Nodejs, feel free to invoke your own modules.</li>
<li><code>anyproxy --rule /path/to/ruleFile.js</code></li>
<li>you may learn how it works by our samples: <a href="https://github.com/alipay-ct-wd/anyproxy/tree/master/rule_sample">https://github.com/alipay-ct-wd/anyproxy/tree/master/rule_sample</a>
</li>
<li>
<p>samples in <a href="https://github.com/alipay-ct-wd/anyproxy/tree/master/rule_sample">rule_sample</a></p>
<ul>
<li><p><strong>rule__blank.js</strong>, blank rule file with some comments. You may read this before writing your own rule file.</p></li>
<li><p><strong>rule_adjust_response_time.js</strong>, delay all the response for 1500ms</p></li>
<li>
<strong>rule_allow_CORS.js</strong>, add CORS headers to allow cross-domain ajax request</li>
<li>
<strong>rule_intercept_some_https_requests.js</strong>, intercept https requests toward github.com</li>
<li>
<strong>rule_remove_cache_header.js</strong>, remove all cache-related headers from server</li>
<li>
<strong>rule_replace_request_option.js</strong>, replace request parameters before sending to the server</li>
<li>
<strong>rule_replace_response_data.js</strong>, modify response data</li>
<li>
<strong>rule_replace_response_status_code.js</strong>, replace server's status code</li>
<li>
<strong>rule_use_local_data.js</strong>, map some requests to local file</li>
</ul>
</li>
<li><p>rule file scheme is as follows, you may also get it from <a href="https://github.com/alipay-ct-wd/anyproxy/blob/master/rule_sample/rule__blank.js">rule__blank.js</a></p></li>
</ul>
<div class="highlight highlight-javascript"><pre>
<span class="pl-c1">module</span>.exports <span class="pl-k">=</span> {
<span class="pl-c">/*</span>
<span class="pl-c"> these functions will overwrite the default ones, write your own when necessary.</span>
<span class="pl-c"> */</span>
<span class="pl-c">//whether to intercept this request by local logic</span>
<span class="pl-c">//if the return value is true, anyproxy will call dealLocalResponse to get response data and will not send request to remote server anymore</span>
<span class="pl-en">shouldUseLocalResponse</span> : <span class="pl-k">function</span>(<span class="pl-smi">req</span>,<span class="pl-smi">reqBody</span>){
<span class="pl-k">return</span> <span class="pl-c1">false</span>;
},
<span class="pl-c">//you may deal the response locally instead of sending it to server</span>
<span class="pl-c">//this function be called when shouldUseLocalResponse returns true</span>
<span class="pl-c">//callback(statusCode,resHeader,responseData)</span>
<span class="pl-c">//e.g. callback(200,{"content-type":"text/html"},"hello world")</span>
<span class="pl-en">dealLocalResponse</span> : <span class="pl-k">function</span>(<span class="pl-smi">req</span>,<span class="pl-smi">reqBody</span>,<span class="pl-smi">callback</span>){
callback(statusCode,resHeader,responseData)
},
<span class="pl-c">//replace the request protocol when sending to the real server</span>
<span class="pl-c">//protocol : "http" or "https"</span>
<span class="pl-en">replaceRequestProtocol</span>:<span class="pl-k">function</span>(<span class="pl-smi">req</span>,<span class="pl-smi">protocol</span>){
<span class="pl-k">var</span> newProtocol <span class="pl-k">=</span> protocol;
<span class="pl-k">return</span> newProtocol;
},
<span class="pl-c">//req is user's request sent to the proxy server</span>
<span class="pl-c">//option is how the proxy server will send request to the real server. i.e. require("http").request(option,function(){...})</span>
<span class="pl-c">//you may return a customized option to replace the original option</span>
<span class="pl-c">//you should not write content-length header in options, since anyproxy will handle it for you</span>
<span class="pl-en">replaceRequestOption</span> : <span class="pl-k">function</span>(<span class="pl-smi">req</span>,<span class="pl-smi">option</span>){
<span class="pl-k">var</span> newOption <span class="pl-k">=</span> option;
<span class="pl-k">return</span> newOption;
},
<span class="pl-c">//replace the request body</span>
<span class="pl-en">replaceRequestData</span>: <span class="pl-k">function</span>(<span class="pl-smi">req</span>,<span class="pl-smi">data</span>){
<span class="pl-k">return</span> data;
},
<span class="pl-c">//replace the statusCode before it's sent to the user</span>
<span class="pl-en">replaceResponseStatusCode</span>: <span class="pl-k">function</span>(<span class="pl-smi">req</span>,<span class="pl-smi">res</span>,<span class="pl-smi">statusCode</span>){
<span class="pl-k">var</span> newStatusCode <span class="pl-k">=</span> statusCode;
<span class="pl-k">return</span> newStatusCode;
},
<span class="pl-c">//replace the httpHeader before it's sent to the user</span>
<span class="pl-c">//Here header == res.headers</span>
<span class="pl-en">replaceResponseHeader</span>: <span class="pl-k">function</span>(<span class="pl-smi">req</span>,<span class="pl-smi">res</span>,<span class="pl-smi">header</span>){
<span class="pl-k">var</span> newHeader <span class="pl-k">=</span> header;
<span class="pl-k">return</span> newHeader;
},
<span class="pl-c">//replace the response from the server before it's sent to the user</span>
<span class="pl-c">//you may return either a Buffer or a string</span>
<span class="pl-c">//serverResData is a Buffer, you may get its content by calling serverResData.toString()</span>
<span class="pl-en">replaceServerResData</span>: <span class="pl-k">function</span>(<span class="pl-smi">req</span>,<span class="pl-smi">res</span>,<span class="pl-smi">serverResData</span>){
<span class="pl-k">return</span> serverResData;
},
<span class="pl-c">//add a pause before sending response to user</span>
<span class="pl-en">pauseBeforeSendingResponse</span> : <span class="pl-k">function</span>(<span class="pl-smi">req</span>,<span class="pl-smi">res</span>){
<span class="pl-k">var</span> timeInMS <span class="pl-k">=</span> <span class="pl-c1">1</span>; <span class="pl-c">//delay all requests for 1ms</span>
<span class="pl-k">return</span> timeInMS;
},
<span class="pl-c">//should intercept https request, or it will be forwarded to real server</span>
<span class="pl-en">shouldInterceptHttpsReq</span> :<span class="pl-k">function</span>(<span class="pl-smi">req</span>){
<span class="pl-k">return</span> <span class="pl-c1">false</span>;
}
return newOption;
}
}; };
</pre></div> </code>
</pre>
<span class="figure">
<img src="./sampleA.png" width="360"/>
</span>
</div>
<h2> <div class="item">
<a id="using-https-features" class="anchor" href="#using-https-features" aria-hidden="true"><span class="octicon octicon-link"></span></a>Using https features</h2> <pre>
<code class="javascript">
//append "hello world" to all web pages
//file : rule_replace_response_data.js
//run : anyproxy --rule rule_replace_response_data.js
module.exports = {
replaceServerResDataAsync: function(req,res,serverRes,callback){
<h4> if(/html/i.test(res.headers['content-type'])){
<a id="step-1---install-openssl" class="anchor" href="#step-1---install-openssl" aria-hidden="true"><span class="octicon octicon-link"></span></a>step 1 - install openssl</h4> var newDataStr = serverRes.toString();
newDataStr += "hello world!";
callback(newDataStr);
}
}
};
</code>
</pre>
<span class="figure">
<img src="./sampleB.png" width="360"/>
</span>
</div>
<ul> <div class="item">
<li>install <a href="http://wiki.openssl.org/index.php/Compilation_and_Installation">openssl</a> ,if you want to use HTTPS-related features. After that, the command <code>openssl</code> should be exposed to your shell</li> <pre>
</ul> <code class="javascript">
//assign a specific IP adress for some request
//file : rule_reverse_proxy.js
//run : anyproxy --rule anyproxy --rule rule_reverse_proxy.js
module.exports = {
replaceRequestOption : function(req,option){
var newOption = option;
if(newOption.headers.host == "www.taobao.com"){
newOption.hostname = "192.168.1.3";
newOption.port = "80";
}
<h4> return newOption;
<a id="step-2---generate-a-rootca-and-trust-it" class="anchor" href="#step-2---generate-a-rootca-and-trust-it" aria-hidden="true"><span class="octicon octicon-link"></span></a>step 2 - generate a rootCA and trust it</h4> }
};
</code>
</pre>
<span class="figure">
<img src="./sampleC.png" width="360"/>
</span>
</div>
<ul> <div class="item">
<li>you should do this when it is the first time to start anyproxy</li> <pre>
<li>execute <code>anyproxy --root</code> ,follow the instructions on screen</li> <code class="javascript">
<li>you will see some tip like <em>rootCA generated at : /usr/lib...</em> . <code>cd</code> to that directory, add/trust the rootCA.crt file to your system keychain. In OSX, you may do that by open the *crt file directly</li> //replace all the images with local one
</ul> //file : rule_use_local_data.js
//run : anyproxy --rule anyproxy --rule rule_use_local_data.js
var fs = require("fs"),
img = fs.readFileSync("sample.jpg");
<h4> module.exports = {
<a id="step-3---start-a-https-proxy" class="anchor" href="#step-3---start-a-https-proxy" aria-hidden="true"><span class="octicon octicon-link"></span></a>step 3 - start a https proxy</h4> shouldUseLocalResponse : function(req,reqBody){
if(/\.(png|gif|jpg|jpeg)$/.test(req.url)){
req.replaceLocalFile = true;
return true;
}else{
return false;
}
},
<ul> dealLocalResponse : function(req,reqBody,callback){
<li><code>anyproxy --type https --host my.domain.com</code></li> if(req.replaceLocalFile){
<li>the param <code>host</code> is required with https proxy and it should be kept exactly what it it when you config your browser. Otherwise, you may get some warning about security.</li> callback(200, {"content-type":"image/png"},img );
</ul> }
}
};
</code>
</pre>
<span class="figure">
<img src="./sampleD.png" width="360"/>
</span>
</div>
<h2> <div class="item readmore">
<a id="others" class="anchor" href="#others" aria-hidden="true"><span class="octicon octicon-link"></span></a>Others</h2> <a href="https://github.com/alibaba/anyproxy" target="_blank">&gt;&gt;&nbsp;规则文件RuleAPI</a>
</div>
</div>
</div>
<h4> <div class="readMore listSection">
<a id="work-as-a-module" class="anchor" href="#work-as-a-module" aria-hidden="true"><span class="octicon octicon-link"></span></a>work as a module</h4> <div class="listContent">
<h4 class="subtitle">其他特性</h4>
<ul>
<li>Map LocalLog 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>
<pre><code>npm install anyproxy --save <div class="learnMore listSection">
</code></pre> <div class="btnWrapper">
<a class="actionBtn actionBtnWhite" href="https://github.com/alibaba/anyproxy" target="_blank">Read More AnyProxy@Github</a>
</div>
</div>
<div class="highlight highlight-javascript"><pre><span class="pl-k">var</span> proxy <span class="pl-k">=</span> <span class="pl-c1">require</span>(<span class="pl-s"><span class="pl-pds">"</span>anyproxy<span class="pl-pds">"</span></span>); <div class="footer"></div>
<span class="pl-k">!</span>proxy.isRootCAFileExists() <span class="pl-k">&amp;&amp;</span> proxy.generateRootCA(); <span class="pl-c">//please manually trust this rootCA</span> </div>
<span class="pl-k">new</span> <span class="pl-en">proxy.proxyServer</span>(<span class="pl-s"><span class="pl-pds">"</span>http<span class="pl-pds">"</span></span>,<span class="pl-s"><span class="pl-pds">"</span>8001<span class="pl-pds">"</span></span>, <span class="pl-s"><span class="pl-pds">"</span>localhost<span class="pl-pds">"</span></span> ,<span class="pl-s"><span class="pl-pds">"</span>path/to/rule/file.js<span class="pl-pds">"</span></span>);
</pre></div>
<h4> <link rel="stylesheet" type="text/css" href="./github.css" />
<a id="clear-all-the-temperary-certificates" class="anchor" href="#clear-all-the-temperary-certificates" aria-hidden="true"><span class="octicon octicon-link"></span></a>clear all the temperary certificates</h4> <script src="./lib.js"></script>
<script type="text/javascript">
<p><code>anyproxy --clear</code></p> $(document).ready(function() {
$('.sample code').each(function(i, block) {
<h2> hljs.highlightBlock(block);
<a id="contact" class="anchor" href="#contact" aria-hidden="true"><span class="octicon octicon-link"></span></a>Contact</h2> });
});
<ul> </script>
<li>Please feel free to raise any issue about this project, or give us some advice on this doc. :)</li> </body>
</ul>
</section>
</div>
<!-- FOOTER -->
<div id="footer_wrap" class="outer">
<footer class="inner">
<p class="copyright">Anyproxy maintained by <a href="https://github.com/alibaba">alibaba</a></p>
<p>Published with <a href="https://pages.github.com">GitHub Pages</a></p>
</footer>
</div>
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-57129650-1");
pageTracker._trackPageview();
} catch(err) {}
</script>
</body>
</html> </html>

0
index.js Normal file
View File

243
index.less Normal file
View File

@ -0,0 +1,243 @@
@main : #00AAEE;
@dark : #326EEB;
@gray : #F9F9F9;
@darkGray : #DEDEDE;
@textDark : #636373;
@textLight: #777;
@wideContent : 1200px;
@font-face {
font-family: 'iconfont';
src: url('//at.alicdn.com/t/font_1438330832_106274.eot'); /* IE9*/
src: url('//at.alicdn.com/t/font_1438330832_106274.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('//at.alicdn.com/t/font_1438330832_106274.woff') format('woff'), /* chrome、firefox */
url('//at.alicdn.com/t/font_1438330832_106274.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
url('//at.alicdn.com/t/font_1438330832_106274.svg#iconfont') format('svg'); /* iOS 4.1- */
}
i.iconfont{
font-family: "iconfont";
font-style: normal;
}
body{
margin: 0;
padding: 0;
font-family: 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.wrapper{
.cornerBtn{
position : absolute;
right : 10px;
top : 10px;
}
a,
a:hover{
text-decoration: none;
}
a{
font-size: 16px;
color: @main;
line-height: 40px;
}
h4.subTitle{
font-size: 30px;
margin: 0;
padding: 30px 0;
width: 100%;
text-align: center;
}
code{
display: inline-block;
}
.actionBtn.actionBtnWhite{
color: #FFF;
border: 1px solid #FFF;
}
.actionBtn.actionBtnWhite:hover{
background: @gray;
color: @dark;
}
.actionBtn{
color: @dark;
border: 1px solid @dark;
line-height: 30px;
font-size: 30px;
padding: 20px 45px;
border-radius: 30px;
display: inline-block;
transition:0.3s;
}
.actionBtn:hover{
background: @dark;
color: @gray;
}
}
.brief{
height: 300px;
width: 100%;
text-align: center;
padding: 100px 0;
position: relative;
.slogan{
font-size: 16px;
color: @textDark;
}
}
.feature{
background: @darkGray;
width: 100%;
.featureContent{
width: @wideContent;
margin: 0 auto;
@itemheight : 190px;
.item{
width: 280px;
height: @itemheight;
/*border: 1px solid #AAA;*/
margin: 0 10px;
float: left;
box-sizing:border-box;
-webkit-box-sizing:border-box;
font-size: 30px;
}
.iconWrapper{
float: left;
display: inline-block;
height: @itemheight;
line-height: @itemheight;
width: 70px;
text-align: center;
font-size: 40px;
color: @textDark;
}
h4{
color: @textDark;
margin: 60px 0 15px 0;
font-size: 20px;
}
h5{
color: @textLight;
margin: 0;
font-size: 14px;
}
}
}
.quickstart{
background: @gray;
width: 100%;
.quickstartContent{
position: relative;
}
.screenshot{
position: absolute;
right: 0;
bottom: 0;
}
code.simpleBash{
font-family: monospace;
font-weight: bold;
color: #333;
padding: 0;
}
}
.listSection{
.listContent{
width: @wideContent;
margin: 0 auto;
}
ul{
margin: 0 200px;
}
li{
color: @textDark;
font-size: 16px;
line-height: 40px;
}
}
.sample{
background: @gray;
.sampleContent{
width: @wideContent;
margin: 0 auto;
}
.item{
width: 1000px;
margin: 20px auto 0;
}
.figure{
vertical-align: top;
}
pre{
margin: 0;
display: inline-block;
vertical-align: top;
}
code{
width: 530px;
}
.readmore{
/*text-align: center;*/
padding-bottom: 20px;
}
}
.readMore{
background: @gray;
padding-bottom: 50px;
}
.learnMore{
width: 100%;
height: 300px;
background: @dark;
text-align: center;
position: relative;
.btnWrapper{
width: 100%;
text-align: center;
height: 60px;
margin-top: -30px;
position: absolute;
top:50%;
}
}

View File

@ -1 +0,0 @@
console.log('This would be the main JS file.');

View File

@ -1,20 +0,0 @@
fixScale = function(doc) {
var addEvent = 'addEventListener',
type = 'gesturestart',
qsa = 'querySelectorAll',
scales = [1, 1],
meta = qsa in doc ? doc[qsa]('meta[name=viewport]') : [];
function fix() {
meta.content = 'width=device-width,minimum-scale=' + scales[0] + ',maximum-scale=' + scales[1];
doc.removeEventListener(type, fix, true);
}
if ((meta = meta[meta.length - 1]) && addEvent in doc) {
fix();
scales = [.25, 1.6];
doc[addEvent](type, fix, true);
}
};

5
lib.js Normal file

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

BIN
sampleA.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 17 KiB

BIN
sampleB.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 19 KiB

BIN
sampleC.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 23 KiB

BIN
sampleD.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 18 KiB

View File

@ -1,70 +0,0 @@
.highlight .hll { background-color: #ffffcc }
.highlight { background: #f0f3f3; }
.highlight .c { color: #0099FF; font-style: italic } /* Comment */
.highlight .err { color: #AA0000; background-color: #FFAAAA } /* Error */
.highlight .k { color: #006699; font-weight: bold } /* Keyword */
.highlight .o { color: #555555 } /* Operator */
.highlight .cm { color: #0099FF; font-style: italic } /* Comment.Multiline */
.highlight .cp { color: #009999 } /* Comment.Preproc */
.highlight .c1 { color: #0099FF; font-style: italic } /* Comment.Single */
.highlight .cs { color: #0099FF; font-weight: bold; font-style: italic } /* Comment.Special */
.highlight .gd { background-color: #FFCCCC; border: 1px solid #CC0000 } /* Generic.Deleted */
.highlight .ge { font-style: italic } /* Generic.Emph */
.highlight .gr { color: #FF0000 } /* Generic.Error */
.highlight .gh { color: #003300; font-weight: bold } /* Generic.Heading */
.highlight .gi { background-color: #CCFFCC; border: 1px solid #00CC00 } /* Generic.Inserted */
.highlight .go { color: #AAAAAA } /* Generic.Output */
.highlight .gp { color: #000099; font-weight: bold } /* Generic.Prompt */
.highlight .gs { font-weight: bold } /* Generic.Strong */
.highlight .gu { color: #003300; font-weight: bold } /* Generic.Subheading */
.highlight .gt { color: #99CC66 } /* Generic.Traceback */
.highlight .kc { color: #006699; font-weight: bold } /* Keyword.Constant */
.highlight .kd { color: #006699; font-weight: bold } /* Keyword.Declaration */
.highlight .kn { color: #006699; font-weight: bold } /* Keyword.Namespace */
.highlight .kp { color: #006699 } /* Keyword.Pseudo */
.highlight .kr { color: #006699; font-weight: bold } /* Keyword.Reserved */
.highlight .kt { color: #007788; font-weight: bold } /* Keyword.Type */
.highlight .m { color: #FF6600 } /* Literal.Number */
.highlight .s { color: #CC3300 } /* Literal.String */
.highlight .na { color: #330099 } /* Name.Attribute */
.highlight .nb { color: #336666 } /* Name.Builtin */
.highlight .nc { color: #00AA88; font-weight: bold } /* Name.Class */
.highlight .no { color: #336600 } /* Name.Constant */
.highlight .nd { color: #9999FF } /* Name.Decorator */
.highlight .ni { color: #999999; font-weight: bold } /* Name.Entity */
.highlight .ne { color: #CC0000; font-weight: bold } /* Name.Exception */
.highlight .nf { color: #CC00FF } /* Name.Function */
.highlight .nl { color: #9999FF } /* Name.Label */
.highlight .nn { color: #00CCFF; font-weight: bold } /* Name.Namespace */
.highlight .nt { color: #330099; font-weight: bold } /* Name.Tag */
.highlight .nv { color: #003333 } /* Name.Variable */
.highlight .ow { color: #000000; font-weight: bold } /* Operator.Word */
.highlight .w { color: #bbbbbb } /* Text.Whitespace */
.highlight .mf { color: #FF6600 } /* Literal.Number.Float */
.highlight .mh { color: #FF6600 } /* Literal.Number.Hex */
.highlight .mi { color: #FF6600 } /* Literal.Number.Integer */
.highlight .mo { color: #FF6600 } /* Literal.Number.Oct */
.highlight .sb { color: #CC3300 } /* Literal.String.Backtick */
.highlight .sc { color: #CC3300 } /* Literal.String.Char */
.highlight .sd { color: #CC3300; font-style: italic } /* Literal.String.Doc */
.highlight .s2 { color: #CC3300 } /* Literal.String.Double */
.highlight .se { color: #CC3300; font-weight: bold } /* Literal.String.Escape */
.highlight .sh { color: #CC3300 } /* Literal.String.Heredoc */
.highlight .si { color: #AA0000 } /* Literal.String.Interpol */
.highlight .sx { color: #CC3300 } /* Literal.String.Other */
.highlight .sr { color: #33AAAA } /* Literal.String.Regex */
.highlight .s1 { color: #CC3300 } /* Literal.String.Single */
.highlight .ss { color: #FFCC33 } /* Literal.String.Symbol */
.highlight .bp { color: #336666 } /* Name.Builtin.Pseudo */
.highlight .vc { color: #003333 } /* Name.Variable.Class */
.highlight .vg { color: #003333 } /* Name.Variable.Global */
.highlight .vi { color: #003333 } /* Name.Variable.Instance */
.highlight .il { color: #FF6600 } /* Literal.Number.Integer.Long */
.type-csharp .highlight .k { color: #0000FF }
.type-csharp .highlight .kt { color: #0000FF }
.type-csharp .highlight .nf { color: #000000; font-weight: normal }
.type-csharp .highlight .nc { color: #2B91AF }
.type-csharp .highlight .nn { color: #000000 }
.type-csharp .highlight .s { color: #A31515 }
.type-csharp .highlight .sc { color: #A31515 }

View File

@ -1,356 +0,0 @@
@import url(https://fonts.googleapis.com/css?family=Lato:300italic,700italic,300,700);
html {
background: #6C7989;
background: #6c7989 -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #6c7989), color-stop(100%, #434b55)) fixed;
background: #6c7989 -webkit-linear-gradient(#6c7989, #434b55) fixed;
background: #6c7989 -moz-linear-gradient(#6c7989, #434b55) fixed;
background: #6c7989 -o-linear-gradient(#6c7989, #434b55) fixed;
background: #6c7989 -ms-linear-gradient(#6c7989, #434b55) fixed;
background: #6c7989 linear-gradient(#6c7989, #434b55) fixed;
}
body {
padding: 50px 0;
margin: 0;
font: 14px/1.5 Lato, "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #555;
font-weight: 300;
background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAeCAYAAABNChwpAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNXG14zYAAAAUdEVYdENyZWF0aW9uIFRpbWUAMy82LzEygrTcTAAAAFRJREFUSIljfPDggZRf5RIGGNjUHsNATz6jXmSL1Kb2GLiAX+USBnrymRgGGDCORgFmoNAXjEbBaBSMRsFoFIxGwWgUjEbBaBSMRsFoFIxGwWgUAABYNujumib3wAAAAABJRU5ErkJggg==') fixed;
}
.wrapper {
width: 640px;
margin: 0 auto;
background: #DEDEDE;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
-ms-border-radius: 8px;
-o-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 0 0 1px, rgba(0, 0, 0, 0.45) 0 3px 10px;
-moz-box-shadow: rgba(0, 0, 0, 0.2) 0 0 0 1px, rgba(0, 0, 0, 0.45) 0 3px 10px;
box-shadow: rgba(0, 0, 0, 0.2) 0 0 0 1px, rgba(0, 0, 0, 0.45) 0 3px 10px;
}
header, section, footer {
display: block;
}
a {
color: #069;
text-decoration: none;
}
p {
margin: 0 0 20px;
padding: 0;
}
strong {
color: #222;
font-weight: 700;
}
header {
-webkit-border-radius: 8px 8px 0 0;
-moz-border-radius: 8px 8px 0 0;
-ms-border-radius: 8px 8px 0 0;
-o-border-radius: 8px 8px 0 0;
border-radius: 8px 8px 0 0;
background: #C6EAFA;
background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ddfbfc), color-stop(100%, #c6eafa));
background: -webkit-linear-gradient(#ddfbfc, #c6eafa);
background: -moz-linear-gradient(#ddfbfc, #c6eafa);
background: -o-linear-gradient(#ddfbfc, #c6eafa);
background: -ms-linear-gradient(#ddfbfc, #c6eafa);
background: linear-gradient(#ddfbfc, #c6eafa);
position: relative;
padding: 15px 20px;
border-bottom: 1px solid #B2D2E1;
}
header h1 {
margin: 0;
padding: 0;
font-size: 24px;
line-height: 1.2;
color: #069;
text-shadow: rgba(255, 255, 255, 0.9) 0 1px 0;
}
header.without-description h1 {
margin: 10px 0;
}
header p {
margin: 0;
color: #61778B;
width: 300px;
font-size: 13px;
}
header p.view {
display: none;
font-weight: 700;
text-shadow: rgba(255, 255, 255, 0.9) 0 1px 0;
-webkit-font-smoothing: antialiased;
}
header p.view a {
color: #06c;
}
header p.view small {
font-weight: 400;
}
header ul {
margin: 0;
padding: 0;
list-style: none;
position: absolute;
z-index: 1;
right: 20px;
top: 20px;
height: 38px;
padding: 1px 0;
background: #5198DF;
background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #77b9fb), color-stop(100%, #3782cd));
background: -webkit-linear-gradient(#77b9fb, #3782cd);
background: -moz-linear-gradient(#77b9fb, #3782cd);
background: -o-linear-gradient(#77b9fb, #3782cd);
background: -ms-linear-gradient(#77b9fb, #3782cd);
background: linear-gradient(#77b9fb, #3782cd);
border-radius: 5px;
-webkit-box-shadow: inset rgba(255, 255, 255, 0.45) 0 1px 0, inset rgba(0, 0, 0, 0.2) 0 -1px 0;
-moz-box-shadow: inset rgba(255, 255, 255, 0.45) 0 1px 0, inset rgba(0, 0, 0, 0.2) 0 -1px 0;
box-shadow: inset rgba(255, 255, 255, 0.45) 0 1px 0, inset rgba(0, 0, 0, 0.2) 0 -1px 0;
width: auto;
}
header ul:before {
content: '';
position: absolute;
z-index: -1;
left: -5px;
top: -4px;
right: -5px;
bottom: -6px;
background: rgba(0, 0, 0, 0.1);
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
-ms-border-radius: 8px;
-o-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 0, inset rgba(255, 255, 255, 0.7) 0 -1px 0;
-moz-box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 0, inset rgba(255, 255, 255, 0.7) 0 -1px 0;
box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 0, inset rgba(255, 255, 255, 0.7) 0 -1px 0;
}
header ul li {
width: 79px;
float: left;
border-right: 1px solid #3A7CBE;
height: 38px;
}
header ul li.single {
border: none;
}
header ul li + li {
width: 78px;
border-left: 1px solid #8BBEF3;
}
header ul li + li + li {
border-right: none;
width: 79px;
}
header ul a {
line-height: 1;
font-size: 11px;
color: #fff;
color: rgba(255, 255, 255, 0.8);
display: block;
text-align: center;
font-weight: 400;
padding-top: 6px;
height: 40px;
text-shadow: rgba(0, 0, 0, 0.4) 0 -1px 0;
}
header ul a strong {
font-size: 14px;
display: block;
color: #fff;
-webkit-font-smoothing: antialiased;
}
section {
padding: 15px 20px;
font-size: 15px;
border-top: 1px solid #fff;
background: -webkit-gradient(linear, 50% 0%, 50% 700, color-stop(0%, #fafafa), color-stop(100%, #dedede));
background: -webkit-linear-gradient(#fafafa, #dedede 700px);
background: -moz-linear-gradient(#fafafa, #dedede 700px);
background: -o-linear-gradient(#fafafa, #dedede 700px);
background: -ms-linear-gradient(#fafafa, #dedede 700px);
background: linear-gradient(#fafafa, #dedede 700px);
-webkit-border-radius: 0 0 8px 8px;
-moz-border-radius: 0 0 8px 8px;
-ms-border-radius: 0 0 8px 8px;
-o-border-radius: 0 0 8px 8px;
border-radius: 0 0 8px 8px;
position: relative;
}
h1, h2, h3, h4, h5, h6 {
color: #222;
padding: 0;
margin: 0 0 20px;
line-height: 1.2;
}
p, ul, ol, table, pre, dl {
margin: 0 0 20px;
}
h1, h2, h3 {
line-height: 1.1;
}
h1 {
font-size: 28px;
}
h2 {
color: #393939;
}
h3, h4, h5, h6 {
color: #494949;
}
blockquote {
margin: 0 -20px 20px;
padding: 15px 20px 1px 40px;
font-style: italic;
background: #ccc;
background: rgba(0, 0, 0, 0.06);
color: #222;
}
img {
max-width: 100%;
}
code, pre {
font-family: Monaco, Bitstream Vera Sans Mono, Lucida Console, Terminal;
color: #333;
font-size: 12px;
overflow-x: auto;
}
pre {
padding: 20px;
background: #3A3C42;
color: #f8f8f2;
margin: 0 -20px 20px;
}
pre code {
color: #f8f8f2;
}
li pre {
margin-left: -60px;
padding-left: 60px;
}
table {
width: 100%;
border-collapse: collapse;
}
th, td {
text-align: left;
padding: 5px 10px;
border-bottom: 1px solid #aaa;
}
dt {
color: #222;
font-weight: 700;
}
th {
color: #222;
}
small {
font-size: 11px;
}
hr {
border: 0;
background: #aaa;
height: 1px;
margin: 0 0 20px;
}
footer {
width: 640px;
margin: 0 auto;
padding: 20px 0 0;
color: #ccc;
overflow: hidden;
}
footer a {
color: #fff;
font-weight: bold;
}
footer p {
float: left;
}
footer p + p {
float: right;
}
@media print, screen and (max-width: 740px) {
body {
padding: 0;
}
.wrapper {
-webkit-border-radius: 0;
-moz-border-radius: 0;
-ms-border-radius: 0;
-o-border-radius: 0;
border-radius: 0;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
width: 100%;
}
footer {
-webkit-border-radius: 0;
-moz-border-radius: 0;
-ms-border-radius: 0;
-o-border-radius: 0;
border-radius: 0;
padding: 20px;
width: auto;
}
footer p {
float: none;
margin: 0;
}
footer p + p {
float: none;
}
}
@media print, screen and (max-width:580px) {
header ul {
display: none;
}
header p.view {
display: block;
}
header p {
width: 100%;
}
}
@media print {
header p.view a small:before {
content: 'at http://github.com/';
}
}

View File

@ -1,425 +0,0 @@
/*******************************************************************************
Slate Theme for GitHub Pages
by Jason Costello, @jsncostello
*******************************************************************************/
@import url(pygment_trac.css);
/*******************************************************************************
MeyerWeb Reset
*******************************************************************************/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
ol, ul {
list-style: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/*******************************************************************************
Theme Styles
*******************************************************************************/
body {
box-sizing: border-box;
color:#373737;
background: #212121;
font-size: 16px;
font-family: 'Myriad Pro', Calibri, Helvetica, Arial, sans-serif;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6 {
margin: 10px 0;
font-weight: 700;
color:#222222;
font-family: 'Lucida Grande', 'Calibri', Helvetica, Arial, sans-serif;
letter-spacing: -1px;
}
h1 {
font-size: 36px;
font-weight: 700;
}
h2 {
padding-bottom: 10px;
font-size: 32px;
background: url('../images/bg_hr.png') repeat-x bottom;
}
h3 {
font-size: 24px;
}
h4 {
font-size: 21px;
}
h5 {
font-size: 18px;
}
h6 {
font-size: 16px;
}
p {
margin: 10px 0 15px 0;
}
footer p {
color: #f2f2f2;
}
a {
text-decoration: none;
color: #007edf;
text-shadow: none;
transition: color 0.5s ease;
transition: text-shadow 0.5s ease;
-webkit-transition: color 0.5s ease;
-webkit-transition: text-shadow 0.5s ease;
-moz-transition: color 0.5s ease;
-moz-transition: text-shadow 0.5s ease;
-o-transition: color 0.5s ease;
-o-transition: text-shadow 0.5s ease;
-ms-transition: color 0.5s ease;
-ms-transition: text-shadow 0.5s ease;
}
a:hover, a:focus {text-decoration: underline;}
footer a {
color: #F2F2F2;
text-decoration: underline;
}
em {
font-style: italic;
}
strong {
font-weight: bold;
}
img {
position: relative;
margin: 0 auto;
max-width: 739px;
padding: 5px;
margin: 10px 0 10px 0;
border: 1px solid #ebebeb;
box-shadow: 0 0 5px #ebebeb;
-webkit-box-shadow: 0 0 5px #ebebeb;
-moz-box-shadow: 0 0 5px #ebebeb;
-o-box-shadow: 0 0 5px #ebebeb;
-ms-box-shadow: 0 0 5px #ebebeb;
}
p img {
display: inline;
margin: 0;
padding: 0;
vertical-align: middle;
text-align: center;
border: none;
}
pre, code {
width: 100%;
color: #222;
background-color: #fff;
font-family: Monaco, "Bitstream Vera Sans Mono", "Lucida Console", Terminal, monospace;
font-size: 14px;
border-radius: 2px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
}
pre {
width: 100%;
padding: 10px;
box-shadow: 0 0 10px rgba(0,0,0,.1);
overflow: auto;
}
code {
padding: 3px;
margin: 0 3px;
box-shadow: 0 0 10px rgba(0,0,0,.1);
}
pre code {
display: block;
box-shadow: none;
}
blockquote {
color: #666;
margin-bottom: 20px;
padding: 0 0 0 20px;
border-left: 3px solid #bbb;
}
ul, ol, dl {
margin-bottom: 15px
}
ul {
list-style-position: inside;
list-style: disc;
padding-left: 20px;
}
ol {
list-style-position: inside;
list-style: decimal;
padding-left: 20px;
}
dl dt {
font-weight: bold;
}
dl dd {
padding-left: 20px;
font-style: italic;
}
dl p {
padding-left: 20px;
font-style: italic;
}
hr {
height: 1px;
margin-bottom: 5px;
border: none;
background: url('../images/bg_hr.png') repeat-x center;
}
table {
border: 1px solid #373737;
margin-bottom: 20px;
text-align: left;
}
th {
font-family: 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, sans-serif;
padding: 10px;
background: #373737;
color: #fff;
}
td {
padding: 10px;
border: 1px solid #373737;
}
form {
background: #f2f2f2;
padding: 20px;
}
/*******************************************************************************
Full-Width Styles
*******************************************************************************/
.outer {
width: 100%;
}
.inner {
position: relative;
max-width: 640px;
padding: 20px 10px;
margin: 0 auto;
}
#forkme_banner {
display: block;
position: absolute;
top:0;
right: 10px;
z-index: 10;
padding: 10px 50px 10px 10px;
color: #fff;
background: url('../images/blacktocat.png') #0090ff no-repeat 95% 50%;
font-weight: 700;
box-shadow: 0 0 10px rgba(0,0,0,.5);
border-bottom-left-radius: 2px;
border-bottom-right-radius: 2px;
}
#header_wrap {
background: #212121;
background: -moz-linear-gradient(top, #373737, #212121);
background: -webkit-linear-gradient(top, #373737, #212121);
background: -ms-linear-gradient(top, #373737, #212121);
background: -o-linear-gradient(top, #373737, #212121);
background: linear-gradient(top, #373737, #212121);
}
#header_wrap .inner {
padding: 50px 10px 30px 10px;
}
#project_title {
margin: 0;
color: #fff;
font-size: 42px;
font-weight: 700;
text-shadow: #111 0px 0px 10px;
}
#project_tagline {
color: #fff;
font-size: 24px;
font-weight: 300;
background: none;
text-shadow: #111 0px 0px 10px;
}
#downloads {
position: absolute;
width: 210px;
z-index: 10;
bottom: -40px;
right: 0;
height: 70px;
background: url('../images/icon_download.png') no-repeat 0% 90%;
}
.zip_download_link {
display: block;
float: right;
width: 90px;
height:70px;
text-indent: -5000px;
overflow: hidden;
background: url(../images/sprite_download.png) no-repeat bottom left;
}
.tar_download_link {
display: block;
float: right;
width: 90px;
height:70px;
text-indent: -5000px;
overflow: hidden;
background: url(../images/sprite_download.png) no-repeat bottom right;
margin-left: 10px;
}
.zip_download_link:hover {
background: url(../images/sprite_download.png) no-repeat top left;
}
.tar_download_link:hover {
background: url(../images/sprite_download.png) no-repeat top right;
}
#main_content_wrap {
background: #f2f2f2;
border-top: 1px solid #111;
border-bottom: 1px solid #111;
}
#main_content {
padding-top: 40px;
}
#footer_wrap {
background: #212121;
}
/*******************************************************************************
Small Device Styles
*******************************************************************************/
@media screen and (max-width: 480px) {
body {
font-size:14px;
}
#downloads {
display: none;
}
.inner {
min-width: 320px;
max-width: 480px;
}
#project_title {
font-size: 32px;
}
h1 {
font-size: 28px;
}
h2 {
font-size: 24px;
}
h3 {
font-size: 21px;
}
h4 {
font-size: 18px;
}
h5 {
font-size: 14px;
}
h6 {
font-size: 12px;
}
code, pre {
min-width: 320px;
max-width: 480px;
font-size: 11px;
}
}