From 78a0d2b76df29809709aef6301120b7d75698431 Mon Sep 17 00:00:00 2001 From: Fabrice Niessen <(concat "fniessen" at-sign "pirilampo.org")> Date: Sun, 12 Jun 2016 22:14:24 +0200 Subject: [PATCH] Put Geeplux's patch "Make ReadTheOrg responsive" in Literate Programming style --- styles/readtheorg/css/readtheorg.css | 101 +++++++++++++-------------- styles/readtheorg/js/readtheorg.js | 13 +++- styles/readtheorg/readtheorg.org | 67 +++++++++++++++++- 3 files changed, 126 insertions(+), 55 deletions(-) mode change 100755 => 100644 styles/readtheorg/css/readtheorg.css diff --git a/styles/readtheorg/css/readtheorg.css b/styles/readtheorg/css/readtheorg.css old mode 100755 new mode 100644 index 1eec741..e4b4386 --- a/styles/readtheorg/css/readtheorg.css +++ b/styles/readtheorg/css/readtheorg.css @@ -1,3 +1,4 @@ + @import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic|Roboto+Slab:400,700|Inconsolata:400,700); @import url(http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css); @@ -404,6 +405,53 @@ table tr:nth-child(2n) td{ transform:rotate(270deg); } +#toggle-sidebar, +#table-of-contents .close-sidebar { + display: none; +} + +@media screen and (max-width: 768px) { + #table-of-contents { + display: none; + width: 60%; + } + + #table-of-contents h2 a { + display: block; + } + + #table-of-contents:target { + display: block; + } + + #copyright, #postamble { + display: none; + } + + #toggle-sidebar { + background-color: #2980B9; + display: block; + margin-bottom: 1.6em; + padding: 0.6em; + text-align: center; + } + + #toggle-sidebar h2 { + color: white; + font-size: 100%; + line-height: 50px; + margin: 0; + padding: 0; + } + + #table-of-contents .close-sidebar { + color: rgba(255, 255, 255, 0.3); + display: inline-block; + margin: 0px 10px 0px 45px; + padding: 10px; + } +} + *{ -webkit-box-sizing:border-box; -moz-box-sizing:border-box; @@ -1034,55 +1082,4 @@ h2.footnotes{ /* padding: 10px 20px 10px 60px; */ padding: 9px 12px; margin-bottom: 24px; - font-family:"Roboto Slab","ff-tisa-web-pro","Georgia",Arial,sans-serif -} - - - - - - - -/******** responsive for sidebar *******/ - -#toggle-sidebar, -#table-of-contents .close-sidebar { - display: none; -} - -@media screen and (max-width: 768px) { - #table-of-contents { - display: none; - width: 60%; - } - - #table-of-contents h2 a { - display: block; - } - - #table-of-contents:target { - display: block; - } - - #copyright, #postamble { - display: none; - } - - #toggle-sidebar { - display: block; - background-color: #E0D6E9; - text-align: center; - padding: 0.6em; - margin-bottom: 0.6em; - } - #toggle-sidebar h2 { - margin: 0; - padding: 0; - } - - #table-of-contents .close-sidebar { - display: block; - } -} - -/******** End responsive for sidebar *******/ + font-family:"Roboto Slab","ff-tisa-web-pro","Georgia",Arial,sans-serif} diff --git a/styles/readtheorg/js/readtheorg.js b/styles/readtheorg/js/readtheorg.js index 5597814..8dae9d0 100644 --- a/styles/readtheorg/js/readtheorg.js +++ b/styles/readtheorg/js/readtheorg.js @@ -1,3 +1,4 @@ + $(function() { $('.note').before("

Note

"); $('.seealso').before("

See also

"); @@ -39,11 +40,19 @@ $( document ).ready(function() { // add sticky table headers $('table').stickyTableHeaders(); + // set the height of tableOfContents var $postamble = $('#postamble'); var $tableOfContents = $('#table-of-contents'); - // set the height of tableOfContents - $tableOfContents.height($tableOfContents.height() - $postamble.outerHeight()); + $tableOfContents.css({paddingBottom: $postamble.outerHeight()}); + // add TOC button + var toggleSidebar = $('

Table of Contents

'); + $('#content').prepend(toggleSidebar); + + // add close button when sidebar showed in mobile screen + var closeBtn = $('Close'); + var tocTitle = $('#table-of-contents').find('h2'); + tocTitle.append(closeBtn); }); window.SphinxRtdTheme = (function (jquery) { diff --git a/styles/readtheorg/readtheorg.org b/styles/readtheorg/readtheorg.org index 61dc100..ffba8f4 100644 --- a/styles/readtheorg/readtheorg.org +++ b/styles/readtheorg/readtheorg.org @@ -6,7 +6,7 @@ #+LANGUAGE: en #+OPTIONS: H:4 num:t toc:2 -#+SETUPFILE: ~/src/org-html-themes/setup/theme-readtheorg-local-abs.setup +#+SETUPFILE: ~/.dotfiles/org/theme-readtheorg-local-abs.setup # See http://pandoc.org/README.html for another organization of the sections @@ -538,6 +538,57 @@ table tr:nth-child(2n) td{ :header-args: :tangle css/readtheorg.css :END: +Responsive for sidebar: + +#+begin_src css +#toggle-sidebar, +#table-of-contents .close-sidebar { + display: none; +} + +@media screen and (max-width: 768px) { + #table-of-contents { + display: none; + width: 60%; + } + + #table-of-contents h2 a { + display: block; + } + + #table-of-contents:target { + display: block; + } + + #copyright, #postamble { + display: none; + } + + #toggle-sidebar { + background-color: #2980B9; + display: block; + margin-bottom: 1.6em; + padding: 0.6em; + text-align: center; + } + + #toggle-sidebar h2 { + color: white; + font-size: 100%; + line-height: 50px; + margin: 0; + padding: 0; + } + + #table-of-contents .close-sidebar { + color: rgba(255, 255, 255, 0.3); + display: inline-block; + margin: 0px 10px 0px 45px; + padding: 10px; + } +} +#+end_src + * CSS :PROPERTIES: :header-args: :tangle css/readtheorg.css @@ -1412,6 +1463,20 @@ $( document ).ready(function() { // add sticky table headers $('table').stickyTableHeaders(); + + // set the height of tableOfContents + var $postamble = $('#postamble'); + var $tableOfContents = $('#table-of-contents'); + $tableOfContents.css({paddingBottom: $postamble.outerHeight()}); + + // add TOC button + var toggleSidebar = $('

Table of Contents

'); + $('#content').prepend(toggleSidebar); + + // add close button when sidebar showed in mobile screen + var closeBtn = $('Close'); + var tocTitle = $('#table-of-contents').find('h2'); + tocTitle.append(closeBtn); }); window.SphinxRtdTheme = (function (jquery) {