├── .gitignore ├── LICENSE ├── README.md └── obsidian-minimal-tweaks.css /.gitignore: -------------------------------------------------------------------------------- 1 | TODOs.md 2 | *-OLD.css 3 | *.svg -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2020 lucasrla 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | My opinionated tweaks to [Obsidian](https://obsidian.md)'s theme [Minimal (@kepano/obsidian-minimal)](https://github.com/kepano/obsidian-minimal). 2 | 3 | I'm using these [CSS snippets](https://help.obsidian.md/How+to/Add+custom+styles#Use+Themes+and+or+CSS+snippets) in Obsidian `1.0.3` with Minimal theme `6.1.9`. 4 | 5 | 6 | ## List of tweaks 7 | 8 | - Text font: "Helvetica Neue" as primary text font 9 | - Line height: increase it slightly (from 1.5 to 1.6) 10 | - Embeds: wider; no borders, just some padding and vertical space for the title 11 | - Highlights: alternative background color both in light and dark themes 12 | - Blockquotes: subtler left border, alternative text color, increased margins 13 | - External links: remove the SVG image () 14 | - Internal links: remove underline (to make them distinguishable from external links) 15 | - Horizontal rule (`
`): just three subtle dots, instead of a thick and wide line 16 | - Footnotes: more vertical space between items, more left space between footnote content and the backref link (↩︎) 17 | 18 | 19 | ## Setup 20 | 21 | 1. Copy the `obsidian-minimal-tweaks.css` file to `VAULT_DIRECTORY/.obsidian/snippets/` 22 | 2. Open the Obsidian app 23 | 3. Navigate to `Settings` > `Appearance` > `CSS snippets` and toggle `obsidian-minimal-tweaks` to ON 24 | 25 | If there is no `obsidian-minimal-tweaks` in step #3, you might need to click on the "refresh" button to `Reload snippets`. 26 | 27 | 28 | ## More resources 29 | 30 | If you're looking for more CSS snippets, check out this [Obsidian forum thread](https://forum.obsidian.md/t/meta-post-common-css-hacks) and also [@kmaasrud/awesome-obsidian](https://github.com/kmaasrud/awesome-obsidian). Thanks, Obsidian community! -------------------------------------------------------------------------------- /obsidian-minimal-tweaks.css: -------------------------------------------------------------------------------- 1 | /* text font */ 2 | /* --------- */ 3 | 4 | /* It seems possible to set the text font within either `Appeareance > Font` or `Minimal Theme Settings` > `Typography`, but I'd rather do it here together with my other tweaks */ 5 | body.minimal-theme .markdown-preview-view, 6 | body.minimal-theme .markdown-source-view { 7 | --font-text: "Helvetica Neue", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Inter", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Microsoft YaHei Light", sans-serif !important; 8 | } 9 | 10 | 11 | /* line height */ 12 | /* ----------- */ 13 | 14 | /* Apparently it is possible to set the text font within `Minimal Theme Settings` > `Typography`, but I'd rather do it here together with my other tweaks */ 15 | body.minimal-theme .markdown-preview-view, 16 | body.minimal-theme .markdown-source-view { 17 | --line-height: 1.6 !important; 18 | } 19 | 20 | 21 | /* embeds */ 22 | /* ------ */ 23 | 24 | .markdown-preview-view .markdown-embed, 25 | .markdown-preview-view .file-embed { 26 | padding: 1em 0; 27 | border: 0; 28 | } 29 | 30 | .file-embed-link, .markdown-embed-link { 31 | top: 1em; 32 | } 33 | 34 | .markdown-embed-title { 35 | margin-bottom: 1em; 36 | } 37 | 38 | .markdown-reading-view .markdown-preview-view:not(.is-readable-line-width)>.markdown-preview-sizer { 39 | max-width: 95%; 40 | } 41 | 42 | 43 | /* text highlights */ 44 | /* --------------- */ 45 | 46 | .theme-dark { 47 | --text-highlight-bg: #404000; 48 | } 49 | 50 | .theme-light { 51 | --text-highlight-bg: #fcf8e3; 52 | } 53 | 54 | 55 | /* blockquotes */ 56 | /* ----------- */ 57 | 58 | .theme-dark, .theme-light { 59 | --blockquote-color: --text-normal; 60 | } 61 | 62 | .markdown-source-view blockquote, 63 | .markdown-preview-view blockquote { 64 | border-left: 1px solid var(--background-modifier-border); 65 | padding: 0 0 0 1em; 66 | } 67 | 68 | .markdown-preview-view blockquote > p:first-child { 69 | margin-top: 1em; 70 | } 71 | 72 | .markdown-preview-view blockquote > p:last-child { 73 | margin-bottom: 1.5em; 74 | } 75 | 76 | 77 | /* links */ 78 | /* ----- */ 79 | 80 | .internal-link { 81 | text-decoration: none; 82 | } 83 | 84 | .external-link { 85 | background: none; 86 | padding-right: 0; 87 | } 88 | 89 | 90 | /* hr, horizontal rules */ 91 | /* -------------------- */ 92 | /* inspired by https://codepen.io/andrewmowe/details/gwbNrK */ 93 | 94 | .markdown-source-view hr, 95 | .markdown-preview-view hr { 96 | border: 0; 97 | text-align: center; 98 | } 99 | 100 | .markdown-source-view hr:before, 101 | .markdown-preview-view hr:before { 102 | content: "· · ·"; 103 | color: var(--text-muted); 104 | } 105 | 106 | 107 | /* footnotes */ 108 | /* --------- */ 109 | 110 | .markdown-preview-view section.footnotes ol li { 111 | margin-bottom: 0.5em; 112 | } 113 | 114 | .markdown-preview-view section.footnotes a.footnote-backref { 115 | margin-left: 0.25em; 116 | } --------------------------------------------------------------------------------