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

feat: Adapt new hippie-style structure

Browse source 
Sass deprecations removed.
This commit is contained in:
sthag 2025-10-26 11:37:47 +01:00
parent d9f7ae1ff9
commit c1fea8064e
11 changed files with 166 additions and 147 deletions
Download patch file Download diff file Expand all files Collapse all files

14
source/style/demo.scss
View file

@ -2,15 +2,15 @@
// 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 867e96ea0a51054762ce615efa0224ccf1157ca2 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;

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

@ -1,5 +1,7 @@
@use "sass:color"; @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;
@ -9,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;
@ -24,7 +26,7 @@
} }
.demo__header { .demo__header {
padding: $space_double; padding: hippie.$space_double;
nav { nav {
@ -35,19 +37,19 @@
} }
.header_fancy { .header_fancy {
background-color: color.adjust($bravo_color, $alpha: -0.4); background-color: color.adjust(hippie.basic_color(bravo), $alpha: -0.4);
nav { nav {
a { a {
background-color: color.adjust($alpha_color, $alpha: -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;
} }
} }
} }
@ -58,7 +60,7 @@
top: 0; top: 0;
left: 0; left: 0;
width: 100%; width: 100%;
background-color: color.adjust($charlie_color, $alpha: -0.4); background-color: color.adjust(hippie.basic_color(charlie), $alpha: -0.4);
nav { nav {
@ -67,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;
} }
} }
} }
@ -77,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);
@ -98,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);
@ -106,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);
@ -122,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);
} }
} }
@ -131,123 +133,123 @@
} }
.demo__credits { .demo__credits {
margin: $space_small 0 $space_basic 0; margin: hippie.$space_small 0 hippie.$space_basic 0;
} }
.demo__queries > p { .demo__queries > p {
padding: $padding_basic; padding: hippie.$padding_basic;
} }
.query_phoneUp { .query_phoneUp {
@include forPhoneUp { @include hippie.forPhoneUp {
background-color: rgba($color_text_basic, 0.2) background-color: rgba(hippie.$color_text_basic, 0.2)
} }
; ;
} }
.query_phoneOnly { .query_phoneOnly {
@include forPhoneOnly { @include hippie.forPhoneOnly {
background-color: rgba($color_text_basic, 0.2); background-color: rgba(hippie.$color_text_basic, 0.2);
} }
} }
.query_tabletPortaitOnly { .query_tabletPortraitOnly {
@include forTabletPortraitOnly { @include hippie.forTabletPortraitOnly {
background-color: rgba($color_text_basic, 0.2); background-color: rgba(hippie.$color_text_basic, 0.2);
} }
} }
.query_tabletPortraitUp { .query_tabletPortraitUp {
@include forTabletPortraitUp { @include hippie.forTabletPortraitUp {
background-color: rgba($color_text_basic, 0.2); background-color: rgba(hippie.$color_text_basic, 0.2);
} }
} }
.query_tabletLandscapeOnly { .query_tabletLandscapeOnly {
@include forTabletLandscapeOnly { @include hippie.forTabletLandscapeOnly {
background-color: rgba($color_text_basic, 0.2); background-color: rgba(hippie.$color_text_basic, 0.2);
} }
} }
.query_tabletLandscapeUp { .query_tabletLandscapeUp {
@include forTabletLandscapeUp { @include hippie.forTabletLandscapeUp {
background-color: rgba($color_text_basic, 0.2); background-color: rgba(hippie.$color_text_basic, 0.2);
} }
} }
.query_desktopOnly { .query_desktopOnly {
@include forDesktopOnly { @include hippie.forDesktopOnly {
background-color: rgba($color_text_basic, 0.2); background-color: rgba(hippie.$color_text_basic, 0.2);
} }
} }
.query_desktopUp { .query_desktopUp {
@include forDesktopUp { @include hippie.forDesktopUp {
background-color: rgba($color_text_basic, 0.2); background-color: rgba(hippie.$color_text_basic, 0.2);
} }
} }
.query_bigDesktopUp { .query_bigDesktopUp {
@include forBigDesktopUp { @include hippie.forBigDesktopUp {
background-color: rgba($color_text_basic, 0.2); background-color: rgba(hippie.$color_text_basic, 0.2);
} }
} }
.demo__query_example { .demo__query_example {
@include goingLarge($screen_tiny) { @include hippie.goingLarge(hippie.$screen_tiny) {
background-color: $alpha_color; background-color: hippie.basic_color(alpha);
} }
@include goingLarge($screen_small) { @include hippie.goingLarge(hippie.$screen_small) {
background-color: $bravo_color; background-color: hippie.basic_color(bravo);
} }
@include goingLarge($screen_medium) { @include hippie.goingLarge(hippie.$screen_medium) {
background-color: $charlie_color; background-color: hippie.basic_color(charlie);
} }
@include goingLarge($screen_large) { @include hippie.goingLarge(hippie.$screen_large) {
background-color: $delta_color; background-color: hippie.basic_color(delta);
} }
@include goingLarge($screen_huge) { @include hippie.goingLarge(hippie.$screen_huge) {
background-color: $echo_color; background-color: hippie.basic_color(echo);
} }
@include goingLarge($screen_gigantic) { @include hippie.goingLarge(hippie.$screen_gigantic) {
background-color: $foxtrot_color; background-color: hippie.basic_color(foxtrot);
} }
margin-bottom: $space_small; margin-bottom: hippie.$space_small;
padding: $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);
} }
} }
@ -261,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
@ -283,6 +285,6 @@
ul { ul {
padding: 1em 5em; padding: 1em 5em;
background-color: $color_darker; background-color: hippie.$color_darker;
} }
} }

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

@ -1,7 +1,9 @@
@use "sass:color"; @use "sass:color";
$portal_highlight: $color_highlight_basic; @use "../../hippie-style/hippie";
$portal_margin: $space_double;
$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;
@ -23,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;

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 {

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

@ -1,5 +1,7 @@
@use "sass:color"; @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;
@ -9,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%;
@ -20,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);
} }
@ -35,18 +37,18 @@
section { section {
&>header, & > header,
&>footer { & > footer {
background-color: color.adjust($color_back_io, $alpha: -.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;
} }
@ -84,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);
} }

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

@ -1,15 +1,17 @@
@use "sass:color"; @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;
@ -28,13 +30,13 @@ $body_top_space: $module_top_height + $space_basic;
.item { .item {
// height: unset; // height: unset;
border-color: color.scale($color_back_basic, $lightness: -$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;
} }
@ -50,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;

63
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 {
@ -46,7 +54,7 @@ $color_gui_back: $color_dark;
#wrap { #wrap {
flex: 1; flex: 1;
background-color: $color_back_basic; background-color: hippie.$color_back_basic;
} }
#progress { #progress {
@ -64,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;
} }
@ -78,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 {
@ -97,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;
@ -123,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;
} }
} }
@ -134,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;
} }
} }
@ -148,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-overlay { &: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";