style.css

/*

INTRODUCTORY PROGRAMMING COURSE

Software Engineering program at Chalmers University of Technology

Made by Johan Brook.

--------------------------------------------------------------- */
* {
  -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: 0.9375em/1.6em "Open Sans", sans-serif;
  color: #444; }

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

::selection {
  background-color: rgba(156, 153, 117, 0.2); }

h1, h2, h3, dt, h4, h5, h6 {
  -webkit-font-smoothing: antialiased;
  margin: 0 0 0.8em; }

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 ~ h2,
  ol ~ h2,
  ul ~ h2 {
    margin-top: 1.6em; }

h3, dt {
  font-weight: bold;
  text-transform: uppercase;
  font-size: 1em; }
  h2 ~ h3, h2 ~ dt {
    margin-top: 1.6em; }

.subhead {
  font-size: 1.2em; }

a {
  color: #2F8EED;
  font-weight: 600;
  text-decoration: none; }
  a:hover {
    outline: 0;
    text-decoration: none;
    border-bottom: 1px solid #2F8EED; }
  a:focus {
    outline: 0;
    display: inline-block; }

#schedule-accordion section {
  margin-top: 1.6em; }

#schedule-accordion .schedule-link {
  display: block;
  padding: .5em;
  border: 0;
  border-radius: 3px; }
  #schedule-accordion .schedule-link:not(:last-of-type) {
    border-bottom: 1px solid #ddd; }
  #schedule-accordion .schedule-link:hover,
  #schedule-accordion .schedule-link:not(.collapsed) {
    color: #fff; }
  #schedule-accordion .schedule-link.it:hover,
  #schedule-accordion .schedule-link.it:not(.collapsed) {
    background-color: #5dcfff; }
  #schedule-accordion .schedule-link.d:hover,
  #schedule-accordion .schedule-link.d:not(.collapsed) {
    background-color: #FF9900; }
  #schedule-accordion .schedule-link.gu:hover,
  #schedule-accordion .schedule-link.gu:not(.collapsed) {
    background-color: #D00000; }

[role="banner"] {
  padding: 3.2em 0 3.2em;
  margin-bottom: 1.6em; }
  [role="banner"] h1 {
    font-family: Pacifico, "Open Sans", sans-serif;
    font-weight: normal;
    line-height: 1.7;
    font-size: 4.6em;
    margin: 0; }
    [role="banner"] h1 em {
      font-family: "Open Sans", sans-serif;
      font-style: normal;
      display: block;
      font-size: 15px;
      text-transform: uppercase;
      letter-spacing: .3em;
      color: #9C9975;
      position: relative;
      margin-left: 4em;
      top: 1em; }

p {
  margin: 0 0 1.6em; }

dt {
  margin-top: 1.6em; }

