/* * Minimal Publish / MIT License * Copyright (c) 2020-2024 Steph Ango (@kepano) */ /* Adjust the following variables or find more at the link below */ /* https://docs.obsidian.md/Reference/CSS+variables/CSS+variables */ /* @import must always be at the top of your publish.css file */ @import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap'); @import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap'); body { --font-monospace-theme: "Roboto Mono"; --heading-font-family: "DM Sans", serif; --body-font-family: "DM Sans", serif; --heading-line-height: 105%; --heading-color: var(--color-primary); --heading-margin: 12px; } .published-container { --font-text-theme: var(--body-font-family); --font-interface-theme: var(--body-font-family); --h1-font: var(--heading-font-family); --h2-font: var(--heading-font-family); --h3-font: var(--heading-font-family); --h4-font: var(--heading-font-family); --h5-font: var(--heading-font-family); --h6-font: var(--heading-font-family); --h1-weight: 400; --h2-weight: 400; --h3-weight: 400; --h4-weight: 400; --h5-weight: 400; --h6-weight: 400; --h1-color: var(--heading-color); --h2-color: var(--heading-color); --h3-color: var(--heading-color); --h4-color: var(--heading-color); --h5-color: var(--heading-color); --h6-color: var(--heading-color); --heading-spacing: 16px; /* Cards */ --cards-min-width: 180px; --cards-max-width: 0.5fr; --cards-mobile-width: 180px; --cards-image-height: 400px; --cards-padding: 0.5em; --cards-image-fit: contain; --cards-background: #f6f4ec; --cards-border-width: 1px; --cards-aspect-ratio: auto; --cards-columns: repeat(auto-fit, minmax(var(--cards-min-width), var(--cards-max-width))); --cards-border: 1px; --cards-borders-colors: #B7B5AC; --cards-radius: 16px; /* Images */ --image-radius: 16px; --img-grid-fit: cover; --img-grid-background: transparent; --img-grid-gap: 0.5rem; --img-height: 200px; --img-zoom-background: var(--ui4); --img-zoom-max-width: 96%; --img-zoom-max-height: 90vh; --img-zoom-in-cursor: zoom-in; --img-zoom-out-cursor: zoom-out; /* Misc */ --icon-muted: 0.5; --border-width: 1px; --folding-offset: 16px; --nested-padding: 30px; /* Quotes and transclusions */ --list-padding: 2em; /* List padding */ --list-spacing: 0.075em; /* Space between list items */ } /* My snippets */ /* Floating Images */ img[alt*="left"] { float:left; clear:left; margin-right: 1rem; margin-bottom: 4px; margin-top: 4px; } img[alt*="right"] { float:right; clear:right; margin-left: 1rem; margin-bottom: 4px; margin-top: 4px; } img[alt*="center"],img[alt*="centre"] { display:block; margin-right: auto; margin-left: auto; margin-bottom: 4px; margin-top: 4px; } .markdown-rendered pre { border-left: solid darkorchid; } .markdown-source-view.mod-cm6 .cm-line.HyperMD-codeblock { border-left: solid darkorchid; } .cm-s-obsidian span.cm-inline-code, .markdown-preview-view code { color: darkblue !important; /* Change to your preferred text color */ } .theme-light { .math-block > mjx-container[jax="CHTML"], .math-inline > mjx-container[jax="CHTML"] { color: blue !important; /* Change to your desired color */ } } .theme-dark { .math-block > mjx-container[jax="CHTML"], .math-inline > mjx-container[jax="CHTML"] { color: cyan !important; /* Change to your desired color */ } } /* Mobile */ @media (max-width:400pt) { body { --cards-min-width:var(--cards-mobile-width); --img-grid-gap: 0.25rem; } } /* Ensure paragraphs, links, and all fonts dates use font-family */ p, a, time, td, th, tr, .head, .date, .timestamp, .published-container, .theme-light, .theme-dark, .site-body-left-column-site-name, .site-header-text { font-family: var(--body-font-family); } /* Flexoki * MIT License Copyright (c) 2023 Steph Ango https://stephango.com/flexoki */ .theme-light { --color-red-rgb: 175, 48, 41; --color-orange-rgb: 188, 82, 21; --color-yellow-rgb: 173, 131, 1; --color-green-rgb: 102, 128, 11; --color-cyan-rgb: 36, 131, 123; --color-blue-rgb: 32, 94, 166; --color-purple-rgb: 94, 64, 157; --color-pink-rgb: 160, 47, 111; --color-red: #AF3029; --color-orange: #BC5215; --color-yellow: #AD8301; --color-green: #66800B; --color-cyan: #24837B; --color-blue: #205EA6; --color-purple: #5E409D; --color-pink: #A02F6F; } .theme-dark { --color-red-rgb: 209, 77, 65; --color-orange-rgb: 218, 112, 44; --color-yellow-rgb:208, 162, 21; --color-green-rgb: 135, 154, 57; --color-cyan-rgb: 58, 169, 159; --color-blue-rgb: 67, 133, 190; --color-purple-rgb: 139, 126, 200; --color-pink-rgb: 206, 93, 151; --color-red: #D14D41; --color-orange: #DA702C; --color-yellow: #D0A215; --color-green: #879A39; --color-cyan: #3AA99F; --color-blue: #4385BE; --color-purple: #8B7EC8; --color-pink: #CE5D97; } .theme-light { --base-h: 360; --base-s: 3%; --base-l: 6%; --accent-h: 175; --accent-s: 57%; --accent-l: 33%; --bg1: #f6f4ec; --bg2: #f2f0e7; --bg3: rgba(16,15,15,0.05); --bg4: #edf4f8; --ui1: #f6f4ec; --ui2: #f6f4ec; --ui3: #f6f4ec; --ui4: #e2e1d9; --ui5: #eceae2; --ui6: #B7B5AC; --tx1: #1d1d1b; --tx2: #6F6E69; --tx3: #B7B5AC; --hl1: rgba(187,220,206,0.3); --hl2: rgba(247,209,61,0.3); } .theme-dark { --base-h: 360; --base-s: 3%; --base-l: 6%; --accent-h: 175; --accent-s: 49%; --accent-l: 45%; --bg1: #28261e; --bg2: #2e2d2a; --bg3: rgba(254,252,240,0.05); --bg4: #edf4f8; --ui1: #1e1d1c; --ui2: #2d2c2a; --ui3: #27261f; --ui4: #ffffff; --tx1: #bfbeb0; --tx2: #878580; --tx3: #575653; --hl1: rgba(30,95,91,0.3); --hl2: rgba(213,159,17,0.3); } .theme-light{--mono100:black;--mono0:white}.theme-dark{--mono100:white;--mono0:black}.theme-dark,.theme-light{--h1-color:var(--text-normal);--h2-color:var(--text-normal);--h3-color:var(--text-normal);--h4-color:var(--text-normal);--h5-color:var(--text-normal);--h6-color:var(--text-muted)}.published-container{--outline-heading-color-active:var(--tx1);--sidebar-left-background:var(--bg1)}.theme-dark,.theme-light{--background-primary:var(--bg1);--background-primary-alt:var(--bg2);--background-secondary:var(--bg2);--background-secondary-alt:var(--bg1);--background-tertiary:var(--bg3);--background-table-rows:var(--bg2);--background-modifier-form-field:var(--bg1);--background-modifier-form-field-highlighted:var(--bg1);--background-modifier-accent:var(--ax3);--background-modifier-border:var(--ui5);--background-modifier-border-hover:var(--ui4);--background-modifier-border-focus:var(--ui4);--background-modifier-success:var(--color-green);--background-divider:var(--ui4);--interactive-hover:var(--ui4);--interactive-accent:var(--bg4);--interactive-accent-hover:var(--ax3);--quote-opening-modifier:var(--ui4);--modal-border:var(--ui4);--icon-color:var(--tx2);--icon-color-hover:var(--tx2);--icon-color-active:var(--tx1);--icon-hex:var(--mono0);--text-normal:var(--tx1);--text-bold:var(--tx1);--text-italic:var(--tx1);--text-muted:var(--tx2);--text-faint:var(--tx3);--text-accent:var(--ax1);--text-accent-hover:var(--ax2);--text-on-accent:white;--text-selection:var(--hl1);--text-code:var(--tx4);--text-error:var(--color-red);--text-blockquote:var(--tx2);--title-color:var(--tx1);--title-color-inactive:var(--tx2)}.theme-light{--interactive-normal:var(--bg1);--interactive-accent-rgb:220,220,220;--text-highlight-bg:rgba(255, 225, 0, 0.5);--text-highlight-bg-active:rgba(0, 0, 0, 0.1);--background-modifier-error:rgba(255,0,0,0.14);--background-modifier-error-hover:rgba(255,0,0,0.08);--shadow-color:rgba(0, 0, 0, 0.1);--btn-shadow-color:rgba(0, 0, 0, 0.05)}.theme-dark{--interactive-normal:var(--bg3);--interactive-accent-rgb:66,66,66;--text-highlight-bg:rgba(255, 177, 80, 0.3);--text-highlight-bg-active:rgba(255, 255, 255, 0.1);--background-modifier-error:rgba(255,20,20,0.12);--background-modifier-error-hover:rgba(255,20,20,0.18);--background-modifier-box-shadow:rgba(0, 0, 0, 0.3);--shadow-color:rgba(0, 0, 0, 0.3);--btn-shadow-color:rgba(0, 0, 0, 0.2)}.alt-title .page-header,.hide-title .page-header{display:none}.hide-title.markdown-preview-view div:nth-child(4) h1{margin-top:.25em;font-variant:var(--page-title-variant);letter-spacing:-.015em;line-height:var(--page-title-line-height);font-size:var(--page-title-size);font-style: var(--body-font-family);color:var(--page-title-color);font-weight:var(--page-title-weight);font-style:var(--page-title-style);font-family:var;border:none}.h1-borders h1{border-bottom:1px solid var(--ui4);padding-bottom:.5em}.table-col-1-150.markdown-preview-view td:first-child{width:150px}.table-col-1-200.markdown-preview-view td:first-child{width:200px}.table-100 table,.table-cards table,.table-full table{width:100%}.table-small table{--table-text-size:85%}.table-tiny table{--table-text-size:75%}.row-hover{--table-edge-cell-padding-first:10px}.row-alt{--table-row-alt-background:var(--background-table-rows);--table-edge-cell-padding-first:10px}.col-alt .markdown-rendered:not(.cards){--table-column-alt-background:var(--background-table-rows)}.table-tabular table{font-variant-numeric:tabular-nums}.table-lines{--table-border-width:var(--border-width);--table-header-border-width:var(--border-width);--table-column-first-border-width:var(--border-width);--table-column-last-border-width:var(--border-width);--table-row-last-border-width:var(--border-width);--table-edge-cell-padding:10px}.table-nowrap{--table-white-space:nowrap}.table-nowrap .table-wrap,.trim-cols{--table-white-space:normal}.table-numbers table{counter-reset:section}.table-numbers table>thead>tr>th:first-child::before{content:" ";padding-right:.5em;display:inline-block;min-width:2em}.table-numbers table>tbody>tr>td:first-child::before{counter-increment:section;content:counter(section) " ";text-align:center;padding-right:.5em;display:inline-block;min-width:2em;color:var(--text-faint);font-variant-numeric:tabular-nums}.row-lines-off .table-view-table>tbody>tr>td,.row-lines-off table tbody>tr:last-child>td,.row-lines-off table tbody>tr>td{border-bottom:none}.row-lines .table-view-table>tbody>tr>td,.row-lines table tbody>tr>td{border-bottom:var(--table-border-width) solid var(--table-border-color)}.row-lines table tbody>tr:last-child>td{border-bottom:none}.col-lines .table-view-table thead>tr>th:not(:last-child),.col-lines .table-view-table>tbody>tr>td:not(:last-child),.col-lines table tbody>tr>td:not(:last-child){border-right:var(--table-border-width) solid var(--background-modifier-border)}.row-hover{--table-row-background-hover:hsla( var(--accent-h), 50%, 80%, 20% )}.theme-dark .row-hover,.theme-dark.row-hover{--table-row-background-hover:hsla( var(--accent-h), 30%, 40%, 20% )}img[src$="#outline"],span[src$="#outline"] img{border:1px solid var(--ui4)}.published-container img[src$="#interface"],.published-container span[src$="#interface"] img{border:1px solid var(--4);box-shadow:0 .5px .9px rgba(0,0,0,.021),0 1.3px 2.5px rgba(0,0,0,.03),0 3px 6px rgba(0,0,0,.039),0 10px 20px rgba(0,0,0,.06);margin-top:10px;margin-bottom:15px;border-radius:var(--radius-m)}.theme-dark img[src$="#invert"],.theme-dark span[src$="#invert"] img{filter:invert(1) hue-rotate(180deg);mix-blend-mode:screen}.theme-light img[src$="#invertW"],.theme-light span[src$="#invertW"] img{filter:invert(1) hue-rotate(180deg)}img[src$="#circle"],span[src$="#circle"] img{border-radius:50%;aspect-ratio:1/1}body{--img-grid-fit:cover;--img-grid-background:transparent;--img-grid-gap:0.5rem}@media (max-width:400pt){body{--img-grid-gap:0.25rem}}.img-grid-ratio{--image-grid-fit:contain}.img-grid .image-embed{line-height:0;display:flex}.img-grid .image-embed.is-loaded img{background-color:var(--img-grid-background)}.img-grid .image-embed.is-loaded img:active{background-color:transparent}.img-grid .markdown-preview-section>div:has(.image-embed)>p{display:grid;margin-block-start:var(--img-grid-gap);margin-block-end:var(--img-grid-gap);grid-column-gap:var(--img-grid-gap);grid-row-gap:0;grid-template-columns:repeat(auto-fit,minmax(0,1fr))}.img-grid .markdown-preview-section>div:has(.image-embed)>p>br{display:none}.img-grid .markdown-preview-section>div:has(.image-embed)>p>img{object-fit:var(--img-grid-fit);align-self:stretch;height:100%}.img-grid .markdown-preview-section>div:has(.image-embed)>p>.internal-embed img{object-fit:var(--img-grid-fit);align-self:left;height:100%}.img-zoom .image-embed{cursor:zoom-in}.lightbox{z-index:99999;position:fixed;width:100%;height:100%;max-width:100%;top:0;left:0;background:var(--img-zoom-background);display:flex;align-items:center;justify-content:center;height:100%}.lightbox .internal-embed.image-embed{max-width:var(--img-zoom-max-width);max-height:var(--img-zoom-max-height);cursor:var(--img-zoom-in-cursor);display:flex}.lightbox img{cursor:var(--img-zoom-out-cursor);object-fit:contain;width:auto}.cards table{--table-width:100%;--table-edge-cell-padding-first:calc(var(--cards-padding)/2);--table-edge-cell-padding-last:calc(var(--cards-padding)/2);--table-cell-padding:calc(var(--cards-padding)/3) calc(var(--cards-padding)/2);line-height:1.3}.cards table tbody{clear:both;padding:.5rem 0;display:grid;grid-template-columns:var(--cards-columns);grid-column-gap:0.75rem;grid-row-gap:0.75rem}.cards table>tbody>tr{background-color:var(--cards-background);border:var(--cards-border-width) solid var(--background-modifier-border);display:flex;flex-direction:column;margin:0;padding:0 0 calc(var(--cards-padding)/3) 0;border-radius:6px;overflow:hidden;transition:box-shadow .15s linear;max-width:var(--cards-max-width)}.cards table>tbody>tr:hover{border:var(--cards-border-width) solid var(--background-modifier-border-hover);box-shadow:0 4px 6px 0 rgba(0,0,0,.05),0 1px 3px 1px rgba(0,0,0,.025);transition:box-shadow .15s linear}.cards table tbody>tr>td:first-child{font-weight:var(--bold-weight);border:none}.cards table tbody>tr>td:first-child a{display:block}.cards table tbody>tr>td:last-child{border:none}.cards table tbody>tr>td:not(:first-child){font-size:calc(var(--table-text-size) * .9);color:var(--text-muted)}.cards table tbody>tr>td>*{padding:calc(var(--cards-padding)/3) 0}.cards table tbody>tr>td:not(:last-child):not(:first-child){padding:4px 0;border-bottom:1px solid var(--background-modifier-border);width:calc(100% - var(--cards-padding));margin:0 calc(var(--cards-padding)/2)}.cards table tbody>tr>td a{text-decoration:none}.cards table tbody>tr>td>button{width:100%;margin:calc(var(--cards-padding)/2) 0}.cards table tbody>tr>td:last-child>button{margin-bottom:calc(var(--cards-padding)/6)}.cards table tbody>tr>td>ul{width:100%;padding:.25em 0!important;margin:0 auto!important}.cards table tbody>tr>td:has(img){padding:0!important;background-color:var(--background-secondary);display:block;margin:0;width:100%}.cards table tbody>tr>td img{aspect-ratio:var(--cards-aspect-ratio);width:100%;object-fit:var(--cards-image-fit);max-height:var(--cards-image-height);background-color:var(--background-secondary);vertical-align:bottom}.cards table thead{display:none}.list-cards.markdown-preview-view .list-bullet,.list-cards.markdown-preview-view .list-collapse-indicator,.list-cards.markdown-preview-view.markdown-rendered.show-indentation-guide li>ul::before{display:none}.list-cards.markdown-preview-view div>ul{display:grid;gap:.25rem;grid-template-columns:var(--cards-columns);padding:0;line-height:var(--line-height-tight)}.list-cards.markdown-preview-view div>ul>li{background-color:var(--cards-background);padding:calc(var(--cards-padding)/2);border-radius:var(--radius-s);border:var(--cards-border-width) solid var(--background-modifier-border);overflow:hidden}.list-cards.markdown-preview-view div>ul .image-embed{padding:0;display:block;background-color:var(--background-secondary);border-radius:var(--image-radius)}.list-cards.markdown-preview-view div>ul .image-embed img{aspect-ratio:var(--cards-aspect-ratio);object-fit:var(--cards-image-fit);max-height:var(--cards-image-height);background-color:var(--background-secondary);vertical-align:bottom}.list-cards.markdown-preview-view div>ul>li>a{--link-decoration:var(--hl1);--link-external-decoration:var(--hl1);font-weight:var(--bold-weight)}.list-cards.markdown-preview-view div ul>li:hover{border-color:var(--background-modifier-border-hover)}.list-cards.markdown-preview-view div ul ul{display:block;width:100%;color:var(--text-muted);font-size:var(--font-smallest);margin:calc(var(--cards-padding)/-4) 0;padding:calc(var(--cards-padding)/2) 0}.list-cards.markdown-preview-view div ul ul ul{padding-bottom:calc(var(--cards-padding)/4)}.list-cards.markdown-preview-view div ul ul>li{display:block}.cards.cards-16-9,.list-cards.cards-16-9{--cards-aspect-ratio:16/9}.cards.cards-1-1,.list-cards.cards-1-1{--cards-aspect-ratio:1/1}.cards.cards-2-1,.list-cards.cards-2-1{--cards-aspect-ratio:2/1}.cards.cards-2-3,.list-cards.cards-2-3{--cards-aspect-ratio:2/3}.cards.cards-cols-1,.list-cards.cards-cols-1{--cards-columns:repeat(1, minmax(0, 1fr))}.cards.cards-cols-2,.list-cards.cards-cols-2{--cards-columns:repeat(2, minmax(0, 1fr))}.cards.cards-cover,.list-cards.cards-cover{--cards-image-fit:cover}.cards.cards-align-bottom table.dataview tbody>tr>td:last-child,.list-cards.cards-align-bottom table.dataview tbody>tr>td:last-child{margin-top:auto}@media (max-width:400pt){.cards table.dataview tbody>tr>td:not(:first-child){font-size:80%}}@media (min-width:400pt){.cards-cols-3{--cards-columns:repeat(3, minmax(0, 1fr))}.cards-cols-4{--cards-columns:repeat(4, minmax(0, 1fr))}.cards-cols-5{--cards-columns:repeat(5, minmax(0, 1fr))}.cards-cols-6{--cards-columns:repeat(6, minmax(0, 1fr))}.cards-cols-7{--cards-columns:repeat(7, minmax(0, 1fr))}.cards-cols-8{--cards-columns:repeat(8, minmax(0, 1fr))}}.markdown-preview-view code{color:var(--tx4);font-size:.85em}.theme-light :not(pre)>code[class*=language-],.theme-light pre[class*=language-]{background-color:var(--bg2)}iframe,img{border-radius:var(--image-radius)}input[type=email],input[type=number],input[type=password],input[type=search],input[type=text]{border-color:var(--ui4)}input[type=email]:hover,input[type=number]:hover,input[type=password]:hover,input[type=search]:hover,input[type=text]:hover{border-color:var(--ui4)}input[type=email]:active,input[type=email]:focus,input[type=number]:active,input[type=number]:focus,input[type=password]:active,input[type=password]:focus,input[type=search]:active,input[type=search]:focus,input[type=text]:active,input[type=text]:focus{border-color:var(--ui4);box-shadow:0 0 0 2px var(--ui4)}ol>li::marker,ul>li::marker{color:var(--tx3)}body{--table-header-border-width:1px;--table-column-first-border-width:1px;--table-column-last-border-width:1px;--table-row-last-border-width:1px;--table-edge-cell-padding-first:10px;--table-edge-cell-padding-last:10px;--table-cell-padding:2px 5px;--table-header-size:var(--table-text-size)}.markdown-preview-view td,.markdown-preview-view th{padding:var(--table-cell-padding)}.markdown-preview-view td:first-child,.markdown-preview-view th:first-child{padding-left:var(--table-edge-cell-padding-first)}.markdown-preview-view td:last-child,.markdown-preview-view th:last-child{padding-right:var(--table-edge-cell-padding-last)}.markdown-preview-view .tag:not(.token){background-color:#f0eee5;border:0px solid var(--ui4);color:var(--tx2);font-size:14px;font-family: var(--body-font-family),serif;padding: 2px;}.tooltip{display:none}.site-footer {font-size: 0px;font-family: var(--body-font-family)};.site-footer::after {content: 'by @arkadiuszlenkiewicz with Obsidian';color: grey;font-size: 12px;}.search-view-outer {padding-right: 50px !important;}.search-view-container input::placeholder {font-size: 0px !important;}.search-view-container input {font-size: 13px;font-family: var(--body-font-family);background-color: transparent;padding: 5px 10px;border-radius: 4px;border: 1px;border-color: var(--ui4)}.published-section-header {height: 0; width: 0;overflow: hidden;}.publish.graph.renderer .hidePowerTag = "true";.site-body-left-column-site-name{font-size: 15px;}.site-header-text {color: var(--site-name-color);cursor: pointer;font-family: var(--body-font-family);font-size: 15px;font-weight: var(--site-name-weight);flex: 1 0 0;text-decoration:none;}.site-body-left-column-site-logo img {width: 100px;filter: var(--logo-mode);font-family: var(--body-font-family);}.site-body-left-column-site-logo {text-align: left;font-family: var(--body-font-family);}