Home page is running so far

master
Felix Bytow 2016-05-22 15:01:15 +02:00
parent 39283451cb
commit 81c08e21ee
8 changed files with 584 additions and 2 deletions

View File

@ -20,12 +20,19 @@ module.exports = function(grunt) {
'uglify': {
'main': {
'files': {
'assets/scripts/interfug.min.js': [
'scripts/interfug.app.js',
'scripts/home.controller.js'
]
}
}
},
'cssmin': {
'main': {
'files': {
'assets/styles/interfug.min.css': [
'styles/interfug.css'
]
}
}
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 132 KiB

View File

@ -5,7 +5,17 @@ var router = express.Router();
router.get('/', function(req, res) {
res.render('index', {
title: 'Interfug16'
title: 'INTERFUG #2//2016',
menu: [
{ url: '/', title: 'Home' },
{ url: '/kontakt', title: 'Kontakt' }
]
});
});
router.get('/home', function(req, res) {
res.render('home', {
date: '27. & 28.08.2016'
});
});

View File

@ -0,0 +1,6 @@
'use strict';
(function (app) {
app.interfug.controller('home', ['$scope', function($scope) {
}]);
})(window.app);

13
scripts/interfug.app.js Normal file
View File

@ -0,0 +1,13 @@
'use strict';
(function (app) {
app.interfug = angular.module('interfug', ['ngRoute']);
app.interfug.config(['$routeProvider', function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'home',
controller: 'home'
})
}]);
})(window.app || (window.app = {}));

519
styles/interfug.css Normal file
View File

