From a83beea2852286225de806f264fea6364056992e Mon Sep 17 00:00:00 2001 From: Ben Meller Date: Fri, 10 Sep 2021 22:24:09 +1000 Subject: [PATCH 1/2] Add benmeller CV style --- media/benmeller-print.css | 214 ++++++++++++++++++++++++++++++++ media/benmeller-screen.css | 246 +++++++++++++++++++++++++++++++++++++ 2 files changed, 460 insertions(+) create mode 100644 media/benmeller-print.css create mode 100644 media/benmeller-screen.css diff --git a/media/benmeller-print.css b/media/benmeller-print.css new file mode 100644 index 0000000000..55226c4b6d --- /dev/null +++ b/media/benmeller-print.css @@ -0,0 +1,214 @@ +/* http://meyerweb.com/eric/tools/css/reset/ + v2.0 | 20110126 + License: none (public domain) +*/ + +html, body, div, span, applet, object, iframe, +h1, h2, h3, h4, h5, h6, p, blockquote, pre, +a, abbr, acronym, address, big, cite, code, +del, dfn, em, img, ins, kbd, q, s, samp, +small, strike, strong, sub, sup, tt, var, +b, u, i, center, +dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, +table, caption, tbody, tfoot, thead, tr, th, td, +article, aside, canvas, details, embed, +figure, figcaption, footer, header, hgroup, +menu, nav, output, ruby, section, summary, +time, mark, audio, video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; +} +/* HTML5 display-role reset for older browsers */ +article, aside, details, figcaption, figure, +footer, header, hgroup, menu, nav, section { + display: block; +} +body { + line-height: 1; +} +ol, ul { + list-style: none; +} +blockquote, q { + quotes: none; +} +blockquote:before, blockquote:after, +q:before, q:after { + content: ''; + content: none; +} +table { + border-collapse: collapse; + border-spacing: 0; +} + +/* end of reset */ + + + +body { + font: normal normal 400; + font-size: 11pt; + line-height: 1.2em; + /*also written as... font: normal normal 400 100%/1.5em;*/ + font-family: Avenir,Verdana,sans-serif; + /* margin-top: 1em; + margin-left: 1em; */ +} + +p { + position: relative; + margin-bottom: 1.2em; + margin-right: 0; + width: 82%; + font-weight: 300; + color: #535150; +} + +b, strong { + color: #000; +} + +code { + font: normal normal; + font-size: 90%; + /*line-height: 1em;*/ + font-family: Avenir,Monaco,Menlo,monospace,sans-serif; + color: #ccc; +} + +p code { + position: absolute; + text-align: right; + right: -20%; +} + + +ul { + position: relative; + width: 82%; + margin-bottom: 1.5em; + margin-top: -1em; +} + +/*uncomment to get dashes in the list*/ +li:before { + content: "-"; + position: relative; + left: -0.25em; +} + +li { + /*second line indent*/ + padding-left: 1.25em; + /* text-indent: -1.25em; */ +} + +li ul { + position: relative; + left: 0; + width: 82%; + margin-top: 0.25em; +} + +h1,h2,h3,h4 { + font-weight: 400; + font-family: Avenir,Cousine,Verdana,sans-serif; + width: 82%; + + text-transform: uppercase; +} + +h1 { + text-align: left; + font-size: 3em; + line-height: 1.1em; + letter-spacing: 3px; + position: relative; + font-weight: 700; +} + +h1+p { + /*subtitle*/ + font-style: italic; + font-size: 110%; +} + +h2 { + font-size: 1.4em; + margin-top: 2em; + position: relative; + font-weight: 500; + margin-bottom: 1.4em; +} + +/* Add black bar under H2 */ +h2::before { + content: ''; + position: absolute; + left: 0; + top: 1.2em; + height: 15px; + width: 65px; + border-top: 5px solid black; +} + +h3 { + font-size: 1em; + line-height: 2em; + position: relative; + font-weight: 500; +} + +a { + color: inherit; + text-decoration:none +} + +a:hover { + color:#39f +} + +div#webaddress > p { + text-transform: uppercase; +} + +em { + font-weight: normal; + font-style: italic; +} + +strong { + font-weight: bold; +} + +#ghbutton { + display: none; + visibility: hidden; +} + +#address { + display: none; +} + +hr { + border-top: 0.5px solid rgb(66, 66, 66); +} + + +/* Style for profile image at top. Insert image before H1 */ +img { + position: absolute; + right: -22%; + height: 7.5em; + border-radius: 50%; +} + +@page { + margin: 8%; + } \ No newline at end of file diff --git a/media/benmeller-screen.css b/media/benmeller-screen.css new file mode 100644 index 0000000000..af918f40bb --- /dev/null +++ b/media/benmeller-screen.css @@ -0,0 +1,246 @@ +/* http://meyerweb.com/eric/tools/css/reset/ + v2.0 | 20110126 + License: none (public domain) +*/ + +html, body, div, span, applet, object, iframe, +h1, h2, h3, h4, h5, h6, p, blockquote, pre, +a, abbr, acronym, address, big, cite, code, +del, dfn, em, img, ins, kbd, q, s, samp, +small, strike, strong, sub, sup, tt, var, +b, u, i, center, +dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, +table, caption, tbody, tfoot, thead, tr, th, td, +article, aside, canvas, details, embed, +figure, figcaption, footer, header, hgroup, +menu, nav, output, ruby, section, summary, +time, mark, audio, video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; +} +/* HTML5 display-role reset for older browsers */ +article, aside, details, figcaption, figure, +footer, header, hgroup, menu, nav, section { + display: block; +} +body { + line-height: 1; +} +ol, ul { + list-style: none; +} +blockquote, q { + quotes: none; +} +blockquote:before, blockquote:after, +q:before, q:after { + content: ''; + content: none; +} +table { + border-collapse: collapse; + border-spacing: 0; +} + +/* end of reset */ + + + +body { + font: normal normal 400; + font-size: 100%; + line-height: 1.2em; + /*also written as... font: normal normal 400 100%/1.5em;*/ + font-family: Avenir,Verdana,sans-serif; + margin: 1em 20%; + min-width: 15em; +} + +p { + position: relative; + margin-bottom: 1.2em; + margin-right: 0; + width: 82%; + font-weight: 300; + color: #535150; +} + +b, strong { + color: #000; +} + +code { + font: normal normal; + font-size: 90%; + /*line-height: 1em;*/ + font-family: Avenir,Monaco,Menlo,monospace,sans-serif; + color: #aaa; +} + +p code { + position: absolute; + text-align: right; + right: -20%; +} + + +ul { + position: relative; + width: 82%; + margin-bottom: 1.5em; + margin-top: -1em; +} + +/*uncomment to get dashes in the list*/ +li:before { + content: "-"; + position: relative; + left: -0.25em; +} + +li { + /*second line indent*/ + padding-left: 1.25em; + /* text-indent: -1.25em; */ + /*color: #777;*/ +} + +li ul { + position: relative; + left: 0; + width: 82%; + margin-top: 0.25em; +} + +h1,h2,h3,h4 { + font-weight: 400; + font-family: Avenir,Cousine,Verdana,sans-serif; + width: 82%; + + text-transform: uppercase; +} + +h1 { + text-align: left; + font-size: 3em; + line-height: 1.1em; + letter-spacing: 3px; + position: relative; + font-weight: 700; +} + +h1+p { + /*subtitle*/ + font-style: italic; + font-size: 110%; +} + +h2 { + font-size: 1.4em; + margin-top: 2em; + position: relative; + font-weight: 500; + margin-bottom: 1.4em; +} + +/* Add black bar under H2 */ +h2::before { + content: ''; + position: absolute; + left: 0; + top: 1.2em; + height: 15px; + width: 65px; + border-top: 5px solid black; +} + +h3 { + font-size: 1em; + line-height: 2em; + position: relative; + font-weight: 500; +} + +a { + color: inherit; + text-decoration:none +} + +a:hover { + color:#39f +} + +div#webaddress > p { + text-transform: uppercase; +} + +em { + /* font-weight: bold; */ + font-style: italic; +} + +strong { + font-weight: bold; +} + +#address { + display: none; +} + +hr { + border-top: 0.5px solid rgb(66, 66, 66); +} + +/* Profile image at top. Insert image before H1 */ +img { + position: absolute; + right: -22%; + height: 7.5em; + border-radius: 50%; +} + + +/* Responsive */ +/* Large screens ----------- */ +@media only screen +and (min-width : 1824px) { + body { + margin: 1em 25%; + } +} + +/* Smaller screens - e.g. iPad and below */ +@media screen and (max-width: 1024px) { + body { + margin: 1em 5%; + } +} + +/* Mobile */ +@media screen and (max-width: 480px) { + h1 { + font-size: 2em; + } + + p { + width: 70%; + } + + p code { + right: -40%; + } + + .item:first-child { + flex-basis: 100%; + } + + img { + height: 5em; + right: -34%; + } +} \ No newline at end of file From 4f66b7aa0e093fa9834608218df1776b305281fa Mon Sep 17 00:00:00 2001 From: Ben Meller Date: Fri, 10 Sep 2021 22:24:44 +1000 Subject: [PATCH 2/2] Update README --- README.md | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 99d2d44506..adbd822ca0 100644 --- a/README.md +++ b/README.md @@ -42,12 +42,14 @@ Any change you want to make to your CV from then on would have to be done on the ## Styling -The included CSS will render your CV in two styles: -s +The included CSS will render your CV in three styles: + 1. `kjhealy` the original default, inspired by [kjhealy's vita template](https://github.com/kjhealy/kjh-vita). 2. `davewhipp` is a tweaked version of `kjhealy`, with bigger fonts and dates right aligned. +3. `benmeller` is a monochrome version of `davewhipp` with heavier headings + brought vertically inline with the main content. To change the default style, simply change the variable in the `_config.yml` file.