style.scss

/*

INTRODUCTORY PROGRAMMING COURSE

Software Engineering program at Chalmers University of Technology

Made by Johan Brook.

--------------------------------------------------------------- */

$dv-red:   #D00000;
$d-orange: #FF9900;
$it-cyan:  #90DEFF;

$accent:   #2F8EED;
$light:    #9C9975;
$gray:     #999;
$comp:     #7846AB;

$text-color: #444;

$font-size:   (15 / 16) * 1em;
$leading:     1.6em;

* {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

html {
  background: #fff url('images/ribbon.png') repeat-x -25% -4px;
  font: #{$font-size}/#{$leading} "Open Sans", sans-serif;
  color: $text-color;
}

body {
  margin: 0 5%;
  padding: 0;
}

::selection {
  background-color: rgba($light, .2);
}

h1, h2, h3, h4, h5, h6 {
  -webkit-font-smoothing: antialiased;
  margin: 0 0 $leading / 2;
}

h1 {
  font-size: 2.4em;
  letter-spacing: -1px;
  font-weight: 300;
  line-height: 0.9em;
}

h2 {
  font-weight: normal;
  font-style: italic;
  font-size: 1.5em;

  p ~ &,
  ol ~ &,
  ul ~ & {
    margin-top: $leading;
  }
}

h3 {
  font-weight: bold;
  text-transform: uppercase;
  font-size: 1em;

  h2 ~ & {
    margin-top: $leading;
  }
}

.subhead {
  font-size: 1.2em;
}

a {
  color: $accent;
  font-weight: 600;
  text-decoration: none;

  &:hover {
    outline: 0;
    text-decoration: none;
    border-bottom: 1px solid $accent;
  }

  &:focus {
    outline: 0;
    display: inline-block;
  }
}

#schedule-accordion {
  section {
    margin-top: $leading;
  }

  .schedule-link {
    display: block;
    padding: .5em;
    border: 0;
    border-radius: 3px;

    &:not(:last-of-type) {
      border-bottom: 1px solid #ddd;
    }

    &:hover,
    &:not(.collapsed) {
      color: #fff;
    }

    &.it:hover,
    &.it:not(.collapsed) {
      background-color: darken($it-cyan, 10%);
    }
    &.d:hover,
    &.d:not(.collapsed) {
      background-color: $d-orange;
    }
    &.gu:hover,
    &.gu:not(.collapsed) {
      background-color: $dv-red;
    }
  }
}

[role="banner"] {
  padding: $leading*2 0 $leading*2;
  margin-bottom: $leading;

  h1 {
    font-family: Pacifico, "Open Sans", sans-serif;
    font-weight: normal;
    line-height: 1.7;
    font-size: 4.6em;
    margin: 0;

    em {
      font-family: "Open Sans", sans-serif;
      font-style: normal;
      display: block;
      font-size: 15px;
      text-transform: uppercase;
      letter-spacing: .3em;
      color: $light;

      position: relative;
      margin-left: 4em;
      top: 1em;
    }
  }
}

p {
  margin: 0 0 $leading;
}

dt {
  @extend h3;
  margin-top: $leading;
}

blockquote {
  margin: 0 2em $leading*2;
  font-style: italic;

  a {
    color: $text-color;
    transition: color .15s ease-in-out;
  }

  &:hover a {
    color: $accent;
  }

  & > p {
    color: $comp;
    font-size: 1.2em;
    line-height: 1.7;
  }

  footer cite {

    &::before {
      content: "\2014";
      padding-right: 5px;
    }
  }
}

[role="contentinfo"] {
  margin: $leading*3 0;
  font-size: .8em;
  color: $gray;
  display: table;

  & > p {
    display: table-cell;
    vertical-align: middle;

    &:last-child {
      padding-left: 5em;
    }
  }

  .schools {

    img {
      max-width: 200px;
      display: block;
      vertical-align: middle;
    }

    .gu {
      max-width: 350px;
      position: relative;
      top: 4px;
    }

    a {
      float: left;
      margin-right: 2em;

      &:hover {
        border: 0;
        opacity: .8;
      }
    }
  }
}

nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

small {
  font-size: .7em;
  color: $gray;
}

%affix {
  right: 5%;
}

.affix {
  @extend %affix;
  position: fixed;
  top: 90px;
}

.affix-top {
  @extend %affix;
  position: absolute;
}

.scrollspy {
  float: right;
  width: 20%;

  nav {
    margin-left: -20px;
  }

  p {
    margin: 0 0 $leading / 3;
  }

  .btn-download {
    width: 100%;
  }

  .download {
    text-align: center;
    margin-bottom: $leading;

    small a {
      color: #aaa;
      transition: color .2s;
    }
  }

  &:hover .download small a {
    color: $accent;
  }
}

[role="main"] {
  width: 66%;
  max-width: 38em;

  & > section {
    margin-bottom: $leading*2;

    &:not(:last-child)::after {
      content: "";
      display: block;
      margin: $leading*2 0;
      width: 30%;
      height: 1px;
      background-color: #ddd;
    }
  }
}

[role="navigation"] {

  .active {
    a, a:hover {
      color: $comp;
      border-left: 2px solid $comp;
      padding-left: 19px;
      font-weight: 600;
    }
  }

  a {
    font-weight: normal;
    color: $gray;
    display: block;
    padding: .3em 20px;
    border-left: 1px solid transparent;

    &:hover {
      border: 0;
      border-left: 1px solid lighten($light, 30%);
      color: #333;
    }
  }
}

.exercises-list {
  list-style: none;
  margin: 0;
  padding: 0;

  $border: 2px solid lighten($light, 30%);

  .exercise-level {
    $dim: 8px;

    text-indent: -999em;
    border-radius: 100%;
    display: inline-block;
    background-color: #ddd;
    width: $dim;
    height: $dim;

    &.level-1 {
      background-color: #A0D945;
    }
    &.level-2 {
      background-color: #FAB02F;
    }
    &.level-3 {
      background-color: #FF4B14;
    }
  }

  [data-toggle='collapse'] {
    font-family: Monaco, Menlo, Courier, monospace;
    font-size: 13px;
    font-weight: normal;
    color: lighten($comp, 10%);
    border: 0;
    border-top: $border;
    display: block;
    padding: .6em 0;
    position: relative;
    transition: border-color .1s ease;

    .exercise-level {
      position: absolute;
      right: 50px;
      top: 1.2em;
    }

    &:hover,
    &:not(.collapsed) {
      color: saturate($comp, 20%);

      &::after {
        color: $comp;
      }
    }

    &::after {
      content: "+";
      display: inline-block;
      position: absolute;
      top: .5em;
      right: 10px;
      color: $gray;
    }
  }

  & > li:hover {
    & > [data-toggle="collapse"],
    & + li > [data-toggle="collapse"] {
      border-top-color: $comp;
    }
  }

  & > li:last-child > [data-toggle='collapse'] {
    border-bottom: $border;
  }

  .doc {
    padding: $leading 0;
  }
}

.collapse {
  display: none;

  &.in {
    display: block;
  }
}

.collapsing {
  height: 0;
  position: relative;
  overflow: hidden;
  transition: height .35s ease;
}

/* =BUTTONS
--------------------------------------------- */

.btn,
button {
  $color: saturate(lighten($comp, 20%), 20%);
  $color-hover: #B845FF;
  $color-active: $comp;

  display: inline-block;
  -webkit-appearance: none;
  position: relative;

  padding: .6em 1em;
  border-radius: 4px;
  text-align: center;

  background-color: #fff;
  color: $color;
  font-weight: bold;
  -webkit-font-smoothing: antialiased;
  transition: color, border-color .2s ease-out;
  border: 2px solid $color;

  &:hover {
    border-width: 2px;
    border-color: $color-hover;
    color: $color-hover;
  }

  &:active {
    -webkit-transform: scale(.95);
    transform: scale(.95);
    border-color: $color-active;
    border-width: 2px;
    color: $color-active;
    background-color: rgba($color-active, .05);
  }
}

.btn-download {
  @extend .btn;
}

/* Override Highlight.js styles
--------------------------------------------- */

pre, code {
  font-family: Inconsolata, Monaco, Courier, monospace;
}

code {
  background-color: #f7f7f7;
  padding: 3px 4px;
  border: 1px solid #ccc;
  border-radius: 3px;
}

pre {
  background-color: #fdfdfd;
  box-shadow: inset rgba(#000, .1) 0 1px 2px, rgba(#000, .03) 0 0 0 3px;
  border-radius: 3px;
  border: 1px solid #ccc;
  padding: 1em;
  font-size: 1.1em;
  margin: $leading*2 2em;
}

pre code,
.hljs {
  border: 0;
  background: none;
  border-radius: 0;
  padding: 0;
}