assets/css/lesson.scss

   1 ---
   2 ---
   3
   4 //----------------------------------------
   5 // Colors.
   6 //----------------------------------------
   7
   8 // branding
   9 $color-brand:       #2b3990 !default;
  10
  11 // code boxes
  12 $color-error:       #bd2c00 !default;
  13 $color-output:      #303030 !default;
  14 $color-source:      #6e5494 !default;
  15
  16 // blockquotes
  17 $color-callout:     #f4fd9c !default;
  18 $color-challenge:   #eec275 !default;
  19 $color-checklist:   #dfd2a0 !default;
  20 $color-discussion:  #eec275 !default;
  21 $color-keypoints:   #7ae78e !default;
  22 $color-objectives:  #daee84 !default;
  23 $color-prereq:      #9cd6dc !default;
  24 $color-solution:    #ded4b9 !default;
  25 $color-testimonial: #fc8dc1 !default;
  26
  27 //----------------------------------------
  28 // Specialized code blocks.
  29 //----------------------------------------
  30
  31 @mixin cdSetup($color) {
  32   color: $color;
  33   border-left: solid 5px $color;
  34   margin-bottom: 0px;
  35   border-radius: 4px 0 0 4px;
  36 }
  37
  38 .error  { @include cdSetup($color-error); }
  39 .output { @include cdSetup($color-output); }
  40 .source { @include cdSetup($color-source); }
  41
  42 .bash   { @include cdSetup($color-source); }
  43 .make   { @include cdSetup($color-source); }
  44 .matlab { @include cdSetup($color-source); }
  45 .python { @include cdSetup($color-source); }
  46 .r      { @include cdSetup($color-source); }
  47 .sql    { @include cdSetup($color-source); }
  48
  49 .error pre,
  50 .output pre,
  51 .source pre,
  52 .bash pre,
  53 .make pre,
  54 .matlab pre,
  55 .python pre,
  56 .r pre,
  57 .sql pre {
  58   border-radius: 0 4px 4px 0;
  59 }
  60
  61 //----------------------------------------
  62 // Specialized blockquote environments for learning objectives, callouts, etc.
  63 //----------------------------------------
  64
  65 $codeblock-padding: 5px !default;
  66
  67 @mixin bkSetup($color, $glyph) {
  68
  69   $gradientcolor1: $color;
  70   $gradientcolor2: scale-color($color, $lightness: 10%);
  71
  72   padding-left: $codeblock-padding;
  73   padding-top: 0;
  74   padding-bottom: 0;
  75   padding-right: 0;
  76   border: 1px solid;
  77   border-color: $color;
  78   padding-bottom: $codeblock-padding;
  79
  80   h2 {
  81     padding-top: $codeblock-padding;
  82     padding-bottom: $codeblock-padding;
  83     font-size: 20px;
  84     background: linear-gradient(to bottom, $gradientcolor1, $gradientcolor2);
  85     border-color: $color;
  86     margin-top: 0px;
  87     margin-left: -$codeblock-padding; // to move back to the left margin of the enclosing blockquote
  88   }
  89   h2:before {
  90     font-family: 'Glyphicons Halflings';
  91     content: $glyph;
  92     float: left;
  93     padding-left: $codeblock-padding;
  94     padding-right: $codeblock-padding;
  95     display: inline-block;
  96     -webkit-font-smoothing: antialiased;
  97   }
  98
  99 }
 100
 101 .callout{ @include bkSetup($color-callout, "\e146"); }
 102 .challenge{ @include bkSetup($color-challenge, "\270f"); }
 103 .checklist{ @include bkSetup($color-checklist, "\e067"); }
 104 .discussion{ @include bkSetup($color-discussion, "\e123"); }
 105 .keypoints{ @include bkSetup($color-keypoints, "\e101"); }
 106 .objectives{ @include bkSetup($color-objectives, "\e085"); }
 107 .prereq{ @include bkSetup($color-prereq, "\e124"); }
 108 .solution{ @include bkSetup($color-solution, "\e105"); }
 109 .testimonial{ @include bkSetup($color-testimonial, "\e143"); }
 110
 111 //----------------------------------------
 112 // Override Bootstrap settings.
 113 //----------------------------------------
 114
 115 code {
 116   padding: 2px 5px;
 117   color: #3d90d9;
 118   background-color: #e7e7e7;
 119 }
 120
 121 img {
 122   max-width: 100%;
 123 }
 124
 125 //----------------------------------------
 126 // Miscellaneous.
 127 //----------------------------------------
 128
 129 .maintitle {
 130   text-align: center;
 131 }
 132
 133 .footertext {
 134   text-align: center;
 135 }
 136
 137 img.navbar-logo {
 138   height: 40px; // synchronize with height of navbar
 139   padding-top: 5px;
 140   padding-right: 10px;
 141 }
 142
 143 div.branding {
 144   color: $color-brand;
 145 }
 146
 147 ul,
 148 ol {
 149   padding-left: 2em;
 150 }
 151
 152 span.fold-unfold {
 153   margin-left: 1em;
 154   opacity: 0.5;
 155 }
 156
 157
 158 //----------------------------------------
 159 // keyboard key style, from StackExchange.
 160 //----------------------------------------
 161
 162 kbd {
 163     display: inline-block;
 164     margin: 0 .1em;
 165     padding: .1em .6em;
 166     font-family: Arial,"Helvetica Neue",Helvetica,sans-serif;
 167     font-size: 11px;
 168     line-height: 1.4;
 169     color: #242729;
 170     text-shadow: 0 1px 0 #FFF;
 171     background-color: #e1e3e5;
 172     border: 1px solid #adb3b9;
 173     border-radius: 3px;
 174     box-shadow: 0 1px 0 rgba(12,13,14,0.2), 0 0 0 2px #FFF inset;
 175     white-space: nowrap;
 176     font-style: normal;
 177 }