Three styling suggestions

[jonkri]

Thanks for a great library! :muscle:

Without knowing anything about why the CSS code has been written the way it is, I have three CSS-related suggestions. :slightly_smiling_face:

1. Use font stacking to fall back to sans-serif when Arial is not available (something like font-family: Arial, sans-serif;). Perhaps Bootstrap's font stack could be an idea?
2. Respect the default font size (and avoid setting a relatively/unconventionally small font size). Perhaps we can simply use 100%/1em as a starting point and use relative font sizing.
3. Don't set the list-style-type property square. Discs are more conventionally for unordered lists.

[Perangelot]

Thanks for your suggestion! I fear this repo is not maintained anymore. Do you happen to have a .css file flying around you could post here?

[jonkri]

Thanks for your suggestion! I fear this repo is not maintained anymore. Do you happen to have a .css file flying around you could post here?

Sorry, I don't. (I don't use this package anymore.)

[sgpthomas]

What do you use instead?

[mclearc]

@Perangelot It isn't hard to make your own. You can just modify the default style like so...

  ;; Org HTML Styling
  (defconst cpm-org-msg-style
    (let* ((font-family '(font-family . "font-family: \"Helvetica\", \"Arial\", sans-serif"))
           (font-size '(font-size . "12pt"))
           (font `(,font-family ,font-size))
           (line-height '(line-height . "1.5"))
           (bold '(font-weight . "bold"))
           (theme-color "#0071c5")
           (color `(color . ,theme-color))
           (table `(,@font (margin-top . "0px")))
           (ftl-number `(,@font ,color ,bold (text-align . "left")))
           (inline-modes '(asl c c++ conf cpp csv diff ditaa emacs-lisp
                               fundamental ini json makefile man org plantuml
                               python sh xml))
           (inline-src `((color . ,(face-foreground 'default))
                         (background-color . ,(face-background 'default))))
           (code-src
            (mapcar (lambda (mode)
                      `(code ,(intern (concat "src src-" (symbol-name mode)))
                             ,inline-src))
                    inline-modes))
           (base-quote '((padding-left . "5px") (margin-left . "10px")
                         (margin-top . "10px") (margin-bottom . "0")
                         (font-style . "italic") (background . "#f9f9f9")))
           (quote-palette '("#324e72" "#6a3a4c" "#7a4900" "#ff34ff"
                            "#ff4a46" "#008941" "#006fa6" "#a30059"
                            "#ffdbe5" "#000000" "#0000a6" "#63ffac"))
           (quotes
            (mapcar (lambda (x)
                      (let ((c (nth x quote-palette)))
                        `(blockquote ,(intern (format "quote%d" (1+ x)))
                                     (,@base-quote
                                      (color . ,c)
                                      (border-left . ,(concat "3px solid "
                                                              (org-msg-lighten c)))))))
                    (number-sequence 0 (1- (length quote-palette))))))
      `((del nil (,@font (color . "grey") (border-left . "none")
                         (text-decoration . "line-through") (margin-bottom . "0px")
                         (margin-top . "10px") (line-height . "11pt")))
        (a nil (,color))
        (a reply-header ((color . "black") (text-decoration . "none")))
        (div reply-header ((padding . "3.0pt 0in 0in 0in")
                           (border-top . "solid #e1e1e1 1.0pt")
                           (margin-bottom . "20px")))
        (span underline ((text-decoration . "underline")))
        (li nil (,@font ,line-height (margin-bottom . "0px")
                        (margin-top . "2px")))
        (nil org-ul ((list-style-type . "disc")))
        (nil org-ol (,@font ,line-height (margin-bottom . "0px")
                            (margin-top . "0px") (margin-left . "30px")
                            (padding-top . "0px") (padding-left . "5px")))
        (nil signature (,@font (margin-bottom . "20px")))
        (blockquote quote0 ,(append base-quote '((border-left . "3px solid #ccc"))))
        ,@quotes
        (code nil (,font-size (font-family . "monospace") (background . "#f9f9f9")))
        ,@code-src
        (nil linenr ((padding-right . "1em")
                     (color . "black")
                     (background-color . "#aaaaaa")))
        (pre nil ((line-height . "12pt")
                  ,@inline-src
                  (margin . "0px")
                  (font-size . "9pt")
                  (font-family . "monospace")))
        (div org-src-container ((margin-top . "10px")))
        (nil figure-number ,ftl-number)
        (nil table-number)
        (caption nil ((text-align . "left")
                      (background . ,theme-color)
                      (color . "white")
                      ,bold))
        (nil t-above ((caption-side . "top")))
        (nil t-bottom ((caption-side . "bottom")))
        (nil listing-number ,ftl-number)
        (nil figure ,ftl-number)
        (nil org-src-name ,ftl-number)

        (table nil (,@table ,line-height (border-collapse . "collapse")))
        (th nil ((border . "1px solid white")
                 (background-color . ,theme-color)
                 (color . "white")
                 (padding-left . "10px") (padding-right . "10px")))
        (td nil (,@table (padding-left . "10px") (padding-right . "10px")
                         (background-color . "#f9f9f9") (border . "1px solid white")))
        (td org-left ((text-align . "left")))
        (td org-right ((text-align . "right")))
        (td org-center ((text-align . "center")))

        (div outline-text-4 ((margin-left . "15px")))
        (div outline-4 ((margin-left . "10px")))
        (h4 nil ((margin-bottom . "0px") (font-size . "12pt")
                 (text-decoration . "underline") ,font-family))
        (h3 nil ((margin-bottom . "0px") ,color (font-size . "12pt")
                 ,font-family))
        (h2 nil ((margin-top . "20px") (margin-bottom . "20px")
                 ,color (font-size . "13pt") ,font-family))
        (h1 nil ((margin-top . "20px")
                 (margin-bottom . "20px") ,color (font-size . "16pt")
                 ,font-family))
        (p nil ((text-decoration . "none") (margin-bottom . "0px")
                (margin-top . "10px") (line-height . "1.25") (padding-bottom . "5px") ,font-size
                ,font-family))
        (div nil (,@font (line-height . "1.25"))))))
  (setq org-msg-enforce-css cpm-org-msg-style)

[jonkri]

What do you use instead?

I never found a satisfying solution for e-mail in Emacs, I'm afraid, so I'm back to a regular e-mail client.