blockquote {
  margin: 0 2em 3.2em;
  font-style: italic; }
  blockquote a {
    color: #444;
    transition: color 0.15s ease-in-out; }
  blockquote:hover a {
    color: #2F8EED; }
  blockquote > p {
    color: #7846AB;
    font-size: 1.2em;
    line-height: 1.7; }
  blockquote footer cite::before {
    content: "\2014";
    padding-right: 5px; }

[role="contentinfo"] {
  margin: 4.8em 0;
  font-size: .8em;
  color: #999;
  display: table; }
  [role="contentinfo"] > p {
    display: table-cell;
    vertical-align: middle; }
    [role="contentinfo"] > p:last-child {
      padding-left: 5em; }
  [role="contentinfo"] .schools img {
    max-width: 200px;
    display: block;
    vertical-align: middle; }
  [role="contentinfo"] .schools .gu {
    max-width: 350px;
    position: relative;
    top: 4px; }
  [role="contentinfo"] .schools a {
    float: left;
    margin-right: 2em; }
    [role="contentinfo"] .schools a:hover {
      border: 0;
      opacity: .8; }

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

small {
  font-size: .7em;
  color: #999; }

.affix, .affix-top {
  right: 5%; }

.affix {
  position: fixed;
  top: 90px; }

.affix-top {
  position: absolute; }

.scrollspy {
  float: right;
  width: 20%; }
  .scrollspy nav {
    margin-left: -20px; }
  .scrollspy p {
    margin: 0 0 0.53333em; }
  .scrollspy .btn-download {
    width: 100%; }
  .scrollspy .download {
    text-align: center;
    margin-bottom: 1.6em; }
    .scrollspy .download small a {
      color: #aaa;
      transition: color 0.2s; }
  .scrollspy:hover .download small a {
    color: #2F8EED; }

[role="main"] {
  width: 66%;
  max-width: 38em; }
  [role="main"] > section {
    margin-bottom: 3.2em; }
    [role="main"] > section:not(:last-child)::after {
      content: "";
      display: block;
      margin: 3.2em 0;
      width: 30%;
      height: 1px;
      background-color: #ddd; }

[role="navigation"] .active a, [role="navigation"] .active a:hover {
  color: #7846AB;
  border-left: 2px solid #7846AB;
  padding-left: 19px;
  font-weight: 600; }

[role="navigation"] a {
  font-weight: normal;
  color: #999;
  display: block;
  padding: 0.3em 20px;
  border-left: 1px solid transparent; }
  [role="navigation"] a:hover {
    border: 0;
    border-left: 1px solid #dcdbce;
    color: #333; }

.exercises-list {
  list-style: none;
  margin: 0;
  padding: 0; }
  .exercises-list .exercise-level {
    text-indent: -999em;
    border-radius: 100%;
    display: inline-block;
    background-color: #ddd;
    width: 8px;
    height: 8px; }
    .exercises-list .exercise-level.level-1 {
      background-color: #A0D945; }
    .exercises-list .exercise-level.level-2 {
      background-color: #FAB02F; }
    .exercises-list .exercise-level.level-3 {
      background-color: #FF4B14; }
  .exercises-list [data-toggle='collapse'] {
    font-family: Monaco, Menlo, Courier, monospace;
    font-size: 13px;
    font-weight: normal;
    color: #9264c0;
    border: 0;
    border-top: 2px solid #dcdbce;
    display: block;
    padding: .6em 0;
    position: relative;
    transition: border-color 0.1s ease; }
    .exercises-list [data-toggle='collapse'] .exercise-level {
      position: absolute;
      right: 50px;
      top: 1.2em; }
    .exercises-list [data-toggle='collapse']:hover,
    .exercises-list [data-toggle='collapse']:not(.collapsed) {
      color: #782ec3; }
      .exercises-list [data-toggle='collapse']:hover::after,
      .exercises-list [data-toggle='collapse']:not(.collapsed)::after {
        color: #7846AB; }
    .exercises-list [data-toggle='collapse']::after {
      content: "+";
      display: inline-block;
      position: absolute;
      top: .5em;
      right: 10px;
      color: #999; }
  .exercises-list > li:hover > [data-toggle="collapse"],
  .exercises-list > li:hover + li > [data-toggle="collapse"] {
    border-top-color: #7846AB; }
  .exercises-list > li:last-child > [data-toggle='collapse'] {
    border-bottom: 2px solid #dcdbce; }
  .exercises-list .doc {
    padding: 1.6em 0; }

.collapse {
  display: none; }
  .collapse.in {
    display: block; }

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

/* =BUTTONS
--------------------------------------------- */
.btn,
.btn-download,
button {
  display: inline-block;
  -webkit-appearance: none;
  position: relative;
  padding: 0.6em 1em;
  border-radius: 4px;
  text-align: center;
  background-color: #fff;
  color: #ab78df;
  font-weight: bold;
  -webkit-font-smoothing: antialiased;
  transition: color, border-color 0.2s ease-out;
  border: 2px solid #ab78df; }
  .btn:hover,
  .btn-download:hover,
  button:hover {
    border-width: 2px;
    border-color: #B845FF;
    color: #B845FF; }
  .btn:active,
  .btn-download:active,
  button:active {
    -webkit-transform: scale(0.95);
    transform: scale(0.95);
    border-color: #7846AB;
    border-width: 2px;
    color: #7846AB;
    background-color: rgba(120, 70, 171, 0.05); }

/* 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(0, 0, 0, 0.1) 0 1px 2px, rgba(0, 0, 0, 0.03) 0 0 0 3px;
  border-radius: 3px;
  border: 1px solid #ccc;
  padding: 1em;
  font-size: 1.1em;
  margin: 3.2em 2em; }

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