interaktionsweise/hippie
1
1
Fork 0
Code Issues Pull requests Releases 3 Activity Actions

Compare commits

base: interaktionsweise:a3656b86feccdcb27fdb5cf6f37ced81d58a3fd5
Branches Tags
interaktionsweise:development
interaktionsweise:main
interaktionsweise:testing-clean-css
interaktionsweise:testing-gulp
interaktionsweise:testing-npm-scripts
interaktionsweise:v3
interaktionsweise:v2
interaktionsweise:v1
...
compare: interaktionsweise:c1fea8064e1e4929b5c6919e63fea5b1dd28e3c3
Branches Tags
interaktionsweise:development
interaktionsweise:main
interaktionsweise:testing-clean-css
interaktionsweise:testing-gulp
interaktionsweise:testing-npm-scripts
interaktionsweise:v3
interaktionsweise:v2
interaktionsweise:v1

10 commits
a3656b86fe ... c1fea8064e

Author SHA1 Message Date
sthag
c1fea8064e feat: Adapt new hippie-style structure 
Sass deprecations removed.
 2025-10-26 11:37:47 +01:00
sthag
d9f7ae1ff9 feat: Change frame screens 
- Move page title to template
- Remove redundant title blocks
- Base frame pages on correct template
- Base ui index on default template
 2025-10-25 09:34:30 +02:00
sthag
ac8f55a7c9 feat: Change global mouse interaction 
- Add .body_intro to intro screen
- Change mouse over identifier
- Introduce HippieFade as global function
- Replace #js_mob with HippieFade
- Remove old partial
 2025-10-25 09:32:22 +02:00
sthag
65d80fcbc4 style: Add editorconfig for css 
Change indentation for CSS and SCSS to 2 instead of the default which is 4.
 2025-10-25 09:15:41 +02:00
sthag
50b0d864c2 feat: Replace deprecated sass color functions 2025-10-25 09:03:58 +02:00
sthag
41c5757790 feat: Change label styles and update layouts 
- Update styles
- Update layouts screen and rearrange other examples
 2025-10-20 19:27:23 +02:00
sthag
5f54ab6bbe build: Update Sass dependency to 1.93.x 2025-10-17 23:04:31 +02:00
sthag
9c821fed90 feat: New component example for hgroup 2025-10-10 18:29:04 +02:00
sthag
7c83a33920 feat: Update hippie-style 2025-10-10 18:27:54 +02:00
sthag
8ace5526bf feat: Add editorconfig 
Single format defined for all file types.
 2025-10-10 18:22:11 +02:00
26 changed files with 672 additions and 250 deletions
Download patch file Download diff file Expand all files Collapse all files

13
.editorconfig Normal file
View file

@ -0,0 +1,13 @@
root = true
[*]
charset = utf-8
end_of_line = lf
indent_size = 4
indent_style = tab
insert_final_newline = false
max_line_length = 120
[*.{css,scss}]
tab_width = 2
indent_size = tab

372
package-lock.json generated
View file

