Add settigs page markup

assets/icons/settings.svg

@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="1.5" stroke="#FFFFFF" fill="none" stroke-linecap="round" stroke-linejoin="round">
+  <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+  <path d="M14 6m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0" />
+  <path d="M4 6l8 0" />
+  <path d="M16 6l4 0" />
+  <path d="M8 12m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0" />
+  <path d="M4 12l2 0" />
+  <path d="M10 12l10 0" />
+  <path d="M17 18m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0" />
+  <path d="M4 18l11 0" />
+  <path d="M19 18l1 0" />
+</svg>

src/index.html

@@ -45,20 +45,20 @@
         <button class="info"></button>
         <button class="maximize-full-screen"></button>
         <button class="minimize-full-screen"></button>
+        <button class="settings"></button>
         <button class="restart"></button>
       </nav>
 
-      <main class="pages hidden">
+      <main class="pages hidden info-page">
-        <section class="info-page">
+        <h1>Title</h1>
-          <h1>Title</h1>
+        <p>
-          <p>
+          Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque itaque
-            Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque itaque
+          perspiciatis nesciunt, molestiae officiis dignissimos porro! Provident totam sit
-            perspiciatis nesciunt, molestiae officiis dignissimos porro! Provident totam
+          enim, dolores dicta possimus ex assumenda earum, ea tempore, aut quidem?
-            sit enim, dolores dicta possimus ex assumenda earum, ea tempore, aut quidem?
+        </p>
-          </p>
-        </section>
-        <section class="info-page"></section>
       </main>
+
+      <main class="pages hidden settings-page"></main>
     </aside>
     <script inline inline-asset="index.js" inline-asset-delete></script>
   </body>

src/index.scss

@@ -65,36 +65,52 @@ html {
       .counters {
         @include blurred-background(white);
         position: absolute;
-        top: var(--normal-margin);
-        right: var(--normal-margin);
         border-radius: var(--border-radius);
         padding: var(--small-margin);
 
-        pre {
+        @include on-large-screen {
-          color: black;
+          top: var(--normal-margin);
+          right: var(--normal-margin);
+        }
+
+        @include on-small-screen {
+          bottom: var(--normal-margin);
+          right: var(--normal-margin);
         }
       }
     }
 
     > aside {
       @include blurred-background(#fff);
-
+      display: flex;
       position: absolute;
-      top: 50%;
+
-      left: 0;
+      @include on-large-screen {
-      transform: translateY(-50%);
+        top: 50%;
+        left: 0;
+        transform: translateY(-50%);
+      }
+
+      @include on-small-screen {
+        top: 0;
+        left: 50%;
+        transform: translateX(-50%);
+        flex-direction: column;
+      }
+
       transition: opacity var(--transition-time-long);
       border-radius: var(--border-radius);
       margin: var(--small-margin);
 
-      display: flex;
-
       > nav.buttons {
         @include center-children;
-        flex-direction: column;
         gap: var(--normal-margin);
         margin: var(--small-margin);
 
+        @include on-large-screen {
+          flex-direction: column;
+        }
+
         > button.info {
           @include image-button(url('../assets/icons/info.svg'), var(--accent-color));
         }
@@ -107,23 +123,44 @@ html {
           @include image-button(url('../assets/icons/minimize.svg'), var(--accent-color));
         }
 
+        > button.settings {
+          @include image-button(url('../assets/icons/settings.svg'), var(--accent-color));
+        }
+
         > button.restart {
           @include image-button(url('../assets/icons/restart.svg'), var(--accent-color));
         }
       }
 
       > main.pages {
-        width: max(500px, 70vw);
         overflow: hidden;
-        transition: width var(--transition-time-long);
 
-        &.hidden {
+        &,
-          width: 0;
+        * {
+          transition: width var(--transition-time-long),
+            height var(--transition-time-long);
+
+          @include on-large-screen {
+            width: max(500px, 10vw);
+          }
+
+          @include on-small-screen {
+            height: max(500px, 70vh);
+          }
         }
 
-        .info-page {
+        &.hidden {
-          padding: var(--normal-margin);
+          @include on-large-screen {
-          width: max(500px, 70vw);
+            width: 0;
+          }
+
+          @include on-small-screen {
+            height: 0;
+          }
+        }
+
+        > section {
+          margin: var(--normal-margin);
         }
       }
     }

src/style/mixins.scss

@@ -1,7 +1,7 @@
 @use 'sass:math';
 @use 'sass:color';
 
-$breakpoint-width: 700px !default;
+$breakpoint-width: 600px !default;
 
 @mixin on-small-screen() {
   @media (max-width: ($breakpoint-width - 1px)) {