diff options
Diffstat (limited to 'css_styles/evmik.scss')
| -rw-r--r-- | css_styles/evmik.scss | 361 |
1 files changed, 361 insertions, 0 deletions
diff --git a/css_styles/evmik.scss b/css_styles/evmik.scss new file mode 100644 index 0000000..e239920 --- /dev/null +++ b/css_styles/evmik.scss @@ -0,0 +1,361 @@ +// --------- Color definitions start ------------------- +$body_bg: #336699; +$body_padding: 0px; +$body_margin: 1%; +$body_font_family: Sans-Serif; + +$toc_width: 20%; + +$body_header_bg: $body_bg; +$body_header_fg: white; + +$link_color_cmd_normal: black; +$link_color_cmd_visited: $link_color_cmd_normal; +$link_color_cmd_hover: $link_color_cmd_normal; +$link_color_cmd_active: $link_color_cmd_normal; + +$normal_bg: #ffcc99; +$normal_fg: black; + +$sidebar_bg: lighten($body_bg,35%); +$sidebar_border_clr: $body_bg; + +$toc_bg: lighten($body_bg,35%); +$toc_border_clr: $body_bg; + + +$div_padding: 0.5%; +$div_margin_vert: 0.5%; +$div_margin_horiz: 0.5%; + +$small_screen: 480px; +$large_screen: 1200px; + +$errormsg_bg: #ff0000; +$infomsg_bg: #ffccff; + +$attention_bg: #8f0000; +$attention_fg: white; + + +$Quiz: #CFECEC; +$Homework: #C3FDB8; +$LabReport: #82CAFA; +$MidTerm: #f0b7f0; +$FinalExam: #f08ab6; +$Participation: #cccc99; +$Unset: #cccccc; + +$table_hover_bg: #ffeebb; + +$controls_bg: #dddddd; + +$col_controls_bg: #dddddd; +$col_controls_fg: black; +$col_errata_fg: white; +$col_errata_bg: $body_bg; +$col_announce_fg: $normal_fg; +$col_announce_bg: #24E0FB; +$col_controls_dangerous_bg: red; +$col_controls_dangerous_fg: black; +// --------- Color definitions end ------------------- + + +body { + padding: $body_padding; + margin: $body_margin; + background-color: $body_bg; + color: $normal_fg; + font-family: $body_font_family; + text-align: justify; + /* + a { + color: $link_color_cmd_normal; + text-decoration: none; + &:visited { color: $link_color_cmd_visited; } + &:hover { + color: $link_color_cmd_hover; + text-decoration:underline; + background-color: lighten($controls_bg,20%); + } + &:active { + color: $link_color_cmd_active; + text-decoration:underline; + background-color: lighten($controls_bg,20%); + } + } + */ + + div { + background-color: $normal_bg; + color: $normal_fg; + padding: { + top: $div_padding; + bottom: $div_padding; + left: $div_padding; + right: $div_padding; + } + margin: { + top: $div_margin_vert; + bottom: $div_margin_vert; + left: $div_margin_horiz; + right: $div_margin_horiz; + } + pre { + background-color: lighten($normal_bg,10%); + padding: 15px; + border: 1px dashed black; + } + ul { + padding-left: 1em; + } + } + div.toc { + margin: { + right: $body_margin; + left: $div_padding;; + top: $div_padding; + bottom: $div_padding; + } + float: right; + z-index: 1; + background-color: $toc_bg; + width : 15em; + border-style: solid; + border-width: 1px; + border-color: $toc_border_clr; + ul { + list-style-type : none; + padding: { + top: 0; + bottom: 0; + left: 1em; + right: 0; + } + margin: 0; + } + p { + margin: 0; + } + h3 { + padding: .1em; + margin: 0; + font-weight: bold; + } + // small screen/handheld + // @media (max-width: $small_screen) { + // above gives hick up to sass + // so I have to do hard coded values + @media (max-width: 4in) { + float: none; + width: auto; + margin: 0; + padding: 0; + h3 { + display: none; + } + ul { + padding: 0; + list-style-type : none; + text-align: center; + } + li { + display: inline-block; + padding: .4em; + } + } + } + // div.toc { + // float: left; + // width: $toc_width; + // font-weight: bold; + // a { + // color: black; + // text-decoration: none; + // } + // a:hover { + // text-decoration: underline; + // } + // } + div.body { + // float: right; + // width: 100% - $toc_width - 5%; + h1 { + padding: { + left: $div_padding; + right: $div_padding; + } + text-align: left; + font-size: 150%; + font-weight: bold; + color: $body_header_fg; + background-color: $body_header_bg; + } + h2 { + padding: { + left: $div_padding; + right: $div_padding; + } + text-align: left; + font-size: 130%; + font-weight: normal; + color: $body_header_fg; + background-color: $body_header_bg; + } + h3 { + padding: { + left: $div_padding; + right: $div_padding; + } + text-align: left; + font-size: 115%; + font-weight: normal; + color: $body_header_fg; + background-color: $body_header_bg; + } + img.myphoto { + float: right; + text-align: right; + width: 10em; + } + #sidebar { + margin: { + left: $div_padding; + right: 0; + top: 0; + bottom: 0; + } + float: right; + z-index: 1; + background-color: $sidebar_bg; + width : 10em; + border-style: solid; + border-width: 1px; + border-color: $sidebar_border_clr; + ul { + list-style-type : none; + padding: { + top: 0; + bottom: 0; + left: 1em; + right: 0; + } + margin: 0; + } + p { + margin: 0; + } + h3 { + padding: .1em; + margin: 0; + font-weight: bold; + } + } + } + div.header { + text-align: left; + font-family: Sans-Serif; + h1 { + margin: 2pt; + font-size: 200%; + font-weight: bold; + a { + color: $normal_fg; + } + } + h2 { + margin: 2pt; + font-size: 120%; + font-weight: normal; + } + h3 { + margin: 2pt; + font-size: 110%; + font-weight: normal; + } + } + div.errata { + background: $col_errata_bg; + color: $col_errata_fg; + h1 { + padding: { + left: $div_padding; + right: $div_padding; + } + text-align: left; + font-size: 150%; + font-weight: bold; + color: white; + background-color: red; + } + dt { + background-color: #FF0000; + color: white; + font-weight: bold; + } + dl { + background-color: #FF7a7a; + color: black; + } + } + + div.announce { + background-color: $col_announce_bg; + color: $col_announce_fg; + } +} + +body.home_page { + div.zero_p_space { + margin: 0; + padding: 0; + p { + margin: 0; + } + } + ul { + list-style-type : none; + padding: 0; + margin: 0; + } +} + + + +/* + * print styles + */ +@media print { + * { + background-color: white !important; + background-image: none !important; + } + div.controls { + display: none; + } + div.greetings { + display: none; + } + div.footer { + display: none; + } + div.gradestable { + table.gradestable { + th { + font-weight: bold; + valign: top; + } + } + a[href]:after { + content:none; + } + a img { + display: none; + } + } +} + + + + +// vim: ts=2:sw=2:tw=74:fdm=indent |