[SC64][WEB] Updated website content + made menu buttons bigger

Author: Polprzewodnikowy

web/features.html

@@ -18,12 +18,12 @@
     <div class="menu-container">
         <div class="menu-bar">
             <div class="menu-buttons">
-                <img src="sc64.svg">
-                <a onclick="showMenu(event)">
+                <a href="/"><img src="sc64.svg"></a>
+                <div class="menu-button" onclick="showMenu(event)">
                     <div class="menu-button-line"></div>
                     <div class="menu-button-line"></div>
                     <div class="menu-button-line"></div>
-                </a>
+                </div>
             </div>
             <menu class="mobile-hidden">
                 <li><a href="/">Home</a></li>
@@ -76,6 +76,13 @@ <h3>Run games with ease</h3>
                         the SummerCart64.</p>
                 </article>
 
+                <article>
+                    <h3>Full control of boot process</h3>
+                    <p>Direct mode makes testing possible without any interference from the bootloader embedded into
+                        SummerCart64, perfect for trying out custom IPL3 replacements giving you control right after
+                        N64 boots up.</p>
+                </article>
+
                 <article>
                     <h3>Dedicated terminal PC app</h3>
                     <p>Powerful, and yet simple, <a
@@ -88,7 +95,7 @@ <h3>Outstanding developer features</h3>
                     <p>SummerCart64 was born as a device for homebrew development first. As a consequence it
                         incorporates many features to ease development of your own games:</p>
                     <ul>
-                        <li>Dedicated PC app for loading ROMs and console access.</li>
+                        <li>Dedicated PC app for loading ROMs and debug terminal access.</li>
                         <li>Simple, command based, communication protocol - both on the USB and N64 side.</li>
                         <li>microSD card interface with simple, block based, protocol.</li>
                         <li>Fast USB interface with well documented protocol.</li>
@@ -161,8 +168,9 @@ <h4>Other</h4>
                 <ul>
                     <li>Real time clock</li>
                     <li>CR2032 RTC backup battery</li>
-                    <li>N64 bootloader capable of loading menu binary from the microSD card and displaying error
-                        messages</li>
+                    <li>Embedded N64 bootloader capable of loading menu binary from the microSD card and displaying
+                        error messages</li>
+                    <li>Option to disable embedded N64 bootloader (direct mode)</li>
                     <li>Firmware updatable via USB interface</li>
                     <li>Seamless power switching between USB and N64</li>
                 </ul>

web/index.html

@@ -18,12 +18,12 @@
     <div class="menu-container">
         <div class="menu-bar">
             <div class="menu-buttons">
-                <img src="sc64.svg">
-                <a onclick="showMenu(event)">
+                <a href="/"><img src="sc64.svg"></a>
+                <div class="menu-button" onclick="showMenu(event)">
                     <div class="menu-button-line"></div>
                     <div class="menu-button-line"></div>
                     <div class="menu-button-line"></div>
-                </a>
+                </div>
             </div>
             <menu class="mobile-hidden">
                 <li class="active"><a href="/">Home</a></li>
@@ -48,9 +48,10 @@ <h1>What is SummerCart64?</h1>
                         href="https://github.com/buu342/N64-UNFLoader">UNFLoader</a>, and well documented API, testing
                     your homebrew on real hardware was never this easy before!</p>
                 <p>SummerCart64 employs features not available in other N64 flashcarts, like <strong>64DD</strong>
-                    hardware emulation, automatic save backup <strong>during gameplay</strong>, making it the best
-                    choice for both players and game developers. Please check <a href="/features.html">full feature
-                        list</a> for more details!</p>
+                    hardware emulation, automatic save backup <strong>during gameplay</strong>, or ability to behave
+                    like a stock game pak with <strong>direct mode</strong>, making it the best choice for both players
+                    and game developers. Please check <a href="/features.html">full feature list</a> for more details!
+                </p>
                 <div class="pcb-images">
                     <img src="sc64-render-front.png">
                     <img src="sc64-render-back.png">

web/styles.css

@@ -6,8 +6,8 @@
     --menu-item-height: 48px;
     --menu-item-spacing: 20px;
     --menu-bg-color: rgb(28, 28, 28);
+    --menu-active-color: rgb(40, 40, 40);
     --menu-mobile-bg-color: rgb(20, 20, 20);
-    --menu-mobile-active-color: rgb(40, 40, 40);
     --menu-shadow: 0px 0px 12px rgb(0, 0, 0);
     --menu-font-size: 16px;
 
@@ -72,7 +72,6 @@ a:hover {
 .menu-bar {
     display: flex;
     flex-flow: row;
-    align-items: center;
     margin: 0 var(--content-margin) 0 var(--content-margin);
     width: 100%;
     max-width: var(--content-max-width);
@@ -85,24 +84,38 @@ a:hover {
     height: var(--menu-height);
 }
 
-.menu-bar>.menu-buttons>img {
-    margin-right: var(--content-margin);
+.menu-bar>.menu-buttons a {
+    height: var(--menu-item-height);
+}
+
+.menu-bar>.menu-buttons img {
     height: var(--menu-item-height);
 }
 
 .menu-bar>.menu-buttons>button {
     display: none;
 }
 
-.menu-bar menu {
+.menu-bar>menu {
     display: flex;
     margin: 0;
+    margin-left: var(--content-margin);
     padding: 0;
 }
 
-.menu-bar menu>li {
+.menu-bar>menu>li {
     list-style: none;
-    padding: 0 var(--menu-item-spacing) 0 var(--menu-item-spacing);
+}
+
+.menu-bar>menu>li:hover {
+    background-color: var(--menu-active-color);
+}
+
+.menu-bar>menu>li a {
+    display: flex;
+    align-items: center;
+    height: 100%;
+    padding: 0 var(--menu-item-spacing);
 }
 
 .menu-bar menu>li.active a {
@@ -121,7 +134,7 @@ a:hover {
         margin: 0 var(--content-margin) 0 var(--content-margin);
     }
 
-    .menu-bar>.menu-buttons>a {
+    .menu-bar>.menu-buttons>.menu-button {
         display: flex;
         flex-flow: column;
         justify-content: center;
@@ -132,36 +145,37 @@ a:hover {
         cursor: pointer;
     }
 
-    .menu-bar>.menu-buttons>a>.menu-button-line {
+    .menu-bar>.menu-buttons>.menu-button>.menu-button-line {
         width: 28px;
         height: 3px;
         background-color: var(--link-text-color);
         margin: 3px 0;
         border-radius: 2px;
     }
 
-    .menu-bar>.menu-buttons>a.active>.menu-button-line {
+    .menu-bar>.menu-buttons>.menu-button.active>.menu-button-line {
         background-color: var(--text-color);
     }
 
     .menu-bar>menu {
         flex-flow: column;
+        margin: 0;
         width: 100%;
         background-color: var(--menu-mobile-bg-color);
     }
 
     .menu-bar>menu>li {
         height: var(--menu-item-height);
         padding: 0;
-        border-bottom: 1px solid var(--menu-mobile-active-color);
+        border-bottom: 1px solid var(--menu-active-color);
     }
 
     .menu-bar>menu>li:last-child {
         border-bottom-width: 0px;
     }
 
     .menu-bar>menu>li.active {
-        background-color: var(--menu-mobile-active-color);
+        background-color: var(--menu-active-color);
     }
 
     .menu-bar>menu>li>a {