@ -11,8 +11,10 @@
"dependencies": { "dependencies": {
"@11ty/eleventy": "^2.0.1", "@11ty/eleventy": "^2.0.1",
"bootstrap-icons": "^1.13.1", "bootstrap-icons": "^1.13.1",
"normalize.css": "^8.0.1", "sass": "^1.93.0"
"sass": "^1.69.4" },
"devDependencies": {
"normalize.css": "^8.0.1"
} }
}, },
"node_modules/@11ty/dependency-tree": { "node_modules/@11ty/dependency-tree": {
@ -207,6 +209,302 @@
"node": ">= 8" "node": ">= 8"
} }
}, },
"node_modules/@parcel/watcher": {
"version": "2.5.1",
"resolved": "https://registry.npmjs.org/@parcel/watcher/-/watcher-2.5.1.tgz",
"integrity": "sha512-dfUnCxiN9H4ap84DvD2ubjw+3vUNpstxa0TneY/Paat8a3R4uQZDLSvWjmznAY/DoahqTHl9V46HF/Zs3F29pg==",
"hasInstallScript": true,
"license": "MIT",
"optional": true,
"dependencies": {
"detect-libc": "^1.0.3",
"is-glob": "^4.0.3",
"micromatch": "^4.0.5",
"node-addon-api": "^7.0.0"
},
"engines": {
"node": ">= 10.0.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/parcel"
},
"optionalDependencies": {
"@parcel/watcher-android-arm64": "2.5.1",
"@parcel/watcher-darwin-arm64": "2.5.1",
"@parcel/watcher-darwin-x64": "2.5.1",
"@parcel/watcher-freebsd-x64": "2.5.1",
"@parcel/watcher-linux-arm-glibc": "2.5.1",
"@parcel/watcher-linux-arm-musl": "2.5.1",
"@parcel/watcher-linux-arm64-glibc": "2.5.1",
"@parcel/watcher-linux-arm64-musl": "2.5.1",
"@parcel/watcher-linux-x64-glibc": "2.5.1",
"@parcel/watcher-linux-x64-musl": "2.5.1",
"@parcel/watcher-win32-arm64": "2.5.1",
"@parcel/watcher-win32-ia32": "2.5.1",
"@parcel/watcher-win32-x64": "2.5.1"
}
},
"node_modules/@parcel/watcher-android-arm64": {
"version": "2.5.1",
"resolved": "https://registry.npmjs.org/@parcel/watcher-android-arm64/-/watcher-android-arm64-2.5.1.tgz",
"integrity": "sha512-KF8+j9nNbUN8vzOFDpRMsaKBHZ/mcjEjMToVMJOhTozkDonQFFrRcfdLWn6yWKCmJKmdVxSgHiYvTCef4/qcBA==",
"cpu": [
"arm64"
],
"license": "MIT",
"optional": true,
"os": [
"android"
],
"engines": {
"node": ">= 10.0.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/parcel"
}
},
"node_modules/@parcel/watcher-darwin-arm64": {
"version": "2.5.1",
"resolved": "https://registry.npmjs.org/@parcel/watcher-darwin-arm64/-/watcher-darwin-arm64-2.5.1.tgz",
"integrity": "sha512-eAzPv5osDmZyBhou8PoF4i6RQXAfeKL9tjb3QzYuccXFMQU0ruIc/POh30ePnaOyD1UXdlKguHBmsTs53tVoPw==",
"cpu": [
"arm64"
],
"license": "MIT",
"optional": true,
"os": [
"darwin"
],
"engines": {
"node": ">= 10.0.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/parcel"
}
},
"node_modules/@parcel/watcher-darwin-x64": {
"version": "2.5.1",
"resolved": "https://registry.npmjs.org/@parcel/watcher-darwin-x64/-/watcher-darwin-x64-2.5.1.tgz",
"integrity": "sha512-1ZXDthrnNmwv10A0/3AJNZ9JGlzrF82i3gNQcWOzd7nJ8aj+ILyW1MTxVk35Db0u91oD5Nlk9MBiujMlwmeXZg==",
"cpu": [
"x64"
],
"license": "MIT",
"optional": true,
"os": [
"darwin"
],
"engines": {
"node": ">= 10.0.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/parcel"
}
},
"node_modules/@parcel/watcher-freebsd-x64": {
"version": "2.5.1",
"resolved": "https://registry.npmjs.org/@parcel/watcher-freebsd-x64/-/watcher-freebsd-x64-2.5.1.tgz",
"integrity": "sha512-SI4eljM7Flp9yPuKi8W0ird8TI/JK6CSxju3NojVI6BjHsTyK7zxA9urjVjEKJ5MBYC+bLmMcbAWlZ+rFkLpJQ==",
"cpu": [
"x64"
],
"license": "MIT",
"optional": true,
"os": [
"freebsd"
],
"engines": {
"node": ">= 10.0.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/parcel"
}
},
"node_modules/@parcel/watcher-linux-arm-glibc": {
"version": "2.5.1",
"resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm-glibc/-/watcher-linux-arm-glibc-2.5.1.tgz",
"integrity": "sha512-RCdZlEyTs8geyBkkcnPWvtXLY44BCeZKmGYRtSgtwwnHR4dxfHRG3gR99XdMEdQ7KeiDdasJwwvNSF5jKtDwdA==",
"cpu": [
"arm"
],
"license": "MIT",
"optional": true,
"os": [
"linux"
],
"engines": {
"node": ">= 10.0.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/parcel"
}
},
"node_modules/@parcel/watcher-linux-arm-musl": {
"version": "2.5.1",
"resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm-musl/-/watcher-linux-arm-musl-2.5.1.tgz",
"integrity": "sha512-6E+m/Mm1t1yhB8X412stiKFG3XykmgdIOqhjWj+VL8oHkKABfu/gjFj8DvLrYVHSBNC+/u5PeNrujiSQ1zwd1Q==",
"cpu": [
"arm"
],
"license": "MIT",
"optional": true,
"os": [
"linux"
],
"engines": {
"node": ">= 10.0.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/parcel"
}
},
"node_modules/@parcel/watcher-linux-arm64-glibc": {
"version": "2.5.1",
"resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm64-glibc/-/watcher-linux-arm64-glibc-2.5.1.tgz",
"integrity": "sha512-LrGp+f02yU3BN9A+DGuY3v3bmnFUggAITBGriZHUREfNEzZh/GO06FF5u2kx8x+GBEUYfyTGamol4j3m9ANe8w==",
"cpu": [
"arm64"
],
"license": "MIT",
"optional": true,
"os": [
"linux"
],
"engines": {
"node": ">= 10.0.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/parcel"
}
},
"node_modules/@parcel/watcher-linux-arm64-musl": {
"version": "2.5.1",
"resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm64-musl/-/watcher-linux-arm64-musl-2.5.1.tgz",
"integrity": "sha512-cFOjABi92pMYRXS7AcQv9/M1YuKRw8SZniCDw0ssQb/noPkRzA+HBDkwmyOJYp5wXcsTrhxO0zq1U11cK9jsFg==",
"cpu": [
"arm64"
],
"license": "MIT",
"optional": true,
"os": [
"linux"
],
"engines": {
"node": ">= 10.0.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/parcel"
}
},
"node_modules/@parcel/watcher-linux-x64-glibc": {
"version": "2.5.1",
"resolved": "https://registry.npmjs.org/@parcel/watcher-linux-x64-glibc/-/watcher-linux-x64-glibc-2.5.1.tgz",
"integrity": "sha512-GcESn8NZySmfwlTsIur+49yDqSny2IhPeZfXunQi48DMugKeZ7uy1FX83pO0X22sHntJ4Ub+9k34XQCX+oHt2A==",
"cpu": [
"x64"
],
"license": "MIT",
"optional": true,
"os": [
"linux"
],
"engines": {
"node": ">= 10.0.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/parcel"
}
},
"node_modules/@parcel/watcher-linux-x64-musl": {
"version": "2.5.1",
"resolved": "https://registry.npmjs.org/@parcel/watcher-linux-x64-musl/-/watcher-linux-x64-musl-2.5.1.tgz",
"integrity": "sha512-n0E2EQbatQ3bXhcH2D1XIAANAcTZkQICBPVaxMeaCVBtOpBZpWJuf7LwyWPSBDITb7In8mqQgJ7gH8CILCURXg==",
"cpu": [
"x64"
],
"license": "MIT",
"optional": true,
"os": [
"linux"
],
"engines": {
"node": ">= 10.0.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/parcel"
}
},
"node_modules/@parcel/watcher-win32-arm64": {
"version": "2.5.1",
"resolved": "https://registry.npmjs.org/@parcel/watcher-win32-arm64/-/watcher-win32-arm64-2.5.1.tgz",
"integrity": "sha512-RFzklRvmc3PkjKjry3hLF9wD7ppR4AKcWNzH7kXR7GUe0Igb3Nz8fyPwtZCSquGrhU5HhUNDr/mKBqj7tqA2Vw==",
"cpu": [
"arm64"
],
"license": "MIT",
"optional": true,
"os": [
"win32"
],
"engines": {
"node": ">= 10.0.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/parcel"
}
},
"node_modules/@parcel/watcher-win32-ia32": {
"version": "2.5.1",
"resolved": "https://registry.npmjs.org/@parcel/watcher-win32-ia32/-/watcher-win32-ia32-2.5.1.tgz",
"integrity": "sha512-c2KkcVN+NJmuA7CGlaGD1qJh1cLfDnQsHjE89E60vUEMlqduHGCdCLJCID5geFVM0dOtA3ZiIO8BoEQmzQVfpQ==",
"cpu": [
"ia32"
],
"license": "MIT",
"optional": true,
"os": [
"win32"
],
"engines": {
"node": ">= 10.0.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/parcel"
}
},
"node_modules/@parcel/watcher-win32-x64": {
"version": "2.5.1",
"resolved": "https://registry.npmjs.org/@parcel/watcher-win32-x64/-/watcher-win32-x64-2.5.1.tgz",
"integrity": "sha512-9lHBdJITeNR++EvSQVUcaZoWupyHfXe1jZvGZ06O/5MflPcuPLtEphScIBL+AiCWBO46tDSHzWyD0uDmmZqsgA==",
"cpu": [
"x64"
],
"license": "MIT",
"optional": true,
"os": [
"win32"
],
"engines": {
"node": ">= 10.0.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/parcel"
}
},
"node_modules/@sindresorhus/slugify": { "node_modules/@sindresorhus/slugify": {
"version": "1.1.2", "version": "1.1.2",
"resolved": "https://registry.npmjs.org/@sindresorhus/slugify/-/slugify-1.1.2.tgz", "resolved": "https://registry.npmjs.org/@sindresorhus/slugify/-/slugify-1.1.2.tgz",
@ -606,6 +904,19 @@
"node": ">= 0.6.0" "node": ">= 0.6.0"
} }
}, },
"node_modules/detect-libc": {
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-1.0.3.tgz",
"integrity": "sha512-pGjwhsmsp4kL2RTz08wcOlGN83otlqHeD/Z5T8GXZB+/YcpQ/dgo+lbU8ZsGxV0HIvqqxo9l7mqYwyYMD9bKDg==",
"license": "Apache-2.0",
"optional": true,
"bin": {
"detect-libc": "bin/detect-libc.js"
},
"engines": {
"node": ">=0.10"
}
},
"node_modules/dev-ip": { "node_modules/dev-ip": {
"version": "1.0.1", "version": "1.0.1",
"resolved": "https://registry.npmjs.org/dev-ip/-/dev-ip-1.0.1.tgz", "resolved": "https://registry.npmjs.org/dev-ip/-/dev-ip-1.0.1.tgz",
@ -1101,9 +1412,10 @@
} }
}, },
"node_modules/immutable": { "node_modules/immutable": {
"version": "4.3.5", "version": "5.1.4",
"resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.5.tgz", "resolved": "https://registry.npmjs.org/immutable/-/immutable-5.1.4.tgz",
"integrity": "sha512-8eabxkth9gZatlwl5TBuJnCsoTADlL6ftEr7A4qgdaTsPyreilDSnUk57SO+jfKcNtxPa22U5KK6DSeAYhpBJw==" "integrity": "sha512-p6u1bG3YSnINT5RQmx/yRZBpenIl30kVxkTLDyHLIMk0gict704Q9n+thfDI7lTRm9vXdDYutVzXhzcThxTnXA==",
"license": "MIT"
}, },
"node_modules/inflight": { "node_modules/inflight": {
"version": "1.0.6", "version": "1.0.6",
@ -1561,6 +1873,13 @@
"resolved": "https://registry.npmjs.org/neo-async/-/neo-async-2.6.2.tgz", "resolved": "https://registry.npmjs.org/neo-async/-/neo-async-2.6.2.tgz",
"integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==" "integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw=="
}, },
"node_modules/node-addon-api": {
"version": "7.1.1",
"resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-7.1.1.tgz",
"integrity": "sha512-5m3bsyrjFWE1xf7nz7YXdN4udnVtXK6/Yfgn5qnahL6bCkf2yKt4k3nuTKAtT4r3IG8JNR2ncsIMdZuAzJjHQQ==",
"license": "MIT",
"optional": true
},
"node_modules/normalize-path": { "node_modules/normalize-path": {
"version": "3.0.0", "version": "3.0.0",
"resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz", "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
@ -1573,6 +1892,7 @@
"version": "8.0.1", "version": "8.0.1",
"resolved": "https://registry.npmjs.org/normalize.css/-/normalize.css-8.0.1.tgz", "resolved": "https://registry.npmjs.org/normalize.css/-/normalize.css-8.0.1.tgz",
"integrity": "sha512-qizSNPO93t1YUuUhP22btGOo3chcvDFqFaj2TRybP0DMxkHOCTYwp3n34fel4a31ORXy4m1Xq0Gyqpb5m33qIg==", "integrity": "sha512-qizSNPO93t1YUuUhP22btGOo3chcvDFqFaj2TRybP0DMxkHOCTYwp3n34fel4a31ORXy4m1Xq0Gyqpb5m33qIg==",
"dev": true,
"license": "MIT" "license": "MIT"
}, },
"node_modules/nunjucks": { "node_modules/nunjucks": {
@ -1986,12 +2306,13 @@
} }
}, },
"node_modules/sass": { "node_modules/sass": {
"version": "1.72.0", "version": "1.93.2",
"resolved": "https://registry.npmjs.org/sass/-/sass-1.72.0.tgz", "resolved": "https://registry.npmjs.org/sass/-/sass-1.93.2.tgz",
"integrity": "sha512-Gpczt3WA56Ly0Mn8Sl21Vj94s1axi9hDIzDFn9Ph9x3C3p4nNyvsqJoQyVXKou6cBlfFWEgRW4rT8Tb4i3XnVA==", "integrity": "sha512-t+YPtOQHpGW1QWsh1CHQ5cPIr9lbbGZLZnbihP/D/qZj/yuV68m8qarcV17nvkOX81BCrvzAlq2klCQFZghyTg==",
"license": "MIT",
"dependencies": { "dependencies": {
"chokidar": ">=3.0.0 <4.0.0", "chokidar": "^4.0.0",
"immutable": "^4.0.0", "immutable": "^5.0.2",
"source-map-js": ">=0.6.2 <2.0.0" "source-map-js": ">=0.6.2 <2.0.0"
}, },
"bin": { "bin": {
@ -1999,6 +2320,37 @@
}, },
"engines": { "engines": {
"node": ">=14.0.0" "node": ">=14.0.0"
},
"optionalDependencies": {
"@parcel/watcher": "^2.4.1"
}
},
"node_modules/sass/node_modules/chokidar": {
"version": "4.0.3",
"resolved": "https://registry.npmjs.org/chokidar/-/chokidar-4.0.3.tgz",
"integrity": "sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==",
"license": "MIT",
"dependencies": {
"readdirp": "^4.0.1"
},
"engines": {
"node": ">= 14.16.0"
},
"funding": {
"url": "https://paulmillr.com/funding/"
}
},
"node_modules/sass/node_modules/readdirp": {
"version": "4.1.2",
"resolved": "https://registry.npmjs.org/readdirp/-/readdirp-4.1.2.tgz",
"integrity": "sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg==",
"license": "MIT",
"engines": {
"node": ">= 14.18.0"
},
"funding": {
"type": "individual",
"url": "https://paulmillr.com/funding/"
} }
}, },
"node_modules/section-matter": { "node_modules/section-matter": {

2
package.json
View file

@ -36,6 +36,6 @@
"dependencies": { "dependencies": {
"@11ty/eleventy": "^2.0.1", "@11ty/eleventy": "^2.0.1",
"bootstrap-icons": "^1.13.1", "bootstrap-icons": "^1.13.1",
"sass": "^1.69.4" "sass": "^1.93.0"
} }
} }

