[PATCH]

[TEC <tecosaur@gmail.com>]

[-- Attachment #1: Type: text/plain, Size: 615 bytes --]

Hi All,

This is just some tweaks to the styling in ox-html that I think may
appeal (and prevent ridiculously long lines on non-small displays, which
are an issue for legibility).

I also took the opportunity to remove the (obsolete) CDATA strings and
make the CSS more consistently formatted. If you don't want this to
get its own commit, please just squash it.

Style changes:
- Restrict max content width, and centre
- tweak styling of source code blocks

I took some screenshots (1440p monitor, 120% zoom, Firefox).
Current: https://0x0.st/-iW9.png
This patch: https://0x0.st/-iWp.png

All the best,

Timothy.


[-- Warning: decoded text below may be mangled, UTF-8 assumed --]
[-- Attachment #2: 0001-ox-html.el-remove-CDATA-strings.patch --]
[-- Type: text/x-patch, Size: 2679 bytes --]

From 635bd77cd7a2dc55cc0705c5bbf2e11091bfbaf3 Mon Sep 17 00:00:00 2001
From: TEC <tec@tecosaur.com>
Date: Wed, 20 Jan 2021 16:37:29 +0800
Subject: [PATCH 1/5] ox-html.el: remove CDATA strings

* lisp/ox-html.el (org-html-scripts, org-html-style-default,
org-html-infojs-template): remove CDATA strings, as they are now
considered obsolete --- see
https://developer.mozilla.org/en-US/docs/Web/API/CDATASection#specifications
---
 lisp/ox-html.el | 8 --------
 1 file changed, 8 deletions(-)

diff --git a/lisp/ox-html.el b/lisp/ox-html.el
index 03145e35c..0cf3425df 100644
--- a/lisp/ox-html.el
+++ b/lisp/ox-html.el
@@ -234,7 +234,6 @@ property on the headline itself.")
 (defconst org-html-scripts
   "<script type=\"text/javascript\">
 // @license magnet:?xt=urn:btih:e95b018ef3580986a04669f1b5879592219e2a7a&dn=public-domain.txt Public Domain
-<!--/*--><![CDATA[/*><!--*/
      function CodeHighlightOn(elem, id)
      {
        var target = document.getElementById(id);
@@ -251,14 +250,12 @@ property on the headline itself.")
          target.classList.remove(\"code-highlighted\");
        }
      }
-    /*]]>*///-->
 // @license-end
 </script>"
   "Basic JavaScript that is needed by HTML files produced by Org mode.")
 
 (defconst org-html-style-default
   "<style type=\"text/css\">
- <!--/*--><![CDATA[/*><!--*/
   .title  { text-align: center;
              margin-bottom: .2em; }
   .subtitle { text-align: center;
@@ -439,7 +436,6 @@ property on the headline itself.")
   .org-info-js_search-highlight
     { background-color: #ffff00; color: #000000; font-weight: bold; }
   .org-svg { width: 90%; }
-  /*]]>*/-->
 </style>"
   "The default style specification for exported HTML files.
 You can use `org-html-head' and `org-html-head-extra' to add to
@@ -515,10 +511,8 @@ means to use the maximum value consistent with other options."
 
 <script type=\"text/javascript\">
 // @license magnet:?xt=urn:btih:1f739d935676111cfff4b4693e3816e664797050&amp;dn=gpl-3.0.txt GPL-v3-or-Later
-<!--/*--><![CDATA[/*><!--*/
 %MANAGER_OPTIONS
 org_html_manager.setup();  // activate after the parameters are set
-/*]]>*///-->
 // @license-end
 </script>"
   "The template for the export style additions when org-info.js is used.
@@ -1448,13 +1442,11 @@ done, timestamp, timestamp-kwd, tag, target.
 For example, a valid value would be:
 
    <style type=\"text/css\">
-    /*<![CDATA[*/
       p { font-weight: normal; color: gray; }
       h1 { color: black; }
       .title { text-align: center; }
       .todo, .timestamp-kwd { color: red; }
       .done { color: green; }
-    /*]]>*/
    </style>
 
 If you want to refer to an external style, use something like
-- 
2.29.2


[-- Warning: decoded text below may be mangled, UTF-8 assumed --]
[-- Attachment #3: 0002-ox-html.el-limit-maximum-content-width-and-center.patch --]
[-- Type: text/x-patch, Size: 895 bytes --]

From 5bef340093102936efe831f85fabdb589070ce43 Mon Sep 17 00:00:00 2001
From: TEC <tec@tecosaur.com>
Date: Wed, 20 Jan 2021 16:45:20 +0800
Subject: [PATCH 2/5] ox-html.el: limit maximum content width and center

* lisp/ox-html.el (org-html-style-default): To improve the appearance
and legibility on larger screens:
 1. Limit the content width to the upper end of advised line width, ~140
 characters.
 2. Centre the content.
---
 lisp/ox-html.el | 1 +
 1 file changed, 1 insertion(+)

diff --git a/lisp/ox-html.el b/lisp/ox-html.el
index 0cf3425df..9bbfad678 100644
--- a/lisp/ox-html.el
+++ b/lisp/ox-html.el
@@ -256,6 +256,7 @@ property on the headline itself.")
 
 (defconst org-html-style-default
   "<style type=\"text/css\">
+  #content { max-width: 60em; margin: auto; }
   .title  { text-align: center;
              margin-bottom: .2em; }
   .subtitle { text-align: center;
-- 
2.29.2


[-- Warning: decoded text below may be mangled, UTF-8 assumed --]
[-- Attachment #4: 0003-ox-html.el-format-CSS-more-consistently.patch --]
[-- Type: text/x-patch, Size: 2278 bytes --]

From 2c0f648ae87e789f21c24b645b2049f05d084799 Mon Sep 17 00:00:00 2001
From: TEC <tec@tecosaur.com>
Date: Wed, 20 Jan 2021 17:58:38 +0800
Subject: [PATCH 3/5] ox-html.el: format CSS more consistently

* lisp/ox-html.el (org-html-style-default): Format CSS declarations more
consistently.
---
 lisp/ox-html.el | 26 +++++++++-----------------
 1 file changed, 9 insertions(+), 17 deletions(-)

diff --git a/lisp/ox-html.el b/lisp/ox-html.el
index 9bbfad678..14f023e87 100644
--- a/lisp/ox-html.el
+++ b/lisp/ox-html.el
@@ -257,8 +257,8 @@ property on the headline itself.")
 (defconst org-html-style-default
   "<style type=\"text/css\">
   #content { max-width: 60em; margin: auto; }
-  .title  { text-align: center;
-             margin-bottom: .2em; }
+  .title { text-align: center;
+           margin-bottom: .2em; }
   .subtitle { text-align: center;
               font-size: medium;
               font-weight: bold;
@@ -282,13 +282,11 @@ property on the headline itself.")
     padding: 8pt;
     font-family: monospace;
     overflow: auto;
-    margin: 1.2em;
-  }
+    margin: 1.2em; }
   pre.src {
     position: relative;
     overflow: auto;
-    padding-top: 1.2em;
-  }
+    padding-top: 1.2em; }
   pre.src:before {
     display: none;
     position: absolute;
@@ -296,8 +294,7 @@ property on the headline itself.")
     top: -10px;
     right: 10px;
     padding: 3px;
-    border: 1px solid black;
-  }
+    border: 1px solid black; }
   pre.src:hover:before { display: inline; margin-top: 14px;}
   /* Languages per Org manual */
   pre.src-asymptote:before { content: 'Asymptote'; }
@@ -410,22 +407,17 @@ property on the headline itself.")
   .equation-container {
     display: table;
     text-align: center;
-    width: 100%;
-  }
-  .equation {
-    vertical-align: middle;
-  }
+    width: 100%; }
+  .equation { vertical-align: middle; }
   .equation-label {
     display: table-cell;
     text-align: right;
-    vertical-align: middle;
-  }
+    vertical-align: middle; }
   .inlinetask {
     padding: 10px;
     border: 2px solid gray;
     margin: 10px;
-    background: #ffffcc;
-  }
+    background: #ffffcc; }
   #org-div-home-and-up
    { text-align: right; font-size: 70%; white-space: nowrap; }
   textarea { overflow-x: auto; }
-- 
2.29.2


[-- Warning: decoded text below may be mangled, UTF-8 assumed --]
[-- Attachment #5: 0004-ox-html.el-tweak-styling-of-src-blocks.patch --]
[-- Type: text/x-patch, Size: 1617 bytes --]

From c341a278291be3c6a4fcca77fede476a04417a69 Mon Sep 17 00:00:00 2001
From: TEC <tec@tecosaur.com>
Date: Wed, 20 Jan 2021 18:17:06 +0800
Subject: [PATCH 4/5] ox-html.el: tweak styling of src blocks

* lisp/ox-html.el (org-html-style-default): Apply the following changes
to the styling of src blocks:
- Remove box shadow.
- Lighten border.
- Add very light grey background colour.
- Make lang label (visible on hover) less obtrusive by removing border.
---
 lisp/ox-html.el | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/lisp/ox-html.el b/lisp/ox-html.el
index 14f023e87..e83648726 100644
--- a/lisp/ox-html.el
+++ b/lisp/ox-html.el
@@ -277,24 +277,24 @@ property on the headline itself.")
   #postamble p, #preamble p { font-size: 90%; margin: .2em; }
   p.verse { margin-left: 3%; }
   pre {
-    border: 1px solid #ccc;
-    box-shadow: 3px 3px 3px #eee;
+    border: 1px solid #e6e6e6;
+    border-radius: 3px;
+    background-color: #f2f2f2;
     padding: 8pt;
     font-family: monospace;
     overflow: auto;
     margin: 1.2em; }
   pre.src {
     position: relative;
-    overflow: auto;
-    padding-top: 1.2em; }
+    overflow: auto; }
   pre.src:before {
     display: none;
     position: absolute;
-    background-color: white;
-    top: -10px;
-    right: 10px;
+    top: -8px;
+    right: 12px;
     padding: 3px;
-    border: 1px solid black; }
+    color: #555;
+    background-color: #f2f2f299; }
   pre.src:hover:before { display: inline; margin-top: 14px;}
   /* Languages per Org manual */
   pre.src-asymptote:before { content: 'Asymptote'; }
-- 
2.29.2


[-- Warning: decoded text below may be mangled, UTF-8 assumed --]
[-- Attachment #6: 0005-ox-html.el-add-lang-label-to-authinfo-src-blocks.patch --]
[-- Type: text/x-patch, Size: 931 bytes --]

From b8eb175c709ad9cff259b4326d8c9a344a4381ba Mon Sep 17 00:00:00 2001
From: TEC <tec@tecosaur.com>
Date: Wed, 20 Jan 2021 18:22:58 +0800
Subject: [PATCH 5/5] ox-html.el: add lang label to authinfo src blocks

* lisp/ox-html.el (org-html-style-default): `authinfo-mode' is defined
in Emacs 27. As such, in the CSS add an "Authinfo" lang label to
authinfo src blocks.
---
 lisp/ox-html.el | 1 +
 1 file changed, 1 insertion(+)

diff --git a/lisp/ox-html.el b/lisp/ox-html.el
index e83648726..e5e82a5d8 100644
--- a/lisp/ox-html.el
+++ b/lisp/ox-html.el
@@ -299,6 +299,7 @@ property on the headline itself.")
   /* Languages per Org manual */
   pre.src-asymptote:before { content: 'Asymptote'; }
   pre.src-awk:before { content: 'Awk'; }
+  pre.src-authinfo::before { content: 'Authinfo'; }
   pre.src-C:before { content: 'C'; }
   /* pre.src-C++ doesn't work in CSS */
   pre.src-clojure:before { content: 'Clojure'; }
-- 
2.29.2