/* * base.css — global layout for mihaiordean.com. * * Ported from the original style.css. What changed: * - A :root token system holds the palette, panel timing and the panel's * closed geometry, so the magic numbers live in one place. * - The panel is driven by the JS<->CSS contract (see panel.js): JS sets the * --panel-* custom properties on #content and toggles `is-open` on * #canvasContent; this stylesheet turns that into either an animated * geometry change (desktop) or a full-screen fade (mobile). * - The navbar reveal (was slideOutNavbar in JS) is a self-running load * animation needing no JS at all. The background fade-in (was showBGImage in * JS) is still CSS, triggered by the `background-ready` class main.js adds to * once the image has preloaded. * - The three near-identical mobile blocks are deduped into one shared query * plus a portrait-only and a landscape-only query for the dimensions that * actually differ. * * Breakpoint source of truth (mirrored only in the media queries below; JS no * longer hard-codes them — it reads element visibility instead): * portrait mobile: (orientation: portrait) and (max-width: 450px) and (max-height: 950px) * landscape mobile: (orientation: landscape) and (max-height: 450px) and (max-width: 950px) */ :root { /* Palette */ --color-bg: #000; --color-text: #000; --color-text-light: rgba(255, 255, 255, 1); --color-text-dark: rgba(22, 22, 22, 1); --color-panel: rgba(255, 255, 255, 0.8); --color-panel-mobile: rgba(255, 255, 255, 0.95); --color-nav-surface: rgba(0, 0, 0, 0.8); --color-nav-item: rgba(200, 0, 0, 0.6); --color-nav-item-hover: rgba(198, 223, 214, 1); --color-link: rgba(70, 154, 248, 1); --color-link-hover: rgba(255, 102, 51, 1); --color-accent: #b91f1f; --color-rule: rgba(190, 0, 0, 1); --color-footer-bg: rgba(0, 0, 0, 0.9); --color-footer-bg-mobile: rgba(0, 0, 0, 0.8); --color-footer-text: #ddd; --color-surface-dark: rgba(33, 33, 33, 1); --color-fullscreen-arrow: #ffffff; --color-fullscreen-arrow-hover: #ffb35b; /* Panel timing. --panel-transition is the leading dimension (and top); --panel-transition-fast is the trailing dimension, used with a 100ms delay. Open and close swap which dimension trails, matching the original formatContents() / closeLink() transitions. */ --panel-transition: 400ms; --panel-transition-fast: 200ms; /* Panel closed geometry. The open geometry comes from the --panel-* custom properties that panel.js copies from each nav item's data-* attributes. */ --panel-closed-top: 33vh; --panel-closed-left: 7.5vw; /* Navbar reveal */ --navbar-item-width: 155px; } /* PT Sans Narrow / PT Sans / PT Mono, self-hosted (paths relative to css/). */ @font-face { font-family: 'PT Sans Narrow'; font-style: normal; font-weight: 400; src: local(''), url('../fonts/pt-sans-narrow-v12-latin-regular.woff2') format('woff2'), url('../fonts/pt-sans-narrow-v12-latin-regular.woff') format('woff'); font-display: swap; } @font-face { font-family: 'PT Sans Narrow'; font-style: normal; font-weight: 700; src: local(''), url('../fonts/pt-sans-narrow-v12-latin-700.woff2') format('woff2'), url('../fonts/pt-sans-narrow-v12-latin-700.woff') format('woff'); font-display: swap; } @font-face { font-family: 'PT Sans'; font-style: normal; font-weight: 400; src: local(''), url('../fonts/pt-sans-v12-latin-regular.woff2') format('woff2'), url('../fonts/pt-sans-v12-latin-regular.woff') format('woff'); font-display: swap; } @font-face { font-family: 'PT Sans'; font-style: normal; font-weight: 700; src: local(''), url('../fonts/pt-sans-v12-latin-700.woff2') format('woff2'), url('../fonts/pt-sans-v12-latin-700.woff') format('woff'); font-display: swap; } @font-face { font-family: 'PT Mono'; font-style: normal; font-weight: 400; src: local(''), url('../fonts/pt-mono-v8-latin-regular.woff2') format('woff2'), url('../fonts/pt-mono-v8-latin-regular.woff') format('woff'); font-display: swap; } /* Reset */ body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td { margin: 0; padding: 0; } ol, ul { list-style: none; } * { -webkit-touch-callout: none; user-select: none; box-sizing: border-box; } body { cursor: default; background-color: var(--color-bg); background-image: url('../images/crete/bg_1000.webp'); background-repeat: no-repeat; background-size: cover; background-attachment: fixed; background-position: center center !important; font-family: 'PT Sans Narrow', 'Helvetica Condensed', 'Arial Narrow'; text-transform: uppercase; } /* Inside the panel, allow normal text cursor and selection (the rest of the UI is select-none above). */ #overlay *:not(.backbutton):not(.theader):not(.bibmenu):not(.biburl):not(.bibpdf):not(img) { cursor: auto; } #overlay *:not(.backbutton):not(.theader):not(.bibmenu):not(.biburl):not(.bibpdf):not(#map) { -webkit-touch-callout: text; user-select: text; } a { cursor: pointer !important; color: var(--color-link); text-decoration: none; outline: none; } a:hover { color: var(--color-link-hover); } a * { cursor: pointer !important; } /* Progress bars (top-of-page hairlines). */ #progressbar1, #progressbar2 { position: fixed; z-index: 2147483647; top: 0; left: 0; display: none; height: 2px; width: 100vw; border: none; border-radius: 1px; color: var(--color-accent); background-color: rgba(0, 0, 0, 0); box-shadow: none; } #progressbar1::-moz-progress-bar, #progressbar2::-moz-progress-bar { background-color: var(--color-accent); transition: all 1s; } #progressbar1::-webkit-progress-value, #progressbar2::-webkit-progress-value { transition: width 1s; background-color: var(--color-accent); } /* Fullscreen corner icons. Their opacity is set by main.js (onFullscreenChange); they are hidden on mobile further down. */ #fullscreen_min .arrow, #fullscreen_max .arrow { fill: var(--color-fullscreen-arrow); fill-opacity: 0.6; } #fullscreen_min circle, #fullscreen_max circle { fill: var(--color-bg); fill-opacity: 0.6; } #fullscreencanvas:hover .arrow { fill: var(--color-fullscreen-arrow-hover); fill-opacity: 0.9; } #fullscreen_min, #fullscreen_max { position: fixed; bottom: 30px; right: 5px; pointer-events: all; z-index: 1000; cursor: pointer; display: block; opacity: 0.0; transition: opacity 500ms; width: 35px; height: 35px; } #contentloadingtext { position: absolute; top: 30%; left: 10px; bottom: 10px; right: 10px; text-align: center; text-transform: uppercase; font-size: 34px; } .nodisplay { display: none; } /* Full-viewport blur + loading text shown until the background is ready. Both fade out when main.js adds `background-ready` to (was showBGImage). */ #blurwindow { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 3; background-color: rgba(255, 255, 255, 0); -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px); background-image: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), url('../images/crete/bg_1000.webp'); background-repeat: no-repeat; background-size: cover; background-attachment: fixed; background-position: center center !important; filter: blur(3px); } #loadingtxt { color: var(--color-text-light); position: absolute; top: 10vh; left: 10px; bottom: 10px; right: 10px; font-weight: normal; text-align: center; text-transform: uppercase; font-size: 34px; } #blurwindow, #loadingtxt { transition: opacity 2000ms ease, visibility 0s linear 2000ms; } body.background-ready #blurwindow, body.background-ready #loadingtxt { opacity: 0; visibility: hidden; } .normaltext { font-weight: normal; } .info { font-size: 25px; font-weight: normal; } /* High-resolution background; main.js sets its image, this fades it in. */ #background { position: fixed; left: 0; top: 0; width: 100vw; height: 100vh; background-repeat: no-repeat; background-size: cover; background-position: center center !important; overflow-x: hidden !important; overflow-y: hidden !important; opacity: 0.0; display: block; visibility: visible; z-index: 2; } body.background-ready #background { opacity: 1.0; } /* Left-hand navigation. */ #canvasNav { position: fixed; width: 170px; top: 20vh; margin-left: 5px; margin-right: 5px; color: var(--color-text-light); overflow: hidden; z-index: 5; } #canvasNav h1 { color: var(--color-text-light); background-color: var(--color-nav-surface); display: block; width: auto; height: 90px; padding: 20px; font-size: 30px; font-weight: bold; line-height: 24px; } #canvasNav h1 span { display: block; font-weight: normal; font-size: 20px; } #navbar { position: relative; height: auto; width: auto; background-color: rgba(0, 0, 0, 0); border-style: none none none solid; border-width: 10px; border-color: transparent; /* 10px kept for spacing; the bar is drawn + animated by ::before */ backface-visibility: hidden; } /* The vertical bar to the left of the nav buttons rolls down from the top on load. It recreates the old slideOutNavbar() effect, where #navbar animated height 0 → full over 500ms and its left border grew with it. The border now stays transparent (only reserving the 10px of space), and the visible bar is a ::before scaled on the Y axis from the top. */ @keyframes navbar-bar-roll { from { transform: scaleY(0); } } #navbar::before { content: ""; position: absolute; top: 0; left: -10px; width: 10px; height: 100%; background-color: var(--color-nav-surface); transform-origin: top; animation: navbar-bar-roll 500ms ease backwards; } #navbar > li { padding: 5px 0 0 5px; } /* Items reveal themselves on load — a staggered cascade that recreates the original slideOutNavbar animation with no JS trigger. Their resting state is the revealed state; the animation plays from collapsed to revealed once. */ @keyframes navbar-item-reveal { from { width: 0; opacity: 0; } to { width: var(--navbar-item-width); opacity: 1; } } #navbar > li > .item { color: var(--color-text-light); cursor: pointer; background-color: var(--color-nav-item); white-space: nowrap; padding: 10px 15px; width: var(--navbar-item-width); line-height: 25px; opacity: 1; display: block; text-align: left; outline: none; font-size: 18px; font-weight: bold; text-shadow: 1px 1px 1px #000; backface-visibility: hidden; animation: navbar-item-reveal 900ms backwards; } #navbar > li:nth-child(1) > .item { animation-duration: 900ms; } #navbar > li:nth-child(2) > .item { animation-duration: 1100ms; } #navbar > li:nth-child(3) > .item { animation-duration: 1300ms; } #navbar > li:nth-child(4) > .item { animation-duration: 1500ms; } #navbar > li > .item:hover { color: var(--color-nav-item-hover); } /* The content panel and its animated frame. */ #canvasContent { position: fixed; top: 5vh; left: 200px; bottom: 60px; right: 30px; z-index: 6; } #content { background-color: var(--color-panel); outline: 1px solid transparent; /* rendering-artefact fix from the original */ position: relative; top: var(--panel-closed-top); /* left is never animated (the original snapped it). Keep it at the current panel's left so closing collapses in place instead of sliding sideways. */ left: var(--panel-left, var(--panel-closed-left)); width: 0; height: 0; /* Keep max-* defined while closed too, so removing .is-open doesn't drop the cap and let the box balloon to its uncapped size before it shrinks. */ max-width: var(--panel-max-width); max-height: var(--panel-max-height); z-index: 95; overflow: hidden; /* CLOSE timing (used when .is-open is removed): top + height collapse together over 400ms; width trails — faster (200ms) and delayed 100ms. */ transition: top var(--panel-transition), height var(--panel-transition), width var(--panel-transition-fast) 100ms; backface-visibility: hidden; } /* Open state: pull the geometry from the custom properties panel.js set. OPEN timing (used when .is-open is added): top + width expand together over 400ms; height trails — faster (200ms) and delayed 100ms. The mirror of close, matching the original formatContents() animate mode. left isn't transitioned. */ #canvasContent.is-open #content { top: var(--panel-top); left: var(--panel-left); width: var(--panel-width); height: var(--panel-height); max-width: var(--panel-max-width); max-height: var(--panel-max-height); transition: top var(--panel-transition), width var(--panel-transition), height var(--panel-transition-fast) 100ms; } #content > h2 { position: absolute; top: 0; left: 0; font-size: 32px; white-space: pre-line; font-weight: bold; color: var(--color-text); padding: 20px 0 0 35px; text-shadow: 0 0 1px #000; text-overflow: ellipsis; overflow: hidden; word-break: keep-all; height: 62px; max-width: 80%; } #content > h6 { background-color: rgba(255, 255, 255, 1); border-style: none none solid none; border-width: 3px; border-color: var(--color-rule); font-size: 20px; font-weight: bold; color: var(--color-text); padding: 3px 0 3px 10px; text-shadow: 0 0 1px #000; } #content .code_link { font-family: 'PT Mono'; font-size: 16px; word-break: break-all; } #content .code { font-family: 'PT Mono'; font-size: 12px; word-break: break-all; } #canvasOverlay { position: absolute; /* The panel body scrolls here. #content is height-capped (max-height) and the title + close button occupy the fixed 80px above this box, so a fragment taller than the panel — long lists like publications or teaching — scrolls vertically within #canvasOverlay rather than being clipped. overflow-x stays hidden so wide content (e.g. the publications table, which scrolls itself) never adds a second horizontal scrollbar here. The mobile rule below already did this; desktop was the one left on overflow:hidden. */ overflow-x: hidden; overflow-y: auto; top: 80px; left: 0; bottom: 0; right: 0; /* Narrow scrollbar, dark like the navbar surface, over a transparent track. These two are the standard properties (Firefox, and Chrome/Edge 121+). */ scrollbar-width: thin; scrollbar-color: var(--color-nav-surface) transparent; transition: all 500ms; } /* The same look for older WebKit/Blink (Chrome/Safari/Edge before 121), which only honour the ::-webkit-scrollbar pseudo-elements. width here is what makes it narrow; the track is transparent (no background). */ #canvasOverlay::-webkit-scrollbar { width: 8px; } #canvasOverlay::-webkit-scrollbar-track { background: transparent; } #canvasOverlay::-webkit-scrollbar-thumb { background-color: var(--color-nav-surface); border-radius: 4px; } #closeBtn { position: absolute; right: 0; top: 0; cursor: pointer; margin: 7px; width: 11px; height: 11px; color: rgba(30, 30, 30, 0.7); font-size: 30px; display: block; line-height: 10px; z-index: 99; } #closeBtn:hover { color: rgba(30, 30, 30, 1); } #closeBtn::before { content: '\0000d7'; } #footer { position: fixed; bottom: 0; left: 0; width: 100vw; font-size: 13px; background-color: var(--color-footer-bg); height: 25px; padding-bottom: 5px; z-index: 5; } #footer .txt, #footer a { cursor: pointer; padding: 5px 10px; white-space: nowrap; letter-spacing: 1px; text-shadow: 1px 1px 1px #000; color: var(--color-footer-text); float: right; } #footer .txt:hover, #footer a:hover { color: var(--color-nav-item-hover); } #footer .txt span, #footer a span { font-weight: bold; } #footer .txt.left, #footer a.left { float: left; } /* ------------------------------------------------------------------------- * * Mobile — shared rules (portrait OR landscape). * Placed after the desktop rules so the open-state override below wins on * equal specificity (media queries add no specificity; source order decides). * ------------------------------------------------------------------------- */ @media only screen and (orientation: portrait) and (max-width: 450px) and (max-height: 950px), only screen and (orientation: landscape) and (max-height: 450px) and (max-width: 950px) { /* No desktop chrome on mobile: the body carries the background image and there is no blur layer, loading text or fullscreen control. */ #blurwindow, #loadingtxt, #background { display: none; } #fullscreen_min, #fullscreen_max { display: none; } body { background-color: var(--color-bg); background-repeat: no-repeat; background-size: cover; background-attachment: fixed; background-position: center center !important; height: 100%; } #canvasNav { position: fixed; top: 0; margin: 0; overflow-x: hidden; overflow-y: auto; } #canvasNav h1 { position: absolute; background-color: var(--color-nav-surface); display: block; width: 100%; } #canvasNav h1 span { display: block; font-weight: normal; font-size: 30px; } #navbar { position: absolute; width: 100%; background-color: rgba(0, 0, 0, 0); border-style: none none none solid; border-width: 10px; border-color: var(--color-nav-surface); min-height: 310px; } /* Mobile keeps the original static bar (the opaque border above); the desktop roll-down ::before is suppressed so the bar isn't drawn twice. */ #navbar::before { display: none; } #navbar > li { padding: 5px 0 0 5px; } /* Items are always shown full-width on mobile (no reveal cascade). */ #navbar > li > .item { padding: 20px 15px; width: 100% !important; opacity: 1.0; font-weight: bold; animation: none; } #canvasContent { display: none; } /* `is-open` (toggled by panel.js) reveals the wrapper and fades the panel in — replacing the old JS that set canvasContent.style.display. */ #canvasContent.is-open { display: block; } #content { outline: 0; top: 0; left: 0; width: 100%; height: 100%; /* Neutralise the desktop base max-* so the mobile panel stays full-screen. */ max-width: none; max-height: none; background-color: var(--color-panel-mobile); opacity: 0.0; display: block; visibility: visible; transition: opacity var(--panel-transition); } /* Override the desktop open-geometry rule: stay full-screen, just fade. */ #canvasContent.is-open #content { top: 0; left: 0; width: 100%; height: 100%; max-width: none; max-height: none; opacity: 1.0; } #content > h2 { font-size: 32px; white-space: pre-line; font-weight: bold; color: var(--color-text); padding: 0 0 0 15px; text-shadow: 0 0 1px #000; text-overflow: ellipsis; overflow: hidden; word-break: keep-all; max-width: 80%; } #canvasOverlay { position: absolute; overflow: auto; top: 40px; left: 0; bottom: 0; right: 0; } #closeBtn { cursor: pointer; margin-top: 7px; width: 30px; height: 30px; line-height: 25px; font-size: 60px; color: rgba(0, 0, 0, 1); } #footer { left: 10px; background-color: var(--color-footer-bg-mobile); z-index: 5; } #footer .txt, #footer a { padding-right: 20px; } } /* ------------------------------------------------------------------------- * * Mobile — portrait only (dimensions that differ from landscape). * ------------------------------------------------------------------------- */ @media only screen and (orientation: portrait) and (max-width: 450px) and (max-height: 950px) { body { background-image: url('../images/crete/bg_mobile_por.webp'); } #canvasNav { width: 100%; height: 100vh; } #canvasNav h1 { height: 130px; padding: 20px; font-size: 50px; line-height: 40px; } #navbar { height: calc(100vh - 130px) !important; top: 130px; } #navbar > li > .item { font-size: 35px; } #canvasContent { top: 10px; left: 10px; bottom: 35px; right: 10px; } #content > h2 { height: 57px; } } /* ------------------------------------------------------------------------- * * Mobile — landscape only. * ------------------------------------------------------------------------- */ @media only screen and (orientation: landscape) and (max-height: 450px) and (max-width: 950px) { body { background-image: url('../images/crete/bg_mobile_lan.webp'); } #canvasNav { width: 220px !important; min-width: 215px; height: 100%; } #canvasNav h1 { height: 100px; padding: 10px 20px; font-size: 40px; line-height: 37px; } #navbar { height: calc(100vh - 100px) !important; top: 100px; } #navbar > li > .item { font-size: 32px; } #canvasContent { top: 5px; left: calc(220px - 10px); bottom: 20px; right: 5px; } #content > h2 { height: 42px; } }