diff options
Diffstat (limited to 'style.css')
| -rw-r--r-- | style.css | 190 |
1 files changed, 116 insertions, 74 deletions
@@ -191,13 +191,31 @@ img { max-width: none; } -mjx-container[jax="CHTML"] { +mjx-container[jax="CHTML"][display="true"] { text-align: left !important; - background: rgba(212, 163, 115, 0.05); /* Uses a hint of your --quote-accent */ + background: rgba(212, 163, 115, 0.05); padding: 1.5rem; border-left: 2px solid var(--quote-accent); margin: 2rem 0 !important; overflow-x: auto; + + /* Hide scrollbar for Firefox */ + scrollbar-width: none; + /* Hide scrollbar for IE/Edge */ + -ms-overflow-style: none; +} + +/* Hide scrollbar for Chrome, Safari and Opera */ +mjx-container[jax="CHTML"][display="true"]::-webkit-scrollbar { + display: none; +} + +/* Inline MathJax (Inside paragraphs) */ +mjx-container[jax="CHTML"]:not([display="true"]) { + padding: 0; + margin: 0; + background: transparent; + border: none; } a { @@ -223,24 +241,33 @@ a { height: 100vh; width: 250px; position: fixed; - z-index: 10; /* Ensure it stays above content */ + z-index: 10; top: 0; left: 0; - padding-top: 0; /* Removed the 20px space at the top */ + padding-top: 0; background: var(--toc-bg); border-right: 1px solid var(--quote-accent); - overflow-y: auto; /* Allow scrolling if TOC is very long */ + overflow-y: auto; overflow-x: hidden; - - /* Technical Header for TOC */ + scrollbar-width: none; + + &::-webkit-scrollbar { display: none; } + + h2 { + display: none !important; + } + + /* 2. Insert the aligned futuristic header */ &::before { - content: "INDEX // NAVIGATION"; + content: "NAVIGATION"; display: block; - padding: 20px 16px 10px 16px; + /* Padding math: 19px left matches the link text exactly */ + padding: 24px 16px 12px 19px; font-family: "Inconsolata"; - font-size: 10px; + font-size: 11px; + font-weight: bold; letter-spacing: 2px; - color: var(--quote-accent); + color: var(--text-main); border-bottom: 1px solid rgba(212, 163, 115, 0.2); margin-bottom: 10px; } @@ -251,14 +278,16 @@ a { margin: 0; a { - padding: 8px 16px; display: block; - font-size: 14px; - font-family: "Inconsolata"; /* Using mono for the 'futuristic' look */ - white-space: nowrap; /* Keep text on one line */ - overflow: hidden; /* Hide overflow */ - text-overflow: ellipsis; /* Use "..." for long titles */ - transition: all 0.2s ease; + width: 218px; + padding: 10px 16px; + font-size: 13px; + font-family: "Inconsolata"; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); + border-left: 3px solid transparent; &, &:visited { color: var(--text-main); @@ -268,49 +297,29 @@ a { &:hover { background-color: var(--text-main); color: var(--bg-main); - padding-left: 22px; /* Slight 'slide' effect on hover */ + padding-left: 22px; + border-left: 3px solid var(--quote-accent); } } - } -} -/* #table-of-contents { */ -/* height: 100%; */ -/* width: 250px; */ -/* position: fixed; */ -/* z-index: 1; */ -/* top: 0; */ -/* left: 0; */ -/* font-size: 0px; */ -/* overflow-x: hidden; */ -/* padding-top: 20px; */ -/* border-right: 1px; */ -/* background: var(--toc-bg); */ -/* ul { */ -/* list-style-type: none; */ -/* padding-left: 0; */ -/* a { */ -/* padding: 6px 8px 6px 16px; */ -/* display: block; */ -/* font-size: 15px; */ - -/* &, &:visited { */ -/* color: var(--text-main); */ -/* background-color: transparent; */ -/* text-decoration: none; */ -/* } */ - -/* &:hover, &:visited:hover { */ -/* color: var(--bg-main); */ -/* background-color: var(--text-main); */ -/* } */ -/* } */ -/* } */ + ul { + a { + padding-left: 32px; + font-size: 12px; + opacity: 0.8; + width: 202px; /* Adjusted width for nesting */ + + &:hover { + padding-left: 38px; + } + } + } + } -/* @media (max-width: 1250px) { */ -/* display: none; */ -/* } */ -/* } */ + @media (max-width: 1250px) { + display: none; + } +} .content { margin-left: 160px; @@ -329,6 +338,14 @@ a { overflow-x: auto; font-size: 0.9rem; box-shadow: none; + + scrollbar-width: none; + -ms-overflow-style: none; +} + +.src::-webkit-scrollbar, +.example::-webkit-scrollbar { + display: none; } #postamble { @@ -430,29 +447,28 @@ figcaption { } .author, .date { - display: inline; /* Keep them on the same line */ + display: inline; font-family: "Lora"; font-style: italic; font-size: 1.1rem; color: color-mix(in srgb, var(--text-main) 70%, gray); } -/* Add the "by" prefix using a pseudo-element */ -.author::before { - content: "by "; - font-family: "Inconsolata"; /* Technical contrast */ - font-style: normal; - font-weight: bold; - text-transform: uppercase; - font-size: 0.8rem; - letter-spacing: 1px; - margin-right: 4px; -} - -/* Add a comma separator between author and date if both exist */ -.author:not(:last-child)::after { - content: ", "; - font-style: normal; +.author { + &::before { + content: "by "; + font-family: "Inconsolata"; + font-style: normal; + font-weight: bold; + text-transform: uppercase; + font-size: 0.8rem; + letter-spacing: 1px; + margin-right: 4px; + } + &:not(:last-child)::after { + content: ", "; + font-style: normal; + } } header, .title + p, .subtitle + p { @@ -460,3 +476,29 @@ header, .title + p, .subtitle + p { border-bottom: 1px double var(--quote-accent); padding-bottom: 1rem; } + +@media (max-width: 768px) { + body { + max-width: 100%; + padding: 0 15px; + box-sizing: border-box; + } + + h1 { font-size: 2rem; } + h2 { font-size: 1.5rem; } + + img, blockquote, .src, .example, mjx-container[jax="CHTML"][display="true"] { + max-width: 100%; + box-sizing: border-box; + } + + blockquote { + padding: 1em 15px 1em 40px; + width: 100%; + } + + .src, .example, mjx-container[jax="CHTML"][display="true"] { + width: 100%; + overflow-x: auto; + } +} |