@font-face { font-family: 'Meslo'; font-style: normal; font-weight: normal; font-display: swap; src: url('/fonts/JetBrainsMono-Light.woff2') format('woff'); } @font-face { font-family: 'Meslo'; font-style: normal; font-weight: normal; font-display: swap; src: url('/fonts/JetBrainsMono-Light.woff2') format('woff'); } :root { --green: #00FF00; --orange: #f1ff31; --yellow: #f1ff31; --purple: #f1ff31; --default-color: #d3cbcb; --active-color: #14dcff; --line-color: #b1b1b1; --bg-color: rgb(32, 32, 32); } /* Light-specific text colour variants. Applied to when the "White" option is selected, so every color derived from these variables (tree depth colors, lines, active state, body text) automatically switches to a light-appropriate palette. */ body.light-theme { --green: #1a7f37; --orange: #a86a00; --yellow: #8a6d00; --purple: #c0392b; --default-color: #111111; --active-color: #0066cc; --line-color: #888888; } body { margin: 0; font-family: 'Meslo', monospace; font-size: 14px; background-color: var(--bg-color); color: var(--default-color); line-height: 1.5; transition: background-color 0.2s ease, color 0.2s ease; height: 100vh; overflow: hidden; } /* Theme controls */ .theme_controls { position: fixed; top: 10px; right: 10px; list-style: none; margin: 0; padding: 0; display: flex; gap: 14px; z-index: 10; } .theme_option label { position: relative; display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--default-color); cursor: pointer; } .theme_checkbox { position: absolute; opacity: 0; width: 14px; height: 14px; margin: 0; } .theme_option .box { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; border: 1px solid var(--line-color); font-size: 11px; line-height: 1; color: var(--default-color); } .theme_checkbox:checked + .box::after { content: 'x'; } .root { display: flex; justify-content: flex-start; padding: 6px; height: 100vh; box-sizing: border-box; } @media (max-width: 500px) { .root { flex-direction: row; } } /* Page Tree */ .page_tree { list-style: none; padding: 0; width: 300px; height: 100%; overflow-y: auto; overflow-x: auto; } @media (max-width: 500px) { .page_tree { width: 40%; height: 100%; max-height: none; flex: 0 0 auto; box-sizing: border-box; } } .page_tree ul { position: relative; padding-left: 0px; border-left: 3px solid var(--line-color); display: none; } .page_tree ul.open { display: block; } @media (max-width: 500px) { .page_tree ul { border: none; padding-left: 0; } } .page_tree ul:last-child { border-color: transparent; } .page_tree .path_overlay { position: absolute; top: 0; left: 0; width: 3px; height: 0; background-color: transparent; pointer-events: none; } @media (max-width: 500px) { .page_tree .path_overlay { display: none; } } .page_tree li { display: flex; gap: 5px; color: var(--default-color); border-left: 3px solid var(--line-color); margin-left: -3px; --elbow-color: initial; } @media (max-width: 500px) { .page_tree li { margin-left: 0; border-left: none; } } .page_tree ul:last-child li { margin-left: 0; } .page_tree li:last-child { border: none; } .page_tree li:before { content: ''; display: block; margin-left: -3px; width: calc(10vw - 50px); max-width: 25px; height: 8px; border: solid var(--elbow-color, var(--line-color)); border-width: 0 0 3px 3px; } @media (max-width: 500px) { .page_tree li:before { display: none; } } @media (max-width: 500px) { .page_tree .depth1, .page_tree .depth2, .page_tree .depth3, .page_tree .depth4 { padding-left: 0; } } .page_tree li:last-child:before { margin-left: 0; } .page_tree .name { display: flex; align-items: center; gap: 5px; color: var(--default-color); text-decoration: none; user-select: none; -webkit-user-drag: none; } .page_tree .icon { width: 16px; height: 16px; flex: 0 0 auto; -webkit-user-drag: none; user-select: none; } .page_tree .label { display: block; white-space: nowrap; } .page_tree .label_slash { display: none; } .page_tree .name:has(+ ul.open) .label_slash { display: inline; } .page_tree .name.active { color: var(--active-color); font-weight: bold; } .page_tree > li { margin-left: 0; border-left-color: var(--green); } .page_tree > li:before { display: none; } .page_tree .depth1 { color: var(--green); } /* From depth 2 down, items are grey by default. Only the chain leading to the current selection (marked with .on-path in JS) shows its normal depth color. */ .page_tree .depth2, .page_tree .depth3, .page_tree .depth4 { color: var(--line-color); } .page_tree .depth2.on-path:not(.active) { color: var(--orange); } .page_tree .depth3.on-path:not(.active) { color: var(--yellow); } .page_tree .depth4.on-path:not(.active) { color: var(--purple); } /* Page */ .page { width: 70%; height: 100%; display: flex; align-items: flex-start; padding-top: 30px; padding-left: 20px; box-sizing: border-box; position: relative; } @media (max-width: 500px) { .page { width: 60%; height: 100%; flex: 1 1 auto; min-height: 0; padding-top: 12px; padding-left: 8px; box-sizing: border-box; } } /* Image Display */ .image_display { width: 100%; height: auto; max-height: 100vh; object-fit: contain; display: none; } .image_display.active { display: block; } /* Splash screen image (Home) is capped in width rather than filling the page like a regular gallery/page image. */ .image_display.splash { max-width: 500px; margin: 0 auto; } /* Video Display */ .video_display { width: 100%; height: auto; max-height: 100vh; background-color: #000; display: none; } .video_display.active { display: block; } /* Text Display */ .text_display { border: none; background: none; font-family: 'Iosevka', monospace; font-size: 13px; color: var(--default-color); pointer-events: none; width: 100%; max-height: 100%; overflow-y: auto; box-sizing: border-box; display: none; filter: contrast(1); } .text_display.active { display: block; } /* Links Display */ .links_display { display: none; flex-direction: column; gap: 4px; width: 100%; max-height: 100%; overflow-y: auto; box-sizing: border-box; font-family: 'Iosevka', monospace; font-size: 13px; filter: contrast(1); } .links_display.active { display: flex; } .links_display_item { color: var(--default-color); text-decoration: none; } .links_display_item:hover { color: var(--active-color); } /* Gallery Display */ .gallery_display { display: grid; grid-template-columns: repeat(auto-fill, minmax(450px, 1fr)); gap: 10px; width: calc(100% - 24px); max-height: 100%; overflow-y: auto; scrollbar-width: none; /* Firefox */ -ms-overflow-style: none; /* IE/Edge */ display: none; } .gallery_display::-webkit-scrollbar { display: none; /* Chrome/Safari/Edge */ } @media (max-width: 500px) { .gallery_display { grid-template-columns: 1fr; gap: 6px; width: calc(100% - 16px); } } .gallery_scrollbar { position: absolute; right: 4px; width: 10px; display: none; } .gallery_scrollbar.active { display: block; } .gallery_scrollbar_dot { position: absolute; top: 0; left: 0; width: 10px; height: 10px; border-radius: 50%; background-color: var(--active-color); } .gallery_display.active { display: grid; } .gallery_display img, .gallery_display video { width: 100%; height: auto; object-fit: cover; border-radius: 5px; cursor: pointer; } .video_thumb { position: relative; height: 100%; cursor: pointer; line-height: 0; } .video_thumb video { height: 100%; pointer-events: none; } .video_thumb_play { position: absolute; right: 10px; bottom: 10px; width: 28px; height: 28px; border-radius: 50%; background-color: rgba(0, 0, 0, 0.55); display: flex; align-items: center; justify-content: center; pointer-events: none; } .video_thumb_play::before { content: ''; margin-left: 3px; border-style: solid; border-width: 6px 0 6px 10px; border-color: transparent transparent transparent #fff; } /* Lightbox (gallery item overlay) */ .lightbox_overlay { position: fixed; inset: 0; background-color: rgba(0, 0, 0, 0.85); display: none; align-items: center; justify-content: center; z-index: 100; } .lightbox_overlay.active { display: flex; } .lightbox_content { position: relative; display: inline-block; line-height: 0; } .lightbox_image, .lightbox_video { max-width: 90vw; max-height: 90vh; object-fit: contain; display: none; border: 1px solid #fff; box-sizing: border-box; } .lightbox_image.active, .lightbox_video.active { display: block; } .lightbox_title { position: absolute; top: 9px; left: 9px; color: #fff; font-family: 'Meslo', monospace; font-size: 12px; line-height: 1.5; background-color: rgba(0, 0, 0, 0.55); padding: 3px 8px; pointer-events: none; } .lightbox_close { position: absolute; top: 20px; right: 20px; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border: 1px solid #fff; color: #fff; font-family: 'Meslo', monospace; font-size: 16px; line-height: 1; cursor: pointer; background-color: rgba(0, 0, 0, 0.4); box-sizing: border-box; } .lightbox_arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; cursor: pointer; } .lightbox_arrow::before { content: ''; display: block; width: 12px; height: 12px; border-top: 1px solid #fff; border-right: 1px solid #fff; } .lightbox_arrow_prev { left: 20px; } .lightbox_arrow_prev::before { transform: rotate(-135deg); } .lightbox_arrow_next { right: 20px; } .lightbox_arrow_next::before { transform: rotate(45deg); }