diff --git a/_hippie.scss b/_hippie.scss index ad01369..d265a47 100644 --- a/_hippie.scss +++ b/_hippie.scss @@ -47,8 +47,8 @@ // Adjustments can be made by copying values from _config.scss to _override.scss // Be careful though changes will get lost if hippie gets updated // ----------------------------------------------------------------------------- -@import "global/default"; // DO NOT EDIT -@import "override"; // EDIT +// @import "global/default"; // DO NOT EDIT +@import "settings"; // EDIT @import "global/config"; // DO NOT EDIT diff --git a/_override.scss b/_settings.scss similarity index 79% rename from _override.scss rename to _settings.scss index e4b3c48..6239a8e 100644 --- a/_override.scss +++ b/_settings.scss @@ -1,4 +1,4 @@ // Override for configuration file // ------------------------------------------------------------------------------ -// $default_font_size: 10px; +// $basic_link_color: magenta; diff --git a/code/global.js b/code/global.js new file mode 100644 index 0000000..4275707 --- /dev/null +++ b/code/global.js @@ -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("").parent().prepend(""); + $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( "" ); + $( this ).html( tempContent +""+ i +"" ); + 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'); + } + + + +}); diff --git a/demo-explorer.html b/demo-explorer.html new file mode 100644 index 0000000..5b1f6bd --- /dev/null +++ b/demo-explorer.html @@ -0,0 +1,156 @@ + + + + + + HIPPIE Explorer Demo + + + + + + + + + + + + + +
+
+ + + + + + +
+
+
+ + + +
+
+ +
+
+
+
+

Dateiname 1

+

Auszeichnung 1

+
+
+
+
+
+

Dateiname 2

+

Auszeichnung 2

+
+
+
+
+
+

Dateiname 3

+

Auszeichnung 3

+
+
+
+
+
+

Dateiname 4

+

Auszeichnung 4

+
+
+
+
+ + + + + + + + + + + +
Objektname 1Objektpfad 1
Objektname 2Objektpfad 2
+
+
+

Status

+
+
+
+
+ + + + + + + + + diff --git a/example.html b/demo-index.html similarity index 87% rename from example.html rename to demo-index.html index 774cc7a..54b8767 100644 --- a/example.html +++ b/demo-index.html @@ -3,7 +3,7 @@ - Dummy + HIPPIE Dummy @@ -186,7 +186,7 @@
table>tbody>tr>td*2^tr>td[colspan=2]
- +
@@ -197,10 +197,10 @@
Mit
-
table.table_blank>tbody>tr>td*2^tr>td[colspan=2]
+
table.table__blank>tbody>tr>td*2^tr>td[colspan=2]

Die nächste Tabelle verwendet alle zur Auszeichnung verfügbaren Elemente und hat eine starre Zellverteilung:

- +
@@ -239,7 +239,7 @@
Beschreibung bzw. Zusammenhang der Tabelle
-
table.width_full.table_fix>caption+thead>tr>th*3^^tfoot>tr>td*3^^tbody>(tr>td*3)*3
+
table.width_full.table__fix>caption+thead>tr>th*3^^tfoot>tr>td*3^^tbody>(tr>td*3)*3

Viele weitere Formate sind möglich ...

@@ -273,7 +273,7 @@
table.width_full>thead>tr>th.precol+th[colspan=2]^^tbody>tr>td.precol+td*2^tr>td.precol+td[colspan=2]
- +
@@ -304,7 +304,7 @@
Kopfzeile
- +
@@ -522,11 +522,11 @@ nav.nav__center_old>ul>(li>a.a__button{Typ $})*4
-
-
-
-
-
+
+
+
+
+
@@ -606,153 +606,11 @@ nav.nav__center_old>ul>(li>a.a__button{Typ $})*4 + diff --git a/elements/_grouping.scss b/elements/_grouping.scss index ffe4600..a8804ca 100644 --- a/elements/_grouping.scss +++ b/elements/_grouping.scss @@ -179,6 +179,10 @@ div { } +.box__page { + +} + .box__info { padding: $double_space $basic_indent; border-right: $basic_space solid rgba($echo_color, .6); @@ -241,12 +245,17 @@ div { background-color: rgba($darkest_color,.1); } +// Data +.box__file_tile { + @extend .float_left; +} + // Flex .box__column { @extend .flex; .column { - @extend .flex_child; + @extend .flex__child; flex-grow: 1; } } diff --git a/elements/_tables.scss b/elements/_tables.scss index 475651b..0560976 100644 --- a/elements/_tables.scss +++ b/elements/_tables.scss @@ -40,7 +40,7 @@ tfoot { } } -.table_blank { +.table__blank { border: $basic_border_width solid transparent; th, td { @@ -48,11 +48,11 @@ tfoot { } } -.table_free { +.table__free { border: $basic_border_width solid transparent; } -.table_stripe { +.table__stripe { td { border-top: 0; border-bottom: 0; @@ -63,7 +63,7 @@ tfoot { } } -.table_fix { +.table__fix { table-layout: fixed; } @@ -73,3 +73,8 @@ caption { border: $basic_border_width dotted $basic_border_color; text-align: center; } + +// Data +.table__file_simple { + @extend .width_full; +} diff --git a/example.css b/example.css index bcc292e..7526255 100644 --- a/example.css +++ b/example.css @@ -82,7 +82,7 @@ textarea:not([disabled]):focus { margin-right: 37.5%; margin-left: 37.5%; } -.width_full { +.width_full, .table__file_simple { width: 100%; margin-right: 0; margin-left: 0; } @@ -107,7 +107,7 @@ textarea:not([disabled]):focus { .clear::before, .clear::after { 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; margin-right: 32px; } @@ -161,12 +161,26 @@ textarea:not([disabled]):focus { transition: background-color .2s ease-in-out; pointer-events: none; } -.flex, .box__column, .nav__column ul { - display: flex; } +.flex, .flex__wrap, .flex__row, .box__column, .nav__column ul { + 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__child_one { + flex: 1; } + +.flex__child_end { + align-self: flex-end; } + .txt_light_color { color: #666666; } @@ -503,7 +517,7 @@ img { vertical-align: top; } table { - margin: calc(8px * 2) 0; + margin: 16px 0; border: 1px solid black; border-collapse: collapse; } @@ -530,21 +544,21 @@ tr:last-child td { tfoot tr:first-child td { border-top: 1px solid black; } -.table_blank { +.table__blank { border: 1px solid transparent; } - .table_blank th, .table_blank td { + .table__blank th, .table__blank td { border: 1px solid transparent; } -.table_free { +.table__free { border: 1px solid transparent; } -.table_stripe td { +.table__stripe td { border-top: 0; border-bottom: 0; } -.table_stripe tr:nth-child(even) td { +.table__stripe tr:nth-child(even) td { background-color: #cccccc; } -.table_fix { +.table__fix { table-layout: fixed; } caption { @@ -553,7 +567,7 @@ caption { text-align: center; } fieldset { - margin: calc(8px * 2) 0; + margin: 16px 0; padding: 8px; border: 1px solid black; } @@ -884,7 +898,7 @@ nav li { -o-transition: height 0.5s ease; transition: height 0.5s ease; } -.print_body [class^="din"] { +.print_body *[class^="din"] { background-color: white; } .print_body { @@ -1031,6 +1045,10 @@ nav li { .demo__credits { margin: 32px 0 8px 0; } +.demo__button_32 { + width: 32px; + height: 32px; } + .test li::after { content: ""; display: block; diff --git a/global/_common.scss b/global/_common.scss index 439585c..44a218c 100644 --- a/global/_common.scss +++ b/global/_common.scss @@ -147,12 +147,32 @@ .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__child_one { + flex: 1; +} + +.flex__child_end { + align-self: flex-end; +} // Colors diff --git a/global/_config.scss b/global/_config.scss index 49f09bd..975005f 100644 --- a/global/_config.scss +++ b/global/_config.scss @@ -5,8 +5,8 @@ // TEXT // ------------------------------------------------------------------------------ -$basic_size: $default_font_size; -$basic_print_size: $default_print_font_size; +$basic_size: 17px !default; +$basic_print_size: 10pt !default; $size_1: $basic_size * 4; @@ -44,56 +44,63 @@ $basic_line: 1; // ), // ); -$head_size_1: 3.1em; -$head_size_2: 2.5em; -$head_size_3: 1.8em; -$head_size_4: 1.35em; +$head_size_1: 3.1em !default; +$head_size_2: 2.5em !default; +$head_size_3: 1.8em !default; +$head_size_4: 1.35em !default; $text_size_1: 1em; $text_size_2: 20; -$text_line_1: $default_line_height; +$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; -$print_font_family: #{'Times New Roman', times}; -$monospace_font_family: #{'Courier New', monospace}; +$print_font_family: #{'Times New Roman', times} !default; +$monospace_font_family: #{'Courier New', monospace} !default; -$primary_font_family: $default_font_family; -$secondary_font_family: $default_font_family; -$third_font_family: $monospace_font_family; -$fourth_font_family: $print_font_family; +$primary_font_family: #{'Roboto', 'Segoe UI', 'Liberation Sans', 'Source Sans', 'Trebuchet MS', Helvetica, Arial, sans-serif, sans} !default; +$secondary_font_family: $primary_font_family !default; +$third_font_family: $monospace_font_family !default; +$fourth_font_family: $print_font_family !default; -$basic_indent: 2em; +$basic_indent: 2em !default; // COLORS // ------------------------------------------------------------------------------ -$color_palette: $default_color_palette; +$color_palette: ( + alpha: #fad803, + bravo: #d30a51, + charlie: #273f8b, + delta: #b7e0f0, + echo: #52bed1, + foxtrot: #0c85ff +) !default; @include addDefaultColors; -$darkest_color: $default_darkest_color; -$brightest_color: $default_brightest_color; +$darkest_color: black !default; +$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_head_color: $default_front_color; +$basic_front_color: $darkest_color !default; +$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_highlight_color: $brightest_color; -$basic_action_color: $foxtrot_color; +$basic_link_color: $echo_color !default; +$basic_highlight_color: $brightest_color !default; +$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 // $shadow_color: fade-out($medium_color, .5); @@ -110,35 +117,35 @@ $basic_color_map: (); // LAYOUT // ------------------------------------------------------------------------------ -$box_sizing: $default_box_sizing; +$box_sizing: border-box !default; -$z_heaven: 100; -$z_top: 10; -$z_basic: 1; -$z_earth: -100; +$z_heaven: 100 !default; +$z_top: 10 !default; +$z_basic: 1 !default; +$z_earth: -100 !default; -$basic_width: 96%; -$width_small: 80%; -$width_medium: 60%; -$width_large: 48%; +$basic_width: 96% !default; +$width_small: 80% !default; +$width_medium: 60% !default; +$width_large: 48% !default; -$basic_space: $default_space; -$half_space: $basic_space / 2; -$double_space: $basic_space * 2; +$basic_space: 8px !default; +$tiny_space: 1px !default; +$half_space: $basic_space / 2 !default; +$double_space: $basic_space * 2 !default; $space_3: $basic_space * 4; $space_4: $basic_space * 8; $space_5: $basic_space * 16; -$tiny_space: 1px !default; -$basic_margin: $basic_space 0; -$high_margin: calc(#{$basic_space} * 2) 0; +$basic_margin: $basic_space 0 !default; +$high_margin: $double_space 0 !default; -$basic_padding: calc(#{$basic_space} - 3px) $basic_space; -$wide_padding: calc(#{$basic_space} - 1px) calc(#{$basic_space} * 2); +$basic_padding: calc(#{$basic_space} - 3px) $basic_space !default; +$wide_padding: calc(#{$basic_space} - 1px) calc(#{$basic_space} * 2) !default; $basic_corner: $tiny_space; -$basic_border_width: $default_border_width; +$basic_border_width: $tiny_space !default; $border_width_4: $tiny_space * 4; $border_width_8: $tiny_space * 8; $basic_border: $tiny_space solid $basic_border_color; diff --git a/global/_default.scss b/global/_default.scss deleted file mode 100644 index 23644dd..0000000 --- a/global/_default.scss +++ /dev/null @@ -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; diff --git a/modules/demo/_demo_module.scss b/modules/demo/_demo_module.scss index 7ef6617..182a3f3 100644 --- a/modules/demo/_demo_module.scss +++ b/modules/demo/_demo_module.scss @@ -91,3 +91,8 @@ .demo__credits { margin: $space_3 0 $basic_space 0; } + +.demo__button_32 { + width: 32px; + height: 32px; +} diff --git a/modules/navigation/_nav_module.scss b/modules/navigation/_nav_module.scss index 5d8267d..1236da5 100644 --- a/modules/navigation/_nav_module.scss +++ b/modules/navigation/_nav_module.scss @@ -103,7 +103,7 @@ nav { margin: 0 $space_5; li { - @extend .flex_child; + @extend .flex__child; flex-grow: 1; margin: 0; text-align: center;
Beschreibung bzw. Zusammenhang der Tabelle