zeus.ugent.be/content/stylesheet.scss

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

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

#logo {
  height: 150px;
}

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

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

  a:visited {
    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;


  .navlink {
    padding: 8px;
    transition: 0.2s;
  }

  .navlink:hover {
    background-color: $zeus_orange;
    color: white;

    transition: 0.2s;
  }
}

.main-event {
  height: 250px;
  margin-bottom: $event-padding;
  overflow: hidden;
}

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

  .event {
    border: 2px solid #DDD;
    position: relative;

    overflow: hidden;

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

  }
}

.event: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;
}
.event:hover:after {
  opacity: 1;
}