adjusted styles

Author: mariotaku

src/img/screenshots/borealis_av1.webm

@@ -22,11 +22,11 @@ <h5>Resources</h5>
       <h5>Links</h5>
       <ul class="list-unstyled text-small">
         <li><a class="link-secondary text-decoration-none" href="https://github.com/webosbrew/">
-          <i class="bi bi-github me-2"></i>webosbrew on GitHub</a></li>
+          <i class="bi bi-github me-2"></i>webosbrew</a></li>
         <li><a class="link-secondary text-decoration-none" href="https://github.com/OpenLGTV">
-          <i class="bi bi-github me-2"></i>OpenLGTV on GitHub</a></li>
+          <i class="bi bi-github me-2"></i>OpenLGTV</a></li>
         <li><a class="link-secondary text-decoration-none" href="https://discord.gg/xWqRVEm">
-          <i class="bi bi-discord me-2"></i>openlgtv</a>
+          <i class="bi bi-discord me-2"></i>Discord</a>
         </li>
       </ul>
     </div>

src/partials/footer.html

@@ -28,7 +28,7 @@ <h2>Rooted vs Dev Mode</h2>
     <tr>
       <th>No need for renewing developer mode per 1000 hours</th>
       <td>✅</td>
-      <td>❌</td>
+      <td><a class="text-decoration-none" href="#dev-timer-renew">ℹ️<sup>1</sup></a></td>
     </tr>
     <tr>
       <th>Ambient light setup with <a href="https://github.com/TBSniller/piccap">PicCap</a>/<a
@@ -47,6 +47,17 @@ <h2>Rooted vs Dev Mode</h2>
       <td>✅</td>
       <td>❌</td>
     </tr>
+    <tr>
+      <th>Install latest firmware updates</th>
+      <td><a class="text-decoration-none" href="#root-fw-update">ℹ️<sup>2</sup></a></td>
+      <td>✅</td>
+    </tr>
     </tbody>
   </table>
+  <p>
+    <sup id="dev-timer-renew">1</sup> Renew steps can be done automatically.
+    <br>
+    <sup id="root-fw-update">2</sup> Practically, rooted devices can install latest firmware updates.
+    Theoretically, root can be persistent across updates. But it's not guaranteed.
+  </p>
 </div>

src/partials/rooted-vs-devmode.html

@@ -6,13 +6,15 @@
 @import "bootstrap/scss/utilities";
 
 aside.sidebar {
-  @extend .mt-lg-3;
+  @extend .py-lg-3;
   @extend .ms-lg-3;
 
   width: min(300px, 80vw);
 
   .sidebar-content > ul, ol {
 
+    @extend .ms-lg-n4;
+
     > li {
       @extend .fw-semibold;
 
@@ -28,8 +30,8 @@ aside.sidebar {
     list-style: none;
 
     i.bi {
-      margin-left: -1.5em;
-      margin-right: .5em;
+      @extend .ms-n4;
+      @extend .me-2;
       @extend .text-primary-emphasis;
     }
 
@@ -43,8 +45,8 @@ aside.sidebar {
       display: block;
       max-width: fit-content;
       text-decoration: none;
-      padding: 0 calc(#{$spacer} * .5);
-      margin: 0 calc(-#{$spacer} * .5);
+      @extend .px-2;
+      @extend .mx-n2;
 
       @extend .text-body;
       @extend .rounded;
@@ -76,11 +78,7 @@ aside.sidebar {
     min-width: unset;
 
     position: sticky;
-    top: calc(1.5rem + var(--navbar-height));
-
-    .sidebar-content > ul, ol {
-      margin-left: -1.5em;
-    }
+    top: var(--navbar-height);
   }
 
   @include media-breakpoint-up(xl) {

src/scss/page/_sidebar.scss

@@ -2,6 +2,7 @@
 @import "bootstrap/scss/functions";
 // Customize some defaults
 $primary: #cf0652;
+$enable-negative-margins: true;
 
 @import "bootstrap/scss/variables";
 @import "bootstrap/scss/variables-dark";

src/scss/styles.scss

@@ -33,8 +33,10 @@
                   <img src="/img/screenshots/kodi-recently-added.jpg?as=webp" class="d-block w-100" alt="Kodi">
                 </div>
                 <div class="carousel-item" data-item-id="amblight">
-                  <video src="/img/screenshots/borealis.mp4" class="d-block w-100 amblight-src" muted loop
-                         preload="auto"></video>
+                  <video class="d-block w-100 amblight-src" muted loop preload="auto">
+                    <source src="/img/screenshots/borealis_av1.webm" type="video/webm; codecs=av01.0.05M.08"/>
+                    <source src="/img/screenshots/borealis.mp4" type="video/mp4"/>
+                  </video>
                 </div>
               </div>
             </div>
@@ -215,7 +217,7 @@
     <h2 class="text-center">Get Started</h2>
     <div class="row g-3 mt-5">
       <div class="col-md-6">
-        <div class="position-relative rounded-4 p-4 bg-hbchannel">
+        <div class="position-relative h-100 rounded-4 p-4 bg-hbchannel">
           <img src="/img/icon32.svg?inline" width="48" height="48"
                class="position-absolute bottom-0 end-0 me-2 mb-2 opacity-75" alt="webOS Homebrew"/>
           <h5 class="card-title text-white">Root your TV</h5>
@@ -230,7 +232,7 @@
         </div>
       </div>
       <div class="col-md-6">
-        <div class="position-relative rounded-4 p-4 bg-devmode">
+        <div class="position-relative h-100 rounded-4 p-4 bg-devmode">
           <img src="/img/devmode32.svg" width="48" height="48"
                class="position-absolute bottom-0 end-0 me-2 mb-2 opacity-75" alt="Dev Mode"/>
           <h5 class="card-title text-white">Install via Dev Mode</h5>

src/views/index/index.hbs

@@ -46,6 +46,10 @@
     object-fit: fill;
     filter: blur(30px) saturate(300%) brightness(200%);
 
+    // This partially fixes the clipping issue on Safari
+    backface-visibility: hidden;
+    transform: translate3d(0, 0, 0);
+
     opacity: 0;
     transition: opacity 0.5s ease-in-out;
 

src/views/index/index.scss

@@ -226,7 +226,7 @@ export default function (env, argv) {
         },
         // videos
         {
-          test: /\.(mp4)$/i,
+          test: /\.(mp4|avif|webm)$/i,
           type: 'asset/resource',
           generator: {
             filename: 'video/[name].[hash:8][ext]',