homepage wip

webosbrew · Jun 11, 2024 · d324f06 · d324f06
1 parent 70cc209
commit d324f06
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 33 deletions.
diff --git a/src/img/screenshots/hbchannel.png b/src/img/screenshots/hbchannel.png
diff --git a/src/views/index/index.hbs b/src/views/index/index.hbs
@@ -63,7 +63,7 @@
     </div>
   </div>
 
-  <section id="apps" class="my-5 container-lg">
+  <section id="apps" class="container-lg py-5">
     <h2 class="text-center">Apps &amp; Games</h2>
     <div class="row g-3 mt-5">
       <div class="apps-showcase col-12">
@@ -142,56 +142,64 @@
           </div>
 
           <h3 class="ps-4 position-absolute top-0 bottom-0 align-content-center pointer-events-none">
-            <img src="../../img/app-icons/org.xbmc.kodi.png" class="app-icon me-2"/>Kodi.
+            <img src="../../img/app-icons/org.xbmc.kodi.png" class="app-icon me-2"/>Kodi
             <br>
-            <img src="../../img/app-icons/com.limelight.webos.png" class="app-icon me-2"/>Moonlight.
+            <img src="../../img/app-icons/com.limelight.webos.png" class="app-icon me-2"/>Moonlight
             <br>
-            <img src="../../img/app-icons/com.retroarch.png" class="app-icon me-2"/>RetroArch.
+            <img src="../../img/app-icons/com.retroarch.png" class="app-icon me-2"/>RetroArch
             <br>
-            And ✨more✨.
+            And ✨more✨
             <br>
-            We make them happen.
+            Coming to your webOS TV.
           </h3>
         </div>
       </div>
-      <div class="col-md-6">
-        <div class="p-4 rounded-4 bg-dark-subtle">
-          <h3>Can't root?<br>
-            Outdated model?<br>
-            Gotta support'em all*.
-          </h3>
-          <small>*Some apps require root or newer system version.</small>
-        </div>
+      <div class="col-md-6 aspect-ratio-3by2">
+        <a class="card border-0 px-4 pt-4 rounded-4 d-flex flex-column h-100 bg-dark-subtle overflow-hidden text-decoration-none"
+           href="https://repo.webosbrew.org/apps/org.webosbrew.hbchannel">
+          <h3 class="flex-fill">Meet Homebrew Channel</h3>
+          <p>Alternative app store</p>
+          <div class="mt-3 tv-container shadow shadow-lg">
+            <img class="tv-screen w-100" src="../../img/screenshots/hbchannel.png" alt="Homebrew Channel app"/>
+          </div>
+        </a>
       </div>
-      <div class="col-md-6">
-        <div class="p-4 rounded-4 bg-dark-subtle">
-          <h3>Open Source</h3>
+      <div class="col-md-6 aspect-ratio-3by2">
+        <div class="card border-0 p-4 rounded-4 d-flex flex-column justify-content-end h-100 bg-dark-subtle">
+          <h3>
+            Setup with a few steps,<br>
+            safe and simple.<br>
+            <a class="text-decoration-none stretched-link" href="#get-started">Get started<i
+                class="bi bi-chevron-double-right small"></i></a>
+          </h3>
         </div>
       </div>
     </div>
   </section>
 
   <div class="py-3 bg-dark-subtle"></div>
 
-  <section id="mods" class="container-lg my-5">
+  <section id="mods" class="container-lg py-5">
     <h2 class="text-center">Gain More Control*</h2>
     <div class="row g-3 mt-5">
     </div>
     <p>
       TODO: Screensavers, privacy protection scripts, AltHome
     </p>
-    <small>*Mods are available for rooted TVs only.</small>
+    <div class="mt-2">
+      <small class="text-body-tertiary">*Mods are available for rooted TVs only.</small>
+    </div>
   </section>
 
   <div class="py-3 bg-dark-subtle"></div>
 
-  <section id="community" class="container-lg my-5">
+  <section id="community" class="container-lg py-5">
     <h2 class="text-center">Powered by the Community</h2>
   </section>
 
   <div class="py-3 bg-dark-subtle"></div>
 
-  <section id="get-started" class="my-5 container-lg">
+  <section id="get-started" class="container-lg py-5">
     <h2 class="text-center">Get Started</h2>
     <div class="row g-3 mt-5">
       <div class="col-md-6">
@@ -229,13 +237,13 @@
 
   <div class="py-3 bg-dark-subtle"></div>
 
-  <section id="devman" class="container-lg my-5">
+  <section id="devman" class="container-lg py-5">
     TODO: Banner featuring Dev Manager
   </section>
 
   <div class="py-3 bg-dark-subtle"></div>
 
-  <section id="contribute" class="container-lg my-5">
+  <section id="contribute" class="container-lg py-5">
     <h2 class="text-center">Contribute</h2>
 
     <div class="row g-3 mt-5">

diff --git a/src/views/index/index.scss b/src/views/index/index.scss
@@ -4,6 +4,20 @@ html {
   scroll-padding-top: 65px;
 }
 
+
+.tv-container {
+  position: relative;
+
+  .tv-screen {
+    border-radius: 0.5%;
+    padding: 0.4% 0.4% 0.6%;
+
+    background: linear-gradient(135deg, #202020, #151515 30%, #151515);
+    background-clip: padding-box;
+    box-sizing: content-box;
+  }
+}
+
 .headline {
   .feature {
     display: none;
@@ -27,10 +41,6 @@ html {
     color: #c30036;
   }
 
-  .tv-container {
-    position: relative;
-  }
-
   .tv-amblight {
     position: absolute;
     width: 100%;
@@ -50,16 +60,10 @@ html {
 
   .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;
 
-    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;
@@ -172,4 +176,14 @@ html {
 
 .pointer-events-none {
   pointer-events: none;
+}
+
+.aspect-ratio-lg-1 {
+  @include media-breakpoint-up(lg) {
+    border-radius: var(--bs-border-radius-xxl);
+  }
+}
+
+.aspect-ratio-3by2 {
+  aspect-ratio: 3/2;
 }