From eb2237c8e78cef06ce7072327ef8299409ab1012 Mon Sep 17 00:00:00 2001 From: Mariotaku Date: Mon, 3 Jun 2024 00:54:07 +0900 Subject: [PATCH] homepage wip --- src/views/index/index.hbs | 291 +++++++++++++++++++------------------ src/views/index/index.scss | 208 ++++++++++++++------------ 2 files changed, 271 insertions(+), 228 deletions(-) diff --git a/src/views/index/index.hbs b/src/views/index/index.hbs index 4d6cac3..0a5fafd 100644 --- a/src/views/index/index.hbs +++ b/src/views/index/index.hbs @@ -9,36 +9,37 @@ {{> navbar }} -
-
+
+
-
- -
-
{{> footer }} diff --git a/src/views/index/index.scss b/src/views/index/index.scss index 85a4eac..61d03a7 100644 --- a/src/views/index/index.scss +++ b/src/views/index/index.scss @@ -4,117 +4,118 @@ html { scroll-padding-top: 65px; } -main.landing { - .headline { - .feature { - display: none; +.headline { + .feature { + display: none; - &.active { - display: inline; - } - - &.amblight { - background: linear-gradient(90deg, #05e6c8 0%, #0096a5 40%, #009fcf 80%); - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; - } + &.active { + display: inline; } - span.webos.web { - color: #747a7e; + &.amblight { + background: linear-gradient(90deg, #05e6c8 0%, #0096a5 40%, #009fcf 80%); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; } + } - span.webos.os { - color: #c30036; - } + span.webos.web { + color: #747a7e; + } - .tv-container { - position: relative; - } + span.webos.os { + color: #c30036; + } - .tv-amblight { - position: absolute; - width: 100%; - height: 100%; - object-fit: fill; - filter: blur(30px) saturate(300%) brightness(200%); + .tv-container { + position: relative; + } - opacity: 0; - transition: opacity 0.5s ease-in-out; + .tv-amblight { + position: absolute; + width: 100%; + height: 100%; + top: 0; + object-fit: fill; + filter: blur(30px) saturate(300%) brightness(200%); - &.active { - opacity: 1; - transition: opacity 0.5s ease-in-out; - } + opacity: 0; + transition: opacity 0.5s ease-in-out; + + &.active { + opacity: 1; + transition: opacity 0.5s ease-in-out; } + } - .tv-screen { - width: 85vw; - border-radius: 0.4%; - padding: 0.3% 0.3% 0.5%; + .tv-screen { + width: 85vw; + border-radius: 0.4%; + padding: 0.3% 0.3% 0.5%; - box-shadow: 0.7vw 1vw 1.2vw rgba(0, 0, 0, 0.3); - transition: box-shadow 0.5s ease-in-out; + box-shadow: 0.7vw 1vw 1.2vw rgba(0, 0, 0, 0.3); + transition: box-shadow 0.5s ease-in-out; - background: linear-gradient(135deg, #222, #111); - background-clip: padding-box; - box-sizing: content-box; + background: linear-gradient(135deg, #222, #111); + background-clip: padding-box; + box-sizing: content-box; - &.amblight { - box-shadow: none; - transition: box-shadow 0.5s ease-in-out; - } + &.amblight { + box-shadow: none; + transition: box-shadow 0.5s ease-in-out; + } - .carousel { - background: black; + .carousel { + background: black; + width: 100%; + height: auto; + position: relative; + overflow: hidden; + padding-top: 56.25%; /* 16:9 Aspect Ratio */ + + > * { + display: block; + position: absolute; + top: 0; + left: 0; width: 100%; - height: auto; - position: relative; - overflow: hidden; - padding-top: 56.25%; /* 16:9 Aspect Ratio */ - - > * { - display: block; - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - } + height: 100%; } } + } - @include media-breakpoint-up(sm) { - .tv-screen { - width: 75vw; - box-shadow: 0.6vw 0.9vw 1.1vw rgba(0, 0, 0, 0.3); - } + @include media-breakpoint-up(sm) { + .tv-screen { + width: 75vw; + box-shadow: 0.6vw 0.9vw 1.1vw rgba(0, 0, 0, 0.3); } + } - @include media-breakpoint-up(md) { - .tv-screen { - width: 65vw; - box-shadow: 0.5vw 0.8vw 1vw rgba(0, 0, 0, 0.3); - } + @include media-breakpoint-up(md) { + .tv-screen { + width: 65vw; + box-shadow: 0.5vw 0.8vw 1vw rgba(0, 0, 0, 0.3); } } +} - .get-started { - .card-body { - &.rooted { - background-image: linear-gradient(135deg, rgba(0, 0, 0, 0.0), rgba(206, 5, 81, 1)); - } - - &.devmode { - background-image: linear-gradient(135deg, rgba(0, 0, 0, 0.0), rgba(187, 62, 63, 1)); - } - } +.apps-showcase { + h3 .app-icon { + width: 1em; + height: 1em; + margin-top: -0.2em; } } +.bg-hbchannel { + background-image: linear-gradient(135deg, rgba(0, 0, 0, 0.0), rgba(206, 5, 81, 1)); +} + +.bg-devmode { + background-image: linear-gradient(135deg, rgba(0, 0, 0, 0.0), rgba(187, 62, 63, 1)); +} + .marquee { - margin-left: -1.5rem; - margin-right: -1.5rem; overflow: hidden; position: relative; display: flex; @@ -124,9 +125,8 @@ main.landing { mask-image: linear-gradient( var(--mask-direction, to right), hsl(0 0% 0% / 0), - hsl(0 0% 0% / 1) 10%, - hsl(0 0% 0% / 1) 90%, - hsl(0 0% 0% / 0) + hsl(0 0% 0% / 0.33) 50%, + hsl(0 0% 0% / 1) ); > * { @@ -135,11 +135,41 @@ main.landing { } .app-item { - width: 240px; + width: 180px; .app-icon { - width: 60px; - height: 60px; + width: 40px; + height: 40px; object-fit: contain; } + + .card-title { + font-size: 1em; + } + + + @include media-breakpoint-up(md) { + & { + width: 240px; + + .app-icon { + width: 60px; + height: 60px; + } + + .card-title { + font-size: 1.25em; + } + } + } +} + +.rounded-lg-5 { + @include media-breakpoint-up(lg) { + border-radius: var(--bs-border-radius-xxl); + } +} + +.pointer-events-none { + pointer-events: none; } \ No newline at end of file