diff --git a/css/lesson.css b/css/lesson.css index 9aad2f8..12ba83a 100644 --- a/css/lesson.css +++ b/css/lesson.css @@ -1,126 +1,47 @@ -code { - color: #333333; +/* Comments in code. */ +.comment { + color: purple; } -/* Code sample */ -pre.sourceCode, -pre.input { - color: ForestGreen; -} -pre.output { - color: MediumBlue; -} -pre.error { - color: Red; +/* Highlighted changes in code. */ +.highlight { + background-color: mistyrose; } -.objectives, .keypoints, .callout, .challenge { - margin: 1em 0; - padding: 0em 1em; +/* Manual input. */ +.in { + color: darkgreen; } -.objectives h2:first-child, -.keypoints h2:first-child, -.callout h2:first-child, -.challenge h2:first-child { - margin-top: 10px; +/* Program output. */ +.out { + color: darkblue; + font-style: italic; } -.objectives, .keypoints { - background-color: azure; - border: 5px solid azure; +/* Error output. */ +.err { + color: darkred; + font-style: italic; + font-weight: bold; } -.callout { - background-color: #EEE; - border: 5px solid #EEE; +/* Explanatory call-out boxes. */ +div.box { + background-color: lightgray; } -.challenge { - background-color: #CCFFCC; - border: 5px solid #CCFFCC; -} +/* Challenge questions. */ +div.challenges {} -/* Tables used for displaying choices in challenges. */ -table.choices tr td { - vertical-align : top; -} +/* Key points in summary. */ +div.keypoints {} -/* Database tables do _not_ have double borders */ -table.outlined { - border-collapse: collapse; -} - -/* 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; - } -} +/* Main lesson. */ +div.lesson {} + +/* Learning objectives. */ +div.objectives {} + +/* Continuation paragraph. */ +p.continue {} diff --git a/css/swc-bootstrap.css b/css/swc-bootstrap.css index b7886e2..0457ec9 100644 --- a/css/swc-bootstrap.css +++ b/css/swc-bootstrap.css @@ -1,3 +1,5 @@ +/* Customizations to Bootstrap's default styles */ + /* readability: darken the alert colour for contrast with background */ .alert { color: rgb(0,0,0); diff --git a/css/swc-workshop-and-lesson.css b/css/swc-workshop-and-lesson.css index df1b81d..fb94401 100644 --- a/css/swc-workshop-and-lesson.css +++ b/css/swc-workshop-and-lesson.css @@ -33,4 +33,4 @@ div.footer { padding: 4px 10px 7px 10px; border-top: 1px solid #A6A6A6; text-align: right; -} \ No newline at end of file +} diff --git a/css/swc.css b/css/swc.css index 2492a91..3f7ab4c 100644 --- a/css/swc.css +++ b/css/swc.css @@ -1,3 +1,76 @@ +/* Headings */ +h1, h2, h3, h4, h5, h6 { + color: rgb(03,03,03); + font-family: "Montserrat", "Helvetica", "Arial"; +} + +h1, h2 { + margin-top: 40px; + margin-bottom: 10px; +} + +h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { + color: inherit; +} + +/* Comments in code. */ +.comment { + color: purple; +} + +/* Error messages. */ +.err { + color: darkred; + font-style: italic; +} + +/* Things to fix. */ +.fixme { + text-decoration: underline; + color: darkred; + background-color: lightgray; +} + +/* Highlighted changes in code. */ +.highlight { + background-color: mistyrose; +} + +/* Manual input. */ +.in { + color: darkgreen; +} + +/* Program output. */ +.out { + color: darkblue; + font-style: italic; +} + +/* Putting shadows around things. */ +.shadow { + -moz-box-shadow: 0 0 30px 5px #999; + -webkit-box-shadow: 0 0 30px 5px #999; + box-shadow: 0 0 30px 5px #999; +} + +/* Things to understand (lead-in to sections in book). */ +.understand { + background-color: lightyellow; +} + +/* Block quotations. */ +blockquote { + margin: 1em; + padding: 1em 1em .5em 1em; + width: 90%; +} + +/* Citation for testimonial quote. */ +blockquote.testimonial cite { + font-style: italic; +} + /* Main body of pages. */ body { font-family: "Open Sans", Helvetica, Arial, sans-serif; @@ -86,60 +159,13 @@ div.toc { border: 1px solid grey; } -h1, h2 { - margin-top: 40px; - margin-bottom: 10px; -} - -h1:first-child, h2:first-child { - margin-top: 10px; -} - -h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { - color: inherit; -} - -/* Chapter titles. */ -div.chapter h2 { - text-align: center; - font-style: italic; -} - -/* Objectives, Callout Box and Challenges */ -.objectives, .keypoints, .callout, .challenge { - margin: 1em 0; - padding: 0em 1em; - -/* Things to fix. */ -.fixme { - text-decoration: underline; - color: darkred; - background-color: lightgray; -} - -/* Putting shadows around things. */ -.shadow { - -moz-box-shadow: 0 0 30px 5px #999; - -webkit-box-shadow: 0 0 30px 5px #999; - box-shadow: 0 0 30px 5px #999; -} -/* Things to understand (lead-in to sections in book). */ -.understand { - background-color: lightyellow; -} - -/* Block quotations. */ -blockquote { - margin: 1em; - padding: 1em 1em .5em 1em; - width: 90%; +/* Title styling */ +h1.title { + margin: 40px 0px; + border-bottom: 1px solid #515151; } -/* Citation for testimonial quote. */ -blockquote.testimonial cite { - font-style: italic; -} /* YouTube video embed. */ div.youtube { text-align: center; @@ -202,11 +228,6 @@ table.blogindex td.date { width:10em; } -/* Citation for testimonial quote. */ -blockquote.testimonial cite { - font-style: italic; -} - /* Tables used for displaying choices in challenges. */ table.choices tr td { vertical-align : top;