custom.css (3811B)
1 /* Hugo-output tweaks: things the static design source doesn't cover 2 because it was hand-authored HTML rather than markdown-rendered. */ 3 4 /* ----- Home: scope the .bullets style to markdown-rendered <ul> ----- */ 5 .tui .bullets-wrap ul { 6 list-style: none; 7 padding: 0; 8 margin: 0 0 26px; 9 display: flex; 10 flex-direction: column; 11 } 12 .tui .bullets-wrap ul li { 13 padding: 4px 10px 4px 22px; 14 position: relative; 15 color: var(--fg); 16 font-size: 14px; 17 border-left: 2px solid transparent; 18 } 19 .tui .bullets-wrap ul li::before { 20 content: "·"; 21 position: absolute; 22 left: 10px; top: 4px; 23 color: var(--muted); 24 font-weight: 700; 25 } 26 .tui .bullets-wrap a { color: var(--link); text-decoration: none; } 27 .tui .bullets-wrap a:hover { color: var(--hl); text-decoration: underline; text-decoration-style: dotted; } 28 .tui .bullets-wrap strong { color: var(--fg-bright); } 29 .tui .bullets-wrap p { margin: 0 0 18px; color: var(--fg); font-size: 14px; } 30 31 /* ----- Single-post TOC: style Hugo's <nav id="TableOfContents"> to 32 approximate the design's tree-branch TOC ----- */ 33 .tui #TableOfContents > ul { 34 list-style: none; 35 padding: 0; 36 margin: 0; 37 display: flex; 38 flex-direction: column; 39 gap: 4px; 40 counter-reset: tocnum; 41 } 42 .tui #TableOfContents > ul > li { 43 counter-increment: tocnum; 44 } 45 .tui #TableOfContents > ul > li > a { 46 color: var(--fg); 47 text-decoration: none; 48 font-size: 12.5px; 49 border-bottom: 1px dotted transparent; 50 line-height: 1.5; 51 } 52 .tui #TableOfContents > ul > li > a::before { 53 content: counter(tocnum, decimal-leading-zero) " "; 54 color: var(--accent); 55 font-size: 11px; 56 } 57 .tui #TableOfContents > ul > li > a:hover { 58 color: var(--hl); 59 border-bottom-color: var(--accent); 60 } 61 .tui #TableOfContents > ul > li > ul { 62 list-style: none; 63 margin: 2px 0 6px; 64 padding: 0 0 0 26px; 65 display: flex; 66 flex-direction: column; 67 gap: 1px; 68 } 69 .tui #TableOfContents > ul > li > ul > li { 70 display: flex; 71 align-items: baseline; 72 line-height: 1.5; 73 } 74 .tui #TableOfContents > ul > li > ul > li::before { 75 content: "├── "; 76 color: var(--rule-bright); 77 white-space: pre; 78 user-select: none; 79 font-size: 12px; 80 } 81 .tui #TableOfContents > ul > li > ul > li:last-child::before { 82 content: "└── "; 83 } 84 .tui #TableOfContents > ul > li > ul > li > a { 85 color: var(--muted); 86 text-decoration: none; 87 font-size: 12px; 88 border-bottom: 1px dotted transparent; 89 } 90 .tui #TableOfContents > ul > li > ul > li:hover > a { 91 color: var(--hl); 92 border-bottom-color: var(--accent); 93 } 94 95 /* The TOC container "── on this page ──" head when wrapped in our aside */ 96 .tui .toc { margin: 0 0 22px; padding: 12px 14px; border: 1px solid var(--rule); background: transparent; font-size: 12px; color: var(--muted); } 97 .tui .toc-head { color: var(--accent); font-weight: 700; font-size: 10.5px; letter-spacing: 0.06em; margin-bottom: 8px; text-transform: lowercase; } 98 99 /* ----- Make Hugo-rendered post bodies pick up article.post styles 100 even if the markdown renderer adds an extra wrapper. The actual 101 heading/paragraph styles live in tui.css. ----- */ 102 .tui article.post > :first-child { margin-top: 0; } 103 104 /* Hugo renders code fences as <pre><code class="language-xxx">. Keep the 105 tui.css pre styling, just make sure inline class doesn't break it. */ 106 .tui article.post pre code[class*="language-"] { background: none; padding: 0; color: inherit; } 107 108 /* Constrain markdown-rendered images to the article width. */ 109 .tui article.post img { 110 display: block; 111 max-width: 100%; 112 height: auto; 113 margin: 16px auto; 114 border: 1px solid var(--rule); 115 } 116 .tui article.post figure { margin: 16px 0; } 117 .tui article.post figure img { margin: 0 auto; } 118 .tui article.post figure figcaption { 119 font-size: 11.5px; 120 color: var(--muted); 121 text-align: center; 122 margin-top: 6px; 123 }