diff --git a/engine/dev.sh b/engine/dev.sh index 71bb4b5..4f6cd20 100755 --- a/engine/dev.sh +++ b/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') diff --git a/src/posts/0020-cool-looking-org-mode/code.png b/src/posts/0020-cool-looking-org-mode/code.png index 230d0ba..092fbab 100644 Binary files a/src/posts/0020-cool-looking-org-mode/code.png and b/src/posts/0020-cool-looking-org-mode/code.png differ diff --git a/src/posts/0020-cool-looking-org-mode/img-with-caption.png b/src/posts/0020-cool-looking-org-mode/img-with-caption.png index 19dc331..aaf5b48 100644 Binary files a/src/posts/0020-cool-looking-org-mode/img-with-caption.png and b/src/posts/0020-cool-looking-org-mode/img-with-caption.png differ diff --git a/src/posts/0020-cool-looking-org-mode/index.org b/src/posts/0020-cool-looking-org-mode/index.org index 71e3c8e..9c4bd68 100644 --- a/src/posts/0020-cool-looking-org-mode/index.org +++ b/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: bonus-thin-code-font +:CUSTOM_ID: bonuses +:END: + +*** Thin Code fonts +:PROPERTIES: +: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 +;; 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 + (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 + ((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. diff --git a/src/posts/0020-cool-looking-org-mode/text.png b/src/posts/0020-cool-looking-org-mode/text.png deleted file mode 100644 index 4347e43..0000000 Binary files a/src/posts/0020-cool-looking-org-mode/text.png and /dev/null differ diff --git a/src/posts/0020-cool-looking-org-mode/top.png b/src/posts/0020-cool-looking-org-mode/top.png index 8a63487..7851ed3 100644 Binary files a/src/posts/0020-cool-looking-org-mode/top.png and b/src/posts/0020-cool-looking-org-mode/top.png differ