* { margin: 0; padding: 0; } :root { --border-dash-after: url("data:image/svg+xml,%3Csvg width='100%25' height='4' xmlns='http://www.w3.org/2000/svg'%3E%3Cline x1='0' y1='1' x2='100%25' y2='1' stroke='%23cccccc' stroke-width='2' stroke-dasharray='12,12' stroke-dashoffset='12'/%3E%3C/svg%3E"); --border-dash-before: url("data:image/svg+xml,%3Csvg width='100%25' height='4' xmlns='http://www.w3.org/2000/svg'%3E%3Cline x1='0' y1='1' x2='100%25' y2='1' stroke='%23cccccc' stroke-width='2' stroke-dasharray='12,12' stroke-dashoffset='0'/%3E%3C/svg%3E"); /* dark theme */ --dark-colour-primary: #eee; /* the lightest grey */ --dark-colour-secondary: #ddd; /* lighter grey */ --dark-colour-outline: #fff; /* white */ --dark-colour-remark: #1e90ff; /* light blue */ --dark-bg-colour-primary: #383c4a; /* silvery steel */ --dark-bg-colour-secondary: #daa520; /* golden */ --dark-bg-colour-secondary-rgb: 218, 165, 32; /* golden RGB */ --dark-border-filter: brightness(0) invert(1); /* light theme */ --light-colour-primary: #000; /* black */ --light-colour-secondary: #666; /* grey */ --light-colour-outline: #ccc; /* light grey */ --light-colour-remark: #1e90ff; /* light blue */ --light-bg-colour-primary: #eee; /* the lightest grey */ --light-bg-colour-secondary: #daa520; /* golden */ --light-bg-colour-secondary-rgb: 218, 165, 32; /* golden RGB */ --light-border-filter: none; } html { min-height: 666px; min-width: 666px; } :root.theme-dark { --forced-colour-primary: var(--dark-colour-primary); --forced-colour-secondary: var(--dark-colour-secondary); --forced-colour-outline: var(--dark-colour-outline); --forced-colour-remark: var(--dark-colour-remark); --forced-bg-colour-primary: var(--dark-bg-colour-primary); --forced-bg-colour-secondary: var(--dark-bg-colour-secondary); --forced-bg-colour-secondary-rgb: var(--dark-bg-colour-secondary-rgb); --forced-border-filter: var(--dark-border-filter); } :root.theme-light { --forced-colour-primary: var(--light-colour-primary); --forced-colour-secondary: var(--light-colour-secondary); --forced-colour-outline: var(--light-colour-outline); --forced-colour-remark: var(--light-colour-remark); --forced-bg-colour-primary: var(--light-bg-colour-primary); --forced-bg-colour-secondary: var(--light-bg-colour-secondary); --forced-bg-colour-secondary-rgb: var(--light-bg-colour-secondary-rgb); --forced-border-filter: var(--light-border-filter); } #light:checked ~ main { --forced-colour-primary: var(--light-colour-primary); --forced-colour-secondary: var(--light-colour-secondary); --forced-colour-outline: var(--light-colour-outline); --forced-colour-remark: var(--light-colour-remark); --forced-bg-colour-primary: var(--light-bg-colour-primary); --forced-bg-colour-secondary: var(--light-bg-colour-secondary); --forced-bg-colour-secondary-rgb: var(--light-bg-colour-secondary-rgb); --forced-border-filter: var(--light-border-filter); } #dark:checked ~ main { --forced-colour-primary: var(--dark-colour-primary); --forced-colour-secondary: var(--dark-colour-secondary); --forced-colour-outline: var(--dark-colour-outline); --forced-colour-remark: var(--dark-colour-remark); --forced-bg-colour-primary: var(--dark-bg-colour-primary); --forced-bg-colour-secondary: var(--dark-bg-colour-secondary); --forced-bg-colour-secondary-rgb: var(--dark-bg-colour-secondary-rgb); --forced-border-filter: var(--dark-border-filter); } main { position: absolute; top: 0; --colour-primary: var(--forced-colour-primary, var(--default-colour-primary, var(--light-colour-primary))); --colour-secondary: var(--forced-colour-secondary, var(--default-colour-secondary, var(--light-colour-secondary))); --colour-outline: var(--forced-colour-outline, var(--default-colour-outline, var(--light-colour-outline))); --colour-remark: var(--forced-colour-remark, var(--default-colour-remark, var(--light-colour-remark))); --bg-colour-primary: var( --forced-bg-colour-primary, var(--default-bg-colour-primary, var(--light-bg-colour-primary)) ); --bg-colour-secondary: var( --forced-bg-colour-secondary, var(--default-bg-colour-secondary, var(--light-bg-colour-secondary)) ); --bg-colour-secondary-rgb: var( --forced-bg-colour-secondary-rgb, var(--default-bg-colour-secondary-rgb, var(--light-bg-colour-secondary-rgb)) ); --border-filter: var(--forced-border-filter, var(--default-border-filter, var(--light-border-filter))); background-color: var(--bg-colour-primary); } /* :not(li):not(.exCompany) > a { white-space: nowrap; } */ a:not(:hover) { text-decoration: none; } a:not(.btn):not(.silent)[href] { color: #3f9f3f; } body { position: relative; } details > ul ~ ul { margin-top: -1rem; } hr { margin: 0; padding: 0; position: relative; width: 100%; } picture { display: inline-block; img, source { /* width: 100%; */ height: 100%; /* object-fit: contain; /* ensure correct aspect ratio */ object-fit: cover; object-position: center; } } table { border-spacing: 0; width: 100%; } .block { display: block; } .break { display: none; } .flex { display: flex; } .invisible { position: absolute; visibility: hidden; } .anchor_section, .anchor_details { display: inline-block; height: 1px; position: absolute; } .header { font-size: 111%; text-transform: uppercase; } .keywords { display: inline-block; /* opacity: 0.4; */ padding: 0 0.85rem; } .paragraph:not([data-filtered-display="1"]) { display: none; } .paragraph:not(.placeholder):not([data-filtered-display]):nth-of-type(-n+5) { display: block; /* ~ .paragraph:not([data-filtered-display]) { border-top: 2px solid var(--colour-outline); } */ } .paragraph > summary { > *:not(.info):not(.keywords):not(.radio-toggle):not(.flex) { padding: 0 2rem 0 1.5rem; } .blockHeader { margin-left: -1.7rem; } } details:not(:first-of-type) .blockHeader { display: none; } /* #kw_l { margin: -1.5rem 0.7rem 0 0; } */ #content { box-sizing: border-box; margin: 0; padding: 0; position: relative; } #columns { background: inherit; break-inside: avoid; columns: 2; } #top { position: absolute; } #keywords + .mc { display: list-item; list-style-type: none; margin-bottom: 0; .targetable { border: 0; ul { list-style-type: none; } } } #dateGen { break-before: avoid; padding: 0.5rem 0.75rem; page-break-after: always; text-align: right; .date-group::after { break-before: avoid; content: "."; float: right; } } .paragraph .blockHeader { margin-left: -0.2rem; margin-top: -0.4rem; padding-bottom: 1rem !important; width: 100%; } .mc { margin: 2rem 0.75rem 0; position: relative; } .exInfo { display: inline-block; list-style-position: outside; /* padding-left: 3rem; padding-right: 3rem; */ width: 95%; a { display: inline-block; white-space: nowrap; } } .exInfo + .exInfo { padding-bottom: 0; padding-top: 0; } /* .exCommon ~ .info .exInfo { padding-right: 1.75rem; } */ .exLogo { background-position: right; background-repeat: no-repeat; background-size: contain; height: 50%; margin-right: -2rem; position: absolute; right: 2rem; top: 20%; width: 25%; } .exInfo { padding-left: 1.25rem; } .info { max-width: 95%; padding-left: 1rem; } #dn { padding: 0; div { align-items: baseline; display: flex; font-size: 90%; margin-top: -1rem; padding: 0.5rem 1rem 0.75rem; text-align: right; span { display: inline; padding: 0; } #filter-button { margin-right: auto; &:has(+ span #dn_count.max) { #show-all { display: none; } } &:has(+ span #dn_count:not(.max)) { #change-filters { display: none; } } } #filtered-label { white-space: nowrap; } } } #intro_w picture:not(.qrCode) { display: inline-flex; } #summary tr td:last-child { text-align: left; } ul > li > ul > li { list-style-position: outside; margin-left: 15px; } .name, .specialty { font-weight: normal; } #blockquote { break-after: avoid; display: block; font-size: 111%; font-style: oblique; font-weight: normal; opacity: 0.7; text-align: center; &::after, &::before { font-size: 175%; margin-left: -0.5rem; } &::before { content: "“ "; } &::after { content: " ”"; } u { text-decoration-style: dotted; } } .blockHeader { display: flex; margin-bottom: -1.2rem; .header, .headline { display: table-cell; } .header { break-after: avoid; color: #ccc; font-style: italic; font-weight: normal; margin-top: -1.35rem; white-space: nowrap; } } .headline sub { margin-left: 0.35%; width: 101%; } .underline sub { display: flex; margin-left: 0.5%; margin-top: -0.3rem; width: 100.75%; } .headline, .underline { width: 100%; sub { /* line at the beginning and end of .mc */ background-color: var(--colour-outline); border-color: var(--colour-outline); border-style: solid; border-width: 1px; display: block; height: 0; position: relative; right: 1%; } } .header { font-size: 80%; } .targetable.paragraph { border-color: var(--colour-outline); border-style: solid; border-width: 0 2px; padding: 1rem 0; &.filterable:has(+ .break ~ .targetable.paragraph)::after { background-image: var(--border-dash-after); bottom: -1rem; content: ""; display: block; height: 2px; left: 1px; position: relative; right: 0; } &[data-filtered-display="1"] ~ .paragraph.targetable::before { background-image: var(--border-dash-before); content: ""; display: block; height: 2px; left: 0; margin-top: -2px; position: relative; right: 0; top: -1rem; } & .underline { margin-bottom: -0.7rem; margin-left: -0.2rem; margin-top: 1rem; width: 101%; } } .exCommon { sub { line-height: 1.5rem; padding-top: 0.75rem; } .exMain > *:not(.exCompany) { display: flex; } } .exCompany, .exIndustry { font-size: 90%; } .exCompany { display: inline-block; /* min-width: 110px; */ } .exCommon + hr { margin: 3%; width: 95%; } .exIndustry { line-height: 1rem; margin-left: -0.55rem; } .exMain { margin-left: -2rem; position: relative; } .exMain > *:not(.exLogo) { width: 75%; } .exLocation { white-space: nowrap; } .header { margin-top: -1.6rem; } .inline-flex-column { display: inline-flex; flex-direction: column; } .underline { margin-bottom: 1rem; } .linkLabel { white-space: nowrap; } .full, .hidden { display: none; } .mc .paragraph { div:not([class]), .exMain, .exIndustry { padding: 0.25rem 1rem; } } #avatar { border-radius: 50%; height: auto; max-width: 240px; width: 90%; /* z-index: 1; */ img, source { border-radius: 50%; } } #goal { font-size: 111%; text-align: center; } #header { white-space: nowrap; .name, .specialty { display: inline-block; } } #intro_w { align-items: center; display: flex; flex-wrap: wrap; justify-content: center; margin-bottom: 0; margin-top: 0; padding-right: 4rem; row-gap: 1.5rem; text-align: center; width: 95%; h2 { font-size: 200%; } table { width: 100%; } #locales { display: grid; float: right; padding-left: 2rem; text-align: left; width: auto; tbody, thead { display: table; /* width: 100%; */ } thead { width: 100%; td { &:not(:first-of-type) { border-top: 2px solid var(--colour-outline); } &:nth-of-type(2) { border-left: 2px solid var(--colour-outline); border-top-left-radius: 1rem; } &:last-of-type { border-right: 2px solid var(--colour-outline); border-top-right-radius: 1rem; } } .extraPad { display: none; } .icon { padding-left: 1rem; } } tbody { border-bottom: 2px solid var(--colour-outline); border-bottom-right-radius: 1rem; border-right: 2px solid var(--colour-outline); margin-left: -1.5rem; tr { &:last-of-type { border-bottom: 2px solid var(--colour-outline); border-bottom-right-radius: 1rem; td:first-of-type { border-bottom: 2px solid var(--colour-outline); } td:first-of-type, td:last-of-type { border-bottom-right-radius: 1rem; } } /* td:nth-of-type(2) { padding-right: 1rem; } */ td:first-of-type { border-right: 2px solid var(--colour-outline); } picture { margin-left: 15px; .locale { background-color: #fff; display: table-column; height: 20px; } } } } .extraPad { width: 1.5rem; .ep { width: 1.5rem; } } .icon { padding-right: 0.15rem; width: 33px; } .langNative { font-weight: bold; } .padder { padding-right: 0.5rem; /* display: inline-flex; */ padding-top: 0.5rem; } } #summary { padding: 0 2rem; width: auto; a span { font-weight: bold; } tbody { display: initial; } tr td:first-child { picture:not(.qrCode) img { height: 40px; width: 40px; } } .linkLabel, .padder a { display: inline-flex; } } } #resources { break-inside: avoid; } #professional + .mc { break-before: recto; } #badges { break-inside: avoid; margin-bottom: -1.5rem; position: relative; width: 100%; .caption { display: block; padding-bottom: 0.2rem; position: relative; text-align: left; width: 100%; } #hashtags { display: block; font-weight: normal; padding: 0 0.4rem; text-align: left; option { display: inline-block; &:hover { text-decoration: underline; } &:not(:last-of-type)::after { content: ", "; padding-right: 0.5rem; } } } } #about, #badges table, #goal { border: 2px solid var(--colour-outline); border-radius: 8px; box-sizing: border-box; } #about, #goal { padding: 1rem 1.5rem; } #goal_w { margin-top: 1rem; } #badges table { caption-side: bottom; max-width: 100%; position: relative; text-align: center; width: 100%; } #ed { text-align: left; } #inProd, #locales sub { font-style: italic; } #locales sub { font-size: 60%; } .date-group input:disabled { background: transparent; border: 1px solid transparent; font: inherit; } .date-group[data-exclude="editor"] input { display: none; } .date-sep:before { content: " –"; display: inline; } .dates::after { content: attr(data-duration); display: inline; font-style: initial; font-weight: initial; } .label-date-checkbox { &:checked + .date-group { background-color: #fff; border: 1px solid; color: #000; .view, .localFormat { display: none; } .edit { align-items: center; border-radius: 0.3rem; display: inline-flex; padding-left: 0.5rem; white-space: nowrap; input { border: 0; font: inherit; outline: none; } } } &:not(:checked) + .date-group { border: 1px solid transparent; .view { align-items: center; border-radius: 0.3rem; display: inline-flex; .localFormat:empty { display: none; } } .edit, .calendarButton { display: none; } } } .date-group { align-items: center; border-radius: 0.5rem; display: inline-flex; font-family: monospace; font-style: normal; font-weight: normal; padding: 0; white-space: nowrap; } .date-group .calendarButton { background: none; border: none; font-size: inherit; line-height: 1rem; padding: 0.5rem; } body:not(.dragging) .date-group .calendarButton { cursor: pointer; } .datePicker { visibility: hidden; width: 1px; } .save:focus { outline: none; } .inputYear { width: 4ch; } .inputMonth, .inputDay { width: 2ch; } .datePicker[type="text"] { background: none; border: none; border-bottom: 1px solid transparent; color: #000; font: inherit; outline: none; padding: 0; } body:not(.dragging) .datePicker[type="text"] { cursor: text; } .localFormat:empty + .datePicker { visibility: visible; width: 10ch; } * { border: transparent; font-variant-ligatures: none; } body { font-family: Calibri, Helvetica, Arial, sans-serif; } main { --bg-colour-primary: #fff; position: relative; } aside, input, nav, .btn, .datePicker, .inProd, .info.extra, .keywords, .kwTgl, .no-print, .qrCode, .sidebar, .tags, .transparent, #change-filters, #dn .blockHeader, #licenses_w, #resources .linkIcon, #tagsAnimatedView, #tagsCurrent, #toggles > *:not(#toggles__whileClicking), #toggles > #toggles__whileClicking :where(a, label) { display: none; } @page { margin: 0; size: A4 landscape; } .mc, #dateGen, #resources { display: block; position: relative; } body { line-height: 1.45rem; padding: 0; } body { & { margin: 0; padding-bottom: 10.22%; /* Makes space for the bottom border */ padding-top: 8.5%; /* Makes space for the top border */ position: relative; } &::after, &::before { background-image: linear-gradient(45deg, rgba(0, 0, 0, 0.05) 25%, transparent 25%), linear-gradient(-45deg, rgba(0, 0, 0, 0.05) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, rgba(0, 0, 0, 0.05) 75%), linear-gradient(-45deg, transparent 75%, rgba(0, 0, 0, 0.05) 75%); background-position: 0 0, 0 20px, 20px -20px, -20px 0px; background-size: 40px 40px; content: ""; height: 10.22%; left: 0; position: fixed; width: 100%; z-index: 1; } &::after { bottom: 0; } &::before { top: 0; } > .name, > .specialty { margin-left: 36.1rem; text-align: left; } #about { margin-top: -2.25rem; padding: 0.75rem 1.15rem; } #ed { border-top: 2px solid #ccc; padding-top: 1rem; position: fixed; right: 2.15rem; top: 9rem; width: 45.67%; picture { margin-left: -0.7rem; margin-top: -0.7rem; position: absolute; width: 70px; } span { display: block; padding-left: 3.85rem; } } #goal_w { position: absolute; right: 1.5rem; top: 2rem; width: 45.67%; z-index: 1; } #intro_w { margin-top: -2.25rem; #locales_w { align-items: center; display: flex; } .linkIcon { margin-bottom: 0.1rem; padding-right: 0.5rem; } } #experienced_w, #educated_w { /* gap in flex column to continue at next page */ margin-top: 7rem; } } #experienced_w, #featured_projects_w, #publications_w { margin-bottom: 2rem; } #experienced_w { break-inside: auto; .paragraph.targetable.filterable { padding-bottom: 1rem; padding-top: 1rem; } .paragraph.targetable { &.filterable:not(:last-of-type)::after, &:not(:first-of-type)::before { content: ""; display: block; height: 2px; } &.filterable:not(:last-of-type)::after { background-image: var(--border-dash-after); margin-bottom: -1rem; margin-top: 1rem; } &:not(:first-of-type)::before { background-image: var(--border-dash-before); margin-bottom: 0.2rem; margin-top: -0.625rem; width: 100%; } } } #experienced_w > .filterable.targetable.paragraph { border-bottom: 0; border-top: 0; /* break-after: auto !important; break-before: auto !important; */ display: block; &:nth-of-type(4) { break-after: always !important; /* border-bottom: 2px solid #ccc; */ & + .break { display: block; padding-top: 5.75rem; } } &:nth-of-type(5):before { margin-top: -1rem; } &:nth-of-type(5) ~ .filterable { display: none; } } #educated_w { display: none; } img { height: 100%; } .exInfo { padding-left: 0.6rem; } .exCommon { line-height: 1.3rem; padding-left: 0; sub { color: #555; font-size: 85%; margin-top: 2rem; } .exIndustry { display: block !important; margin-top: -1.6rem; position: absolute; text-align: right; width: 97.5%; } } .exCompany { break-inside: avoid; margin-bottom: -0.5rem; margin-left: 0.45rem; margin-top: 0.2rem; } .exLogo { margin-right: -2.75rem; margin-top: -0.5rem; } .exMain { h4 { margin-left: 8px; } } .paragraph:not(.placeholder):not([data-filtered-display]):nth-of-type(-n+5) { margin-top: -0.5rem; } .targetable.paragraph .blockHeader { /* margin-left: -1.6rem; */ margin-top: -1.5rem; position: absolute; width: 92.4%; .header { padding: 0 0.7rem; } } .targetable.paragraph:not(:first-of-type) .blockHeader { display: none; } .targetable.paragraph.filterable:not(:last-of-type) .underline { display: none; } .headline { padding-bottom: 0.6rem; sub { margin-top: -0.4rem; } } .keywords { font-size: 90%; margin-top: -0.5rem; max-width: 100%; } .mc { background-color: #fff; margin: 0 -1rem; padding: 0.2rem 1.5rem 0; } .silent { color: #222; } #avatar { height: 200px; margin-bottom: 0.5rem; width: 200px; source { display: none; } img { border: 1px solid #999; height: 200px; width: 200px; } } #content { display: block; padding: 20px; } #columns { break-inside: auto !important; columns: 2; } #pdf-work-history-note { color: #3f9f3f; display: inline-block; margin-left: auto; padding: 0 0.33rem; white-space: nowrap; } #intro_w { #locales, #summary { img { margin-top: -0.85rem; } } #locales { display: block; a sub { padding-top: 3px; } img { border: 1px solid #333; /* height: 22px; */ width: 33px; } thead { position: relative; } } #summary { margin-bottom: 0.75rem; img { height: 30px; width: 30px; } } } #resources { /* qr codes at second page */ display: block; padding-left: 1.35rem; padding-right: 1.35rem; position: absolute; top: 41rem; .padder { display: block; position: relative; width: 100%; } } #dateGen, #tagsCurrent { z-index: 2; } #dateGen > span, #tagsCurrent #kw { background-color: #fff; border: 2px solid var(--colour-outline); border-radius: 1rem; display: block; } #dateGen { position: absolute; right: 1.5rem; text-align: right; top: 45.5rem; .localFormat { color: #000; font-size: small; } } #dateGen > span { display: inline-block; padding-left: 0.5rem; .date-group:after { color: #000; display: inline-block; margin-left: -0.75rem; margin-top: -1.5rem; position: relative; } } #tagsCurrent { position: absolute; right: 1.4rem; top: 38.25rem; width: 96.3%; #kw { font-size: medium; padding: 0.15rem 0.5rem; u { text-decoration: none; a, &::before, &:not(:last-child)::after { color: inherit; font-style: normal; } &::before { content: "#"; } } } } #link_page { text-align: right; } #header { display: block; position: absolute; right: 1.5rem; text-align: right; top: 0.5rem; z-index: 999; span { color: #ccc; display: inline-block; position: relative; top: -0.25rem; } h1, h2 { &::first-letter { color: red; } padding: 0 1rem; } } #certificates_w { margin-top: 1.75rem; } #professional_w { margin-top: 7.65rem; } #dn { border-top: 0; display: block; margin-top: 0.5rem; div { display: flex; padding-top: 1.35rem; } } #filter-button { left: 0; opacity: 0; position: absolute; width: 100%; z-index: 2; span { display: none; } #show-all { display: block; left: 0; margin-top: -1.5rem; position: absolute; width: 100%; } } #filtered-label { margin-right: auto; &::before { content: "| "; } } #link_ats_page { display: none !important; } .input-predictor { display: none; } .radio-toggle { display: none; } .range-selector { display: none; } .dates { font-size: 76%; margin-left: 0.44rem; margin-top: -0.5rem; position: relative; } .date-group { display: inline-block; *:not(input) { border: 0; } .localFormat { margin-top: -0.75rem; } } .date-sep:before { padding-left: 0.5ch; padding-right: 0.5ch; }