31
source/code/hippie/functions.js
View file

@ -11,16 +11,6 @@ function setup() {
console.dir(hippie); console.dir(hippie);
console.groupEnd(); console.groupEnd();
} }
// 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 // MODULE Scroll navigation
@ -70,6 +60,27 @@ function HippieScroll($tp, $dn) {
}); });
} }
function HippieFade(toggleElement, initState) {
'use strict';
const fragment = document.createDocumentFragment();
const overlay = document.createElement('div');
overlay.id = 'mouse-overlay';
if (initState) {
overlay.classList.add('active');
}
toggleElement.addEventListener('click', function () {
overlay.classList.toggle('active');
});
fragment.appendChild(overlay);
document.body.style.position = 'relative';
document.body.prepend(fragment);
}
// MODULE Meta elements // MODULE Meta elements
function HippieMeta($ma, $pp) { function HippieMeta($ma, $pp) {
'use strict'; 'use strict';

2
source/code/hippie/variables.js
View file

@ -27,4 +27,4 @@ const flagColors = [
'b7e0f0', 'b7e0f0',
'6bc7d9', '6bc7d9',
'52bed1' '52bed1'
] ];

4
source/screens/demo/components.njk
View file

@ -80,6 +80,10 @@ tags:
<h6>Überschrift 6</h6> <h6>Überschrift 6</h6>
<p>Mit Absatz innerhalb von <code>&lt;hgroup&gt;</code>.</p> <p>Mit Absatz innerhalb von <code>&lt;hgroup&gt;</code>.</p>
</hgroup> </hgroup>
<hgroup>
<h2>Überschrift 1 oder 2</h2>
<p>Mit Absatz innerhalb von <code>&lt;hgroup&gt;</code>.</p>
</hgroup>
<h2>&lt;header&gt;</h2> <h2>&lt;header&gt;</h2>
<header>Kopfbereich</header> <header>Kopfbereich</header>
<pre class="pre_code"><code>header.header_page</code></pre> <pre class="pre_code"><code>header.header_page</code></pre>

18
source/screens/demo/examples/intro.njk
View file

@ -5,20 +5,10 @@ tags:
--- ---
{% set pageId = "init" %} {% set pageId = "init" %}
{% set bodyClass = "body_intro" %}
{% extends "hippie/_app.njk" %} {% extends "hippie/_app_frame.njk" %}
{% import "hippie/macros/_placeholder.njk" as ph %} {% 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 %} {% block body %}
<div id="loader" class="step op_show"> <div id="loader" class="step op_show">
@ -51,7 +41,7 @@ tags:
<p>This needs to be seen and acknowledged.<br>So an interaction must be made to continue.</p> <p>This needs to be seen and acknowledged.<br>So an interaction must be made to continue.</p>
</div> </div>
<div id="idle" class="step op_hide"> <div id="idle" class="step op_hide">
<div class="mouse_over"></div> <div class="mouse-overlay"></div>
<div class="hello">Hello World!</div> <div class="hello">Hello World!</div>
<p class="hello">Only left mouse click or any key</p> <p class="hello">Only left mouse click or any key</p>
</div> </div>
@ -140,7 +130,7 @@ tags:
.then(showAgreement) .then(showAgreement)
.then(showIdle) .then(showIdle)
.catch(er => console.error(er)) .catch(er => console.error(er))
. finally(() => { .finally(() => {
console.debug('Init end.', isAgree); console.debug('Init end.', isAgree);
// location = 'demo/examples/ui/new.html'; // location = 'demo/examples/ui/new.html';
}); });

14
source/screens/demo/examples/ui/index.njk
View file

@ -4,20 +4,10 @@ tags:
- demoExample - demoExample
- index - index
--- ---
{% extends "hippie/_app.njk" %} {% extends "demo/_default.njk" %}
{% import "hippie/macros/_placeholder.njk" as ph %} {% import "hippie/macros/_placeholder.njk" as ph %}
{% block title %} {% block title %}{{ title }}{% endblock %}
{{ title }}
{% endblock %}
{% block links %}
<link href="{{ pageBase }}css/ui.css" media="all" rel="stylesheet"/>
{% endblock %}
{% block head %}
{{ super() }}
{% endblock %}
{% block body %} {% block body %}
<div class="sec_main_center"> <div class="sec_main_center">

14
source/screens/demo/examples/ui/new.njk
View file

@ -6,21 +6,9 @@ tags:
{% set pageId = page.fileSlug %} {% set pageId = page.fileSlug %}
{% set bodyClass = "body_new" %} {% set bodyClass = "body_new" %}
{% extends "hippie/_app.njk" %} {% extends "hippie/_app_frame.njk" %}
{% import "hippie/macros/_header.njk" as header %} {% import "hippie/macros/_header.njk" as header %}
{% block title %}{{ title }}
{% endblock %}
{% block links %}
{{ super() }}
<link href="{{ pageBase }}css/ui.css" media="all" rel="stylesheet"/>
{% endblock %}
{% block head %}
{{ super() }}
{% endblock %}
{% block body %} {% block body %}
{{ header.status(hippie, new) }} {{ header.status(hippie, new) }}
<header class="area menu io"> <header class="area menu io">

3
source/screens/demo/examples/ui/tui.njk
View file

@ -7,9 +7,6 @@ tags:
{% extends "hippie/_app_frame.njk" %} {% extends "hippie/_app_frame.njk" %}
{% block title %}{{ title }}
{% endblock %}
{% block body %} {% block body %}
{{ io.frameHeader('title-bar') }} {{ io.frameHeader('title-bar') }}
<main class="io"></main> <main class="io"></main>

30
source/screens/demo/layouts.njk
View file

@ -22,7 +22,7 @@ tags:
<p>Die Elemente werden fortlaufend komplexer</p> <p>Die Elemente werden fortlaufend komplexer</p>
</header> </header>
<article> <article>
<h2>Bereiche</h2> <h2>Bereiche (sections)</h2>
<h3>section</h3> <h3>section</h3>
<pre class="pre_code"><code>section.overflow>div.float_space_left>img^p+p>br+a.lineLink</code></pre> <pre class="pre_code"><code>section.overflow>div.float_space_left>img^p+p>br+a.lineLink</code></pre>
<section class="overflow"> <section class="overflow">
@ -30,12 +30,7 @@ tags:
<p>{{ ph.name() }}<br>{{ ph.address() }}</p> <p>{{ ph.name() }}<br>{{ ph.address() }}</p>
<p>{{ ph.phone() }}<br>{{ ph.email('lineLink') }}</p> <p>{{ ph.phone() }}<br>{{ ph.email('lineLink') }}</p>
</section> </section>
<pre class="pre_code"><code>div.space_left_fourth>(hr+p+hr)</code></pre> <h3>nav</h3>
<div class="space_left_fourth">
<hr/>
<p>Eingerückter Inhalt</p>
<hr/>
</div>
<pre class="pre_code"><code>div.overflow>(nav.float_space_left>ul>(li>a.a_button{punkt $})*4+nav>ul>(li>a.a_button_border{stufe $})*4)</code></pre> <pre class="pre_code"><code>div.overflow>(nav.float_space_left>ul>(li>a.a_button{punkt $})*4+nav>ul>(li>a.a_button_border{stufe $})*4)</code></pre>
<div class="overflow"> <div class="overflow">
<nav class="float_space_left"> <nav class="float_space_left">
@ -107,6 +102,7 @@ tags:
</ul> </ul>
</nav> </nav>
</div> </div>
<h3>header</h3>
<pre class="pre_code"><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> <pre class="pre_code"><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"> <header class="header_page demo__header header_fancy">
<h1>Aufmacher</h1> <h1>Aufmacher</h1>
@ -175,6 +171,9 @@ tags:
</footer> </footer>
</div> </div>
</div> </div>
<h2>Interaktiv (interactive)</h2>
<h3>input</h3>
<div class="flex inline"> <div class="flex inline">
<input value="Undefiniert"/> <input value="Undefiniert"/>
<input type="text" size="8" value="Text"/> <input type="text" size="8" value="Text"/>
@ -182,10 +181,9 @@ tags:
<input type="button" value="Auswählen"> <input type="button" value="Auswählen">
<input type="submit" value="Senden" disabled="disabled"/> <input type="submit" value="Senden" disabled="disabled"/>
</div> </div>
<h3>form</h3>
<form method="get"> <form method="get">
<p class="label"> <p>Show me a
Show me a
<select name="F"> <select name="F">
<option value="0">Plain list</option> <option value="0">Plain list</option>
<option value="1" selected="selected">Fancy list</option> <option value="1" selected="selected">Fancy list</option>
@ -212,7 +210,7 @@ tags:
</p> </p>
</form> </form>
<h2>Gruppierung</h2> <h2>Gruppierung (grouping)</h2>
<h3>p</h3> <h3>p</h3>
<pre class="pre_code"><code>p.txt_right+p.txt_center+p.txt_left</code></pre> <pre class="pre_code"><code>p.txt_right+p.txt_center+p.txt_left</code></pre>
<p class="txt_right">Rechts</p> <p class="txt_right">Rechts</p>
@ -230,14 +228,13 @@ tags:
<h1>Kann mehrmals, ohne großen Abstand oberhalb, untereinander stehen.</h1> <h1>Kann mehrmals, ohne großen Abstand oberhalb, untereinander stehen.</h1>
<h2>Überschrift 2</h2> <h2>Überschrift 2</h2>
<h2>kann das ebenso.</h2> <h2>kann das ebenso.</h2>
<h3>hr</h3> <h3>hr</h3>
<pre class="pre_code"><code>hr.space_even_half</code></pre> <pre class="pre_code"><code>hr.space_even_half</code></pre>
<hr class="space_even_half"> <hr class="space_even_half">
<pre class="pre_code"><code>hr.hr_dotted.space_even_fourth</code></pre> <pre class="pre_code"><code>hr.hr_dotted.space_even_fourth</code></pre>
<hr class="hr_dotted space_even_fourth"> <hr class="hr_dotted space_even_fourth">
<h3>ul</h3> <h3>ul</h3>
<pre class="pre_code"><code>ul.list_link>(li>a)+li>a>img+span</code></pre> <pre class="pre_code"><code>nav>ul.list_link>(li>a)+li>a>img+span</code></pre>
<nav> <nav>
<ul class="list_link"> <ul class="list_link">
<li>{{ ph.email('', '📧 name@domain.tld') }}</li> <li>{{ ph.email('', '📧 name@domain.tld') }}</li>
@ -246,6 +243,13 @@ tags:
</li> </li>
</ul> </ul>
</nav> </nav>
<h3>div</h3>
<pre class="pre_code"><code>div.space_left_fourth>(hr+p+hr)</code></pre>
<div class="space_left_fourth">
<hr/>
<p>Eingerückter Inhalt</p>
<hr/>
</div>
<h2>Tabellen</h2> <h2>Tabellen</h2>
<pre class="pre_code"><code>table.table_link>thead>tr>th{&amp;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> <pre class="pre_code"><code>table.table_link>thead>tr>th{&amp;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>

16
source/style/demo.scss
View file

@ -1,16 +1,16 @@
// Start a new project by creating YOUR-PROJECT.scss and _YOUR-CONFIG.scss // Start a new project by creating YOUR-PROJECT.scss and _YOUR-CONFIG.scss
// Then import your config and hippie // Then import your config and hippie
// NOTE // No css rules allowed in here // NOTE: No css rules allowed in here
// ------------------------------------------------------------------------------ // ------------------------------------------------------------------------------
@import "demo_config"; @use "demo_config";
@import "hippie-style/hippie"; @use "hippie-style/hippie";
// Additional Modules and variables // Additional Modules and variables
// in dependency to other basic styles // in dependency to other basic styles
// could be defined here // could be defined here
// ----------------------------------------------------------------------------- // -----------------------------------------------------------------------------
@import "modules/card/card_module"; @use "modules/card/card_module";
@import "modules/portal/portal_module"; @use "modules/portal/portal_module";
@import "modules/songbook/songbook_module"; @use "modules/songbook/songbook_module";
@import "modules/demo/demo_module"; @use "modules/demo/demo_module";
// @import "modules/YOUR-MODULE/YOUR-FILES"; // @use "modules/YOUR-MODULE/YOUR-FILES";

6
source/style/demo_basic.scss
View file

@ -2,12 +2,12 @@
// Then import your config and hippie // Then import your config and hippie
// NOTE // No css rules allowed in here // NOTE // No css rules allowed in here
// ------------------------------------------------------------------------------ // ------------------------------------------------------------------------------
@import "demo_config"; @use "demo_config";
@import "hippie-style/basic"; @use "hippie-style/basic";
// Additional Modules and variables // Additional Modules and variables
// in dependency to other basic styles // in dependency to other basic styles
// could be defined here // could be defined here
// ----------------------------------------------------------------------------- // -----------------------------------------------------------------------------
// @import "modules/YOUR-MODULE/YOUR-FILES"; // @use "modules/YOUR-MODULE/YOUR-FILES";

2
source/style/hippie-style

@ -1 +1 @@
Subproject commit fb1bd808a0eac6b1031d1bf9f68487eb257053ff Subproject commit 4e4f8814d319c2f2a26a3ae5ab1c812e1aac8483

12
source/style/modules/card/_card_module.scss
View file

@ -1,3 +1,5 @@
@use "../../hippie-style/hippie";
// Card module styles // Card module styles
// ------------------------------------------------------------------------------ // ------------------------------------------------------------------------------
@ -26,7 +28,7 @@
height: 100vh; height: 100vh;
* { * {
font-family: $family_text_card; font-family: hippie.$family_text_card;
// text-align: center; // text-align: center;
} }
@ -58,10 +60,14 @@
// padding-left: 1em; // padding-left: 1em;
// text-indent: -1em; // text-indent: -1em;
&::before { content: "*\0000a0" } &::before {
content: "*\0000a0"
}
} }
.decent { color: #666 } .decent {
color: #666
}
a { a {
color: #000; color: #000;

164
source/style/modules/demo/_demo_module.scss
View file

@ -1,3 +1,7 @@
@use "sass:color";
@use "../../hippie-style/hippie";
.demo__intro { .demo__intro {
@extend .sec_main_center; @extend .sec_main_center;
@extend .sec_main_status; @extend .sec_main_status;
@ -7,7 +11,7 @@
@extend .sec_main_status; @extend .sec_main_status;
position: relative; position: relative;
min-height: 50vh; min-height: 50vh;
border-color: $foxtrot_color; border-color: hippie.basic_color(foxtrot);
h1:first-of-type { h1:first-of-type {
margin-top: 0; margin-top: 0;
@ -22,7 +26,7 @@
} }
.demo__header { .demo__header {
padding: $space_double; padding: hippie.$space_double;
nav { nav {
@ -33,19 +37,19 @@
} }
.header_fancy { .header_fancy {
background-color: transparentize($bravo_color, 0.4); background-color: color.adjust(hippie.basic_color(bravo), $alpha: -0.4);
nav { nav {
a { a {
background-color: transparentize($alpha_color, 0.4); background-color: color.adjust(hippie.basic_color(alpha), $alpha: -0.4);
color: $alpha_color; color: hippie.basic_color(alpha);
&:active, &:active,
&:focus, &:focus,
&:hover { &:hover {
background-color: rgba($color_brightest, 0.2); background-color: rgba(hippie.$color_brightest, 0.2);
color: $color_brightest; color: hippie.$color_brightest;
} }
} }
} }
@ -56,7 +60,7 @@
top: 0; top: 0;
left: 0; left: 0;
width: 100%; width: 100%;
background-color: transparentize($charlie_color, 0.4); background-color: color.adjust(hippie.basic_color(charlie), $alpha: -0.4);
nav { nav {
@ -65,8 +69,8 @@
&:active, &:active,
&:focus, &:focus,
&:hover { &:hover {
background-color: rgba($color_brightest, 0.2); background-color: rgba(hippie.$color_brightest, 0.2);
color: $color_brightest; color: hippie.$color_brightest;
} }
} }
} }
@ -75,20 +79,20 @@
.demo__footer { .demo__footer {
width: 100%; width: 100%;
// height: 128px; // height: 128px;
padding: $space_double 0; padding: hippie.$space_double 0;
background-color: $color_dark; background-color: hippie.$color_dark;
color: $color_bright; color: hippie.$color_bright;
nav { nav {
a { a {
color: $color_brightest; color: hippie.$color_brightest;
} }
} }
} }
.demo__sprite_down { .demo__sprite_down {
@include sprite($down); @include hippie.sprite(hippie.$down);
// width: 32px; // width: 32px;
// height: 32px; // height: 32px;
// background-image: url(../art/sprites.png); // background-image: url(../art/sprites.png);
@ -96,7 +100,7 @@
} }
.demo__sprite_up { .demo__sprite_up {
@include sprite($up); @include hippie.sprite(hippie.$up);
// width: 32px; // width: 32px;
// height: 64px; // height: 64px;
// background-image: url(../art/sprites.png); // background-image: url(../art/sprites.png);
@ -104,7 +108,7 @@
} }
.demo__sprite_meta { .demo__sprite_meta {
@include sprite($meta); @include hippie.sprite(hippie.$meta);
// width: 32px; // width: 32px;
// height: 32px; // height: 32px;
// background-image: url(../art/sprites.png); // background-image: url(../art/sprites.png);
@ -120,7 +124,7 @@
min-width: 128px; min-width: 128px;
min-height: 128px; min-height: 128px;
border-radius: 50%; border-radius: 50%;
background-color: $delta_color; background-color: hippie.basic_color(delta);
} }
} }
@ -129,89 +133,123 @@
} }
.demo__credits { .demo__credits {
margin: $space_small 0 $space_basic 0; margin: hippie.$space_small 0 hippie.$space_basic 0;
} }
.demo__button_32 {
width: 32px;
height: 32px;
}
.demo__queries > p { .demo__queries > p {
padding: $padding_basic; padding: hippie.$padding_basic;
} }
.query_phoneUp { .query_phoneUp {
@include forPhoneUp {background-color: rgba($color_text_basic, 0.2)}; @include hippie.forPhoneUp {
background-color: rgba(hippie.$color_text_basic, 0.2)
}
;
} }
.query_phoneOnly { .query_phoneOnly {
@include forPhoneOnly { background-color: rgba($color_text_basic, 0.2); } @include hippie.forPhoneOnly {
background-color: rgba(hippie.$color_text_basic, 0.2);
}
} }
.query_tabletPortaitOnly { .query_tabletPortraitOnly {
@include forTabletPortraitOnly { background-color: rgba($color_text_basic, 0.2); } @include hippie.forTabletPortraitOnly {
background-color: rgba(hippie.$color_text_basic, 0.2);
}
} }
.query_tabletPortraitUp { .query_tabletPortraitUp {
@include forTabletPortraitUp { background-color: rgba($color_text_basic, 0.2); } @include hippie.forTabletPortraitUp {
background-color: rgba(hippie.$color_text_basic, 0.2);
}
} }
.query_tabletLandscapeOnly { .query_tabletLandscapeOnly {
@include forTabletLandscapeOnly { background-color: rgba($color_text_basic, 0.2); } @include hippie.forTabletLandscapeOnly {
background-color: rgba(hippie.$color_text_basic, 0.2);
}
} }
.query_tabletLandscapeUp { .query_tabletLandscapeUp {
@include forTabletLandscapeUp { background-color: rgba($color_text_basic, 0.2); } @include hippie.forTabletLandscapeUp {
background-color: rgba(hippie.$color_text_basic, 0.2);
}
} }
.query_desktopOnly { .query_desktopOnly {
@include forDesktopOnly { background-color: rgba($color_text_basic, 0.2); } @include hippie.forDesktopOnly {
background-color: rgba(hippie.$color_text_basic, 0.2);
}
} }
.query_desktopUp { .query_desktopUp {
@include forDesktopUp { background-color: rgba($color_text_basic, 0.2); } @include hippie.forDesktopUp {
background-color: rgba(hippie.$color_text_basic, 0.2);
}
} }
.query_bigDesktopUp { .query_bigDesktopUp {
@include forBigDesktopUp { background-color: rgba($color_text_basic, 0.2); } @include hippie.forBigDesktopUp {
background-color: rgba(hippie.$color_text_basic, 0.2);
}
} }
.demo__query_example { .demo__query_example {
@include goingLarge($screen_tiny) {background-color: $alpha_color; } @include hippie.goingLarge(hippie.$screen_tiny) {
@include goingLarge($screen_small) {background-color: $bravo_color; } background-color: hippie.basic_color(alpha);
@include goingLarge($screen_medium) {background-color: $charlie_color; } }
@include goingLarge($screen_large) {background-color: $delta_color; } @include hippie.goingLarge(hippie.$screen_small) {
@include goingLarge($screen_huge) {background-color: $echo_color; } background-color: hippie.basic_color(bravo);
@include goingLarge($screen_gigantic) {background-color: $foxtrot_color; } }
margin-bottom: $space_small; @include hippie.goingLarge(hippie.$screen_medium) {
padding: $space_small; background-color: hippie.basic_color(charlie);
}
@include hippie.goingLarge(hippie.$screen_large) {
background-color: hippie.basic_color(delta);
}
@include hippie.goingLarge(hippie.$screen_huge) {
background-color: hippie.basic_color(echo);
}
@include hippie.goingLarge(hippie.$screen_gigantic) {
background-color: hippie.basic_color(foxtrot);
}
margin-bottom: hippie.$space_small;
padding: hippie.$space_small;
text-align: center; text-align: center;
&:after { &:after {
@extend code; @extend code;
@include goingLarge($screen_tiny) { @include hippie.goingLarge(hippie.$screen_tiny) {
& { content: '768px'; } & {
content: '768px';
}
} }
@include goingLarge($screen_small) { @include hippie.goingLarge(hippie.$screen_small) {
& { content: '1024px'; } & {
content: '1024px';
}
} }
@include goingLarge($screen_medium) { @include hippie.goingLarge(hippie.$screen_medium) {
& { content: '1280px'; } & {
content: '1280px';
}
} }
@include goingLarge($screen_huge) { @include hippie.goingLarge(hippie.$screen_huge) {
& { content: '1680px'; } & {
content: '1680px';
}
} }
@include goingLarge($screen_gigantic) { @include hippie.goingLarge(hippie.$screen_gigantic) {
& { content: '1920px'; } & {
content: '1920px';
}
} }
content: '< 768px'; content: '< 768px';
padding: $padding_basic; padding: hippie.$padding_basic;
border-radius: $radius_basic; border-radius: hippie.$radius_basic;
color: $color_brightest; color: hippie.$color_brightest;
background-color: rgba($color_front_basic, 0.2); background-color: rgba(hippie.$color_front_basic, 0.2);
} }
} }
@ -225,11 +263,11 @@
} }
.demo__td_pr { .demo__td_pr {
padding-right: $space_double; padding-right: hippie.$space_double;
} }
.demo__td_pl { .demo__td_pl {
padding-left: $space_double; padding-left: hippie.$space_double;
} }
// Index // Index
@ -238,7 +276,7 @@
display: flex; display: flex;
// height: 100%; // height: 100%;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
.hello { .hello {
@ -247,6 +285,6 @@
ul { ul {
padding: 1em 5em; padding: 1em 5em;
background-color: $color_darker; background-color: hippie.$color_darker;
} }
} }

12
source/style/modules/portal/_portal_module.scss
View file

@ -1,5 +1,9 @@
$portal_highlight: $color_highlight_basic; @use "sass:color";
$portal_margin: $space_double;
@use "../../hippie-style/hippie";
$portal_highlight: hippie.$color_highlight_basic;
$portal_margin: hippie.$space_double;
$portal_link_size: 128px; $portal_link_size: 128px;
$portal_icon_size: 64px; $portal_icon_size: 64px;
@ -21,7 +25,7 @@ $portal_icon_size: 64px;
padding-left: $portal_margin; padding-left: $portal_margin;
overflow-x: hidden; overflow-x: hidden;
overflow-y: auto; overflow-y: auto;
transition: $transition_best; transition: hippie.$transition_best;
&:hover { &:hover {
flex: 3; flex: 3;
@ -66,7 +70,7 @@ $portal_icon_size: 64px;
background-position: center; background-position: center;
&:hover { &:hover {
background-color: transparentize($portal_highlight, $amount: 0.2); background-color: color.adjust($portal_highlight, $alpha: -0.2);
border-color: $portal_highlight; border-color: $portal_highlight;
} }

8
source/style/modules/songbook/_songbook_module.scss
View file

@ -1,3 +1,5 @@
@use "../../hippie-style/hippie";
.songbook_song { .songbook_song {
pre { pre {
@extend .pre_code @extend .pre_code
@ -5,16 +7,16 @@
header { header {
h2 { h2 {
margin-bottom: $space_basic; margin-bottom: hippie.$space_basic;
} }
h6 { h6 {
color: $color_brightest; color: hippie.$color_brightest;
} }
h2+h6 { h2+h6 {
margin-top: 0; margin-top: 0;
margin-bottom: $space_small; margin-bottom: hippie.$space_small;
} }
} }
} }

4
source/style/modules/ui/_form_module.scss
View file

@ -1,9 +1,11 @@
@use "../../hippie-style/hippie";
#grid { #grid {
display: grid; display: grid;
gap: 8px; gap: 8px;
grid-template-columns: repeat(4, 1fr); grid-template-columns: repeat(4, 1fr);
grid-auto-rows: minmax(64px, auto); grid-auto-rows: minmax(64px, auto);
margin-inline: $space_small; margin-inline: hippie.$space_small;
} }
#grid>div { #grid>div {

44
source/style/modules/ui/_frame_module.scss
View file

@ -1,3 +1,7 @@
@use "sass:color";
@use "../../hippie-style/hippie";
@mixin nav-spacer($name, $size, $orientation) { @mixin nav-spacer($name, $size, $orientation) {
.spacer.#{$name} { .spacer.#{$name} {
width: $size; width: $size;
@ -7,7 +11,7 @@
.body_frame { .body_frame {
@extend %flex-column; @extend %flex-column;
background-color: $color_back_basic; background-color: hippie.$color_back_basic;
position: relative; position: relative;
height: 100%; height: 100%;
@ -18,7 +22,7 @@
border: 1px solid transparent; border: 1px solid transparent;
} }
&>header { & > header {
background-color: rgba(0, 0, 0, .1); background-color: rgba(0, 0, 0, .1);
} }
@ -33,18 +37,18 @@
section { section {
&>header, & > header,
&>footer { & > footer {
background-color: transparentize($color_back_io, .5); background-color: color.adjust(hippie.$color_back_io, $alpha: -.5);
&:hover { &:hover {
background-color: $color_back_io; background-color: hippie.$color_back_io;
} }
} }
} }
section, section,
section>div { section > div {
flex: 1; flex: 1;
} }
@ -82,53 +86,51 @@
textarea { textarea {
resize: none; resize: none;
max-height: 128px; max-height: 128px;
margin: $margin_io; margin: hippie.$margin_io;
border: 0; border: 0;
padding: $space_half; padding: hippie.$space_half;
// color: $color_text_io; // color: hippie.$color_text_io;
color: white; color: white;
// background-color: $color_back_io; // background-color: hippie.$color_back_io;
background-color: transparent; background-color: transparent;
line-height: 1.2; line-height: 1.2;
} }
} }
#content { #content {
background-color: $color_back_io; background-color: hippie.$color_back_io;
&>table { & > table {
width: 100%; width: 100%;
margin: 0; margin: 0;
border: 0; border: 0;
tr:hover td { tr:hover td {
background-color: $color_highlight_basic; background-color: hippie.$color_highlight_basic;
} }
th { th {
border: 1px solid $color_border_io; border: 1px solid hippie.$color_border_io;
} }
td { td {
border-width: 0 1px; border-width: 0 1px;
border-style: solid; border-style: solid;
border-color: $color_border_io; border-color: hippie.$color_border_io;
} }
} }
} }
.io { .io {
.spacer { .spacer {
margin: 0; margin: 0;
border: $border_dotted; border: hippie.$border_dotted;
padding: 0; padding: 0;
opacity: .25; opacity: .25;
} }
@include nav-spacer('a', $space_double, false); @include nav-spacer('a', hippie.$space_double, false);
@include nav-spacer('b', $space_small, false); @include nav-spacer('b', hippie.$space_small, false);
} }

24
source/style/modules/ui/_new_module.scss
View file

@ -1,13 +1,17 @@
@use "sass:color";
@use "../../hippie-style/hippie";
$module_top_height: 32px; $module_top_height: 32px;
$body_top_space: $module_top_height + $space_basic; $body_top_space: $module_top_height + hippie.$space_basic;
.body_new { .body_new {
@extend %flex-column; @extend %flex-column;
padding: $body_top_space $space_basic $space_basic; padding: $body_top_space hippie.$space_basic hippie.$space_basic;
} }
.area { .area {
transition: $transition_best; transition: hippie.$transition_best;
&:hover { &:hover {
background-color: #999; background-color: #999;
@ -26,13 +30,13 @@ $body_top_space: $module_top_height + $space_basic;
.item { .item {
// height: unset; // height: unset;
border-color: darken($color_back_basic, $color_diff_tiny); border-color: color.scale(hippie.$color_back_basic, $lightness: -4%);
border-style: dotted; border-style: dotted;
border-width: $width_border_8; border-width: hippie.$width_border_8;
border-radius: $width_border_8; border-radius: hippie.$width_border_8;
padding: $space_basic; padding: hippie.$space_basic;
background-color: rgb($color_back_basic, .5); background-color: rgb(hippie.$color_back_basic, .5);
// background-color: lighten($color_back_basic, $color_diff_tiny); // background-color: lighten(hippie.$color_back_basic, hippie.$color_diff_tiny);
// background-color: gold; // background-color: gold;
} }
@ -48,7 +52,7 @@ $body_top_space: $module_top_height + $space_basic;
width: 100%; width: 100%;
height: $module_top_height; height: $module_top_height;
background-color: rgb(0, 0, 0, .8); background-color: rgb(0, 0, 0, .8);
z-index: $z_top; z-index: hippie.$z_top;
div:last-child { div:last-child {
flex: 1; flex: 1;

71
source/style/ui.scss
View file

@ -1,16 +1,24 @@
@use "sass:map"; @use "sass:map";
@import "demo_config"; @use "demo_config";
@import "hippie-style/hippie"; @use "hippie-style/hippie";
$color_gui_back: $color_dark; @use "modules/ui/frame_module";
@use "modules/ui/new_module";
@use "modules/ui/drag_module";
@use "modules/ui/form_module";
@use "modules/ui/game_module";
@use "modules/ui/gallery_module";
$color_gui_back: hippie.$color_dark;
$space_gui_half: hippie.$space_half;
.op_show { .op_show {
transition: $transition_show; transition: hippie.$transition_show;
} }
.op_hide { .op_hide {
transition: $transition_hide; transition: hippie.$transition_hide;
} }
.html_ui { .html_ui {
@ -22,6 +30,10 @@ $color_gui_back: $color_dark;
} }
} }
.body_intro {
background-color: black;
}
.step { .step {
@extend %full_parent; @extend %full_parent;
} }
@ -42,11 +54,11 @@ $color_gui_back: $color_dark;
#wrap { #wrap {
flex: 1; flex: 1;
background-color: $color_back_basic; background-color: hippie.$color_back_basic;
} }
#progress { #progress {
width: 0%; width: 0;
height: 100%; height: 100%;
background-color: black; background-color: black;
} }
@ -60,9 +72,9 @@ $color_gui_back: $color_dark;
flex-shrink: 0; flex-shrink: 0;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
margin-inline: $space_half; margin-inline: $space_gui_half;
padding-block: calc($space_half - 1px) $space_half; padding-block: calc($space_gui_half - 1px) $space_gui_half;
line-height: $line_basic; line-height: hippie.$line_basic;
text-align: center; text-align: center;
} }
@ -74,7 +86,7 @@ $color_gui_back: $color_dark;
#spinner { #spinner {
width: 2.5em; width: 2.5em;
background-color: $color_back_basic; background-color: hippie.$color_back_basic;
color: black; color: black;
span { span {
@ -93,7 +105,7 @@ $color_gui_back: $color_dark;
} }
#intro { #intro {
z-index: map.get($z-indexes, "content-top"); z-index: map.get(hippie.$z-indexes, "content-top");
overflow: hidden; overflow: hidden;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -119,8 +131,8 @@ $color_gui_back: $color_dark;
} }
*+h1 { *+h1 {
margin-top: $space_small; margin-top: hippie.$space_small;
margin-bottom: $space_large; margin-bottom: hippie.$space_large;
} }
} }
@ -130,7 +142,7 @@ $color_gui_back: $color_dark;
li { li {
list-style: none; list-style: none;
padding-inline: $space_double; padding-inline: hippie.$space_double;
} }
} }
@ -144,49 +156,44 @@ $color_gui_back: $color_dark;
#agreement { #agreement {
flex-direction: column; flex-direction: column;
background-color: $bravo_color; background-color: map.get(hippie.$color_palette, bravo);
user-select: none; user-select: none;
h1 { h1 {
margin-top: 0; margin-top: 0;
color: $color_brightest; color: hippie.$color_brightest;
} }
} }
#idle { #idle {
background-color: $color_back_basic; background-color: hippie.$color_back_basic;
transition: background-color 4s; transition: background-color 4s;
&:hover>.mouse_over { &:hover>.mouse-overlay {
background-color: transparent !important; background-color: transparent !important;
transition: background-color $duration_basic $timing_basic 0s !important; transition: background-color hippie.$duration_basic hippie.$timing_basic 0s !important;
} }
} }
.toast { .toast {
z-index: map.get($z-indexes, "toast"); z-index: map.get(hippie.$z-indexes, "toast");
position: fixed; position: fixed;
right: $space_half; right: $space_gui_half;
bottom: $space_double; bottom: hippie.$space_double;
p { p {
color: white; color: white;
} }
kbd { kbd {
border-color: $color_brighter; border-color: hippie.$color_brighter;
color: $color_back_io; color: hippie.$color_back_io;
} }
} }
.hello { .hello {
flex: 0 1 auto; flex: 0 1 auto;
padding: 1em 2em; padding: 1em 2em;
background-color: rgba($color_bright, .5); background-color: rgba(hippie.$color_bright, .5);
font-family: $family_text_mono; font-family: hippie.$family_text_mono;
} }
@import "modules/ui/frame_module";
@import "modules/ui/new_module";
@import "modules/ui/drag_module";
@import "modules/ui/form_module";

