From a5416d9d7f51f7785e98a8e67e77685f4d123ebd Mon Sep 17 00:00:00 2001 From: Benjamin Franzke Date: Tue, 5 Jul 2016 14:27:14 +0200 Subject: Move css into root ..allows to specify realtive font path's that are usable with and without compiling the css --- Makefile | 10 +- font.css | 72 +++++++++++ style.css | 356 ++++++++++++++++++++++++++++++++++++++++++++++++++++ style.min.css | 1 + style/font.css | 72 ----------- style/style.css | 356 ---------------------------------------------------- style/style.min.css | 1 - xsl/common.xsl | 2 +- 8 files changed, 435 insertions(+), 435 deletions(-) create mode 100644 font.css create mode 100644 style.css create mode 100644 style.min.css delete mode 100644 style/font.css delete mode 100644 style/style.css delete mode 100644 style/style.min.css diff --git a/Makefile b/Makefile index f7f4008..9c344ba 100644 --- a/Makefile +++ b/Makefile @@ -10,7 +10,7 @@ versioned_png = 's/.*/.png?&/' version_args = --stringparam versioned_jpg $(shell echo $(version) | sed $(versioned_jpg)) --stringparam versioned_png $(shell echo $(version) | sed $(versioned_png)) -xsltproc=xsltproc --stringparam stylesheet "$(shell cat style/style.min.css)" --stringparam version $(version) $(version_args) +xsltproc=xsltproc --stringparam stylesheet "$(shell cat style.min.css)" --stringparam version $(version) $(version_args) svg2png=rsvg-convert -f png fix_doctype=sed 's/ SYSTEM "about:legacy-compat"//' @@ -24,7 +24,7 @@ pages=$(shell xsltproc xsl/main_filenames.xsl main.xml) pages_gen=$(pages:%.xml=%$(suffix)) pages_gen_html=$(pages:%.xml=%.html) -common_depend=main.xml $(wildcard xsl/*.xsl) Makefile checkmark.svg style/style.min.css minify_html.sed +common_depend=main.xml $(wildcard xsl/*.xsl) Makefile checkmark.svg style.min.css minify_html.sed DEFAULT_VERBOSITY=0 @@ -43,7 +43,7 @@ v_css_0 = @echo " CSS " $@; .PHONY: all html -all: $(pages_gen) checkmark.png style/style.min.css +all: $(pages_gen) checkmark.png style.min.css html: $(pages_gen_html) @@ -62,8 +62,8 @@ html: $(pages_gen_html) %.html: %.xml $(common_depend) $(V_XSLT) $(xsltproc) --stringparam suffix .html $< | $(to_html) | $(html_minify) > $@ -style/style.min.css: style/style.css style/font.css - $(V_CSS) node_modules/.bin/postcss -u postcss-import -u postcss-css-variables style/style.css | node_modules/.bin/cleancss > style/style.min.css +style.min.css: style.css font.css + $(V_CSS) node_modules/.bin/postcss -u postcss-import -u postcss-css-variables style.css | node_modules/.bin/cleancss > style.min.css clean: rm -f $(pages_gen) checkmark.png diff --git a/font.css b/font.css new file mode 100644 index 0000000..0a5af42 --- /dev/null +++ b/font.css @@ -0,0 +1,72 @@ +@font-face { + font-family: 'Roboto'; + font-style: normal; + font-weight: 400; + src: + local('Roboto'), + local('Roboto-Regular'), + /* from https:/fonts.gstatic.com/s/roboto/v15/5YB-ifwqHP20Yn46l_BDhA.eot */ + url('fonts/Roboto_400.eot?#iefix') format('embedded-opentype'), + /* from https:/fonts.gstatic.com/s/roboto/v15/2UX7WLTfW3W8TclTUvlFyQ.woff */ + url('fonts/Roboto_400.woff?v=1') format('woff'), + /* from https:/fonts.gstatic.com/s/roboto/v15/CWB0XYA8bzo0kSThX0UTuA.woff2 */ + url('fonts/Roboto_400.woff2?v=1') format('woff2'), + /* from https:/fonts.gstatic.com/l/font?kit=_YZOZaQ9UBZzaxiLBLcgZg&skey=a0a0114a1dcab3ac&v=v15#Roboto */ + url('fonts/Roboto_400.svg#Roboto') format('svg'), + /* from https:/fonts.gstatic.com/s/roboto/v15/zN7GBFwfMP4uA6AR0HCoLQ.ttf */ + url('fonts/Roboto_400.ttf') format('truetype'); +} +@font-face { + font-family: 'Roboto'; + font-style: normal; + font-weight: 500; + src: + local('Roboto Medium'), + local('Roboto-Medium'), + /* from https:/fonts.gstatic.com/s/roboto/v15/RxZJdnzeo3R5zSexge8UUfY6323mHUZFJMgTvxaG2iE.eot */ + url('fonts/Roboto_500.eot?#iefix') format('embedded-opentype'), + /* from https:/fonts.gstatic.com/s/roboto/v15/RxZJdnzeo3R5zSexge8UUT8E0i7KZn-EPnyo3HZu7kw.woff */ + url('fonts/Roboto_500.woff?v=1') format('woff'), + /* from https:/fonts.gstatic.com/s/roboto/v15/RxZJdnzeo3R5zSexge8UUVtXRa8TVwTICgirnJhmVJw.woff2 */ + url('fonts/Roboto_500.woff2?v=1') format('woff2'), + /* from https:/fonts.gstatic.com/l/font?kit=RxZJdnzeo3R5zSexge8UUZbd9NUM7myrQQz30yPaGQ4&skey=ee881451c540fdec&v=v15#Roboto */ + url('fonts/Roboto_500.svg#Roboto') format('svg'), + /* from https:/fonts.gstatic.com/s/roboto/v15/RxZJdnzeo3R5zSexge8UUaCWcynf_cDxXwCLxiixG1c.ttf */ + url('fonts/Roboto_500.ttf') format('truetype'); +} +@font-face { + font-family: 'Roboto'; + font-style: normal; + font-weight: 700; + src: + local('Roboto Bold'), + local('Roboto-Bold'), + /* from https:/fonts.gstatic.com/s/roboto/v15/d-6IYplOFocCacKzxwXSOPY6323mHUZFJMgTvxaG2iE.eot */ + url('fonts/Roboto_700.eot?#iefix') format('embedded-opentype'), + /* from https:/fonts.gstatic.com/s/roboto/v15/d-6IYplOFocCacKzxwXSOD8E0i7KZn-EPnyo3HZu7kw.woff */ + url('fonts/Roboto_700.woff?v=1') format('woff'), + /* from https:/fonts.gstatic.com/s/roboto/v15/d-6IYplOFocCacKzxwXSOFtXRa8TVwTICgirnJhmVJw.woff2 */ + url('fonts/Roboto_700.woff2?v=1') format('woff2'), + /* from https:/fonts.gstatic.com/l/font?kit=d-6IYplOFocCacKzxwXSOJbd9NUM7myrQQz30yPaGQ4&skey=c06e7213f788649e&v=v15#Roboto */ + url('fonts/Roboto_700.svg#Roboto') format('svg'), + /* from https:/fonts.gstatic.com/s/roboto/v15/d-6IYplOFocCacKzxwXSOKCWcynf_cDxXwCLxiixG1c.ttf */ + url('fonts/Roboto_700.ttf') format('truetype'); +} +@font-face { + font-family: 'Roboto'; + font-style: italic; + font-weight: 400; + src: + local('Roboto Italic'), + local('Roboto-Italic'), + /* from https:/fonts.gstatic.com/s/roboto/v15/OiNnAEwKzzJkQCr4qZmeq_esZW2xOQ-xsNqO47m55DA.eot */ + url('fonts/Roboto_400italic.eot?#iefix') format('embedded-opentype'), + /* from https:/fonts.gstatic.com/s/roboto/v15/1pO9eUAp8pSF8VnRTP3xnvesZW2xOQ-xsNqO47m55DA.woff */ + url('fonts/Roboto_400italic.woff?v=1') format('woff'), + /* from https:/fonts.gstatic.com/s/roboto/v15/vPcynSL0qHq_6dX7lKVByfesZW2xOQ-xsNqO47m55DA.woff2 */ + url('fonts/Roboto_400italic.woff2?v=1') format('woff2'), + /* from https:/fonts.gstatic.com/l/font?kit=d6hCKsxkfwUDuz8291ns3vesZW2xOQ-xsNqO47m55DA&skey=c608c610063635f9&v=v15#Roboto */ + url('fonts/Roboto_400italic.svg#Roboto') format('svg'), + /* from https:/fonts.gstatic.com/s/roboto/v15/W4wDsBUluyw0tK3tykhXEfesZW2xOQ-xsNqO47m55DA.ttf */ + url('fonts/Roboto_400italic.ttf') format('truetype'); +} diff --git a/style.css b/style.css new file mode 100644 index 0000000..19cf013 --- /dev/null +++ b/style.css @@ -0,0 +1,356 @@ +@import "font.css"; + +:root { + --text-color: #333; + --color-red: hsl(2, 45%, 41%); + --color-red-hover: hsl(2, 45%, 30%); + --color-gray-dark: #4c4d51; +} + +* { + margin: 0; + padding: 0; +} + +*, *:before, *:after { + box-sizing: border-box; +} + +/* needed for full background when viewing .xml directly in firefox */ +html, body { + height: 100%; +} + +body { + background: #eee; + + font-family: Roboto, sans-serif; + font-size: 16px; + line-height: 1.35; + color: var(--text-color); + + display: flex; + flex-direction: column; + min-height: 100vh; +} + +header, footer { + position: relative; +} +header:before, +footer:before { + position: absolute; +} + +body > * { + flex: none; +} + +body > .outer { + flex: 1 0 auto; +} + +form { +} + +input, textarea { + padding: 2px 5px; + color: var(--text-color); + margin-bottom: 15px; +} +textarea { + width: 100%; +} + +h2, h3 { + margin-top: 1.5em; +} + +h1 { + font-size: 2em; + font-weight: 500; + margin-bottom: 0.67em; +} + +h2 { + font-size: 1.5em; + font-weight: 500; + margin-bottom: 0.75em; +} + +h3 { + font-size: 1.2em; + font-weight: bold; + margin-bottom: 0.80em; +} + +p, ul, ol { + margin-bottom: 1em; +} + +ul, ol { + margin-left: 1.2em; +} + +blockquote { + margin-left: 3em; + margin-right: 3em; +} + +a { + color: var(--color-red); + text-decoration: none; +} + +a:hover, +a:focus { + text-decoration: none; + color: var(--color-red-hover); +} + +a img { + border: none; +} + +img.left { + float: left; + margin: 5px 2em 0 0; +} + +img.right { + float: right; + margin: 5px 0px 2em 2em; +} + +label { + display: inline-block; + margin-left: 20px; + min-width: 90px; +} + +header, nav, main, footer { + width: 65em; + max-width: 65em; + margin: 0 auto; +} + +header { + margin-bottom: 1em; + padding: 2em 0 0.5em; +} + +header .h1, header .h2 { + margin: 0; + letter-spacing: -0.025em; + font-weight: normal; +} + +header svg { + position: relative; + bottom: -7px; + margin-right: 1em; + width: 3.5em; + height: 3.5em; +} + +header .h1 { + display: inline; + font-size: 3em; + color: #444; +} + +header .h2 { + display: inline; + padding-left: .5em; + font-size: 1.5em; + color: #858585; +} + +nav > ul:after { + content: ''; + display: block; + clear: both; +} + +.outer { + background: white; + border-top: 2px var(--color-red) solid; + padding: 2em 0; +} +nav > ul { + padding-left: 0; + margin-left: 0; +} +nav > ul > li { + display: block; + float: left; + width: 20%; +} + +nav > ul > li + li { + padding-left: 2px; +} + +nav > ul > li a { + display: inline-block; + padding: .7em 1.5em; + background: var(--color-gray-dark); + text-decoration: none; + text-transform: uppercase; + font-weight: bold; + color: #fff; + letter-spacing: 0.05em; + width: 100%; + text-align: center; +} + +nav > ul a:hover, +nav > ul a:focus, +nav > ul a.active { + background: var(--color-red); + color: #fff; +} + +main { + display: flex; + flex-direction: row; +} + +article, aside { + margin: 2em 0; +} + +article { + flex: 1 1 45em; + padding-right: 1em; +} + +aside { + padding-left: 1em; + flex: 1 1 18em; +} + +.redbox, +a.redbox:hover { + display: inline-block; + text-decoration: none; + width: 100%; + padding: 1em; + margin-top: .5em; + margin-bottom: 1em; + background: var(--color-red); + border: 2px solid rgba(0,0,0,.02); + color: white; +} + + +article h1 { + color: var(--color-red); +} + +article .intro { + font-size: 1.1em; + margin: 10px 0; +} + + +footer { + margin: 0 auto; + padding: 20px 0; + text-align: center; +} + +footer p { + margin: 0; + font-size: .8em; + color: #666; +} + +footer p a { + color: inherit; +} + +.logos { + background: white; + text-align: center; +} + +.logos img { + vertical-align: middle; + margin: 1.5em 3em; +} + +.social-icon { + width: auto; + height: 2em; +} + +.info:after { + content: '*'; + display: inline; +} + +.small { + font-size: 0.875em; + color: #555; +} + +@media (max-width: 75em) { + header, nav, main, footer { + width: 62em; + max-width: 62em; + } + header .h1 { + font-size: 2.8em; + } +} + +@media (max-width: 63em) { + body, main { + display: block; + } + body { + /* For google pagespeed */ + line-height: 1.4; + } + header, nav, main, footer { + width: 100%; + max-width: 100%; + padding-left: 1em; + padding-right: 1em; + } + header { + padding-top: 1em; + } + header .h1 { + font-size: 1.5em; + } + header .h2 { + font-size: 1.3em; + } + header svg { + width: 3em; + height: 3em; + float: left; + } + aside { + padding-left: 0; + } + + nav > ul > li { + float: none; + width: 100%; + } + nav > ul > li + li { + padding-left: 0; + } + img.left { + float: none; + margin-right: 0; + } + + img.right { + float: none; + margin-left: 0; + } +} diff --git a/style.min.css b/style.min.css new file mode 100644 index 0000000..49fa597 --- /dev/null +++ b/style.min.css @@ -0,0 +1 @@ +h1,h2{font-weight:500}footer,header,header svg{position:relative}a,a:focus,a:hover,nav>ul>li a{text-decoration:none}.logos,footer,nav>ul>li a{text-align:center}@font-face{font-family:Roboto;font-style:normal;font-weight:400;src:local('Roboto'),local('Roboto-Regular'),url(fonts/Roboto_400.eot?#iefix) format('embedded-opentype'),url(fonts/Roboto_400.woff?v=1) format('woff'),url(fonts/Roboto_400.woff2?v=1) format('woff2'),url(fonts/Roboto_400.svg#Roboto) format('svg'),url(fonts/Roboto_400.ttf) format('truetype')}@font-face{font-family:Roboto;font-style:normal;font-weight:500;src:local('Roboto Medium'),local('Roboto-Medium'),url(fonts/Roboto_500.eot?#iefix) format('embedded-opentype'),url(fonts/Roboto_500.woff?v=1) format('woff'),url(fonts/Roboto_500.woff2?v=1) format('woff2'),url(fonts/Roboto_500.svg#Roboto) format('svg'),url(fonts/Roboto_500.ttf) format('truetype')}@font-face{font-family:Roboto;font-style:normal;font-weight:700;src:local('Roboto Bold'),local('Roboto-Bold'),url(fonts/Roboto_700.eot?#iefix) format('embedded-opentype'),url(fonts/Roboto_700.woff?v=1) format('woff'),url(fonts/Roboto_700.woff2?v=1) format('woff2'),url(fonts/Roboto_700.svg#Roboto) format('svg'),url(fonts/Roboto_700.ttf) format('truetype')}@font-face{font-family:Roboto;font-style:italic;font-weight:400;src:local('Roboto Italic'),local('Roboto-Italic'),url(fonts/Roboto_400italic.eot?#iefix) format('embedded-opentype'),url(fonts/Roboto_400italic.woff?v=1) format('woff'),url(fonts/Roboto_400italic.woff2?v=1) format('woff2'),url(fonts/Roboto_400italic.svg#Roboto) format('svg'),url(fonts/Roboto_400italic.ttf) format('truetype')}*{margin:0;padding:0}*,:after,:before{box-sizing:border-box}body,html{height:100%}body{background:#eee;font-family:Roboto,sans-serif;font-size:16px;line-height:1.35;color:#333;display:flex;flex-direction:column;min-height:100vh}footer:before,header:before{position:absolute}body>*{flex:none}body>.outer{flex:1 0 auto}input,textarea{padding:2px 5px;color:#333;margin-bottom:15px}textarea{width:100%}h2,h3{margin-top:1.5em}h1{font-size:2em;margin-bottom:.67em}h2{font-size:1.5em;margin-bottom:.75em}h3{font-size:1.2em;font-weight:700;margin-bottom:.8em}ol,p,ul{margin-bottom:1em}ol,ul{margin-left:1.2em}blockquote{margin-left:3em;margin-right:3em}a{color:#973c39}a:focus,a:hover{color:#6e2c2a}a img{border:none}img.left{float:left;margin:5px 2em 0 0}img.right{float:right;margin:5px 0 2em 2em}label{display:inline-block;margin-left:20px;min-width:90px}footer,header,main,nav{width:65em;max-width:65em;margin:0 auto}header{margin-bottom:1em;padding:2em 0 .5em}header .h1,header .h2{margin:0;letter-spacing:-.025em;font-weight:400}header svg{bottom:-7px;margin-right:1em;width:3.5em;height:3.5em}header .h1{display:inline;font-size:3em;color:#444}header .h2{display:inline;padding-left:.5em;font-size:1.5em;color:#858585}nav>ul:after{content:'';display:block;clear:both}.outer{background:#fff;border-top:2px #973c39 solid;padding:2em 0}nav>ul{padding-left:0;margin-left:0}nav>ul>li{display:block;float:left;width:20%}nav>ul>li+li{padding-left:2px}nav>ul>li a{display:inline-block;padding:.7em 1.5em;background:#4c4d51;text-transform:uppercase;font-weight:700;color:#fff;letter-spacing:.05em;width:100%}.redbox,a.redbox:hover,nav>ul a.active,nav>ul a:focus,nav>ul a:hover{background:#973c39;color:#fff}main{display:flex;flex-direction:row}article,aside{margin:2em 0}article{flex:1 1 45em;padding-right:1em}aside{padding-left:1em;flex:1 1 18em}.redbox,a.redbox:hover{display:inline-block;text-decoration:none;width:100%;padding:1em;margin-top:.5em;margin-bottom:1em;border:2px solid rgba(0,0,0,.02)}article h1{color:#973c39}article .intro{font-size:1.1em;margin:10px 0}footer{margin:0 auto;padding:20px 0}footer p{margin:0;font-size:.8em;color:#666}footer p a{color:inherit}.logos{background:#fff}.logos img{vertical-align:middle;margin:1.5em 3em}.social-icon{width:auto;height:2em}.info:after{content:'*';display:inline}.small{font-size:.875em;color:#555}@media (max-width:75em){footer,header,main,nav{width:62em;max-width:62em}header .h1{font-size:2.8em}}@media (max-width:63em){body,main{display:block}body{line-height:1.4}footer,header,main,nav{width:100%;max-width:100%;padding-left:1em;padding-right:1em}header{padding-top:1em}header .h1{font-size:1.5em}header .h2{font-size:1.3em}header svg{width:3em;height:3em;float:left}aside,nav>ul>li+li{padding-left:0}nav>ul>li{float:none;width:100%}img.left{float:none;margin-right:0}img.right{float:none;margin-left:0}} \ No newline at end of file diff --git a/style/font.css b/style/font.css deleted file mode 100644 index fcb6e35..0000000 --- a/style/font.css +++ /dev/null @@ -1,72 +0,0 @@ -@font-face { - font-family: 'Roboto'; - font-style: normal; - font-weight: 400; - src: - local('Roboto'), - local('Roboto-Regular'), - /* from https://fonts.gstatic.com/s/roboto/v15/5YB-ifwqHP20Yn46l_BDhA.eot */ - url('/fonts/Roboto_400.eot?#iefix') format('embedded-opentype'), - /* from https://fonts.gstatic.com/s/roboto/v15/2UX7WLTfW3W8TclTUvlFyQ.woff */ - url('/fonts/Roboto_400.woff?v=1') format('woff'), - /* from https://fonts.gstatic.com/s/roboto/v15/CWB0XYA8bzo0kSThX0UTuA.woff2 */ - url('/fonts/Roboto_400.woff2?v=1') format('woff2'), - /* from https://fonts.gstatic.com/l/font?kit=_YZOZaQ9UBZzaxiLBLcgZg&skey=a0a0114a1dcab3ac&v=v15#Roboto */ - url('/fonts/Roboto_400.svg#Roboto') format('svg'), - /* from https://fonts.gstatic.com/s/roboto/v15/zN7GBFwfMP4uA6AR0HCoLQ.ttf */ - url('/fonts/Roboto_400.ttf') format('truetype'); -} -@font-face { - font-family: 'Roboto'; - font-style: normal; - font-weight: 500; - src: - local('Roboto Medium'), - local('Roboto-Medium'), - /* from https://fonts.gstatic.com/s/roboto/v15/RxZJdnzeo3R5zSexge8UUfY6323mHUZFJMgTvxaG2iE.eot */ - url('/fonts/Roboto_500.eot?#iefix') format('embedded-opentype'), - /* from https://fonts.gstatic.com/s/roboto/v15/RxZJdnzeo3R5zSexge8UUT8E0i7KZn-EPnyo3HZu7kw.woff */ - url('/fonts/Roboto_500.woff?v=1') format('woff'), - /* from https://fonts.gstatic.com/s/roboto/v15/RxZJdnzeo3R5zSexge8UUVtXRa8TVwTICgirnJhmVJw.woff2 */ - url('/fonts/Roboto_500.woff2?v=1') format('woff2'), - /* from https://fonts.gstatic.com/l/font?kit=RxZJdnzeo3R5zSexge8UUZbd9NUM7myrQQz30yPaGQ4&skey=ee881451c540fdec&v=v15#Roboto */ - url('/fonts/Roboto_500.svg#Roboto') format('svg'), - /* from https://fonts.gstatic.com/s/roboto/v15/RxZJdnzeo3R5zSexge8UUaCWcynf_cDxXwCLxiixG1c.ttf */ - url('/fonts/Roboto_500.ttf') format('truetype'); -} -@font-face { - font-family: 'Roboto'; - font-style: normal; - font-weight: 700; - src: - local('Roboto Bold'), - local('Roboto-Bold'), - /* from https://fonts.gstatic.com/s/roboto/v15/d-6IYplOFocCacKzxwXSOPY6323mHUZFJMgTvxaG2iE.eot */ - url('/fonts/Roboto_700.eot?#iefix') format('embedded-opentype'), - /* from https://fonts.gstatic.com/s/roboto/v15/d-6IYplOFocCacKzxwXSOD8E0i7KZn-EPnyo3HZu7kw.woff */ - url('/fonts/Roboto_700.woff?v=1') format('woff'), - /* from https://fonts.gstatic.com/s/roboto/v15/d-6IYplOFocCacKzxwXSOFtXRa8TVwTICgirnJhmVJw.woff2 */ - url('/fonts/Roboto_700.woff2?v=1') format('woff2'), - /* from https://fonts.gstatic.com/l/font?kit=d-6IYplOFocCacKzxwXSOJbd9NUM7myrQQz30yPaGQ4&skey=c06e7213f788649e&v=v15#Roboto */ - url('/fonts/Roboto_700.svg#Roboto') format('svg'), - /* from https://fonts.gstatic.com/s/roboto/v15/d-6IYplOFocCacKzxwXSOKCWcynf_cDxXwCLxiixG1c.ttf */ - url('/fonts/Roboto_700.ttf') format('truetype'); -} -@font-face { - font-family: 'Roboto'; - font-style: italic; - font-weight: 400; - src: - local('Roboto Italic'), - local('Roboto-Italic'), - /* from https://fonts.gstatic.com/s/roboto/v15/OiNnAEwKzzJkQCr4qZmeq_esZW2xOQ-xsNqO47m55DA.eot */ - url('/fonts/Roboto_400italic.eot?#iefix') format('embedded-opentype'), - /* from https://fonts.gstatic.com/s/roboto/v15/1pO9eUAp8pSF8VnRTP3xnvesZW2xOQ-xsNqO47m55DA.woff */ - url('/fonts/Roboto_400italic.woff?v=1') format('woff'), - /* from https://fonts.gstatic.com/s/roboto/v15/vPcynSL0qHq_6dX7lKVByfesZW2xOQ-xsNqO47m55DA.woff2 */ - url('/fonts/Roboto_400italic.woff2?v=1') format('woff2'), - /* from https://fonts.gstatic.com/l/font?kit=d6hCKsxkfwUDuz8291ns3vesZW2xOQ-xsNqO47m55DA&skey=c608c610063635f9&v=v15#Roboto */ - url('/fonts/Roboto_400italic.svg#Roboto') format('svg'), - /* from https://fonts.gstatic.com/s/roboto/v15/W4wDsBUluyw0tK3tykhXEfesZW2xOQ-xsNqO47m55DA.ttf */ - url('/fonts/Roboto_400italic.ttf') format('truetype'); -} diff --git a/style/style.css b/style/style.css deleted file mode 100644 index 19cf013..0000000 --- a/style/style.css +++ /dev/null @@ -1,356 +0,0 @@ -@import "font.css"; - -:root { - --text-color: #333; - --color-red: hsl(2, 45%, 41%); - --color-red-hover: hsl(2, 45%, 30%); - --color-gray-dark: #4c4d51; -} - -* { - margin: 0; - padding: 0; -} - -*, *:before, *:after { - box-sizing: border-box; -} - -/* needed for full background when viewing .xml directly in firefox */ -html, body { - height: 100%; -} - -body { - background: #eee; - - font-family: Roboto, sans-serif; - font-size: 16px; - line-height: 1.35; - color: var(--text-color); - - display: flex; - flex-direction: column; - min-height: 100vh; -} - -header, footer { - position: relative; -} -header:before, -footer:before { - position: absolute; -} - -body > * { - flex: none; -} - -body > .outer { - flex: 1 0 auto; -} - -form { -} - -input, textarea { - padding: 2px 5px; - color: var(--text-color); - margin-bottom: 15px; -} -textarea { - width: 100%; -} - -h2, h3 { - margin-top: 1.5em; -} - -h1 { - font-size: 2em; - font-weight: 500; - margin-bottom: 0.67em; -} - -h2 { - font-size: 1.5em; - font-weight: 500; - margin-bottom: 0.75em; -} - -h3 { - font-size: 1.2em; - font-weight: bold; - margin-bottom: 0.80em; -} - -p, ul, ol { - margin-bottom: 1em; -} - -ul, ol { - margin-left: 1.2em; -} - -blockquote { - margin-left: 3em; - margin-right: 3em; -} - -a { - color: var(--color-red); - text-decoration: none; -} - -a:hover, -a:focus { - text-decoration: none; - color: var(--color-red-hover); -} - -a img { - border: none; -} - -img.left { - float: left; - margin: 5px 2em 0 0; -} - -img.right { - float: right; - margin: 5px 0px 2em 2em; -} - -label { - display: inline-block; - margin-left: 20px; - min-width: 90px; -} - -header, nav, main, footer { - width: 65em; - max-width: 65em; - margin: 0 auto; -} - -header { - margin-bottom: 1em; - padding: 2em 0 0.5em; -} - -header .h1, header .h2 { - margin: 0; - letter-spacing: -0.025em; - font-weight: normal; -} - -header svg { - position: relative; - bottom: -7px; - margin-right: 1em; - width: 3.5em; - height: 3.5em; -} - -header .h1 { - display: inline; - font-size: 3em; - color: #444; -} - -header .h2 { - display: inline; - padding-left: .5em; - font-size: 1.5em; - color: #858585; -} - -nav > ul:after { - content: ''; - display: block; - clear: both; -} - -.outer { - background: white; - border-top: 2px var(--color-red) solid; - padding: 2em 0; -} -nav > ul { - padding-left: 0; - margin-left: 0; -} -nav > ul > li { - display: block; - float: left; - width: 20%; -} - -nav > ul > li + li { - padding-left: 2px; -} - -nav > ul > li a { - display: inline-block; - padding: .7em 1.5em; - background: var(--color-gray-dark); - text-decoration: none; - text-transform: uppercase; - font-weight: bold; - color: #fff; - letter-spacing: 0.05em; - width: 100%; - text-align: center; -} - -nav > ul a:hover, -nav > ul a:focus, -nav > ul a.active { - background: var(--color-red); - color: #fff; -} - -main { - display: flex; - flex-direction: row; -} - -article, aside { - margin: 2em 0; -} - -article { - flex: 1 1 45em; - padding-right: 1em; -} - -aside { - padding-left: 1em; - flex: 1 1 18em; -} - -.redbox, -a.redbox:hover { - display: inline-block; - text-decoration: none; - width: 100%; - padding: 1em; - margin-top: .5em; - margin-bottom: 1em; - background: var(--color-red); - border: 2px solid rgba(0,0,0,.02); - color: white; -} - - -article h1 { - color: var(--color-red); -} - -article .intro { - font-size: 1.1em; - margin: 10px 0; -} - - -footer { - margin: 0 auto; - padding: 20px 0; - text-align: center; -} - -footer p { - margin: 0; - font-size: .8em; - color: #666; -} - -footer p a { - color: inherit; -} - -.logos { - background: white; - text-align: center; -} - -.logos img { - vertical-align: middle; - margin: 1.5em 3em; -} - -.social-icon { - width: auto; - height: 2em; -} - -.info:after { - content: '*'; - display: inline; -} - -.small { - font-size: 0.875em; - color: #555; -} - -@media (max-width: 75em) { - header, nav, main, footer { - width: 62em; - max-width: 62em; - } - header .h1 { - font-size: 2.8em; - } -} - -@media (max-width: 63em) { - body, main { - display: block; - } - body { - /* For google pagespeed */ - line-height: 1.4; - } - header, nav, main, footer { - width: 100%; - max-width: 100%; - padding-left: 1em; - padding-right: 1em; - } - header { - padding-top: 1em; - } - header .h1 { - font-size: 1.5em; - } - header .h2 { - font-size: 1.3em; - } - header svg { - width: 3em; - height: 3em; - float: left; - } - aside { - padding-left: 0; - } - - nav > ul > li { - float: none; - width: 100%; - } - nav > ul > li + li { - padding-left: 0; - } - img.left { - float: none; - margin-right: 0; - } - - img.right { - float: none; - margin-left: 0; - } -} diff --git a/style/style.min.css b/style/style.min.css deleted file mode 100644 index 835755a..0000000 --- a/style/style.min.css +++ /dev/null @@ -1 +0,0 @@ -h1,h2{font-weight:500}footer,header,header svg{position:relative}a,a:focus,a:hover,nav>ul>li a{text-decoration:none}.logos,footer,nav>ul>li a{text-align:center}@font-face{font-family:Roboto;font-style:normal;font-weight:400;src:local('Roboto'),local('Roboto-Regular'),url(/fonts/Roboto_400.eot?#iefix) format('embedded-opentype'),url(/fonts/Roboto_400.woff?v=1) format('woff'),url(/fonts/Roboto_400.woff2?v=1) format('woff2'),url(/fonts/Roboto_400.svg#Roboto) format('svg'),url(/fonts/Roboto_400.ttf) format('truetype')}@font-face{font-family:Roboto;font-style:normal;font-weight:500;src:local('Roboto Medium'),local('Roboto-Medium'),url(/fonts/Roboto_500.eot?#iefix) format('embedded-opentype'),url(/fonts/Roboto_500.woff?v=1) format('woff'),url(/fonts/Roboto_500.woff2?v=1) format('woff2'),url(/fonts/Roboto_500.svg#Roboto) format('svg'),url(/fonts/Roboto_500.ttf) format('truetype')}@font-face{font-family:Roboto;font-style:normal;font-weight:700;src:local('Roboto Bold'),local('Roboto-Bold'),url(/fonts/Roboto_700.eot?#iefix) format('embedded-opentype'),url(/fonts/Roboto_700.woff?v=1) format('woff'),url(/fonts/Roboto_700.woff2?v=1) format('woff2'),url(/fonts/Roboto_700.svg#Roboto) format('svg'),url(/fonts/Roboto_700.ttf) format('truetype')}@font-face{font-family:Roboto;font-style:italic;font-weight:400;src:local('Roboto Italic'),local('Roboto-Italic'),url(/fonts/Roboto_400italic.eot?#iefix) format('embedded-opentype'),url(/fonts/Roboto_400italic.woff?v=1) format('woff'),url(/fonts/Roboto_400italic.woff2?v=1) format('woff2'),url(/fonts/Roboto_400italic.svg#Roboto) format('svg'),url(/fonts/Roboto_400italic.ttf) format('truetype')}*{margin:0;padding:0}*,:after,:before{box-sizing:border-box}body,html{height:100%}body{background:#eee;font-family:Roboto,sans-serif;font-size:16px;line-height:1.35;color:#333;display:flex;flex-direction:column;min-height:100vh}footer:before,header:before{position:absolute}body>*{flex:none}body>.outer{flex:1 0 auto}input,textarea{padding:2px 5px;color:#333;margin-bottom:15px}textarea{width:100%}h2,h3{margin-top:1.5em}h1{font-size:2em;margin-bottom:.67em}h2{font-size:1.5em;margin-bottom:.75em}h3{font-size:1.2em;font-weight:700;margin-bottom:.8em}ol,p,ul{margin-bottom:1em}ol,ul{margin-left:1.2em}blockquote{margin-left:3em;margin-right:3em}a{color:#973c39}a:focus,a:hover{color:#6e2c2a}a img{border:none}img.left{float:left;margin:5px 2em 0 0}img.right{float:right;margin:5px 0 2em 2em}label{display:inline-block;margin-left:20px;min-width:90px}footer,header,main,nav{width:65em;max-width:65em;margin:0 auto}header{margin-bottom:1em;padding:2em 0 .5em}header .h1,header .h2{margin:0;letter-spacing:-.025em;font-weight:400}header svg{bottom:-7px;margin-right:1em;width:3.5em;height:3.5em}header .h1{display:inline;font-size:3em;color:#444}header .h2{display:inline;padding-left:.5em;font-size:1.5em;color:#858585}nav>ul:after{content:'';display:block;clear:both}.outer{background:#fff;border-top:2px #973c39 solid;padding:2em 0}nav>ul{padding-left:0;margin-left:0}nav>ul>li{display:block;float:left;width:20%}nav>ul>li+li{padding-left:2px}nav>ul>li a{display:inline-block;padding:.7em 1.5em;background:#4c4d51;text-transform:uppercase;font-weight:700;color:#fff;letter-spacing:.05em;width:100%}.redbox,a.redbox:hover,nav>ul a.active,nav>ul a:focus,nav>ul a:hover{background:#973c39;color:#fff}main{display:flex;flex-direction:row}article,aside{margin:2em 0}article{flex:1 1 45em;padding-right:1em}aside{padding-left:1em;flex:1 1 18em}.redbox,a.redbox:hover{display:inline-block;text-decoration:none;width:100%;padding:1em;margin-top:.5em;margin-bottom:1em;border:2px solid rgba(0,0,0,.02)}article h1{color:#973c39}article .intro{font-size:1.1em;margin:10px 0}footer{margin:0 auto;padding:20px 0}footer p{margin:0;font-size:.8em;color:#666}footer p a{color:inherit}.logos{background:#fff}.logos img{vertical-align:middle;margin:1.5em 3em}.social-icon{width:auto;height:2em}.info:after{content:'*';display:inline}.small{font-size:.875em;color:#555}@media (max-width:75em){footer,header,main,nav{width:62em;max-width:62em}header .h1{font-size:2.8em}}@media (max-width:63em){body,main{display:block}body{line-height:1.4}footer,header,main,nav{width:100%;max-width:100%;padding-left:1em;padding-right:1em}header{padding-top:1em}header .h1{font-size:1.5em}header .h2{font-size:1.3em}header svg{width:3em;height:3em;float:left}aside,nav>ul>li+li{padding-left:0}nav>ul>li{float:none;width:100%}img.left{float:none;margin-right:0}img.right{float:none;margin-left:0}} \ No newline at end of file diff --git a/xsl/common.xsl b/xsl/common.xsl index ed5c0f1..dbc5174 100644 --- a/xsl/common.xsl +++ b/xsl/common.xsl @@ -16,7 +16,7 @@ - + -- cgit