diff doc/interpreter/octave.css @ 21986:9e992b9ffc5f

doc/interpreter/octave.css: improve HTML manual readability on small screens (patch #9031).
author Oliver Heimlich <oheim@posteo.de>
date Tue, 28 Jun 2016 11:10:12 +0200
parents 15517574276a
children 02216516bbfe
line wrap: on
line diff
--- a/doc/interpreter/octave.css	Mon Jun 27 16:27:07 2016 -0700
+++ b/doc/interpreter/octave.css	Tue Jun 28 11:10:12 2016 +0200
@@ -18,6 +18,7 @@
 <http://www.gnu.org/licenses/>.
 */
 
+/* Import web font Roboto Condensed, Font Library Version 2015-06-06 */
 @font-face { font-family: 'Roboto Condensed'; src: local('Roboto Condensed'),
 	url('https://fontlibrary.org/assets/fonts/roboto-condensed/71405335c70332d94afd24ae4f06c9b2/4b8b4b377e8cb358cf886d13c7bb287c/RobotoCondensedBold.ttf') format('truetype');
 	font-weight: bold; font-style: normal; }
@@ -30,37 +31,82 @@
 @font-face { font-family: 'Roboto Condensed'; src: local('Roboto Condensed'),
 	url('https://fontlibrary.org/assets/fonts/roboto-condensed/71405335c70332d94afd24ae4f06c9b2/b0b1845ecce8ab6a503971e808a8409c/RobotoCondensedRegular.ttf') format('truetype');
 	font-weight: normal; font-style: normal; }
+
+/* Import web font Fantasque Sans Mono, Font Library Version 2016-04-05 */
 @font-face { font-family: 'Fantasque Sans Mono'; src: local('Fantasque Sans Mono'),
-	url('https://fontlibrary.org/assets/fonts/fantasque-sans-mono/db52617ba875d08cbd8e080ca3d9f756/b145f0e884b2da8f1b112d26e7cefd3d/FantasqueSansMonoBold.ttf') format('truetype');
+	url('https://fontlibrary.org/assets/fonts/fantasque-sans-mono/b0cbb25e73a9f8354e96d89524f613e7/a46033d3a07d9385620dc83b7655203f/FantasqueSansMonoBold.ttf') format('truetype');
 	font-weight: bold; font-style: normal; }
 @font-face { font-family: 'Fantasque Sans Mono'; src: local('Fantasque Sans Mono'),
-	url('https://fontlibrary.org/assets/fonts/fantasque-sans-mono/db52617ba875d08cbd8e080ca3d9f756/49319cbd53210c32099631ac89b1e70a/FantasqueSansMonoBoldItalic.ttf') format('truetype');
+	url('https://fontlibrary.org/assets/fonts/fantasque-sans-mono/b0cbb25e73a9f8354e96d89524f613e7/b0683ef4c834908aa372ec78dea42349/FantasqueSansMonoBoldItalic.ttf') format('truetype');
 	font-weight: bold; font-style: italic; }
 @font-face { font-family: 'Fantasque Sans Mono'; src: local('Fantasque Sans Mono'),
-	url('https://fontlibrary.org/assets/fonts/fantasque-sans-mono/db52617ba875d08cbd8e080ca3d9f756/5c07fe59e84e4594ffa87ae1a72b130d/FantasqueSansMonoItalic.ttf') format('truetype');
+	url('https://fontlibrary.org/assets/fonts/fantasque-sans-mono/b0cbb25e73a9f8354e96d89524f613e7/b78d0a48e4443f797e8d45dcf97594f7/FantasqueSansMonoItalic.ttf') format('truetype');
 	font-weight: normal; font-style: italic; }
 @font-face { font-family: 'Fantasque Sans Mono'; src: local('Fantasque Sans Mono'),
-	url('https://fontlibrary.org/assets/fonts/fantasque-sans-mono/db52617ba875d08cbd8e080ca3d9f756/cc70dc22137e92aaef169e1de38a6ec7/FantasqueSansMonoRegular.ttf') format('truetype');
+	url('https://fontlibrary.org/assets/fonts/fantasque-sans-mono/b0cbb25e73a9f8354e96d89524f613e7/f3fdc4f0f26e4431f54e8b552d55480c/FantasqueSansMonoRegular.ttf') format('truetype');
 	font-weight: normal; font-style: normal; }
-body > * { max-width: 42em; }
-div.header { max-width: 100%; }
-hr { margin-left: 0; border: none; border-top: 3px double #657b83; }
-div.header, div.float-caption { color: #657b83; }
-ul, ol { max-width: 39.5em; padding-left: 2.5em; }
-div.example, div.display, div.indentedblock, div.smalldisplay, div.lisp, div.smallindentedblock, div.smallexample, div.smalllisp { max-width: 38.8em; margin-left: 3.2em; }
-blockquote { margin-left: 3.2em; margin-right: 3.2em; max-width: 35.6em; }
-body, span.roman { font-family: 'Roboto Condensed', sans-serif; }
-body { padding-left: 7.5em; padding-right: 7.5em; }
-h1, h2, h3, h4, h5, pre.menu-comment { font-family: 'Roboto Condensed', serif; text-align: left !important; }
-div.float table, img { margin-left: auto; margin-right: auto; }
-div.float table { width: 38em; }
-div.float table, div.float th { border-collapse: collapse; border-top: 1px solid black; border-bottom: 1px solid black; }
-div.float th, div.float td { padding: 0.5em; }
-dd > p:first-child { margin-top: 0; }
-a { color: #268bd2; }
-a:visited { color: #d33682; }
-code, kbd, samp, tt { font-family: 'Fantasque Sans Mono', monospace; padding: 0 0.1em; font-style: italic; }
-pre.example, pre.smallexample, pre.verbatim { font-family: 'Fantasque Sans Mono', monospace; }
-pre.example { background-color: #fdf6e3; color: #657b83; padding: 0.5em; }
+
+/* Use custom fonts */
+code, kbd, samp, tt, pre { font-family: 'Fantasque Sans Mono', monospace; }
+code, kbd, samp, tt { font-style: italic; padding: 0 0.1ex; /* slightly increase margin to surrounding text */ }
+body, .sansserif { font-family: 'Roboto Condensed', sans-serif; }
+h1, h2, h3, h4, h5, .menu-comment, .roman, .menu-preformatted { font-family: 'Roboto Condensed', serif; }
+
+/*
+Use colors from the solarized color theme (sparsely),
+the main text will remain in default colors for optimal readability (black on white).
+*/
+pre.example, .header, .float-caption, hr
+{
+  /* base00 ~ body text in light solarized theme */
+  color: #657b83;
+  border-color: #657b83;
+}
+pre.example
+{
+  /* base3 ~ background color in light solarized theme */
+  background-color: #fdf6e3;
+  padding: 0.5em;
+}
+a { color: #268bd2; /* blue */ }
+a:visited { color: #d33682; /* magenta */ }
+
+/* Center floating tables and images */
+.float table, .float img, .float object { margin-left: auto; margin-right: auto; }
+
+/* Decrease table width, but not on small screens */
+.float table { max-width: 38em; }
+
+/* Use horizontal lines: above/below tables and after table headers (Chicago Style) */
+.float table, .float th { border-collapse: collapse; border-top: 1px solid black; border-bottom: 1px solid black; }
+.float th, .float td { padding: 0.5em; }
+
+/* Use horizontal ruler with double lines */
+hr { border-width: 0; border-top-width: 3px; border-style: double; }
+
+/* Smaller gap between subsequent @group blocks */
 .example { margin-bottom: 1em; }
 .example + .example { margin-top: -0.5em }
+
+/* Smaller gap between definition and its description */
+dd > p:first-child { margin-top: 0.5em; }
+
+/* Limit maximum body width such that text is easier to read */
+body { max-width: 42em; margin-left: 0.5em; margin-right: 0.5em; }
+
+/* On small screens don't indent the code examples to prevent overflow */
+div.example { margin-left: auto; max-width: 38.8em; }
+
+/*
+Use left margin such that text is easier to read,
+but don't sacrifice space on small screens.
+*/
+@media screen and (min-width: 43em)
+{
+  /* Smooth transition for screens between 43em and 57em */
+  body { margin-left: auto; margin-right: auto; }
+  @media (min-width: 57em)
+  {
+    body { margin-left: 7.5em; }
+  }
+}