/* CSS Reset: http://meyerweb.com/eric/tools/css/reset */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } /**************************************************/ /* Light theme by default; a .dark class on flips the palette. */ html { --bg: #ffffff; --text: #150c21; --muted: #a0a8b0; --link: rgb(20, 110, 190); background: var(--bg); color-scheme: light; } html.dark { --bg: #14121a; --text: #e8e6f0; --link: rgb(90, 170, 240); color-scheme: dark; } #theme-toggle { position: fixed; top: 0.75em; right: 0.75em; cursor: pointer; border: none; background: none; font-size: 1.2em; line-height: 1; padding: 0.25em; z-index: 1; /* stay clickable above #main when it spans the full width */ } #theme-toggle::before { content: '\1F311'; /* new moon */ } html.dark #theme-toggle::before { content: '\2600\FE0F'; /* sun */ } #body{ font-family: 'Asap', roboto, sans-serif; font-size: 1em; line-height: 1.5em; color: var(--text); } #main { width: 54em; margin: 0px auto; position: relative; min-height: 100vh; } a { text-decoration: none; color: var(--link); } a:hover { text-decoration: none; border-bottom: 1px solid var(--link); } i { font-style: italic; } b { font-weight: 700; } h1 { font-size: 2.4em; line-height: 2.4em; font-weight: 500; } /**************************************************/ /* Profile image and description. */ #intro { padding-top: 6em; display: flex; } #intro-text { width: 40em; float: left; } #intro-image { margin: 3em 0 0 2em; width: 12em; height: 12em; float: left; overflow: hidden; border-radius: 1em; } #intro-image img { width: 12em; } /**************************************************/ /* Section buttons. */ #menu { display: flex; } .menu-item { float: left; margin-right: 2em; } h2 { font-size: 1.6em; line-height: 2.4em; margin-top: 0.5em; color: var(--muted); } .selected h2 { color: var(--text); } .button { display: inline-block; cursor: pointer; border: none; background: none; color: var(--muted); font-size: 1.6em; line-height: 2.4em; margin-top: 0.5em; margin-right: 1em; float: left; padding: 0; } .button:hover { color: var(--text); } .button:active, .button.is-checked { color: var(--text); } .button-group:after { content: ''; display: block; clear: both; } /**************************************************/ /* Isotope grid list of items. */ .grid { padding-bottom: 6em; } /* clear fix */ .grid:after { content: ''; display: block; clear: both; } .description { margin-bottom: 1em; padding-bottom: 0.5em; } .list-item { width: 100%; line-height: 1em; margin-top: 1em; } .list-item p.date { display: inline-block; width: 3em; color: var(--muted); } /* Keep wrapped dated entries aligned with their text column. */ .list-item.highlight:not(.previews), .list-item.talk, .list-item.misc { box-sizing: border-box; padding-left: 3em; } .list-item.highlight:not(.previews) > p.date, .list-item.talk > p.date, .list-item.misc > p.date { margin-left: -3em; } /**************************************************/ /* Gallery of 3 preview videos. */ .previews { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; grid-auto-rows: minmax(100px, auto); height: 12.5em; } .previews video { border-radius: 5px; } .previews a:hover { border: none; } .preview1 { grid-column: 1; width: 100%; } .preview2 { grid-column: 2; width: 100%; } .preview3 { grid-column: 3; width: 100%; } /**************************************************/ /* Buttons for showing more or less highlights. */ .toggle-button { margin-top: 1em; } .toggle-button a { color: var(--muted); } .toggle-button a:hover { color: var(--link); } /**************************************************/ /* Publication details (thumbnail media, title, and description). */ .thumbnail { /* width: 21%;*/ width: 18%; float: left; margin-right: 2%; } .thumbnail:hover { border-bottom: none; } .thumbnail img { margin-top: 0.4em; border-radius: 5px; width: 100%; height: 100%; } .thumbnail video { margin-top: 0.4em; border-radius: 5px; width: 100%; height: 100%; } h3 { font-size: 1em; line-height: 1.5em; } h3 a { color: var(--text); } h3 a:hover { color: var(--link); } .publication { margin-bottom: 0.5em; } .publication p { font-size: 1em; line-height: 1.5em; color: var(--muted); } .project-description { width: 80%; float: left; } /**************************************************/ /* Subtle footer at the bottom of the page. */ #footer { color: var(--muted); position: absolute; left: 0; right: 0; bottom: 0; font-size: 0.8em; line-height: 1.5em; text-align: center; } /**************************************************/ /* Expandable paper summaries. */ .paper-summary { margin-top: 0.5em; } .paper-summary summary { display: inline-block; cursor: pointer; color: var(--muted); font-size: 0.95em; font-style: italic; list-style: none; user-select: none; } .paper-summary summary::-webkit-details-marker { display: none; } .paper-summary summary::before { content: "+"; display: inline-block; margin-right: 0.35em; } .paper-summary[open] summary::before { content: "\2212"; } .paper-summary summary:hover { color: var(--link); } .paper-summary p { max-width: 65ch; margin-top: 0.5em; } a:focus-visible, .button:focus-visible, .paper-summary summary:focus-visible { outline: 2px solid var(--link); outline-offset: 3px; } /**************************************************/ /* Responsive layout. Desktop rules above remain Andy's original styles. */ @media (max-width: 56em) { #main { width: auto; max-width: 100%; padding: 0 1.25em; box-sizing: border-box; } #intro { padding-top: 3em; flex-direction: column-reverse; align-items: flex-start; } #intro-text { width: 100%; float: none; } #intro-image { width: 8em; height: 8em; margin: 0 auto 1.5em; align-self: center; float: none; } #intro-image img { width: 8em; max-width: 100%; } h1 { margin-bottom: 0.5em; font-size: 2.2em; line-height: 1.2em; text-align: center; } #filters { flex-wrap: wrap; column-gap: 0; } .button { margin-right: 0.4em; font-size: 1.25em; line-height: 2em; } #filters .button:last-child { margin-right: 0; } .previews { width: 100%; height: auto; grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; gap: 0.75em; } .previews a { display: block; width: 100%; } .previews video { display: block; width: 100%; height: auto; } .preview1, .preview2, .preview3 { grid-column: 1; } .list-item { min-width: 0; } .list-item.publication { display: flex; flex-direction: column; align-items: flex-start; margin-bottom: 1.25em; } .thumbnail { width: 100%; max-width: 18em; margin: 0 0 0.75em; float: none; } .thumbnail img, .thumbnail video { display: block; max-width: 100%; height: auto; } .project-description { width: 100%; float: none; } .publication.description, .publication.toggle-button { display: block; } a { overflow-wrap: anywhere; } }