zeus.ugent.be/content/assets/stylesheets/main.scss
2016-07-19 08:39:52 +02:00

216 lines
3.2 KiB
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:400,700);
html, button, input, select, textarea,
.pure-g [class *= "pure-u"] {
font-family: 'Open Sans', sans-serif;
}
html, body {
width: 100%;
height: 100%;
}
#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;
}