├── .gitignore
├── README.md
├── annotations.png
├── garden-icon.svg
├── publish.css
├── site-callout.png
└── site-overview.png
/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Obsidian Publish CSS
2 |
3 | The CSS for my Obsidian publish site: [joschuasgarden.com](https://joschuasgarden.com/).
4 |
5 | 
6 |
7 | > You can help me keep creating tools like this by [buying me a coffee](https://www.buymeacoffee.com/joschua).
8 |
9 | 
10 |
11 | ## Noteworthy inspirations:
12 | I like to [Steal from my heroes](https://joschuasgarden.com/Steal+from+your+heroes). I copied, changed and pasted a lot to come up with a style I cherish.
13 | * Themes:
14 | * This theme is built on [Minimal Obsidian 2.5.4](https://github.com/kepano/obsidian-minimal) by @kepano:
15 | * Sponsor his work on Patreon: https://www.patreon.com/kepano
16 | * [Chad Bennet's Publish CSS](https://github.com/chad-bennett/obsidian-publish-css/blob/main/publish.css)
17 | * [Eric Gregorich's Publish CSS](https://github.com/ericgregorich/Obsidian-Publish-CSS/blob/main/publish.css)
18 | * Tips:
19 | * Eric's [Publish CSS tips](https://ericgregorich.com/obsidian-publish-css/)
20 | * Importing custom fonts tip from [quantumgardener.blog](https://quantumgardener.blog/garden/Changing+the+look+of+your+Obsidian+site+using+fonts+and+CSS)
21 | * Snippets / Inspiration:
22 | * Callout boxes from [Vileplume](https://github.com/hungsu/vileplume-obsidian)
23 | * Epistemic status from [devonzuegel](https://devonzuegel.com/post/epistemic-statuses-are-lazy-and-that-is-a-good-thing)
24 | * Icon from [iconmonstr](https://iconmonstr.com/)
25 |
26 | ## Special tweaks
27 | ### Callout Codeblocks
28 | 
29 |
30 | Callouts help to make important things pop out.
31 | Everything I put in three backticks followed by "co" gets formatted this way. ` ```co `
32 |
33 | However, since I am using a codeblock, links won't work in here.
34 |
35 |
36 | ```css
37 | pre.language-co {
38 | border-radius: 10px;
39 | border: 1px solid rgba(255,255,255,0.03);
40 | padding: 10px 20px;
41 | position: relative;
42 | box-shadow: -10px -10px 30px rgba(255,255,255,0.05), 10px 10px 30px rgba(0,0,0,0.2);
43 | background-color: var(--background-primary-alt) !important;
44 | }
45 |
46 | code.language-co.is-loaded {
47 | font-family: var(--text);
48 | white-space: normal;
49 | }
50 | ```
51 |
52 | ### Annotation formatting
53 | I want to include Levels of certainty and effort in some of my notes. Therefore I adapted the highlighting syntax `==…==`. Everything between these two equal signs will get formatted. Links still work.
54 |
55 | 
56 |
57 | ```css
58 | /* || Epistemological status styling via Highlighting */
59 | .markdown-preview-view mark {
60 | background-color: var(--background-primary);
61 | color: var(--text-faint);
62 | font-size: var(--font-small);
63 | font-style: italic;
64 | }
65 |
66 | /* unresolved links */
67 | .markdown-preview-view mark .internal-link.internal-link.is-unresolved {
68 | color: #a4a4a4
69 | }
70 |
71 | /* formatting internal links */
72 | .markdown-preview-view mark .internal-link {
73 | color: var(--text-faint);
74 | font-style: normal;
75 | }
76 | /* hover on internal links */
77 | .markdown-preview-view mark .internal-link:hover {
78 | color: var(--text-faint);
79 | text-decoration: underline;
80 | text-decoration-thickness: 2px;
81 | text-decoration-color: var(--text-accent-hover-rgba);
82 | }
83 |
84 | /* Special formatting for "Level of Certainty" and "Level of Effort" */
85 | .markdown-preview-view mark .internal-link[data-href^='Level of Certainty'] {
86 | font-weight: 500;
87 | font-style: normal;
88 | color: var(--text-muted);
89 |
90 | }
91 |
92 | .markdown-preview-view mark .internal-link[data-href^='Level of Effort'] {
93 | font-weight: 500;
94 | font-style: normal;
95 | color: var(--text-muted);
96 |
97 | }
98 | ```
99 |
100 | ### Site logo
101 |
102 | 
103 |
104 | Having a nice logo can make all the difference.
105 |
106 | ```css
107 | .site-body-left-column-site-name {
108 | text-align: center;
109 | margin: 0 auto;
110 | }
111 | .site-body-left-column-site-name::before {
112 | background: none;
113 | display: block;
114 | content: url(path-to-your-logo.png);
115 | width: 60%;
116 | margin: 0 auto;
117 | }
118 | ```
119 |
120 |
121 | ### Hiding files in navigation
122 | I use this to simplify navigation for the user while keeping the search bar. Be aware that your notes are only *hidden* in the overview, they are still visible in search.
123 |
124 | Here, you specify which items you do *not* want to be hidden. So swap these for which ones you want to be *visible*.
125 |
126 | ```css
127 | .tree-item-self:not([data-path^='Bible Study Kit']):not([data-path^='Scripture (WEB)']):not([data-path^='+Welcome']):not([data-path^='Books MOC']):not([data-path^='Contact me']) {
128 | display: none;
129 | }
130 | ```
131 | ***
132 | If you find value in this and want to contribute, I'd love for you to sponsor my reading habit [on patreon](https://www.patreon.com/joschua).
133 |
--------------------------------------------------------------------------------
/annotations.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/selfire1/obsidian-publish-css/aaf3f6d0d1321c32d55f6d878589358505a1c8f9/annotations.png
--------------------------------------------------------------------------------
/garden-icon.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
18 |
--------------------------------------------------------------------------------
/publish.css:
--------------------------------------------------------------------------------
1 | /* */
5 |
6 | /*
7 |
8 | Obsidian Publish for THE X
9 |
10 |
11 | Inspired by:
12 | * Minimal Obsidian 2.5.4 by @kepano: https://github.com/kepano/obsidian-minimal
13 | Sponsor his work on Patreon: https://www.patreon.com/kepano
14 | * Chad Bennet's Publish CSS: https://github.com/chad-bennett/obsidian-publish-css/blob/main/publish.css
15 | * Eric Gregorich's Publish CSS: https://github.com/ericgregorich/Obsidian-Publish-CSS/blob/main/publish.css
16 | * Callout boxes from Vileplume: https://github.com/hungsu/vileplume-obsidian
17 |
18 | ----------------------------------------------------------------
19 |
20 | TOC
21 |
22 | Options
23 | Colors
24 | Font styles
25 | Cursor
26 |
27 | Theme
28 |
29 | Special Features
30 |
31 | Frameless mode
32 | Andy mode for use with Sliding Panes plugin
33 | App ribbon removed
34 | Focus mode
35 | Image zoom
36 | Calendar plugin
37 |
38 | Minimal Styling
39 |
40 | Headings and fonts
41 | Icons
42 | Tags
43 | Modals
44 | Drag ghost
45 | Workspace
46 | Window frame
47 | Title bar
48 | Editor mode
49 | Internal search
50 | Sidebar documents
51 | Toggle switches
52 | File browser
53 | Relationship lines
54 | Folding
55 | Outline
56 | Search
57 | Tag pane
58 | Status bar
59 | Sidedock icons
60 | Preview mode
61 | Code
62 | Popovers
63 | Graphs
64 | Settings
65 | Scroll bars
66 |
67 |
68 | ----------------------------------------------------------------*/
69 |
70 | .theme-light {
71 |
72 | /*----------------------------------------------------------------
73 |
74 | Colors*/
75 | --background-primary: #FBFBFB;
76 | --background-primary-alt: #fefefe;
77 | --background-dark: #2E3235;
78 | --background-dark-alt: #D9BB77;
79 | --background-secondary: #f2f3f5;
80 | --background-secondary-alt: #f2f3f5;
81 | --background-accent: #fff;
82 | --background-modifier-border: #ddd;
83 | --background-modifier-form-field: #fff;
84 | --background-modifier-form-field-highlighted: #fff;
85 | --background-modifier-box-shadow: rgba(0, 0, 0, 0.1);
86 | --background-modifier-success: #a4e7c3;
87 | --background-modifier-error: #990000;
88 | --background-modifier-error-rgb: 230, 135, 135;
89 | --background-modifier-error-hover: #bb0000;
90 | --background-modifier-cover: rgba(0, 0, 0, 0.8);
91 | --text-accent: #008D42;
92 | --text-accent-hover: #F2CA6C;
93 | --text-accent-hover-rgba: rgba(242, 202, 108, 0.8);
94 | --text-accent-unresolved: rgba(0, 141, 66, 0.8);
95 | --text-color-external: (var(--text-accent));
96 | --text-color-header: #000000a6;
97 | --text-normal: #2d2e2e;
98 | --text-muted: #5e5e5e;
99 | --text-muted-rgb: 136, 136, 136;
100 | --text-faint: #999999;
101 | --text-error: #800000;
102 | --text-error-hover: #990000;
103 | --text-highlight-bg: rgba(59, 176, 131, 0.4);
104 | --text-selection: var(--text-accent-hover);
105 | --text-on-accent: #f2f3f5;
106 | --interactive-normal: #f2f3f5;
107 | --interactive-hover: #e9e9e9;
108 | --interactive-accent: var(--text-accent-hover);
109 | --interactive-accent-rgb: 123, 108, 217;
110 | --interactive-accent-hover: var(--text-accent-hover);
111 | --scrollbar-active-thumb-bg: rgba(0, 0, 0, 0.2);
112 | --scrollbar-bg: #ffffff00;
113 | --scrollbar-thumb-bg: rgb(217 216 216);
114 |
115 |
116 | /*----------------------------------------------------------------
117 |
118 | Font styles
119 |
120 | /* Preview mode */
121 |
122 | --font-family-preview:var(--text);
123 | --text:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
124 | --font-header:'Playfair Display', serif;
125 | /* Code */
126 |
127 | --font-monospace:Menlo,SFMono-Regular,Consolas,"Roboto Mono",monospace;
128 |
129 | /* Sizes, weights, padding */
130 |
131 | --font-normal:16px;
132 | --font-small:13px;
133 | --font-smaller:11px;
134 | --font-smallest:10px;
135 | --h1:2rem;
136 | --h2:1.375rem;
137 | --h3:1.2rem;
138 | --h4:1rem;
139 | --h5:0.875em;
140 | --normal-weight:400; /* Switch to 300 if you want thinner default text */
141 | --bold-weight:600; /* Switch to 700 if you want thicker bold text */
142 | --line-width:40rem; /* Maximum characters per line */
143 | --line-height:1.5;
144 | --max-width:87%; /* Amount of padding around the text, use 90% for narrower padding */
145 | --nested-padding:3.5%; /* Amount of padding for quotes and transclusions */
146 | --icon-muted:0.4;
147 | --border-width:1px;
148 | --border-width-alt:1px;
149 | }
150 |
151 | /*----------------------------------------------------------------
152 |
153 | MINIMAL STYLING */
154 |
155 | /* Headings and fonts */
156 |
157 | h1,strong {font-weight:var(--bold-weight);}
158 | /* h1,h2,h3,h4 {letter-spacing:-0.02em;} */
159 | h1,h2,h3,h4,h5 {font-family: var(--font-header);}
160 |
161 |
162 |
163 | /* Headers */
164 |
165 | .view-header-title,
166 | .file-embed-title {
167 | text-align:left;
168 | font-size:1.125em;
169 | font-weight:var(--bold-weight);
170 | }
171 |
172 | .markdown-preview-view h1 {
173 | font-size:var(--h1);
174 | /* line-height:1.3; */
175 | }
176 | .markdown-preview-view h2 {
177 | font-size:var(--h2);
178 | /* line-height:0.9444444444rem; */
179 | padding-top: 1.3rem;
180 | }
181 | .markdown-preview-view h3 {
182 | font-weight:500;
183 | font-size:var(--h3);
184 | /* line-height:1.4; */
185 | padding-top: 1.15rem;
186 | }
187 | .markdown-preview-view h4 {
188 | letter-spacing:0.02em;
189 | color:var(--text-normal);
190 | font-weight:500;
191 | font-size:var(--h4);
192 | padding-top: 1rem;
193 | font-variant: normal;
194 | }
195 | .markdown-preview-view h5 {
196 | letter-spacing:0.02em;
197 | color:var(--text-normal);
198 | font-weight:500;
199 | font-size:var(--h5);
200 | padding-top: 0.8rem;
201 | font-variant: normal;
202 | }
203 |
204 | /* --------------- */
205 | /* Tags */
206 |
207 | .frontmatter-container .tag,
208 | .tag,
209 | .markdown-preview-view .tag:not(.token) {
210 | background-color:transparent;
211 | border:1px solid var(--background-modifier-border);
212 | color:var(--text-faint);
213 | font-size:var(--font-smaller);
214 | font-family:var(--text);
215 | padding:2px 8px;
216 | text-align:center;
217 | text-decoration:none;
218 | display:inline-block;
219 | margin:2px 0 0 0;
220 | border-radius:14px;
221 | line-height: 20px;
222 | position: relative;
223 | bottom: 1px;
224 | }
225 | .tag:hover {
226 | color:var(--text-normal);
227 | border-color:var(--background-modifier-border-hover);
228 | }
229 | .cm-s-obsidian span.cm-hashtag {
230 | background-color:transparent;
231 | border:1px solid var(--background-modifier-border);
232 | color:var(--text-muted);
233 | font-size:var(--font-small);
234 | font-family:var(--font-ui);
235 | text-align:center;
236 | text-decoration:none;
237 | display:inline-block;
238 | margin:2px 0;
239 | vertical-align:middle;
240 | padding-top:1px;
241 | border-left:none;
242 | border-right:none;
243 | padding-bottom:2px;
244 | cursor:text;
245 | }
246 | span.cm-hashtag.cm-hashtag-begin {
247 | border-top-left-radius:14px;
248 | border-bottom-left-radius:14px;
249 | padding-left:8px;
250 | border-right:none;
251 | border-left:1px solid var(--background-modifier-border);
252 | }
253 | span.cm-hashtag.cm-hashtag-end {
254 | border-top-right-radius:14px;
255 | border-bottom-right-radius:14px;
256 | border-left:none;
257 | padding-right:8px;
258 | border-right:1px solid var(--background-modifier-border);
259 | }
260 |
261 | /* --------------- */
262 | /* Custom line width */
263 |
264 | .markdown-preview-view.is-readable-line-width .markdown-preview-sizer {
265 | max-width:var(--max-width);
266 | width:var(--line-width);
267 | }
268 | .markdown-source-view.is-readable-line-width .CodeMirror,
269 | .CodeMirror,
270 | .markdown-preview-section {
271 | padding-left:0;
272 | padding-right:0;
273 | margin:0 auto 0 auto;
274 | width:var(--line-width);
275 | max-width:var(--max-width);
276 | }
277 | .view-header-title-container {
278 | padding-left:0;
279 | padding-right:0px;
280 | position:absolute;
281 | width:var(--line-width);
282 | max-width:var(--max-width);
283 | margin:0 auto;
284 | left:0;
285 | right:0;
286 | }
287 |
288 | /* Transcluded notes and embeds */
289 |
290 | .markdown-preview-view.is-readable-line-width .markdown-embed .markdown-preview-sizer {
291 | max-width:100%;
292 | width:100%;
293 | }
294 |
295 | .markdown-embed h1:first-child {
296 | margin-block-start: 0em;}
297 |
298 | .markdown-preview-view .markdown-embed {
299 | margin-top:var(--nested-padding);
300 | padding:0 calc(var(--nested-padding) / 2) 0 var(--nested-padding);
301 | }
302 | .markdown-embed-title {
303 | display: none;
304 | }
305 | .markdown-embed .markdown-preview-sizer:first-child ul {
306 | margin-block-start:2px;
307 | }
308 | .markdown-embed .markdown-preview-section:last-child p,
309 | .markdown-embed .markdown-preview-section:last-child ul {
310 | margin-block-end:2px;
311 | }
312 | .internal-embed:not([src*="#^"]) .markdown-embed-link {
313 | left:0;
314 | width:100%;
315 | }
316 | .markdown-embed-link,
317 | .file-embed-link {
318 | top:0px;
319 | right:0;
320 | text-align:right;
321 | }
322 | .file-embed-link svg,
323 | .markdown-embed-link svg {
324 | width:16px;
325 | opacity:0;
326 | }
327 | .markdown-embed:hover .file-embed-link svg,
328 | .markdown-embed:hover .markdown-embed-link svg {
329 | opacity:1;
330 | }
331 | .markdown-preview-view .markdown-embed-content > .markdown-preview-view {
332 | max-height:none !important;}
333 | .markdown-embed .markdown-preview-view {
334 | padding:0;}
335 | .internal-embed .markdown-embed {
336 | border:0;
337 | border-left:1px solid var(--quote-opening-modifier);
338 | border-radius:0;
339 | }
340 |
341 | /* --------------- */
342 | /* Checkboxes */
343 |
344 | input[type=checkbox] {
345 | -webkit-appearance:none;
346 | appearance:none;
347 | border-radius:50%;
348 | border:1px solid var(--background-modifier-border-hover);
349 | padding:0;
350 | }
351 | input[type=checkbox]:focus,input[type=checkbox]:hover {
352 | outline:0;
353 | border-color:var(--text-faint);
354 | }
355 | .is-flashing input[type=checkbox]:checked,
356 | input[type=checkbox]:checked {
357 | background-color:var(--background-modifier-accent) !important;
358 | border:1px solid var(--background-modifier-accent);
359 | background-position:center;
360 | background-size:70%;
361 | background-repeat:no-repeat;
362 | background-image:url('data:image/svg+xml; utf8, ');
363 | }
364 | .markdown-preview-section > .contains-task-list {
365 | padding-bottom:0.5em;
366 | }
367 | .markdown-preview-view ul > li.task-list-item.is-checked {
368 | text-decoration:none;
369 | color:var(--text-normal);
370 | }
371 | .markdown-preview-view .task-list-item-checkbox {
372 | width:18px;
373 | height:18px;
374 | position:relative;
375 | top:6px;
376 | line-height:0;
377 | margin-left:-1.5em;
378 | margin-right:6px;
379 | filter:none;
380 | }
381 | .markdown-preview-view ul > li.task-list-item {
382 | text-indent:0;
383 | line-height:1.4;
384 | }
385 | .markdown-preview-view .task-list-item {
386 | padding-inline-start:0;
387 | }
388 | .side-dock-plugin-panel-inner {
389 | padding-right:6px;
390 | padding-left:6px;
391 | }
392 |
393 | /* --------------- */
394 | /* File browser */
395 |
396 | .nav-header {
397 | padding:0;
398 | }
399 | /*
400 | .nav-header:after {
401 | content:"";
402 | pointer-events:none;
403 | z-index:9;
404 | background:linear-gradient(0deg,var(--background-transparent) 0%,var(--background-secondary) 100%);;
405 | height:12px;
406 | width:100%;
407 | position:fixed;
408 | }*/
409 | .nav-buttons-container {
410 | padding:10px 5px 0px 5px;
411 | margin-bottom:0px !important;
412 | justify-content:flex-start;
413 | border:0;
414 | }
415 | .nav-files-container {
416 | overflow-x:hidden;
417 | padding-bottom:50px;
418 | }
419 | .nav-folder-title {
420 | margin:0px;
421 | padding:0 10px 0 24px;
422 | cursor:var(--cursor);
423 | }
424 | .nav-folder-title.is-being-dragged-over {
425 | background-color:var(--background-modifier-accent);
426 | border-color:var(--background-modifier-accent);
427 | border-radius:0;
428 | border-left:1px solid transparent;
429 | border-right:1px solid transparent;
430 | }
431 | .nav-folder-title-content {
432 | padding:0px 4px 1px 0;
433 | }
434 | .nav-folder-collapse-indicator {
435 | top:1px;
436 | margin-left:-10px;
437 | }
438 |
439 | .tooltip {
440 | font-size:var(--font-small);
441 | line-height:1.2;
442 | padding:4px 8px;
443 | border-radius:4px;
444 | }
445 | .nav-file {
446 | margin-left:12px;
447 | padding-right:4px;
448 | }
449 | .nav-file-title {
450 | width:calc(100% - 30px);
451 | margin:0 8px 0 -4px;
452 | padding:2px 2px;
453 | border-width:0;
454 | border-color:var(--background-secondary);
455 | border-radius:6px;
456 | cursor:var(--cursor);
457 | }
458 | .nav-file-title.is-being-dragged,
459 | .nav-file-title.is-active,
460 | body:not(.is-grabbing) .nav-file-title.is-active:hover {
461 | background-color:var(--background-tertiary);
462 | color:var(--text-normal);
463 | }
464 | .nav-file-title-content {
465 | width:100%;
466 | white-space:nowrap;
467 | overflow:hidden;
468 | text-overflow:ellipsis;
469 | padding:0 5px;
470 | vertical-align:middle;
471 | cursor:var(--cursor);
472 | }
473 | .drop-indicator {
474 | border-width:1px;
475 | }
476 | .nav-file-icon {
477 | margin:1px 0 0 0;
478 | vertical-align:bottom;
479 | padding:0 0 0 5px;
480 | }
481 | .workspace-leaf-content[data-type=starred] .nav-file-title-content {
482 | width:calc(100% - 15px);
483 | }
484 | body:not(.is-grabbing) .nav-file-title:hover .nav-folder-collapse-indicator,
485 | body:not(.is-grabbing) .nav-folder-title:hover .nav-folder-collapse-indicator,
486 | body:not(.is-grabbing) .nav-file-title:hover,
487 | body:not(.is-grabbing) .nav-folder-title:hover {
488 | background:transparent;
489 | }
490 | .nav-file-title,
491 | .tree-item-self,
492 | .nav-folder-title,
493 | .is-collapsed .search-result-file-title,
494 | .tag-pane-tag {
495 | font-size:var(--font-small);
496 | color:var(--text-muted);
497 | }
498 | .search-result-file-title {
499 | font-size:var(--font-small);
500 | color:var(--text-normal);
501 | font-weight:var(--normal-weight);
502 | }
503 | .side-dock-collapsible-section-header {
504 | font-size:var(--font-small);
505 | color:var(--text-muted);
506 | cursor:var(--cursor);
507 | margin-right:0;
508 | margin-left:0;
509 | }
510 | .side-dock-collapsible-section-header:hover,
511 | .side-dock-collapsible-section-header:not(.is-collapsed) {
512 | color:var(--text-muted);
513 | background:transparent;
514 | }
515 | .tree-view-item-self:hover .tree-view-item-collapse,
516 | .collapsible-item-self.is-clickable:hover {
517 | color:var(--text-muted);
518 | background:transparent;
519 | cursor:var(--cursor);
520 | }
521 | .collapsible-item-self.is-clickable {
522 | cursor:var(--cursor);
523 | }
524 | .search-result-collapse-indicator,
525 | .search-result-file-title:hover .search-result-collapse-indicator,
526 | .side-dock-collapsible-section-header-indicator:hover,
527 | .side-dock-collapsible-section-header:hover .side-dock-collapsible-section-header-indicator,
528 | .markdown-preview-view .collapse-indicator,
529 | .tree-view-item-collapse,
530 | .is-collapsed .search-result-collapse-indicator,
531 | .nav-folder-collapse-indicator,
532 | .side-dock-collapsible-section-header-indicator,
533 | .is-collapsed .side-dock-collapsible-section-header-indicator {
534 | color:var(--text-faint);
535 | cursor:var(--cursor);
536 | }
537 | .nav-folder-title.is-being-dragged-over .nav-folder-collapse-indicator {
538 | color:var(--text-normal);
539 | }
540 |
541 |
542 | /* --------------- */
543 | /* Relationship lines */
544 |
545 | /* Relationship lines in Preview */
546 |
547 | body.minimal-rel-preview .markdown-preview-view ul ul {
548 | position:relative;
549 | }
550 | body.minimal-rel-preview .markdown-preview-view ul ul::before {
551 | content:'';
552 | border-left:1px solid var(--background-modifier-border);
553 | position:absolute;
554 | left:-14px;
555 | top:0;
556 | bottom:0;
557 | }
558 | body.minimal-rel-preview .markdown-preview-view ul.contains-task-list::before {
559 | top:5px;
560 | }
561 | body.minimal-rel-preview .markdown-preview-view .task-list-item-checkbox {
562 | margin-left:-21px;
563 | }
564 |
565 | /* --------------- */
566 | /* Outline */
567 |
568 | .outline {
569 | padding:15px 10px 20px 0;
570 | font-size:var(--font-small);
571 | }
572 | .outline .pane-empty {
573 | font-size:var(--font-small);
574 | color:var(--text-faint);
575 | padding:0 0 0 15px;
576 | width:100%;
577 | }
578 | .outline .collapsible-item-self {
579 | cursor:var(--cursor);
580 | line-height:1.4;
581 | margin-bottom:4px;
582 | font-size:var(--font-small);
583 | padding-left:15px;
584 | }
585 | .collapsible-item-collapse {
586 | opacity:1;
587 | left:-5px;
588 | color:var(--text-faint);
589 | }
590 | .outline .collapsible-item-inner:hover {
591 | color:var(--text-normal);
592 | }
593 | .collapsible-item-self.is-clickable:hover .collapsible-item-collapse {
594 | color:var(--text-normal);
595 | }
596 | .outline > .collapsible-item > .collapsible-item-self .right-triangle {
597 | opacity:0;
598 | }
599 |
600 | /* --------------- */
601 | /* Search */
602 |
603 | .search-result-container.mod-global-search .search-empty-state {
604 | padding-left:15px;
605 | }
606 | .search-result-file-match {
607 | cursor:var(--cursor) !important;
608 | }
609 | .search-result-file-match:hover {
610 | color:var(--text-normal);
611 | background:transparent;
612 | }
613 | .search-result-container:before {
614 | height:1px;
615 | }
616 | .search-result-container.is-loading:before {
617 | background-color:var(--background-modifier-accent);
618 | }
619 | .search-result {
620 | margin-bottom:0;
621 | }
622 | .search-result-count {
623 | opacity:1;
624 | color:var(--text-faint);
625 | padding:0 0 0 5px;
626 | }
627 | .search-result-file-match:before {
628 | top:0;
629 | }
630 | .search-result-file-match:not(:first-child) {
631 | margin-top:0px;}
632 | .search-result-file-match {
633 | margin-top:0;
634 | margin-bottom:0;
635 | padding-top:6px;
636 | padding-bottom:5px;
637 | }
638 | .search-result-file-matched-text {
639 | background-color:var(--text-selection);
640 | }
641 | .search-input-container input,
642 | .search-input-container input:hover,
643 | .search-input-container input:focus {
644 | font-size:var(--font-small);
645 | padding:5px 10px;
646 | background-color:var(--background-secondary);
647 | }
648 | .search-input-container {
649 | width:calc(100% - 20px);
650 | margin:0 10px 5px;
651 | }
652 |
653 | .workspace-leaf-content .setting-item {
654 | padding:5px 0;
655 | border:none;
656 | }
657 | .workspace-leaf-content .setting-item-control {
658 | flex-shrink:0;
659 | flex:1;
660 | }
661 |
662 | .search-input-clear-button {
663 | cursor:var(--cursor);
664 | top:0px;
665 | bottom:0px;
666 | border-radius:15px;
667 | line-height:0px;
668 | height:15px;
669 | width:15px;
670 | margin:auto;
671 | padding:6px 0 0 0;
672 | text-align:center;
673 | vertical-align:middle;
674 | align-items:center;
675 | color:var(--text-faint);
676 | }
677 | .search-input-clear-button:hover {
678 | color:var(--text-normal);
679 | }
680 | .search-input-clear-button:before {
681 | font-size:22px;
682 | font-weight:200;
683 | }
684 | .search-input {
685 | max-width:100%;
686 | margin-left:0;
687 | width:500px;
688 | }
689 | input.search-input:focus {
690 | border-color:var(--background-modifier-border);
691 | }
692 | .workspace-leaf-content[data-type='search'] .search-result-file-matches {
693 | border-left:0;
694 | padding-left:0;
695 | }
696 | .search-empty-state {
697 | font-size:var(--font-small);
698 | color:var(--text-faint);
699 | padding-left:5px;
700 | margin:0;
701 | }
702 | .search-result-container {
703 | padding:5px 10px 5px 0px;
704 | }
705 | .search-result-file-title {
706 | line-height:1.3;
707 | padding:4px 4px 4px 24px;
708 | vertical-align:middle;
709 | cursor:var(--cursor)!important;
710 | }
711 | .tree-item-inner,
712 | .search-result-file-title {
713 | white-space:nowrap;
714 | overflow:hidden;
715 | text-overflow:ellipsis;
716 | }
717 | .search-result-collapse-indicator {
718 | left:0px;
719 | }
720 | .search-result-file-match:before {
721 | height:0.5px;
722 | }
723 | .search-result-file-matches {
724 | font-size:var(--font-smaller);
725 | line-height:1.3;
726 | margin-bottom:8px;
727 | padding:0 0 6px 0;
728 | color:var(--text-muted);
729 | border-bottom:1px solid var(--background-modifier-border-focus);
730 | }
731 | .search-info-container {
732 | font-size:var(--font-smaller);
733 | color:var(--text-faint);
734 | padding-top:5px;
735 | padding-bottom:5px;
736 | }
737 | .search-info-more-matches {
738 | font-size:var(--font-smaller);
739 | padding-top:4px;
740 | padding-bottom:4px;
741 | color:var(--text-normal);
742 | }
743 | .side-dock-collapsible-section-header-indicator {
744 | display:none;
745 | }
746 | .search-result-file-title:hover {
747 | color:var(--text-normal);
748 | background:transparent;
749 | }
750 | .workspace-leaf-content .search-input,
751 | .workspace-leaf-content .search-input:hover,
752 | .workspace-leaf-content .search-input:focus {
753 | font-size:var(--font-small);
754 | padding:7px 10px;
755 | height:28px;
756 | border-radius:5px;
757 | background:var(--background-primary);
758 | border:1px solid var(--background-modifier-border);
759 | transition:border-color 0.1s ease-in-out;
760 | }
761 | .workspace-leaf-content .search-input:hover {
762 | border-color:var(--background-modifier-border-hover);
763 | transition:border-color 0.1s ease-in-out;
764 | }
765 | .workspace-leaf-content .search-input:focus {
766 | background:var(--background-primary);
767 | border-color:var(--background-modifier-border-focus);
768 | transition:all 0.1s ease-in-out;
769 | }
770 | .search-input-container input::placeholder {
771 | color:var(--text-faint);
772 | font-size:var(--font-small);
773 | }
774 | .workspace-split.mod-root .workspace-split.mod-vertical .workspace-leaf-content {
775 | padding-right:0;
776 | }
777 | .workspace-split.mod-horizontal.mod-right-split {
778 | width:0;
779 | }
780 | .workspace-split.mod-vertical > .workspace-leaf {
781 | padding-right:1px;
782 | }
783 | .workspace-leaf-content[data-type=starred] .item-list {
784 | padding-top:5px;
785 | }
786 | .workspace-split.mod-right-split .view-content {
787 | padding:0 0 0 0;
788 | }
789 |
790 |
791 | /* --------------- */
792 | /* Nested items */
793 |
794 | .nav-folder-collapse-indicator,
795 | .tree-item-self .collapse-icon {
796 | color:var(--background-modifier-border-hover);
797 | }
798 | .tree-item-self .collapse-icon {
799 | padding-left:0;
800 | width:15px;
801 | margin-left:-15px;
802 | }
803 | .tree-item-self:hover .collapse-icon {
804 | color:var(--text-accent-hover);
805 | }
806 | .tree-item {
807 | padding-left:5px;
808 | }
809 | .tree-item-flair {
810 | font-size:var(--font-smaller);
811 | right:0;
812 | background:transparent;
813 | color:var(--text-faint);
814 | }
815 | .tree-item-flair-outer:after {
816 | content:'';
817 | }
818 | .tree-item-self.is-clickable {
819 | cursor:var(--cursor);
820 | }
821 | .tree-item-self.is-clickable:hover {
822 | background:transparent;
823 | }
824 | .tree-item-self:hover .tree-item-flair {
825 | background:transparent;
826 | color:var(--text-muted);
827 | }
828 | .tree-item-children {
829 | margin-left:5px;
830 | }
831 |
832 | /* --------------- */
833 | /* Preview mode */
834 |
835 | .markdown-preview-view hr {
836 | height:1px;
837 | border-width:2px 0 0 0;
838 | }
839 | a[href*="obsidian://search"] {
840 | background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' width='17' height='17' class='search'%3E%3Cpath fill='black' stroke='black' stroke-width='2' d='M42,6C23.2,6,8,21.2,8,40s15.2,34,34,34c7.4,0,14.3-2.4,19.9-6.4l26.3,26.3l5.6-5.6l-26-26.1c5.1-6,8.2-13.7,8.2-22.1 C76,21.2,60.8,6,42,6z M42,10c16.6,0,30,13.4,30,30S58.6,70,42,70S12,56.6,12,40S25.4,10,42,10z'%3E%3C/path%3E%3C/svg%3E");
841 | }
842 | .theme-dark a[href*="obsidian://search"] {
843 | background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' width='17' height='17' class='search'%3E%3Cpath fill='white' stroke='white' stroke-width='2' d='M42,6C23.2,6,8,21.2,8,40s15.2,34,34,34c7.4,0,14.3-2.4,19.9-6.4l26.3,26.3l5.6-5.6l-26-26.1c5.1-6,8.2-13.7,8.2-22.1 C76,21.2,60.8,6,42,6z M42,10c16.6,0,30,13.4,30,30S58.6,70,42,70S12,56.6,12,40S25.4,10,42,10z'%3E%3C/path%3E%3C/svg%3E");
844 | }
845 |
846 |
847 | .footnotes-list {
848 | margin-block-start:-10px;
849 | padding-inline-start:20px;
850 | font-size:var(--font-small);
851 | }
852 | .footnotes-list p {
853 | display:inline;
854 | margin-block-end:0;
855 | margin-block-start:0;
856 | }
857 | .footnote-ref a {
858 | text-decoration:none;
859 | }
860 | .footnote-backref {
861 | color:var(--text-faint);
862 | }
863 |
864 | .markdown-preview-view .image-embed img:not([width]),
865 | .markdown-preview-view audio,
866 | .markdown-preview-view video {
867 | width:100%;
868 | }
869 | .markdown-preview-view .mod-highlighted {
870 | transition:background-color 0.3s ease;
871 | background-color:var(--text-selection);
872 | color:inherit;
873 | }
874 |
875 |
876 |
877 | /* Tables */
878 |
879 | .markdown-preview-view th {
880 | font-weight:var(--bold-weight);
881 | text-align:left;
882 | border-top:none;
883 | }
884 | .markdown-preview-view th:last-child,
885 | .markdown-preview-view td:last-child {
886 | border-right:none;
887 | }
888 | .markdown-preview-view th:first-child,
889 | .markdown-preview-view td:first-child {
890 | border-left:none;
891 | padding-left:0;
892 | }
893 | .markdown-preview-view tr:last-child td {
894 | border-bottom:none;
895 | }
896 |
897 | /* Bible Verses */
898 | /* Viewing them */
899 | .markdown-preview-view h6 {
900 | position: relative;
901 | left: -5%;
902 | top: 28px;
903 | line-height: 0px;
904 | margin-top: -20px;
905 | margin-right: 3px;
906 | font-family: var(--font-family-preview);
907 | font-weight: 500;
908 | font-size: 10px;
909 | font-weight: bold;
910 | font-style: normal;
911 | color: var(--text-faint);
912 | }
913 |
914 |
915 |
916 | /* Publish Headers (Links to this page / interactive graph) */
917 | .published-section-header {
918 | color: var(--background-dark);
919 | }
920 |
921 | /* || IFRAMES */
922 | iframe {
923 | display: block;
924 | border-style: none;
925 | margin: 0 auto;
926 | }
927 |
928 | /* || LINKS */
929 | .internal-link.is-unresolved {
930 | opacity: 0.5;
931 | color: var(--text-accent-unresolved);
932 | /* text-decoration: underline;
933 | text-decoration-color: var(--text-accent-unresolved);
934 | text-decoration-thickness: 1px; */
935 | }
936 |
937 | .markdown-preview-view .internal-link {
938 | text-decoration: none;
939 | }
940 |
941 | .markdown-preview-view .internal-link:hover:not(.internal-link.is-unresolved) {
942 | color: var(--text-accent);
943 | text-decoration: underline;
944 | text-decoration-thickness: 4px;
945 | text-decoration-color: var(--text-accent-hover-rgba);
946 | text-decoration-skip-ink: none;
947 | }
948 |
949 | a:hover {
950 | color: var(--text-accent-hover);
951 | }
952 |
953 | .external-link {
954 | color:var(--text-accent);
955 | text-decoration:underline;
956 | }
957 |
958 | /* --------------- */
959 | /* Image zoom */
960 |
961 | .view-content img {
962 | max-width:100%;
963 | cursor:zoom-in;}
964 | .view-content img:active {
965 | cursor:zoom-out;
966 | display:block;
967 | z-index:100;
968 | position:fixed;
969 | max-height:calc(100% + 1px);
970 | max-width:calc(100% - 20px);
971 | height:calc(100% + 1px);
972 | width:100%;
973 | object-fit:contain;
974 | margin:-0.5px auto 0;
975 | text-align:center;
976 | top:50%;
977 | transform:translateY(-50%);
978 | padding:0;
979 | left:0;
980 | right:0;
981 | bottom:0;
982 | background:var(--background-translucent);
983 | }
984 |
985 | /* || Graph */
986 | .graph-view.color-fill-unresolved {
987 | opacity: 0.5;
988 | }
989 | /* .graph-view.color-fill {
990 | color: var(--text-accent);
991 | } */
992 | .graph-view.color-fill:hover {
993 | color: var(--text-accent-hover);
994 | }
995 |
996 |
997 |
998 | .published-container.has-graph .graph-view-outer {
999 | padding: 10px;
1000 | }
1001 |
1002 |
1003 | /* || Code */
1004 | .markdown-preview-view code,
1005 | .cm-s-obsidian span.cm-inline-code {
1006 | border: 1px solid rgb(229 229 229);
1007 | background-color: var(--background-dark);
1008 | color: var(--background-dark-alt);
1009 | border-radius: 5px;
1010 | }
1011 | /* Rounded `codeblocks` (singe-tick) */
1012 | /* set text and colour of codeblock */
1013 | .cm-s-obsidian span.cm-inline-code:not(.cm-formatting):not(.cm-hmd-indented-code):not(.obsidian-search-match-highlight) {
1014 | color: inherit;
1015 | background-color: #374151;
1016 | padding: 2px 4px;
1017 | }
1018 |
1019 | /* give rounded left edge to codeblock formatting*/
1020 | span.cm-formatting.cm-formatting-code.cm-inline-code{
1021 | border-radius: 4px 0px 0px 4px;
1022 | background-color: #374151;
1023 | color:inherit;
1024 | padding: 2px 4px;
1025 | }
1026 |
1027 | /* give rounded right edge to codeblock formatting */
1028 | span.cm-inline-code + span.cm-formatting.cm-formatting-code.cm-inline-code{
1029 | border-radius: 0px 4px 4px 0px;
1030 | }
1031 |
1032 | /* ----------------------------------- */
1033 | /* Fences and styled text blocks */
1034 | /* ----------------------------------- */
1035 |
1036 | /* || Callouts from Vileplume
1037 | used in a custom codefence */
1038 |
1039 | pre.language-co {
1040 | border-radius: 10px;
1041 | border: 1px solid rgba(255,255,255,0.03);
1042 | padding: 10px 20px;
1043 | position: relative;
1044 | box-shadow: -10px -10px 30px rgba(255,255,255,0.05), 10px 10px 30px rgba(0,0,0,0.2);
1045 | background-color: var(--background-primary-alt) !important;
1046 | }
1047 |
1048 | code.language-co.is-loaded {
1049 | font-family: var(--text);
1050 | white-space: normal;
1051 | }
1052 |
1053 | /* Site header */
1054 | .page-header {
1055 | display: none !important;
1056 | }
1057 |
1058 | /* Site bars */
1059 | .site-body-left-column,
1060 | .site-body-left-column:before {
1061 | background-color: var(--background-dark);
1062 | border-right: none !important;
1063 | }
1064 |
1065 | .tree-item-inner {
1066 | color: var(--text-faint);
1067 | }
1068 |
1069 | .tree-item-inner:hover,
1070 | .tree-item-inner:active {
1071 | color: var(--text-accent-hover);
1072 | }
1073 | /* ----------------------------------- */
1074 | /* || Epistemological status styling via Highlighting */
1075 | .markdown-preview-view mark {
1076 | background-color: var(--background-primary);
1077 | color: var(--text-faint);
1078 | font-size: var(--font-small);
1079 | font-style: italic;
1080 | }
1081 |
1082 | .markdown-preview-view mark .internal-link.internal-link.is-unresolved {
1083 | color: #a4a4a4
1084 | }
1085 |
1086 | .markdown-preview-view mark .internal-link {
1087 | color: var(--text-faint);
1088 | font-style: normal;
1089 | }
1090 |
1091 | .markdown-preview-view mark .internal-link:hover {
1092 | color: var(--text-faint);
1093 | text-decoration: underline;
1094 | text-decoration-thickness: 2px;
1095 | text-decoration-color: var(--text-accent-hover-rgba);
1096 | }
1097 |
1098 |
1099 |
1100 | .markdown-preview-view mark .internal-link[data-href^='Level of Certainty'] {
1101 | font-weight: 500;
1102 | font-style: normal;
1103 | color: var(--text-muted);
1104 |
1105 | }
1106 |
1107 | .markdown-preview-view mark .internal-link[data-href^='Level of Effort'] {
1108 | font-weight: 500;
1109 | font-style: normal;
1110 | color: var(--text-muted);
1111 |
1112 | }
1113 |
1114 | /* ----------------------------------- */
1115 | /* Bible verse embeds */
1116 | div.markdown-embed .markdown-preview-view h6 {
1117 | position: absolute;
1118 | left: 10px;
1119 | top: 10px;
1120 | margin: 0px;
1121 | display: none;
1122 | }
1123 |
1124 | .markdown-preview-view .markdown-embed-content p:first-child {
1125 | margin: 1px;
1126 | top: 10px;
1127 | }
1128 |
1129 | div.markdown-embed-link:not([src*="#v^"]) {
1130 | visibility: hidden;
1131 | }
1132 | /*
1133 | For a fun quotemark:
1134 |
1135 | .markdown-preview-view .markdown-embed-content::before {
1136 | content: "\201C";
1137 | position: absolute;
1138 | font-size: 3em;
1139 | font-family: var(--font-header);
1140 | color: var(--text-faint);
1141 | } */
1142 |
1143 |
1144 | /* ----------------------------------- */
1145 |
1146 | /* Ribbon, focussed item in file tree */
1147 | .nav-view-outer .tree-item-self.mod-active {
1148 | background-color: transparent;
1149 | color: var(--text-accent-hover) !important;
1150 | }
1151 |
1152 | .site-body-right-column {
1153 | background-color: var(--background-secondary);
1154 | }
1155 |
1156 | /* Search */
1157 | .search-view-container .search-bar.has-no-results {
1158 | background-color: rgba(var(--background-modifier-error-rgb), 0.9);
1159 | }
1160 |
1161 | /* Error */
1162 | .search-view-container .search-bar.has-no-results {
1163 | background-color: rgba(var(--background-modifier-error-rgb), 0.2);
1164 | color: var(--interactive-normal);
1165 | }
1166 |
1167 | /* Containers */
1168 | .graph-view-container {
1169 | border: none;
1170 | box-shadow: none;
1171 | background-color: var(--background-primary);
1172 | }
1173 | .outline-view-outer .collapsible-item-self.mod-active {
1174 | background-color: var(--background-primary);
1175 | }
1176 |
1177 | /* || Graph */
1178 | .graph-view.color-fill-unresolved {
1179 | opacity: 0.5;
1180 | }
1181 | /* .graph-view.color-fill {
1182 | color: var(--text-accent);
1183 | } */
1184 | .graph-view.color-fill:hover {
1185 | color: var(--text-accent-hover);
1186 | }
1187 |
1188 | /* Page Name */
1189 | .site-body-left-column-site-name {
1190 | color: white;
1191 | }
1192 |
1193 | /* Backlinks */
1194 | .published-container .backlinks {
1195 | border: 1px solid var(--text-accent-hover);
1196 | }
1197 |
1198 | /* Footer */
1199 | .site-footer {
1200 | display: none;
1201 | }
1202 |
1203 |
1204 | /* ----------------------------------- */
1205 | /* Hide irrelevant documents */
1206 | /* ----------------------------------- */
1207 | .tree-item-self:not([data-path^='Bible Study Kit']):not([data-path^='Scripture (WEB)']):not([data-path^='✌️ Welcome']):not([data-path^='✝️ Faith']):not([data-path^='🌱 About']):not([data-path^='💭 Interests']):not([data-path^='📚 Books']):not([data-path^='🗞 Blog']):not([data-path^='Sign up for my Newsletter! 📮']):not([data-path^='💞 Favourites']) {
1208 | display: none;
1209 | }
1210 |
1211 | /* ----------------------------------- */
1212 | /* Side logo */
1213 | /* ----------------------------------- */
1214 | .site-body-left-column-site-name {
1215 | text-align: center;
1216 | margin: 0 auto;
1217 | }
1218 | .site-body-left-column-site-name::before {
1219 | background: none;
1220 | display: block;
1221 | content: url(https://publish-01.obsidian.md/access/7468061a2fce94dfd507e531380e776b/garden-icon.svg);
1222 | width: 60%;
1223 | margin: 0 auto;
1224 | }
--------------------------------------------------------------------------------
/site-callout.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/selfire1/obsidian-publish-css/aaf3f6d0d1321c32d55f6d878589358505a1c8f9/site-callout.png
--------------------------------------------------------------------------------
/site-overview.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/selfire1/obsidian-publish-css/aaf3f6d0d1321c32d55f6d878589358505a1c8f9/site-overview.png
--------------------------------------------------------------------------------