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

feat: Combine start and tile screens

Browse source 
- Combine start and tile content to start screen
- Remove tile screen
- Remove new css module
- Integrate style to start module
This commit is contained in:
sthag 2026-03-21 17:49:48 +01:00
parent ebed5a2d42
commit 2387e08ad0
10 changed files with 247 additions and 267 deletions
Download patch file Download diff file Expand all files Collapse all files

98
source/style/modules/_start.scss
View file

@ -1,15 +1,111 @@
@use "sass:color";
@use "../hippie-style/hippie";
$module_top_height: 32px;
$body_top_space: $module_top_height + hippie.$space_basic;
.body_start {
@extend .h_full_view;
padding: $body_top_space hippie.$space_basic hippie.$space_basic;
main {
@extend .sec_main_center;
@extend %flex_column;
height: 100%;
}
#www_search {
form {
flex: 1;
input[type="text"] {
flex: 1;
padding: hippie.$padding_basic;
line-height: hippie.$line_text_basic;
}
}
.area {
display: grid;
grid-gap: hippie.$space_basic;
flex: 1;
// grid-template-rows: repeat(2, 1fr);
// grid-template-columns: repeat(2, 1fr);
grid-template-areas: "a a";
grid-auto-rows: 1fr;
grid-auto-columns: 1fr;
transition: hippie.$transition_best;
&:hover {
background-color: #999;
}
& > div {
// height: unset;
border-color: color.scale(hippie.$color_back_basic, $lightness: -4%);
border-style: dotted;
border-width: hippie.$width_border_8;
border-radius: hippie.$width_border_8;
padding: hippie.$space_basic;
background-color: rgb(hippie.$color_back_basic, .5);
// background-color: lighten(hippie.$color_back_basic, hippie.$color_diff_tiny);
// background-color: gold;
}
}
}
#top {
position: fixed;
top: 0;
left: 0;
display: flex;
width: 100%;
height: $module_top_height;
background-color: rgb(0, 0, 0, .8);
z-index: hippie.$z_top;
div:last-child {
flex: 1;
}
p,
li {
color: #fff;
}
h1 a {
color: #000;
}
p,
li {
margin-top: 8px;
margin-bottom: 7px;
padding: 0 4px;
font-size: 12px;
line-height: 17px;
}
nav ul {
display: flex;
margin: 0 0 0 16px;
}
.brand {
height: 36px;
background-color: #fff;
margin: 0 0 0 128px;
padding: 7px 24px;
font-size: 16px;
line-height: 22px;
font-weight: bold;
text-align: center;
}
.state {
margin-right: 16px;
text-align: right;
}
}

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

@ -1,99 +0,0 @@
@use "sass:color";
@use "../../hippie-style/hippie";
$module_top_height: 32px;
$body_top_space: $module_top_height + hippie.$space_basic;
.body_new {
@extend %flex_column;
padding: $body_top_space hippie.$space_basic hippie.$space_basic;
}
.area {
transition: hippie.$transition_best;
&:hover {
background-color: #999;
}
}
.grid {
display: grid;
flex: 1;
// grid-template-rows: repeat(2, 1fr);
// grid-template-columns: repeat(2, 1fr);
grid-template-areas: "a a";
grid-auto-rows: 1fr;
grid-auto-columns: 1fr;
}
.item {
// height: unset;
border-color: color.scale(hippie.$color_back_basic, $lightness: -4%);
border-style: dotted;
border-width: hippie.$width_border_8;
border-radius: hippie.$width_border_8;
padding: hippie.$space_basic;
background-color: rgb(hippie.$color_back_basic, .5);
// background-color: lighten(hippie.$color_back_basic, hippie.$color_diff_tiny);
// background-color: gold;
}
.float {
min-height: 50%;
}
#top {
position: fixed;
top: 0;
left: 0;
display: flex;
width: 100%;
height: $module_top_height;
background-color: rgb(0, 0, 0, .8);
z-index: hippie.$z_top;
div:last-child {
flex: 1;
}
p,
li {
color: #fff;
}
h1 a {
color: #000;
}
p,
li {
margin-top: 8px;
margin-bottom: 7px;
padding: 0 4px;
font-size: 12px;
line-height: 17px;
}
nav ul {
display: flex;
margin: 0 0 0 16px;
}
.brand {
height: 36px;
background-color: #fff;
margin: 0 0 0 128px;
padding: 7px 24px;
font-size: 16px;
line-height: 22px;
font-weight: bold;
text-align: center;
}
.state {
margin-right: 16px;
text-align: right;
}
}