├── icon.png ├── screenshot.png ├── et-book ├── et-book-bold-line-figures │ ├── et-book-bold-line-figures.eot │ ├── et-book-bold-line-figures.ttf │ └── et-book-bold-line-figures.woff ├── et-book-roman-line-figures │ ├── et-book-roman-line-figures.eot │ ├── et-book-roman-line-figures.ttf │ └── et-book-roman-line-figures.woff ├── et-book-roman-old-style-figures │ ├── et-book-roman-old-style-figures.eot │ ├── et-book-roman-old-style-figures.ttf │ └── et-book-roman-old-style-figures.woff ├── et-book-semi-bold-old-style-figures │ ├── et-book-semi-bold-old-style-figures.eot │ ├── et-book-semi-bold-old-style-figures.ttf │ └── et-book-semi-bold-old-style-figures.woff └── et-book-display-italic-old-style-figures │ ├── et-book-display-italic-old-style-figures.eot │ ├── et-book-display-italic-old-style-figures.ttf │ ├── et-book-display-italic-old-style-figures.woff │ └── et-book-display-italic-old-style-figures.svg ├── package.json ├── LICENSE ├── readme.md ├── main.css └── tufte.css /icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonesmelton/logseq-tufte-theme/HEAD/icon.png -------------------------------------------------------------------------------- /screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonesmelton/logseq-tufte-theme/HEAD/screenshot.png -------------------------------------------------------------------------------- /et-book/et-book-bold-line-figures/et-book-bold-line-figures.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonesmelton/logseq-tufte-theme/HEAD/et-book/et-book-bold-line-figures/et-book-bold-line-figures.eot -------------------------------------------------------------------------------- /et-book/et-book-bold-line-figures/et-book-bold-line-figures.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonesmelton/logseq-tufte-theme/HEAD/et-book/et-book-bold-line-figures/et-book-bold-line-figures.ttf -------------------------------------------------------------------------------- /et-book/et-book-bold-line-figures/et-book-bold-line-figures.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonesmelton/logseq-tufte-theme/HEAD/et-book/et-book-bold-line-figures/et-book-bold-line-figures.woff -------------------------------------------------------------------------------- /et-book/et-book-roman-line-figures/et-book-roman-line-figures.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonesmelton/logseq-tufte-theme/HEAD/et-book/et-book-roman-line-figures/et-book-roman-line-figures.eot -------------------------------------------------------------------------------- /et-book/et-book-roman-line-figures/et-book-roman-line-figures.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonesmelton/logseq-tufte-theme/HEAD/et-book/et-book-roman-line-figures/et-book-roman-line-figures.ttf -------------------------------------------------------------------------------- /et-book/et-book-roman-line-figures/et-book-roman-line-figures.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonesmelton/logseq-tufte-theme/HEAD/et-book/et-book-roman-line-figures/et-book-roman-line-figures.woff -------------------------------------------------------------------------------- /et-book/et-book-roman-old-style-figures/et-book-roman-old-style-figures.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonesmelton/logseq-tufte-theme/HEAD/et-book/et-book-roman-old-style-figures/et-book-roman-old-style-figures.eot -------------------------------------------------------------------------------- /et-book/et-book-roman-old-style-figures/et-book-roman-old-style-figures.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonesmelton/logseq-tufte-theme/HEAD/et-book/et-book-roman-old-style-figures/et-book-roman-old-style-figures.ttf -------------------------------------------------------------------------------- /et-book/et-book-roman-old-style-figures/et-book-roman-old-style-figures.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonesmelton/logseq-tufte-theme/HEAD/et-book/et-book-roman-old-style-figures/et-book-roman-old-style-figures.woff -------------------------------------------------------------------------------- /et-book/et-book-semi-bold-old-style-figures/et-book-semi-bold-old-style-figures.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonesmelton/logseq-tufte-theme/HEAD/et-book/et-book-semi-bold-old-style-figures/et-book-semi-bold-old-style-figures.eot -------------------------------------------------------------------------------- /et-book/et-book-semi-bold-old-style-figures/et-book-semi-bold-old-style-figures.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonesmelton/logseq-tufte-theme/HEAD/et-book/et-book-semi-bold-old-style-figures/et-book-semi-bold-old-style-figures.ttf -------------------------------------------------------------------------------- /et-book/et-book-semi-bold-old-style-figures/et-book-semi-bold-old-style-figures.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonesmelton/logseq-tufte-theme/HEAD/et-book/et-book-semi-bold-old-style-figures/et-book-semi-bold-old-style-figures.woff -------------------------------------------------------------------------------- /et-book/et-book-display-italic-old-style-figures/et-book-display-italic-old-style-figures.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonesmelton/logseq-tufte-theme/HEAD/et-book/et-book-display-italic-old-style-figures/et-book-display-italic-old-style-figures.eot -------------------------------------------------------------------------------- /et-book/et-book-display-italic-old-style-figures/et-book-display-italic-old-style-figures.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonesmelton/logseq-tufte-theme/HEAD/et-book/et-book-display-italic-old-style-figures/et-book-display-italic-old-style-figures.ttf -------------------------------------------------------------------------------- /et-book/et-book-display-italic-old-style-figures/et-book-display-italic-old-style-figures.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonesmelton/logseq-tufte-theme/HEAD/et-book/et-book-display-italic-old-style-figures/et-book-display-italic-old-style-figures.woff -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "tufte", 3 | "author": "jones melton", 4 | "version": "0.0.2", 5 | "description": "A port of tufte-css to logseq", 6 | "logseq": { 7 | "themes": [ 8 | { 9 | "name": "tufte", 10 | "url": "./main.css", 11 | "description": "edward tufte css", 12 | "mode": "light" 13 | } 14 | ], 15 | "id": "tufte", 16 | "icon": "./icon.png" 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2014 Dave Liepmann 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 | 23 | -------------------------------------------------------------------------------- /readme.md: -------------------------------------------------------------------------------- 1 | # Tufte theme 2 | A port of the wonderful [Tufte CSS](https://edwardtufte.github.io/tufte-css/) framework to logseq. 3 | 4 | Based on the layouts & typography of Edward's Tufte's influential books on displaying quantitative data. This approach focuses on careful use of spacing and font weight & style for communicating a hierarchy of information rather than colors or graphical delimiters. 5 | 6 | ![preview](./screenshot.png) 7 | 8 | Included is the beautiful et-book serif typeface from tufte-css which is used by default. There are non-technical reasons not to use Tufte's preferred sans serif, but by default this theme doesn't use sans at all. There is a reasonable set of sans fonts set to the `--sans` var if you want to switch. Monospace will be set in the wonderful [Cartograph CF](https://connary.com/cartograph.html) if you have it installed, otherwise MonoLisa or Fira Code or something farther down the stack. 9 | 10 | I kept as much of the CSS as seemed reasonable, but removed the styles for margin- and side- notes. They don't fit extremely well with logseq's display model, and wouldn't provide much or any benefit. I also removed the (rather nice) link underline alternative, because it is complex and electron's default underline clears descenders, so the main benefit is unnecessary. 11 | 12 | -------------------------------------------------------------------------------- /main.css: -------------------------------------------------------------------------------- 1 | @import url("./tufte.css"); 2 | 3 | :root { 4 | --ls-font-family: et-book, 5 | "Iowan Old Style", 6 | "Apple Garamond", 7 | Baskerville, 8 | "Times New Roman", 9 | "Droid Serif", 10 | Times, 11 | "Source Serif Pro", 12 | serif, 13 | "Apple Color Emoji", 14 | "Segoe UI Emoji", 15 | "Segoe UI Symbol"; 16 | 17 | --sans: -apple-system, 18 | BlinkMacSystemFont, 19 | "avenir next", 20 | avenir, 21 | "segoe ui", 22 | "helvetica neue", 23 | helvetica, 24 | Cantarell, 25 | Ubuntu, 26 | roboto, 27 | noto, 28 | arial, 29 | sans-serif; 30 | 31 | --ct-page-title-font-family: var(--ls-font-family); 32 | --ct-code-font-family: "Cartograph CF", 33 | "MonoLisa", 34 | "Fira Code", 35 | Menlo, 36 | Consolas, 37 | Monaco, 38 | "Liberation Mono", 39 | "Lucida Console", 40 | monospace; 41 | font-size: 18px; 42 | 43 | } 44 | 45 | .light-theme, .white-theme, html[data-theme=light] { 46 | --ls-primary-background-color: #fffff8; 47 | --ls-secondary-background-color: #fffaf0; 48 | --ls-ternary-background-color: #fffefa; 49 | --ls-quaternary-background-color: #fffefa; 50 | --ls-primary-text-color: #111; 51 | --ls-header-button-background: #111; 52 | --ls-link-ref-text-color: #111; 53 | --ls-link-text-color: #111; 54 | --ls-link-text-hover-color: #111; 55 | --ls-highlight-color-yellow: var(--ls-secondary-background-color); 56 | --ls-page-blockquote-bg-color: var(--ls-secondary-background-color); 57 | --ls-page-blockquote-border-color: #DC2626; 58 | --color-level-2: #fffefa; 59 | } 60 | 61 | code { 62 | font-family: var(--ct-code-font-family) !important; 63 | } 64 | 65 | pre { 66 | font-family: var(--ct-code-font-family) !important; 67 | } 68 | 69 | /* page link [[brackets]] */ 70 | span.text-gray-500.bracket { 71 | color: var(--ls-page-blockquote-border-color); 72 | opacity: 1; 73 | } 74 | 75 | /* page link #hashtags */ 76 | a.tag { 77 | font-variant: small-caps; 78 | font-weight: bold; 79 | } 80 | 81 | /* remove highlight from h1 */ 82 | h1.px-1.with-bg-color { 83 | background-color: var(--ls-primary-background-color) !important; 84 | } 85 | 86 | span.title.block { 87 | padding-bottom: 1rem; 88 | margin-bottom: 1rem; 89 | margin-left: 1rem; 90 | padding-left: 1rem; 91 | min-height: 3rem; 92 | width: 90%; 93 | } 94 | 95 | h1.page-title { 96 | font-style: italic; 97 | font-weight: bold; 98 | font-size: 3rem; 99 | } 100 | 101 | /* journal, graph, & all pages links */ 102 | nav a.item { 103 | font-weight: 800; 104 | font-size: 1rem; 105 | letter-spacing: 0.05rem; 106 | } 107 | 108 | /* page links in sidebar */ 109 | span.page-title { 110 | font-size: 1rem; 111 | } 112 | 113 | /* sidebar categories */ 114 | span.flex-1.ml-2 { 115 | font-size: 1.1rem !important; 116 | font-variant: small-caps; 117 | letter-spacing: 0.05rem; 118 | } 119 | 120 | /* plugin management modal */ 121 | div.desc.text-xs > p { 122 | font-size: 0.5rem; 123 | } 124 | 125 | /* removes horizontal rule from h1 and h2 */ 126 | .editor-inner.uniline-block:is(.h1,.h2), .ls-block :is(h1,h2) { 127 | border-bottom: 0; 128 | } 129 | 130 | /* prevents cutting descenders on page titles */ 131 | .ls-block { 132 | padding: 0.3rem 0; 133 | } 134 | -------------------------------------------------------------------------------- /tufte.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /* Import ET Book styles 4 | adapted from https://github.com/edwardtufte/et-book/blob/gh-pages/et-book.css */ 5 | 6 | @font-face { 7 | font-family: "et-book-title-figures"; 8 | src: url("./et-book/et-book-roman-line-figures/et-book-roman-line-figures.eot"); 9 | src: url("./et-book/et-book-roman-line-figures/et-book-roman-line-figures.eot?#iefix") format("embedded-opentype"), url("./et-book/et-book-roman-line-figures/et-book-roman-line-figures.woff") format("woff"), url("./et-book/et-book-roman-line-figures/et-book-roman-line-figures.ttf") format("truetype"), url("./et-book/et-book-roman-line-figures/et-book-roman-line-figures.svg#etbookromanosf") format("svg"); 10 | font-weight: normal; 11 | font-style: normal; 12 | font-display: swap; 13 | } 14 | 15 | @font-face { 16 | font-family: "et-book"; 17 | src: url("./et-book/et-book-display-italic-old-style-figures/et-book-display-italic-old-style-figures.eot"); 18 | src: url("./et-book/et-book-display-italic-old-style-figures/et-book-display-italic-old-style-figures.eot?#iefix") format("embedded-opentype"), url("./et-book/et-book-display-italic-old-style-figures/et-book-display-italic-old-style-figures.woff") format("woff"), url("./et-book/et-book-display-italic-old-style-figures/et-book-display-italic-old-style-figures.ttf") format("truetype"), url("./et-book/et-book-display-italic-old-style-figures/et-book-display-italic-old-style-figures.svg#etbookromanosf") format("svg"); 19 | font-weight: normal; 20 | font-style: italic; 21 | font-display: swap; 22 | 23 | } 24 | 25 | @font-face { 26 | font-family: "et-book"; 27 | src: url("./et-book/et-book-bold-line-figures/et-book-bold-line-figures.eot"); 28 | src: url("./et-book/et-book-bold-line-figures/et-book-bold-line-figures.eot?#iefix") format("embedded-opentype"), url("./et-book/et-book-bold-line-figures/et-book-bold-line-figures.woff") format("woff"), url("./et-book/et-book-bold-line-figures/et-book-bold-line-figures.ttf") format("truetype"), url("./et-book/et-book-bold-line-figures/et-book-bold-line-figures.svg#etbookromanosf") format("svg"); 29 | font-weight: bold; 30 | font-style: normal; 31 | font-display: swap; 32 | } 33 | 34 | @font-face { 35 | font-family: "et-book"; 36 | src: url("./et-book/et-book-roman-old-style-figures/et-book-roman-old-style-figures.eot"); 37 | src: url("./et-book/et-book-roman-old-style-figures/et-book-roman-old-style-figures.eot?#iefix") format("embedded-opentype"), url("./et-book/et-book-roman-old-style-figures/et-book-roman-old-style-figures.woff") format("woff"), url("./et-book/et-book-roman-old-style-figures/et-book-roman-old-style-figures.ttf") format("truetype"), url("./et-book/et-book-roman-old-style-figures/et-book-roman-old-style-figures.svg#etbookromanosf") format("svg"); 38 | font-weight: normal; 39 | font-style: normal; 40 | font-display: swap; 41 | } 42 | 43 | html { 44 | font-size: 15px; 45 | } 46 | 47 | /* Adds dark mode */ 48 | @media (prefers-color-scheme: dark) { 49 | body { 50 | background-color: #151515; 51 | color: #ddd; 52 | } 53 | } 54 | 55 | h1 { 56 | font-weight: 400; 57 | margin-top: 2rem; 58 | margin-bottom: 1rem; 59 | font-size: 2rem; 60 | line-height: 1; 61 | } 62 | 63 | h2 { 64 | font-style: italic; 65 | font-weight: 400; 66 | margin-top: 1.8rem; 67 | margin-bottom: 1rem; 68 | font-size: 1.8rem; 69 | line-height: 1; 70 | } 71 | 72 | h3 { 73 | font-style: italic; 74 | font-weight: 400; 75 | font-size: 1.4rem; 76 | margin-top: 1rem; 77 | margin-bottom: 1rem; 78 | line-height: 1; 79 | } 80 | 81 | hr { 82 | display: block; 83 | height: 1px; 84 | width: 55%; 85 | border: 0; 86 | border-top: 1px solid #ccc; 87 | margin: 1em 0; 88 | padding: 0; 89 | } 90 | 91 | p.subtitle { 92 | font-style: italic; 93 | margin-top: 1rem; 94 | margin-bottom: 1rem; 95 | font-size: 1.8rem; 96 | display: block; 97 | line-height: 1; 98 | } 99 | 100 | .numeral { 101 | font-family: et-book-roman-old-style; 102 | } 103 | 104 | .danger { 105 | color: red; 106 | } 107 | 108 | article { 109 | padding: 1rem 0rem; 110 | } 111 | 112 | section { 113 | padding-top: 1rem; 114 | padding-bottom: 1rem; 115 | } 116 | 117 | p, 118 | dl, 119 | ol, 120 | ul { 121 | font-size: 1.4rem; 122 | line-height: 2rem; 123 | } 124 | 125 | p { 126 | margin-top: 1.4rem; 127 | margin-bottom: 1.4rem; 128 | padding-right: 0; 129 | vertical-align: baseline; 130 | } 131 | 132 | blockquote { 133 | font-size: 1.2rem; 134 | font-style: italic; 135 | } 136 | 137 | blockquote p { 138 | width: 55%; 139 | margin-right: 40px; 140 | } 141 | 142 | dt:not(:first-child), 143 | li:not(:first-child) { 144 | margin-top: 0.25rem; 145 | } 146 | 147 | a:link::selection, 148 | a:link::-moz-selection { 149 | text-shadow: 0.03em 0 #b4d5fe, -0.03em 0 #b4d5fe, 0 0.03em #b4d5fe, 0 -0.03em #b4d5fe, 0.06em 0 #b4d5fe, -0.06em 0 #b4d5fe, 0.09em 0 #b4d5fe, -0.09em 0 #b4d5fe, 0.12em 0 #b4d5fe, -0.12em 0 #b4d5fe, 0.15em 0 #b4d5fe, -0.15em 0 #b4d5fe; 150 | background: #b4d5fe; 151 | } 152 | 153 | span.newthought { 154 | font-variant: small-caps; 155 | font-size: 1.2em; 156 | } 157 | 158 | @media (max-width: 760px) { 159 | body { 160 | width: 84%; 161 | padding-left: 8%; 162 | padding-right: 8%; 163 | } 164 | 165 | hr, 166 | section > p, 167 | section > footer, 168 | section > table { 169 | width: 100%; 170 | } 171 | 172 | pre > code { 173 | width: 97%; 174 | } 175 | 176 | section > dl, 177 | section > ol, 178 | section > ul { 179 | width: 90%; 180 | } 181 | 182 | figure { 183 | max-width: 90%; 184 | } 185 | 186 | figcaption, 187 | figure.fullwidth figcaption { 188 | margin-right: 0%; 189 | max-width: none; 190 | } 191 | 192 | blockquote { 193 | margin-left: 1.5em; 194 | margin-right: 0em; 195 | } 196 | 197 | blockquote p, 198 | blockquote footer { 199 | width: 100%; 200 | } 201 | 202 | label.margin-toggle:not(.sidenote-number) { 203 | display: inline; 204 | } 205 | 206 | .sidenote, 207 | .marginnote { 208 | display: none; 209 | } 210 | 211 | .margin-toggle:checked + .sidenote, 212 | .margin-toggle:checked + .marginnote { 213 | display: block; 214 | float: left; 215 | left: 1rem; 216 | clear: both; 217 | width: 95%; 218 | margin: 1rem 2.5%; 219 | vertical-align: baseline; 220 | position: relative; 221 | } 222 | 223 | label { 224 | cursor: pointer; 225 | } 226 | 227 | div.table-wrapper, 228 | table { 229 | width: 85%; 230 | } 231 | 232 | img { 233 | width: 100%; 234 | } 235 | } 236 | -------------------------------------------------------------------------------- /et-book/et-book-display-italic-old-style-figures/et-book-display-italic-old-style-figures.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 | 141 | 142 | 143 | 144 | 145 | 146 | 147 | 148 | 149 | 150 | 151 | 152 | 153 | 154 | 155 | 156 | 157 | 158 | 159 | 160 | 161 | 162 | 163 | 164 | 165 | 166 | 167 | 168 | 169 | 170 | 171 | 172 | 173 | 174 | 175 | 176 | 177 | 178 | 179 | 180 | 181 | 182 | 183 | 184 | 185 | 186 | 187 | 188 | 189 | 190 | 191 | 192 | 193 | 194 | 195 | 196 | 197 | 198 | 199 | 200 | 201 | 202 | 203 | 204 | 205 | 206 | 207 | 208 | 209 | 210 | 211 | 212 | 213 | 214 | 215 | 216 | 217 | 218 | 219 | 220 | 221 | 222 | 223 | 224 | 225 | 226 | 227 | 228 | 229 | 230 | 231 | 232 | 233 | 234 | 235 | 236 | 237 | 238 | 239 | 240 | 241 | 242 | 243 | 244 | --------------------------------------------------------------------------------