Docs

docs/index.md

@@ -1,4 +1,4 @@
-## General
+# General
 
 * [About](about.md)
 <br />About Boriel BASIC SDK
@@ -74,7 +74,7 @@ Boriel BASIC was designed from the base as a Retargeable Compiler, so it should
 it to other architectures. This is `work in progress`. See [other architectures](other_architectures.md) for more info.
 
 ## Contributing
-You can issue a Pull Request to the [GitHub repository](https://github.com/boriel/zxbasic), report bugs in the forum
+You can issue a Pull Request to the [GitHub repository](https://github.com/boriel-basic/zxbasic), report bugs in the forum
 when using the compiler, suggest new features...
 
 [![ko-fi](https://www.ko-fi.com/img/githubbutton_sm.svg)](https://ko-fi.com/H2H81J0OU)

docs/overrides/stylesheets/extra.css

@@ -1,19 +1,9 @@
-/* Import Sinclair Logo font */
-/*@font-face {*/
-/*  font-family: 'Sinclair Logo';*/
-/*  src: url('../fonts/sinclair-logo.otf.woff2') format('woff2');*/
-/*  font-weight: normal;*/
-/*  font-style: normal;*/
-/*}*/
-
-/* Apply Sinclair Logo font to the main header */
 /* Light mode - very light yellow header */
 [data-md-color-scheme="default"] .md-header {
   background-color: #d0d6da; /* Very light yellow background color */
   height: 4rem;
 }
 
-
 [data-md-color-scheme="default"] .md-header__title {
   color: #23231c;
   padding-left: 2rem;
@@ -38,11 +28,51 @@
   font-family: 'Press Start 2P', cursive;
  }
 
-/* Ensure the site name maintains its size */
+/* Make the site name responsive */
 .md-header__title .md-header__ellipsis {
   font-size: 1.2rem;
 }
 
+/* Responsive adjustments for smaller screens */
+@media screen and (max-width: 768px) {
+  [data-md-color-scheme="default"] .md-header {
+    height: 3.5rem;
+  }
+
+  [data-md-color-scheme="slate"] .md-header {
+    height: 3.5rem;
+  }
+
+  [data-md-color-scheme="default"] .md-header__title {
+    padding-left: 3.0rem;
+  }
+
+  [data-md-color-scheme="slate"] .md-header__title {
+    padding-left: 3.0rem;
+  }
+
+  .md-header__title .md-header__ellipsis {
+    font-size: 1rem;
+  }
+
+  .md-header__inner {
+    display: flex;
+  }
+
+  .md-header__button {
+    margin: 0;
+    padding: 0.5rem;
+  }
+
+  .md-header__button[for="__drawer"] {
+    order: 3;
+  }
+
+  label[for="__search"] {
+    order: 2;
+  }
+}
+
 .md-header__inner {
   background-image: url('../img/zxbasic_logo.png');
   background-repeat: no-repeat;
@@ -51,6 +81,45 @@
   height: 100%;
 }
 
+@media screen and (max-width: 480px) {
+  [data-md-color-scheme="default"] .md-header {
+    height: 3rem;
+  }
+
+  [data-md-color-scheme="slate"] .md-header {
+    height: 3rem;
+  }
+
+  [data-md-color-scheme="default"] .md-header__title {
+    padding-left: 48px;
+  }
+
+  [data-md-color-scheme="slate"] .md-header__title {
+    padding-left: 48px;
+  }
+
+  .md-header__title .md-header__ellipsis {
+    font-size: 0.8rem;
+  }
+
+  .md-header__inner {
+    display: flex;
+  }
+
+  .md-header__button {
+    margin: 0;
+    padding: 2px;
+  }
+
+  .md-header__button[for="__drawer"] {
+    order: 3; /* Ponlo al final (tras tema y búsqueda) */
+  }
+
+  label[for="__search"] {
+    order: 2;
+  }
+}
+
 /*!* Make the logo size 100% of the header *!*/
 .md-header__button.md-logo {
   color: #ff000000;