From 9e5e1f9692c0d9acf2cad70a20e726bf219ae939 Mon Sep 17 00:00:00 2001 From: Remi Barraquand Date: Tue, 3 Feb 2015 17:59:52 +0100 Subject: [PATCH] make themes building deps optional, addresses #4 --- Makefile | 22 +- README.md | 16 +- stylesheets/{ => common}/_fa-var.scss | 0 stylesheets/{ => common}/_fonts.scss | 0 stylesheets/{ => common}/_layouts.scss | 0 stylesheets/{ => common}/_mixins.scss | 0 stylesheets/{ => common}/_settings.scss | 0 stylesheets/{ => themes/classic}/style.scss | 12 +- themes/classic/style.css | 502 ++++++++++++++++++++ 9 files changed, 533 insertions(+), 19 deletions(-) rename stylesheets/{ => common}/_fa-var.scss (100%) rename stylesheets/{ => common}/_fonts.scss (100%) rename stylesheets/{ => common}/_layouts.scss (100%) rename stylesheets/{ => common}/_mixins.scss (100%) rename stylesheets/{ => common}/_settings.scss (100%) rename stylesheets/{ => themes/classic}/style.scss (97%) create mode 100644 themes/classic/style.css diff --git a/Makefile b/Makefile index 33cb2b1..b59edf0 100644 --- a/Makefile +++ b/Makefile @@ -1,10 +1,12 @@ SRC_DIR = cv BUILD_DIR = build +THEMES_DIR = themes FONTS_DIR = fonts SCAFFOLDS_DIR = scaffolds IMAGES_DIR = $(SRC_DIR)/images DIST_DIR = dist HTMLTOPDF = wkpdf +THEME = classic DATE = $(shell date +'%B %d, %Y') ifeq "$(wildcard $(SRC_DIR) )" "" @@ -15,6 +17,9 @@ endif PARTS = $(patsubst $(SRC_DIR)/%.md, $(BUILD_DIR)/%.html, $(PARTS_SOURCES)) +STYLESHEETS = $(wildcard stylesheets/themes/*/style.scss) +THEMES = $(patsubst stylesheets/%, %, $(STYLESHEETS:.scss=.css)) + # before-body contains public or private parts before-body = --variable=privatecv ifeq ($(private-cv),true) @@ -28,7 +33,7 @@ endif # after-body contains all parts but public and private after-body = $(filter-out $(BUILD_DIR)/public.html $(BUILD_DIR)/private.html, $(PARTS)) -.PHONY: all directories media style parts html pdf clean +.PHONY: all directories media themes parts html pdf clean # default target is build CV in html all: html @@ -50,14 +55,17 @@ else endif # Target for building stylesheets -style: stylesheets/*.scss +themes: $(THEMES) + mkdir -p $(DIST_DIR)/stylesheets/ && cp -r $(THEMES_DIR) $(DIST_DIR) + +$(THEMES): $(STYLESHEETS) compass compile \ --require susy \ - --sass-dir stylesheets \ + --sass-dir stylesheets/themes \ --javascripts-dir javascripts \ - --css-dir $(DIST_DIR)/stylesheets \ + --css-dir $(THEMES_DIR) \ --image-dir $(IMAGES_DIR) \ - stylesheets/style.scss + $^ # Target for media media: | directories @@ -65,7 +73,7 @@ media: | directories rsync -rupE $(IMAGES_DIR) $(DIST_DIR) # Target for building CV document in html -html: media style templates/cv.html parts $(SRC_DIR)/cv.md | directories +html: media themes templates/cv.html parts $(SRC_DIR)/cv.md | directories pandoc --standalone \ --section-divs \ --smart \ @@ -75,7 +83,7 @@ html: media style templates/cv.html parts $(SRC_DIR)/cv.md | directories $(before-body) \ $(after-body) \ --variable=date:'$(DATE)' \ - --css stylesheets/style.css \ + --css $(THEMES_DIR)/$(THEME)/style.css \ --output $(DIST_DIR)/cv.html $(SRC_DIR)/cv.md # Target for building CV document in PDF diff --git a/README.md b/README.md index 2f2a53d..53b45ea 100644 --- a/README.md +++ b/README.md @@ -41,20 +41,20 @@ Live **pdf** preview [here](http://barraq.github.io/pandoc-moderncv/preview/cv.p ## Requirements For building your CV in html you need: -- [Compass](http://compass-style.org/) (>= 1.0), -- [Susy](http://susy.oddbird.net/) (>= 2.1), - [RSync](http://rsync.samba.org/), - [Pandoc](http://johnmacfarlane.net/pandoc/) (>= 1.13) For exporting your CV to pdf you need: -- wkpdf or wkhtmltopdf: - - wkpdf (MacOS X), http://plessl.github.io/wkpdf/ - - wkhtmltopdf (Linux, Windows), http://wkhtmltopdf.org/ -- exiftool, http://www.sno.phy.queensu.ca/~phil/exiftool/ +- [wkpdf](http://plessl.github.io/wkpdf/) (MacOS X) or [wkhtmltopdf](http://wkhtmltopdf.org/) (Linux, Windows), +- [ExifTool](http://www.sno.phy.queensu.ca/~phil/exiftool/) + +For building and customizing themes you need: +- [Compass](http://compass-style.org/) (>= 1.0), +- [Susy](http://susy.oddbird.net/) (>= 2.1) ## Installation -Install **Compass** and **Susy**: +Install **Compass** and **Susy** (only if you need to build themes): $ gem install compass $ gem install susy @@ -193,6 +193,8 @@ Currently pandoc-moderncv supports a single theme: classic. > Feel free to contribute and send me your custom theme! +To create a new THEME_NAME theme create a file `style.scss` under `stylesheets/themes//`. + ### Colors, Fonts, Icons All themes can be customized through variables defined in *stylesheets/_settings.scss*. Currently the variables are: diff --git a/stylesheets/_fa-var.scss b/stylesheets/common/_fa-var.scss similarity index 100% rename from stylesheets/_fa-var.scss rename to stylesheets/common/_fa-var.scss diff --git a/stylesheets/_fonts.scss b/stylesheets/common/_fonts.scss similarity index 100% rename from stylesheets/_fonts.scss rename to stylesheets/common/_fonts.scss diff --git a/stylesheets/_layouts.scss b/stylesheets/common/_layouts.scss similarity index 100% rename from stylesheets/_layouts.scss rename to stylesheets/common/_layouts.scss diff --git a/stylesheets/_mixins.scss b/stylesheets/common/_mixins.scss similarity index 100% rename from stylesheets/_mixins.scss rename to stylesheets/common/_mixins.scss diff --git a/stylesheets/_settings.scss b/stylesheets/common/_settings.scss similarity index 100% rename from stylesheets/_settings.scss rename to stylesheets/common/_settings.scss diff --git a/stylesheets/style.scss b/stylesheets/themes/classic/style.scss similarity index 97% rename from stylesheets/style.scss rename to stylesheets/themes/classic/style.scss index 71bd1d9..01625c2 100644 --- a/stylesheets/style.scss +++ b/stylesheets/themes/classic/style.scss @@ -1,12 +1,14 @@ @import "compass/reset"; @import "compass/typography/vertical_rhythm"; -//@import "vendors/fontawesome/font-awesome"; @import "susy"; -@import "settings"; -@import "mixins"; -@import "layouts"; -@import "fonts"; + +@import "../../common/settings"; +@import "../../common/mixins"; +@import "../../common/layouts"; + +$fa-font-path: "../../fonts" !default; +@import "../../common/fonts"; @include establish-baseline; diff --git a/themes/classic/style.css b/themes/classic/style.css new file mode 100644 index 0000000..001b1dc --- /dev/null +++ b/themes/classic/style.css @@ -0,0 +1,502 @@ +@charset "UTF-8"; +/* line 5, ../../../../../../../usr/local/rvm/gems/ruby-2.1.0@global/gems/compass-core-1.0.1/stylesheets/compass/reset/_utilities.scss */ +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: inherit; + font-size: 100%; + vertical-align: baseline; +} + +/* line 22, ../../../../../../../usr/local/rvm/gems/ruby-2.1.0@global/gems/compass-core-1.0.1/stylesheets/compass/reset/_utilities.scss */ +html { + line-height: 1; +} + +/* line 24, ../../../../../../../usr/local/rvm/gems/ruby-2.1.0@global/gems/compass-core-1.0.1/stylesheets/compass/reset/_utilities.scss */ +ol, ul { + list-style: none; +} + +/* line 26, ../../../../../../../usr/local/rvm/gems/ruby-2.1.0@global/gems/compass-core-1.0.1/stylesheets/compass/reset/_utilities.scss */ +table { + border-collapse: collapse; + border-spacing: 0; +} + +/* line 28, ../../../../../../../usr/local/rvm/gems/ruby-2.1.0@global/gems/compass-core-1.0.1/stylesheets/compass/reset/_utilities.scss */ +caption, th, td { + text-align: left; + font-weight: normal; + vertical-align: middle; +} + +/* line 30, ../../../../../../../usr/local/rvm/gems/ruby-2.1.0@global/gems/compass-core-1.0.1/stylesheets/compass/reset/_utilities.scss */ +q, blockquote { + quotes: none; +} +/* line 103, ../../../../../../../usr/local/rvm/gems/ruby-2.1.0@global/gems/compass-core-1.0.1/stylesheets/compass/reset/_utilities.scss */ +q:before, q:after, blockquote:before, blockquote:after { + content: ""; + content: none; +} + +/* line 32, ../../../../../../../usr/local/rvm/gems/ruby-2.1.0@global/gems/compass-core-1.0.1/stylesheets/compass/reset/_utilities.scss */ +a img { + border: none; +} + +/* line 116, ../../../../../../../usr/local/rvm/gems/ruby-2.1.0@global/gems/compass-core-1.0.1/stylesheets/compass/reset/_utilities.scss */ +article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { + display: block; +} + +/* default grid value */ +/* layouts settings */ +@font-face { + font-family: 'FontAwesome'; + src: url("../../fonts/fontawesome-webfont.eot?v=4.0.3"); + src: url("../../fonts/fontawesome-webfont.eot?#iefix&v=4.0.3") format("embedded-opentype"), url("../../fonts/fontawesome-webfont.woff?v=4.0.3") format("woff"), url("../../fonts/fontawesome-webfont.ttf?v=4.0.3") format("truetype"), url("../../fonts/fontawesome-webfont.svg?v=4.0.3#fontawesomeregular") format("svg"); + font-weight: normal; + font-style: normal; +} +/* line 16, ../../stylesheets/common/_fonts.scss */ +a[href^="http"]:before, a[href^="mailto:"]:before, a.phone:before, a.mobile:before, a.fax:before, a.twitter:before, a[href*='twitter.com']:before, a.github:before, a[href*='github.com']:before, a.linkedin:before, a[href*='linkedin.com']:before { + display: inline-block; + font-family: FontAwesome; + font-style: normal; + font-weight: normal; + line-height: 1; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + padding-right: 5px; +} + +/* line 28, ../../stylesheets/common/_fonts.scss */ +a[href^="http"]:before { + content: "" !important; +} + +/* line 29, ../../stylesheets/common/_fonts.scss */ +a[href^="mailto:"]:before { + content: "" !important; +} + +/* line 30, ../../stylesheets/common/_fonts.scss */ +a.phone:before { + content: "" !important; +} + +/* line 31, ../../stylesheets/common/_fonts.scss */ +a.mobile:before { + content: "" !important; +} + +/* line 32, ../../stylesheets/common/_fonts.scss */ +a.fax:before { + content: "" !important; +} + +/* line 35, ../../stylesheets/common/_fonts.scss */ +a.twitter:before, a[href*='twitter.com']:before { + content: "" !important; +} + +/* line 36, ../../stylesheets/common/_fonts.scss */ +a.github:before, a[href*='github.com']:before { + content: "" !important; +} + +/* line 37, ../../stylesheets/common/_fonts.scss */ +a.linkedin:before, a[href*='linkedin.com']:before { + content: "" !important; +} + +/* line 106, ../../../../../../../usr/local/rvm/gems/ruby-2.1.0@global/gems/compass-core-1.0.1/stylesheets/compass/typography/_vertical_rhythm.scss */ +html { + font-size: 112.5%; + line-height: 1.27778em; +} + +/* line 15, ../../stylesheets/themes/classic/style.scss */ +body { + max-width: 59em; + margin-left: auto; + margin-right: auto; + padding: 2em; +} +/* line 12, ../../../../../../../usr/local/rvm/gems/ruby-2.1.0@global/gems/susy-2.1.3/sass/susy/output/support/_clearfix.scss */ +body:after { + content: " "; + display: block; + clear: both; +} + +/* fonts */ +/* line 23, ../../stylesheets/themes/classic/style.scss */ +body { + font-family: "Palatino", sans-serif; +} + +/* line 24, ../../stylesheets/themes/classic/style.scss */ +strong { + font-weight: bold; +} + +/* line 25, ../../stylesheets/themes/classic/style.scss */ +em { + font-style: italic; +} + +/* line 26, ../../stylesheets/themes/classic/style.scss */ +h1 { + font-size: 2em; + line-height: 1.27778em; +} + +/* line 27, ../../stylesheets/themes/classic/style.scss */ +h2 { + font-size: 1.5em; + line-height: 1.27778em; +} + +/* line 28, ../../stylesheets/themes/classic/style.scss */ +h3 { + font-size: 1.2em; + line-height: 1.06481em; +} + +/* line 30, ../../stylesheets/themes/classic/style.scss */ +p, dt { + -ms-word-break: break-all; + word-break: break-all; + /* Non standard for webkit */ + word-break: break-word; + -webkit-hyphens: auto; + -moz-hyphens: auto; + -ms-hyphens: auto; + hyphens: auto; +} + +/* line 43, ../../stylesheets/themes/classic/style.scss */ +a { + text-decoration: none; + color: inherit; +} +/* line 55, ../../stylesheets/themes/classic/style.scss */ +a.social:before { + content: "" attr(data-network) "# "; +} + +/* Header */ +/* line 63, ../../stylesheets/themes/classic/style.scss */ +header { + width: 100%; + float: right; + margin-right: 0; + text-align: center; +} +/* line 70, ../../stylesheets/themes/classic/style.scss */ +header h1 span[itemprop="givenName"] { + color: black; +} +/* line 71, ../../stylesheets/themes/classic/style.scss */ +header h1 span[itemprop="familyName"] { + color: black; + text-transform: uppercase; +} +/* line 74, ../../stylesheets/themes/classic/style.scss */ +header h2 { + font-style: italic; + color: #595959; +} +/* line 79, ../../stylesheets/themes/classic/style.scss */ +header [itemprop='address'] { + color: black; +} +@media screen and (max-width: 42.61111em) { + /* line 83, ../../stylesheets/themes/classic/style.scss */ + header #title { + width: 100%; + float: right; + margin-right: 0; + margin-bottom: 1.27778em; + } + /* line 88, ../../stylesheets/themes/classic/style.scss */ + header .details { + width: 100%; + float: right; + margin-right: 0; + } + /* line 92, ../../stylesheets/themes/classic/style.scss */ + header img { + margin-bottom: 1.27778em; + width: 100%; + float: right; + margin-right: 0; + } +} +@media screen and (min-width: 26.66667em) and (max-width: 42.61111em) { + /* line 100, ../../stylesheets/themes/classic/style.scss */ + header img { + padding-left: 25.42373%; + padding-right: 25.42373%; + margin-top: 1.27778em; + margin-bottom: 1.27778em; + width: 49.15254%; + float: left; + margin-right: 1.69492%; + } +} +@media screen and (min-width: 42.66667em), print, projection { + /* line 112, ../../stylesheets/themes/classic/style.scss */ + header.with-photo #title { + width: 66.10169%; + float: left; + margin-right: 1.69492%; + text-align: right; + } + /* line 116, ../../stylesheets/themes/classic/style.scss */ + header.with-photo #title h2 { + margin-bottom: 0.63889em; + } + /* line 119, ../../stylesheets/themes/classic/style.scss */ + header.with-photo .details { + width: 66.10169%; + float: left; + margin-right: 1.69492%; + margin-left: 0px; + text-align: right; + } + /* line 125, ../../stylesheets/themes/classic/style.scss */ + header.with-photo img { + width: 32.20339%; + float: right; + margin-right: 0; + } + /* line 131, ../../stylesheets/themes/classic/style.scss */ + header:not(.with-photo) #title { + width: 57.62712%; + float: left; + margin-right: 1.69492%; + text-align: left; + } + /* line 136, ../../stylesheets/themes/classic/style.scss */ + header:not(.with-photo) .details { + width: 40.67797%; + float: right; + margin-right: 0; + text-align: right; + } +} +@media screen and (min-width: 55.11111em), print, projection { + /* line 146, ../../stylesheets/themes/classic/style.scss */ + header.with-photo #title { + width: 74.57627%; + float: left; + margin-right: 1.69492%; + } + /* line 150, ../../stylesheets/themes/classic/style.scss */ + header.with-photo .details { + width: 74.57627%; + float: left; + margin-right: 1.69492%; + } + /* line 154, ../../stylesheets/themes/classic/style.scss */ + header.with-photo img { + width: 23.72881%; + float: right; + margin-right: 0; + } +} + +/* Section */ +/* line 163, ../../stylesheets/themes/classic/style.scss */ +section { + width: 100%; + float: right; + margin-right: 0; +} +/* line 169, ../../stylesheets/themes/classic/style.scss */ +section > p { + margin-top: 1.27778em; + width: 100%; + float: right; + margin-right: 0; + text-align: justify; +} +/* line 177, ../../stylesheets/themes/classic/style.scss */ +section > h2 { + margin-top: 0.85185em; + width: 100%; + float: right; + margin-right: 0; + color: #595959; +} +/* line 182, ../../stylesheets/themes/classic/style.scss */ +section > h2:before { + content: ""; + display: inline-block; + margin-right: 1.69492%; + width: 13.55932%; + height: 0.42593em; + margin-bottom: 0.21296em; + background-color: #bfbfbf; +} +/* line 193, ../../stylesheets/themes/classic/style.scss */ +section > h3 { + margin-left: 16.94915%; + margin-top: 1.06481em; + width: 83.05085%; + float: left; + margin-right: 1.69492%; +} +/* line 201, ../../stylesheets/themes/classic/style.scss */ +section > dl { + width: 100%; + float: right; + margin-right: 0; +} +/* line 204, ../../stylesheets/themes/classic/style.scss */ +section > dl dl { + margin-left: -20.40816%; +} +/* line 209, ../../stylesheets/themes/classic/style.scss */ +section:not(.listing) > dl > dt, section:not(.listing) > dl > dd, section.listing > dl > dt:first-of-type, section.listing > dl > dd:first-of-type { + margin-top: 1.27778em; +} +/* line 214, ../../stylesheets/themes/classic/style.scss */ +section dt { + width: 15.25424%; + float: left; + margin-right: 1.69492%; + text-align: right; + clear: both; +} +/* line 220, ../../stylesheets/themes/classic/style.scss */ +section dd { + width: 83.05085%; + float: right; + margin-right: 0; +} +/* line 223, ../../stylesheets/themes/classic/style.scss */ +section dd dt { + font-style: italic; +} +/* line 230, ../../stylesheets/themes/classic/style.scss */ +section.jumbotron { + margin-top: 1.27778em; + width: 100%; + float: right; + margin-right: 0; + margin-bottom: 1.27778em; +} +/* line 231, ../../stylesheets/themes/classic/style.scss */ +section.jumbotron h1, section.jumbotron h2 { + display: none; +} +/* line 239, ../../stylesheets/themes/classic/style.scss */ +section.jumbotron, section.jumbotron p { + text-align: center; +} + +/* Footer */ +/* line 247, ../../stylesheets/themes/classic/style.scss */ +footer { + width: 100%; + float: right; + margin-right: 0; + margin-top: 1.27778em; + padding-top: 1.27778em; + padding-bottom: 1.27778em; + margin-bottom: 1.27778em; + text-align: center; +} +/* line 254, ../../stylesheets/themes/classic/style.scss */ +footer li { + display: inline; +} +/* line 254, ../../stylesheets/themes/classic/style.scss */ +footer li:before { + content: '\25CF'; + padding: 10px; + color: #bfbfbf; +} +/* line 255, ../../stylesheets/themes/classic/style.scss */ +footer p { + margin-top: 1.27778em; +} + +@media screen { + /* line 263, ../../stylesheets/themes/classic/style.scss */ + #qrcode { + display: none; + } +} +@media print, projection { + @page { + /* always print with A4 */ + size: portrait; + size: 210mm 297mm; + /* this affects the margin in the printer settings */ + margin: 1.5cm 1.5cm 1.5cm 1.5cm; + padding: 0; + /* too bad @page is not well supported */ + } + /* line 294, ../../stylesheets/themes/classic/style.scss */ + body { + min-width: 55.11111em; + } + + /* line 296, ../../stylesheets/themes/classic/style.scss */ + #qrcode { + width: 20.45455%; + float: left; + margin-right: 2.27273%; + max-width: 5.55556em; + } + + /* line 303, ../../stylesheets/themes/classic/style.scss */ + h2, h3 { + page-break-after: avoid; + } + + /* line 304, ../../stylesheets/themes/classic/style.scss */ + dt { + page-break-after: avoid !important; + } + + /* line 305, ../../stylesheets/themes/classic/style.scss */ + dd, p { + page-break-before: avoid !important; + } + + /* line 306, ../../stylesheets/themes/classic/style.scss */ + dl, dt, dd, p { + orphans: 3; + widows: 3; + } + + /* line 307, ../../stylesheets/themes/classic/style.scss */ + dt, dd, p { + page-break-inside: avoid !important; + } + + /* line 308, ../../stylesheets/themes/classic/style.scss */ + .page-breaker { + page-break-before: always; + } +}