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

217 lines
3.2 KiB
SCSS
Raw Normal View History

2016-07-05 22:13:14 +02:00
$zeus_orange: #FF7F00;
$event-padding: 10px;
$navbar-border-color: #CCC;
2016-07-18 12:33:35 +02:00
$event-border-color: #DDD;
2016-06-29 21:38:57 +02:00
2016-07-18 09:24:24 +02:00
$cammie-controls-color: rgba(0, 0, 0, 0.60);
2016-07-12 23:58:08 +02:00
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700);
2016-07-12 23:14:12 +02:00
html, button, input, select, textarea,
.pure-g [class *= "pure-u"] {
2016-07-12 23:58:08 +02:00
font-family: 'Open Sans', sans-serif;
2016-07-12 23:14:12 +02:00
}
2016-07-18 09:24:24 +02:00
html, body {
width: 100%;
height: 100%;
}
2016-07-05 22:13:14 +02:00
#container {
height: 700px;
margin-top: 35px;
2016-06-18 01:43:41 +02:00
}
2016-07-05 22:13:14 +02:00
#logo {
height: 150px;
2016-06-18 01:43:41 +02:00
}
2016-07-18 12:33:35 +02:00
a, a:hover, a:visited, a:link, a:active {
color: $zeus_orange;
}
2016-07-05 22:13:14 +02:00
#logos {
display: inline-block;
color: black;
2016-07-06 11:11:39 +02:00
a, a:hover, a:visited, a:link, a:active {
2016-07-05 23:57:18 +02:00
text-decoration: none;
color: currentColor;
}
2016-07-05 22:13:14 +02:00
.logo-link {
margin-left: 10px;
2016-07-05 23:57:18 +02:00
transition: 0.2s;
&:hover {
color: $zeus_orange;
transition: 0.2s;
}
2016-07-05 22:13:14 +02:00
}
2016-06-18 01:43:41 +02:00
}
2016-07-05 22:13:14 +02:00
.header-top {
display: flex;
justify-content: space-between;;
align-items: flex-end;
2016-06-18 01:43:41 +02:00
}
2016-07-05 22:13:14 +02:00
#navbar {
border-top: 1px solid $navbar-border-color;
border-bottom: 1px solid $navbar-border-color;
2016-07-05 23:57:18 +02:00
padding-top: 7px;
padding-bottom: 7px;
2016-06-18 01:43:41 +02:00
2016-07-05 22:13:14 +02:00
color: black;
2016-06-18 01:43:41 +02:00
2016-07-05 22:13:14 +02:00
display: flex;
justify-content: space-around;
2016-06-18 01:43:41 +02:00
2016-07-05 22:13:14 +02:00
margin-bottom: $event-padding * 2;
margin-top: $event-padding * 2;
2016-06-18 01:43:41 +02:00
2016-07-05 23:57:18 +02:00
2016-07-18 15:08:41 +02:00
a {
2016-07-05 23:57:18 +02:00
padding: 8px;
transition: 0.2s;
2016-07-18 12:33:35 +02:00
2016-07-19 08:39:52 +02:00
font-variant: small-caps;
font-size: 1.25em;
2016-07-18 15:08:41 +02:00
&, &:hover, &:visited, &:link, &:active {
2016-07-18 12:33:35 +02:00
text-decoration: none;
color: black;
}
2016-07-18 15:08:41 +02:00
&:hover {
background-color: $zeus_orange;
transition: 0.2s;
2016-07-18 12:33:35 +02:00
color: white;
}
2016-07-05 22:13:14 +02:00
}
2016-06-18 01:43:41 +02:00
}
2016-07-05 22:13:14 +02:00
#all-events {
margin-left: -10px;
margin-right: -10px;
.event {
2016-07-18 12:33:35 +02:00
border: 2px solid $event-border-color;
2016-07-05 22:38:59 +02:00
position: relative;
2016-07-05 22:13:14 +02:00
2016-07-05 22:38:59 +02:00
overflow: hidden;
2016-07-05 22:13:14 +02:00
height: 200px;
margin: $event-padding;
2016-07-05 22:38:59 +02:00
2016-07-18 16:31:45 +02:00
&: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;
}
2016-07-05 22:13:14 +02:00
}
2016-06-18 01:43:41 +02:00
}
2016-07-05 22:38:59 +02:00
2016-07-12 23:14:12 +02:00
#event-banner {
position: fixed;
2016-07-12 23:58:08 +02:00
min-width: 100%;
}
#event-description {
padding: 20px;
}
#event-info {
padding-top: 20px;
2016-07-12 23:14:12 +02:00
}
#event-content {
position: absolute;
top: 500px;
background-color: white;
height: 100vh;
2016-07-12 23:58:08 +02:00
border-top: 2px solid $navbar-border-color;
2016-07-12 23:14:12 +02:00
}
#event-title {
text-align: center;
2016-07-12 23:58:08 +02:00
font-size: 50px;
line-height: 50px;
2016-07-12 23:14:12 +02:00
}
#sticky.stick {
position: fixed;
top: 0;
z-index: 10000;
width: 100%;
background-color: white;
}
2016-07-18 09:24:24 +02:00
#cammie {
2016-07-18 15:08:41 +02:00
object-fit: contain;
2016-07-18 16:31:45 +02:00
max-width: 100%;
height: auto;
2016-07-18 09:24:24 +02:00
}
.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;
2016-07-18 11:15:03 +02:00
cursor: pointer;
2016-07-18 09:24:24 +02:00
}
}
#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;
}