Initial commit.

minimizing
madmaurice 6 years ago
commit 0613a926d0
  1. 1
      .gitignore
  2. 0
      css/app.css
  3. 4194
      css/foundation.css
  4. 2
      css/foundation.min.css
  5. 139
      css/index.css
  6. 136
      index.html
  7. 1
      js/app.js
  8. 9069
      js/vendor/foundation.js
  9. 4
      js/vendor/foundation.min.js
  10. 9842
      js/vendor/jquery.js
  11. 295
      js/vendor/what-input.js

1
.gitignore vendored

@ -0,0 +1 @@
images/*

4194
css/foundation.css vendored

File diff suppressed because it is too large Load Diff

File diff suppressed because one or more lines are too long

@ -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;
}

@ -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>

@ -0,0 +1 @@
$(document).foundation()

File diff suppressed because it is too large Load Diff

File diff suppressed because one or more lines are too long

9842
js/vendor/jquery.js vendored

File diff suppressed because it is too large Load Diff

@ -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…
Cancel
Save