@ -0,0 +1,519 @@
@charset 'UTF-8';
/*********************************************************************************/
/* Basic */
/*********************************************************************************/
@font-face {
font-family: 'OCR';
font-style: normal;
font-weight: 300;
src: url(/assets/fonts/ocr_a_regular.ttf);
}
*{
margin:0;
padding:0;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body, html{
height:100%;
width:100%;
overflow-x: hidden;
}
body, input, textarea, select, option
{
font-family: 'Source Sans Pro', sans-serif;
font-weight: 300;
color: #222;
}
strong, b{
font-weight: 400;
color: #363636;
}
h1, h2, h3, h4,h5, h6{
font-family: 'OCR';
font-weight: 400;
color: #363636;
margin-bottom:0.5em;
}
h2{
padding-bottom:0.5em;
}
h3{
text-transform:uppercase;
}
a{
color:inherit;
}
blockquote
{
border-left: solid 0.5em #ddd;
padding: 1em 0 1em 2em;
font-style: italic;
}
em, i
{
font-style: italic;
}
hr
{
border: 0;
border-top: solid 1px #ddd;
padding: 1.5em 0 0 0;
margin: 1.75em 0 0 0;
clear:both;
}
sub
{
position: relative;
top: 0.5em;
font-size: 0.8em;
}
sup
{
position: relative;
top: -0.5em;
font-size: 0.8em;
}
table
{
width: 100%;
}
br.clear
{
clear: both;
}
p, ul, ol, dl, table, blockquote, form
{
margin-bottom: 2em;
}
b
{
font-weight: bold;
}
/*********************************************************************************/
/* Layout */
/*********************************************************************************/
.container{
margin:0 auto;
transition-duration:0.8s;
}
#header{
margin:0 auto;
position: relative;
background:#FFF;
border: 0px solid #e30613;
}
#header *{
z-index:15;
}
#container{
background:#F2F2F2;
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
z-index:-7;
}
#marx, #line, #container .container{
transition-duration:0.8s;
transition-property:opacity;
}
#marx{
width:*;
background: url("/assets/images/marx_red.png") no-repeat right;
background-size:cover;
}
#container .container{
background: url("/assets/images/line_red.png") right;
background-size:contain;
}
#line{
width:*;
background: url("/assets/images/line_red.png") right;
background-size:contain;
}
#main{
position:relative;
top:0;
background: #FFF;
overflow-x: hidden;
border: 0px solid #e30613;
}
#main article{
padding-top:12px;
padding-right:20px;
height:100%;
overflow-x: hidden;
overflow-y: auto;
}
.box{
margin:10px;
overflow:hidden;
}
.quicktip{
display: inline;
position: relative;
}
.quicktip:hover:after{
background: #333;
background: rgba(0,0,0,.8);
border-radius: 5px;
bottom: 26px;
color: #ff0;
font-weight: bold;
content: attr(title);
left: -15%;
padding: 5px 5px;
position: absolute;
z-index: 98;
width: 150px;
}
.quicktip:hover:before{
border: solid;
border-color: #333 transparent;
border-width: 6px 6px 0 6px;
bottom: 20px;
content: "";
left: 50%;
position: absolute;
z-index: 99;
}
/*********************************************************************************/
/* Nav */
/*********************************************************************************/
#title
{
position:absolute;
top:30px;
padding-left:50px;
text-align:center;
overflow:hidden;
transition-duration:0.8s;
}
#title h1{
transition-duration:0.8s;
}
#nav
{
position:absolute;
transition-duration:0.8s;
}
#nav ul
{
list-style-type:none;
}
#nav li, #title
{
background: white;
margin-bottom:12px;
padding:4px;
border: 4px solid #e30613;
}
#nav a{
display: inline-block;
width:100%
}
#nav a span
{
/*text-transform:*/
background:url("/assets/images/texture_red.png") no-repeat right bottom;
background-size:70%;
font-family:'OCR';
display: inline-block;
color: #000;
font-size:1.3em;
width:100%;
line-height: 32px;
padding-right:60px;
}
#nav .active span
{
text-decoration:underline;
}
#navplaceholder{
float:left;
transition-duration:0.8s;
height:290px;
width:0px;
}
/*********************************************************************************/
/* Content */
/*********************************************************************************/
article{
padding:20px;
}
article img{
float:left;
width: 100%;
max-width:500px;
}
article p{
/*text-align: justify;*/
}
/*********************************************************************************/
/* Fancy responsiveness */
/*********************************************************************************/
/* height>450px: */
@media screen and (min-width: 1000px){
#header{
height:130px;
}
#header, #main{
border-right-width:4px;
border-left-width:4px;
}
.container{
width:700px;
}
#title{
top:30px;
left:-120px;
right:-70px;
height:100px;
padding-left:-50px;
}
#title h1{
font-size:64px;
}
#nav{
top:142px;
left:-120px;
width:200px;
}
#navplaceholder{
width:80px;
}
#line, #marx, #container .container{
min-width:130px;
opacity:1;
}
}
@media screen and (min-width: 700px) and (max-width: 1000px){
#header{
height:130px;
}
#header, #main{
border-width:0;
}
.container{
width:100vw;
}
#title{
top:30px;
left:10px;
right:20px;
height:100px;
padding-left:0px;
}
#title h1{
font-size:64px;
}
#nav{
top:142px;
left:10px;
width:160px;
}
#navplaceholder{
width:170px;
}
#line, #marx, #container .container{
min-width:0;
opacity:0;
}
#main article{
margin-right:20px;
}
}
@media screen and (min-width: 500px) and (max-width: 700px){
#header{
height:100px;
}
.container{
width:100vw;
}
#title{
top:10px;
left:10px;
right:20px;
height:70px;
min-height:1.5em;
max-height:100px;
padding-left:0px;
}
#title h1{
font-size:8vw;
line-height:60px;
}
#nav{
top:92px;
left:10px;
width:160px;
}
#navplaceholder{
width:170px;
}
#line, #marx, #container .container{
min-width:0;
opacity:0;
}
#main article{
margin-right:20px;
}
}
@media screen and (max-width: 500px){
#header{
height:84vw;
max-height:320px;
background: none;
margin-bottom:82px;
}
#main{
border-width:4px;
margin:10px;
margin-right:20px;
}
.container{
/*width:100vw;*/
}
#title{
top:10px;
left:10px;
right:20px;
height:14vw;
min-height:24px;
max-height:70px;
padding-left:0px;
}
#title h1{
line-height:10vw;
font-size:8vw;
}
#nav{
margin-top:22px;
top:14vw;
left:10px;
right:20px;
}
#nav li
{
height:14vw;
min-height:24px;
max-height:50px;
}
#nav a span
{
background-size:contain;
}
#navplaceholder{
width:170px;
height:0px;
}
#line, #marx, #container .container{
min-width:0;
opacity:0;
}
#main article{
margin-right:20px;
}
}

6
views/home.pug Normal file
View File

@ -0,0 +1,6 @@
h2 Interfug 2016
p Der #[a(href='https://chaoschemnitz.de', title='Chaostreff Chemnitz') Chaostreff Chemnitz]
| veranstaltet am letzten Augustwochenende (#[b= date]) seine zweite Konferenz.
| Damit das auch ordentlich Spaß macht und ihr euer Wissen möglichst effizient verbreiten könnt,
| bieten wir eine Bühne und Raum für Vorträge, Workshops und Hacking an.
img(alt='die A102 bei Nacht', src='/assets/images/chch_nacht.jpg' width='500')

View File

@ -6,5 +6,26 @@ html
title= title
script(src='assets/scripts/angular.min.js')
script(src='assets/scripts/angular-route.min.js')
script(src='assets/scripts/interfug.min.js')
link(rel='stylesheet', href='/assets/styles/interfug.min.css')
body(ng-app='interfug')
div(ng-view)
div#header.container
header#title
h1= title
nav#nav
ul
each entry in menu
li
a(href='#' + entry.url)
span=entry.title
div.border
div#main.container
article#content.box
div#navplaceholder
div(ng-view)
table#container(border='0', cellpadding='0', cellspacing='0')
tbody
tr
td#marx
td.container
td#line