fraport/fradrive
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

initial ideas on a possible frontend

Browse Source
This commit is contained in:
Felix Hamann 2017-12-22 19:52:13 +01:00
parent 4b091787fb
commit 7742d69a48
14 changed files with 942 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
app/www/etc/server_mock/_home.html Normal file
View File

@ -0,0 +1 @@
<p>Penis</p>

40
app/www/etc/server_mock/events.json Normal file
View File

@ -0,0 +1,40 @@
{
"events": [
{
"title": "Bachelor Seminar \"Räumliche Informationssysteme\"",
"description": "Dieses Seminar dient der Hinführung zum wissenschatlichen Arbeiten in zweifacher Hinsicht. Esse incididunt dolore deserunt id non veniam.",
"registrationUrl": "/app/www/events.html",
"registrationLabel": "Zentralanmeldung"
},
{
"title": "Bachelor Seminar \"Räumliche Informationssysteme\"",
"description": "Dieses Seminar dient der Hinführung zum wissenschatlichen Arbeiten in zweifacher Hinsicht. Esse incididunt dolore deserunt id non veniam.",
"registrationUrl": "/app/www/events.html",
"registrationLabel": "Zentralanmeldung"
},
{
"title": "Bachelor Seminar \"Räumliche Informationssysteme\"",
"description": "Dieses Seminar dient der Hinführung zum wissenschatlichen Arbeiten in zweifacher Hinsicht. Esse incididunt dolore deserunt id non veniam.",
"registrationUrl": "/app/www/events.html",
"registrationLabel": "Zentralanmeldung"
},
{
"title": "Bachelor Seminar \"Räumliche Informationssysteme\"",
"description": "Dieses Seminar dient der Hinführung zum wissenschatlichen Arbeiten in zweifacher Hinsicht. Esse incididunt dolore deserunt id non veniam.",
"registrationUrl": "/app/www/events.html",
"registrationLabel": "Zentralanmeldung"
},
{
"title": "Bachelor Seminar \"Räumliche Informationssysteme\"",
"description": "Dieses Seminar dient der Hinführung zum wissenschatlichen Arbeiten in zweifacher Hinsicht. Esse incididunt dolore deserunt id non veniam.",
"registrationUrl": "/app/www/events.html",
"registrationLabel": "Zentralanmeldung"
},
{
"title": "Bachelor Seminar \"Räumliche Informationssysteme\"",
"description": "Dieses Seminar dient der Hinführung zum wissenschatlichen Arbeiten in zweifacher Hinsicht. Esse incididunt dolore deserunt id non veniam.",
"registrationUrl": "/app/www/events.html",
"registrationLabel": "Zentralanmeldung"
}
]
}

47
app/www/etc/server_mock/server.js Normal file
View File

@ -0,0 +1,47 @@
var http = require('http');
var fs = require('fs');
//create a server object:
http.createServer(function (req, res) {
let data = "wurst";
console.log(req.url);
res.setHeader('Access-Control-Allow-Origin', 'http://127.0.0.1:5500');
res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');
res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type');
res.setHeader('Access-Control-Allow-Credentials', true);
switch(req.url) {
case "/events":
fs.readFile('events.json', function(err, data) {
if (err) {
res.writeHead(404);
res.write(err);
} else {
res.writeHead(200, {'Content-Type': 'application/json'});
res.write(data);
}
res.end();
});
break;
case '/home':
fs.readFile('_home.html', function(err, data) {
if (err) {
res.writeHead(404);
res.write(err);
} else {
res.writeHead(200, {'Content-Type': 'text/html'});
res.write(data);
}
res.end();
});
break;
default:
res.writeHead(200, {'Content-Type': 'text/html'});
res.write("käse");
res.end();
break;
}
}).listen(8080); //the server object listens on port 8080
// start with `supervisor server.js`

111
app/www/events.html Normal file
View File

@ -0,0 +1,111 @@
<!doctype html>
<html>
<head>
<title>UniWorX</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="src/css/main.css">
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,800,900" rel="stylesheet">
<script data-main="src/js/main" src="lib/require.js"></script>
</head>
<body>
<div class="grid">
<header>
<span></span>
<nav class="horizontal">
<ul class="flat">
<li><a href="/">Startseite</a></li>
<li><a href="/settings">Benutzerinstellungen</a></li>
<li><a href="/logout">Abmelden</a></li>
</ul>
</nav>
</header>
<div class="sidebar">
<div class="box">
<div class="box-title">Navi</div>
<nav class="vertical">
<ul>
<li>
<a href="index.html">Home</a>
</li>
<li>
<a href="events.html">Events</a>
</li>
<li>
<a href="/Seminars">Seminars</a>
</li>
<li>
<a href="/terms">Terms</a>
</li>
<li>
<a href="/lectures">Lectures</a>
</li>
</ul>
</nav>
</div>
</div>
<section class="main-content">
<div class="box">
<div class="box-title">Aktuelle Veranstaltungen</div>
<div class="term text">Wintersemester 2017 / 2018 (<b>WS17/18</b>)</div>
</div>
<div class="box event-box">
<div class="box-title">Bachelor Seminar "Räumliche Informationssysteme"</div>
<div class="event-desc">Dieses Seminar dient der Hinführung zum wissenschatlichen Arbeiten in zweifacher Hinsicht. Esse incididunt dolore deserunt id non veniam.</div>
<div class="event-registration">Zentralanmeldung</div>
</div>
<div class="box event-box">
<div class="box-title">Bachelor Seminar "Räumliche Informationssysteme"</div>
<div class="event-desc">Dieses Seminar dient der Hinführung zum wissenschatlichen Arbeiten in zweifacher Hinsicht. Esse incididunt dolore deserunt id non veniam.</div>
<div class="event-registration">Zentralanmeldung</div>
</div>
<div class="box event-box">
<div class="box-title">Bachelor Seminar "Räumliche Informationssysteme"</div>
<div class="event-desc">Dieses Seminar dient der Hinführung zum wissenschatlichen Arbeiten in zweifacher Hinsicht. Esse incididunt dolore deserunt id non veniam.</div>
<div class="event-registration">Zentralanmeldung</div>
</div>
<div class="box event-box">
<div class="box-title">Bachelor Seminar "Räumliche Informationssysteme"</div>
<div class="event-desc">Dieses Seminar dient der Hinführung zum wissenschatlichen Arbeiten in zweifacher Hinsicht. Esse incididunt dolore deserunt id non veniam.</div>
<div class="event-registration">Zentralanmeldung</div>
</div>
<div class="box event-box">
<div class="box-title">Bachelor Seminar "Räumliche Informationssysteme"</div>
<div class="event-desc">Dieses Seminar dient der Hinführung zum wissenschatlichen Arbeiten in zweifacher Hinsicht. Esse incididunt dolore deserunt id non veniam.</div>
<div class="event-registration">Zentralanmeldung</div>
</div>
<div class="box event-box">
<div class="box-title">Bachelor Seminar "Räumliche Informationssysteme"</div>
<div class="event-desc">Dieses Seminar dient der Hinführung zum wissenschatlichen Arbeiten in zweifacher Hinsicht. Esse incididunt dolore deserunt id non veniam.</div>
<div class="event-registration">Zentralanmeldung</div>
</div>
<div class="box event-box">
<div class="box-title">Bachelor Seminar "Räumliche Informationssysteme"</div>
<div class="event-desc">Dieses Seminar dient der Hinführung zum wissenschatlichen Arbeiten in zweifacher Hinsicht. Esse incididunt dolore deserunt id non veniam.</div>
<div class="event-registration">Zentralanmeldung</div>
</div>
<div class="box event-box">
<div class="box-title">Bachelor Seminar "Räumliche Informationssysteme"</div>
<div class="event-desc">Dieses Seminar dient der Hinführung zum wissenschatlichen Arbeiten in zweifacher Hinsicht. Esse incididunt dolore deserunt id non veniam.</div>
<div class="event-registration">Zentralanmeldung</div>
</div>
<div class="box event-box">
<div class="box-title">Bachelor Seminar "Räumliche Informationssysteme"</div>
<div class="event-desc">Dieses Seminar dient der Hinführung zum wissenschatlichen Arbeiten in zweifacher Hinsicht. Esse incididunt dolore deserunt id non veniam.</div>
<div class="event-registration">Zentralanmeldung</div>
</div>
</section>
<footer>
<nav class="thirdary">
<ul class="flat">
<li><a href="">Impressum</a></li>
<li><a href="">Kontakt</a></li>
</ul>
</nav>
Copyright: Burpsi
</footer>
</div>
</body>
</html>

98
app/www/index.html Normal file
View File

@ -0,0 +1,98 @@
<!doctype html>
<html>
<head>
<title>UniWorX</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="src/css/main.css">
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,800,900" rel="stylesheet">
<script data-main="src/js/main" src="lib/velocity.min.js"></script>
<script data-main="src/js/main" src="lib/require.js"></script>
<!-- <script src="scripts/main.js"></script> -->
</head>
<body>
<div class="grid">
<header>
<span></span>
<nav class="horizontal">
<ul class="flat">
<li><a href="/">Startseite</a></li>
<li><a href="/settings">Benutzerinstellungen</a></li>
<li><a href="/logout">Abmelden</a></li>
</ul>
</nav>
</header>
<aside class="sidebar">
<div class="box">
<div class="box-title">Navi</div>
<nav class="vertical">
<ul>
<li>
<a href="/home" async="true">Home</a>
</li>
<li>
<a href="/events" async="true" data-type="json">Events</a>
</li>
<li>
<a href="/seminars">Seminars</a>
</li>
<li>
<a href="/terms">Terms</a>
</li>
<li>
<a href="/lectures">Lectures</a>
</li>
</ul>
</nav>
</div>
<div class="box">
<div class="box-title">Boxilein</div>
<p>Kleines Boxilein am Randilein</p>
</div>
</aside>
<section class="main-content">
<div class="box">
<div class="box-title">Aktuelles</div>
<div class="text">Id ipsum Lorem esse cillum Lorem cillum. Cillum proident culpa id incididunt voluptate esse amet est cillum velit. Mollit nisi labore velit nulla proident do elit exercitation veniam labore sint. Proident non eu nostrud sint laborum commodo voluptate deserunt anim occaecat eu.</div>
<div class="text">Excepteur duis nulla reprehenderit ullamco aute elit laboris dolor. Duis aliquip est voluptate Lorem sunt aute cupidatat aute labore cupidatat pariatur mollit consequat elit. Voluptate enim pariatur elit consectetur aliqua ullamco. Laborum irure sit duis enim sunt pariatur cupidatat nisi nostrud duis. Nostrud ex incididunt sit velit veniam cupidatat ullamco nisi sit.</div>
<div class="text">Irure ad veniam quis sint elit veniam commodo laborum cupidatat id enim. Pariatur minim qui labore labore. Nisi anim in incididunt exercitation sunt. Qui culpa adipisicing in Lorem aute ex. Consequat quis esse ipsum id ex officia nisi aute exercitation elit. Ea fugiat proident nulla aliqua exercitation elit adipisicing enim. Aliqua aute consequat minim fugiat exercitation ipsum irure esse sit amet eiusmod quis nulla.</div>
<div class="text">Proident esse ipsum ad enim fugiat. Et elit voluptate do ullamco laboris consectetur deserunt officia adipisicing. Minim laboris laborum ut non sint ullamco excepteur non mollit laborum irure.</div>
<div class="text">Est fugiat incididunt enim veniam aute. Aliqua ad incididunt in eu fugiat irure reprehenderit fugiat magna qui fugiat ullamco laborum. Aute cupidatat id culpa aute irure aliquip eu velit adipisicing. Proident sint et deserunt tempor irure ea duis velit. Sint occaecat consectetur commodo sit eiusmod exercitation enim pariatur amet in. Irure quis aliquip ea deserunt eu consequat consequat ullamco duis. Consequat proident amet mollit quis Lorem cillum mollit enim commodo.</div>
<div class="text">Do id minim ex eiusmod labore et nulla est incididunt qui laborum. Consectetur et cupidatat voluptate eiusmod magna laborum enim cupidatat esse id do consequat est. Aliqua sunt laborum deserunt in. Officia dolore excepteur dolore Lorem culpa.</div>
</div>
<div class="box">
<div class="box-title">Mehr Aktuelles...</div>
<div class="text">Id ipsum Lorem esse cillum Lorem cillum. Cillum proident culpa id incididunt voluptate esse amet est cillum velit. Mollit nisi labore velit nulla proident do elit exercitation veniam labore sint. Proident non eu nostrud sint laborum commodo voluptate deserunt anim occaecat eu.</div>
<div class="text">Excepteur duis nulla reprehenderit ullamco aute elit laboris dolor. Duis aliquip est voluptate Lorem sunt aute cupidatat aute labore cupidatat pariatur mollit consequat elit. Voluptate enim pariatur elit consectetur aliqua ullamco. Laborum irure sit duis enim sunt pariatur cupidatat nisi nostrud duis. Nostrud ex incididunt sit velit veniam cupidatat ullamco nisi sit.</div>
<div class="text">Irure ad veniam quis sint elit veniam commodo laborum cupidatat id enim. Pariatur minim qui labore labore. Nisi anim in incididunt exercitation sunt. Qui culpa adipisicing in Lorem aute ex. Consequat quis esse ipsum id ex officia nisi aute exercitation elit. Ea fugiat proident nulla aliqua exercitation elit adipisicing enim. Aliqua aute consequat minim fugiat exercitation ipsum irure esse sit amet eiusmod quis nulla.</div>
</div>
</section>
<aside class="sidebar-right">
<div class="box">
<div class="box-title">Wichtiges</div>
<span>
Nix wichtiges.
</span>
</div>
<div class="box">
<div class="box-title">Kalender</div>
<span>Tage. Tage. Tage.</span>
<span>Monate. Monate. Monate.</span>
</div>
</aside>
<footer>
<nav class="thirdary">
<ul class="flat">
<li><a href="">Impressum</a></li>
<li><a href="">Kontakt</a></li>
</ul>
</nav>
Copyright: Burpsi
</footer>
</div>
</body>
</html>

5
app/www/lib/require.js Normal file
View File

File diff suppressed because one or more lines are too long

4
app/www/lib/velocity.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

235
app/www/src/css/main.css Normal file
View File

@ -0,0 +1,235 @@
:root {
--header-height: 60px;
--header-height-collapsed: 40px;
--footer-height: 50px;
}
.grid {
display: grid;
height: 100%;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: var(--header-height) auto var(--footer-height);
grid-gap: 40px;
}
.grid > header {
grid-column: span 12;
}
.grid > .sidebar {
grid-column: 2 / span 2;
grid-row-start: 2;
}
.grid > .sidebar-right {
display: none;
grid-column: span 2;
grid-row-start: 2;
}
.grid > section {
grid-column: 4 / span 8;
grid-row-start: 2;
}
.grid > footer {
grid-column: span 12;
grid-row-start: 3;
}
* {
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 0;
margin: 0;
}
body {
background-color: #1d1c1d;
color: #fff;
font-family: "Source Sans Pro", Helvetica, sans-serif;
font-weight: 400;
font-size: 18px;
overflow-y: scroll;
}
a,
a:visited,
a:link {
color: inherit;
text-decoration: none;
font-weight: 600;
-webkit-transition: color .2s ease, background-color .2s ease;
transition: color .2s ease, background-color .2s ease;
}
a:hover {
color: #72a85b;
}
ul {
list-style-type: none;
}
ul.flat > li {
display: inline-block;
}
h1 {
font-size: 48px;
line-height: 48px;
font-weight: 300;
margin: 20px 0 40px;
}
.text, .event-desc {
margin-bottom: 20px;
line-height: 1.4;
}
header {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
padding: 12px 24px;
height: var(--header-height);
line-height: var(--header-height);
background-color: #72a85b;
width: 100%;
overflow: hidden;
z-index: 100;
-webkit-transition: height .2s ease, line-height .2s ease;
transition: height .2s ease, line-height .2s ease;
}
header.sticky {
position: fixed;
top: 0;
}
header.collapsed {
height: var(--header-height-collapsed);
line-height: var(--header-height-collapsed);
}
header.collapsed:before {
height: 30px;
}
header > nav.horizontal li a {
padding: 0 13px 0;
position: relative;
height: 100%;
display: inline-block;
color: #fff;
}
header > nav.horizontal li a:hover {
background-color: white;
}
footer {
text-align: right;
padding: 7px 24px;
overflow: hidden;
background-color: #72a85b;
}
.box {
background-color: #3c3c3c;
position: relative;
padding: 24px;
padding-top: 60px;
-webkit-box-shadow: 0 1px 2px #656565;
box-shadow: 0 1px 2px #656565;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
margin-bottom: 20px;
}
.box .box-title {
content: attr(data-title);
position: absolute;
color: #fff;
top: -3px;
left: -3px;
width: calc(100% + 6px);
background-color: #72a85b;
padding: 7px 23px;
font-size: 20px;
font-weight: 600;
overflow: hidden;
display: block;
}
.box.event-box {
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
margin-bottom: 20px;
}
.event-desc {
padding: 0 13px;
}
.button, .event-registration {
background-color: #72a85b;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
padding: 3px 13px;
cursor: pointer;
font-weight: 600;
-webkit-transition: background-color .2s ease, -webkit-transform .1s;
transition: background-color .2s ease, -webkit-transform .1s;
transition: transform .1s, background-color .2s ease;
transition: transform .1s, background-color .2s ease, -webkit-transform .1s;
}
.button:hover, .event-registration:hover {
background-color: #5b8848;
-webkit-transform: scale(1.01);
transform: scale(1.01);
}
.has-diagonal:before, header:before, .box .box-title:before {
content: '';
position: absolute;
top: -10px;
right: -25px;
height: 60px;
width: 310px;
-webkit-transform: rotate(12deg);
transform: rotate(12deg);
background-color: rgba(255, 255, 255, 0.4);
display: block;
-webkit-transition: height .2s;
transition: height .2s;
-webkit-transform-origin: top right;
transform-origin: top right;
}
/*# sourceMappingURL=main.css.map */

9
app/www/src/css/main.css.map Normal file
View File

@ -0,0 +1,9 @@
{
"version": 3,
"mappings": "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",
"sources": [
"../scss/main.scss"
],
"names": [],
"file": "main.css"
}

26
app/www/src/js/api.js Normal file
View File

@ -0,0 +1,26 @@
define(function (require) {
var serverUrl = "http://localhost:8080";
return {
getEvents: function(cb) {
this.getJson('events', cb);
},
getJson: function(req, cb) {
console.log('requesting %s', req);
// TODO: sanitize url
fetch(serverUrl + req).then(function(res) {
return res.json();
}).then(function(res){
cb(res);
});
},
getHtml: function(req, cb) {
fetch(serverUrl + req).then(function(res) {
console.log(res);
return res.text();
}).then(function(res){
cb(res);
});
}
}
});

99
app/www/src/js/helper/async_content.js Normal file
View File

@ -0,0 +1,99 @@
define(["../api"], function (api) {
var mainContentElement = document.querySelector('.main-content');
function replaceMainContent(elements) {
var element = document.querySelector('.main-content');
Velocity(element, {
opacity: 0
}, {
duration: 100,
complete: function(animatedElements) {
// actually remove content
mainContentElement.innerHTML = "";
elements.forEach(function(el) {
// and add new one
mainContentElement.appendChild(el);
});
Velocity(element, {
opacity: 1
}, {
duration: 70
});
}
});
}
function renderHtml(result) {
console.log(result);
var box = document.createElement('div');
box.classList.add('box');
box.innerHTML = result;
var boxTitleEl = document.createElement('div');
boxTitleEl.classList.add('box-title');
boxTitleEl.innerHTML = 'Wurst';
box.appendChild(boxTitleEl);
replaceMainContent([box]);
}
function renderEvents(result) {
var els = [];
var introBox = document.createElement('div');
introBox.classList.add('box');
introBox.innerHTML = '<div class="box-title">Aktuelle Veranstaltungen</div><div class="term text">Wintersemester 2017 / 2018 (<b>WS17/18</b>)</div>';
els.push(introBox);
for (var i = 0; i < result.events.length; i++) {
var event = result.events[i];
var eventEl = document.createElement('div');
eventEl.classList.add('box', 'event-box');
var eventTitleEl = document.createElement('div');
eventTitleEl.classList.add('box-title');
eventTitleEl.innerHTML = event.title;
var eventDescEl = document.createElement('div');
eventDescEl.classList.add('event-desc');
eventDescEl.innerHTML = event.description;
var eventRegistrationEl = document.createElement('div');
eventRegistrationEl.classList.add('event-registration');
eventRegistrationEl.innerHTML = event.registrationLabel;
eventEl.appendChild(eventTitleEl);
eventEl.appendChild(eventDescEl);
eventEl.appendChild(eventRegistrationEl);
els.push(eventEl);
}
replaceMainContent(els);
// TODO: reattach handlers, load js and stuff
}
return {
init: function() {
var linkElements = document.querySelectorAll('a[async]');
[].slice.call(linkElements).forEach((el, i) => {
var mainElement = document.querySelector('.main-content');
el.addEventListener('click', function(event) {
var req = el.getAttribute('href');
event.preventDefault();
var type = el.dataset.type || 'html';
switch(type) {
case 'json':
api.getJson(req, renderEvents);
break;
case 'html':
default:
api.getHtml(req, renderHtml);
break;
}
});
});
}
}
});

28
app/www/src/js/helper/sticky_menu.js Normal file
View File

@ -0,0 +1,28 @@
define(function (require) {
return {
init: function() {
var last_known_scroll_position = 0;
var ticking = false;
window.addEventListener('scroll', function(e) {
if (!ticking) {
window.requestAnimationFrame(function() {
checkScroll();
});
ticking = true;
}
});
function checkScroll() {
var collapsed = (window.scrollY > 0 && last_known_scroll_position <= window.scrollY)
var sticky = window.scrollY > 0;
document.querySelector('header').classList.toggle('collapsed', collapsed);
document.querySelector('header').classList.toggle('sticky', sticky);
ticking = false;
last_known_scroll_position = window.scrollY;
}
checkScroll();
}
}
});

4
app/www/src/js/main.js Normal file
View File

@ -0,0 +1,4 @@
requirejs(["helper/sticky_menu", "helper/async_content", "api"], function(sticky_menu, async_content, api) {
sticky_menu.init();
async_content.init();
});

235
app/www/src/scss/main.scss Normal file
View File

@ -0,0 +1,235 @@
// THEME 1
$base00: #72a85b;
$base-bg-color: #1d1c1d;
$base-font-color: #fff;
$sec-font-color: #fff;
$box-bg-color: #3c3c3c;
// THEME 2
// $base00: #639ac7;
// $base-bg-color: #f3f3f3;
// $base-font-color: rgb(53, 53, 53);
// $sec-font-color: #eaf2ff;
// $box-bg-color: #dddddd;
// VARIABLES
:root {
--header-height: 60px;
--header-height-collapsed: 40px;
--footer-height: 50px;
}
// GRID SETUP
.grid {
display: grid;
height: 100%;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: var(--header-height) auto var(--footer-height);
grid-gap: 40px;
> header {
grid-column: span 12;
}
> .sidebar {
grid-column: 2 / span 2;
grid-row-start: 2;
}
> .sidebar-right {
display: none;
grid-column: span 2;
grid-row-start: 2;
}
> section {
grid-column: 4 / span 8;
grid-row-start: 2;
}
> footer {
grid-column: span 12;
grid-row-start: 3;
}
}
// BASIC SETUP
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
body {
background-color: $base-bg-color;
color: $base-font-color;
font-family: "Source Sans Pro", Helvetica, sans-serif;
font-weight: 400;
font-size: 18px;
overflow-y: scroll;
}
a,
a:visited,
a:link {
color: inherit;
text-decoration: none;
font-weight: 600;
transition: color .2s ease, background-color .2s ease;
}
a:hover {
color: $base00;
}
ul {
list-style-type: none;
&.flat > li {
display: inline-block;
}
}
h1 {
font-size: 48px;
line-height: 48px;
font-weight: 300;
margin: 20px 0 40px;
}
.text {
margin-bottom: 20px;
line-height: 1.4;
}
// MACRO DESIGN
header {
position: relative;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
padding: 12px 24px;
height: var(--header-height);
line-height: var(--header-height);
background-color: $base00;
width: 100%;
overflow: hidden;
z-index: 100;
// box-shadow: 0 0 40px 40px rgba(0, 0, 0, 0.1);
transition: height .2s ease, line-height .2s ease;
@extend .has-diagonal;
&.sticky {
position: fixed;
top: 0;
}
&.collapsed {
height: var(--header-height-collapsed);
line-height: var(--header-height-collapsed);
&:before {
height: 30px;
}
}
> nav.horizontal li a {
padding: 0 13px 0;
position: relative;
height: 100%;
display: inline-block;
color: $sec-font-color;
&:hover {
background-color: white;
}
}
}
.main-content {
// padding: 24px;
}
footer {
text-align: right;
padding: 7px 24px;
overflow: hidden;
background-color: $base00;
}
.box {
background-color: $box-bg-color;
position: relative;
padding: 24px;
padding-top: 60px;
box-shadow: 0 1px 2px #656565;
display: flex;
flex-direction: column;
margin-bottom: 20px;
.box-title {
content: attr(data-title);
position: absolute;
color: $sec-font-color;
top: -3px;
left: -3px;
width: calc(100% + 6px);
background-color: $base00;
padding: 7px 23px;
font-size: 20px;
font-weight: 600;
overflow: hidden;
display: block;
@extend .has-diagonal;
}
&.event-box {
// background-color: white;
// color: $base-bg-color;
flex-direction: row;
margin-bottom: 20px;
}
}
.event-registration {
@extend .button;
}
.event-desc {
@extend .text;
padding: 0 13px;
}
// HELPERS
.button {
background-color: $base00;
display: flex;
align-items: center;
justify-content: center;
padding: 3px 13px;
cursor: pointer;
font-weight: 600;
transition: transform .1s, background-color .2s ease;
&:hover {
background-color: darken($base00, 10%);
transform: scale(1.01);
}
}
.has-diagonal {
&:before {
content: '';
position: absolute;
top: -10px;
right: -25px;
height: 60px;
width: 310px;
transform: rotate(12deg);
background-color: rgba(255, 255, 255, 0.4);
display: block;
transition: height .2s;
transform-origin: top right;
}
}