From ddd2d95a94d08ef8ab525ace9b8697cbb5c36840 Mon Sep 17 00:00:00 2001 From: Francois Michonneau Date: Tue, 27 Jan 2015 11:21:31 -0500 Subject: [PATCH] consolidate CSS files --- css/badge.css | 18 ++ css/slideshow.css | 727 ++++++++++++++++++++++++++++++++++++++++++++++ css/swc-print.css | 74 +++++ 3 files changed, 819 insertions(+) create mode 100644 css/badge.css create mode 100644 css/slideshow.css create mode 100644 css/swc-print.css diff --git a/css/badge.css b/css/badge.css new file mode 100644 index 0000000..3e1a762 --- /dev/null +++ b/css/badge.css @@ -0,0 +1,18 @@ +.badges-section { + margin-bottom:30px; +} +.badges-section .media { + margin-top: 30px; +} +h1.badge-title{ + margin-top: 10px; +} +#modal-badge-img { + position:absolute; + right: 25px; + bottom: 25px; + opacity: 0.5; +} +#assertion-modal.in { + color: black; +} diff --git a/css/slideshow.css b/css/slideshow.css new file mode 100644 index 0000000..e7e5e83 --- /dev/null +++ b/css/slideshow.css @@ -0,0 +1,727 @@ +/* This theme is generated by deck.js-theme-builder. */ +/* https://github.com/twitwi/deck.js-theme-builder */ +/* Resets and base styles from HTML5 Boilerplate */ +div, span, object, iframe, +h1, h2, h3, h4, h5, h6, p, blockquote, pre, +abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, +small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, +table, caption, tbody, tfoot, thead, tr, th, td, +article, aside, canvas, details, figcaption, figure, +footer, header, hgroup, menu, nav, section, summary, +time, mark, audio, video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; +} + +article, aside, details, figcaption, figure, +footer, header, hgroup, menu, nav, section { + display: block; +} + +blockquote, q { + quotes: none; +} +blockquote:before, blockquote:after, q:before, q:after { + content: ""; + content: none; +} + +ins { + background-color: #ff9; + color: #000; + text-decoration: none; +} + +mark { + background-color: #ff9; + color: #000; + font-style: italic; + font-weight: bold; +} + +del { + text-decoration: line-through; +} + +abbr[title], dfn[title] { + border-bottom: 1px dotted; + cursor: help; +} + +table { + border-collapse: collapse; + border-spacing: 0; +} + +hr { + display: block; + height: 1px; + border: 0; + border-top: 1px solid #ccc; + margin: 1em 0; + padding: 0; +} + +input, select { + vertical-align: middle; +} + +select, input, textarea, button { + font: 99% sans-serif; +} + +pre, code, kbd, samp { + font-family: monospace, sans-serif; +} + +a { + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); +} +a:hover, a:active { + outline: none; +} + +ul, ol { + margin-left: 2em; + vertical-align: top; +} + +ol { + list-style-type: decimal; +} + +nav ul, nav li { + margin: 0; + list-style: none; + list-style-image: none; +} + +small { + font-size: 85%; +} + +strong, th { + font-weight: bold; +} + +td { + vertical-align: top; +} + +sub, sup { + font-size: 75%; + line-height: 0; + position: relative; +} + +sup { + top: -0.5em; +} + +sub { + bottom: -0.25em; +} + +textarea { + overflow: auto; +} + +input[type="radio"] { + vertical-align: text-bottom; +} + +input[type="checkbox"] { + vertical-align: bottom; +} + +label, +input[type="button"], +input[type="submit"], +input[type="image"], +button { + cursor: pointer; +} + +button, input, select, textarea { + margin: 0; +} + +input:invalid, textarea:invalid { + border-radius: 1px; + -moz-box-shadow: 0px 0px 5px red; + -webkit-box-shadow: 0px 0px 5px red; + box-shadow: 0px 0px 5px red; +} +input:invalid .no-boxshadow, textarea:invalid .no-boxshadow { + background-color: #f0dddd; +} + +button { + width: auto; + overflow: visible; +} + +select, input, textarea { + color: #444444; +} + +a { + color: #607890; +} +a:hover, a:focus { + color: #036; +} +a:link { + -webkit-tap-highlight-color: #fff; +} + +/* End HTML5 Boilerplate adaptations */ +h1 { + font-size: 4.5em; +} + +h1, .vcenter { + font-weight: bold; + text-align: center; + padding-top: 1em; + max-height: 100%; +} +.csstransforms h1, .csstransforms .vcenter { + padding: 0 48px; + position: absolute; + left: 0; + right: 0; + top: 50%; + -webkit-transform: translate(0, -50%); + -moz-transform: translate(0, -50%); + -ms-transform: translate(0, -50%); + -o-transform: translate(0, -50%); + transform: translate(0, -50%); +} + +.vcenter h1 { + position: relative; + top: auto; + padding: 0; + -webkit-transform: none; + -moz-transform: none; + -ms-transform: none; + -o-transform: none; + transform: none; +} + +h2 { + font-size: 2.25em; + font-weight: bold; + padding-top: .5em; + margin: 0 0 .66666em 0; + border-bottom: 3px solid #888; +} + +h3 { + font-size: 1.4375em; + font-weight: bold; + margin-bottom: .30435em; +} + +h4 { + font-size: 1.25em; + font-weight: bold; + margin-bottom: .25em; +} + +h5 { + font-size: 1.125em; + font-weight: bold; + margin-bottom: .2222em; +} + +h6 { + font-size: 1em; + font-weight: bold; +} + +img, iframe, video { + display: block; + max-width: 100%; +} + +video, iframe, img { + display: block; + margin: 0 auto; +} + +p, blockquote, iframe, img, ul, ol, pre, video { + margin-bottom: 1em; +} + +pre { + white-space: pre; + white-space: pre-wrap; + word-wrap: break-word; + padding: 1em; + border: 1px solid #888; +} + +em { + font-style: italic; +} + +li { + padding: .25em 0; + vertical-align: middle; +} +li > ol, li > ul { + margin-bottom: inherit; +} + +.deck-container { + font-size: 16px; + line-height: 1.25; + color: #444; +} + +.slide { + -moz-box-sizing: border-box; + box-sizing: border-box; + width: 100%; +} + +/* colors */ +/* extras, all together for now */ +@font-face { + font-family: 'Montserrat'; + font-style: normal; + font-weight: 400; + src: local("Montserrat-Regular"), url(local-fonts/zhcz-_WihjSQC0oHJ9TCYBsxEYwM7FgeyaSgU71cLG0.woff) format("woff"), url(http://fonts.gstatic.com/s/montserrat/v6/zhcz-_WihjSQC0oHJ9TCYBsxEYwM7FgeyaSgU71cLG0.woff) format("woff"); +} + +.timekeeper { + font-family: monospace; +} + +.deck-container { + font-family: 'Montserrat', 'Arial', 'Sans'; +} + +/* sizes */ +.deck-container { + font-size: 30px; +} + +h1 { + font-size: 1.75em; +} + +h2 { + margin: 0; + padding: 0 10px; + font-size: 1.5em; +} + +.deck-container > .slide { + padding-top: 3em; +} + +h2 { + position: absolute; + top: 0; + left: 0; + width: 100%; +} + +.deck-container > .slide.noh2, .deck-container > .slide.noH2 { + padding-top: 0; +} + +h2 { + text-align: center; +} + +.deck-container > .slide > ul > li ul, .deck-container > .slide > ul > li ol, .deck-container > .slide > ol > li ul, .deck-container > .slide > ol > li ol { + line-height: 0.85em; + margin-bottom: 0px; +} +.deck-container > .slide > ul > li ul > li ul, .deck-container > .slide > ul > li ul > li ol, .deck-container > .slide > ul > li ol > li ul, .deck-container > .slide > ul > li ol > li ol, .deck-container > .slide > ol > li ul > li ul, .deck-container > .slide > ol > li ul > li ol, .deck-container > .slide > ol > li ol > li ul, .deck-container > .slide > ol > li ol > li ol { + margin-bottom: 0px; +} +.deck-container > .slide > ul > li ul > li ul > li, .deck-container > .slide > ul > li ul > li ol > li, .deck-container > .slide > ul > li ol > li ul > li, .deck-container > .slide > ul > li ol > li ol > li, .deck-container > .slide > ol > li ul > li ul > li, .deck-container > .slide > ol > li ul > li ol > li, .deck-container > .slide > ol > li ol > li ul > li, .deck-container > .slide > ol > li ol > li ol > li { + margin: 0.2em; + font-size: 0.8em; + margin-bottom: 0px; +} +.deck-container > .slide > ul > li ul > li, .deck-container > .slide > ul > li ol > li, .deck-container > .slide > ol > li ul > li, .deck-container > .slide > ol > li ol > li { + margin: 0.2em; + font-size: 0.85em; + margin-bottom: 0px; +} +.deck-container > .slide > ul li, .deck-container > .slide > ol li { + margin: 0; + padding: 0; + margin-top: 0.5em; + padding-left: 0em; +} +.deck-container > .slide > ul { + list-style: disc outside none; +} +.deck-container > .slide > ul > li ul { + list-style: square outside none; +} + +blockquote { + font-size: 2em; + font-style: italic; + padding: 1em 2em; + color: #000; + border-left: 5px solid #ccc; +} +blockquote p { + margin: 0; +} +blockquote cite { + font-size: .5em; + font-style: normal; + font-weight: bold; + color: #888; +} + +a, a:hover, a:focus, a:active, a:visited { + text-decoration: none; +} +a:hover, a:focus { + text-decoration: underline; +} + +.deck-prev-link, .deck-next-link { + background: #ccc; + font-family: serif; +} +.deck-prev-link, .deck-prev-link:hover, .deck-prev-link:focus, .deck-prev-link:active, .deck-prev-link:visited, .deck-next-link, .deck-next-link:hover, .deck-next-link:focus, .deck-next-link:active, .deck-next-link:visited { + color: #fff; +} +.deck-prev-link:hover, .deck-prev-link:focus, .deck-next-link:hover, .deck-next-link:focus { + background: #c00; + text-decoration: none; +} + +.deck-menu > .slide { + /* matching toplevel slides... ideally, we would expect them to have an additional class */ + background: #eee; +} +.deck-menu > .deck-current, .deck-menu > .deck-child-current { + outline-offset: 20px; + outline: 10px solid #f88; +} +.no-touch .deck-menu .slide:hover { + outline-offset: 20px; + outline: 10px solid red; + background: #ddf; +} + +.deck-container { + background: white; + color: #1f2969; + font-weight: normal; +} +.deck-container:not(.no-status) > .slide { + background: url(../img/software-carpentry-banner.png) bottom 10px left 10px no-repeat; + background-size: 150px; +} +.deck-container .slide :not(h1):not(h2) { + /* TODO: the original style mispelled the font name, so it was using Helvetica for everything but the titles, this line does the same. */ + font-family: 'Helvetica', 'Arial', 'sans'; +} + +.deck-container .slide { + margin: 0; + padding: 160px 50px; + /* text-align: justify;*/ +} + +.slide.no-bullets ol, .slide.no-bullets ul { + list-style: none; +} + +.slide .center { + text-align: center; +} + +.slide .left { + float: left; + width: 50%; +} + +.slide .right { + float: left; + width: 50%; +} + +.slide .c1 { + width: 8.33333% !important; +} + +.slide .c2 { + width: 16.66667% !important; +} + +.slide .c3 { + width: 25% !important; +} + +.slide .c4 { + width: 33.33333% !important; +} + +.slide .c5 { + width: 41.66667% !important; +} + +.slide .c6 { + width: 50% !important; +} + +.slide .c7 { + width: 58.33333% !important; +} + +.slide .c8 { + width: 66.66667% !important; +} + +.slide .c9 { + width: 75% !important; +} + +.slide .c10 { + width: 83.33333% !important; +} + +.slide .c11 { + width: 91.66667% !important; +} + +.slide .c12 { + width: 100% !important; +} + +.slide .C1 { + width: 4.16667% !important; +} + +.slide .C2 { + width: 8.33333% !important; +} + +.slide .C3 { + width: 12.5% !important; +} + +.slide .C4 { + width: 16.66667% !important; +} + +.slide .C5 { + width: 20.83333% !important; +} + +.slide .C6 { + width: 25% !important; +} + +.slide .C7 { + width: 29.16667% !important; +} + +.slide .C8 { + width: 33.33333% !important; +} + +.slide .C9 { + width: 37.5% !important; +} + +.slide .C10 { + width: 41.66667% !important; +} + +.slide .C11 { + width: 45.83333% !important; +} + +.slide .C12 { + width: 50% !important; +} + +.slide .C13 { + width: 54.16667% !important; +} + +.slide .C14 { + width: 58.33333% !important; +} + +.slide .C15 { + width: 62.5% !important; +} + +.slide .C16 { + width: 66.66667% !important; +} + +.slide .C17 { + width: 70.83333% !important; +} + +.slide .C18 { + width: 75% !important; +} + +.slide .C19 { + width: 79.16667% !important; +} + +.slide .C20 { + width: 83.33333% !important; +} + +.slide .C21 { + width: 87.5% !important; +} + +.slide .C22 { + width: 91.66667% !important; +} + +.slide .C23 { + width: 95.83333% !important; +} + +.slide .C24 { + width: 100% !important; +} + +.slide .clearboth { + clear: both; +} + +.slide .right { + float: right; + width: 50%; +} + +div.figure p.caption { + color: #141a41; + text-align: center; + font-size: 80%; +} + +.slide .darker { + color: #141a41; +} + +.slide.media-left > *:not(h2):not(img):not(blockquote):not(pre):not(div), .slide.media-left > div:not(.figure) { + margin-left: 400px; +} +.slide.media-left > div.figure, .slide.media-left > img, .slide.media-left > blockquote, .slide.media-left > pre { + float: left; + width: 50%; + box-sizing: border-box; +} + +.slide.media-right > *:not(h2):not(img):not(blockquote):not(pre):not(div), .slide.media-right > div:not(.figure) { + margin-right: 400px; +} +.slide.media-right > div.figure, .slide.media-right > img, .slide.media-right > blockquote, .slide.media-right > pre { + float: right; + width: 50%; + box-sizing: border-box; +} + +.slide.image-stripes > div { + overflow: hidden; + align-content: center; +} +.slide.image-stripes img { + height: 400px; + max-width: none; + position: relative; + left: 50%; + transform: translate(-50%, 0); +} + +h1, h2 { + color: #2b3990; + font-size: 70px; + line-height: 1em; + font-weight: normal; +} + +h2 { + border-bottom: none; + font-size: 60px; + position: absolute; + left: 0; + right: 0; + bottom: 480px; + top: auto; +} + +h3 { + color: #888; +} + +pre { + border-color: #ccc; +} + +code { + color: #555; +} + +blockquote { + font-size: 20px; +} + +a { + transition: color 200ms; +} +a, a:focus, a:active, a:visited { + color: #1f2969; +} +a:hover { + color: #6877d2; + text-decoration: none; +} + +.slide.title-slide { + text-align: center; + padding-top: 325px; +} +.slide.title-slide h1 { + padding-bottom: 50px; + bottom: 50%; + top: auto; + height: auto; + transform: none; +} +.slide.title-slide img.logo { + position: absolute; + padding-top: 100px; + left: 0; + right: 0; + top: 50%; + align: center; +} + +.progress-bar { + background: #2b3990; + opacity: 0.5; + transition: width 500ms; +} + +/* #20267b? */ diff --git a/css/swc-print.css b/css/swc-print.css new file mode 100644 index 0000000..977b612 --- /dev/null +++ b/css/swc-print.css @@ -0,0 +1,74 @@ +/* Printing */ +@media print { + h1 { + font-size: 16pt; + line-height: 18pt; + } + + h2,h3,h4,h5,h6 { + font-size: 12pt; + line-height: 13pt; + } + + /* Objectives, Callout Box and Challenges */ + .objectives, .keypoints { + background-color: unset; + border: 5px solid; + } + + .callout { + background-color: unset; + border: 5px solid; + } + + .challenge { + background-color: unset; + border: 5px solid; + } + + p,ul,ol,li,pre,code { + font-size: 8pt; + line-height: 9pt; + } + + code { + padding: 0px; + border: 0px; + background: unset; + } + + pre.sourceCode::before, + pre.input::before. { + content: "Input:"; + } + + pre.output::before { + content: "Output:"; + } + + pre.error::before { + content: "Error:"; + } + + pre.sourceCode code, + pre.input code, + pre.output code, + pre.error code { + display: block; + margin-top: 1em; + margin-left: 2em; + } + + #github-ribbon { + display: none; + } + + .banner { + display: none; + } + + .footer { + display: none; + } +} + -- 2.30.2