New content
Renamed many variables New modules for special elements Added demo content
This commit is contained in:
Stephan Hagedorn
parent
933806cb72
commit
9b2f7260ad
19 changed files with 1010 additions and 1081 deletions
472
example.html
472
example.html
|
|
@ -14,13 +14,23 @@
|
|||
<link rel="stylesheet" type="text/css" media="all" href="./example.css"/>
|
||||
</head>
|
||||
|
||||
<body class="hover_back_change">
|
||||
<body>
|
||||
<div id="js_tph" class="trigger__hover"></div>
|
||||
|
||||
<div class="layer">
|
||||
<div class="exp_overlay_btn exp_help_btn"><span class="span__solo">?</span></div>
|
||||
<div class="temp__layer">
|
||||
<!-- <div class="exp_overlay_btn exp_help_btn">
|
||||
<span class="span__solo">?</span>
|
||||
</div> -->
|
||||
<nav class="nav__page_meta">
|
||||
<ul>
|
||||
<li class="magic"><a href="#begin" id="js_scrolltop" class="a_button_meta"><img src="./art/up.png" alt="" width="32" height="64"></a></li>
|
||||
<li><a href="#end" id="js_scrolldown" class="a_button_meta"><img src="./art/down.png" alt="" width="32" height="32"></a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<div class="box__screen">
|
||||
|
||||
<div id="begin" class="demo__intro">
|
||||
Dies ist einfach nur Text.<br/>Weniger wäre Nichts, denn dieser Text ist nicht durch ein spezifisches Element umschlossen.
|
||||
<p>Es wirken nur die Eigenschaften des <code><body></code> Elements. Dieses Element umschließt den gesamten Inhalt des Dokumentes und kommt daher nur einmal vor. Inhalte sind normalerweise durch Elemente definiert. Grundlegende Elemente teilen das Dokument zunächst in Abschnitte.</p>
|
||||
<h1>Bereiche</h1>
|
||||
|
|
@ -375,166 +385,338 @@
|
|||
</header>
|
||||
<article>
|
||||
<p>Dies war eine Übersicht der grundlegenden Elemente. Nun folgen weitere Elemente mit besonderen Formatierungen.</p>
|
||||
<hr class="hr__dotted"/>
|
||||
</article>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<header>
|
||||
<h1>Einzelene Elemente</h1>
|
||||
</header>
|
||||
<article>
|
||||
<h2>Tabellen</h2>
|
||||
<table class="table-link_list js_pop">
|
||||
<thead>
|
||||
<tr>
|
||||
<th> </th>
|
||||
<th>Ab / Zy</th>
|
||||
<th> Neu / Alt</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="cell_icon" rowspan="2"><img src="" alt="" width="16" height="16"></td>
|
||||
<td class="cell_link"><a href="" class="link_text" target="_blank">Name</a><a href="" class="link_url" target="_blank">URL</a></td>
|
||||
<td class="cell_date" rowspan="2">YYYY-MM-DD</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="cell_text">
|
||||
<div class="shorten">Beschreibung</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="cell_icon" rowspan="2"><img src="" alt="" width="16" height="16"></td>
|
||||
<td class="cell_link"><a href="" class="link_text" target="_blank">Name</a><a href="" class="link_url" target="_blank">URL</a></td>
|
||||
<td class="cell_date" rowspan="2">YYYY-MM-DD</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="cell_text">
|
||||
<div class="shorten">Beschreibung</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="exp_pop"><code class="code__solo">table.table-link_list>thead>tr>th*3^^(tbody>tr>td.cell_icon[rowspan=2]>img[width=16 height=16]^+td.cell_link>a.link_text[target=_blank]+a.link_url[target=_blank]^+td.cell_date[rowspan=2]{YYYY-MM-DD}^tr>td.cell_text>div.shorten)*2</code></div>
|
||||
|
||||
|
||||
</article>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
<script
|
||||
src="https://code.jquery.com/jquery-3.1.1.min.js"
|
||||
integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
|
||||
crossorigin="anonymous"></script>
|
||||
<script type="text/javascript">
|
||||
var w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0)
|
||||
var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0)
|
||||
|
||||
<section class="sec__main_center">
|
||||
<header>
|
||||
<h1>HIPPIE Erklärung</h1>
|
||||
<p>Aufbau, Standardwerte</p>
|
||||
</header>
|
||||
<article>
|
||||
<p>&ellip;</p>
|
||||
</article>
|
||||
</section>
|
||||
|
||||
<section class="sec__main_center">
|
||||
<header>
|
||||
<h1>Einzelene Elemente</h1>
|
||||
</header>
|
||||
<article>
|
||||
<h2>Bereiche</h2>
|
||||
<pre class="pre__code"><code>h3.txt_light_color+p</code></pre>
|
||||
<h3 class="txt_light_color">Helle Überschrift</h3>
|
||||
<p>Mit normalem Textabsatz</p>
|
||||
<pre class="pre__code"><code>a>h4</code></pre>
|
||||
<a href="">
|
||||
<h4>Überschrift als Block-Verweis</h4>
|
||||
</a>
|
||||
<pre class="pre__code"><code>section>div.box__inline_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>
|
||||
<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>
|
||||
<div class="box__main_indent">
|
||||
<hr/>
|
||||
<p>Eingerückter Inhalt</p>
|
||||
<hr/>
|
||||
</div>
|
||||
<pre class="pre__code"><code>nav>ul>(li>a.a__button{Punkt $})*4
|
||||
nav>ul>(li>a.a__button_border{Stufe $})*4</code></pre>
|
||||
<div class="overflow">
|
||||
<nav class="float_left">
|
||||
<ul>
|
||||
<li><a href="" class="a__button">Punkt 1</a></li>
|
||||
<li><a href="" class="a__button">Punkt 2</a></li>
|
||||
<li><a href="" class="a__button">Punkt 3</a></li>
|
||||
<li><a href="" class="a__button">Punkt 4</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="" class="a__button_border">Stufe 1</a></li>
|
||||
<li><a href="" class="a__button_border">Stufe 2</a></li>
|
||||
<li><a href="" class="a__button_border">Stufe 3</a></li>
|
||||
<li><a href="" class="a__button_border">Stufe 4</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
<pre class="pre__code"><code>nav.nav__horizontal>ul>(li>a.a__button{Abschnitt $})*4
|
||||
nav.nav__center_old>ul>(li>a.a__button{Typ $})*4</code></pre>
|
||||
<nav class="nav__horizontal">
|
||||
<ul>
|
||||
<li><a href="" class="a__button">Abschnitt 1</a></li>
|
||||
<li><a href="" class="a__button">Abschnitt 2</a></li>
|
||||
<li><a href="" class="a__button">Abschnitt 3</a></li>
|
||||
<li><a href="" class="a__button">Abschnitt 4</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<div class="overflow">
|
||||
<nav class="nav__center_old">
|
||||
<ul>
|
||||
<li><a href="" class="a__button">Typ 1</a></li>
|
||||
<li><a href="" class="a__button">Typ 2</a></li>
|
||||
<li><a href="" class="a__button">Typ 3</a></li>
|
||||
<li><a href="" class="a__button">Typ 4</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
<pre class="pre__code x_long"><code>header.header__page>h1+p+nav.nav__separate_right>ul>(li>a.a__button{Nav $})*4^+nav.nav__right>ul>(li>a.a__button{Nav $})*4</code></pre>
|
||||
<header class="header__page demo__header header__fancy">
|
||||
<h1>Fancy Pants</h1>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis nec consectetur diam. Sed nisl odio, volutpat nec nisi sit amet, commodo faucibus est. Donec lacinia vestibulum sapien. Morbi porttitor nibh quis imperdiet scelerisque. Praesent rutrum quam eu sodales luctus.</p>
|
||||
<nav class="nav__separate_right">
|
||||
<ul>
|
||||
<li><a href="" class="a__button">Mensch</a></li>
|
||||
<li><a href="" class="a__button">Pflanze</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<nav class="nav__right">
|
||||
<ul>
|
||||
<li><a href="" class="a__button">Blau</a></li>
|
||||
<li><a href="" class="a__button">Gelb</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<pre class="pre__code"><code>header.header__page>nav.nav__right>ul>(li>a.a__button{Nav $})*4</code></pre>
|
||||
<div class="box__space height_basic">
|
||||
<header id="js_demo_fix" class="header__page demo__header header__fix">
|
||||
<nav class="nav__right">
|
||||
<ul>
|
||||
<li><a href="" class="a__button">One</a></li>
|
||||
<li><a href="" class="a__button">Two</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<footer class="pos_abs pos_bottom demo__footer"></footer>
|
||||
</div>
|
||||
<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>
|
||||
|
||||
<h2>Gruppierung</h2>
|
||||
<pre class="pre__code"><code>ul.list__link>(li>a>img)*2+li>a</code></pre>
|
||||
<ul class="list__link">
|
||||
<li><a href=""><img src="./art/letter.gif" alt="">name@domain.tld</a></li>
|
||||
<li><a href=""><img src="./art/bullet.gif" alt="">Work</a></li>
|
||||
<li><a href="">Projects</a></li>
|
||||
</ul>
|
||||
|
||||
<h2>Tabellen</h2>
|
||||
<pre class="pre__code x_long"><code>table.table__link>thead>tr>th{&nbsp;}+th{Ab / Zy}+th{Neu / Alt}^^(tbody>tr>td.cell__icon[rowspan="2"]>img[width=16 height=16]^+td.cell__link>a[target=_blank]{Name}+a[target=_blank]{URL}^+td.cell__date[rowspan="2"]{YYY-MM-DD}^tr>td.cell__text>div.shorten{Beschreibung})*2</code></pre>
|
||||
<table class="table__link js_pop">
|
||||
<thead>
|
||||
<tr>
|
||||
<th> </th>
|
||||
<th>Ab / Zy</th>
|
||||
<th>Neu / Alt</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="cell__icon" rowspan="2"><img src="" alt="" width="16" height="16"></td>
|
||||
<td class="cell__link"><a href="" target="_blank">Name</a><a href="" target="_blank">URL</a></td>
|
||||
<td class="cell__date" rowspan="2">YYYY-MM-DD</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="cell__text">
|
||||
<div class="shorten">Beschreibung</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="cell__icon" rowspan="2"><img src="" alt="" width="16" height="16"></td>
|
||||
<td class="cell__link"><a href="" target="_blank">Name</a><a href="" target="_blank">URL</a></td>
|
||||
<td class="cell__date" rowspan="2">YYYY-MM-DD</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="cell__text">
|
||||
<div class="shorten">Beschreibung</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<h2>Eingebettet</h2>
|
||||
<div class="box__full_width demo__flag">
|
||||
<svg version="1.1" id="vector" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100%" height="100%" viewBox="0 0 1920 1200" preserveAspectRatio="xMinYMax slice" alt="Background flag">
|
||||
<rect id="triangle-5" y="0" fill="#273F8B" width="1920" height="1200"></rect>
|
||||
<polygon id="triangle-6" fill="#8E1F68" points="0,1200 1920,458.25 1920,1200 "></polygon>
|
||||
<polygon id="triangle-7" fill="#D30A51" points="0,1200 1920,522.75 1920,1200 "></polygon>
|
||||
<polygon id="triangle-8" fill="#F2AF13" points="0,1200 1920,741.75 1920,1200 "></polygon>
|
||||
<polygon id="triangle-9" fill="#FAD803" points="0,1200 1920,787.5 1920,1200 "></polygon>
|
||||
<polygon id="triangle-4" fill="#3C579A" points="0,1200 0,0 733.5,0 "></polygon>
|
||||
<polygon id="triangle-3" fill="#B7E0F0" points="0,1200 0,0 688.5,0 "></polygon>
|
||||
<polygon id="triangle-2" fill="#6BC7D9" points="0,1200 0,0 453,0 "></polygon>
|
||||
<polygon id="triangle-1" fill="#52BED1" points="0,1200 0,0 370.5,0 "></polygon>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
|
||||
</article>
|
||||
</section>
|
||||
<div id="end"></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 type="text/javascript">
|
||||
$( document ).ready(function() {
|
||||
|
||||
// Setup
|
||||
// ------------------------------------------------------------------------------
|
||||
|
||||
// Modules
|
||||
// ------------------------------------------------------------------------------
|
||||
setup();
|
||||
|
||||
// Explanation module scripts
|
||||
var exp_mode = false;
|
||||
|
||||
// Displays explanation popup
|
||||
$(".js_pop").hover(
|
||||
function() {
|
||||
var $this = $(this);
|
||||
|
||||
if($(this).attr("emmet")){
|
||||
// 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");
|
||||
}
|
||||
|
||||
$(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
|
||||
});
|
||||
}
|
||||
);
|
||||
$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);
|
||||
});
|
||||
|
||||
// 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");
|
||||
} 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");
|
||||
}
|
||||
|
||||
$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);
|
||||
});
|
||||
|
||||
|
||||
|
||||
$( "#gameIcon" ).click(function(event) {
|
||||
event.preventDefault();
|
||||
$( this ).clone().appendTo( "#gameDetail" );
|
||||
$( this ).siblings().clone().appendTo( "#gameDetail" );
|
||||
$( "#gameDetail" ).removeClass( "magic" );
|
||||
});
|
||||
/*$( "#gameIcon" ).click(function(event) {
|
||||
event.preventDefault();
|
||||
var clone = $( this ).parent().clone();
|
||||
clone.removeClass().addClass( "detailBoxBox" );
|
||||
clone.prependTo( ".gridContainer" );
|
||||
});*/
|
||||
|
||||
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++;
|
||||
$(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_fix + .demo__footer'
|
||||
});
|
||||
|
||||
|
||||
|
||||
});
|
||||
|
||||
|
||||
|
||||
$( 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>
|
||||
</body>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue