/* Landing page for git.tlartem.ru. Colours come from Gitea CSS variables so light and dark themes both work. */ /* ---- language switch ---- Driven by Gitea's : English is the default, Russian takes over when Gitea renders the page in ru. No JS, no flash of wrong text. */ .tl-ru { display: none; } html[lang^="ru"] .tl-ru { display: inline; } html[lang^="ru"] .tl-en { display: none; } /* ---- hero ---- */ .tl-hero { text-align: center; padding: 48px 16px 32px; } .tl-avatar { width: 160px; height: 160px; border-radius: 50%; object-fit: cover; border: 3px solid var(--color-secondary); box-shadow: 0 2px 12px rgb(0 0 0 / 18%); } .tl-name { font-size: 2.6em; font-weight: 600; margin: 18px 0 4px; color: var(--color-text); } .tl-tagline { font-size: 1.15em; color: var(--color-text-light-2); margin: 0 0 14px; } .tl-role { font-size: 1.05em; font-weight: 600; color: var(--color-text-light-1, var(--color-text)); margin: 0 0 10px; } .tl-pitch { font-size: 1.05em; color: var(--color-text); max-width: min(620px, 100%); margin: 0 auto 20px; line-height: 1.5; } /* Skills read as one quiet subtitle line rather than a row of pills โ€” the separators come from ::before so the markup stays plain spans. */ .tl-skills { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 4px 0; margin: 0 auto 24px; max-width: min(680px, 100%); font-size: .89em; color: var(--color-text-light-2); line-height: 1.5; } .tl-skills > span + span::before { content: "ยท"; margin: 0 9px; color: var(--color-text-light-3); } .tl-skills-years { color: var(--color-primary); font-weight: 600; } /* ---- contact buttons, styled like Gitea's own ---- Neutral surface and theme text, so they sit inside the Gitea UI instead of fighting it. Brand colour is carried by the icons alone. */ .tl-links { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; } .tl-link { display: inline-flex; align-items: center; gap: 8px; padding: 8px 15px; border: 1px solid var(--color-secondary); border-radius: 6px; background: var(--color-box-body); font-size: .92em; font-weight: 500; line-height: 1.4; transition: background .12s, border-color .12s; } .tl-links a.tl-link, .tl-links a.tl-link:hover, .tl-links a.tl-link:focus { text-decoration: none; color: var(--color-text); } .tl-links a.tl-link:hover { background: var(--color-box-body-highlight, var(--color-light, var(--color-secondary))); border-color: var(--color-text-light-3); } .tl-ico { width: 16px; height: 16px; flex: 0 0 auto; } .tl-link-tg .tl-ico { color: #26A5E4; } /* GitHub's mark is monochrome โ€” brand black would vanish on the dark theme. */ .tl-link-gh .tl-ico { color: var(--color-text); } /* ---- sections ---- */ .tl-section { max-width: 1100px; margin: 0 auto; padding: 8px 16px 56px; box-sizing: border-box; } .tl-section-title { display: flex; align-items: center; gap: 8px; font-size: 1.3em; font-weight: 600; color: var(--color-text); padding-bottom: 10px; margin-bottom: 18px; border-bottom: 1px solid var(--color-secondary); } /* ---- experience: vertical list ---- */ .tl-exp { display: flex; flex-direction: column; max-width: 620px; } .tl-exp-row { display: flex; align-items: flex-start; gap: 11px; padding: 11px 0; border-bottom: 1px solid var(--color-secondary); } .tl-exp-row:first-child { padding-top: 0; } .tl-exp-row:last-child { border-bottom: 0; padding-bottom: 0; } .tl-exp-logo { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 6px; overflow: hidden; display: flex; align-items: center; justify-content: center; margin-top: 1px; } .tl-exp-logo img { width: 32px; height: 32px; object-fit: cover; display: block; } .tl-exp-mono { background: var(--mono, var(--color-secondary)); color: #fff; font-weight: 700; font-size: .78em; } .tl-exp-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .tl-exp-top { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; } .tl-exp-co { font-size: .93em; font-weight: 600; color: var(--color-text); line-height: 1.25; } /* Marks the current position โ€” LinkedIn signals this with "Present" in the dates, which this page deliberately does not show. */ .tl-exp-dot { width: 6px; height: 6px; border-radius: 50%; background: #2ea043; flex: 0 0 auto; } .tl-exp-role { font-size: .82em; font-weight: 500; color: var(--color-text-light-2); line-height: 1.35; } .tl-exp-badge { font-size: .8em; color: var(--color-text-light-2); line-height: 1.4; } /* ---- repositories: card grid ---- */ .tl-repo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 14px; } .tl-repo, .tl-repo:hover, .tl-repo:focus { text-decoration: none; color: var(--color-text); } .tl-repo { display: flex; flex-direction: column; padding: 16px; border: 1px solid var(--color-secondary); border-radius: 6px; background: var(--color-box-body); transition: background .1s ease; } .tl-repo:hover { background: var(--color-box-body-highlight, var(--color-light, var(--color-secondary))); } .tl-repo-name { font-size: 1.05em; font-weight: 600; color: var(--color-primary); margin-bottom: 6px; } .tl-repo:hover .tl-repo-name { text-decoration: underline; } .tl-repo-desc { flex: 1; font-size: .9em; color: var(--color-text-light-2); margin-bottom: 14px; line-height: 1.45; } .tl-repo-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; row-gap: 6px; font-size: .82em; color: var(--color-text-light-3); } .tl-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 5px; vertical-align: -1px; } .tl-muted { color: var(--color-text-light-3); } /* ---- narrow screens ---- */ @media (max-width: 560px) { .tl-hero { padding: 28px 12px 20px; } .tl-avatar { width: 120px; height: 120px; } .tl-name { font-size: 1.9em; } .tl-tagline { font-size: 1em; } .tl-role { font-size: 1.05em; font-weight: 600; color: var(--color-text-light-1, var(--color-text)); margin: 0 0 10px; } .tl-pitch { font-size: .97em; } .tl-skills { font-size: .84em; } .tl-section { padding: 4px 12px 40px; } .tl-repo { padding: 14px; } .tl-exp-logo, .tl-exp-logo img { width: 30px; height: 30px; } } /* ---- overflow guards ---- Descendants only: constraining the containers themselves would override their own max-width and blow the page out to full bleed. */ .tl-hero > *, .tl-hero > * > *, .tl-section > *, .tl-section > * > * { box-sizing: border-box; max-width: 100%; } .tl-repo-name, .tl-repo-desc, .tl-exp-co, .tl-exp-role { font-size: .82em; font-weight: 500; color: var(--color-text-light-2); line-height: 1.35; } .tl-exp-badge { overflow-wrap: anywhere; }