Adjusted web page for mobile use

6 years ago · 1c5d6ba9e0
4 changed files with 29 additions and 16 deletions
--- a/.gitignore
+++ b/.gitignore
@ -1,2 +1,3 @@
 .idea
 .Rhistory
+.vscode
--- a/index.html
+++ b/index.html
@ -3,14 +3,10 @@

 <head>
  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />
  <title>Comprehensive Python Cheatsheet</title>
  <link rel="icon" href="web/favicon.png">
-  <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
-  <script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
-  <script src="web/showdown.min.js"></script>
  <link rel="stylesheet" href="web/default.min.css">
-  <script src="web/highlight.min.js"></script>
-  <script src="web/script.js"></script>
  <meta name="twitter:card" content="summary">
  <meta name="twitter:title" content="Comprehensive Python Cheatsheet">
  <meta name="twitter:description" content="Exhaustive, simple, beautiful and concise. A truly pythonic cheat sheet about Python programming language.">
@ -163,5 +159,10 @@ pre.prettyprint {
  <br>
  <br>
  <br>
+  <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
+  <script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
+  <script src="web/showdown.min.js"></script>
+  <script src="web/highlight.min.js"></script>
+  <script src="web/script.js"></script>
 </body>
-</html>
+</html>
--- a/web/script.js
+++ b/web/script.js
@ -26,9 +26,10 @@ function removeOrigToc() {

 function insertLinks() {
  $('h2').each(function() {
-    aId = $(this).attr('id');
-    $(this).append('<a href="#'+aId+'" name="'+aId+'">#</a>');
-  });
+    aId = $(this).attr('id')
+    text = $(this).text()
+    $(this).html('<a href="#'+aId+'" name="'+aId+'">#</a>'+text)
+  })
 }

 function addToc() {
--- a/web/style.css
+++ b/web/style.css
@ -1,11 +1,8 @@

 /* Copyright 2013 Michael Bostock. All rights reserved. Do not copy. */

-@import url(//fonts.googleapis.com/css?family=PT+Serif|PT+Serif:b|PT+Serif:i|PT+Sans|PT+Sans:b);
+@import url(https://fonts.googleapis.com/css?family=PT+Serif|PT+Serif:b|PT+Serif:i|PT+Sans|PT+Sans:b);

-html {
-  min-width: 1040px;
-}

 .ocks-org body {
  background: #fcfcfa;
@ -56,9 +53,7 @@ h1, h2 {
 h2 a[name],
 h2 a[id] {
  color: #ccc;
-  right: 100%;
  padding: 0 .3em;
-  position: absolute;
 }

 header,
@ -143,7 +138,7 @@ textarea {
 body > pre {
  border-left: solid 2px #ccc;
  padding-left: 18px;
-  margin: 2em 0 2em -20px;
+  margin: 2em 0 2em 0;
 }

 .html .value,
@ -219,3 +214,18 @@ blockquote q:before,
 blockquote q:after {
  content: "";
 }
+
+@media only screen
+and (max-device-width : 1024px){
+  .ocks-org body {
+    margin: 1rem;
+  }
+
+  h1{
+    font-size: 3rem;
+  }
+  p, h1, img{
+    max-width: calc(100vw - 2em);
+    min-width: calc(100vw - 2em);
+  }
+}