demo.1
- added possibility to add data into tempaltes via json - restructured output files - some work on styles
This commit is contained in:
Stephan
parent
1bb57b109b
commit
8bc8da74db
18 changed files with 1004 additions and 199 deletions
34
source/data.json
Normal file
34
source/data.json
Normal file
|
|
@ -0,0 +1,34 @@
|
|||
{
|
||||
"demolinks": [
|
||||
{
|
||||
"href": "demo/intro.html",
|
||||
"text": "Intro"
|
||||
},
|
||||
{
|
||||
"href": "demo/os.html",
|
||||
"text": "OS"
|
||||
},
|
||||
{
|
||||
"href": "demo/error/404.html",
|
||||
"text": "404"
|
||||
},
|
||||
{
|
||||
"href": "demo/error/500.html",
|
||||
"text": "500"
|
||||
}
|
||||
],
|
||||
"links": [
|
||||
{
|
||||
"href": "elements.html",
|
||||
"text": "Elements"
|
||||
},
|
||||
{
|
||||
"href": "blank.html",
|
||||
"text": "Blank"
|
||||
},
|
||||
{
|
||||
"href": "tests.html",
|
||||
"text": "Tests"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -486,9 +486,9 @@
|
|||
<a href="">
|
||||
<h4>Überschrift als Block-Verweis</h4>
|
||||
</a>
|
||||
<pre class="pre__code"><code>section>div.box__inline_left>img^p+p</code></pre>
|
||||
<pre class="pre__code"><code>section>div.float_space_left>img^p+p</code></pre>
|
||||
<section class="overflow">
|
||||
<div class="box__inline_left demo__avatar"><img src="./art/bullet.gif" width="256" height="256" alt="Avatar"></div>
|
||||
<div class="float_space_left demo__avatar"><img src="./art/bullet.gif" width="256" height="256" alt="Avatar"></div>
|
||||
<p>Vorname Name<br>Straße 1, 01234 Stadt</p><p>+49 (0)123 1337 0000<br><a class="lineLink" href="mailto:name@domain.tld">name@domain.tld</a></p>
|
||||
</section>
|
||||
<pre class="pre__code"><code>div.box__main_indent</code></pre>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
{% set pageId = "os" %}
|
||||
{% set pageClass = "" %}
|
||||
|
||||
{% extends "default.njk" %}
|
||||
{% extends "demo.njk" %}
|
||||
|
||||
{% block title %}demo{% endblock %}
|
||||
{% block head %}
|
||||
|
|
|
|||
|
|
@ -12,18 +12,27 @@
|
|||
{% block body_content %}
|
||||
<div class="wrap">
|
||||
<div class="hello">
|
||||
<h2>Demo Pages</h2>
|
||||
<h2>This is HIPPIE</h2>
|
||||
<p>You can start using it by replacing this file with your own index page.</p>
|
||||
<p>The folder <i>demo</i> contains examples and also an overview of definitions made.<br/>Follow the white rabbit.</p>
|
||||
|
||||
<h3>Demo Pages</h3>
|
||||
<ul class="list__link">
|
||||
<li><a href="demo/intro.html">Intro</a></li>
|
||||
<li><a href="demo/os.html">OS</a></li>
|
||||
<li><a href="demo/blank.html">Blank</a></li>
|
||||
<li><a href="demo/error/404.html">404</a></li>
|
||||
<li><a href="demo/error/500.html">500</a></li>
|
||||
<!-- Loops through "demo-links" array -->
|
||||
{% for link in demolinks %}
|
||||
<li><a href="{{link.href}}">{{link.text}}</a></li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
<h2>Overview about all the styles</h2>
|
||||
<pre class="txt-tiny txt_white">
|
||||
()()
|
||||
(..)
|
||||
C(")(")</pre>
|
||||
<h3>Overview about all the styles</h3>
|
||||
<ul class="list__link">
|
||||
<li><a href="elements.html">Elements</a></li>
|
||||
<li><a href="tests.html">Tests</a></li>
|
||||
<!-- Loops through "links" array -->
|
||||
{% for link in links %}
|
||||
<li><a href="{{link.href}}">{{link.text}}</a></li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -9,17 +9,18 @@
|
|||
{{ super() }}
|
||||
<style>
|
||||
#error {
|
||||
border: 1px solid #FFFF66;
|
||||
background-color: #FFFFCC;
|
||||
display: inline-block;
|
||||
margin-left: 10px;
|
||||
padding: 3px;
|
||||
display: none;
|
||||
border: 1px solid #FFFF66;
|
||||
background-color: #FFFFCC;
|
||||
display: inline-block;
|
||||
margin-left: 10px;
|
||||
padding: 3px;
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
{% endblock %}
|
||||
|
||||
{% block body_content %}
|
||||
|
||||
<input type="password" name="txtPassword" onkeypress="capLock(event)" />
|
||||
<div id="divMayus" style="visibility:hidden">Caps Lock is on.</div>
|
||||
<form action="">
|
||||
|
|
@ -32,55 +33,55 @@
|
|||
// Page specific
|
||||
// ------------------------------------------------------------------------------
|
||||
$( document ).ready(function() {
|
||||
console.log('HIPPIE Tests');
|
||||
console.log('HIPPIE Tests');
|
||||
|
||||
});
|
||||
function capLock(e){
|
||||
kc = e.keyCode?e.keyCode:e.which;
|
||||
sk = e.shiftKey?e.shiftKey:((kc == 16)?true:false);
|
||||
if(((kc >= 65 && kc <= 90) && !sk)||((kc >= 97 && kc <= 122) && sk))
|
||||
document.getElementById('divMayus').style.visibility = 'visible';
|
||||
else
|
||||
document.getElementById('divMayus').style.visibility = 'hidden';
|
||||
kc = e.keyCode?e.keyCode:e.which;
|
||||
sk = e.shiftKey?e.shiftKey:((kc == 16)?true:false);
|
||||
if(((kc >= 65 && kc <= 90) && !sk)||((kc >= 97 && kc <= 122) && sk))
|
||||
document.getElementById('divMayus').style.visibility = 'visible';
|
||||
else
|
||||
document.getElementById('divMayus').style.visibility = 'hidden';
|
||||
}
|
||||
|
||||
function capsDetect() {
|
||||
var body = document.getElementsByTagName('body')[0];
|
||||
var isShiftPressed = false;
|
||||
var isCapsOn = false;
|
||||
var capsWarning = document.getElementById('error');
|
||||
body.addEventListener('keydown', function(e) {
|
||||
var keyCode = e.keyCode ? e.keyCode : e.which;
|
||||
if (keyCode === 16) {
|
||||
isShiftPressed = true;
|
||||
}
|
||||
});
|
||||
body.addEventListener('keyup', function(e) {
|
||||
var keyCode = e.keyCode ? e.keyCode : e.which;
|
||||
if (keyCode === 16) {
|
||||
isShiftPressed = false;
|
||||
}
|
||||
if (keyCode === 20) {
|
||||
if (isCapsOn) {
|
||||
isCapsOn = false;
|
||||
capsWarning.style.display = 'none';
|
||||
} else {
|
||||
isCapsOn = true;
|
||||
capsWarning.style.display = 'inline-block';
|
||||
}
|
||||
}
|
||||
});
|
||||
body.addEventListener('keypress', function(e) {
|
||||
var keyCode = e.keyCode ? e.keyCode : e.which;
|
||||
if (keyCode <= 40)
|
||||
return;
|
||||
if (keyCode >= 65 && keyCode <= 90 && !isShiftPressed) {
|
||||
isCapsOn = true;
|
||||
capsWarning.style.display = 'inline-block';
|
||||
} else {
|
||||
capsWarning.style.display = 'none';
|
||||
}
|
||||
});
|
||||
var body = document.getElementsByTagName('body')[0];
|
||||
var isShiftPressed = false;
|
||||
var isCapsOn = false;
|
||||
var capsWarning = document.getElementById('error');
|
||||
body.addEventListener('keydown', function(e) {
|
||||
var keyCode = e.keyCode ? e.keyCode : e.which;
|
||||
if (keyCode === 16) {
|
||||
isShiftPressed = true;
|
||||
}
|
||||
});
|
||||
body.addEventListener('keyup', function(e) {
|
||||
var keyCode = e.keyCode ? e.keyCode : e.which;
|
||||
if (keyCode === 16) {
|
||||
isShiftPressed = false;
|
||||
}
|
||||
if (keyCode === 20) {
|
||||
if (isCapsOn) {
|
||||
isCapsOn = false;
|
||||
capsWarning.style.display = 'none';
|
||||
} else {
|
||||
isCapsOn = true;
|
||||
capsWarning.style.display = 'inline-block';
|
||||
}
|
||||
}
|
||||
});
|
||||
body.addEventListener('keypress', function(e) {
|
||||
var keyCode = e.keyCode ? e.keyCode : e.which;
|
||||
if (keyCode <= 40)
|
||||
return;
|
||||
if (keyCode >= 65 && keyCode <= 90 && !isShiftPressed) {
|
||||
isCapsOn = true;
|
||||
capsWarning.style.display = 'inline-block';
|
||||
} else {
|
||||
capsWarning.style.display = 'none';
|
||||
}
|
||||
});
|
||||
}
|
||||
capsDetect();
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -186,12 +186,6 @@ div {
|
|||
}
|
||||
|
||||
|
||||
// Inline
|
||||
.box__inline_left {
|
||||
@extend .float_space_left;
|
||||
// padding: $basic_space / 2;
|
||||
}
|
||||
|
||||
|
||||
// Columns
|
||||
.block__column_line {
|
||||
|
|
|
|||
|
|
@ -164,3 +164,41 @@ ins {
|
|||
del {
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
// General Classes
|
||||
// ------------------------------------------------------------------------------
|
||||
.txt-tiny {
|
||||
font-size: .5em !important;
|
||||
}
|
||||
|
||||
.txt-smaller {
|
||||
font-size: .75em !important;
|
||||
}
|
||||
|
||||
.txt-larger {
|
||||
font-size: 1.2em !important;
|
||||
}
|
||||
|
||||
.txt-huge {
|
||||
font-size: 3em !important;
|
||||
}
|
||||
|
||||
.txt_center {
|
||||
text-align: center !important;
|
||||
}
|
||||
.txt_right {
|
||||
text-align: right !important;
|
||||
}
|
||||
.txt_left {
|
||||
text-align: left !important;
|
||||
}
|
||||
|
||||
.txt_white {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.txt_black {
|
||||
color: black;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,19 +4,19 @@
|
|||
%basic {
|
||||
font-family: $primary_font_family;
|
||||
font-size: $text_size_1;
|
||||
line-height: $text_line_1;
|
||||
line-height: $text_line_basic;
|
||||
}
|
||||
|
||||
%basic_mono {
|
||||
font-family: $third_font_family;
|
||||
font-family: $monospace_font_family;
|
||||
font-size: $text_size_1;
|
||||
line-height: $text_line_1;
|
||||
line-height: $text_line_mono;
|
||||
}
|
||||
|
||||
%basic_print {
|
||||
font-family: $third_font_family;
|
||||
font-family: $print_font_family;
|
||||
font-size: $text_size_1;
|
||||
line-height: $text_line_1;
|
||||
line-height: $text_line_basic;
|
||||
}
|
||||
|
||||
%head_all {
|
||||
|
|
@ -27,7 +27,7 @@
|
|||
font-family: $secondary_font_family;
|
||||
font-size: $head_size_1;
|
||||
font-weight: 300;
|
||||
line-height: $head_line_1;
|
||||
line-height: $head_line_basic;
|
||||
}
|
||||
|
||||
%head_2 {
|
||||
|
|
@ -53,7 +53,6 @@
|
|||
|
||||
%solo {
|
||||
@extend %basic;
|
||||
color: $basic_font_color;
|
||||
}
|
||||
|
||||
%short {
|
||||
|
|
|
|||
|
|
@ -57,16 +57,6 @@
|
|||
height: 100vh;
|
||||
}
|
||||
|
||||
.txt_center {
|
||||
text-align: center !important;
|
||||
}
|
||||
.txt_right {
|
||||
text-align: right !important;
|
||||
}
|
||||
.txt_left {
|
||||
text-align: left !important;
|
||||
}
|
||||
|
||||
.space_right {
|
||||
margin-right: $space_3;
|
||||
}
|
||||
|
|
@ -108,8 +98,16 @@
|
|||
overflow: auto;
|
||||
}
|
||||
|
||||
.float_space_left {
|
||||
.float_left {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.float_right {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.float_space_left {
|
||||
@extend .float_left;
|
||||
margin-right: $space_3;
|
||||
}
|
||||
|
||||
|
|
@ -123,6 +121,15 @@
|
|||
}
|
||||
|
||||
|
||||
// Inlining
|
||||
// ------------------------------------------------------------------------------
|
||||
|
||||
.inline {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Positioned elements
|
||||
// ------------------------------------------------------------------------------
|
||||
%full_viewport {
|
||||
|
|
|
|||
|
|
@ -52,11 +52,12 @@ $head_size_4: 1.35em !default;
|
|||
$text_size_1: 1em;
|
||||
$text_size_2: 20;
|
||||
|
||||
$text_line_1: 1.5 !default;
|
||||
$head_line_1: $text_line_1;
|
||||
$head_line_2: $text_line_1;
|
||||
$head_line_3: $text_line_1;
|
||||
$head_line_4: $text_line_1;
|
||||
$text_line_basic: 1.3 !default;
|
||||
$text_line_mono: 1.1 !default;
|
||||
$head_line_basic: $text_line_basic !default;
|
||||
$head_line_2: $head_line_basic;
|
||||
$head_line_3: $head_line_basic;
|
||||
$head_line_4: $head_line_basic;
|
||||
|
||||
$print_font_family: #{'Times New Roman', times} !default;
|
||||
$monospace_font_family: #{'Courier New', monospace} !default;
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@
|
|||
<link rel="shortcut icon" type="image/x-icon" href="./favicon.ico" />
|
||||
|
||||
<!-- <link href='https://fonts.googleapis.com/css?family=Roboto:400,300,400italic,500,500italic,700' rel='stylesheet' type='text/css'> -->
|
||||
<link rel="stylesheet" type="text/css" media="all" href="./css/example.css"/>
|
||||
<link rel="stylesheet" type="text/css" media="all" href="../css/example.css"/>
|
||||
<!-- <link rel="stylesheet" type="text/css" media="print" href="./css/print.css"/> -->
|
||||
{% endblock %}
|
||||
</head>
|
||||
|
|
@ -51,7 +51,7 @@
|
|||
crossorigin="anonymous"></script>
|
||||
{# <script src="bower_components/jquery/dist/jquery.js"></script> #}
|
||||
<script src="../vendor/jq-sticky-anything.min.js" type="text/javascript"></script>
|
||||
<script src="./js/all.min.js" type="text/javascript"></script>
|
||||
<script src="../js/all.min.js" type="text/javascript"></script>
|
||||
{% block script %}{% endblock %}
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -16,8 +16,8 @@
|
|||
|
||||
<link rel="icon" href="./favicon.ico" type="image/vnd.microsoft.icon">
|
||||
<link rel="shortcut icon" type="image/x-icon" href="./favicon.ico" />
|
||||
|
||||
<link rel="stylesheet" type="text/css" media="all" href="./css/maintenance.css"/>
|
||||
|
||||
<link rel="stylesheet" type="text/css" media="all" href="../../css/maintenance.css"/>
|
||||
{% endblock %}
|
||||
</head>
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue