Browse Source

update

exp-with-scrum
parent
commit
09b0af122a
Signed by: yogsototh GPG Key ID: 7B19A4C650D59646
  1. 18
      engine/dev.sh
  2. BIN
      src/posts/0020-cool-looking-org-mode/code.png
  3. BIN
      src/posts/0020-cool-looking-org-mode/img-with-caption.png
  4. 292
      src/posts/0020-cool-looking-org-mode/index.org
  5. BIN
      src/posts/0020-cool-looking-org-mode/text.png
  6. BIN
      src/posts/0020-cool-looking-org-mode/top.png

18
engine/dev.sh

@ -1,4 +1,20 @@
#!/usr/bin/env zsh
tee >(lorri watch) >(./engine/serve.sh) >(./engine/auto-build.sh) >(sleep 1 && open 'http://127.0.0.1:3000')
## colors for tput
# black=0
red=1
green=2
yellow=3
blue=4
# magenta=5
# cyan=6
# white=7
green() { printf "$(tput setaf $green)%s$(tput sgr0)" "$*" }
yellow() { printf "$(tput setaf $yellow)%s$(tput sgr0)" "$*" }
blue() { printf "$(tput setaf $blue)%s$(tput sgr0)" "$*" }
tee >(lorri watch | sed 's/^/[lorri] /' ) \
>(./engine/serve.sh | sed 's/^/[http] /') \
>(./engine/auto-build.sh | sed 's/^/[make] /') \
>(sleep 1 && open 'http://127.0.0.1:3000')

BIN
src/posts/0020-cool-looking-org-mode/code.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 175 KiB

After

Width:  |  Height:  |  Size: 150 KiB

BIN
src/posts/0020-cool-looking-org-mode/img-with-caption.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 139 KiB

After

Width:  |  Height:  |  Size: 278 KiB

292
src/posts/0020-cool-looking-org-mode/index.org

@ -24,11 +24,11 @@ how to achieve it.
First you need to install some dependencies.
1. Install nerdfonts[fn:nerdfonts]
2. Tell org-mode to use =variable-pitch-mode= (Non monospaced font)
2. Tell org-mode to use =variable-pitch-mode= (variable width font)
3. Use ~(setq org-hide-emphasis-markers t)~
4. Configure a lot of org-mode specific faces to still use a monospaced font.
Here are a few images of the result.
Here are some images of the result.
Notice one important factor of the feel is that I work on a mac with retina
display.
Often font rendering feel too bold by default.
@ -40,14 +40,6 @@ not look as slick as other ones, the usage is superior.
#+CAPTION: org-mode headers
#+NAME: fig:top
[[./top.png]]
#+ATTR_ORG: :width 560
#+ATTR_HTML: text
#+CAPTION: org-mode some text
#+NAME: fig:text
[[./text.png]]
#+ATTR_ORG: :width 560
#+ATTR_HTML: img-with-caption
#+CAPTION: org-mode some inline image
@ -61,8 +53,8 @@ not look as slick as other ones, the usage is superior.
[[./code.png]]
#+ATTR_ORG: :width 560
#+ATTR_HTML: Org mode with a light theme
#+CAPTION: Org mode with a light theme
#+ATTR_HTML: Org mode with a modified doom-solarized light theme (use a grey background)
#+CAPTION: Org mode with a modified doom-solarized light theme (use a grey background)
#+NAME: fig:nano-emacs
[[./y-org-mode.png]]
@ -70,7 +62,7 @@ The main trick is to change org-mode to use different font depending on the
kind of bloc.
I use two fonts variant which are an iA Writer clone fonts; iM Writing Nerd Font.
So first you need to install nerd-fonts[fn:nerdfonts].
First you need to install nerd-fonts[fn:nerdfonts].
You will get that =iMWritingDuoS Nerd Font=.
If you look at the code block; I support the case when the font is
not installed and fall back to Georgia or PT Serif.
@ -106,27 +98,29 @@ But you could easily use any color you like if you do not use doom.
`(org-level-7 ((t (,@headline ,@variable-tuple))))
`(org-level-8 ((t (,@headline ,@variable-tuple))))
`(org-document-title ((t (,@headline ,@variable-tuple))))
`(variable-pitch ((t ,@variable-tuple)))
`(fixed-pitch ((t ,@fixed-tuple)))
`(variable-pitch ((t ,@variable-tuple)))
`(fixed-pitch ((t ,@fixed-tuple)))
'(org-ellipsis ((t (:inherit fixed-pitch :foreground "gray40" :underline nil))))
'(org-block ((t (:inherit fixed-pitch))))
'(org-block ((t (:inherit fixed-pitch))))
'(org-block-begin-line ((t (:inherit fixed-pitch))))
'(org-block-end-line ((t (:inherit fixed-pitch))))
'(org-src ((t (:inherit fixed-pitch))))
'(org-properties ((t (:inherit fixed-pitch))))
'(org-code ((t (:inherit (shadow fixed-pitch)))))
'(org-date ((t (:inherit (shadow fixed-pitch)))))
'(org-document-info ((t (:inherit (shadow fixed-pitch)))))
'(org-block-end-line ((t (:inherit fixed-pitch))))
'(org-src ((t (:inherit fixed-pitch))))
'(org-properties ((t (:inherit fixed-pitch))))
'(org-code ((t (:inherit (shadow fixed-pitch)))))
'(org-date ((t (:inherit (shadow fixed-pitch)))))
'(org-document-info ((t (:inherit (shadow fixed-pitch)))))
'(org-document-info-keyword ((t (:inherit (shadow fixed-pitch)))))
'(org-drawer ((t (:inherit (shadow fixed-pitch)))))
'(org-indent ((t (:inherit (org-hide fixed-pitch)))))
`(org-link ((t (:inherit fixed-pitch :foreground ,(doom-color 'blue) :underline t))))
'(org-meta-line ((t (:inherit (font-lock-comment-face fixed-pitch)))))
'(org-property-value ((t (:inherit fixed-pitch))) t)
'(org-special-keyword ((t (:inherit (font-lock-comment-face fixed-pitch)))))
'(org-table ((t (:inherit fixed-pitch))))
'(org-tag ((t (:inherit (shadow fixed-pitch) :weight bold :height 0.8))))
'(org-verbatim ((t (:inherit (shadow fixed-pitch)))))))
'(org-drawer ((t (:inherit (shadow fixed-pitch)))))
'(org-indent ((t (:inherit (org-hide fixed-pitch)))))
`(org-link ((t (:inherit fixed-pitch :foreground ,(doom-color 'blue) :underline t))))
'(org-meta-line ((t (:inherit (font-lock-comment-face fixed-pitch)))))
'(org-property-value ((t (:inherit fixed-pitch))) t)
'(org-special-keyword ((t (:inherit (font-lock-comment-face fixed-pitch)))))
'(org-table ((t (:inherit fixed-pitch))))
'(org-tag ((t (:inherit (shadow fixed-pitch) :weight bold :height 0.8))))
'(org-verbatim ((t (:inherit (shadow fixed-pitch)))))))
#+end_src
[fn:nerdfonts] https://www.nerdfonts.com
@ -164,12 +158,9 @@ See
OK so...
I just tried to match the theme colors.
It was easy to create a theme with matching colors.
*But*, to make it really looks like nano; almost monochrome with a few accent
*But*, to make it really looks like nano; almost monochrome with two accent
colors; it would mean a lot more work than anyone could expect.
Every emacs mode need to be tweaked.
Most doom themes expect either a classical, many colors, or a totally
monochromatic, but not this generic idea of ; everything is monochromatic
with very few exceptions.
For most emacs mode you probably need to add a set of specific font faces.
This choice is also what makes nano looks so good too.
This is not just about the color, but about a lot more details than that.
Using the good colors only at the right place is difficult to achieve.
@ -190,9 +181,14 @@ So far, I like this new look and feel.
[fn:doom-emacs] https://github.com/hlissner/doom-emacs
[fn:nano-emacs] https://github.com/rougier/nano-emacs
** Bonus thin code font
** Bonuses
:PROPERTIES:
:CUSTOM_ID: bonuses
:END:
*** Thin Code fonts
:PROPERTIES:
:CUSTOM_ID: bonus-thin-code-font
:CUSTOM_ID: thin-code-fonts
:END:
After lot of try, I finally switched my default coding font to SauceCodePro
@ -204,3 +200,223 @@ And on a retina display it is really nice to use.
(setq doom-font (font-spec :family "SauceCodePro Nerd Font Mono" :size 12 :weight 'semi-light)
doom-variable-pitch-font (font-spec :family "iMWritingDuoS Nerd Font" :size 14))
#+end_src
*** An unfinished nano theme for doom
:PROPERTIES:
:CUSTOM_ID: an-unfinished-nano-theme-for-doom
:END:
Even though the result is not 100% satisfactory, you could start using my work.
Save this file into =~/.doom.d/themes/doom-nano-theme.el=:
#+begin_src lisp
;;; doom-nano-theme.el --- inspired by Nicolas Rougier nano-theme -*- lexical-binding: t; no-byte-compile: t; -*-
;;
;; Author: Yann Esposito <https://yannesposito.com>
;; Created: August 16, 2021
;; Version: 1.0.0
;; Keywords: custom themes, faces
;; Homepage: https://github.com/hlissner/emacs-doom-themes
;; Package-Requires: ((emacs "25.1") (cl-lib "0.5") (doom-themes "2.2.1"))
;;
;;; Commentary:
;;
;; Ported from nano-theme: https://github.com/rougier/nano-theme
;;
;;; Code:
(require 'doom-themes)
;;; Variables
(defgroup doom-plain-theme nil
"Options for the `doom-plain' theme."
:group 'doom-themes)
(defcustom doom-plain-padded-modeline doom-themes-padded-modeline
"If non-nil, adds a 4px padding to the mode-line.
Can be an integer to determine the exact padding."
:group 'doom-plain-theme
:type '(or integer boolean))
;;
;;; Theme definition
(def-doom-theme doom-nano
"Theme inspired by Nicolas Rougier nano-theme"
;; name default/256/16
((nano-color-foreground '("#37474F")) ;; Blue Grey / L800
(nano-color-background '("#FFFFFF")) ;; White
(nano-color-highlight '("#FAFAFA")) ;; Very Light Grey
(nano-color-critical '("#FF6F00")) ;; Amber / L900
(nano-color-salient '("#673AB7")) ;; Deep Purple / L500
(nano-color-strong '("#000000")) ;; Black
(nano-color-popout '("#FFAB91")) ;; Deep Orange / L200
(nano-color-subtle '("#ECEFF1")) ;; Blue Grey / L50
(nano-color-faded '("#B0BEC5")) ;; Blue Grey / L200
(bg nano-color-background)
(bg-alt nano-color-highlight)
(base0 '("#18282f"))
(base1 '("#24323a"))
(base2 '("#556066"))
(base3 '("#6f787d"))
(base4 '("#8a9296"))
(base5 '("#a6acaf"))
(base6 '("#e7e8e9"))
(base7 '("#f6f6f6"))
(base8 '("#fafafa"))
(fg nano-color-foreground)
(fg-alt nano-color-faded)
(grey fg)
(red fg)
(blue fg)
(dark-blue fg)
(orange fg)
(green fg)
(teal fg)
(yellow fg)
(magenta fg)
(violet fg)
(cyan fg)
(dark-cyan fg)
;; face categories -- required for all themes
(highlight nano-color-salient)
(vertical-bar base5)
(selection nano-color-highlight)
(builtin nano-color-salient)
(comments nano-color-faded)
(doc-comments nano-color-faded)
(constants nano-color-strong)
(functions nano-color-salient)
(keywords nano-color-strong)
(methods nano-color-salient)
(operators nano-color-strong)
(type nano-color-strong)
(strings base0)
(variables base0)
(numbers base0)
(region base4)
(error nano-color-critical)
(warning nano-color-popout)
(success nano-color-salient)
(vc-modified nano-color-salient)
(vc-added fg-alt)
(vc-deleted nano-color-critical)
;; custom categories
(-modeline-pad
(when doom-plain-padded-modeline
(if (integerp doom-plain-padded-modeline) doom-plain-padded-modeline 4)))
(modeline-bg (doom-darken bg-alt 0.15))
(modeline-bg-alt (doom-darken bg-alt 0.1))
(modeline-bg-inactive (doom-darken bg-alt 0.1))
(modeline-bg-inactive-alt bg-alt)
(modeline-fg fg)
(modeline-fg-alt (doom-darken modeline-bg-inactive 0.35)))
;;;; Base theme face overrides
((error :underline `(:style wave :color ,error))
(warning :underline `(:style wave :color ,warning))
((font-lock-constant-face &override) :slant 'italic)
((font-lock-comment-face &override) :slant 'italic)
((font-lock-function-name-face &override) :slant 'italic)
((font-lock-type-face &override) :slant 'italic)
;;(hl-line :background base8)
((line-number &override) :foreground base3)
((line-number-current-line &override) :foreground base2)
(mode-line
:background modeline-bg :foreground modeline-fg
:box (if -modeline-pad `(:line-width ,-modeline-pad :color ,modeline-bg)))
(mode-line-inactive
:background modeline-bg-inactive :foreground modeline-fg-alt
:box (if -modeline-pad `(:line-width ,-modeline-pad :color ,modeline-bg-inactive)))
(mode-line-emphasis :foreground highlight)
;;;; doom-modeline
(doom-modeline-bar :background modeline-bg)
(doom-modeline-bar-inactive :inherit 'doom-modeline-bar)
(doom-modeline-project-dir :foreground fg)
(doom-modeline-buffer-file :foreground fg)
(doom-modeline-buffer-modified :weight 'bold :foreground "#000000")
(doom-modeline-panel :inherit 'mode-line-highlight :background base3 :foreground fg)
;;;; ivy
(ivy-posframe :background bg-alt)
;;;; magit
((magit-diff-added-highlight &override) :foreground fg :background (doom-blend vc-added bg 0.3))
((magit-diff-removed &override) :foreground (doom-lighten fg 0.4) :background (doom-blend vc-deleted bg 0.1))
((magit-diff-removed-highlight &override) :foreground fg :background (doom-blend vc-deleted bg 0.22))
;;;; lsp-mode
(lsp-headerline-breadcrumb-symbols-face :foreground keywords :weight 'bold)
;;;; outline <built-in>
(outline-1 :slant 'italic :foreground fg-alt)
(outline-2 :inherit 'outline-1 :foreground base2)
(outline-3 :inherit 'outline-2)
(outline-4 :inherit 'outline-3)
(outline-5 :inherit 'outline-4)
(outline-6 :inherit 'outline-5)
(outline-7 :inherit 'outline-6)
(outline-8 :inherit 'outline-7)
(org-level-1 :inherit 'org-level-1 :foreground nano-color-strong)
(org-level-2 :inherit 'org-level-2 :foreground nano-color-strong)
(org-level-3 :inherit 'org-level-3 :foreground nano-color-strong)
(org-level-4 :inherit 'org-level-4 :foreground nano-color-strong)
(org-level-5 :inherit 'org-level-5 :foreground nano-color-strong)
(org-level-6 :inherit 'org-level-6 :foreground nano-color-strong)
(org-level-7 :inherit 'org-level-7 :foreground nano-color-strong)
(org-level-8 :inherit 'org-level-8 :foreground nano-color-strong)
(org-code :inherit 'org-code
:foreground nano-color-salient
:weight 'bold)
(org-verbatim :inherit 'org-verbatim
:foreground nano-color-salient
:weight 'bold)
(org-upcoming-deadline :inherit 'org-upcoming-deadline
:foreground nano-color-critical
:weight 'bold)
(org-upcoming-distant-deadline :inherit 'org-upcoming-distant-deadline
:foreground nano-color-salient)
(org-habit-overdue-face
:inherit 'org-habit-overdue-face
:background fg-alt)
(org-habit-overdue-future-face
:inherit 'org-habit-overdue-future-face
:background nano-color-subtle)
(org-habit-alert-face
:inherit 'org-habit-alert-face
:background nano-color-critical)
(org-habit-alert-future-face
:inherit 'org-habit-alert-future-face
:background nano-color-subtle)
(org-scheduled-today :inherit 'org-scheduled-today :foreground fg)
(org-scheduled-previously :inherit 'org-scheduled-previously :foreground fg)
;;;; org <built-in>
((org-block &override) :background bg-alt)
((org-block-begin-line &override) :foreground base5)
;;;; solaire-mode
(solaire-mode-line-face
:inherit 'mode-line
:background modeline-bg-alt
:box (if -modeline-pad `(:line-width ,-modeline-pad :color ,modeline-bg-alt)))
(solaire-mode-line-inactive-face
:inherit 'mode-line-inactive
:background modeline-bg-inactive-alt
:box (if -modeline-pad `(:line-width ,-modeline-pad :color ,modeline-bg-inactive-alt)))))
;;; doom-plain-theme.el ends here
#+end_src
You will probably need more work to achieve the colors you expect.
For that, using ~SPC-u C-x =~ will probably be useful.
It will show the font face under the cursor.
Best of luck.

BIN
src/posts/0020-cool-looking-org-mode/text.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 149 KiB

BIN
src/posts/0020-cool-looking-org-mode/top.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 70 KiB

After

Width:  |  Height:  |  Size: 79 KiB

Loading…
Cancel
Save