New es6 coding standard
* Added babel presets to setup standards * set jshint to es6 * reworked javascript and cerated first two modules
This commit is contained in:
Stephan
parent
3d4eef5eb0
commit
371cb450f8
16 changed files with 1668 additions and 829 deletions
|
|
@ -1,50 +1,62 @@
|
|||
// This is called everytime
|
||||
function setup () {
|
||||
'use strict';
|
||||
|
||||
console.info('\n', hippie.brand, '\n\n');
|
||||
if (debugOn) {
|
||||
console.log('Debug information:\n', 'HTML:', hippie.screen, 'BODY:', hippie.body);
|
||||
console.info('Debug information:\n', 'HTML:', hippie.screen, 'BODY:', hippie.body);
|
||||
}
|
||||
if ($('#js_tph').length && viewHover) {
|
||||
// $('body').prepend("<div id=\"js_tph\" class=\"layer__hover hover_full_view_change\"></div>");
|
||||
$('#js_tph').addClass("hover_full_view_change");
|
||||
|
||||
// WANNABE MODULE Mouse over effect
|
||||
// With CSS only
|
||||
if ($('#js_mob').length && viewHover) {
|
||||
$('#js_mob').addClass('mouse_over');
|
||||
}
|
||||
// if (viewHover) {
|
||||
// $('body').prepend('<div id="js_mob" class="mouse_over"></div>');
|
||||
// }
|
||||
// With JS
|
||||
}
|
||||
|
||||
// MODULE Scroll navigation
|
||||
function HippieScroll ($el) {
|
||||
// Using constructor function
|
||||
function HippieScroll ($tp, $dn) {
|
||||
'use strict';
|
||||
// this.$el = $el;
|
||||
// console.log('Elements:', $el, this.$el);
|
||||
|
||||
// Toggle display on scroll position
|
||||
// console.log('Scroll object added');
|
||||
// this.$tp = $tp;
|
||||
// Define initial situation
|
||||
let initLeft = false;
|
||||
const initY = hippie.screen.vh;
|
||||
|
||||
$tp.addClass('hide');
|
||||
|
||||
// Check scroll position and toggle element
|
||||
this.check = function () {
|
||||
// console.log('Scroll position checked');
|
||||
hippie.screen.y = Math.min($(document).scrollTop(), document.documentElement.scrollTop);
|
||||
if (hippie.screen.y > initY) {
|
||||
if (!initLeft) {
|
||||
$el.parent().removeClass('magic');
|
||||
$tp.removeClass('hide');
|
||||
console.info('Initial viewport left');
|
||||
}
|
||||
initLeft = true;
|
||||
} else {
|
||||
if (initLeft) {
|
||||
$el.parent().addClass('magic');
|
||||
$tp.addClass('hide');
|
||||
console.info('Initial viewport entered');
|
||||
}
|
||||
initLeft = false;
|
||||
}
|
||||
};
|
||||
|
||||
// Add events to navigation elements
|
||||
$('.js_scrolltop').click(function (event) {
|
||||
$tp.click(function (event) {
|
||||
event.preventDefault();
|
||||
$('html, body').animate({
|
||||
$('html, body').stop().animate({
|
||||
scrollTop: 0
|
||||
}, basicEase);
|
||||
// console.log('Scrolled to top');
|
||||
});
|
||||
$('.js_scrolldown').click(function (event) {
|
||||
$dn.click(function (event) {
|
||||
event.preventDefault();
|
||||
var pos = Math.max(hippie.screen.dh, hippie.body.h) - hippie.screen.vh;
|
||||
$('html').scrollTop(pos);
|
||||
|
|
@ -53,6 +65,82 @@ function HippieScroll ($el) {
|
|||
});
|
||||
}
|
||||
|
||||
// MODULE Meta elements
|
||||
function HippieMeta ($ma, $pp) {
|
||||
'use strict';
|
||||
|
||||
let metaOn = false;
|
||||
|
||||
$ma.click(function () {
|
||||
var $wrap, $pop;
|
||||
|
||||
// if (metaOn !== true) {
|
||||
if (!metaOn) {
|
||||
metaOn = true;
|
||||
|
||||
$pp.each(function () {
|
||||
// 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_overlay"></span>').prepend('<span class="exp_marker_pop"></span>');
|
||||
// $wrap.after($pop);
|
||||
|
||||
$('<div></div>').addClass('exp_overlay').css({
|
||||
position: 'absolute',
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
top: 0,
|
||||
left: 0
|
||||
}).appendTo($(this).addClass('exp_wrap'));
|
||||
|
||||
// Displays explanation popup following the mouse
|
||||
$(this).on({
|
||||
mouseenter: function () {
|
||||
// if ($(this).attr('emmet')) {
|
||||
//
|
||||
// }
|
||||
$(this).next('.exp_pop').show();
|
||||
},
|
||||
mouseleave: function () {
|
||||
$(this).next('.exp_pop').hide();
|
||||
},
|
||||
mousemove: function (event) {
|
||||
$(this).next('.exp_pop').css({
|
||||
'top': event.pageY - $(this).next('.exp_pop').outerHeight() - 4,
|
||||
'left': event.pageX + 8
|
||||
// 'left': event.pageX - $(this).offset().left + 8
|
||||
});
|
||||
}
|
||||
})
|
||||
});
|
||||
|
||||
} else {
|
||||
$pp.each(function () {
|
||||
$(this).off('mouseenter mouseleave mousemove');
|
||||
|
||||
$(this).removeClass('exp_wrap').find('.exp_overlay').remove();
|
||||
// $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');
|
||||
// }
|
||||
});
|
||||
|
||||
metaOn = false;
|
||||
}
|
||||
console.log('Explanation mode', metaOn);
|
||||
});
|
||||
}
|
||||
|
||||
// get document coordinates of the element
|
||||
// function getCoords (elem) {
|
||||
// let box = elem.getBoundingClientRect();
|
||||
|
|
@ -83,22 +171,3 @@ function HippieScroll ($el) {
|
|||
// };
|
||||
//
|
||||
// var Utils = new Utils();
|
||||
|
||||
// TEST
|
||||
|
||||
function scrollNav () {
|
||||
'use strict';
|
||||
$('.nav a').click(function () {
|
||||
//Toggle Class
|
||||
$(".active").removeClass("active");
|
||||
$(this).closest('li').addClass("active");
|
||||
var theClass = $(this).attr("class");
|
||||
$('.'+theClass).parent('li').addClass('active');
|
||||
//Animate
|
||||
$('html, body').stop().animate({
|
||||
scrollTop: $( $(this).attr('href') ).offset().top - 160
|
||||
}, 400);
|
||||
return false;
|
||||
});
|
||||
$('.scrollTop a').scrollTop();
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,80 +8,4 @@ $(document).ready(function () {
|
|||
'use strict';
|
||||
|
||||
// logPerf('DOM ready.');
|
||||
|
||||
// Modules
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
// Explanation module scripts
|
||||
var expMode = false;
|
||||
|
||||
// Displays explanation popup
|
||||
$('.js_pop').hover(
|
||||
function () {
|
||||
// if ($(this).attr('emmet')) {
|
||||
//
|
||||
// }
|
||||
$(this).next('.exp_pop').show();
|
||||
}, function () {
|
||||
$(this).next('.exp_pop').hide();
|
||||
}
|
||||
).mousemove(
|
||||
function (event) {
|
||||
$(this).next('.exp_pop').css({
|
||||
'top': event.pageY - $(this).next('.exp_pop').outerHeight() - 4,
|
||||
'left': event.pageX + 8
|
||||
// 'left': event.pageX - $(this).offset().left + 8
|
||||
});
|
||||
// TODO - needs more love
|
||||
// console.log(event.pageX);
|
||||
}
|
||||
);
|
||||
|
||||
// WIP Activates layer with explanation elements
|
||||
// Besser ::after oder ::before benutzen
|
||||
$('.js_showmeta').click(function (e) {
|
||||
var $wrap, $pop;
|
||||
|
||||
if (expMode !== true) {
|
||||
expMode = 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');
|
||||
}
|
||||
});
|
||||
|
||||
expMode = false;
|
||||
|
||||
}
|
||||
console.log('Explanation mode', expMode);
|
||||
});
|
||||
|
||||
$('#gameIcon').click(function (event) {
|
||||
event.preventDefault();
|
||||
$(this).clone().appendTo('#gameDetail');
|
||||
$(this).siblings().clone().appendTo('#gameDetail');
|
||||
$('#gameDetail').removeClass('magic');
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -13,9 +13,6 @@ var hippie = {
|
|||
}
|
||||
};
|
||||
|
||||
var initLeft = false;
|
||||
var initY = hippie.screen.vh;
|
||||
|
||||
var viewHover = true;
|
||||
var basicEase = 600;
|
||||
|
||||
|
|
|
|||
|
|
@ -229,7 +229,7 @@
|
|||
<h1 id="embedded">Eingebundene Inhalte</h1>
|
||||
{# // picture // source // img // iframe // embed // object // param // video // audio // track // map // area #}
|
||||
<img src="data:image/gif;base64,R0lGODlhgABQAIQAMf/MAP+ZM/+ZAP9mM8zM/8xmM8wzM8wAZpnM/5nMzJmZzJkzZpkAZmbMzGaZzGZmmWYzZjNmmTMzmQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACwAAAAAgABQAAQF/mDjiORolug5NiKSEG8Mz68SSbek73zv/8CgcEhkGY/IpBLRcBEQM+hL+nRIHrscLsvVab/drTcMHpvF6DIuxVaxj7I4DZZAE+/4vB6o7PubRgSCUIOCT4YRDxE3jFuNj46RkJOSlZSXlo5tm24nTXKgBA5ae6Wmpz5/qklOU1GvCYqNZ2q1ZLe0uGm6X5y+K0dzoQlWpKjHyHery0wIhIeFgwiLmZjW1djX2pa/viwjw3PUyeTlQct/TCyHru0ENru58vH0tvP29VndnazhMVjGzAkkh06VM2gICdkAmK3htocOI0bYtymQv2kBB2o8VrBPM3dUoDxQdI+XyZIo/vOlnMivJQk4wubA20iTYMcj6l5ESzgKok+JQH8+osivQcw4DezUXFrqJquQsAhQw0f1pMqrVe8RRcHCn6iMTMMqc8qCSUJDUmQFXSuUrcOtwBwk8FdMrF09ZHOy2+vsitWsWP8KXgk3WLhxdxMXIdtk5zMFattKdjt5UuGuR2GAVcyZR16jIGHYmBV45eDSqGttNdJKGAKlnWPvuNnsme2vlHNX1q3JZdHMM2UL9+yUb5S6ppOnPg1YtW+ureMogD08Nm1XOxPx3s3dLQQICyh+iz5jVHXZEBgsYJC+4EfjsZjLV97c6vf1C8CrF99gmJXziuGn3oDr3YQWWhht/qdgd5Sklx9++hlwgAHikfcCYgDSlJ6D7A14AAMHhHiAe1C9YF599M233BgO6vegehPGKCGFz1kkzGYZosKhgAKK6KOIzDRx2ztTLWjkT/e56KKMTM44IUWgvIZjjnlwuCOIP2bpY0HGkZTilytedZ96SzppZpMydvOJTFNSGcSVPGopZ5bMOFYXg0diM+aLC6B55p9NerOOdG7useGA6c2p6JwGgbZXkWCiGOYNLcYJ6KV+pukSZjJ4WSgQcMK46KiMqqITO3imWkmS+C2A6auZ/umNMFh8ysOh63FI6q6LGhSSlCpKWhUEEvAJXqzIwvqnAQNU1J84baJHoIe8/lab5QAFBCAAAAL4YdYzJ+Y52Z7HKptsstluGwAA667LyVw0RJuYldRaa20B6WrLrb7bAvBHO/9NGuwO5K5n7sFMYhtAu+w2vC4AEEdcEQ2vAXilvbsawGwB3Ha8rboRhyyxR4WQpCpElZ6LsJMKM8ywyDCLvIkM5sWGK5YYz6kxtvt+vHDMQMvcRxQMRSoYqwysnOzGDjcd9NMyu7EmMYrdnLOcBqTrsdNQdz0yEgcJUuTJkbyo9KXMgvyy12zD/MYMtYal69U+YiuAzx+3rXfMSqA68Dxjnt1kAQOovffhT0MXQ8AaEdtjzllrnTfilAOdxBTAplqmyoP//HDlyKAnrsIMG81t7cb8hq461GCbSJqwEjjIOcvZrr367UGjEIO8Q+zI6855f4778JYHI0pu983OtO3EN2+5CS7UgUqHGRtwt+fOZ886a1JJit/ShTes/fhev/ROKbIrmrUAzJPvfvGfMHTNd69a3+/7+LNNAtV31PsjvvrKnwD1tw5elKtzwhugArvWgrj9YD0+2hnHFkhBvXWlQUmLEc8qyMG9scCBscMS8DpIQg9Oh1JJS1sJV3i4pKQnaz9joQz15gDxzfCGegsBADs=" width="128" height="80" alt="Fahne von Interaktionsweise">
|
||||
<p>Die ist ein Bild. Es wird mit dem Element <code><img></code> eingebunden. Solch ein Bild hat üblicherweise die Attribute <code>width</code> und <code>height</code>. Mit ihnen werden die Abmessungen (Breite und Höhe) festgelegt. Außerdem sollte immer das Attribut <code>alt</code> für eine alternative Beschreibung in Textform verwendet werden.</p>
|
||||
<p>Dies ist ein Bild. Es wird mit dem Element <code><img></code> eingebunden. Solch ein Bild hat üblicherweise die Attribute <code>width</code> und <code>height</code>. Mit ihnen werden die Abmessungen (Breite und Höhe) festgelegt. Außerdem sollte immer das Attribut <code>alt</code> für eine alternative Beschreibung in Textform verwendet werden.</p>
|
||||
<p>Das Bild selbst liegt normalerweise als Datei vor. Die Quelle wird mit dem Attribut <code>src</code> angegeben. Es können einige Alternativen zur Angabe einer konkreten Datei eingesetzt werden. Zum Beispiel können mehrere Dateien in Abhängigkeit zur Darstellung oder dem unterstützen Format angegeben werden. Dafür können dann die Elemente <code><source></code> und <code><picture></code> in Kombination verwendet werden.</p>
|
||||
<picture>
|
||||
<source srcset="../art/demo/flag_websafe_128x80.webp" type="image/webp"/>
|
||||
|
|
@ -590,7 +590,8 @@
|
|||
assetsLoaded = true;
|
||||
logPerf('Assets loaded.');
|
||||
// Create instance of object made by contructor function
|
||||
var scrollUi = new HippieScroll($('.js_scrolltop'));
|
||||
var scrollUi = new HippieScroll($('.js_scrolltop'), $('.js_scrolldown'));
|
||||
var helpUi = new HippieMeta($('.js_showmeta'), $('.js_pop'));
|
||||
|
||||
$(document).ready(function () {
|
||||
logPerf('JQ document ready event fired.');
|
||||
|
|
|
|||
|
|
@ -1,189 +1,189 @@
|
|||
// Root
|
||||
// -----------------------------------------------------------------------------
|
||||
html {
|
||||
// height: 100%;
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Sections
|
||||
// -----------------------------------------------------------------------------
|
||||
// body
|
||||
// article
|
||||
// section
|
||||
// nav
|
||||
// aside
|
||||
// h1-h6
|
||||
// header
|
||||
// footer
|
||||
|
||||
|
||||
|
||||
// Body
|
||||
// -----------------------------------------------------------------------------
|
||||
body {
|
||||
position: relative;
|
||||
box-sizing: $box_sizing;
|
||||
margin: 0;
|
||||
font-family: $family_text_basic;
|
||||
font-size: $size_text_basic;
|
||||
line-height: $line_basic;
|
||||
line-height: $line_text_basic;
|
||||
color: $color_text_basic;
|
||||
background-color: $color_back_basic;
|
||||
|
||||
*,
|
||||
::before,
|
||||
::after {
|
||||
box-sizing: inherit;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
|
||||
.layer_hover {
|
||||
background-color: transparent !important;
|
||||
transition: background-color $duration_double $timing_basic 0s !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Article
|
||||
// -----------------------------------------------------------------------------
|
||||
article {
|
||||
|
||||
}
|
||||
|
||||
// Section
|
||||
// -----------------------------------------------------------------------------
|
||||
section {
|
||||
|
||||
}
|
||||
|
||||
.sec_main_center {
|
||||
width: $width_basic;
|
||||
margin: 0 auto;
|
||||
padding-top: $space_small;
|
||||
|
||||
@include forTabletPortraitUp {
|
||||
width: $width_small;
|
||||
}
|
||||
@include forTabletLandscapeUp {
|
||||
width: $width_medium;
|
||||
}
|
||||
@include forBigDesktopUp {
|
||||
width: $width_large;
|
||||
}
|
||||
}
|
||||
|
||||
.sec_main_status {
|
||||
border-top-width: $width_border_8;
|
||||
border-top-style: solid;
|
||||
border-color: $color_border_basic;
|
||||
padding-top: $space_small;
|
||||
}
|
||||
|
||||
// Navigation
|
||||
// -----------------------------------------------------------------------------
|
||||
nav {
|
||||
|
||||
}
|
||||
|
||||
// Aside element
|
||||
// -----------------------------------------------------------------------------
|
||||
aside {
|
||||
width: $width_aside_basic;
|
||||
|
||||
&.right + .bside {
|
||||
margin-right: calc(#{$width_aside_basic} + #{$space_basic});
|
||||
}
|
||||
|
||||
&.left + .bside {
|
||||
margin-left: calc(#{$width_aside_basic} + #{$space_basic});
|
||||
}
|
||||
|
||||
&.right {
|
||||
float: right;
|
||||
}
|
||||
|
||||
&.left {
|
||||
float: left;
|
||||
}
|
||||
|
||||
*:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Headings
|
||||
// -----------------------------------------------------------------------------
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
@extend %head_all;
|
||||
}
|
||||
|
||||
h1 {
|
||||
@extend %head_1;
|
||||
margin: $space_large 0 $space_small;
|
||||
}
|
||||
|
||||
h1 + h1 {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
@extend %head_2;
|
||||
margin: $space_medium 0 $space_small;
|
||||
}
|
||||
|
||||
h2 + h2 {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
h3 {
|
||||
@extend %head_3;
|
||||
margin: $space_double 0;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
h4 {
|
||||
@extend %head_3;
|
||||
margin: $space_double 0;
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
h5 {
|
||||
@extend %head_4;
|
||||
margin: $space_double 0 $space_basic;
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
h6 {
|
||||
@extend %basic;
|
||||
margin: $space_basic 0;
|
||||
text-transform: none;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
// Header
|
||||
// -----------------------------------------------------------------------------
|
||||
header {
|
||||
|
||||
}
|
||||
|
||||
.header_page {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.header_txt {
|
||||
margin-bottom: $space_small;
|
||||
border-bottom: $border_dotted;
|
||||
|
||||
h1 {
|
||||
border-top: $border_basic;
|
||||
}
|
||||
}
|
||||
|
||||
// Footer
|
||||
// -----------------------------------------------------------------------------
|
||||
footer {
|
||||
|
||||
}
|
||||
// Root
|
||||
// -----------------------------------------------------------------------------
|
||||
html {
|
||||
// height: 100%;
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Sections
|
||||
// -----------------------------------------------------------------------------
|
||||
// body
|
||||
// article
|
||||
// section
|
||||
// nav
|
||||
// aside
|
||||
// h1-h6
|
||||
// header
|
||||
// footer
|
||||
|
||||
|
||||
|
||||
// Body
|
||||
// -----------------------------------------------------------------------------
|
||||
body {
|
||||
position: relative;
|
||||
box-sizing: $box_sizing;
|
||||
margin: 0;
|
||||
font-family: $family_text_basic;
|
||||
font-size: $size_text_basic;
|
||||
line-height: $line_basic;
|
||||
line-height: $line_text_basic;
|
||||
color: $color_text_basic;
|
||||
background-color: $color_back_basic;
|
||||
|
||||
*,
|
||||
::before,
|
||||
::after {
|
||||
box-sizing: inherit;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
|
||||
.mouse_over {
|
||||
background-color: transparent !important;
|
||||
transition: background-color $duration_double $timing_basic 0s !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Article
|
||||
// -----------------------------------------------------------------------------
|
||||
article {
|
||||
|
||||
}
|
||||
|
||||
// Section
|
||||
// -----------------------------------------------------------------------------
|
||||
section {
|
||||
|
||||
}
|
||||
|
||||
.sec_main_center {
|
||||
width: $width_basic;
|
||||
margin: 0 auto;
|
||||
padding-top: $space_small;
|
||||
|
||||
@include forTabletPortraitUp {
|
||||
width: $width_small;
|
||||
}
|
||||
@include forTabletLandscapeUp {
|
||||
width: $width_medium;
|
||||
}
|
||||
@include forBigDesktopUp {
|
||||
width: $width_large;
|
||||
}
|
||||
}
|
||||
|
||||
.sec_main_status {
|
||||
border-top-width: $width_border_8;
|
||||
border-top-style: solid;
|
||||
border-color: $color_border_basic;
|
||||
padding-top: $space_small;
|
||||
}
|
||||
|
||||
// Navigation
|
||||
// -----------------------------------------------------------------------------
|
||||
nav {
|
||||
|
||||
}
|
||||
|
||||
// Aside element
|
||||
// -----------------------------------------------------------------------------
|
||||
aside {
|
||||
width: $width_aside_basic;
|
||||
|
||||
&.right + .bside {
|
||||
margin-right: calc(#{$width_aside_basic} + #{$space_basic});
|
||||
}
|
||||
|
||||
&.left + .bside {
|
||||
margin-left: calc(#{$width_aside_basic} + #{$space_basic});
|
||||
}
|
||||
|
||||
&.right {
|
||||
float: right;
|
||||
}
|
||||
|
||||
&.left {
|
||||
float: left;
|
||||
}
|
||||
|
||||
*:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Headings
|
||||
// -----------------------------------------------------------------------------
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
@extend %head_all;
|
||||
}
|
||||
|
||||
h1 {
|
||||
@extend %head_1;
|
||||
margin: $space_large 0 $space_small;
|
||||
}
|
||||
|
||||
h1 + h1 {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
@extend %head_2;
|
||||
margin: $space_medium 0 $space_small;
|
||||
}
|
||||
|
||||
h2 + h2 {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
h3 {
|
||||
@extend %head_3;
|
||||
margin: $space_double 0;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
h4 {
|
||||
@extend %head_3;
|
||||
margin: $space_double 0;
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
h5 {
|
||||
@extend %head_4;
|
||||
margin: $space_double 0 $space_basic;
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
h6 {
|
||||
@extend %basic;
|
||||
margin: $space_basic 0;
|
||||
text-transform: none;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
// Header
|
||||
// -----------------------------------------------------------------------------
|
||||
header {
|
||||
|
||||
}
|
||||
|
||||
.header_page {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.header_txt {
|
||||
margin-bottom: $space_small;
|
||||
border-bottom: $border_dotted;
|
||||
|
||||
h1 {
|
||||
border-top: $border_basic;
|
||||
}
|
||||
}
|
||||
|
||||
// Footer
|
||||
// -----------------------------------------------------------------------------
|
||||
footer {
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,316 +1,316 @@
|
|||
// General classes
|
||||
// -----------------------------------------------------------------------------
|
||||
|
||||
|
||||
|
||||
%size_content {
|
||||
box-sizing: content-box;
|
||||
}
|
||||
|
||||
%size_content_solo {
|
||||
@extend %size_content;
|
||||
|
||||
*,
|
||||
::before,
|
||||
::after {
|
||||
box-sizing: $box_sizing;
|
||||
}
|
||||
}
|
||||
|
||||
%h_content_full {
|
||||
height: 100%;
|
||||
|
||||
body {
|
||||
min-height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
%hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.magic {
|
||||
@extend %hidden;
|
||||
}
|
||||
|
||||
.space_even_auto {
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.space_even_half {
|
||||
margin-right: 25%;
|
||||
margin-left: 25%;
|
||||
}
|
||||
|
||||
.space_even_fourth {
|
||||
margin-right: 37.5%;
|
||||
margin-left: 37.5%;
|
||||
}
|
||||
|
||||
@each $size, $variable in (basic, #{$space_basic}),
|
||||
(small, #{$space_small}),
|
||||
(medium, #{$space_medium}),
|
||||
(large, #{$space_large}) {
|
||||
.space_top_#{$size} {
|
||||
margin-top: $variable;
|
||||
}
|
||||
.space_right_#{$size} {
|
||||
margin-right: $variable;
|
||||
}
|
||||
.space_bottom_#{$size} {
|
||||
margin-bottom: $variable;
|
||||
}
|
||||
.space_left_#{$size} {
|
||||
margin-left: $variable;
|
||||
}
|
||||
}
|
||||
|
||||
.space_left_fourth {
|
||||
margin-left: 25%;
|
||||
}
|
||||
|
||||
.width_full {
|
||||
width: 100%;
|
||||
margin-right: 0;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.width_half {
|
||||
width: 50%;
|
||||
margin-right: 0;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.width_third {
|
||||
width: 33.3%;
|
||||
margin-right: 0;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.h_basic {
|
||||
height: 1024px;
|
||||
}
|
||||
|
||||
.h_full_view {
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.h_100 {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.wrap_center {
|
||||
& > * {
|
||||
margin-right: (100% - $width_basic) / 2;
|
||||
margin-left: (100% - $width_basic) / 2;
|
||||
|
||||
@include forTabletPortraitUp {
|
||||
margin-right: (100% - $width_small) / 2;
|
||||
margin-left: (100% - $width_small) / 2;
|
||||
}
|
||||
@include forTabletLandscapeUp {
|
||||
margin-right: (100% - $width_medium) / 2;
|
||||
margin-left: (100% - $width_medium) / 2;
|
||||
}
|
||||
@include forBigDesktopUp {
|
||||
margin-right: (100% - $width_large) / 2;
|
||||
margin-left: (100% - $width_large) / 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Clearing and floating
|
||||
// -----------------------------------------------------------------------------
|
||||
.clear {
|
||||
clear: both;
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
|
||||
.overflow {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.float_left {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.float_right {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.float_space_left {
|
||||
@extend .float_left;
|
||||
margin-right: $space_small;
|
||||
}
|
||||
|
||||
.float_half_size {
|
||||
float: left;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.x_long {
|
||||
overflow-x: scroll;
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Inlining
|
||||
// -----------------------------------------------------------------------------
|
||||
.inline {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Positioned elements
|
||||
// -----------------------------------------------------------------------------
|
||||
%viewport_fixed {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
%full_parent {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
// width: 100%;
|
||||
// height: 100%;
|
||||
}
|
||||
|
||||
.pos_abs {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.pos_rel {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.pos_fix {
|
||||
position: fixed;
|
||||
}
|
||||
|
||||
.pin_top {
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.pin_right {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.pin_bottom {
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.pin_left {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.pos_full_view {
|
||||
@extend %viewport_fixed;
|
||||
background-color: rgba($alpha_color, 0.5);
|
||||
}
|
||||
|
||||
.pos_full_page {
|
||||
@extend %full_parent;
|
||||
background-color: rgba($charlie_color, 0.25);
|
||||
}
|
||||
|
||||
.hover_back_change {
|
||||
background-color: $color_darker;
|
||||
transition: background-color 0.2s ease-in-out;
|
||||
|
||||
&:hover {
|
||||
background-color: $color_back_basic;
|
||||
}
|
||||
}
|
||||
|
||||
.hover_full_view_change {
|
||||
@extend %viewport_fixed;
|
||||
z-index: $z_heaven;
|
||||
background-color: transparentize($color_darkest, 0.5);
|
||||
transition: background-color $duration_long $timing_basic $duration_long;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Colors
|
||||
// -----------------------------------------------------------------------------
|
||||
.txt_color_light {
|
||||
color: $color_brighter;
|
||||
}
|
||||
|
||||
.txt_color_dark {
|
||||
color: $color_darker;
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Text
|
||||
// -----------------------------------------------------------------------------
|
||||
.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_hero {
|
||||
font-size: $size_hero;
|
||||
}
|
||||
|
||||
.txt_center {
|
||||
text-align: center !important;
|
||||
}
|
||||
|
||||
.txt_right {
|
||||
text-align: right !important;
|
||||
}
|
||||
|
||||
.txt_left {
|
||||
text-align: left !important;
|
||||
}
|
||||
|
||||
.txt_top {
|
||||
vertical-align: top !important;
|
||||
}
|
||||
|
||||
.txt_bottom {
|
||||
vertical-align: bottom !important;
|
||||
}
|
||||
|
||||
.txt_white {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.txt_black {
|
||||
color: black;
|
||||
}
|
||||
|
||||
.txt_gradient {
|
||||
background: linear-gradient(165deg, $alpha_color 30%, $bravo_color 45%, $charlie_color 50%, $delta_color, $echo_color 80%, $foxtrot_color);
|
||||
background-clip: text;
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
// General classes
|
||||
// -----------------------------------------------------------------------------
|
||||
|
||||
|
||||
|
||||
%size_content {
|
||||
box-sizing: content-box;
|
||||
}
|
||||
|
||||
%size_content_solo {
|
||||
@extend %size_content;
|
||||
|
||||
*,
|
||||
::before,
|
||||
::after {
|
||||
box-sizing: $box_sizing;
|
||||
}
|
||||
}
|
||||
|
||||
%h_content_full {
|
||||
height: 100%;
|
||||
|
||||
body {
|
||||
min-height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
%hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.hide {
|
||||
@extend %hidden;
|
||||
}
|
||||
|
||||
.space_even_auto {
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.space_even_half {
|
||||
margin-right: 25%;
|
||||
margin-left: 25%;
|
||||
}
|
||||
|
||||
.space_even_fourth {
|
||||
margin-right: 37.5%;
|
||||
margin-left: 37.5%;
|
||||
}
|
||||
|
||||
@each $size, $variable in (basic, #{$space_basic}),
|
||||
(small, #{$space_small}),
|
||||
(medium, #{$space_medium}),
|
||||
(large, #{$space_large}) {
|
||||
.space_top_#{$size} {
|
||||
margin-top: $variable;
|
||||
}
|
||||
.space_right_#{$size} {
|
||||
margin-right: $variable;
|
||||
}
|
||||
.space_bottom_#{$size} {
|
||||
margin-bottom: $variable;
|
||||
}
|
||||
.space_left_#{$size} {
|
||||
margin-left: $variable;
|
||||
}
|
||||
}
|
||||
|
||||
.space_left_fourth {
|
||||
margin-left: 25%;
|
||||
}
|
||||
|
||||
.width_full {
|
||||
width: 100%;
|
||||
margin-right: 0;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.width_half {
|
||||
width: 50%;
|
||||
margin-right: 0;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.width_third {
|
||||
width: 33.3%;
|
||||
margin-right: 0;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.h_basic {
|
||||
height: 1024px;
|
||||
}
|
||||
|
||||
.h_full_view {
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.h_100 {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.wrap_center {
|
||||
& > * {
|
||||
margin-right: (100% - $width_basic) / 2;
|
||||
margin-left: (100% - $width_basic) / 2;
|
||||
|
||||
@include forTabletPortraitUp {
|
||||
margin-right: (100% - $width_small) / 2;
|
||||
margin-left: (100% - $width_small) / 2;
|
||||
}
|
||||
@include forTabletLandscapeUp {
|
||||
margin-right: (100% - $width_medium) / 2;
|
||||
margin-left: (100% - $width_medium) / 2;
|
||||
}
|
||||
@include forBigDesktopUp {
|
||||
margin-right: (100% - $width_large) / 2;
|
||||
margin-left: (100% - $width_large) / 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Clearing and floating
|
||||
// -----------------------------------------------------------------------------
|
||||
.clear {
|
||||
clear: both;
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
|
||||
.overflow {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.float_left {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.float_right {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.float_space_left {
|
||||
@extend .float_left;
|
||||
margin-right: $space_small;
|
||||
}
|
||||
|
||||
.float_half_size {
|
||||
float: left;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.x_long {
|
||||
overflow-x: scroll;
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Inlining
|
||||
// -----------------------------------------------------------------------------
|
||||
.inline {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Positioned elements
|
||||
// -----------------------------------------------------------------------------
|
||||
%viewport_fixed {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
%full_parent {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
// width: 100%;
|
||||
// height: 100%;
|
||||
}
|
||||
|
||||
.pos_abs {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.pos_rel {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.pos_fix {
|
||||
position: fixed;
|
||||
}
|
||||
|
||||
.pin_top {
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.pin_right {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.pin_bottom {
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.pin_left {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.pos_full_view {
|
||||
@extend %viewport_fixed;
|
||||
background-color: rgba($alpha_color, 0.5);
|
||||
}
|
||||
|
||||
.pos_full_page {
|
||||
@extend %full_parent;
|
||||
background-color: rgba($charlie_color, 0.25);
|
||||
}
|
||||
|
||||
.hover_back_change {
|
||||
background-color: $color_darker;
|
||||
transition: background-color 0.2s ease-in-out;
|
||||
|
||||
&:hover {
|
||||
background-color: $color_back_basic;
|
||||
}
|
||||
}
|
||||
|
||||
.mouse_over {
|
||||
@extend %viewport_fixed;
|
||||
z-index: $z_heaven;
|
||||
background-color: transparentize($color_darkest, 0.5);
|
||||
transition: background-color $duration_long $timing_basic $duration_long;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Colors
|
||||
// -----------------------------------------------------------------------------
|
||||
.txt_color_light {
|
||||
color: $color_brighter;
|
||||
}
|
||||
|
||||
.txt_color_dark {
|
||||
color: $color_darker;
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Text
|
||||
// -----------------------------------------------------------------------------
|
||||
.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_hero {
|
||||
font-size: $size_hero;
|
||||
}
|
||||
|
||||
.txt_center {
|
||||
text-align: center !important;
|
||||
}
|
||||
|
||||
.txt_right {
|
||||
text-align: right !important;
|
||||
}
|
||||
|
||||
.txt_left {
|
||||
text-align: left !important;
|
||||
}
|
||||
|
||||
.txt_top {
|
||||
vertical-align: top !important;
|
||||
}
|
||||
|
||||
.txt_bottom {
|
||||
vertical-align: bottom !important;
|
||||
}
|
||||
|
||||
.txt_white {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.txt_black {
|
||||
color: black;
|
||||
}
|
||||
|
||||
.txt_gradient {
|
||||
background: linear-gradient(165deg, $alpha_color 30%, $bravo_color 45%, $charlie_color 50%, $delta_color, $echo_color 80%, $foxtrot_color);
|
||||
background-clip: text;
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,75 +2,75 @@
|
|||
// ------------------------------------------------------------------------------
|
||||
|
||||
.html_card {
|
||||
@extend %h_content_full;
|
||||
@extend %h_content_full;
|
||||
|
||||
body {
|
||||
body {
|
||||
|
||||
.card_bkg {
|
||||
@extend %full_parent;
|
||||
transition-duration: 800ms;
|
||||
overflow: hidden;
|
||||
vertical-align: top;
|
||||
z-index: -1;
|
||||
.card_bkg {
|
||||
@extend %full_parent;
|
||||
transition-duration: 800ms;
|
||||
overflow: hidden;
|
||||
vertical-align: top;
|
||||
z-index: -1;
|
||||
|
||||
& > svg {
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
& > svg {
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
.card_box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100vh;
|
||||
.card_box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100vh;
|
||||
|
||||
* {
|
||||
font-family: $family_text_card;
|
||||
// text-align: center;
|
||||
}
|
||||
* {
|
||||
font-family: $family_text_card;
|
||||
// text-align: center;
|
||||
}
|
||||
|
||||
& > div {
|
||||
position: relative;
|
||||
padding: 64px 64px 24px 64px;
|
||||
border: 1px solid #FFF;
|
||||
background-color: #F5F5F5;
|
||||
z-index: 40;
|
||||
}
|
||||
}
|
||||
& > div {
|
||||
position: relative;
|
||||
padding: 64px 64px 24px 64px;
|
||||
border: 1px solid #FFF;
|
||||
background-color: #F5F5F5;
|
||||
z-index: 40;
|
||||
}
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin: 16px 0;
|
||||
color: #1E1E1E;
|
||||
font-size: 24px;
|
||||
line-height: 1.4em;
|
||||
font-weight: normal;
|
||||
}
|
||||
h1 {
|
||||
margin: 16px 0;
|
||||
color: #1E1E1E;
|
||||
font-size: 24px;
|
||||
line-height: 1.4em;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-top: 0;
|
||||
margin-bottom: 16px;
|
||||
font-size: 12px;
|
||||
line-height: 1.4em;
|
||||
}
|
||||
p {
|
||||
margin-top: 0;
|
||||
margin-bottom: 16px;
|
||||
font-size: 12px;
|
||||
line-height: 1.4em;
|
||||
}
|
||||
|
||||
.marked {
|
||||
// padding-left: 1em;
|
||||
// text-indent: -1em;
|
||||
.marked {
|
||||
// padding-left: 1em;
|
||||
// text-indent: -1em;
|
||||
|
||||
&::before { content: "*\0000a0" }
|
||||
}
|
||||
&::before { content: "*\0000a0" }
|
||||
}
|
||||
|
||||
.decent { color: #666 }
|
||||
.decent { color: #666 }
|
||||
|
||||
a {
|
||||
color: #000;
|
||||
text-decoration: none;
|
||||
a {
|
||||
color: #000;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
color: #F4F9FA;
|
||||
background-color: #0C85FF;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
color: #F4F9FA;
|
||||
background-color: #0C85FF;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,115 +1,120 @@
|
|||
// Custom extends and mixins
|
||||
// ------------------------------------------------------------------------------
|
||||
@import "mixins";
|
||||
@import "extends";
|
||||
|
||||
// Explanation module styles
|
||||
// ------------------------------------------------------------------------------
|
||||
|
||||
%expose_after {
|
||||
&::after {
|
||||
content: "";
|
||||
display: block;
|
||||
height: 48px;
|
||||
background-color: rgba($delta_color, 0.1) !important;
|
||||
}
|
||||
}
|
||||
%expose_before {
|
||||
&::before {
|
||||
content: "";
|
||||
display: block;
|
||||
height: 48px;
|
||||
background-color: rgba($delta_color, 0.1) !important;
|
||||
}
|
||||
}
|
||||
%expose {
|
||||
&::before, &::after {
|
||||
content: "";
|
||||
display: block;
|
||||
height: 48px;
|
||||
background-color: rgba($delta_color, 0.1) !important;
|
||||
}
|
||||
}
|
||||
%exp {
|
||||
}
|
||||
%exp_hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.exp_wrap {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.exp_pop {
|
||||
@extend %exp_hidden !optional;
|
||||
position: absolute;
|
||||
z-index: 100;
|
||||
top: $space_large;
|
||||
left: $space_large;
|
||||
padding: $space_half;
|
||||
border: 4px solid $color_back_basic;
|
||||
border-radius: 4px;
|
||||
background-color: $color_back_basic;
|
||||
pointer-events: none;
|
||||
}
|
||||
.exp_marker_pop {
|
||||
position: absolute;
|
||||
top: -$size_text_basic / 4 * 3;
|
||||
right: -$size_text_basic / 2;
|
||||
width: $size_text_basic;
|
||||
height: $size_text_basic;
|
||||
border: $space_tiny solid $color_highlight_basic;
|
||||
border-radius: $size_text_basic;
|
||||
color: $color_highlight_basic;
|
||||
background-color: $color_darkest;
|
||||
}
|
||||
|
||||
.exp_expose {
|
||||
@extend %expose !optional;
|
||||
}
|
||||
.exp_expose_pre {
|
||||
@extend %expose_after;
|
||||
}
|
||||
.exp_expose_post {
|
||||
@extend %expose_before;
|
||||
}
|
||||
|
||||
.exp_overlay_btn {
|
||||
position: fixed;
|
||||
width: 3em;
|
||||
height: 2em;
|
||||
// padding: $space_basic $space_basic * 2;
|
||||
cursor: pointer;
|
||||
}
|
||||
.exp_help_btn {
|
||||
display: table;
|
||||
right: $space_double;
|
||||
bottom: $space_double;
|
||||
background-color: rgba($color_darkest, 0.4);
|
||||
&:hover {
|
||||
background-color: $color_brightest;
|
||||
> .span_solo {
|
||||
color: $color_darkest;
|
||||
}
|
||||
}
|
||||
.span_solo {
|
||||
display: table-cell;
|
||||
color: rgba($color_brightest, 0.8);
|
||||
font-family: $family_text_mono;
|
||||
font-size: 1.4em;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.expose_height {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background-color: rgba($delta_color, 0.1) !important;
|
||||
@include vendor-prefix(transition, height 0.5s ease);
|
||||
}
|
||||
// Custom extends and mixins
|
||||
// ------------------------------------------------------------------------------
|
||||
@import "mixins";
|
||||
@import "extends";
|
||||
|
||||
// Explanation module styles
|
||||
// ------------------------------------------------------------------------------
|
||||
|
||||
%expose_after {
|
||||
&::after {
|
||||
content: "";
|
||||
display: block;
|
||||
height: 48px;
|
||||
background-color: rgba($delta_color, 0.1) !important;
|
||||
}
|
||||
}
|
||||
%expose_before {
|
||||
&::before {
|
||||
content: "";
|
||||
display: block;
|
||||
height: 48px;
|
||||
background-color: rgba($delta_color, 0.1) !important;
|
||||
}
|
||||
}
|
||||
%expose {
|
||||
&::before, &::after {
|
||||
content: "";
|
||||
display: block;
|
||||
height: 48px;
|
||||
background-color: rgba($delta_color, 0.1) !important;
|
||||
}
|
||||
}
|
||||
%exp {
|
||||
}
|
||||
%exp_hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.exp_wrap {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.exp_overlay {
|
||||
@extend %full_parent;
|
||||
background-color: transparentize($alpha_color, .6);
|
||||
}
|
||||
|
||||
.exp_pop {
|
||||
@extend %exp_hidden !optional;
|
||||
position: absolute;
|
||||
z-index: 100;
|
||||
top: $space_large;
|
||||
left: $space_large;
|
||||
padding: $space_half;
|
||||
border: 4px solid $color_back_basic;
|
||||
border-radius: 4px;
|
||||
background-color: $color_back_basic;
|
||||
pointer-events: none;
|
||||
}
|
||||
.exp_marker_pop {
|
||||
position: absolute;
|
||||
top: -$size_text_basic / 4 * 3;
|
||||
right: -$size_text_basic / 2;
|
||||
width: $size_text_basic;
|
||||
height: $size_text_basic;
|
||||
border: $space_tiny solid $color_highlight_basic;
|
||||
border-radius: $size_text_basic;
|
||||
color: $color_highlight_basic;
|
||||
background-color: $color_darkest;
|
||||
}
|
||||
|
||||
.exp_expose {
|
||||
@extend %expose !optional;
|
||||
}
|
||||
.exp_expose_pre {
|
||||
@extend %expose_after;
|
||||
}
|
||||
.exp_expose_post {
|
||||
@extend %expose_before;
|
||||
}
|
||||
|
||||
.exp_overlay_btn {
|
||||
position: fixed;
|
||||
width: 3em;
|
||||
height: 2em;
|
||||
// padding: $space_basic $space_basic * 2;
|
||||
cursor: pointer;
|
||||
}
|
||||
.exp_help_btn {
|
||||
display: table;
|
||||
right: $space_double;
|
||||
bottom: $space_double;
|
||||
background-color: rgba($color_darkest, 0.4);
|
||||
&:hover {
|
||||
background-color: $color_brightest;
|
||||
> .span_solo {
|
||||
color: $color_darkest;
|
||||
}
|
||||
}
|
||||
.span_solo {
|
||||
display: table-cell;
|
||||
color: rgba($color_brightest, 0.8);
|
||||
font-family: $family_text_mono;
|
||||
font-size: 1.4em;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.expose_height {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background-color: rgba($delta_color, 0.1) !important;
|
||||
@include vendor-prefix(transition, height 0.5s ease);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,2 +1,2 @@
|
|||
<!-- body_hover.partial -->
|
||||
<div id="js_tph" class="layer_hover"></div>
|
||||
<!-- body_hover.partial -->
|
||||
<div id="js_mob"></div>
|
||||
|
|
|
|||
|
|
@ -1,28 +1,28 @@
|
|||
<!-- body_nav.partial -->
|
||||
<div class="pos_rel">
|
||||
<nav class="nav_page_meta">
|
||||
<ul>
|
||||
<li class="magic">
|
||||
<a href="#begin" class="js_scrolltop a_button_meta">
|
||||
<div class="sprite_img demo__sprite_up"></div>
|
||||
{# <img src="../art/up.png" alt="" width="32" height="64"> #}
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
{# <button class="">Show Meta Information</button> #}
|
||||
<a href="#meta" class="js_showmeta a_button_meta">
|
||||
<div class="sprite_img demo__sprite_meta meta"></div>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#end" class="js_scrolldown a_button_meta">
|
||||
<div class="sprite_img demo__sprite_down"></div>
|
||||
{# <img src="../art/down.png" alt="" width="32" height="32"> #}
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
{# <div class="exp_overlay_btn exp_help_btn">
|
||||
<span class="span_solo">?</span>
|
||||
</div> #}
|
||||
<!-- body_nav.partial -->
|
||||
<div class="pos_rel">
|
||||
<nav class="nav_page_meta js_">
|
||||
<ul>
|
||||
<li class="js_scrolltop hide">
|
||||
<a href="#begin" class="a_button_meta">
|
||||
<div class="sprite_img demo__sprite_up"></div>
|
||||
{# <img src="../art/up.png" alt="" width="32" height="64"> #}
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
{# <button class="">Show Meta Information</button> #}
|
||||
<a href="#meta" class="js_showmeta a_button_meta">
|
||||
<div class="sprite_img demo__sprite_meta"></div>
|
||||
</a>
|
||||
</li>
|
||||
<li class="js_scrolldown">
|
||||
<a href="#end" class="a_button_meta">
|
||||
<div class="sprite_img demo__sprite_down"></div>
|
||||
{# <img src="../art/down.png" alt="" width="32" height="32"> #}
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
{# <div class="exp_overlay_btn exp_help_btn">
|
||||
<span class="span_solo">?</span>
|
||||
</div> #}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue