Compare commits
No commits in common. "79ad6f452d226cacf1d8d058964e1d18b2e8ca9e" and "58cb0eba2c6ba4ccc10024a4251d1cc054db63af" have entirely different histories.
79ad6f452d
...
58cb0eba2c
8 changed files with 7 additions and 583 deletions
|
|
@ -33,20 +33,20 @@ function HippieScroll($tp, $dn) {
|
||||||
let initLeft = false;
|
let initLeft = false;
|
||||||
const initY = hippie.screen.vh;
|
const initY = hippie.screen.vh;
|
||||||
|
|
||||||
$tp.addClass('di_none');
|
$tp.addClass('hide');
|
||||||
|
|
||||||
// Check scroll position and toggle element
|
// Check scroll position and toggle element
|
||||||
this.check = function () {
|
this.check = function () {
|
||||||
hippie.screen.y = Math.min($(document).scrollTop(), document.documentElement.scrollTop);
|
hippie.screen.y = Math.min($(document).scrollTop(), document.documentElement.scrollTop);
|
||||||
if (hippie.screen.y > initY) {
|
if (hippie.screen.y > initY) {
|
||||||
if (!initLeft) {
|
if (!initLeft) {
|
||||||
$tp.removeClass('di_none');
|
$tp.removeClass('hide');
|
||||||
console.info('Initial viewport left');
|
console.info('Initial viewport left');
|
||||||
}
|
}
|
||||||
initLeft = true;
|
initLeft = true;
|
||||||
} else {
|
} else {
|
||||||
if (initLeft) {
|
if (initLeft) {
|
||||||
$tp.addClass('di_none');
|
$tp.addClass('hide');
|
||||||
console.info('Initial viewport entered');
|
console.info('Initial viewport entered');
|
||||||
}
|
}
|
||||||
initLeft = false;
|
initLeft = false;
|
||||||
|
|
|
||||||
|
|
@ -1,274 +0,0 @@
|
||||||
let introDelay = 6;
|
|
||||||
let hintDelay = 1;
|
|
||||||
let isAgree = false;
|
|
||||||
|
|
||||||
const steps = {
|
|
||||||
agreement: {
|
|
||||||
element: document.getElementById('agreement'),
|
|
||||||
msgIn: 'Agreement shown.',
|
|
||||||
msgOut: 'Agreement accepted.',
|
|
||||||
msgNo: 'No agreement today.'
|
|
||||||
}
|
|
||||||
};
|
|
||||||
const intro = document.getElementById('intro');
|
|
||||||
const agreement = steps.agreement.element;
|
|
||||||
const hint = {
|
|
||||||
element: document.getElementById('hint'),
|
|
||||||
delay: hintDelay * 1000,
|
|
||||||
show() {
|
|
||||||
if (typeof this.timeoutId === 'number') {
|
|
||||||
this.cancel();
|
|
||||||
}
|
|
||||||
|
|
||||||
this.element.classList.remove('di_none');
|
|
||||||
|
|
||||||
this.timeoutId = setTimeout(
|
|
||||||
() => {
|
|
||||||
this.dismiss();
|
|
||||||
},
|
|
||||||
this.delay
|
|
||||||
);
|
|
||||||
},
|
|
||||||
dismiss() {
|
|
||||||
this.element.classList.add('di_none');
|
|
||||||
this.timeoutId = undefined;
|
|
||||||
},
|
|
||||||
cancel() {
|
|
||||||
clearTimeout(this.timeoutId);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
const loader = document.getElementById('loader');
|
|
||||||
|
|
||||||
function init() {
|
|
||||||
return new Promise((resolve) => {
|
|
||||||
console.log('Init');
|
|
||||||
|
|
||||||
resolve();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function showIntro() {
|
|
||||||
const el = intro;
|
|
||||||
const dy = introDelay * 1000;
|
|
||||||
|
|
||||||
document.addEventListener('click', hintHandler, false);
|
|
||||||
document.addEventListener('keydown', hintHandler, false);
|
|
||||||
|
|
||||||
return new Promise((resolve, reject) => {
|
|
||||||
if (el) {
|
|
||||||
console.info("Intro begin.");
|
|
||||||
|
|
||||||
el.classList.replace('op_hide', 'op_show');
|
|
||||||
setTimeout(
|
|
||||||
() => {
|
|
||||||
el.classList.replace('op_show', 'op_hide');
|
|
||||||
el.addEventListener('transitionend', () => {
|
|
||||||
console.info("Intro fin.");
|
|
||||||
|
|
||||||
el.classList.add('di_none');
|
|
||||||
resolve("Intro fin.");
|
|
||||||
});
|
|
||||||
},
|
|
||||||
dy
|
|
||||||
);
|
|
||||||
} else {
|
|
||||||
reject('No intro available.');
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
function showAgreement() {
|
|
||||||
document.removeEventListener('click', hintHandler);
|
|
||||||
document.removeEventListener('keydown', hintHandler);
|
|
||||||
const el = agreement;
|
|
||||||
const dy = introDelay * 1000;
|
|
||||||
|
|
||||||
return new Promise((resolve, reject) => {
|
|
||||||
if (el) {
|
|
||||||
console.info(steps.agreement.msgIn);
|
|
||||||
|
|
||||||
el.classList.replace('op_hide', 'op_show');
|
|
||||||
el.addEventListener('click', agreeHandler);
|
|
||||||
} else {
|
|
||||||
reject(steps.agreement.msgNo);
|
|
||||||
}
|
|
||||||
|
|
||||||
function agreeHandler() {
|
|
||||||
const el = agreement;
|
|
||||||
|
|
||||||
isAgree = true;
|
|
||||||
|
|
||||||
el.classList.replace('op_show', 'op_hide');
|
|
||||||
el.addEventListener('transitionend', function endListener() {
|
|
||||||
console.info(steps.agreement.msgOut);
|
|
||||||
|
|
||||||
el.removeEventListener('transitionend', endListener);
|
|
||||||
el.removeEventListener('click', agreeHandler);
|
|
||||||
el.classList.add('di_none');
|
|
||||||
resolve(steps.agreement.msgOut);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
function showIdle() {
|
|
||||||
const el = document.getElementById('idle');
|
|
||||||
|
|
||||||
return new Promise((resolve, reject) => {
|
|
||||||
if (el) {
|
|
||||||
console.info('Idle.');
|
|
||||||
|
|
||||||
el.classList.replace('op_hide', 'op_show');
|
|
||||||
resolve('Idle.');
|
|
||||||
} else {
|
|
||||||
reject();
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
function loadCore() {
|
|
||||||
const el = loader;
|
|
||||||
const bar = loader.querySelector('#progress');
|
|
||||||
const status = loader.querySelector('#status');
|
|
||||||
const spinner = loader.querySelector('#spinner');
|
|
||||||
const sp = spinner.querySelector('span');
|
|
||||||
|
|
||||||
let progress = 0;
|
|
||||||
|
|
||||||
return new Promise((resolve) => {
|
|
||||||
console.info("Core loading.");
|
|
||||||
|
|
||||||
updateProgressBar();
|
|
||||||
|
|
||||||
function updateProgressBar() {
|
|
||||||
const maxChunk = 33;
|
|
||||||
const time = 400;
|
|
||||||
let increment = randomIntFrom(1, maxChunk);
|
|
||||||
|
|
||||||
progress += increment;
|
|
||||||
|
|
||||||
if (progress >= 100) progress = 100;
|
|
||||||
// console.log(progress);
|
|
||||||
|
|
||||||
bar.style.width = progress + '%';
|
|
||||||
status.textContent = progress + '%';
|
|
||||||
|
|
||||||
if (progress < 100) {
|
|
||||||
setTimeout(updateProgressBar, time);
|
|
||||||
} else {
|
|
||||||
bar.style.width = '100%';
|
|
||||||
sp.style.animationPlayState = 'paused';
|
|
||||||
spinner.style.color = 'white';
|
|
||||||
spinner.style.backgroundColor = 'black';
|
|
||||||
el.classList.replace('op_show', 'op_hide');
|
|
||||||
el.addEventListener('transitionend', function endListener() {
|
|
||||||
console.info("Core loaded.");
|
|
||||||
|
|
||||||
el.removeEventListener('transitionend', endListener);
|
|
||||||
el.classList.add('di_none');
|
|
||||||
resolve("Core loaded.");
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
init()
|
|
||||||
.then(loadCore)
|
|
||||||
.then(showIntro)
|
|
||||||
.catch(er => console.error(er))
|
|
||||||
.then(showAgreement)
|
|
||||||
.then(showIdle)
|
|
||||||
.catch(er => console.error(er))
|
|
||||||
.finally(() => {
|
|
||||||
console.debug('Init end.', isAgree);
|
|
||||||
// location = 'demo/examples/ui/new.html';
|
|
||||||
});
|
|
||||||
|
|
||||||
// document.addEventListener('DOMContentLoaded', () => {
|
|
||||||
// const barEl = document.getElementById('bar');
|
|
||||||
// const bar = document.getElementById('progress');
|
|
||||||
// const status = document.getElementById('status');
|
|
||||||
// const spinnerEl = document.getElementById('spinner');
|
|
||||||
// const spinner = document.getElementById('spinner').querySelector('span');
|
|
||||||
|
|
||||||
// let progress = 0;
|
|
||||||
|
|
||||||
// function updateProgressBar() {
|
|
||||||
// let increment = randomIntFrom(1, 9);
|
|
||||||
// progress += increment;
|
|
||||||
|
|
||||||
// if (progress >= 100) progress = 100;
|
|
||||||
// console.log(progress);
|
|
||||||
|
|
||||||
// bar.style.width = progress + '%';
|
|
||||||
// status.textContent = progress + '%';
|
|
||||||
|
|
||||||
// if (progress < 100) {
|
|
||||||
// setTimeout(updateProgressBar, 100);
|
|
||||||
// } else {
|
|
||||||
// bar.style.width = '100%';
|
|
||||||
// spinner.style.animationPlayState = 'paused';
|
|
||||||
// spinnerEl.style.color = 'white';
|
|
||||||
// spinnerEl.style.backgroundColor = 'black';
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
|
|
||||||
// updateProgressBar();
|
|
||||||
|
|
||||||
// window.addEventListener('load', () => {
|
|
||||||
// // progressEl.style.width = '100%';
|
|
||||||
// // setTimeout(() => {
|
|
||||||
// // progressBar.style.opacity = 0;
|
|
||||||
// // setTimeout(() => {
|
|
||||||
// // progressBar.style.display = 'none';
|
|
||||||
// // }, 500);
|
|
||||||
// // }, 2000);
|
|
||||||
// });
|
|
||||||
// });
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Gibt eine Zahl zwischen <min> und <max> aus.
|
|
||||||
* Die Werte <min> und <max> sind dabei mit eingeschlossen.
|
|
||||||
* Mit <pos> kann der Exponent für eine 10er-Teilung angegeben werden.
|
|
||||||
*
|
|
||||||
* @param {number} min
|
|
||||||
* @param {number} max
|
|
||||||
* @param {number} pos
|
|
||||||
* @returns {number}
|
|
||||||
*/
|
|
||||||
function randomIntFrom(min, max, pos = 0) {
|
|
||||||
pos = Math.pow(10, pos);
|
|
||||||
min = Math.ceil(min);
|
|
||||||
max = Math.floor(max);
|
|
||||||
|
|
||||||
return Math.floor((Math.random() * (max - min + 1) + min) / pos) * pos;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Erstellt Kontext für hint-Objekt und ermöglicht das Entfernen des Ereignis.
|
|
||||||
*/
|
|
||||||
function hintHandler() {
|
|
||||||
hint.show();
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Blendet einen Schritt aus.
|
|
||||||
*
|
|
||||||
* @param {*} e
|
|
||||||
* @returns
|
|
||||||
*/
|
|
||||||
function stepHandler(e) {
|
|
||||||
const el = e.target;
|
|
||||||
const msg = steps[el.id].msgOut;
|
|
||||||
|
|
||||||
return new Promise(function (resolve) {
|
|
||||||
el.classList.replace('op_show', 'op_hide');
|
|
||||||
el.addEventListener('transitionend', function endListener() {
|
|
||||||
console.info(msg);
|
|
||||||
|
|
||||||
el.removeEventListener('transitionend', endListener);
|
|
||||||
resolve(msg);
|
|
||||||
});
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
@ -1,60 +0,0 @@
|
||||||
---
|
|
||||||
title: Init
|
|
||||||
tags:
|
|
||||||
- demoExample
|
|
||||||
- index
|
|
||||||
- ui
|
|
||||||
---
|
|
||||||
{% set pageId = "init" %}
|
|
||||||
{% set pageClass = "html_ui" %}
|
|
||||||
|
|
||||||
{% extends "demo/_app.njk" %}
|
|
||||||
{% import "hippie/macros/_placeholder.njk" as ph %}
|
|
||||||
|
|
||||||
{% block title %}{{ title }}
|
|
||||||
{% endblock %}
|
|
||||||
|
|
||||||
{% block links %}
|
|
||||||
<link href="{{ pageBase }}css/ui.css" media="all" rel="stylesheet"/>
|
|
||||||
{% endblock %}
|
|
||||||
|
|
||||||
{% block head %}
|
|
||||||
{{ super() }}
|
|
||||||
{% endblock %}
|
|
||||||
|
|
||||||
{% block body %}
|
|
||||||
<div id="loader" class="step op_show">
|
|
||||||
<div id="bar">
|
|
||||||
<div id="spinner"><span>I</span></div>
|
|
||||||
<div id="wrap">
|
|
||||||
<div id="progress"></div>
|
|
||||||
</div>
|
|
||||||
<div id="status">0%</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div id="hint" class="toast di_none" role="alert" aria-live="assertive" aria-atomic="true">
|
|
||||||
<p>Hold <kbd>space</kbd> to skip.</p>
|
|
||||||
</div>
|
|
||||||
<div id="intro" class="step op_hide">
|
|
||||||
{{ ph.brand('brand') }}
|
|
||||||
<p>Powered by</p>
|
|
||||||
<ul class="tech-stack">
|
|
||||||
<li>Vendor</li>
|
|
||||||
<li>IDE</li>
|
|
||||||
<li>Engine</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<div id="agreement" class="step op_hide">
|
|
||||||
<h1>Agreement</h1>
|
|
||||||
<p>This needs to be seen and acknowledged.<br>So an interaction must be made to continue.</p>
|
|
||||||
</div>
|
|
||||||
<div id="idle" class="step op_hide">
|
|
||||||
<div class="hello">Hello World!</div>
|
|
||||||
<p class="hello">Only left mouse click or any key</p>
|
|
||||||
</div>
|
|
||||||
{% endblock %}
|
|
||||||
|
|
||||||
{%- block script %}
|
|
||||||
{{ super() }}
|
|
||||||
<script src="{{ pageBase }}js/ui.js"></script>
|
|
||||||
{% endblock %}
|
|
||||||
|
|
@ -1,21 +0,0 @@
|
||||||
---
|
|
||||||
title: Default
|
|
||||||
---
|
|
||||||
{% set pageBase = "../" %}
|
|
||||||
{% set pageId = page.fileSlug %}
|
|
||||||
|
|
||||||
{% extends "hippie/_default.njk" %}
|
|
||||||
|
|
||||||
{% block title %}{{ title }}{% endblock %}
|
|
||||||
|
|
||||||
{% block head %}
|
|
||||||
{{ super() }}
|
|
||||||
{% endblock %}
|
|
||||||
|
|
||||||
{% block body %}
|
|
||||||
<!-- {{ page.fileSlug }}.page -->
|
|
||||||
{% endblock %}
|
|
||||||
|
|
||||||
{% block script %}
|
|
||||||
{{ super() }}
|
|
||||||
{% endblock %}
|
|
||||||
|
|
@ -1 +1 @@
|
||||||
Subproject commit 9f3797f6516a63101fb8ebd23ab8229053ec57b6
|
Subproject commit 2e100f72a90d9b29fdd1a053059631b8644d91dd
|
||||||
|
|
@ -1,197 +1,6 @@
|
||||||
@use "sass:map";
|
|
||||||
|
|
||||||
@import "demo_config";
|
@import "demo_config";
|
||||||
@import "hippie-style/hippie";
|
@import "hippie-style/hippie";
|
||||||
|
|
||||||
$z-indexes: (
|
|
||||||
"default": 0,
|
|
||||||
"content-bottom": 1,
|
|
||||||
"content-low": 2,
|
|
||||||
"content-med": 3,
|
|
||||||
"content-high": 4,
|
|
||||||
"content-top": 10,
|
|
||||||
"modal-low": 11,
|
|
||||||
"modal-med": 12,
|
|
||||||
"modal-high": 13,
|
|
||||||
"toast": 100
|
|
||||||
);
|
|
||||||
|
|
||||||
.op_show {
|
|
||||||
transition: $transition_show;
|
|
||||||
}
|
|
||||||
|
|
||||||
.op_hide {
|
|
||||||
transition: $transition_hide;
|
|
||||||
}
|
|
||||||
|
|
||||||
.html_ui {
|
|
||||||
height: 100%;
|
|
||||||
|
|
||||||
body {
|
|
||||||
position: relative;
|
|
||||||
min-height: 100%;
|
|
||||||
background-color: black;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.step {
|
|
||||||
@extend %full_parent;
|
|
||||||
}
|
|
||||||
|
|
||||||
#loader {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
background-color: white;
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
#bar {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
width: 50%;
|
|
||||||
}
|
|
||||||
|
|
||||||
#wrap {
|
|
||||||
flex: 1;
|
|
||||||
background-color: $color_back_basic;
|
|
||||||
}
|
|
||||||
|
|
||||||
#progress {
|
|
||||||
width: 0%;
|
|
||||||
height: 100%;
|
|
||||||
background-color: black;
|
|
||||||
}
|
|
||||||
|
|
||||||
#status,
|
|
||||||
#spinner {
|
|
||||||
@extend %basic;
|
|
||||||
|
|
||||||
display: flex;
|
|
||||||
flex-grow: 0;
|
|
||||||
flex-shrink: 0;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
margin-inline: $space_half;
|
|
||||||
padding-block: calc($space_half - 1px) $space_half;
|
|
||||||
line-height: $line_basic;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
#status {
|
|
||||||
width: 4em;
|
|
||||||
background-color: black;
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
#spinner {
|
|
||||||
width: 2.5em;
|
|
||||||
background-color: $color_back_basic;
|
|
||||||
color: black;
|
|
||||||
|
|
||||||
span {
|
|
||||||
animation: rotate 1s linear infinite;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes rotate {
|
|
||||||
from {
|
|
||||||
transform: rotate(0deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
to {
|
|
||||||
transform: rotate(360deg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
#intro {
|
|
||||||
z-index: map.get($z-indexes, "content-top");
|
|
||||||
overflow: hidden;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
background-color: black;
|
|
||||||
pointer-events: none;
|
|
||||||
|
|
||||||
h1,
|
|
||||||
p,
|
|
||||||
li {
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.brand {
|
|
||||||
text-align: center;
|
|
||||||
|
|
||||||
img {
|
|
||||||
display: inline-block;
|
|
||||||
width: 128px;
|
|
||||||
height: 128px;
|
|
||||||
background-color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
*+h1 {
|
|
||||||
margin-top: $space_small;
|
|
||||||
margin-bottom: $space_large;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.tech-stack {
|
|
||||||
display: flex;
|
|
||||||
padding-left: 0;
|
|
||||||
|
|
||||||
li {
|
|
||||||
list-style: none;
|
|
||||||
padding-inline: $space_double;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
#agreement,
|
|
||||||
#idle {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
height: 100vh;
|
|
||||||
background-color: $color_back_basic;
|
|
||||||
}
|
|
||||||
|
|
||||||
#agreement {
|
|
||||||
flex-direction: column;
|
|
||||||
|
|
||||||
h1 {
|
|
||||||
margin-top: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
#idle {
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.toast {
|
|
||||||
z-index: map.get($z-indexes, "toast");
|
|
||||||
position: fixed;
|
|
||||||
right: $space_half;
|
|
||||||
bottom: $space_double;
|
|
||||||
|
|
||||||
p {
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
kbd {
|
|
||||||
border-color: $color_brighter;
|
|
||||||
color: $color_back_io;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.hello {
|
|
||||||
flex: 0 1 auto;
|
|
||||||
padding: 1em 2em;
|
|
||||||
// background-color: rgba(black, .25);
|
|
||||||
background-color: $color_darker;
|
|
||||||
}
|
|
||||||
|
|
||||||
@import "modules/ui/new_module";
|
@import "modules/ui/new_module";
|
||||||
@import "modules/ui/settings_module";
|
@import "modules/ui/settings_module";
|
||||||
@import "modules/ui/drag_module";
|
@import "modules/ui/drag_module";
|
||||||
|
|
|
||||||
|
|
@ -11,33 +11,3 @@
|
||||||
{% macro address(class='', text='Straße Nr., PLZ Ort') %}
|
{% macro address(class='', text='Straße Nr., PLZ Ort') %}
|
||||||
<span class="{{ class }}">{{ text }}</span>
|
<span class="{{ class }}">{{ text }}</span>
|
||||||
{% endmacro %}
|
{% endmacro %}
|
||||||
{% macro brand(class='', name='Marke') %}
|
|
||||||
<div class="{{ class }}">
|
|
||||||
{# <img src="" alt="Brand logo"> #}
|
|
||||||
<svg
|
|
||||||
width="128"
|
|
||||||
height="128"
|
|
||||||
viewBox="0 0 128 128"
|
|
||||||
version="1.1"
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
xmlns:svg="http://www.w3.org/2000/svg">
|
|
||||||
<g>
|
|
||||||
<rect
|
|
||||||
style="display:inline;fill:none;stroke:#ffffff;stroke-width:2;stroke-linecap:round;stroke-dasharray:none"
|
|
||||||
width="126"
|
|
||||||
height="126"
|
|
||||||
x="1"
|
|
||||||
y="1" />
|
|
||||||
<circle
|
|
||||||
style="fill:none;stroke:#ffffff;stroke-width:2;stroke-linecap:round;stroke-linejoin:bevel;stroke-dasharray:none"
|
|
||||||
cx="64"
|
|
||||||
cy="64"
|
|
||||||
r="63" />
|
|
||||||
<path
|
|
||||||
style="fill:none;stroke:#ffffff;stroke-width:2;stroke-linecap:round;stroke-linejoin:bevel;stroke-dasharray:none"
|
|
||||||
d="m 9.3926879,32.472455 109.2146221,-2e-6 -54.607309,94.582637 z" />
|
|
||||||
</g>
|
|
||||||
</svg>
|
|
||||||
<h1>{{ name }}</h1>
|
|
||||||
</div>
|
|
||||||
{% endmacro %}
|
|
||||||
|
|
@ -1,8 +1,8 @@
|
||||||
<!-- body_nav.partial -->
|
<!-- body_nav.partial -->
|
||||||
<div class="pos_rel">
|
<div class="pos_rel">
|
||||||
<nav class="nav_page_meta">
|
<nav class="nav_page_meta js_">
|
||||||
<ul>
|
<ul>
|
||||||
<li class="js_scrolltop di_none">
|
<li class="js_scrolltop hide">
|
||||||
<a href="#begin" class="a_button_meta">
|
<a href="#begin" class="a_button_meta">
|
||||||
<div class="sprite_img demo__sprite_up"></div>
|
<div class="sprite_img demo__sprite_up"></div>
|
||||||
{# <img src="{{ pageBase }}art/up.png" alt="" width="32" height="64"> #}
|
{# <img src="{{ pageBase }}art/up.png" alt="" width="32" height="64"> #}
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue