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