zeus.ugent.be/content/assets/stylesheets/main.scss

$zeus_orange: #FF7F00;
$event-padding: 10px;
$navbar-border-color: #CCC;
$event-border-color: #DDD;

$cammie-controls-color: rgba(0, 0, 0, 0.60);

@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,700);

html, button, input, select, textarea,
.pure-g [class *= "pure-u"] {
  font-family: 'Open Sans', sans-serif;
}

html, body {
  width: 100%;
  height: 100%;

  color: #444;
}

h1, h2, strong {
  color: #222;
}

#container {
  height: 700px;
  margin-top: 35px;
}

#logo {
  height: 150px;
}

a, a:hover, a:visited, a:link, a:active {
  color: $zeus_orange;
}

#logos {
  display: inline-block;
  color: black;

  a, a:hover, a:visited, a:link, a:active {
    text-decoration: none;
    color: currentColor;
  }

  .logo-link {
    margin-left: 10px;
    transition: 0.2s;

    &:hover {
      color: $zeus_orange;
      transition: 0.2s;
    }
  }
}

.header-top {
  display: flex;
  justify-content: space-between;;
  align-items: flex-end;

}

#navbar {
  border-top: 1px solid $navbar-border-color;
  border-bottom: 1px solid $navbar-border-color;
  padding-top: 7px;
  padding-bottom: 7px;

  color: black;

  display: flex;
  justify-content: space-around;

  margin-bottom: $event-padding * 2;
  margin-top: $event-padding * 2;


  a {
    padding: 8px;
    transition: 0.2s;

    font-variant: small-caps;
    font-size: 1.25em;

    &, &:hover, &:visited, &:link, &:active {
      text-decoration: none;
      color: black;
    }
    &:hover {
      background-color: $zeus_orange;
      transition: 0.2s;
      color: white;
    }
  }
}

#all-events {
  margin-left: -10px;
  margin-right: -10px;

  .event {
    border: 2px solid $event-border-color;
    position: relative;

    overflow: hidden;

    height: 200px;
    margin: $event-padding;

    &:after {
      content: '\A';
      position: absolute;
      width: 100%; height:100%;
      top:0; left:0;
      background:rgba(0,0,0,0.6);
      opacity: 0;
      transition: all 0.5s;
      -webkit-transition: all 0.5s;
    }
    &:hover:after {
      opacity: 1;
    }
  }
}


#event-banner {
  position: fixed;
  min-width: 100%;
}

#event-description {
  padding: 20px;
}

#event-info {
  padding-top: 20px;
}

#event-content {
  position: absolute;
  top: 500px;
  background-color: white;
  height: 100vh;

  border-top: 2px solid $navbar-border-color;
}

#event-title {
  text-align: center;
  font-size: 50px;
  line-height: 50px;
}

#sticky.stick {
  position: fixed;
  top: 0;
  z-index: 10000;
  width: 100%;
  background-color: white;
}

#cammie {
  object-fit: contain;
  max-width: 100%;
  height: auto;
}
.fullpage {
  min-width: 100%;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-color: black;
}

.ctrl {
  background-color: $cammie-controls-color;
  color: white;
  position: absolute;
  z-index: 100;

  // Chevron centering
  display: flex;
  justify-content: center;
  align-items: center;

  &:hover {
    background-color: $zeus_orange;
    z-index: 200;
    cursor: pointer;
  }
}

#left {
  height: 100%;
  width: 100px;
  top: 0;
  left: 0;
}

#right {
  height: 100%;
  width: 100px;
  top: 0;
  right: 0;
}

#up {
  height: 100px;
  width: 100%;
  top: 0;
}

#down {
  height: 100px;
  width: 100%;
  bottom: 0;
}


.project-card {
  background-color: #2D5CB4;
  color: white;
  height: 300px;

  margin-top: 5px;
  margin-bottom: 5px;

  display: flex;
  justify-content: space-between;

  .project-title {
    background: #1e3c72; /* fallback for old browsers */
    background: -webkit-linear-gradient(to left, #1e3c72 , #2a5298); /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to left, #1e3c72 , #2a5298); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

    font-size: 4em;
    padding: 20px;
    flex-grow: 1;
  }

  .project-description {
    background-color: #1e3c72;
    text-align: right;
    padding: 20px;
    width: 700px;
  }
}