Initial commit.
This commit is contained in:
commit
0613a926d0
11 changed files with 23683 additions and 0 deletions
1
.gitignore
vendored
Normal file
1
.gitignore
vendored
Normal file
|
|
@ -0,0 +1 @@
|
|||
images/*
|
||||
0
css/app.css
Normal file
0
css/app.css
Normal file
4194
css/foundation.css
vendored
Normal file
4194
css/foundation.css
vendored
Normal file
File diff suppressed because it is too large
Load diff
2
css/foundation.min.css
vendored
Normal file
2
css/foundation.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
139
css/index.css
Normal file
139
css/index.css
Normal file
|
|
@ -0,0 +1,139 @@
|
|||
.last {
|
||||
margin-bottom:0;
|
||||
}
|
||||
|
||||
body {
|
||||
background:#f0f0f3 url(../images/noise_blue3.png);
|
||||
}
|
||||
|
||||
.header {
|
||||
text-align: center;
|
||||
background: #393f42;
|
||||
/* background: linear-gradient( #464d51 , #393f42 ); */
|
||||
background: #393f42 url(../images/background.png);
|
||||
/* background-size: cover; */
|
||||
position: relative;
|
||||
overflow: visible;
|
||||
padding-top: 2.5rem;
|
||||
padding-bottom: 4.9rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.header .headline {
|
||||
text-align:left;
|
||||
color: #ffe;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.header .tagline {
|
||||
color: #eeeeed /* #aaaaac */;
|
||||
font-size: 1.5rem;
|
||||
margin: 0;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.header-subnav {
|
||||
float: none;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
margin: 0 auto;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.header-subnav li {
|
||||
float: none;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.header-subnav li a {
|
||||
padding: 0.9rem 1rem;
|
||||
font-size: 0.75rem;
|
||||
color: #eef;
|
||||
text-transform: uppercase;
|
||||
display: block;
|
||||
font-weight: bold;
|
||||
letter-spacing: 1px;
|
||||
transition: all 0.35s ease-in-out;
|
||||
}
|
||||
|
||||
.header-subnav li a.is-active {
|
||||
/* background: #ffffff; */
|
||||
color: #393f42;
|
||||
background-image:url(../images/noise_blue3.png);
|
||||
}
|
||||
|
||||
.header-subnav li a:not(.is-active):hover {
|
||||
background: rgba(250,250,250,0.15);
|
||||
transition: all 0.35s ease-in-out;
|
||||
}
|
||||
|
||||
.columns {
|
||||
padding:0 10px;
|
||||
}
|
||||
|
||||
.whitebox {
|
||||
background-color:#f3f3f0;
|
||||
box-shadow: 4px 4px 5px rgba(100,100,100,0.1);
|
||||
padding:1rem;
|
||||
margin-bottom:1em;
|
||||
}
|
||||
|
||||
.whitebox a {
|
||||
color: #1eb513 !important;
|
||||
}
|
||||
|
||||
.post .title {
|
||||
color: #1eb513;
|
||||
font-size: 2rem;
|
||||
line-height:2.2rem;
|
||||
}
|
||||
|
||||
.post .info {
|
||||
font-size: 0.8rem;
|
||||
color: #555;
|
||||
margin-top: 5px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.post .content {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.post .authorline {
|
||||
font-size: 0.75rem;
|
||||
color: #555;
|
||||
padding-left: 1.7rem;
|
||||
}
|
||||
|
||||
.post {
|
||||
}
|
||||
|
||||
.sidebar .boxhead {
|
||||
font-size:1.1rem;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.sidebar .list {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.sidebar .list li a {
|
||||
color: #2199e8;
|
||||
}
|
||||
|
||||
.sidebar .searchbox {
|
||||
margin:0;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
margin:0;
|
||||
}
|
||||
|
||||
.footer {
|
||||
text-align:center;
|
||||
font-size:0.7rem;
|
||||
text-transform:lowercase;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
136
index.html
Normal file
136
index.html
Normal file
|
|
@ -0,0 +1,136 @@
|
|||
<!DOCTYPE html>
|
||||
<!--[if IE 9]>
|
||||
<html class="lt-ie10" lang="en" >
|
||||
<![endif]-->
|
||||
<html class="no-js" lang="en" >
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
|
||||
<title>Zom.bi - the friendly neighborhood tech community</title>
|
||||
|
||||
<!-- normalize.css and modernizr.js help with browser compatibility -->
|
||||
<link rel="stylesheet" href="css/normalize.css">
|
||||
<link rel="stylesheet" href="css/foundation.css">
|
||||
<link rel="stylesheet" href="css/index.css">
|
||||
<script src="js/vendor/modernizr.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<header class="header">
|
||||
<a class="#header"><img src="images/logo-green.png"></a>
|
||||
<h2 class="tagline show-for-medium">The friendly neighborhood tech community</h2>
|
||||
<ul class="header-subnav">
|
||||
<li><a href="#">Zom.bi</a></li>
|
||||
<li><a href="#" class="is-active">Blog</a></li>
|
||||
<li><a href="#">Wiki</a></li>
|
||||
<li><a href="#">Mumble</a></li>
|
||||
</ul>
|
||||
</header>
|
||||
|
||||
<div class="row main">
|
||||
<div class="medium-9 columns content-box">
|
||||
<!-- Post begin -->
|
||||
<div class="whitebox">
|
||||
<div class="post">
|
||||
<div class="row">
|
||||
<div class="columns small-12 title">New post style</div>
|
||||
</div>
|
||||
<div class="row info">
|
||||
<div class="column medium-4 text-left">
|
||||
24. Dezember 2016
|
||||
</div>
|
||||
<div class="column medium-4 text-center">
|
||||
von <a href="#">Paul Wiehiessernoch</a>
|
||||
</div>
|
||||
<div class="column medium-4 text-right">
|
||||
Tags: <a href="#">tag</a>, <a href="#">tag</a>, <a href="#">tag</a>, <a href="#">tag</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et
|
||||
justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
|
||||
|
||||
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
|
||||
|
||||
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Post end -->
|
||||
<div class="whitebox">
|
||||
<div class="post">
|
||||
<h1 class="title">Old post style</h1>
|
||||
<p class="content">
|
||||
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et
|
||||
justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
|
||||
|
||||
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
|
||||
|
||||
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse
|
||||
</p>
|
||||
<div class="authorline">
|
||||
Posted by <a href="#">Paul</a> on 24th December 2016
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="medium-3 columns content-box sidebar">
|
||||
<div class="whitebox">
|
||||
<h2 class="boxhead">Search</h2>
|
||||
<div class="searchbox">
|
||||
<form>
|
||||
<input type="text" placeholder="Search..." class="last"/>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div class="whitebox">
|
||||
<h2 class="boxhead">Recent Comments</h2>
|
||||
</div>
|
||||
<div class="whitebox">
|
||||
<h2 class="boxhead">Archives</h2>
|
||||
</div>
|
||||
<div class="whitebox">
|
||||
<h2 class="boxhead">Categories</h2>
|
||||
<ul class="list last">
|
||||
<li><a href="#">Intern</a></li>
|
||||
<li><a href="#">Allgemein</a></li>
|
||||
<li><a href="#">Zeug</a></li>
|
||||
<li><a href="#">Off Topic</a></li>
|
||||
<li><a href="#">Projekte</a></li>
|
||||
<li><a href="#">Server</a></li>
|
||||
<li><a href="#">Proggen</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="whitebox">
|
||||
<h2 class="boxhead">Meta</h2>
|
||||
<ul class="list last">
|
||||
<li><a href="#">Log in</a></li>
|
||||
<li><a href="#">Entries RSS</a></li>
|
||||
<li><a href="#">Comments RSS</a></li>
|
||||
<li><a href="#">WordPress.org</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="columns small-12">
|
||||
<div class="whitebox footer">
|
||||
<a href="#">Zom.bi</a>
|
||||
/
|
||||
Design by <a href="#">Ranomier</a> and <a href="#">madmaurice</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- include before </body> tag -->
|
||||
<script src="js/vendor/jquery.js"></script>
|
||||
<script src="js/foundation.min.js"></script>
|
||||
<script>
|
||||
$(document).foundation();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
1
js/app.js
Normal file
1
js/app.js
Normal file
|
|
@ -0,0 +1 @@
|
|||
$(document).foundation()
|
||||
9069
js/vendor/foundation.js
vendored
Normal file
9069
js/vendor/foundation.js
vendored
Normal file
File diff suppressed because it is too large
Load diff
4
js/vendor/foundation.min.js
vendored
Normal file
4
js/vendor/foundation.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
9842
js/vendor/jquery.js
vendored
Normal file
9842
js/vendor/jquery.js
vendored
Normal file
File diff suppressed because it is too large
Load diff
295
js/vendor/what-input.js
vendored
Normal file
295
js/vendor/what-input.js
vendored
Normal file
|
|
@ -0,0 +1,295 @@
|
|||
window.whatInput = (function() {
|
||||
|
||||
'use strict';
|
||||
|
||||
/*
|
||||
---------------
|
||||
variables
|
||||
---------------
|
||||
*/
|
||||
|
||||
// array of actively pressed keys
|
||||
var activeKeys = [];
|
||||
|
||||
// cache document.body
|
||||
var body;
|
||||
|
||||
// boolean: true if touch buffer timer is running
|
||||
var buffer = false;
|
||||
|
||||
// the last used input type
|
||||
var currentInput = null;
|
||||
|
||||
// `input` types that don't accept text
|
||||
var nonTypingInputs = [
|
||||
'button',
|
||||
'checkbox',
|
||||
'file',
|
||||
'image',
|
||||
'radio',
|
||||
'reset',
|
||||
'submit'
|
||||
];
|
||||
|
||||
// detect version of mouse wheel event to use
|
||||
// via https://developer.mozilla.org/en-US/docs/Web/Events/wheel
|
||||
var mouseWheel = detectWheel();
|
||||
|
||||
// list of modifier keys commonly used with the mouse and
|
||||
// can be safely ignored to prevent false keyboard detection
|
||||
var ignoreMap = [
|
||||
16, // shift
|
||||
17, // control
|
||||
18, // alt
|
||||
91, // Windows key / left Apple cmd
|
||||
93 // Windows menu / right Apple cmd
|
||||
];
|
||||
|
||||
// mapping of events to input types
|
||||
var inputMap = {
|
||||
'keydown': 'keyboard',
|
||||
'keyup': 'keyboard',
|
||||
'mousedown': 'mouse',
|
||||
'mousemove': 'mouse',
|
||||
'MSPointerDown': 'pointer',
|
||||
'MSPointerMove': 'pointer',
|
||||
'pointerdown': 'pointer',
|
||||
'pointermove': 'pointer',
|
||||
'touchstart': 'touch'
|
||||
};
|
||||
|
||||
// add correct mouse wheel event mapping to `inputMap`
|
||||
inputMap[detectWheel()] = 'mouse';
|
||||
|
||||
// array of all used input types
|
||||
var inputTypes = [];
|
||||
|
||||
// mapping of key codes to a common name
|
||||
var keyMap = {
|
||||
9: 'tab',
|
||||
13: 'enter',
|
||||
16: 'shift',
|
||||
27: 'esc',
|
||||
32: 'space',
|
||||
37: 'left',
|
||||
38: 'up',
|
||||
39: 'right',
|
||||
40: 'down'
|
||||
};
|
||||
|
||||
// map of IE 10 pointer events
|
||||
var pointerMap = {
|
||||
2: 'touch',
|
||||
3: 'touch', // treat pen like touch
|
||||
4: 'mouse'
|
||||
};
|
||||
|
||||
// touch buffer timer
|
||||
var timer;
|
||||
|
||||
|
||||
/*
|
||||
---------------
|
||||
functions
|
||||
---------------
|
||||
*/
|
||||
|
||||
// allows events that are also triggered to be filtered out for `touchstart`
|
||||
function eventBuffer() {
|
||||
clearTimer();
|
||||
setInput(event);
|
||||
|
||||
buffer = true;
|
||||
timer = window.setTimeout(function() {
|
||||
buffer = false;
|
||||
}, 650);
|
||||
}
|
||||
|
||||
function bufferedEvent(event) {
|
||||
if (!buffer) setInput(event);
|
||||
}
|
||||
|
||||
function unBufferedEvent(event) {
|
||||
clearTimer();
|
||||
setInput(event);
|
||||
}
|
||||
|
||||
function clearTimer() {
|
||||
window.clearTimeout(timer);
|
||||
}
|
||||
|
||||
function setInput(event) {
|
||||
var eventKey = key(event);
|
||||
var value = inputMap[event.type];
|
||||
if (value === 'pointer') value = pointerType(event);
|
||||
|
||||
// don't do anything if the value matches the input type already set
|
||||
if (currentInput !== value) {
|
||||
var eventTarget = target(event);
|
||||
var eventTargetNode = eventTarget.nodeName.toLowerCase();
|
||||
var eventTargetType = (eventTargetNode === 'input') ? eventTarget.getAttribute('type') : null;
|
||||
|
||||
if (
|
||||
(// only if the user flag to allow typing in form fields isn't set
|
||||
!body.hasAttribute('data-whatinput-formtyping') &&
|
||||
|
||||
// only if currentInput has a value
|
||||
currentInput &&
|
||||
|
||||
// only if the input is `keyboard`
|
||||
value === 'keyboard' &&
|
||||
|
||||
// not if the key is `TAB`
|
||||
keyMap[eventKey] !== 'tab' &&
|
||||
|
||||
// only if the target is a form input that accepts text
|
||||
(
|
||||
eventTargetNode === 'textarea' ||
|
||||
eventTargetNode === 'select' ||
|
||||
(eventTargetNode === 'input' && nonTypingInputs.indexOf(eventTargetType) < 0)
|
||||
)) || (
|
||||
// ignore modifier keys
|
||||
ignoreMap.indexOf(eventKey) > -1
|
||||
)
|
||||
) {
|
||||
// ignore keyboard typing
|
||||
} else {
|
||||
switchInput(value);
|
||||
}
|
||||
}
|
||||
|
||||
if (value === 'keyboard') logKeys(eventKey);
|
||||
}
|
||||
|
||||
function switchInput(string) {
|
||||
currentInput = string;
|
||||
body.setAttribute('data-whatinput', currentInput);
|
||||
|
||||
if (inputTypes.indexOf(currentInput) === -1) inputTypes.push(currentInput);
|
||||
}
|
||||
|
||||
function key(event) {
|
||||
return (event.keyCode) ? event.keyCode : event.which;
|
||||
}
|
||||
|
||||
function target(event) {
|
||||
return event.target || event.srcElement;
|
||||
}
|
||||
|
||||
function pointerType(event) {
|
||||
if (typeof event.pointerType === 'number') {
|
||||
return pointerMap[event.pointerType];
|
||||
} else {
|
||||
return (event.pointerType === 'pen') ? 'touch' : event.pointerType; // treat pen like touch
|
||||
}
|
||||
}
|
||||
|
||||
// keyboard logging
|
||||
function logKeys(eventKey) {
|
||||
if (activeKeys.indexOf(keyMap[eventKey]) === -1 && keyMap[eventKey]) activeKeys.push(keyMap[eventKey]);
|
||||
}
|
||||
|
||||
function unLogKeys(event) {
|
||||
var eventKey = key(event);
|
||||
var arrayPos = activeKeys.indexOf(keyMap[eventKey]);
|
||||
|
||||
if (arrayPos !== -1) activeKeys.splice(arrayPos, 1);
|
||||
}
|
||||
|
||||
function bindEvents() {
|
||||
body = document.body;
|
||||
|
||||
// pointer events (mouse, pen, touch)
|
||||
if (window.PointerEvent) {
|
||||
body.addEventListener('pointerdown', bufferedEvent);
|
||||
body.addEventListener('pointermove', bufferedEvent);
|
||||
} else if (window.MSPointerEvent) {
|
||||
body.addEventListener('MSPointerDown', bufferedEvent);
|
||||
body.addEventListener('MSPointerMove', bufferedEvent);
|
||||
} else {
|
||||
|
||||
// mouse events
|
||||
body.addEventListener('mousedown', bufferedEvent);
|
||||
body.addEventListener('mousemove', bufferedEvent);
|
||||
|
||||
// touch events
|
||||
if ('ontouchstart' in window) {
|
||||
body.addEventListener('touchstart', eventBuffer);
|
||||
}
|
||||
}
|
||||
|
||||
// mouse wheel
|
||||
body.addEventListener(mouseWheel, bufferedEvent);
|
||||
|
||||
// keyboard events
|
||||
body.addEventListener('keydown', unBufferedEvent);
|
||||
body.addEventListener('keyup', unBufferedEvent);
|
||||
document.addEventListener('keyup', unLogKeys);
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
---------------
|
||||
utilities
|
||||
---------------
|
||||
*/
|
||||
|
||||
// detect version of mouse wheel event to use
|
||||
// via https://developer.mozilla.org/en-US/docs/Web/Events/wheel
|
||||
function detectWheel() {
|
||||
return mouseWheel = 'onwheel' in document.createElement('div') ?
|
||||
'wheel' : // Modern browsers support "wheel"
|
||||
|
||||
document.onmousewheel !== undefined ?
|
||||
'mousewheel' : // Webkit and IE support at least "mousewheel"
|
||||
'DOMMouseScroll'; // let's assume that remaining browsers are older Firefox
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
---------------
|
||||
init
|
||||
|
||||
don't start script unless browser cuts the mustard,
|
||||
also passes if polyfills are used
|
||||
---------------
|
||||
*/
|
||||
|
||||
if (
|
||||
'addEventListener' in window &&
|
||||
Array.prototype.indexOf
|
||||
) {
|
||||
|
||||
// if the dom is already ready already (script was placed at bottom of <body>)
|
||||
if (document.body) {
|
||||
bindEvents();
|
||||
|
||||
// otherwise wait for the dom to load (script was placed in the <head>)
|
||||
} else {
|
||||
document.addEventListener('DOMContentLoaded', bindEvents);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
---------------
|
||||
api
|
||||
---------------
|
||||
*/
|
||||
|
||||
return {
|
||||
|
||||
// returns string: the current input type
|
||||
ask: function() { return currentInput; },
|
||||
|
||||
// returns array: currently pressed keys
|
||||
keys: function() { return activeKeys; },
|
||||
|
||||
// returns array: all the detected input types
|
||||
types: function() { return inputTypes; },
|
||||
|
||||
// accepts string: manually set the input type
|
||||
set: switchInput
|
||||
};
|
||||
|
||||
}());
|
||||
Loading…
Reference in a new issue