/* 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; } /**************************************************/ #body{ font-family: 'Asap', roboto, sans-serif; font-size: 20px; line-height: 1.5em; color: #150c21; } #main { width: 45em; margin: 0px auto; position: relative; min-height: 100vh; } a { text-decoration: none; color: rgb(20, 110, 190); } a:hover { text-decoration: none; border-bottom: 1px solid rgb(20, 110, 190); } i { font-style: italic; } b { font-weight: 700; } h1 { font-size: 2.4em; line-height: 3em; font-weight: 500; } /**************************************************/ /* Profile image and description. */ #intro { padding-top: 6em; display: flex; } #intro-text { width: 40em; float: left; } #intro-image { margin: 5.5em 0 0 2em; width: 12em; height: 12em; float: left; overflow: hidden; /* border-radius: 1em; */ } #intro-image img { width: 12em; } /**************************************************/ /* Section styling */ .section { margin-top: 2.5em; } .section:first-of-type { margin-top: 0.3em; } .section-title { font-size: 1.6em; line-height: 1.5em; margin-top: 0; margin-bottom: 0.5em; color: #150c21; } .section-content { padding-bottom: 0; } .clearfix { clear: both; } /**************************************************/ /* Isotope grid list of items. */ .grid { padding-bottom: 6em; } /* clear fix */ .grid:after { content: ''; display: block; clear: both; } .description { margin-bottom: 1em; } .list-item { width: 100%; line-height: 1em; margin-top: 1em; } .list-item p.date { display: inline-block; width: 3em; color: #a0a8b0; } .list-item.news b { color: #a0a8b0; font-weight: 700; } .news-list { list-style: disc; padding-left: 1.2em; } .news-list li { margin-top: 0.5em; line-height: 1.5em; } #email, #email a { font-size: 1em; font-style: normal; line-height: 1.5em; } /**************************************************/ /* Gallery of 3 preview videos. */ .previews { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; height: 12.5em; margin-bottom: 2em; } .previews img { width: 100%; height: 100%; object-fit: cover; border-radius: 5px; aspect-ratio: 4/3; } .previews a { display: block; height: 100%; } .previews a:hover { border: none; } /* These classes ensure each image spans its grid column */ .preview1 { grid-column: 1; } .preview2 { grid-column: 2; } .preview3 { grid-column: 3; } /**************************************************/ /* Buttons for showing more or less highlights. */ .toggle-button { margin-top: 2em; } .toggle-button a { color: #a0a8b0; } .toggle-button a:hover { color: rgb(20, 110, 190); } /**************************************************/ /* Publication details (thumbnail media, title, and description). */ .thumbnail { /* width: 21%;*/ width: 18%; float: left; margin-right: 2%; aspect-ratio: 4/3; /* Force 4:3 aspect ratio */ overflow: hidden; /* Ensure content doesn't overflow */ } .thumbnail:hover { border-bottom: none; } .thumbnail img, .thumbnail video { margin-top: 0.4em; border-radius: 5px; width: 100%; height: 100%; object-fit: cover; /* Ensure media fills the container while maintaining aspect ratio */ width: 100%; height: 100%; } h3 { font-size: 1em; line-height: 1.5em; } h3 a { color: #150c21; } h3 a:hover { color: rgb(20, 110, 190); } .publication { margin-bottom: 0.5em; } .publication p { font-size: 1em; line-height: 1.5em; color: #a0a8b0; } .project-description { width: 80%; float: left; } .title-like-name { font-family: 'Asap', roboto, sans-serif; color: #333333; font-weight: 400; } .haoyu-name { font-family: 'Asap', roboto, sans-serif; color: rgb(0, 0, 0); font-weight: 400; } strong { font-weight: 700; /* or 'bold' */ } /**************************************************/ /* Subtle footer at the bottom of the page. */ #footer { color: #a0a8b0; line-height: 2.5em; width: 100%; /* Make it full width */ text-align: center; /* Center the text */ margin-top: 4em; padding-bottom: 2em; }