/* ===================================================================== Portfolio stylesheet Single stylesheet shared by index.html, projects.html, posts.html and experiences.html (cv/email are plain links, no page of their own). Organized top-to-bottom in the order sections appear on the page: variables/theme -> reset -> layout -> header -> nav/icons -> content -> entry list/blocks (projects, posts, experiences) -> footer -> responsive tweaks. ===================================================================== */ /* --------------------------------------------------------------------- Theme variables Dark theme is the default (matches the reference design). Toggling [data-theme="light"] on (done by script.js) swaps the palette. Keeping every color as a variable means the rest of the file never needs to know which theme is active. --------------------------------------------------------------------- */ :root { --bg: #1c1c1c; --text: #d7d9db; --text-muted: #9a9ea3; --link: #6fa3d0; --link-visited: #a48cf2; --border: #2f2f2f; --max-width: 880px; } :root[data-theme="light"] { --bg: #ffffff; --text: #24292e; --text-muted: #6a737d; --link: #15803d; --link-visited: #6f42c1; --border: #e1e4e8; } /* --------------------------------------------------------------------- Reset & base --------------------------------------------------------------------- */ * { box-sizing: border-box; } html { color-scheme: dark; } html[data-theme="light"] { color-scheme: light; } body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; justify-content: center; background: var(--bg); color: var(--text); font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 15px; line-height: 1.55; transition: background-color 0.15s ease, color 0.15s ease; } a { color: var(--link); text-decoration: underline; text-underline-offset: 2px; } a:visited { color: var(--link-visited); } a:hover { opacity: 0.85; } /* --------------------------------------------------------------------- Page layout Narrow centered column, generous top spacing, comfortable side padding so content never touches the viewport edge on small screens. --------------------------------------------------------------------- */ .page { max-width: var(--max-width); margin: 0 auto; padding: 48px 24px 40px; } /* --------------------------------------------------------------------- Header: avatar, name/handle, tagline, nav row, social icons --------------------------------------------------------------------- */ .profile { display: flex; align-items: flex-start; gap: 12px; } .avatar { width: 46px; height: 46px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; } .avatar img { width: 100%; height: 100%; object-fit: cover; } /* Gentle wind sway on the profile picture, like Minecraft foliage: a slow, small rotation back and forth around a point near the base so it never looks perfectly still. */ .avatar-img { transform-origin: 50% 85%; animation: avatar-sway 3.2s ease-in-out infinite alternate; } @keyframes avatar-sway { from { transform: rotate(-2deg); } to { transform: rotate(3deg); } } @media (prefers-reduced-motion: reduce) { .avatar-img { animation: none; } } .profile-text .name-row { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; } .profile-text .name { font-weight: 600; font-size: 16px; color: var(--text); } /* Plain text, not a link - just a handle shown next to the name */ .profile-text .handle { color: var(--link); font-size: 16px; } .tagline { color: var(--text-muted); font-size: 13px; margin-top: 2px; } /* Nav row: text links on the left, icon links on the right */ .nav-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-top: 14px; } .nav-links { display: flex; gap: 20px; flex-wrap: wrap; } .nav-links a { color: var(--link); text-decoration: underline; text-underline-offset: 3px; font-size: 13px; } .nav-links a.active { font-weight: 600; } .icon-links { display: flex; align-items: center; gap: 14px; } .icon-links a, .icon-links button { display: inline-flex; align-items: center; justify-content: center; color: var(--text-muted); background: none; border: none; padding: 0; cursor: pointer; text-decoration: none; } .icon-links a:hover, .icon-links button:hover { color: var(--text); } .icon-links svg { width: 16px; height: 16px; } .icon-links svg.icon-fill { fill: currentColor; } .icon-links svg.icon-stroke { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } /* Show only one of the sun/moon icons at a time, based on theme */ #theme-toggle .icon-moon { display: block; } #theme-toggle .icon-sun { display: none; } :root[data-theme="light"] #theme-toggle .icon-moon { display: none; } :root[data-theme="light"] #theme-toggle .icon-sun { display: block; } /* --------------------------------------------------------------------- Main content --------------------------------------------------------------------- */ .content { margin-top: 24px; } .content p { margin: 0 0 12px; } .section-heading { font-size: 13px; color: var(--text-muted); margin: 28px 0 10px; } .skills-list { color: var(--text); margin: 0 0 8px; } /* --------------------------------------------------------------------- Entry list (title + date rows, used by the posts page) and entry blocks (title + date + full description, used by projects and experiences pages). Shared across content types so all three sections look consistent. --------------------------------------------------------------------- */ .entry-list { list-style: none; margin: 0; padding: 0; } .entry-list li { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 6px 0; border-bottom: 1px solid var(--border); } .entry-list li:last-child { border-bottom: none; } .entry-list a { text-decoration: none; } .entry-list a:hover { text-decoration: underline; } /* Small type label used on the home page's mixed "Latest" list, e.g. PROJECT / POST / HOBBY / CERTIFICATE, before the item's title. */ .entry-tag { display: inline-block; min-width: 66px; color: var(--text-muted); font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; margin-right: 4px; } .entry-list .entry-date { color: var(--text-muted); font-size: 14px; white-space: nowrap; } .entry-block { padding: 24px 0; border-bottom: 1px solid var(--border); } .entry-block:last-child { border-bottom: none; } .entry-block h2 { font-size: 17px; margin: 0 0 4px; font-weight: 600; } .entry-block .entry-date { color: var(--text-muted); font-size: 14px; display: block; margin-bottom: 10px; } .entry-block p { margin: 0 0 10px; } .entry-block ul { margin: 0 0 10px; padding-left: 20px; } .entry-block li { margin-bottom: 4px; } .entry-block .entry-lesson { color: var(--text-muted); font-size: 15px; } .entry-block .entry-meta { color: var(--text-muted); font-size: 14px; } .more-link { display: block; text-align: right; margin-top: 20px; } /* Extra breathing room above a paragraph that follows an entry-list, e.g. the "Have a look at..." line under the home page's Latest list. */ .content p.after-list { margin-top: 18px; } /* Shown on pages with no entries yet (e.g. posts before the first one) */ .empty-state { color: var(--text-muted); } /* --------------------------------------------------------------------- Project photo thumbnails .photo-row starts empty and hidden; script.js fills it with whichever images/-N.jpg files actually load, and only then reveals it, so a project with no photos yet leaves no gap in the layout. --------------------------------------------------------------------- */ .photo-row { display: none; flex-wrap: wrap; gap: 8px; margin: 0 0 10px; } .photo-row.has-photos { display: flex; } .photo-row img { width: 72px; height: 72px; object-fit: cover; border-radius: 6px; border: 1px solid var(--border); cursor: zoom-in; transition: opacity 0.15s ease; } .photo-row img:hover { opacity: 0.8; } /* --------------------------------------------------------------------- Lightbox: full-size view of a clicked thumbnail --------------------------------------------------------------------- */ .lightbox-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.85); display: none; align-items: center; justify-content: center; padding: 32px; cursor: zoom-out; z-index: 1000; } .lightbox-overlay.open { display: flex; } .lightbox-overlay img { max-width: 100%; max-height: 100%; border-radius: 4px; } /* --------------------------------------------------------------------- Footer --------------------------------------------------------------------- */ .site-footer { margin-top: 40px; color: var(--text-muted); font-size: 12px; } /* --------------------------------------------------------------------- Responsive tweaks for phones --------------------------------------------------------------------- */ @media (max-width: 480px) { .page { padding: 48px 20px 48px; } .nav-row { align-items: flex-start; } .nav-links { gap: 14px; } .icon-links { gap: 12px; } .entry-list li { flex-direction: column; align-items: flex-start; gap: 2px; } }