From 0b18b3056030c5571e0223c1c91f6538b97eacfa Mon Sep 17 00:00:00 2001 From: Jonas Smedegaard Date: Sat, 16 Sep 2017 22:30:04 +0200 Subject: Generate CSS from SCSS using sassc. --- .gitignore | 1 + Makefile | 11 ++ css/main.css | 509 --------------------------------------------------------- css/main.scss | 509 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++ css/print.css | 65 -------- css/print.scss | 65 ++++++++ 6 files changed, 586 insertions(+), 574 deletions(-) create mode 100644 .gitignore create mode 100644 Makefile delete mode 100644 css/main.css create mode 100644 css/main.scss delete mode 100644 css/print.css create mode 100644 css/print.scss diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..08bbd2c --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +css/*.css diff --git a/Makefile b/Makefile new file mode 100644 index 0000000..2bd51ec --- /dev/null +++ b/Makefile @@ -0,0 +1,11 @@ +cssfiles := css/main.css css/print.css + +all: $(cssfiles) + +$(cssfiles): css/%.css : css/%.scss + sassc $< $@ + +clean: + rm -f $(cssfiles) + +.PHONY: clean diff --git a/css/main.css b/css/main.css deleted file mode 100644 index b0ed6a1..0000000 --- a/css/main.css +++ /dev/null @@ -1,509 +0,0 @@ -/* @group General styles */ - -/* -Harmonise v1.3 -Resets styles then adds basic typographical styling. -Use as a starting point upon which to build more CSS. -By Clearleft.com -*/ - -/* @group Reset */ - -/* Based on http://meyerweb.com/eric/tools/css/reset/ */ -/* v1.0 | 20080212 */ - -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, font, 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 { - margin: 0; - padding: 0; - border: 0; - outline: 0; - font-size: 100%; - vertical-align: baseline; - background: transparent; -} - -ul { - list-style: none; -} -blockquote, q { - quotes: none; -} -blockquote:before, blockquote:after, -q:before, q:after { - content: ''; - content: none; -} - -:focus { - outline: 0; -} - -/* tables may still need 'cellspacing="0"' in the markup */ -table { - border-collapse: collapse; - border-spacing: 0; -} - -/* @end */ - - -body { - background: #fff; - color:#000; font-size:14px; line-height:1.2em; } - -a:link, -button.link span { - color: #0063DC; - text-decoration: underline; -} a:visited { - color: #1057ae; - text-decoration: underline; -} a:hover, -a:focus, -button.link:hover, -button.link:focus span { - color: #FFFFFF; - text-decoration: none; - background-color: #0063DC; -} a:active, -button.link:active span { - color: #FFFFFF; - text-decoration: none; - background-color: #0259C4; -} - -/* @group Font families */ - -body { - font-family: "helvetica neue", arial, helvetica, sans-serif; -} - -pre, code, kbd, tt, samp, tt { - font-family: "andale mono", monospace; -} - -/* @end */ - -/* @group Font sizes & margins */ - -p, ul, ol, dl, address, table, pre, form, fieldset { - font-size: 1em /* 14px */; - margin-bottom: 0.5em; -} - -/* size headings using classic scale of 16, 18, 24, 36 */ - -/* @end */ - -/* @group Headings */ - -h1 { - font-size: 2.571em /* 36px */; - line-height:1em /* 36px */; - margin-top:0.1667em /* 6px */; - margin-bottom:0.5833em /* 21px */; -} -h1 span { - font-size: 0.5em; - line-height: 1; - color: #999; - display: block; - margin-bottom: 0.3em; -} -h2, h3 { - font-size:1.143em /* 16px */; - margin-top:0; - padding-bottom: 0.5em; - margin-bottom:0.5em /* 8px */; - text-align: center; - border-bottom: 1px solid #999; -} -h4 { - margin-top:1em /* 21px */; - font-size:1em /* 14px */; - margin-bottom: 0.5em; -} -h5, h6 { - font-size:1em /* 14px */; - margin-bottom: 0.5em; -} - - -/* @end */ - -/* @group Lists */ - -ul { - list-style-type: disc; - margin-left: 1.5em; /* 21px */ -} - -ol { - list-style-type: decimal; - margin-left: 1.5em; /* 21px */ -} - -dt { - font-weight: bold; - margin-top: 1.5em; /* 21px */ -} - -ul ul, ol ol, ol ul, ul ol { - margin-bottom: 0; -} - -/* @end */ - -/* @group Tables */ - -table { - border-bottom: 1px solid #C7C7C7; -} - -caption { - font-weight: bold; - padding-bottom: 0.4375em; /* 7px */ - font-size:1.144em; /* 16px */ -} - -thead th { - border-bottom: 3px solid #C7C7C7; - padding-top: 0; - padding-bottom: 0.5em; /* 7px */ -} - -tbody { - border-top: 3px solid #C7C7C7; /* not rendered in IE6/7 */ -} - -tbody tr th, tbody tr td { - border-top: 1px solid #C7C7C7; -} - -th, td { - text-align: left; - padding: 0.286em 0.5em 0.214em 0.5em; /* 4px 7px 3px 7px */ -} - -/* @end */ - -/* @group Blockquotes */ - -blockquote { - font-style: italic; - margin:0 0 0 0; /* 21px */ - color: #999; -} - -p+p+blockquote { - margin-top: 1.5em /* 21px */; -} - -blockquote cite, -blockquote em { - font-style: normal; -} - -/* @end */ - -/* @group Other styling */ - -address { - font-style: normal; -} - -ins { - text-decoration: underline; - color: #27AD16; -} - -del { - text-decoration: line-through; - color: #B60D10; -} - -pre { - white-space: pre; - width: 100%; - font-size: 0.7em; - overflow: hidden; - border-top: 3px double #C7C7C7; - border-bottom: 3px double #C7C7C7; - padding: 0.5em 0; -} - -hr { - border: none; - background-color: black; - height: 1px; -} -/* @end */ - -/* @end */ - -/* @group Helper styles */ - -/* @group Forms */ - -/* @group Containers */ - -form .container { - margin-bottom: 1.5em; /* 21px */ -} - - -/* @group Fieldsets */ - -fieldset { - border: 1px solid #ccc; - padding: 0 1.5em 1em 1.5em; /* 0 21px 14px 21px */ -} - -legend { - font-weight: bold; -} - -form fieldset .container { - margin-top: 1em; /* 14px */ - margin-bottom:0; - position: relative; -} - -/* @end */ - -/* @end */ - -/* @group Labels */ - -label { - font-weight: bold; - cursor: pointer; -} - -.meta-label { - font-weight: bold; - margin-bottom: 0; -} - -.multi-container label, -.radio-container label, -.checkbox-container label { - font-weight: normal; -} - -.radio-container label, -.checkbox-container label { - display: block; -} - -.compact label { - display: inline; -} - -/* @end */ - -/* @group Meta */ - -form .help { - display: block; - color: #777; - font-style: normal; - font-size: 0.857em; /* 12px */ -} - -/* @end */ - -/* @group Form controls */ - -input, textarea, select, button { - font-family: inherit; - font-size: 1em; - line-height: inherit; -} - -select { - background-color: #fff; /* fixes bug in Opera which inherits bgcolor from container */ -} - -textarea, -input[type='text'], -input[type='password'], -select { - border-width: 1px; - border-style: solid; - border-top-color: #999; - border-left-color: #999; - border-bottom-color: #ccc; - border-right-color: #ccc; - padding: 0 1px 1px 1px; -} - -textarea:focus, -input[type='text']:focus, -input[type='password']:focus, -select:focus { - border-color: #888; - outline: 2px solid #ffffaa; -} - -input.short { - width: 4em; -} - -input.medium, textarea.medium { - width: 12em; -} - -input.long, textarea.long { - width: 30em; -} - -textarea { - width: 99%; - display: block; -} - -button { - overflow: visible; - cursor: pointer; -} - -.button-container input { - font-weight: bold; -} - -.button-container input.cancel { - font-weight: normal; -} - -button.link { - border: 0; - padding: 0; - background-color: #fff; - font-weight: normal; - cursor: pointer; - width: auto; - overflow: visible; -} - -/* accessibility feature, resize check and radio inputs */ -.radio-container input, -.checkbox-container input { - width: 1em; - height: 1em; -} - -/* @end */ - -/* @end */ - -.amp { - font-family: "Bell MT", "Adobe Caslon Pro", "Goudy Old Style"; - font-style: italic; - font-size: 1.3em; - line-height: 0.7; - margin: 0 0.2em 0 0.1em; -} - -/* @end */ - -/* @group Page structure */ - -#book { - margin: 10px; - overflow: hidden; -} -.page { - width: 241px; - height: 370px; - overflow: hidden; - outline: 1px solid #C7C7C7; - float: left; - margin: 10px; - position: relative; -} -.inner { - margin: 15px; -} -.footer { - position: absolute; - bottom: 15px; - left: 15px; - width: 211px; -} - -/* @end */ - -/* @group Page Components */ - -/* @group Page Types */ -/* class on page */ - -.lines { - background-image: url(../img/lines.gif); - background-repeat: repeat-y; - background-position: 15px 1em; -} - -.squares { - -} - -.isometric { - -} - -/* @end */ - -/* @group Page Elements */ - -/* @group Todo list */ - -.todo { - padding-left: 0; - margin-left: 0; -} -.todo li { - border-bottom: 1px solid #C7C7C7; - background-image: url(../img/check.gif); - background-repeat: no-repeat; - background-position: 0 0.3em; - list-style-type: none; - margin: 0.35em 0 0 0; - padding: 0 0 0.35em 15px; -} - -/* @end */ - -.micro p, -.micro h3, -.micro h4, -.micro h5, -.micro h6, -h3.micro, -h4.micro, -h5.micro, -h6.micro, -p.micro, -span.micro { - font-size: 0.7em; - line-height: 1.5em; - display: block; -} - -/* @end */ - -/* @end */ - -/* @group Overrides */ - -/* @end */ - diff --git a/css/main.scss b/css/main.scss new file mode 100644 index 0000000..b0ed6a1 --- /dev/null +++ b/css/main.scss @@ -0,0 +1,509 @@ +/* @group General styles */ + +/* +Harmonise v1.3 +Resets styles then adds basic typographical styling. +Use as a starting point upon which to build more CSS. +By Clearleft.com +*/ + +/* @group Reset */ + +/* Based on http://meyerweb.com/eric/tools/css/reset/ */ +/* v1.0 | 20080212 */ + +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, font, 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 { + margin: 0; + padding: 0; + border: 0; + outline: 0; + font-size: 100%; + vertical-align: baseline; + background: transparent; +} + +ul { + list-style: none; +} +blockquote, q { + quotes: none; +} +blockquote:before, blockquote:after, +q:before, q:after { + content: ''; + content: none; +} + +:focus { + outline: 0; +} + +/* tables may still need 'cellspacing="0"' in the markup */ +table { + border-collapse: collapse; + border-spacing: 0; +} + +/* @end */ + + +body { + background: #fff; + color:#000; font-size:14px; line-height:1.2em; } + +a:link, +button.link span { + color: #0063DC; + text-decoration: underline; +} a:visited { + color: #1057ae; + text-decoration: underline; +} a:hover, +a:focus, +button.link:hover, +button.link:focus span { + color: #FFFFFF; + text-decoration: none; + background-color: #0063DC; +} a:active, +button.link:active span { + color: #FFFFFF; + text-decoration: none; + background-color: #0259C4; +} + +/* @group Font families */ + +body { + font-family: "helvetica neue", arial, helvetica, sans-serif; +} + +pre, code, kbd, tt, samp, tt { + font-family: "andale mono", monospace; +} + +/* @end */ + +/* @group Font sizes & margins */ + +p, ul, ol, dl, address, table, pre, form, fieldset { + font-size: 1em /* 14px */; + margin-bottom: 0.5em; +} + +/* size headings using classic scale of 16, 18, 24, 36 */ + +/* @end */ + +/* @group Headings */ + +h1 { + font-size: 2.571em /* 36px */; + line-height:1em /* 36px */; + margin-top:0.1667em /* 6px */; + margin-bottom:0.5833em /* 21px */; +} +h1 span { + font-size: 0.5em; + line-height: 1; + color: #999; + display: block; + margin-bottom: 0.3em; +} +h2, h3 { + font-size:1.143em /* 16px */; + margin-top:0; + padding-bottom: 0.5em; + margin-bottom:0.5em /* 8px */; + text-align: center; + border-bottom: 1px solid #999; +} +h4 { + margin-top:1em /* 21px */; + font-size:1em /* 14px */; + margin-bottom: 0.5em; +} +h5, h6 { + font-size:1em /* 14px */; + margin-bottom: 0.5em; +} + + +/* @end */ + +/* @group Lists */ + +ul { + list-style-type: disc; + margin-left: 1.5em; /* 21px */ +} + +ol { + list-style-type: decimal; + margin-left: 1.5em; /* 21px */ +} + +dt { + font-weight: bold; + margin-top: 1.5em; /* 21px */ +} + +ul ul, ol ol, ol ul, ul ol { + margin-bottom: 0; +} + +/* @end */ + +/* @group Tables */ + +table { + border-bottom: 1px solid #C7C7C7; +} + +caption { + font-weight: bold; + padding-bottom: 0.4375em; /* 7px */ + font-size:1.144em; /* 16px */ +} + +thead th { + border-bottom: 3px solid #C7C7C7; + padding-top: 0; + padding-bottom: 0.5em; /* 7px */ +} + +tbody { + border-top: 3px solid #C7C7C7; /* not rendered in IE6/7 */ +} + +tbody tr th, tbody tr td { + border-top: 1px solid #C7C7C7; +} + +th, td { + text-align: left; + padding: 0.286em 0.5em 0.214em 0.5em; /* 4px 7px 3px 7px */ +} + +/* @end */ + +/* @group Blockquotes */ + +blockquote { + font-style: italic; + margin:0 0 0 0; /* 21px */ + color: #999; +} + +p+p+blockquote { + margin-top: 1.5em /* 21px */; +} + +blockquote cite, +blockquote em { + font-style: normal; +} + +/* @end */ + +/* @group Other styling */ + +address { + font-style: normal; +} + +ins { + text-decoration: underline; + color: #27AD16; +} + +del { + text-decoration: line-through; + color: #B60D10; +} + +pre { + white-space: pre; + width: 100%; + font-size: 0.7em; + overflow: hidden; + border-top: 3px double #C7C7C7; + border-bottom: 3px double #C7C7C7; + padding: 0.5em 0; +} + +hr { + border: none; + background-color: black; + height: 1px; +} +/* @end */ + +/* @end */ + +/* @group Helper styles */ + +/* @group Forms */ + +/* @group Containers */ + +form .container { + margin-bottom: 1.5em; /* 21px */ +} + + +/* @group Fieldsets */ + +fieldset { + border: 1px solid #ccc; + padding: 0 1.5em 1em 1.5em; /* 0 21px 14px 21px */ +} + +legend { + font-weight: bold; +} + +form fieldset .container { + margin-top: 1em; /* 14px */ + margin-bottom:0; + position: relative; +} + +/* @end */ + +/* @end */ + +/* @group Labels */ + +label { + font-weight: bold; + cursor: pointer; +} + +.meta-label { + font-weight: bold; + margin-bottom: 0; +} + +.multi-container label, +.radio-container label, +.checkbox-container label { + font-weight: normal; +} + +.radio-container label, +.checkbox-container label { + display: block; +} + +.compact label { + display: inline; +} + +/* @end */ + +/* @group Meta */ + +form .help { + display: block; + color: #777; + font-style: normal; + font-size: 0.857em; /* 12px */ +} + +/* @end */ + +/* @group Form controls */ + +input, textarea, select, button { + font-family: inherit; + font-size: 1em; + line-height: inherit; +} + +select { + background-color: #fff; /* fixes bug in Opera which inherits bgcolor from container */ +} + +textarea, +input[type='text'], +input[type='password'], +select { + border-width: 1px; + border-style: solid; + border-top-color: #999; + border-left-color: #999; + border-bottom-color: #ccc; + border-right-color: #ccc; + padding: 0 1px 1px 1px; +} + +textarea:focus, +input[type='text']:focus, +input[type='password']:focus, +select:focus { + border-color: #888; + outline: 2px solid #ffffaa; +} + +input.short { + width: 4em; +} + +input.medium, textarea.medium { + width: 12em; +} + +input.long, textarea.long { + width: 30em; +} + +textarea { + width: 99%; + display: block; +} + +button { + overflow: visible; + cursor: pointer; +} + +.button-container input { + font-weight: bold; +} + +.button-container input.cancel { + font-weight: normal; +} + +button.link { + border: 0; + padding: 0; + background-color: #fff; + font-weight: normal; + cursor: pointer; + width: auto; + overflow: visible; +} + +/* accessibility feature, resize check and radio inputs */ +.radio-container input, +.checkbox-container input { + width: 1em; + height: 1em; +} + +/* @end */ + +/* @end */ + +.amp { + font-family: "Bell MT", "Adobe Caslon Pro", "Goudy Old Style"; + font-style: italic; + font-size: 1.3em; + line-height: 0.7; + margin: 0 0.2em 0 0.1em; +} + +/* @end */ + +/* @group Page structure */ + +#book { + margin: 10px; + overflow: hidden; +} +.page { + width: 241px; + height: 370px; + overflow: hidden; + outline: 1px solid #C7C7C7; + float: left; + margin: 10px; + position: relative; +} +.inner { + margin: 15px; +} +.footer { + position: absolute; + bottom: 15px; + left: 15px; + width: 211px; +} + +/* @end */ + +/* @group Page Components */ + +/* @group Page Types */ +/* class on page */ + +.lines { + background-image: url(../img/lines.gif); + background-repeat: repeat-y; + background-position: 15px 1em; +} + +.squares { + +} + +.isometric { + +} + +/* @end */ + +/* @group Page Elements */ + +/* @group Todo list */ + +.todo { + padding-left: 0; + margin-left: 0; +} +.todo li { + border-bottom: 1px solid #C7C7C7; + background-image: url(../img/check.gif); + background-repeat: no-repeat; + background-position: 0 0.3em; + list-style-type: none; + margin: 0.35em 0 0 0; + padding: 0 0 0.35em 15px; +} + +/* @end */ + +.micro p, +.micro h3, +.micro h4, +.micro h5, +.micro h6, +h3.micro, +h4.micro, +h5.micro, +h6.micro, +p.micro, +span.micro { + font-size: 0.7em; + line-height: 1.5em; + display: block; +} + +/* @end */ + +/* @end */ + +/* @group Overrides */ + +/* @end */ + diff --git a/css/print.css b/css/print.css deleted file mode 100644 index c63e4c2..0000000 --- a/css/print.css +++ /dev/null @@ -1,65 +0,0 @@ -#book { - position: relative; - overflow: visible; - height: 969px; - width: 743px; - margin: 0; - border: 1px solid #C7C7C7; -} -.page { - position: absolute; - float: none; - margin: 0; -} - -/* rotated left */ -#page1, -#page8, -#page7, -#page6 { - transform: rotate(-90deg); - transform-origin: 50% 120.5px; -} - -/* rotated right */ -#page2, -#page3, -#page4, -#page5 { - transform: rotate(90deg); - transform-origin: 50% 120.5px; -} -/* cover */ -#page1 { - top: 1px; - left: 2px; -} -#page2 { - top: 0; - right: 1px; -} -#page3 { - top: 242px; - right: 1px; -} -#page4 { - top: 484px; - right: 1px; -} -#page5 { - top: 726px; - right: 1px; -} -#page6 { - top: 727px; - left: 2px; -} -#page7 { - top: 485px; - left: 2px; -} -/* back page */ -#page8 { - top: 243px; - left: 2px; -} \ No newline at end of file diff --git a/css/print.scss b/css/print.scss new file mode 100644 index 0000000..c63e4c2 --- /dev/null +++ b/css/print.scss @@ -0,0 +1,65 @@ +#book { + position: relative; + overflow: visible; + height: 969px; + width: 743px; + margin: 0; + border: 1px solid #C7C7C7; +} +.page { + position: absolute; + float: none; + margin: 0; +} + +/* rotated left */ +#page1, +#page8, +#page7, +#page6 { + transform: rotate(-90deg); + transform-origin: 50% 120.5px; +} + +/* rotated right */ +#page2, +#page3, +#page4, +#page5 { + transform: rotate(90deg); + transform-origin: 50% 120.5px; +} +/* cover */ +#page1 { + top: 1px; + left: 2px; +} +#page2 { + top: 0; + right: 1px; +} +#page3 { + top: 242px; + right: 1px; +} +#page4 { + top: 484px; + right: 1px; +} +#page5 { + top: 726px; + right: 1px; +} +#page6 { + top: 727px; + left: 2px; +} +#page7 { + top: 485px; + left: 2px; +} +/* back page */ +#page8 { + top: 243px; + left: 2px; +} \ No newline at end of file -- cgit v1.2.3