docs: styles now live in www.mitproxy.org repo, make images responsive

author: Aldo Cortesi <aldo@nullcube.com> 2015-05-24 14:09:51 +1200
committer: Aldo Cortesi <aldo@nullcube.com> 2015-05-24 14:09:51 +1200
commit: 2135bcec61cf346555f8fd1e24bbb9267d002502 (patch)
tree: c82c9de7cf76e2537e1f30c0fdaf751d0c2b00dd
parent: 0a812656617be313c6648918f9b4c52a2ddb59c4 (diff)
download: mitmproxy-2135bcec61cf346555f8fd1e24bbb9267d002502.tar.gz
mitmproxy-2135bcec61cf346555f8fd1e24bbb9267d002502.tar.bz2
mitmproxy-2135bcec61cf346555f8fd1e24bbb9267d002502.zip
10 files changed, 83 insertions, 77 deletions
diff --git a/doc-src/01-vendor.css b/doc-src/01-vendor.css
index 2f65c8a3..9c97647a 100644
--- a/doc-src/01-vendor.css
+++ b/doc-src/01-vendor.css
@@ -1,4 +1,3 @@
-@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700");
 .navbar-inverse .badge {
   background-color: #fff;
   color: #2780e3;
diff --git a/doc-src/02-app.css b/doc-src/02-app.css
new file mode 100644
index 00000000..c7bd41ff
--- /dev/null
+++ b/doc-src/02-app.css
@@ -0,0 +1,43 @@
+.masthead {
+  text-align: center;
+  border-bottom: 0;
+}
+.frontpage .talks div {
+  margin-bottom: 10px;
+}
+.nav-sidebar {
+  background-color: #f0f0f0;
+  margin-bottom: 20px;
+}
+.nav-sidebar li {
+  line-height: 1.1;
+}
+.nav-sidebar li > a,
+.nav-sidebar .nav-header {
+  padding-left: 20px;
+}
+.nav-sidebar .nav-header {
+  margin-top: 1em;
+  font-size: 1.2em;
+  font-weight: bold;
+}
+.nav-sidebar .active > a,
+.nav-sidebar .active > a:hover,
+.nav-sidebar .active > a:focus {
+  color: #fff;
+  background-color: #428bca;
+}
+.tablenum {
+  font-weight: bold;
+}
+.nowrap {
+  white-space: nowrap;
+}
+.page-header {
+  margin: 0px 0 22px;
+}
+.page-header h1 {
+  margin-top: 0px;
+}
+
+/*# sourceMappingURL=02-app.css.map */
+\ No newline at end of file
diff --git a/doc-src/02-docstyle.css b/doc-src/02-docstyle.css
deleted file mode 100644
index 59528bb3..00000000
--- a/doc-src/02-docstyle.css
+++ /dev/null
@@ -1,36 +0,0 @@
-
-
-/* Sidebar navigation */
-.nav-sidebar {
-  margin-right: -21px; /* 20px padding + 1px border */
-  margin-bottom: 20px;
-  margin-left: -20px;
-}
-.nav-sidebar > li > a {
-  padding-right: 20px;
-  padding-left: 20px;
-}
-.nav-sidebar > .active > a,
-.nav-sidebar > .active > a:hover,
-.nav-sidebar > .active > a:focus {
-  color: #fff;
-  background-color: #428bca;
-}
-
-
-
-.tablenum {
-    font-weight: bold;
-}
-
-.nowrap {
-     white-space: nowrap;
-}
-
-h1 {
-    line-height: 1.1;
-}
-
-.page-header {
-    margin: 0px 0 22px;
-}
diff --git a/doc-src/_layout.html b/doc-src/_layout.html
index 221da466..e8b01934 100644
--- a/doc-src/_layout.html
+++ b/doc-src/_layout.html
@@ -5,7 +5,7 @@
         $!header!$
     </head>
     <body>
-        <div class="nav navbar-default navbar-static-top">
+        <div class="navbar navbar-default navbar-static-top">
             <div class="container">
                 <div class="navbar-header">
                     <button type="button"
@@ -31,10 +31,10 @@
 
         <div class="container">
           <div class="row">
-            <div class="col-md-3">
+            <div class="col-md-2">
                 $!navbar!$
             </div>
-            <div class="col-md-9">
+            <div class="col-md-10">
                 <div class="page-header">
                 <h1>@!this.title!@</h1>
                 </div>
diff --git a/doc-src/dev/architecture.html b/doc-src/dev/architecture.html
index 8ab8821f..a184fe4f 100644
--- a/doc-src/dev/architecture.html
+++ b/doc-src/dev/architecture.html
@@ -1,8 +1,8 @@
 To give you a better understanding of how mitmproxy works, mitmproxy's high-level architecture is detailed
 in the following graphic:
 
-<img src="@!urlTo('schematics/architecture.png')!@">
+<img class="img-responsive" src="@!urlTo('schematics/architecture.png')!@">
 
 <a href="@!urlTo('schematics/architecture.pdf')!@">(architecture.pdf)</a>
 <p>Please don't refrain from asking any further
-questions on the mailing list, the IRC channel or the GitHub issue tracker.</p>
-\ No newline at end of file
+questions on the mailing list, the IRC channel or the GitHub issue tracker.</p>
diff --git a/doc-src/howmitmproxy.html b/doc-src/howmitmproxy.html
index 832a61a8..f114e145 100644
--- a/doc-src/howmitmproxy.html
+++ b/doc-src/howmitmproxy.html
@@ -26,7 +26,7 @@ This is a proxy GET request - an extended form of the vanilla HTTP GET request
 that includes a schema and host specification, and it includes all the
 information mitmproxy needs to proceed.
 
-<img src="explicit.png"/>
+<img class="img-responsive" src="explicit.png"/>
 
 <table class="table">
     <tbody>
@@ -158,7 +158,7 @@ handshake. Luckily, this is almost never an issue in practice.
 
 Lets put all of this together into the complete explicitly proxied HTTPS flow.
 
-<img src="explicit_https.png"/>
+<img class="img-responsive" src="explicit_https.png"/>
 
 <table class="table">
     <tbody>
@@ -250,7 +250,7 @@ mitmproxy, this takes the form of a built-in set of
 that know how to talk to each platform's redirection mechanism.  Once we have
 this information, the process is fairly straight-forward.
 
-<img src="transparent.png"/>
+<img class="img-responsive" src="transparent.png"/>
 
 
 <table class="table">
@@ -296,7 +296,7 @@ transparently proxying HTTP, and explicitly proxying HTTPS. We use the routing
 mechanism to establish the upstream server address, and then proceed as for
 explicit HTTPS connections to establish the CN and SANs, and cope with SNI.
 
-<img src="transparent_https.png"/>
+<img class="img-responsive" src="transparent_https.png"/>
 
 
 <table class="table">
diff --git a/doc-src/mitmproxy.html b/doc-src/mitmproxy.html
index d41c1b21..7261c238 100644
--- a/doc-src/mitmproxy.html
+++ b/doc-src/mitmproxy.html
@@ -7,13 +7,13 @@ documentation from any __mitmproxy__ screen.
 
 ## Flow list
 
-The flow list shows an index of captured flows in chronological order. 
+The flow list shows an index of captured flows in chronological order.
 
-<img src="@!urlTo('screenshots/mitmproxy.png')!@"/>
+<img class="img-responsive" src="@!urlTo('screenshots/mitmproxy.png')!@"/>
 
 - __1__: A GET request, returning a 302 Redirect response.
 - __2__: A GET request, returning 16.75kb of text/html data.
-- __3__: A replayed request. 
+- __3__: A replayed request.
 - __4__: Intercepted flows are indicated with orange text. The user may edit
 these flows, and then accept them (using the _a_ key) to continue. In this
 case, the request has been intercepted on the way to the server.
@@ -32,7 +32,7 @@ interfaces.
 
 The __Flow View__ lets you inspect and manipulate a single flow:
 
-<img src="@!urlTo('screenshots/mitmproxy-flowview.png')!@"/>
+<img class="img-responsive" src="@!urlTo('screenshots/mitmproxy-flowview.png')!@"/>
 
 - __1__: Flow summary.
 - __2__: The Request/Response tabs, showing you which part of the flow you are
@@ -53,11 +53,11 @@ using the _m_ key.
 Much of the data that we'd like to interact with in mitmproxy is structured.
 For instance, headers, queries and form data can all be thought of as a list of
 key/value pairs. Mitmproxy has a built-in editor that lays this type of data
-out in a grid for easy manipulation. 
+out in a grid for easy manipulation.
 
 At the moment, the Grid Editor is used in four parts of mitmproxy:
 
-- Editing request or response headers (_e_ for edit, then _h_ for headers in flow view) 
+- Editing request or response headers (_e_ for edit, then _h_ for headers in flow view)
 - Editing a query string (_e_ for edit, then _q_ for query in flow view)
 - Editing a URL-encoded form (_e_ for edit, then _f_ for form in flow view)
 - Editing replacement patterns (_R_ globally)
@@ -65,13 +65,13 @@ At the moment, the Grid Editor is used in four parts of mitmproxy:
 If there is is no data, an empty editor will be started to let you add some.
 Here is the editor showing the headers from a request:
 
-<img src="@!urlTo('screenshots/mitmproxy-kveditor.png')!@"/>
+<img class="img-responsive" src="@!urlTo('screenshots/mitmproxy-kveditor.png')!@"/>
 
 To edit, navigate to the key or value you want to modify using the arrow or vi
 navigation keys, and press enter. The background color will change to show that
 you are in edit mode for the specified field:
 
-<img src="@!urlTo('screenshots/mitmproxy-kveditor-editmode.png')!@"/>
+<img class="img-responsive" src="@!urlTo('screenshots/mitmproxy-kveditor-editmode.png')!@"/>
 
 Modify the field as desired, then press escape to exit edit mode when you're
 done. You can also add a row (_a_ key), delete a row (_d_ key), spawn an
@@ -83,12 +83,12 @@ help (_?_ key) for more.
 
 __mitmproxy__'s interception functionality lets you pause an HTTP request or
 response, inspect and modify it, and then accept it to send it on to the server
-or client. 
+or client.
 
 
 ### 1: Set an interception pattern
 
-<img src="@!urlTo('mitmproxy-intercept-filt.png')!@"/>
+<img class="img-responsive" src="@!urlTo('mitmproxy-intercept-filt.png')!@"/>
 
 We press _i_ to set an interception pattern. In this case, the __~q__ filter
 pattern tells __mitmproxy__ to intercept all requests. For complete filter
@@ -97,19 +97,19 @@ document, or the built-in help function in __mitmproxy__.
 
 ### 2: Intercepted connections are indicated with orange text:
 
-<img src="@!urlTo('mitmproxy-intercept-mid.png')!@"/>
+<img class="img-responsive" src="@!urlTo('mitmproxy-intercept-mid.png')!@"/>
 
 ### 3: You can now view and modify the request:
 
-<img src="@!urlTo('mitmproxy-intercept-options.png')!@"/>
+<img class="img-responsive" src="@!urlTo('mitmproxy-intercept-options.png')!@"/>
 
 In this case, we viewed the request by selecting it, pressed _e_ for "edit"
 and _m_ for "method" to change the HTTP request method.
 
 ### 4: Accept the intercept to continue:
 
-<img src="@!urlTo('mitmproxy-intercept-result.png')!@"/>
+<img class="img-responsive" src="@!urlTo('mitmproxy-intercept-result.png')!@"/>
 
 Finally, we press _a_ to accept the modified request, which is then sent on to
 the server. In this case, we changed the request from an HTTP GET to
-OPTIONS, and Google's server has responded with a 405 "Method not allowed". 
+OPTIONS, and Google's server has responded with a 405 "Method not allowed".
diff --git a/doc-src/modes.html b/doc-src/modes.html
index 8870009d..b5a38696 100644
--- a/doc-src/modes.html
+++ b/doc-src/modes.html
@@ -9,7 +9,7 @@ variety of scenarios:
 
 Now, which one should you pick? Use this flow chart:
 
-<img src="@!urlTo('schematics/proxy-modes-flowchart.png')!@"/>
+<img class="img-responsive" src="@!urlTo('schematics/proxy-modes-flowchart.png')!@"/>
 
 <div class="page-header">
     <h1>Regular Proxy</h1>
@@ -31,7 +31,7 @@ these cases, you need to use mitmproxy's transparent mode.
 
 If you are proxying an external device, your network will probably look like this:
 
-<img src="@!urlTo('schematics/proxy-modes-regular.png')!@">
+<img class="img-responsive" src="@!urlTo('schematics/proxy-modes-regular.png')!@">
 
 The square brackets signify the source and destination IP addresses. Your
 client explicitly connects to mitmproxy and mitmproxy explicitly connects
@@ -48,7 +48,7 @@ below, a machine running mitmproxy has been inserted between the router and
 the internet:
 
 <a href="@!urlTo('schematics/proxy-modes-transparent-1.png')!@">
-    <img src="@!urlTo('schematics/proxy-modes-transparent-1.png')!@">
+    <img class="img-responsive" src="@!urlTo('schematics/proxy-modes-transparent-1.png')!@">
 </a>
 
 The square brackets signify the source and destination IP addresses. Round
@@ -60,7 +60,7 @@ remove the target information, leaving mitmproxy unable to determine the real
 destination.
 
 <a href="@!urlTo('schematics/proxy-modes-transparent-wrong.png')!@">
-    <img src="@!urlTo('schematics/proxy-modes-transparent-wrong.png')!@"></a>
+    <img class="img-responsive" src="@!urlTo('schematics/proxy-modes-transparent-wrong.png')!@"></a>
 
 <h2>Common Configurations</h2>
 
@@ -79,7 +79,7 @@ intact, is to simply configure the client with the mitmproxy box as the
 default gateway.
 
 <a href="@!urlTo('schematics/proxy-modes-transparent-2.png')!@">
-    <img src="@!urlTo('schematics/proxy-modes-transparent-2.png')!@"></a>
+    <img class="img-responsive" src="@!urlTo('schematics/proxy-modes-transparent-2.png')!@"></a>
 
 In this scenario, we would:
 
@@ -98,7 +98,7 @@ for your device.
 
 Setting the custom gateway on clients can be automated by serving the settings
 out to clients over DHCP. This lets set up an interception network where all
-clients are proxied automatically, which can save time and effort. 
+clients are proxied automatically, which can save time and effort.
 
 
 <div class="well">
@@ -141,7 +141,7 @@ packet filter you're using. In most cases, the configuration will look like
 this:
 
 <a href="@!urlTo('schematics/proxy-modes-transparent-3.png')!@">
-    <img src="@!urlTo('schematics/proxy-modes-transparent-3.png')!@">
+    <img class="img-responsive" src="@!urlTo('schematics/proxy-modes-transparent-3.png')!@">
 </a>
 
 
@@ -154,7 +154,7 @@ Internet. Using reverse proxy mode, you can use mitmproxy to act like a normal
 HTTP server:
 
 <a href="@!urlTo('schematics/proxy-modes-reverse.png')!@">
-    <img src="@!urlTo('schematics/proxy-modes-reverse.png')!@">
+    <img class="img-responsive" src="@!urlTo('schematics/proxy-modes-reverse.png')!@">
 </a>
 
 There are various use-cases:
@@ -215,8 +215,8 @@ appliance, you can use mitmproxy's upstream mode. In upstream mode, all
 requests are unconditionally transferred to an upstream proxy of your choice.
 
 <a href="@!urlTo('schematics/proxy-modes-upstream.png')!@">
-    <img src="@!urlTo('schematics/proxy-modes-upstream.png')!@"></a>
+    <img class="img-responsive" src="@!urlTo('schematics/proxy-modes-upstream.png')!@"></a>
 
 mitmproxy supports both explicit HTTP and explicit HTTPS in upstream proxy
 mode. You could in theory chain multiple mitmproxy instances in a row, but
-that doesn't make any sense in practice (i.e. outside of our tests). 
+that doesn't make any sense in practice (i.e. outside of our tests).
diff --git a/doc-src/tutorials/gamecenter.html b/doc-src/tutorials/gamecenter.html
index 15380c20..af11b5bb 100644
--- a/doc-src/tutorials/gamecenter.html
+++ b/doc-src/tutorials/gamecenter.html
@@ -15,14 +15,14 @@ Worm](http://itunes.apple.com/us/app/super-mega-worm/id388541990?mt=8) - a
 great little retro-apocalyptic sidescroller for the iPhone:
 
 <center>
-    <img src="@!urlTo('tutorials/supermega.png')!@"/>
+    <img class="img-responsive" src="@!urlTo('tutorials/supermega.png')!@"/>
 </center>
 
 After finishing a game (take your time), watch the traffic flowing through
 mitmproxy:
 
 <center>
-    <img src="@!urlTo('tutorials/one.png')!@"/>
+    <img class="img-responsive" src="@!urlTo('tutorials/one.png')!@"/>
 </center>
 
 We see a bunch of things we might expect - initialisation, the retrieval of
@@ -97,7 +97,7 @@ replay.
 ## The glorious result and some intrigue
 
 <center>
-    <img src="@!urlTo('tutorials/leaderboard.png')!@"/>
+    <img class="img-responsive" src="@!urlTo('tutorials/leaderboard.png')!@"/>
 </center>
 
 And that's it - according to the records, I am the greatest Super Mega Worm
diff --git a/doc-src/tutorials/transparent-dhcp.html b/doc-src/tutorials/transparent-dhcp.html
index c34dd700..6c648c0d 100644
--- a/doc-src/tutorials/transparent-dhcp.html
+++ b/doc-src/tutorials/transparent-dhcp.html
@@ -4,10 +4,10 @@ This walkthrough illustrates how to set up transparent proxying with mitmproxy.
     The network setup is simple:  `internet <--> proxy vm <--> (virtual) internal network`.
     For the proxy machine, *eth0* represents the outgoing network. *eth1* is connected to the internal network that will be proxified, using a static ip (192.168.3.1).
     <hr>VirtualBox configuration:
-    <img src="@!urlTo('tutorials/transparent-dhcp/step1_vbox_eth0.png')!@"/><br><br>
-    <img src="@!urlTo('tutorials/transparent-dhcp/step1_vbox_eth1.png')!@"/>
+    <img class="img-responsive" src="@!urlTo('tutorials/transparent-dhcp/step1_vbox_eth0.png')!@"/><br><br>
+    <img class="img-responsive" src="@!urlTo('tutorials/transparent-dhcp/step1_vbox_eth1.png')!@"/>
     <br>Proxy VM:
-    <img src="@!urlTo('tutorials/transparent-dhcp/step1_proxy.png')!@"/>
+    <img class="img-responsive" src="@!urlTo('tutorials/transparent-dhcp/step1_proxy.png')!@"/>
     <hr>
 2.  **Configure DHCP and DNS**
     We use dnsmasq to provide DHCP and DNS in our internal network.
@@ -34,7 +34,7 @@ This walkthrough illustrates how to set up transparent proxying with mitmproxy.
         `sudo service dnsmasq restart`
         <hr>
         Your proxied machine's network settings should now look similar to this:
-        <img src="@!urlTo('tutorials/transparent-dhcp/step2_proxied_vm.png')!@"/>
+        <img class="img-responsive" src="@!urlTo('tutorials/transparent-dhcp/step2_proxied_vm.png')!@"/>
         <hr>
 
 3.  **Set up traffic redirection to mitmproxy**
author	Aldo Cortesi <aldo@nullcube.com>	2015-05-24 14:09:51 +1200
committer	Aldo Cortesi <aldo@nullcube.com>	2015-05-24 14:09:51 +1200
commit	2135bcec61cf346555f8fd1e24bbb9267d002502 (patch)
tree	c82c9de7cf76e2537e1f30c0fdaf751d0c2b00dd
parent	0a812656617be313c6648918f9b4c52a2ddb59c4 (diff)
download	mitmproxy-2135bcec61cf346555f8fd1e24bbb9267d002502.tar.gz mitmproxy-2135bcec61cf346555f8fd1e24bbb9267d002502.tar.bz2 mitmproxy-2135bcec61cf346555f8fd1e24bbb9267d002502.zip