2
source/templates/hippie/_app_frame.njk
View file

@ -6,6 +6,8 @@
{{ super() }} {{ super() }}
{% endblock %} {% endblock %}
{% block title %}{{ title }}{% endblock %}
{% block links %} {% block links %}
{{ super() }} {{ super() }}
<link href="/vendor/bootstrap-icons/font/bootstrap-icons.min.css" rel="stylesheet"> <link href="/vendor/bootstrap-icons/font/bootstrap-icons.min.css" rel="stylesheet">

5
source/templates/hippie/_main.njk
View file

@ -28,7 +28,6 @@
<body class="{{ bodyClass }}"> <body class="{{ bodyClass }}">
{{ log.log('BODY start') }} {{ log.log('BODY start') }}
{% include "hippie/partials/_body_hover.njk" %}
{% include "hippie/partials/_body_nav.njk" %} {% include "hippie/partials/_body_nav.njk" %}
<div id="root"> <div id="root">
{% include "hippie/partials/_header.njk" %} {% include "hippie/partials/_header.njk" %}
@ -54,6 +53,10 @@
let scrollUi = new HippieScroll($('.js_scrolltop'), $('.js_scrolldown')); let scrollUi = new HippieScroll($('.js_scrolltop'), $('.js_scrolldown'));
let helpUi = new HippieMeta($('.js_showmeta'), $('.js_pop')); let helpUi = new HippieMeta($('.js_showmeta'), $('.js_pop'));
if (viewHover) {
let fadeUi = new HippieFade(document.getElementById('js-toggle-fade'), true);
}
document.addEventListener('scroll', () => { document.addEventListener('scroll', () => {
scrollUi.check(); scrollUi.check();
}); });

