fix: Intro
- Move style inside .body_intro - Fix overlap of ids
This commit is contained in:
parent
6ae411c83b
commit
30fcd22a7b
3 changed files with 148 additions and 149 deletions
|
|
@ -25,7 +25,7 @@ class UI {
|
|||
msgNo: 'No agreement today.'
|
||||
}
|
||||
};
|
||||
this.intro = document.getElementById('intro');
|
||||
this.intro = document.getElementById('init');
|
||||
this.agreement = this.steps.agreement.element;
|
||||
this.hint = {
|
||||
element: document.getElementById('hint'),
|
||||
|
|
@ -61,7 +61,7 @@ class UI {
|
|||
} else {
|
||||
reject('No intro available.');
|
||||
}
|
||||
})
|
||||
});
|
||||
}
|
||||
|
||||
showHint() {
|
||||
|
|
@ -100,7 +100,7 @@ class UI {
|
|||
} else {
|
||||
reject();
|
||||
}
|
||||
})
|
||||
});
|
||||
}
|
||||
|
||||
init() {
|
||||
|
|
|
|||
|
|
@ -4,7 +4,6 @@ tags:
|
|||
- game
|
||||
---
|
||||
|
||||
{% assign pageId = "init" %}
|
||||
{% assign bodyClass = 'body_intro' -%}
|
||||
{% layout 'hippie/app.liquid' %}
|
||||
|
||||
|
|
@ -20,7 +19,7 @@ tags:
|
|||
<div id="status">0%</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">
|
||||
<p>Hold
|
||||
<kbd>space</kbd>
|
||||
|
|
@ -74,7 +73,7 @@ tags:
|
|||
msgNo: 'No agreement today.'
|
||||
}
|
||||
};
|
||||
const intro = document.getElementById('intro');
|
||||
const intro = document.getElementById('init');
|
||||
const agreement = steps.agreement.element;
|
||||
const hint = {
|
||||
element: document.getElementById('hint'),
|
||||
|
|
|
|||
|
|
@ -33,155 +33,162 @@ $space_gui_half: hippie.$space_half;
|
|||
|
||||
.body_intro {
|
||||
background-color: black;
|
||||
}
|
||||
|
||||
.step {
|
||||
@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);
|
||||
.step {
|
||||
@extend %full_parent;
|
||||
}
|
||||
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
#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;
|
||||
#loader {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
* + h1 {
|
||||
margin-top: hippie.$space_small;
|
||||
margin-bottom: hippie.$space_large;
|
||||
#bar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.tech-stack {
|
||||
display: flex;
|
||||
padding-left: 0;
|
||||
|
||||
li {
|
||||
list-style: none;
|
||||
padding-inline: hippie.$space_double;
|
||||
#wrap {
|
||||
flex: 1;
|
||||
background-color: hippie.$color_back_basic;
|
||||
}
|
||||
}
|
||||
|
||||
#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;
|
||||
#progress {
|
||||
width: 0;
|
||||
height: 100%;
|
||||
background-color: black;
|
||||
}
|
||||
}
|
||||
|
||||
#idle {
|
||||
background-color: hippie.$color_back_basic;
|
||||
transition: background-color 4s;
|
||||
#status,
|
||||
#spinner {
|
||||
@extend %basic;
|
||||
|
||||
&:hover > .mouse-overlay {
|
||||
background-color: transparent !important;
|
||||
transition: background-color hippie.$duration_basic hippie.$timing_basic 0s !important;
|
||||
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 {
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
.hello {
|
||||
flex: 0 1 auto;
|
||||
padding: 1em 2em;
|
||||
background-color: rgba(hippie.$color_bright, .5);
|
||||
font-family: hippie.$family_text_mono;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue