/* Dark theme overrides, layered on top of main.min.css. Light mode = the original theme, untouched. Dark mode is activated by data-theme="dark" on (set by the inline script in _includes/_head.html and assets/js/theme-toggle.js). */ html[data-theme="dark"] { --bg-color: #1b1b1b; --bg-alt-color: #252525; --text-color: #d8d8d8; --muted-color: #9a9a9a; --link-color: #7cc4e8; --border-color: #3a3a3a; --code-bg-color: #2a2a2a; } /* Make the layout indifferent to the vertical scrollbar: always reserve the bar/gutter so short pages (e.g. Publications) don't shift the centered layout compared to long pages */ html { overflow-y: scroll; /* classic scrollbars: bar is always present */ scrollbar-gutter: stable; /* modern browsers: gutter reserved regardless */ } /* Uniform icon column in the author-bio sidebar: narrow glyphs (map marker, university) take the same width as the square GitHub/e-Mail icons */ .author-social .fa, .author-social .ai { display: inline-block; width: 1.15em; text-align: center; vertical-align: baseline; } /* Keep the footer at the viewport bottom even on short pages */ body { display: flex; flex-direction: column; min-height: 100vh; } .footer-wrap { margin-top: auto; } /* "On this page" table of contents (built by assets/js/toc.js). Lives in its own right-hand pane, mirroring the author-bio pane on the left: starts level with the article and sticks near the viewport top while scrolling. Hidden on small screens. */ .article-toc-side { display: none; } /* Same mechanism as jayrobwilliams.github.io (Minimal Mistakes .sidebar__right): fixed width, floated right, pulled into the article's right gutter with a negative margin, sticky while scrolling. */ @media only screen and (min-width: 64em) { .article-toc-side { display: block; position: sticky; float: right; top: 2em; width: 12em; margin-right: -14em; /* width + 2em gap from the article edge */ padding-left: 1em; z-index: 10; } } /* note: class is "page-toc" because the theme's own ".toc" component (absolute-positioned gray boxes) would otherwise take over */ .page-toc { font-size: 14px; font-size: 0.875rem; line-height: 1.5; background: #fff; border: 1px solid #e3e3e3; border-radius: 4px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08); overflow: hidden; } .page-toc-title { margin: 0; padding: 8px 12px; font-size: 0.875rem; color: #fff; background: #7a8288; } .page-toc-title .fa { margin-right: 4px; } .page-toc ul, .page-toc li { padding: 0; margin: 0; list-style: none; } .page-toc li { border-bottom: 1px solid #eee; } .page-toc li:last-child { border-bottom: none; } .page-toc li::before { content: none; } .page-toc a { display: block; padding: 8px 12px; color: #646769; border-bottom: none; transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out; } .page-toc a:hover { color: #000; background: #f2f2f2; } /* Indent sub-headings (e.g. h2 under h1) */ .page-toc .toc-sub a { padding-left: 1.8em; } html[data-theme="dark"] .page-toc { background: var(--bg-alt-color); border-color: var(--border-color); } html[data-theme="dark"] .page-toc li { border-bottom-color: var(--border-color); } html[data-theme="dark"] .page-toc a { color: var(--muted-color); } html[data-theme="dark"] .page-toc a:hover { color: #fff; background: #333; } /* About page: roomier spacing between paragraphs */ .about-page .article-wrap p { margin-bottom: 2.4em; } /* CV page: first-level bullets sit at the margin, on par with the section titles (the indent comes from the browser's default ul padding of 40px, not from any theme rule) */ .cv-page .article-wrap > ul { padding-left: 1.2em; /* just enough room for the bullet marker */ margin-left: 0; } /* ...and keep sub-levels from drifting too far right */ .cv-page .article-wrap ul ul { padding-left: 1.5em; } /* ===== Blog list (style adapted from garima-bazard.github.io) ===== */ .blog-list-item { margin-bottom: 1.8rem; padding-bottom: 1.4rem; border-bottom: 1px solid #e8e8e8; } .blog-list-item:last-child { border-bottom: none; } .blog-list-item h2 { margin-top: 0; margin-bottom: 0.2rem; font-size: 1.5rem; line-height: 1.3; } .blog-list-item h2 a { color: #343434; text-decoration: none; border-bottom: none; } .blog-list-item h2 a:hover { color: #010101; } .blog-list-date, .post-meta-date { font-size: 0.8rem; color: #9a9a9a; font-family: 'PT Sans Narrow', sans-serif; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 0.4rem; } .blog-list-desc { font-size: 0.95rem; color: #6b6b6b; line-height: 1.6; margin: 0; } /* Thumbnails embedded in portfolio excerpts */ .blog-list-desc img { display: block; max-width: 100%; margin-top: 0.8rem; border-radius: 4px; } /* ===== Blog post header ===== */ .post-back-link { display: inline-block; margin-bottom: 1.2rem; font-size: 0.85rem; color: #9a9a9a; text-decoration: none; font-family: 'PT Sans Narrow', sans-serif; text-transform: uppercase; letter-spacing: 0.5px; border-bottom: none; } .post-back-link:hover { color: #343434; } .post-back-link:before { content: "\2190\00a0"; } .post-meta-header { margin-bottom: 2rem; padding-bottom: 1rem; border-bottom: 1px solid #e8e8e8; } .post-meta-header h1 { margin-bottom: 0.3rem; } .post-meta-date { margin-bottom: 0; } /* ===== Blog post content typography ===== */ .post .article-wrap { line-height: 1.8; } .post .article-wrap p { margin-bottom: 1.2rem; } .post .article-wrap h1 { font-size: 1.8rem; margin-top: 2.5rem; margin-bottom: 1rem; } .post .article-wrap h2 { font-size: 1.5rem; margin-top: 2.2rem; margin-bottom: 0.8rem; border-bottom: 1px solid #e8e8e8; padding-bottom: 0.4rem; } .post .article-wrap h3 { font-size: 1.25rem; margin-top: 1.8rem; margin-bottom: 0.6rem; } .post .article-wrap img { max-width: 100%; height: auto; border-radius: 4px; } .post .article-wrap ul, .post .article-wrap ol { margin-bottom: 1.2rem; padding-left: 1.8rem; } .post .article-wrap li { margin-bottom: 0.4rem; line-height: 1.7; } .post .article-wrap p > a, .post .article-wrap li > a { color: #308cbc; border-bottom: none; } .post .article-wrap p > a:hover, .post .article-wrap li > a:hover { border-bottom: 1px solid #308cbc; } /* Dark-mode counterparts */ html[data-theme="dark"] .blog-list-item, html[data-theme="dark"] .post-meta-header, html[data-theme="dark"] .post .article-wrap h2 { border-bottom-color: var(--border-color); } html[data-theme="dark"] .blog-list-item h2 a { color: var(--text-color); } html[data-theme="dark"] .blog-list-item h2 a:hover { color: #fff; } html[data-theme="dark"] .blog-list-desc, html[data-theme="dark"] .blog-list-date, html[data-theme="dark"] .post-meta-date, html[data-theme="dark"] .post-back-link { color: var(--muted-color); } html[data-theme="dark"] .post-back-link:hover { color: var(--text-color); } html[data-theme="dark"] .post .article-wrap p > a, html[data-theme="dark"] .post .article-wrap li > a { color: var(--link-color); } /* Smooth the switch */ body, .navigation-wrapper, .footer-wrap, code, pre, div.bibtex, .image-wrap:after, .page-toc, .page-toc li { transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, border-color 0.2s ease-in-out; } html[data-theme="dark"] body { color: var(--text-color); background-color: var(--bg-color); } /* The decorative notch under the feature image is a CSS-border triangle hardcoded to white in the theme — recolor it to the dark background */ html[data-theme="dark"] .image-wrap:after { border-bottom-color: var(--bg-color); } html[data-theme="dark"] h1, html[data-theme="dark"] h2, html[data-theme="dark"] h3, html[data-theme="dark"] h4, html[data-theme="dark"] h5, html[data-theme="dark"] h6 { color: var(--text-color); } html[data-theme="dark"] a { color: var(--link-color); } html[data-theme="dark"] a:visited { color: #a08fd0; } html[data-theme="dark"] a:hover, html[data-theme="dark"] a:focus { color: #a5d8f3; } /* Top navigation and site name */ html[data-theme="dark"] .site-name a, html[data-theme="dark"] #site-nav a { color: var(--text-color); } html[data-theme="dark"] .site-name a:hover, html[data-theme="dark"] #site-nav a:hover { color: #fff; } /* Code blocks */ html[data-theme="dark"] code, html[data-theme="dark"] pre { color: var(--text-color); background-color: var(--code-bg-color); border-color: var(--border-color); } /* Horizontal rules, borders, blockquotes */ html[data-theme="dark"] hr { border-color: var(--border-color); background-color: var(--border-color); } html[data-theme="dark"] blockquote { color: var(--muted-color); border-left-color: var(--border-color); } /* Author bio sidebar and footer */ html[data-theme="dark"] .article-author-side, html[data-theme="dark"] .footer-wrap, html[data-theme="dark"] .footer-wrap p, html[data-theme="dark"] .footer-wrap span { color: var(--muted-color); } html[data-theme="dark"] .footer-wrap a, html[data-theme="dark"] .footer-wrap a:visited { color: var(--muted-color); } html[data-theme="dark"] .image-credit, html[data-theme="dark"] .image-credit a { color: var(--muted-color); } /* Form elements (e.g. search box on the 404 page) */ html[data-theme="dark"] input, html[data-theme="dark"] textarea, html[data-theme="dark"] select { color: var(--text-color); background-color: var(--bg-alt-color); border-color: var(--border-color); } /* BibTeX boxes on the publications page (inline-styled in the layout) */ html[data-theme="dark"] div.bibtex { background: var(--bg-alt-color); border-color: var(--border-color); } /* Theme toggle button (both themes). Like phyra47/academicpages: the button lives inside #site-nav; on non-mobile widths the nav becomes a flex row and the button is pushed to its right edge. */ #theme-toggle { padding: 0; margin: 0; font: inherit; font-size: 1rem; /* same size as the nav links */ color: inherit; cursor: pointer; background: none; border: none; } /* Mobile (stacked nav): pin to the top-right of the nav bar area */ .navigation-wrapper { position: relative; } #theme-toggle { position: absolute; top: 2em; /* wrapper has 2em top padding */ right: 8.333%; /* matches the theme's mobile grid margin */ } /* Desktop: in-flow flex item pushed to the right end of the nav links row (phyra47 approach), with a right margin mirroring the site name's left margin so the button sits opposite the site name, not at the screen edge. Margins are % of .top-navigation (75vw / 66.66vw wide respectively). */ @media only screen and (min-width: 37.5em) { #site-nav { display: flex; align-items: center; /* same as phyra47's .greedy-nav */ } #site-nav > ul { flex: 1; min-width: 0; } #theme-toggle { position: static; flex-shrink: 0; margin-left: auto; margin-right: 5.555%; /* = 4.166% of viewport, mirrors .site-name margin */ } } /* From 64em the right TOC sidebar exists: align the toggle's right edge with the sidebar's right edge (= article right edge + 14em, see .article-toc-side). Percentages are of .top-navigation (75vw here), so 33.333% = 25vw. */ @media only screen and (min-width: 64em) { #theme-toggle { margin-right: calc(33.333% - 14em); } } /* ≥86.375em: article ends at 70.833vw; nav is 66.666vw wide, so 43.75% = 29.166vw and the toggle lands at 70.833vw + 14em. */ @media only screen and (min-width: 86.375em) { #theme-toggle { margin-right: calc(43.75% - 14em); } } #theme-toggle:hover { opacity: 0.7; }