2
source/templates/hippie/partials/_body_hover.njk
View file

@ -1,2 +0,0 @@
<!-- hover.partial -->
<div id="js_mob"></div>

47
source/templates/hippie/partials/_body_nav.njk
View file

@ -1,28 +1,33 @@
<!-- nav.partial --> <!-- nav.partial -->
<div class="pos_rel"> <div class="pos_rel">
<nav class="nav_page_meta"> <nav class="nav_page_meta">
<ul> <ul>
<li class="js_scrolltop di_none"> <li class="js_scrolltop di_none">
<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"> #}
</a> </a>
</li> </li>
<li> <li>
{# <button class="">Show Meta Information</button> #} {# <button class="">Show Meta Information</button> #}
{# <a href="#meta" class="js_showmeta a_button_meta"> {# <a href="#meta" class="js_showmeta a_button_meta">
<div class="sprite_img demo__sprite_meta"></div> <div class="sprite_img demo__sprite_meta"></div>
</a> #} </a> #}
<button class="js_showmeta button_clear" type="button"><div class="sprite_img demo__sprite_meta"></div></button> <button class="js_showmeta button_clear" type="button">
</li> <div class="sprite_img demo__sprite_meta"></div>
<li class="js_scrolldown"> </button>
<a href="#end" class="a_button_meta"> </li>
<div class="sprite_img demo__sprite_down"></div> <li>
{# <img src="{{ pageBase }}art/down.png" alt="" width="32" height="32"> #} <button id="js-toggle-fade">F</button>
</a> </li>
</li> <li class="js_scrolldown">
</ul> <a href="#end" class="a_button_meta">
</nav> <div class="sprite_img demo__sprite_down"></div>
{# <img src="{{ pageBase }}art/down.png" alt="" width="32" height="32"> #}
</a>
</li>
</ul>
</nav>
</div> </div>
{# <div class="exp_overlay_btn exp_help_btn"> {# <div class="exp_overlay_btn exp_help_btn">
<span class="span_solo">?</span> <span class="span_solo">?</span>