feat: Change game structure
- New template - Rename screens - New partial for menu - New data file for menu content - Separate styles
This commit is contained in:
parent
a1b5aa8c59
commit
19577eca8c
10 changed files with 261 additions and 221 deletions
48
source/style/modules/game/_mwo.scss
Normal file
48
source/style/modules/game/_mwo.scss
Normal file
|
|
@ -0,0 +1,48 @@
|
|||
@use 'sass:list';
|
||||
@use "sass:map";
|
||||
|
||||
@use "../../hippie-style/hippie";
|
||||
|
||||
$colors: hippie.$color_palette;
|
||||
$steps: (0, 14.28, 28.57, 42.85, 57.14, 71.43, 100);
|
||||
|
||||
@function getColor($index, $colors) {
|
||||
$color_keys: map.keys($colors);
|
||||
$key_count: list.length($color_keys);
|
||||
$cycled_index: ($index % $key_count) + 1;
|
||||
$key: list.nth($color_keys, $cycled_index);
|
||||
@return map.get($colors, $key);
|
||||
}
|
||||
|
||||
@mixin fadeColors($steps, $colors) {
|
||||
@keyframes fadeColor {
|
||||
@for $i from 1 through list.length($steps) {
|
||||
$percent: list.nth($steps, $i);
|
||||
$color: getColor($i - 1, $colors);
|
||||
|
||||
#{$percent}% {
|
||||
background-color: $color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
animation: fadeColor 16s infinite linear;
|
||||
}
|
||||
|
||||
.body_mwo {
|
||||
@extend .h_full_view;
|
||||
|
||||
canvas {
|
||||
@include fadeColors($steps, $colors);
|
||||
|
||||
display: block;
|
||||
cursor: none;
|
||||
}
|
||||
|
||||
.controls {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
border-radius: hippie.$radius_basic;
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue