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

fix: Intro

Browse source 
- Move style inside .body_intro
- Fix overlap of ids
This commit is contained in:
sthag 2026-03-08 18:54:44 +01:00
parent 6ae411c83b
commit 30fcd22a7b
3 changed files with 148 additions and 149 deletions
Download patch file Download diff file Expand all files Collapse all files

6
source/code/intro.js
View file

@ -25,7 +25,7 @@ class UI {
msgNo: 'No agreement today.' msgNo: 'No agreement today.'
} }
}; };
this.intro = document.getElementById('intro'); this.intro = document.getElementById('init');
this.agreement = this.steps.agreement.element; this.agreement = this.steps.agreement.element;
this.hint = { this.hint = {
element: document.getElementById('hint'), element: document.getElementById('hint'),
@ -61,7 +61,7 @@ class UI {
} else { } else {
reject('No intro available.'); reject('No intro available.');
} }
}) });
} }
showHint() { showHint() {
@ -100,7 +100,7 @@ class UI {
} else { } else {
reject(); reject();
} }
}) });
} }
init() { init() {

5
source/screens/demo/examples/game/intro.liquid
View file

@ -4,7 +4,6 @@ tags:
- game - game
--- ---
{% assign pageId = "init" %}
{% assign bodyClass = 'body_intro' -%} {% assign bodyClass = 'body_intro' -%}
{% layout 'hippie/app.liquid' %} {% layout 'hippie/app.liquid' %}
@ -20,7 +19,7 @@ tags:
<div id="status">0%</div> <div id="status">0%</div>
</div> </div>
</div> </div>
<div id="intro" class="step op_hide"> <div id="init" class="step op_hide">
<div id="hint" class="toast di_none" role="alert" aria-live="assertive" aria-atomic="true"> <div id="hint" class="toast di_none" role="alert" aria-live="assertive" aria-atomic="true">
<p>Hold <p>Hold
<kbd>space</kbd> <kbd>space</kbd>
@ -74,7 +73,7 @@ tags:
msgNo: 'No agreement today.' msgNo: 'No agreement today.'
} }
}; };
const intro = document.getElementById('intro'); const intro = document.getElementById('init');
const agreement = steps.agreement.element; const agreement = steps.agreement.element;
const hint = { const hint = {
element: document.getElementById('hint'), element: document.getElementById('hint'),

286
source/style/ui.scss
View file

@ -33,155 +33,162 @@ $space_gui_half: hippie.$space_half;
.body_intro { .body_intro {
background-color: black; background-color: black;
}
.step { .step {
@extend %full_parent; @extend %full_parent;
}
#loader {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: white;
}
#bar {
display: flex;
justify-content: space-between;
width: 50%;
}
#wrap {
flex: 1;
background-color: hippie.$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_gui_half;
padding-block: calc($space_gui_half - 1px) $space_gui_half;
line-height: hippie.$line_basic;
text-align: center;
}
#status {
width: 4em;
background-color: black;
color: white;
}
#spinner {
width: 2.5em;
background-color: hippie.$color_back_basic;
color: black;
span {
animation: rotate 1s linear infinite;
}
}
@keyframes rotate {
from {
transform: rotate(0deg);
} }
to { #loader {
transform: rotate(360deg); display: flex;
} flex-direction: column;
} align-items: center;
justify-content: center;
#intro {
z-index: map.get(hippie.$z-indexes, "content-top");
overflow: hidden;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: black;
h1,
p,
li {
color: white;
}
}
.brand {
text-align: center;
svg {
height: 128px;
width: 128px;
rect, circle, path {
stroke: white !important;
}
}
img {
display: inline-block;
width: 128px;
height: 128px;
background-color: white; background-color: white;
} }
* + h1 { #bar {
margin-top: hippie.$space_small; display: flex;
margin-bottom: hippie.$space_large; justify-content: space-between;
width: 50%;
} }
}
.tech-stack { #wrap {
display: flex; flex: 1;
padding-left: 0; background-color: hippie.$color_back_basic;
li {
list-style: none;
padding-inline: hippie.$space_double;
} }
}
#agreement, #progress {
#idle { width: 0;
display: flex; height: 100%;
align-items: center; background-color: black;
justify-content: center;
height: 100vh;
}
#agreement {
flex-direction: column;
background-color: map.get(hippie.$color_palette, bravo);
user-select: none;
h1 {
margin-top: 0;
color: hippie.$color_brightest;
} }
}
#idle { #status,
background-color: hippie.$color_back_basic; #spinner {
transition: background-color 4s; @extend %basic;
&:hover > .mouse-overlay { display: flex;
background-color: transparent !important; flex-grow: 0;
transition: background-color hippie.$duration_basic hippie.$timing_basic 0s !important; flex-shrink: 0;
justify-content: center;
align-items: center;
margin-inline: $space_gui_half;
padding-block: calc($space_gui_half - 1px) $space_gui_half;
line-height: hippie.$line_basic;
text-align: center;
}
#status {
width: 4em;
background-color: black;
color: white;
}
#spinner {
width: 2.5em;
background-color: hippie.$color_back_basic;
color: black;
span {
animation: rotate 1s linear infinite;
}
}
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
#init {
z-index: map.get(hippie.$z-indexes, "content-top");
overflow: hidden;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: black;
h1,
p,
li {
color: white;
}
}
.brand {
text-align: center;
svg {
height: 128px;
width: 128px;
rect, circle, path {
stroke: white !important;
}
}
img {
display: inline-block;
width: 128px;
height: 128px;
background-color: white;
}
* + h1 {
margin-top: hippie.$space_small;
margin-bottom: hippie.$space_large;
}
}
.tech-stack {
display: flex;
padding-left: 0;
li {
list-style: none;
padding-inline: hippie.$space_double;
}
}
#agreement,
#idle {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
#agreement {
flex-direction: column;
background-color: map.get(hippie.$color_palette, bravo);
user-select: none;
h1 {
margin-top: 0;
color: hippie.$color_brightest;
}
}
#idle {
background-color: hippie.$color_back_basic;
transition: background-color 4s;
&:hover > .mouse-overlay {
background-color: transparent !important;
transition: background-color hippie.$duration_basic hippie.$timing_basic 0s !important;
}
.hello {
flex: 0 1 auto;
padding: 1em 2em;
background-color: rgba(hippie.$color_bright, .5);
font-family: hippie.$family_text_mono;
}
} }
} }
@ -200,10 +207,3 @@ $space_gui_half: hippie.$space_half;
color: hippie.$color_back_io; color: hippie.$color_back_io;
} }
} }
.hello {
flex: 0 1 auto;
padding: 1em 2em;
background-color: rgba(hippie.$color_bright, .5);
font-family: hippie.$family_text_mono;
}