/* ========================================================================== jonasjulianjensen.com — hand-written replacement for the Adobe Portfolio theme (marta/marina). Split layout: scrolling content left, fixed portrait right. Stacks vertically below 980px. ========================================================================== */ /* --- Fonts ---------------------------------------------------------------- Freight Neo Pro (400/400i/700) and Komet (500) are loaded from the Adobe Fonts web project "jonasjulianjensen.com" (kit vjw0yoz), linked in index.html . The kit is tied to the owner's Creative Cloud subscription; the fallback stacks below keep the site readable if it ever stops loading. */ /* --- Design tokens -------------------------------------------------------- */ :root { --navy: #022A55; --navy-hover: rgba(2, 42, 85, 0.8); --text: #546E87; --link-hover: #012B55; --icon-bg: #e8e8e8; --icon-bg-hover: #dddddd; --font-main: freight-neo-pro, "Avenir Next", Avenir, "Segoe UI", Helvetica, sans-serif; --font-alt: komet, "Avenir Next", Avenir, "Segoe UI", Helvetica, sans-serif; } /* --- Base ------------------------------------------------------------------ */ * { box-sizing: border-box; margin: 0; padding: 0; } html { background: #fff; scroll-behavior: smooth; } body { font-family: var(--font-main); color: var(--text); min-height: 100vh; } img { display: block; max-width: 100%; height: auto; } a { color: var(--text); text-decoration: underline; transition: background 0.2s ease, color 0.2s ease; } a:hover { color: var(--link-hover); } /* --- Layout: content left, fixed portrait right --------------------------- */ .portrait { background-image: url("../images/portrait.jpg"); background-position: center center; background-repeat: no-repeat; background-size: cover; height: 100vh; position: fixed; right: 0; top: 0; width: 50%; } .content { padding: 100px 20px 70px; text-align: center; width: 50%; } .inner { margin: 0 auto; max-width: 800px; } /* --- Typography ------------------------------------------------------------ */ h1, h2, h3 { color: var(--navy); font-weight: 700; } h1 { font-size: 60px; line-height: 1; padding-bottom: 30px; } h2 { font-size: 60px; line-height: 1; padding-bottom: 30px; } h3 { font-size: 25px; line-height: 1.2; padding-bottom: 8px; } p { font-size: 20px; line-height: 22px; padding: 5px 0 10px; } em { font-style: italic; } .lead-in { color: var(--text); font-size: 22px; font-weight: 700; padding-top: 12px; } /* --- Sections -------------------------------------------------------------- */ .section { padding-top: 110px; } .section--intro { padding-top: 0; } .job { padding-top: 60px; } .job:first-of-type { padding-top: 30px; } /* --- Skills / course lists ------------------------------------------------- */ .skills { list-style: none; } .skills li { font-family: var(--font-alt); font-size: 18px; font-weight: 500; line-height: 1.2; padding: 3px 0; } /* --- Social icons ----------------------------------------------------------- */ .social { align-items: center; display: flex; justify-content: center; list-style: none; padding: 20px 0; } .social li { padding: 0 7.5px; } .social a { align-items: center; background: var(--icon-bg); display: flex; justify-content: center; } .social a:hover { background: var(--icon-bg-hover); } .social svg { fill: var(--navy); transition: fill 0.2s ease; } .social--large a { border-radius: 4px; height: 49px; width: 49px; } .social--large svg { height: 37px; width: 37px; } .social--small a { border-radius: 50%; height: 38px; width: 38px; } .social--small svg { height: 25px; width: 25px; } /* --- Buttons ----------------------------------------------------------------- */ .button-row { padding: 20px 0; } .button { background-color: var(--navy); border-radius: 100px; color: #fff; display: inline-block; font-size: 20px; font-weight: 700; line-height: 50px; max-width: 100%; overflow: hidden; padding: 0 25px; text-decoration: none; white-space: nowrap; } .button:hover { background-color: var(--navy-hover); color: #fff; } /* --- Image gallery (VHDLwhiz collage) ---------------------------------------- */ .gallery { padding: 10px 0 20px; } .gallery-row { display: flex; gap: 8px; margin-bottom: 8px; } .gallery-row:last-child { margin-bottom: 0; } .gallery-row img { flex-basis: 0; flex-shrink: 1; min-width: 0; object-fit: cover; } .image-row { padding: 5px 0 20px; } .image-row img { margin: 0 auto; } /* --- Responsive: stacked layout below 980px ----------------------------------- */ @media (max-width: 980px) { .portrait { height: 50vh; position: relative; width: 100%; } .content { padding: 30px 5% 50px; width: 100%; } } /* Match the original theme's typography breakpoints */ @media (max-width: 932px) { h1, h2 { font-size: 36px; padding-bottom: 18px; } p { font-size: 17px; line-height: 19px; } .lead-in { font-size: 19px; } .skills li { font-size: 16px; } .section { padding-top: 70px; } .button { font-size: 14px; line-height: 48px; } } @media (max-width: 540px) { h1, h2 { font-size: 29px; padding-bottom: 16px; } p { font-size: 14px; line-height: 16px; } .lead-in { font-size: 16px; } .skills li { font-size: 14px; } .button { font-size: 14px; line-height: 44px; } .social--large a { border-radius: 3px; height: 32px; width: 32px; } .social--large svg { height: 24px; width: 24px; } .social li { padding: 0 5px; } }