@charset "UTF-8"; /** Theme palettes. Colours and fonts are exposed as CSS custom properties and swapped by the `data-mode` attribute on (set by the inline script in head.html from the `?mode=` URL param or localStorage). The :root block is the default (light) — it also covers the no-JS case. */ :root, [data-mode="light"] { --bg: #ffffff; --bg-soft: #f6f8fa; --fg: #1f2328; --fg-dim: #656d76; --accent: #0f9b8e; --accent-2: #2563eb; --border: #e4e7eb; --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace; --avatar-radius: 14px; } [data-mode="dark"] { --bg: #0d1117; --bg-soft: #161b22; --fg: #e6edf3; --fg-dim: #8b949e; --accent: #39d3c3; --accent-2: #58a6ff; --border: #232b36; --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace; --avatar-radius: 12px; } [data-mode="terminal"] { --bg: #0a0a0a; --bg-soft: #111511; --fg: #c9d6c9; --fg-dim: #6f7e6f; --accent: #5af78e; --accent-2: #5af78e; --border: #1d211d; --font-body: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace; --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace; --avatar-radius: 3px; } /** Reset */ * { box-sizing: border-box; } body, h1, h2, h3, h4, h5, h6, p, blockquote, pre, hr, dl, dd, ol, ul, figure { margin: 0; padding: 0; } /** Base */ body { font-family: var(--font-body); font-size: 16px; line-height: 1.65; font-weight: 400; color: var(--fg); background-color: var(--bg); -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; font-kerning: normal; } /** Vertical rhythm */ h1, h2, h3, h4, h5, h6, p, blockquote, pre, ul, ol, dl, figure, .highlight { margin-bottom: 16px; } /** Images, lists, headings */ img { max-width: 100%; vertical-align: middle; } ul, ol { margin-left: 26px; } li > ul, li > ol { margin-bottom: 0; } h1, h2, h3, h4, h5, h6 { font-weight: 700; line-height: 1.25; color: var(--fg); } /** Links */ a { color: var(--accent-2); text-decoration: none; transition: color 0.15s ease; } a:hover { color: var(--accent); text-decoration: underline; } /** Blockquotes */ blockquote { color: var(--fg-dim); border-left: 3px solid var(--accent); padding-left: 16px; font-style: italic; } blockquote > :last-child { margin-bottom: 0; } /** Code */ code, pre { font-family: var(--font-mono); font-size: 0.875em; } code { background-color: var(--bg-soft); border: 1px solid var(--border); border-radius: 4px; padding: 1px 6px; } pre { background-color: var(--bg-soft); border: 1px solid var(--border); border-radius: 8px; padding: 12px 16px; overflow-x: auto; } pre > code { border: 0; padding: 0; background: none; } hr { border: 0; border-top: 1px solid var(--border); margin: 32px 0; } /** Avatar — a chunky, pixelated photo. On hover, the cluster of pixel squares around the cursor turns sharp. Each cell is wholly sharp or wholly pixelated, so the lit region's edge always steps along the pixel grid — a blocky disc, not a circle or a bordered blob. The JS in default.html builds the 15x15 cell grid and toggles `.on` within a radius of the cursor. */ .avatar { position: relative; width: 150px; height: 150px; flex: none; border-radius: var(--avatar-radius); overflow: hidden; box-shadow: 0 0 0 1px var(--border); cursor: none; } .avatar-pixel, .avatar-crisp { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } .avatar-pixel { image-rendering: pixelated; image-rendering: crisp-edges; } .avatar-crisp { display: none; } .avatar-grid { position: absolute; inset: 0; } .avatar-cell { position: absolute; width: 10px; height: 10px; background-image: url("/images/eni.jpg"); background-size: 150px 150px; opacity: 0; transition: opacity 0.12s ease; pointer-events: none; } .avatar-cell.on { opacity: 1; } @media (hover: none) { .avatar-crisp { display: block; } .avatar-grid { display: none; } } /** Site header */ .site-header { border-bottom: 1px solid var(--border); background-color: var(--bg); } .site-header .wrapper { display: flex; align-items: center; justify-content: space-between; min-height: 58px; } .site-title { font-family: var(--font-mono); font-size: 17px; font-weight: 600; letter-spacing: -0.3px; color: var(--fg); } .site-title:hover { color: var(--accent); text-decoration: none; } [data-mode="terminal"] .site-title::after { content: "_"; color: var(--accent); animation: blink 1.1s steps(1) infinite; } @keyframes blink { 50% { opacity: 0; } } /** Theme switcher */ .mode-switch { display: flex; gap: 4px; font-family: var(--font-mono); font-size: 12px; } .mode-switch a { color: var(--fg-dim); padding: 3px 9px; border: 1px solid transparent; border-radius: 5px; text-decoration: none; } .mode-switch a:hover { color: var(--fg); text-decoration: none; } .mode-switch a[aria-current="true"] { color: var(--accent); border-color: var(--border); background-color: var(--bg-soft); } [data-mode="terminal"] .mode-switch a { border-radius: 0; } /** Wrapper */ .wrapper { max-width: 780px; margin: 0 auto; padding: 0 24px; } @media screen and (max-width: 600px) { .wrapper { padding: 0 18px; } } /** Page content */ .page-content { padding: 48px 0 64px; } /** Home — intro row */ .intro { display: flex; align-items: center; gap: 26px; margin-bottom: 34px; } @media screen and (max-width: 600px) { .intro { flex-direction: column; align-items: flex-start; gap: 18px; } } .intro-text h1 { font-size: 34px; letter-spacing: -0.5px; margin-bottom: 4px; } .intro-text .role { font-family: var(--font-mono); font-size: 14px; color: var(--accent); margin-bottom: 0; } [data-mode="terminal"] .intro-text .role::before { content: "> "; } /** Home — body copy */ .home p { color: var(--fg); } .home b { font-weight: 600; color: var(--fg); } .lead { font-size: 18px; margin-bottom: 30px; } /** Selected experience */ .experience { margin: 30px 0; } .experience h2 { font-family: var(--font-mono); font-size: 12px; text-transform: uppercase; letter-spacing: 1px; color: var(--fg-dim); margin-bottom: 18px; } [data-mode="terminal"] .experience h2::before { content: "$ "; color: var(--accent); } .job { margin-bottom: 18px; padding-left: 14px; border-left: 2px solid var(--border); transition: border-color 0.15s ease; } .job:hover { border-left-color: var(--accent); } .job-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin-bottom: 4px; } .job-role { font-weight: 600; color: var(--fg); } .job-org { font-family: var(--font-mono); font-size: 14px; } .job-date { font-family: var(--font-mono); font-size: 12px; color: var(--fg-dim); margin-left: auto; } .job p { margin-bottom: 0; } .experience-more { margin-top: 20px; font-size: 14px; color: var(--fg-dim); } .contact-cta { font-family: var(--font-mono); font-size: 15px; margin-top: 30px; } /** Tech stack */ .stack { margin: 30px 0; } .stack-label { display: block; font-family: var(--font-mono); font-size: 12px; text-transform: uppercase; letter-spacing: 1px; color: var(--fg-dim); margin-bottom: 10px; } [data-mode="terminal"] .stack-label::before { content: "$ "; color: var(--accent); } .stack ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; } .stack li { font-family: var(--font-mono); font-size: 13px; color: var(--fg); background-color: var(--bg-soft); border: 1px solid var(--border); border-radius: 6px; padding: 4px 10px; } [data-mode="terminal"] .stack li { border-radius: 0; } /** Site footer */ .site-footer { border-top: 1px solid var(--border); padding: 28px 0; color: var(--fg-dim); font-size: 14px; } .footer-col-wrapper { display: flex; flex-wrap: wrap; gap: 16px 44px; } .contact-list, .social-media-list { list-style: none; margin: 0; padding: 0; } .social-media-list { display: flex; flex-wrap: wrap; gap: 16px; } .social-media-list a { display: inline-flex; align-items: center; gap: 6px; color: var(--fg-dim); } .social-media-list a:hover { color: var(--accent); text-decoration: none; } .social-media-list svg { width: 16px; height: 16px; } .social-media-list svg path { fill: currentColor; } .footer-col-3 { flex: 1; min-width: 220px; } .footer-col-3 a { color: var(--accent-2); } /** Posts (blog) */ .post-list { margin-left: 0; list-style: none; } .post-list > li { margin-bottom: 28px; } .post-meta { font-size: 14px; color: var(--fg-dim); } .post-link { display: block; font-size: 24px; } .post-title { font-size: 38px; letter-spacing: -0.5px; line-height: 1.1; } @media screen and (max-width: 800px) { .post-title { font-size: 32px; } } .post-header { margin-bottom: 28px; } .post-content { margin-bottom: 28px; } /** CV page */ .cv-header { margin-bottom: 40px; } .cv-header h1 { font-size: 34px; letter-spacing: -0.5px; margin-bottom: 4px; } .cv-role { font-family: var(--font-mono); font-size: 14px; color: var(--accent); margin-bottom: 12px; } .cv-meta { font-size: 14px; color: var(--fg-dim); margin-bottom: 4px; } .cv-section { margin-bottom: 40px; } .cv-section h2 { font-family: var(--font-mono); font-size: 12px; text-transform: uppercase; letter-spacing: 1px; color: var(--fg-dim); margin-bottom: 20px; padding-bottom: 8px; border-bottom: 1px solid var(--border); } [data-mode="terminal"] .cv-section h2::before { content: "$ "; color: var(--accent); } .job-tech { margin-top: 6px; font-family: var(--font-mono); font-size: 12px; color: var(--fg-dim); } .cv-list { list-style: none; margin: 0; padding: 0; } .cv-list li { display: flex; flex-wrap: wrap; gap: 2px 14px; margin-bottom: 10px; color: var(--fg); } .cv-when { font-family: var(--font-mono); font-size: 13px; color: var(--fg-dim); min-width: 110px; } /** Syntax highlighting styles */ .highlight { background: #fff; } .highlighter-rouge .highlight { background: #eef; } .highlight .c { color: #998; font-style: italic; } .highlight .err { color: #a61717; background-color: #e3d2d2; } .highlight .k { font-weight: bold; } .highlight .o { font-weight: bold; } .highlight .cm { color: #998; font-style: italic; } .highlight .cp { color: #999; font-weight: bold; } .highlight .c1 { color: #998; font-style: italic; } .highlight .cs { color: #999; font-weight: bold; font-style: italic; } .highlight .gd { color: #000; background-color: #fdd; } .highlight .gd .x { color: #000; background-color: #faa; } .highlight .ge { font-style: italic; } .highlight .gr { color: #a00; } .highlight .gh { color: #999; } .highlight .gi { color: #000; background-color: #dfd; } .highlight .gi .x { color: #000; background-color: #afa; } .highlight .go { color: #888; } .highlight .gp { color: #555; } .highlight .gs { font-weight: bold; } .highlight .gu { color: #aaa; } .highlight .gt { color: #a00; } .highlight .kc { font-weight: bold; } .highlight .kd { font-weight: bold; } .highlight .kp { font-weight: bold; } .highlight .kr { font-weight: bold; } .highlight .kt { color: #458; font-weight: bold; } .highlight .m { color: #099; } .highlight .s { color: #d14; } .highlight .na { color: #008080; } .highlight .nb { color: #0086B3; } .highlight .nc { color: #458; font-weight: bold; } .highlight .no { color: #008080; } .highlight .ni { color: #800080; } .highlight .ne { color: #900; font-weight: bold; } .highlight .nf { color: #900; font-weight: bold; } .highlight .nn { color: #555; } .highlight .nt { color: #000080; } .highlight .nv { color: #008080; } .highlight .ow { font-weight: bold; } .highlight .w { color: #bbb; } .highlight .mf { color: #099; } .highlight .mh { color: #099; } .highlight .mi { color: #099; } .highlight .mo { color: #099; } .highlight .sb { color: #d14; } .highlight .sc { color: #d14; } .highlight .sd { color: #d14; } .highlight .s2 { color: #d14; } .highlight .se { color: #d14; } .highlight .sh { color: #d14; } .highlight .si { color: #d14; } .highlight .sx { color: #d14; } .highlight .sr { color: #009926; } .highlight .s1 { color: #d14; } .highlight .ss { color: #990073; } .highlight .bp { color: #999; } .highlight .vc { color: #008080; } .highlight .vg { color: #008080; } .highlight .vi { color: #008080; } .highlight .il { color: #099; } /*# sourceMappingURL=main.css.map */