From ab1215fb6367c1d4b4e11aba672d992147451644 Mon Sep 17 00:00:00 2001 From: Syndamia Date: Thu, 19 Aug 2021 13:52:27 +0300 Subject: Renamed resume to resume-v1 and added resume-v1.1 --- resume-v1.1/src/style.css | 217 ++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 217 insertions(+) create mode 100644 resume-v1.1/src/style.css (limited to 'resume-v1.1/src/style.css') diff --git a/resume-v1.1/src/style.css b/resume-v1.1/src/style.css new file mode 100644 index 0000000..82c6e1c --- /dev/null +++ b/resume-v1.1/src/style.css @@ -0,0 +1,217 @@ + +:root { + --font-color: #444; + --padding: .24in; + --picture-size: 10em; + --page-margin: 5mm; +} + +* { + font-size: 19px; + font-family: sans-serif; +} + +hr { + width: auto; + border: 1px solid var(--font-color); + margin: .9em 0; +} + +body { + width: 100%; + height: 100%; + margin: 0; + background-color: white; +} + +a, a:visited { + font-size: inherit; + color: #004080; +} + +/* The whole page */ + +.page { + width: 210mm; + height: 297mm; + margin: 0 auto; +} + +.content { + width: calc(100% - 2 * var(--page-margin)); + height: calc(100% - 2 * var(--page-margin)); + border: 3px solid var(--font-color); + box-sizing: border-box; + padding: var(--padding); + margin: var(--page-margin); + display: flex; + flex-direction: column; +} + +.content > * { + width: 100%; +} + +/* About/Summary */ + +#about { + display: flex; + width: 100%; + height: fit-content; + position: relative; +} + +#data { + flex: 1; + height: var(--picture-size); + display: flex; + flex-direction: column; +} + +#name { + font-size: 2.5em; + font-weight: bold; + margin-bottom: .2em; +} + +#text-data { + font-size: .7em; + flex: 1; + display: flex; +} + +.info { + flex: 1; + font-size: inherit; + display: flex; + flex-direction: column; +} + +.info > * { + flex: 1; +} + +.stacked-info { + font-size: inherit; + line-height: 1.3em; + margin-top: .8em; + border-left: 1px solid var(--font-color); + box-sizing: border-box; + padding: 0 1em; +} + +.stacked-info:first-child { + margin-top: 0; +} + +.stacked-info > b { + font-size: inherit; +} + +#picture-data { + height: var(--picture-size); + width: var(--picture-size); +} + +#picture-data > img { + width: var(--picture-size); + margin: auto 0; +} + +/* Sections */ + +.section-head { + margin: 0.5em 0; + display: flex; + align-items: center; +} + +.section-title { + font-weight: bold; + text-transform: uppercase; +} + +.section-head > hr { + flex: 1; + margin-left: 0.5em; +} + +/* Card */ + +.card { + width: 100%; + display: flex; + margin-bottom: 1em; +} + +.card-title { + width: 15%; + padding-right: 0.5em; +} + +.card-content { + flex: 1; + display: flex; + flex-direction: column; +} + +.card-content > .card { + margin-top: 1em; +} + +.card-content > .card > .card-title { + width: 24%; +} + +.card-content > .card:first-child { + margin-top: 0; +} + +.card-sub-title { + border-left: 3px solid var(--font-color); + padding-left: .5em; + font-weight: bold; + margin-bottom: .3em; +} + +.end-card, .card:last-child { + margin-bottom: 0; +} + +/* Rating */ + +.ratings { + width: 100%; + border: none; + table-layout: fixed; + border-collapse: colapse; + border-spacing: 0; +} + +.ratings td { + padding: 2px 0; + text-align: center; + vertical-align: middle; +} + +.ratings td:nth-child(2n) { + border-right: 1px solid black; +} + +.ratings td:last-child { + border-right-width: 0; +} + +/* Proper printing */ + +@page { + size: A4; + margin: 5mm; +} +@media print { + html, body, .page, .content { + width: 100%; + height: 100%; + margin: 0; + } +} -- cgit v1.2.3