New examples and new default variable structure
This commit is contained in:
Stephan Hagedorn
parent
a8fabf373e
commit
0c4e801690
13 changed files with 455 additions and 259 deletions
|
|
@ -47,8 +47,8 @@
|
||||||
// Adjustments can be made by copying values from _config.scss to _override.scss
|
// Adjustments can be made by copying values from _config.scss to _override.scss
|
||||||
// Be careful though changes will get lost if hippie gets updated
|
// Be careful though changes will get lost if hippie gets updated
|
||||||
// -----------------------------------------------------------------------------
|
// -----------------------------------------------------------------------------
|
||||||
@import "global/default"; // DO NOT EDIT
|
// @import "global/default"; // DO NOT EDIT
|
||||||
@import "override"; // EDIT
|
@import "settings"; // EDIT
|
||||||
@import "global/config"; // DO NOT EDIT
|
@import "global/config"; // DO NOT EDIT
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
// Override for configuration file
|
// Override for configuration file
|
||||||
// ------------------------------------------------------------------------------
|
// ------------------------------------------------------------------------------
|
||||||
|
|
||||||
// $default_font_size: 10px;
|
// $basic_link_color: magenta;
|
||||||
150
code/global.js
Normal file
150
code/global.js
Normal file
|
|
@ -0,0 +1,150 @@
|
||||||
|
// DOM ready
|
||||||
|
// ------------------------------------------------------------------------------
|
||||||
|
$( document ).ready(function() {
|
||||||
|
|
||||||
|
// Setup
|
||||||
|
// ------------------------------------------------------------------------------
|
||||||
|
|
||||||
|
setup();
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
// Modules
|
||||||
|
// ------------------------------------------------------------------------------
|
||||||
|
|
||||||
|
// Explanation module scripts
|
||||||
|
var exp_mode = false;
|
||||||
|
|
||||||
|
// Displays explanation popup
|
||||||
|
$(".js_pop").hover(
|
||||||
|
function() {
|
||||||
|
var $this = $(this);
|
||||||
|
|
||||||
|
if($(this).attr("emmet")){
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
$(this).next(".exp_pop").show();
|
||||||
|
}, function() {
|
||||||
|
$(this).next(".exp_pop").hide();
|
||||||
|
}
|
||||||
|
).mousemove(
|
||||||
|
function(ev) {
|
||||||
|
$(this).next(".exp_pop").css({
|
||||||
|
"top": ev.pageY - $(this).next(".exp_pop").outerHeight() - 4,
|
||||||
|
"left": ev.pageX + 8
|
||||||
|
});
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
// WIP Activates layer with explanation elements
|
||||||
|
// Besser ::after oder ::before benutzen
|
||||||
|
$(".exp_help_btn").click(function(e){
|
||||||
|
var $wrap, $pop;
|
||||||
|
|
||||||
|
if(exp_mode != true){
|
||||||
|
exp_mode = true;
|
||||||
|
|
||||||
|
$(".js_pop").each(function(i, e){
|
||||||
|
if($(this).css("position") == "static") {
|
||||||
|
$(this).addClass("js_changed_pos");
|
||||||
|
$(this).css("position", "relative");
|
||||||
|
}
|
||||||
|
|
||||||
|
$pop = $(this).next(".exp_pop").detach();
|
||||||
|
$wrap = $(this).wrap("<span class=\"exp_wrap\"></span>").parent().prepend("<span class=\"exp_marker_pop\"></span>");
|
||||||
|
$wrap.after($pop);
|
||||||
|
});
|
||||||
|
|
||||||
|
} else {
|
||||||
|
$(".js_pop").each(function(i, e){
|
||||||
|
$wrap = $(this).parent(".exp_wrap");
|
||||||
|
$pop = $wrap.next(".exp_pop").detach();
|
||||||
|
$wrap.find(".exp_marker_pop").remove();
|
||||||
|
$(this).unwrap(".exp_wrap");
|
||||||
|
$(this).after($pop);
|
||||||
|
if($(this).hasClass("js_changed_pos")){
|
||||||
|
$(this).css("position", "");
|
||||||
|
if($(this).attr("style") == "") {
|
||||||
|
$(this).removeAttr("style");
|
||||||
|
}
|
||||||
|
$(this).removeClass("js_changed_pos");
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
exp_mode = false;
|
||||||
|
|
||||||
|
}
|
||||||
|
console.log("Explanation mode: "+ exp_mode);
|
||||||
|
});
|
||||||
|
|
||||||
|
// WIP Scroll to top
|
||||||
|
$('#js_scrolltop').click(function(event) {
|
||||||
|
console.log('scroll to the top');
|
||||||
|
event.preventDefault();
|
||||||
|
// $('body').scrollTop();
|
||||||
|
$('body').animate({scrollTop: 0}, basic_ease, function() {
|
||||||
|
console.log('arrived at top');
|
||||||
|
});
|
||||||
|
});
|
||||||
|
$('#js_scrolldown').click(function(event) {
|
||||||
|
console.log('scroll down');
|
||||||
|
event.preventDefault();
|
||||||
|
$('body').animate({scrollTop: $(document).height()}, basic_ease * 2, function() {
|
||||||
|
console.log('arrived at bottom');
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$( "#gameIcon" ).click(function(event) {
|
||||||
|
event.preventDefault();
|
||||||
|
$( this ).clone().appendTo( "#gameDetail" );
|
||||||
|
$( this ).siblings().clone().appendTo( "#gameDetail" );
|
||||||
|
$( "#gameDetail" ).removeClass( "magic" );
|
||||||
|
});
|
||||||
|
|
||||||
|
var i = 0;
|
||||||
|
$( ".pass-def dd" ).each(function() {
|
||||||
|
$( this ).find( "li" ).each(function( index ) {
|
||||||
|
if ( 0 == $( this ).children( "ul" ).length ) {
|
||||||
|
//console.log( index + ": " + $( this ).text() );
|
||||||
|
var tempContent = $( this ).html();
|
||||||
|
//$( this ).html( "<span class=\"list-count\"></span>" );
|
||||||
|
$( this ).html( tempContent +"<span class=\"list-count\">"+ i +"</span>" );
|
||||||
|
i++;
|
||||||
|
}
|
||||||
|
})
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
// jq-sticky-anything
|
||||||
|
$('#js_demo_fix').stickThis({
|
||||||
|
pushup: '#js_demo_stop'
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
// Scroll
|
||||||
|
// ------------------------------------------------------------------------------
|
||||||
|
$( document ).scroll(function() {
|
||||||
|
|
||||||
|
// Toggle navigation elements
|
||||||
|
doc_pos_y = $( document ).scrollTop();
|
||||||
|
// console.log(doc_pos_y);
|
||||||
|
var h = scroll_y_margin;
|
||||||
|
// var demo_margin = $('.header__fix');
|
||||||
|
if (doc_pos_y > h) {
|
||||||
|
$('#js_scrolltop').parent().removeClass('magic');
|
||||||
|
} else {
|
||||||
|
$('#js_scrolltop').parent().addClass('magic');
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
});
|
||||||
156
demo-explorer.html
Normal file
156
demo-explorer.html
Normal file
|
|
@ -0,0 +1,156 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="de">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
|
||||||
|
<title>HIPPIE Explorer Demo</title>
|
||||||
|
|
||||||
|
<meta name="author" content="Interaktionsweise">
|
||||||
|
<meta name="description" content="hippie example">
|
||||||
|
<meta name="generator" content="Notepad++, Atom">
|
||||||
|
<meta name="robots" content="noindex">
|
||||||
|
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||||||
|
|
||||||
|
<!-- <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="./example.css"/>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<div class="box__page">
|
||||||
|
<div class="flex__wrap">
|
||||||
|
<button class="demo__button_32"></button>
|
||||||
|
<button class="demo__button_32"></button>
|
||||||
|
<button class="demo__button_32"></button>
|
||||||
|
<button class="demo__button_32"></button>
|
||||||
|
<button class="demo__button_32"></button>
|
||||||
|
<button class="demo__button_32"></button>
|
||||||
|
</div>
|
||||||
|
<div class="flex">
|
||||||
|
<div class="flex__child">
|
||||||
|
<!-- (nav>ul.list__data>(li>a>img+p{Punkt $})*6)*2 -->
|
||||||
|
<nav>
|
||||||
|
<ul class="list__files">
|
||||||
|
<li><a href="">
|
||||||
|
<img src="" alt="">
|
||||||
|
<p>Punkt 1</p>
|
||||||
|
</a></li>
|
||||||
|
<li><a href="">
|
||||||
|
<img src="" alt="">
|
||||||
|
<p>Punkt 2</p>
|
||||||
|
</a></li>
|
||||||
|
<li><a href="">
|
||||||
|
<img src="" alt="">
|
||||||
|
<p>Punkt 3</p>
|
||||||
|
</a></li>
|
||||||
|
<li><a href="">
|
||||||
|
<img src="" alt="">
|
||||||
|
<p>Punkt 4</p>
|
||||||
|
</a></li>
|
||||||
|
<li><a href="">
|
||||||
|
<img src="" alt="">
|
||||||
|
<p>Punkt 5</p>
|
||||||
|
</a></li>
|
||||||
|
<li><a href="">
|
||||||
|
<img src="" alt="">
|
||||||
|
<p>Punkt 6</p>
|
||||||
|
</a></li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
<nav>
|
||||||
|
<ul class="list__files">
|
||||||
|
<li><a href="">
|
||||||
|
<img src="" alt="">
|
||||||
|
<p>Punkt 1</p>
|
||||||
|
</a></li>
|
||||||
|
<li><a href="">
|
||||||
|
<img src="" alt="">
|
||||||
|
<p>Punkt 2</p>
|
||||||
|
</a></li>
|
||||||
|
<li><a href="">
|
||||||
|
<img src="" alt="">
|
||||||
|
<p>Punkt 3</p>
|
||||||
|
</a></li>
|
||||||
|
<li><a href="">
|
||||||
|
<img src="" alt="">
|
||||||
|
<p>Punkt 4</p>
|
||||||
|
</a></li>
|
||||||
|
<li><a href="">
|
||||||
|
<img src="" alt="">
|
||||||
|
<p>Punkt 5</p>
|
||||||
|
</a></li>
|
||||||
|
<li><a href="">
|
||||||
|
<img src="" alt="">
|
||||||
|
<p>Punkt 6</p>
|
||||||
|
</a></li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
<div class="flex__child_one flex__row">
|
||||||
|
<!-- div.flex__child.box__file_wrp>(div.box__file_tile>img[src="./art/icon_default.svg"]^+p{Dateiname $}+p{Auszeichnung $})*4^+div.flex__child>table.table__file_simple>(tr>td>img^+td{Objektname $}+td.cell__file_path{Objektpfad $})*2 -->
|
||||||
|
<div class="flex__child box__file_wrp">
|
||||||
|
<div class="flex__wrap box__file_tile">
|
||||||
|
<div class="flex__child"><img src="./art/icon_default.svg" alt=""></div>
|
||||||
|
<div class="box__flex_one">
|
||||||
|
<p>Dateiname 1</p>
|
||||||
|
<p>Auszeichnung 1</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex__wrap box__file_tile">
|
||||||
|
<div class="flex__child"><img src="./art/icon_default.svg" alt=""></div>
|
||||||
|
<div class="box__flex_one">
|
||||||
|
<p>Dateiname 2</p>
|
||||||
|
<p>Auszeichnung 2</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex__wrap box__file_tile">
|
||||||
|
<div class="flex__child"><img src="./art/icon_default.svg" alt=""></div>
|
||||||
|
<div class="box__flex_one">
|
||||||
|
<p>Dateiname 3</p>
|
||||||
|
<p>Auszeichnung 3</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex__wrap box__file_tile">
|
||||||
|
<div class="flex__child"><img src="./art/icon_default.svg" alt=""></div>
|
||||||
|
<div class="box__flex_one">
|
||||||
|
<p>Dateiname 4</p>
|
||||||
|
<p>Auszeichnung 4</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex__child_one">
|
||||||
|
<table class="table__file_simple">
|
||||||
|
<tr>
|
||||||
|
<td><img src="" alt=""></td>
|
||||||
|
<td>Objektname 1</td>
|
||||||
|
<td class="cell__file_path">Objektpfad 1</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><img src="" alt=""></td>
|
||||||
|
<td>Objektname 2</td>
|
||||||
|
<td class="cell__file_path">Objektpfad 2</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
<div class="flex__child">
|
||||||
|
<p>Status</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script
|
||||||
|
src="https://code.jquery.com/jquery-3.2.1.min.js"
|
||||||
|
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
|
||||||
|
crossorigin="anonymous"></script>
|
||||||
|
<script src="./code/vendor/jq-sticky-anything.min.js" type="text/javascript"></script>
|
||||||
|
<script src="./code/variables.js" type="text/javascript"></script>
|
||||||
|
<script src="./code/functions.js" type="text/javascript"></script>
|
||||||
|
<script src="./code/global.js" type="text/javascript"></script>
|
||||||
|
<script type="text/javascript">
|
||||||
|
// Page specific
|
||||||
|
// ------------------------------------------------------------------------------
|
||||||
|
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -3,7 +3,7 @@
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
|
|
||||||
<title>Dummy</title>
|
<title>HIPPIE Dummy</title>
|
||||||
|
|
||||||
<meta name="author" content="Interaktionsweise">
|
<meta name="author" content="Interaktionsweise">
|
||||||
<meta name="description" content="hippie example">
|
<meta name="description" content="hippie example">
|
||||||
|
|
@ -186,7 +186,7 @@
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
<div class="exp_pop"><code class="code__solo">table>tbody>tr>td*2^tr>td[colspan=2]</code></div>
|
<div class="exp_pop"><code class="code__solo">table>tbody>tr>td*2^tr>td[colspan=2]</code></div>
|
||||||
<table class="table_blank float_left js_pop">
|
<table class="table__blank float_left js_pop">
|
||||||
<tbody>
|
<tbody>
|
||||||
<tr>
|
<tr>
|
||||||
<td>Mit</td>
|
<td>Mit</td>
|
||||||
|
|
@ -197,10 +197,10 @@
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
<div class="exp_pop"><code class="code__solo">table.table_blank>tbody>tr>td*2^tr>td[colspan=2]</code></div>
|
<div class="exp_pop"><code class="code__solo">table.table__blank>tbody>tr>td*2^tr>td[colspan=2]</code></div>
|
||||||
</div>
|
</div>
|
||||||
<p>Die nächste Tabelle verwendet alle zur Auszeichnung verfügbaren Elemente und hat eine starre Zellverteilung:</p>
|
<p>Die nächste Tabelle verwendet alle zur Auszeichnung verfügbaren Elemente und hat eine starre Zellverteilung:</p>
|
||||||
<table class="width_full table_fix js_pop">
|
<table class="width_full table__fix js_pop">
|
||||||
<caption>Beschreibung bzw. Zusammenhang der Tabelle</caption>
|
<caption>Beschreibung bzw. Zusammenhang der Tabelle</caption>
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
|
|
@ -239,7 +239,7 @@
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
<div class="exp_pop"><code class="code__solo">table.width_full.table_fix>caption+thead>tr>th*3^^tfoot>tr>td*3^^tbody>(tr>td*3)*3</code></div>
|
<div class="exp_pop"><code class="code__solo">table.width_full.table__fix>caption+thead>tr>th*3^^tfoot>tr>td*3^^tbody>(tr>td*3)*3</code></div>
|
||||||
<hr class="hr__hidden">
|
<hr class="hr__hidden">
|
||||||
<p>Viele weitere Formate sind möglich <span class="wip_txt">...</span></p>
|
<p>Viele weitere Formate sind möglich <span class="wip_txt">...</span></p>
|
||||||
<table class="width_full js_pop">
|
<table class="width_full js_pop">
|
||||||
|
|
@ -273,7 +273,7 @@
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
<div class="exp_pop"><code class="code__solo">table.width_full>thead>tr>th.precol+th[colspan=2]^^tbody>tr>td.precol+td*2^tr>td.precol+td[colspan=2]</code></div>
|
<div class="exp_pop"><code class="code__solo">table.width_full>thead>tr>th.precol+th[colspan=2]^^tbody>tr>td.precol+td*2^tr>td.precol+td[colspan=2]</code></div>
|
||||||
<table class="width_full table_stripe table_free">
|
<table class="width_full table__stripe table__free">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th>Kopfzeile</th>
|
<th>Kopfzeile</th>
|
||||||
|
|
@ -304,7 +304,7 @@
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
<table class="table_fix">
|
<table class="table__fix">
|
||||||
<caption>Beschreibung bzw. Zusammenhang der Tabelle</caption>
|
<caption>Beschreibung bzw. Zusammenhang der Tabelle</caption>
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
|
|
@ -522,11 +522,11 @@ nav.nav__center_old>ul>(li>a.a__button{Typ $})*4</code></pre>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex">
|
<div class="flex">
|
||||||
<div class="flex_child"></div>
|
<div class="flex__child"></div>
|
||||||
<div class="flex_child"></div>
|
<div class="flex__child"></div>
|
||||||
<div class="flex_child"></div>
|
<div class="flex__child"></div>
|
||||||
<div class="flex_child"></div>
|
<div class="flex__child"></div>
|
||||||
<div class="flex_child"></div>
|
<div class="flex__child"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="box__column">
|
<div class="box__column">
|
||||||
<div class="column"><input value="Undefiniert"/></div>
|
<div class="column"><input value="Undefiniert"/></div>
|
||||||
|
|
@ -606,153 +606,11 @@ nav.nav__center_old>ul>(li>a.a__button{Typ $})*4</code></pre>
|
||||||
<script src="./code/vendor/jq-sticky-anything.min.js" type="text/javascript"></script>
|
<script src="./code/vendor/jq-sticky-anything.min.js" type="text/javascript"></script>
|
||||||
<script src="./code/variables.js" type="text/javascript"></script>
|
<script src="./code/variables.js" type="text/javascript"></script>
|
||||||
<script src="./code/functions.js" type="text/javascript"></script>
|
<script src="./code/functions.js" type="text/javascript"></script>
|
||||||
|
<script src="./code/global.js" type="text/javascript"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
$( document ).ready(function() {
|
// Page specific
|
||||||
|
// ------------------------------------------------------------------------------
|
||||||
|
|
||||||
// Setup
|
|
||||||
// ------------------------------------------------------------------------------
|
|
||||||
|
|
||||||
setup();
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// Modules
|
|
||||||
// ------------------------------------------------------------------------------
|
|
||||||
|
|
||||||
// Explanation module scripts
|
|
||||||
var exp_mode = false;
|
|
||||||
|
|
||||||
// Displays explanation popup
|
|
||||||
$(".js_pop").hover(
|
|
||||||
function() {
|
|
||||||
var $this = $(this);
|
|
||||||
|
|
||||||
if($(this).attr("emmet")){
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
$(this).next(".exp_pop").show();
|
|
||||||
}, function() {
|
|
||||||
$(this).next(".exp_pop").hide();
|
|
||||||
}
|
|
||||||
).mousemove(
|
|
||||||
function(ev) {
|
|
||||||
$(this).next(".exp_pop").css({
|
|
||||||
"top": ev.pageY - $(this).next(".exp_pop").outerHeight() - 4,
|
|
||||||
"left": ev.pageX + 8
|
|
||||||
});
|
|
||||||
}
|
|
||||||
);
|
|
||||||
|
|
||||||
// WIP Activates layer with explanation elements
|
|
||||||
// Besser ::after oder ::before benutzen
|
|
||||||
$(".exp_help_btn").click(function(e){
|
|
||||||
var $wrap, $pop;
|
|
||||||
|
|
||||||
if(exp_mode != true){
|
|
||||||
exp_mode = true;
|
|
||||||
|
|
||||||
$(".js_pop").each(function(i, e){
|
|
||||||
if($(this).css("position") == "static") {
|
|
||||||
$(this).addClass("js_changed_pos");
|
|
||||||
$(this).css("position", "relative");
|
|
||||||
}
|
|
||||||
|
|
||||||
$pop = $(this).next(".exp_pop").detach();
|
|
||||||
$wrap = $(this).wrap("<span class=\"exp_wrap\"></span>").parent().prepend("<span class=\"exp_marker_pop\"></span>");
|
|
||||||
$wrap.after($pop);
|
|
||||||
});
|
|
||||||
|
|
||||||
} else {
|
|
||||||
$(".js_pop").each(function(i, e){
|
|
||||||
$wrap = $(this).parent(".exp_wrap");
|
|
||||||
$pop = $wrap.next(".exp_pop").detach();
|
|
||||||
$wrap.find(".exp_marker_pop").remove();
|
|
||||||
$(this).unwrap(".exp_wrap");
|
|
||||||
$(this).after($pop);
|
|
||||||
if($(this).hasClass("js_changed_pos")){
|
|
||||||
$(this).css("position", "");
|
|
||||||
if($(this).attr("style") == "") {
|
|
||||||
$(this).removeAttr("style");
|
|
||||||
}
|
|
||||||
$(this).removeClass("js_changed_pos");
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
exp_mode = false;
|
|
||||||
|
|
||||||
}
|
|
||||||
console.log("Explanation mode: "+ exp_mode);
|
|
||||||
});
|
|
||||||
|
|
||||||
// WIP Scroll to top
|
|
||||||
$('#js_scrolltop').click(function(event) {
|
|
||||||
console.log('scroll to the top');
|
|
||||||
event.preventDefault();
|
|
||||||
// $('body').scrollTop();
|
|
||||||
$('body').animate({scrollTop: 0}, basic_ease, function() {
|
|
||||||
console.log('arrived at top');
|
|
||||||
});
|
|
||||||
});
|
|
||||||
$('#js_scrolldown').click(function(event) {
|
|
||||||
console.log('scroll down');
|
|
||||||
event.preventDefault();
|
|
||||||
$('body').animate({scrollTop: $(document).height()}, basic_ease * 2, function() {
|
|
||||||
console.log('arrived at bottom');
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
$( "#gameIcon" ).click(function(event) {
|
|
||||||
event.preventDefault();
|
|
||||||
$( this ).clone().appendTo( "#gameDetail" );
|
|
||||||
$( this ).siblings().clone().appendTo( "#gameDetail" );
|
|
||||||
$( "#gameDetail" ).removeClass( "magic" );
|
|
||||||
});
|
|
||||||
|
|
||||||
var i = 0;
|
|
||||||
$( ".pass-def dd" ).each(function() {
|
|
||||||
$( this ).find( "li" ).each(function( index ) {
|
|
||||||
if ( 0 == $( this ).children( "ul" ).length ) {
|
|
||||||
//console.log( index + ": " + $( this ).text() );
|
|
||||||
var tempContent = $( this ).html();
|
|
||||||
//$( this ).html( "<span class=\"list-count\"></span>" );
|
|
||||||
$( this ).html( tempContent +"<span class=\"list-count\">"+ i +"</span>" );
|
|
||||||
i++;
|
|
||||||
}
|
|
||||||
})
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// jq-sticky-anything
|
|
||||||
$('#js_demo_fix').stickThis({
|
|
||||||
pushup: '#js_demo_stop'
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
$( document ).scroll(function() {
|
|
||||||
|
|
||||||
// Toggle navigation elements
|
|
||||||
doc_pos_y = $( document ).scrollTop();
|
|
||||||
// console.log(doc_pos_y);
|
|
||||||
var h = scroll_y_margin;
|
|
||||||
// var demo_margin = $('.header__fix');
|
|
||||||
if (doc_pos_y > h) {
|
|
||||||
$('#js_scrolltop').parent().removeClass('magic');
|
|
||||||
} else {
|
|
||||||
$('#js_scrolltop').parent().addClass('magic');
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
});
|
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
@ -179,6 +179,10 @@ div {
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.box__page {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
.box__info {
|
.box__info {
|
||||||
padding: $double_space $basic_indent;
|
padding: $double_space $basic_indent;
|
||||||
border-right: $basic_space solid rgba($echo_color, .6);
|
border-right: $basic_space solid rgba($echo_color, .6);
|
||||||
|
|
@ -241,12 +245,17 @@ div {
|
||||||
background-color: rgba($darkest_color,.1);
|
background-color: rgba($darkest_color,.1);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Data
|
||||||
|
.box__file_tile {
|
||||||
|
@extend .float_left;
|
||||||
|
}
|
||||||
|
|
||||||
// Flex
|
// Flex
|
||||||
.box__column {
|
.box__column {
|
||||||
@extend .flex;
|
@extend .flex;
|
||||||
|
|
||||||
.column {
|
.column {
|
||||||
@extend .flex_child;
|
@extend .flex__child;
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -40,7 +40,7 @@ tfoot {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.table_blank {
|
.table__blank {
|
||||||
border: $basic_border_width solid transparent;
|
border: $basic_border_width solid transparent;
|
||||||
|
|
||||||
th, td {
|
th, td {
|
||||||
|
|
@ -48,11 +48,11 @@ tfoot {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.table_free {
|
.table__free {
|
||||||
border: $basic_border_width solid transparent;
|
border: $basic_border_width solid transparent;
|
||||||
}
|
}
|
||||||
|
|
||||||
.table_stripe {
|
.table__stripe {
|
||||||
td {
|
td {
|
||||||
border-top: 0;
|
border-top: 0;
|
||||||
border-bottom: 0;
|
border-bottom: 0;
|
||||||
|
|
@ -63,7 +63,7 @@ tfoot {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.table_fix {
|
.table__fix {
|
||||||
table-layout: fixed;
|
table-layout: fixed;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -73,3 +73,8 @@ caption {
|
||||||
border: $basic_border_width dotted $basic_border_color;
|
border: $basic_border_width dotted $basic_border_color;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Data
|
||||||
|
.table__file_simple {
|
||||||
|
@extend .width_full;
|
||||||
|
}
|
||||||
|
|
|
||||||
46
example.css
46
example.css
|
|
@ -82,7 +82,7 @@ textarea:not([disabled]):focus {
|
||||||
margin-right: 37.5%;
|
margin-right: 37.5%;
|
||||||
margin-left: 37.5%; }
|
margin-left: 37.5%; }
|
||||||
|
|
||||||
.width_full {
|
.width_full, .table__file_simple {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin-right: 0;
|
margin-right: 0;
|
||||||
margin-left: 0; }
|
margin-left: 0; }
|
||||||
|
|
@ -107,7 +107,7 @@ textarea:not([disabled]):focus {
|
||||||
.clear::before, .clear::after {
|
.clear::before, .clear::after {
|
||||||
clear: both; }
|
clear: both; }
|
||||||
|
|
||||||
.float_left, .list__horizontal li, .box__inline_left, .nav__horizontal ul li, .nav__center_old ul li, .header__page nav ul li {
|
.float_left, .list__horizontal li, .box__inline_left, .box__file_tile, .nav__horizontal ul li, .nav__center_old ul li, .header__page nav ul li {
|
||||||
float: left;
|
float: left;
|
||||||
margin-right: 32px; }
|
margin-right: 32px; }
|
||||||
|
|
||||||
|
|
@ -161,12 +161,26 @@ textarea:not([disabled]):focus {
|
||||||
transition: background-color .2s ease-in-out;
|
transition: background-color .2s ease-in-out;
|
||||||
pointer-events: none; }
|
pointer-events: none; }
|
||||||
|
|
||||||
.flex, .box__column, .nav__column ul {
|
.flex, .flex__wrap, .flex__row, .box__column, .nav__column ul {
|
||||||
display: flex; }
|
display: flex;
|
||||||
|
background-color: rgba(250, 216, 3, 0.1); }
|
||||||
|
|
||||||
.flex_child, .box__column .column, .nav__column ul li {
|
.flex__wrap {
|
||||||
|
flex-wrap: wrap; }
|
||||||
|
|
||||||
|
.flex__row {
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: flex-start; }
|
||||||
|
|
||||||
|
.flex__child, .box__column .column, .nav__column ul li {
|
||||||
flex: 0 1 auto; }
|
flex: 0 1 auto; }
|
||||||
|
|
||||||
|
.flex__child_one {
|
||||||
|
flex: 1; }
|
||||||
|
|
||||||
|
.flex__child_end {
|
||||||
|
align-self: flex-end; }
|
||||||
|
|
||||||
.txt_light_color {
|
.txt_light_color {
|
||||||
color: #666666; }
|
color: #666666; }
|
||||||
|
|
||||||
|
|
@ -503,7 +517,7 @@ img {
|
||||||
vertical-align: top; }
|
vertical-align: top; }
|
||||||
|
|
||||||
table {
|
table {
|
||||||
margin: calc(8px * 2) 0;
|
margin: 16px 0;
|
||||||
border: 1px solid black;
|
border: 1px solid black;
|
||||||
border-collapse: collapse; }
|
border-collapse: collapse; }
|
||||||
|
|
||||||
|
|
@ -530,21 +544,21 @@ tr:last-child td {
|
||||||
tfoot tr:first-child td {
|
tfoot tr:first-child td {
|
||||||
border-top: 1px solid black; }
|
border-top: 1px solid black; }
|
||||||
|
|
||||||
.table_blank {
|
.table__blank {
|
||||||
border: 1px solid transparent; }
|
border: 1px solid transparent; }
|
||||||
.table_blank th, .table_blank td {
|
.table__blank th, .table__blank td {
|
||||||
border: 1px solid transparent; }
|
border: 1px solid transparent; }
|
||||||
|
|
||||||
.table_free {
|
.table__free {
|
||||||
border: 1px solid transparent; }
|
border: 1px solid transparent; }
|
||||||
|
|
||||||
.table_stripe td {
|
.table__stripe td {
|
||||||
border-top: 0;
|
border-top: 0;
|
||||||
border-bottom: 0; }
|
border-bottom: 0; }
|
||||||
.table_stripe tr:nth-child(even) td {
|
.table__stripe tr:nth-child(even) td {
|
||||||
background-color: #cccccc; }
|
background-color: #cccccc; }
|
||||||
|
|
||||||
.table_fix {
|
.table__fix {
|
||||||
table-layout: fixed; }
|
table-layout: fixed; }
|
||||||
|
|
||||||
caption {
|
caption {
|
||||||
|
|
@ -553,7 +567,7 @@ caption {
|
||||||
text-align: center; }
|
text-align: center; }
|
||||||
|
|
||||||
fieldset {
|
fieldset {
|
||||||
margin: calc(8px * 2) 0;
|
margin: 16px 0;
|
||||||
padding: 8px;
|
padding: 8px;
|
||||||
border: 1px solid black; }
|
border: 1px solid black; }
|
||||||
|
|
||||||
|
|
@ -884,7 +898,7 @@ nav li {
|
||||||
-o-transition: height 0.5s ease;
|
-o-transition: height 0.5s ease;
|
||||||
transition: height 0.5s ease; }
|
transition: height 0.5s ease; }
|
||||||
|
|
||||||
.print_body [class^="din"] {
|
.print_body *[class^="din"] {
|
||||||
background-color: white; }
|
background-color: white; }
|
||||||
|
|
||||||
.print_body {
|
.print_body {
|
||||||
|
|
@ -1031,6 +1045,10 @@ nav li {
|
||||||
.demo__credits {
|
.demo__credits {
|
||||||
margin: 32px 0 8px 0; }
|
margin: 32px 0 8px 0; }
|
||||||
|
|
||||||
|
.demo__button_32 {
|
||||||
|
width: 32px;
|
||||||
|
height: 32px; }
|
||||||
|
|
||||||
.test li::after {
|
.test li::after {
|
||||||
content: "";
|
content: "";
|
||||||
display: block;
|
display: block;
|
||||||
|
|
|
||||||
|
|
@ -147,12 +147,32 @@
|
||||||
|
|
||||||
.flex {
|
.flex {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
background-color: rgba($alpha_color, .1);
|
||||||
}
|
}
|
||||||
|
|
||||||
.flex_child {
|
.flex__wrap {
|
||||||
|
@extend .flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flex__row {
|
||||||
|
@extend .flex;
|
||||||
|
flex-direction: column;
|
||||||
|
// align-items: flex-start;
|
||||||
|
justify-content: flex-start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flex__child {
|
||||||
flex: 0 1 auto;
|
flex: 0 1 auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.flex__child_one {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flex__child_end {
|
||||||
|
align-self: flex-end;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
// Colors
|
// Colors
|
||||||
|
|
|
||||||
|
|
@ -5,8 +5,8 @@
|
||||||
// TEXT
|
// TEXT
|
||||||
// ------------------------------------------------------------------------------
|
// ------------------------------------------------------------------------------
|
||||||
|
|
||||||
$basic_size: $default_font_size;
|
$basic_size: 17px !default;
|
||||||
$basic_print_size: $default_print_font_size;
|
$basic_print_size: 10pt !default;
|
||||||
|
|
||||||
$size_1: $basic_size * 4;
|
$size_1: $basic_size * 4;
|
||||||
|
|
||||||
|
|
@ -44,56 +44,63 @@ $basic_line: 1;
|
||||||
// ),
|
// ),
|
||||||
// );
|
// );
|
||||||
|
|
||||||
$head_size_1: 3.1em;
|
$head_size_1: 3.1em !default;
|
||||||
$head_size_2: 2.5em;
|
$head_size_2: 2.5em !default;
|
||||||
$head_size_3: 1.8em;
|
$head_size_3: 1.8em !default;
|
||||||
$head_size_4: 1.35em;
|
$head_size_4: 1.35em !default;
|
||||||
|
|
||||||
$text_size_1: 1em;
|
$text_size_1: 1em;
|
||||||
$text_size_2: 20;
|
$text_size_2: 20;
|
||||||
|
|
||||||
$text_line_1: $default_line_height;
|
$text_line_1: 1.5 !default;
|
||||||
$head_line_1: $text_line_1;
|
$head_line_1: $text_line_1;
|
||||||
$head_line_2: $text_line_1;
|
$head_line_2: $text_line_1;
|
||||||
$head_line_3: $text_line_1;
|
$head_line_3: $text_line_1;
|
||||||
$head_line_4: $text_line_1;
|
$head_line_4: $text_line_1;
|
||||||
|
|
||||||
$print_font_family: #{'Times New Roman', times};
|
$print_font_family: #{'Times New Roman', times} !default;
|
||||||
$monospace_font_family: #{'Courier New', monospace};
|
$monospace_font_family: #{'Courier New', monospace} !default;
|
||||||
|
|
||||||
$primary_font_family: $default_font_family;
|
$primary_font_family: #{'Roboto', 'Segoe UI', 'Liberation Sans', 'Source Sans', 'Trebuchet MS', Helvetica, Arial, sans-serif, sans} !default;
|
||||||
$secondary_font_family: $default_font_family;
|
$secondary_font_family: $primary_font_family !default;
|
||||||
$third_font_family: $monospace_font_family;
|
$third_font_family: $monospace_font_family !default;
|
||||||
$fourth_font_family: $print_font_family;
|
$fourth_font_family: $print_font_family !default;
|
||||||
|
|
||||||
$basic_indent: 2em;
|
$basic_indent: 2em !default;
|
||||||
|
|
||||||
|
|
||||||
// COLORS
|
// COLORS
|
||||||
// ------------------------------------------------------------------------------
|
// ------------------------------------------------------------------------------
|
||||||
|
|
||||||
$color_palette: $default_color_palette;
|
$color_palette: (
|
||||||
|
alpha: #fad803,
|
||||||
|
bravo: #d30a51,
|
||||||
|
charlie: #273f8b,
|
||||||
|
delta: #b7e0f0,
|
||||||
|
echo: #52bed1,
|
||||||
|
foxtrot: #0c85ff
|
||||||
|
) !default;
|
||||||
|
|
||||||
@include addDefaultColors;
|
@include addDefaultColors;
|
||||||
|
|
||||||
$darkest_color: $default_darkest_color;
|
$darkest_color: black !default;
|
||||||
$brightest_color: $default_brightest_color;
|
$brightest_color: white !default;
|
||||||
|
$medium_color: lighten($darkest_color, 50%) !default;
|
||||||
|
$dark_color: lighten($darkest_color, 20%) !default;
|
||||||
|
$bright_color: darken($brightest_color, 20%) !default;
|
||||||
|
|
||||||
$basic_font_color: $default_front_color;
|
$basic_front_color: $darkest_color !default;
|
||||||
$basic_head_color: $default_front_color;
|
$basic_back_color: $medium_color !default;
|
||||||
|
$basic_font_color: $basic_front_color !default;
|
||||||
|
$basic_head_color: $basic_front_color !default;
|
||||||
|
|
||||||
$basic_link_color: $echo_color;
|
$basic_link_color: $echo_color !default;
|
||||||
$basic_highlight_color: $brightest_color;
|
$basic_highlight_color: $brightest_color !default;
|
||||||
$basic_action_color: $foxtrot_color;
|
$basic_action_color: $foxtrot_color !default;
|
||||||
|
|
||||||
$basic_front_color: $default_front_color;
|
|
||||||
$basic_back_color: $default_back_color;
|
|
||||||
|
|
||||||
$dark_color: lighten($darkest_color, 20%);
|
|
||||||
$medium_color: lighten($darkest_color, 50%);
|
|
||||||
$bright_color: darken($brightest_color, 20%);
|
|
||||||
|
|
||||||
$basic_border_color: $default_front_color;
|
$basic_border_color: $basic_front_color !default;
|
||||||
|
|
||||||
// default shadow colors
|
// default shadow colors
|
||||||
// $shadow_color: fade-out($medium_color, .5);
|
// $shadow_color: fade-out($medium_color, .5);
|
||||||
|
|
@ -110,35 +117,35 @@ $basic_color_map: ();
|
||||||
// LAYOUT
|
// LAYOUT
|
||||||
// ------------------------------------------------------------------------------
|
// ------------------------------------------------------------------------------
|
||||||
|
|
||||||
$box_sizing: $default_box_sizing;
|
$box_sizing: border-box !default;
|
||||||
|
|
||||||
$z_heaven: 100;
|
$z_heaven: 100 !default;
|
||||||
$z_top: 10;
|
$z_top: 10 !default;
|
||||||
$z_basic: 1;
|
$z_basic: 1 !default;
|
||||||
$z_earth: -100;
|
$z_earth: -100 !default;
|
||||||
|
|
||||||
$basic_width: 96%;
|
$basic_width: 96% !default;
|
||||||
$width_small: 80%;
|
$width_small: 80% !default;
|
||||||
$width_medium: 60%;
|
$width_medium: 60% !default;
|
||||||
$width_large: 48%;
|
$width_large: 48% !default;
|
||||||
|
|
||||||
$basic_space: $default_space;
|
$basic_space: 8px !default;
|
||||||
$half_space: $basic_space / 2;
|
$tiny_space: 1px !default;
|
||||||
$double_space: $basic_space * 2;
|
$half_space: $basic_space / 2 !default;
|
||||||
|
$double_space: $basic_space * 2 !default;
|
||||||
$space_3: $basic_space * 4;
|
$space_3: $basic_space * 4;
|
||||||
$space_4: $basic_space * 8;
|
$space_4: $basic_space * 8;
|
||||||
$space_5: $basic_space * 16;
|
$space_5: $basic_space * 16;
|
||||||
$tiny_space: 1px !default;
|
|
||||||
|
|
||||||
$basic_margin: $basic_space 0;
|
$basic_margin: $basic_space 0 !default;
|
||||||
$high_margin: calc(#{$basic_space} * 2) 0;
|
$high_margin: $double_space 0 !default;
|
||||||
|
|
||||||
$basic_padding: calc(#{$basic_space} - 3px) $basic_space;
|
$basic_padding: calc(#{$basic_space} - 3px) $basic_space !default;
|
||||||
$wide_padding: calc(#{$basic_space} - 1px) calc(#{$basic_space} * 2);
|
$wide_padding: calc(#{$basic_space} - 1px) calc(#{$basic_space} * 2) !default;
|
||||||
|
|
||||||
$basic_corner: $tiny_space;
|
$basic_corner: $tiny_space;
|
||||||
|
|
||||||
$basic_border_width: $default_border_width;
|
$basic_border_width: $tiny_space !default;
|
||||||
$border_width_4: $tiny_space * 4;
|
$border_width_4: $tiny_space * 4;
|
||||||
$border_width_8: $tiny_space * 8;
|
$border_width_8: $tiny_space * 8;
|
||||||
$basic_border: $tiny_space solid $basic_border_color;
|
$basic_border: $tiny_space solid $basic_border_color;
|
||||||
|
|
|
||||||
|
|
@ -1,32 +0,0 @@
|
||||||
// Main configuration
|
|
||||||
// ------------------------------------------------------------------------------
|
|
||||||
|
|
||||||
$default_font_size: 17px !default;
|
|
||||||
$default_print_font_size: 10pt !default;
|
|
||||||
|
|
||||||
$default_line_height: 1.5 !default;
|
|
||||||
|
|
||||||
$default_font_family: #{'Roboto', 'Segoe UI', 'Liberation Sans', 'Source Sans', 'Trebuchet MS', Helvetica, Arial, sans-serif, sans} !default;
|
|
||||||
|
|
||||||
$default_color_palette: (
|
|
||||||
alpha: #fad803,
|
|
||||||
bravo: #d30a51,
|
|
||||||
charlie: #273f8b,
|
|
||||||
delta: #b7e0f0,
|
|
||||||
echo: #52bed1,
|
|
||||||
foxtrot: #0c85ff
|
|
||||||
) !default;
|
|
||||||
|
|
||||||
$default_darkest_color: black !default;
|
|
||||||
$default_medium_color: lighten($default_darkest_color, 50%);
|
|
||||||
$default_brightest_color: white !default;
|
|
||||||
|
|
||||||
$default_front_color: $default_darkest_color !default;
|
|
||||||
$default_back_color: $default_medium_color !default;
|
|
||||||
|
|
||||||
$default_box_sizing: border-box !default;
|
|
||||||
|
|
||||||
$default_space: 8px !default;
|
|
||||||
$default_tiny_space: 1px !default;
|
|
||||||
|
|
||||||
$default_border_width: $default_tiny_space !default;
|
|
||||||
|
|
@ -91,3 +91,8 @@
|
||||||
.demo__credits {
|
.demo__credits {
|
||||||
margin: $space_3 0 $basic_space 0;
|
margin: $space_3 0 $basic_space 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.demo__button_32 {
|
||||||
|
width: 32px;
|
||||||
|
height: 32px;
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -103,7 +103,7 @@ nav {
|
||||||
margin: 0 $space_5;
|
margin: 0 $space_5;
|
||||||
|
|
||||||
li {
|
li {
|
||||||
@extend .flex_child;
|
@extend .flex__child;
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue