yeet-log

My blog, using org-publish
git clone https://git.git.jamzattack.xyz/yeet-log
Log | Files | Refs

new-css.org (2780B)


      1 #+title: New CSS for the Yeet Log
      2 #+date: <2020-08-20 Thu>
      3 
      4 I've spent the last couple of hours sorting out a stylesheet for this
      5 blog.  It's loosely based on my Emacs theme, located in my "emacs.d"
      6 at [[https://git.jamzattack.xyz/emacs.d/file/lisp/themes/custom-theme.el.html][lisp/themes/custom-theme.el]].
      7 
      8 * Examples
      9 ** Headings
     10 
     11 The headings (html only goes up to =<h6>=) use the same colours as the
     12 =org-level-n= faces.  The variable [[help:org-html-toplevel-hlevel][org-html-toplevel-hlevel]]'s default
     13 value is =2=, which means that the top-level heading is actually =<h2>=.
     14 This allows to use a different colour from the title, so the html
     15 headings actually mimic the =org-level-(n+1)= faces.
     16 
     17 By default, org-mode only exports up to 3 headline levels.  I set
     18 [[help:org-export-headline-levels][org-export-headline-levels]] to =6= in order for the smaller headings to
     19 have the appropriate html tag:
     20 
     21 : (setq org-export-headline-levels 6)
     22 
     23 As of [2020-09-19 Sat], I've added extra asterisks before the
     24 headings, just like org.  Not sure if I'll keep it this way, it's kind
     25 of gaudy.
     26 
     27 ** Tables
     28 
     29 Tables, of course, are org-mode's signature blue:
     30 
     31 | css | Emacs face         | colour        |
     32 |-----+--------------------+---------------|
     33 | h1  | org-document-title | midnight blue |
     34 | h2  | org-level-1        | blue          |
     35 | h3  | org-level-2        | sienna        |
     36 | h4  | org-level-3        | purple        |
     37 | h5  | org-level-4        | firebrick     |
     38 | h6  | org-level-5        | forest green  |
     39 
     40 *** org-level-3, =h4=
     41 **** org-level-4, =h5=
     42 ***** org-level-5, =h6=
     43 ** Source Blocks
     44 
     45 In Emacs, I'm really not a fan of the "highlighted source blocks" fad
     46 -- I think it just looks messy and awkward.  When exported to html,
     47 however, I think it looks quite nice.
     48 
     49 #+begin_src emacs-lisp :exports both
     50   (defun celsius-to-fahrenheit (celc &optional insert)
     51     (interactive (list
     52                   (read-number "Celsius: ")
     53                   current-prefix-arg))
     54     (funcall (if insert
     55                  #'insert
     56                #'message)
     57              (format "%d°C = %d°F"
     58                      celc
     59                      (+ 32 (/ celc (/ 5.0 9.0))))))
     60 
     61   (celsius-to-fahrenheit 12)
     62 #+end_src
     63 
     64 #+RESULTS:
     65 : 12°C = 53°F
     66 
     67 ** Table of Contents
     68 
     69 I'll be honest -- I was at a loss for what to do with the TOC.  Emacs
     70 doesn't actually show a table of contents ([[info:org#Global and local cycling][org-shifttab]] makes it
     71 redundant), so I had to come up with an idea myself.  I decided to
     72 make it darker so that it isn't in the way -- this led to some
     73 frustration as I'm not very familiar with CSS, but I got it looking
     74 pretty nice in the end.
     75 
     76 * Screenshot
     77 
     78 Here is a screenshot to compare my Emacs theme with this page's
     79 stylesheet:
     80 
     81 [[file:img/css-screenshot.svg]]
     82