Refactor and add buttons

src/index.html

@@ -57,10 +57,17 @@
             perspiciatis nesciunt, molestiae officiis dignissimos porro! Provident totam
             sit enim, dolores dicta possimus ex assumenda earum, ea tempore, aut quidem?
           </p>
+
+          <button id="share" class="large-button">Share</button>
         </section>
       </main>
 
-      <main class="pages hidden settings-page"><section></section></main>
+      <main class="pages hidden settings-page">
+        <section>
+          <div class="settings-content"></div>
+          <button id="apply-defaults" class="large-button">Apply defaults</button>
+        </section>
+      </main>
     </aside>
     <script inline inline-asset="index.js" inline-asset-delete></script>
   </body>

src/index.scss

@@ -1,302 +1,271 @@
-@use 'style/vars';
-@use 'style/fonts';
 @use 'style/mixins' as *;
+@use 'style/common';
 
-*,
+html > body {
-*::before,
+  width: 100%;
-*::after {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-
-  @media (prefers-reduced-motion) {
-    transition: none !important;
-    animation: none !important;
-  }
-}
-
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  font-family: 'Comfortaa', sans-serif;
-  margin-bottom: var(--small-margin);
-}
-
-p {
-  font-family: 'Open Sans', sans-serif;
-}
-
-html {
   height: 100%;
-  -webkit-font-smooth: antialiased;
+  display: flex;
+  position: relative;
 
-  > body {
+  > .canvas-container {
-    width: 100%;
     height: 100%;
+    width: 100%;
     display: flex;
-    position: relative;
 
-    > .canvas-container {
+    > canvas {
       height: 100%;
       width: 100%;
-      display: flex;
 
-      > canvas {
+      cursor: url('../assets/icons/brush.svg') 0 24, auto;
-        height: 100%;
+    }
-        width: 100%;
 
-        cursor: url('../assets/icons/brush.svg') 0 24, auto;
+    > .errors-container {
-      }
+      position: absolute;
+      top: 0;
+      left: 0;
+      margin: var(--normal-margin);
 
-      > .errors-container {
+      pre {
-        position: absolute;
+        font-size: 20px;
-        top: 0;
+        color: red;
-        left: 0;
-        margin: var(--normal-margin);
-
-        pre {
-          font-size: 20px;
-          color: red;
-        }
-      }
-
-      .counters {
-        @include blurred-background(white);
-        position: absolute;
-        border-radius: var(--border-radius);
-        padding: var(--small-margin);
-
-        @include on-large-screen {
-          top: var(--normal-margin);
-          right: var(--normal-margin);
-        }
-
-        @include on-small-screen {
-          bottom: var(--normal-margin);
-          right: var(--normal-margin);
-        }
       }
     }
 
-    > aside {
+    .counters {
-      @include blurred-background(#fff);
+      @include blurred-background(white);
-      display: flex;
       position: absolute;
-      overflow: hidden;
+      border-radius: var(--border-radius);
+      padding: var(--small-margin);
 
       @include on-large-screen {
-        top: 50%;
+        top: var(--normal-margin);
-        left: 0;
+        right: var(--normal-margin);
-        transform: translateY(-50%);
-        max-height: 350px;
       }
 
       @include on-small-screen {
-        top: 0;
+        bottom: var(--normal-margin);
-        left: 50%;
+        right: var(--normal-margin);
-        transform: translateX(-50%);
+      }
+    }
+  }
+
+  > aside {
+    @include blurred-background(#fff);
+    box-shadow: var(--shadow);
+    display: flex;
+    position: absolute;
+    overflow: hidden;
+
+    @include on-large-screen {
+      top: 50%;
+      left: 0;
+      transform: translateY(-50%);
+      max-height: 350px;
+    }
+
+    @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);
+
+    > nav.buttons {
+      @include center-children;
+      justify-content: space-evenly;
+
+      @include on-large-screen {
         flex-direction: column;
       }
 
-      transition: opacity var(--transition-time-long);
+      > button {
-      border-radius: var(--border-radius);
+        position: relative;
-      margin: var(--small-margin);
+        border: none;
+        background-color: transparent;
+        cursor: pointer;
 
-      > nav.buttons {
+        @include square(var(--icon-size));
-        @include center-children;
+        margin: var(--small-margin);
-        justify-content: space-evenly;
 
-        @include on-large-screen {
+        &::before,
-          flex-direction: column;
+        &::after {
+          content: '';
+          position: absolute;
+          top: 0;
+          left: 0;
+          height: 100%;
+          width: 100%;
         }
 
-        > button {
+        &::before {
-          position: relative;
+          background-color: var(--accent-color);
-          border: none;
-          background-color: transparent;
-          cursor: pointer;
 
-          @include square(var(--icon-size));
-          margin: var(--small-margin);
-
-          &::before,
-          &::after {
-            content: '';
-            position: absolute;
-            top: 0;
-            left: 0;
-            height: 100%;
-            width: 100%;
-          }
-
-          &::before {
-            background-color: var(--accent-color);
-
-            @include on-large-screen {
-              width: 0;
-              border-radius: 0 var(--border-radius) var(--border-radius) 0;
-              transition: background-color var(--transition-time),
-                width var(--transition-time);
-              left: calc(-1 * var(--small-margin));
-              height: 140%;
-              top: 50%;
-              transform: translateY(-50%);
-            }
-
-            @include on-small-screen {
-              height: 0;
-              border-radius: 0 0 var(--border-radius) var(--border-radius);
-              transition: background-color var(--transition-time),
-                height var(--transition-time);
-              top: calc(-1 * var(--small-margin));
-              width: 140%;
-              left: 50%;
-              transform: translateX(-50%);
-            }
-          }
-
-          &::after {
-            background-color: var(--accent-color);
-
-            transition: transform var(--transition-time),
-              background-color var(--transition-time);
-
-            -webkit-mask-repeat: no-repeat;
-            mask-repeat: no-repeat;
-
-            @include square(var(--icon-size));
-          }
-
-          &.active {
-            &::before {
-              @include on-large-screen {
-                width: calc(100% + 2 * var(--small-margin));
-              }
-
-              @include on-small-screen {
-                height: calc(100% + 2 * var(--small-margin));
-              }
-            }
-
-            &::after {
-              background-color: white;
-            }
-          }
-
-          &:hover::after {
-            transform: scale(1.15);
-          }
-
-          &.info::after {
-            -webkit-mask-image: url('../assets/icons/info.svg');
-            mask-image: url('../assets/icons/info.svg');
-          }
-
-          &.maximize-full-screen::after {
-            -webkit-mask-image: url('../assets/icons/maximize.svg');
-            mask-image: url('../assets/icons/maximize.svg');
-          }
-
-          &.minimize-full-screen::after {
-            -webkit-mask-image: url('../assets/icons/minimize.svg');
-            mask-image: url('../assets/icons/minimize.svg');
-          }
-
-          &.settings::after {
-            -webkit-mask-image: url('../assets/icons/settings.svg');
-            mask-image: url('../assets/icons/settings.svg');
-          }
-
-          &.restart::after {
-            -webkit-mask-image: url('../assets/icons/restart.svg');
-            mask-image: url('../assets/icons/restart.svg');
-          }
-        }
-      }
-
-      > main.pages {
-        overflow-x: hidden;
-        overflow-y: auto;
-        &::-webkit-scrollbar-track,
-        &::-webkit-scrollbar {
-          background-color: transparent;
-          width: 6px;
-        }
-        &::-webkit-scrollbar-thumb {
-          background-color: var(--main-color);
-          border-radius: var(--border-radius);
-        }
-
-        &,
-        > * {
-          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);
-          }
-        }
-
-        &.hidden {
           @include on-large-screen {
             width: 0;
+            border-radius: 0 var(--border-radius) var(--border-radius) 0;
+            transition: background-color var(--transition-time),
+              width var(--transition-time);
+            left: calc(-1 * var(--small-margin));
+            height: 140%;
+            top: 50%;
+            transform: translateY(-50%);
           }
 
           @include on-small-screen {
             height: 0;
+            border-radius: 0 0 var(--border-radius) var(--border-radius);
+            transition: background-color var(--transition-time),
+              height var(--transition-time);
+            top: calc(-1 * var(--small-margin));
+            width: 140%;
+            left: 50%;
+            transform: translateX(-50%);
           }
         }
 
-        > section {
+        &::after {
-          padding: var(--normal-margin);
+          background-color: var(--accent-color);
 
-          .slider {
+          transition: transform var(--transition-time),
-            $track-height: 12px;
+            background-color var(--transition-time);
-            margin-bottom: var(--small-margin);
-            user-select: none;
 
-            p {
+          -webkit-mask-repeat: no-repeat;
-              display: flex;
+          mask-repeat: no-repeat;
-              justify-content: space-between;
+
+          @include square(var(--icon-size));
+        }
+
+        &.active {
+          &::before {
+            @include on-large-screen {
+              width: calc(100% + 2 * var(--small-margin));
             }
 
-            input[type='range'] {
+            @include on-small-screen {
-              width: 100%;
+              height: calc(100% + 2 * var(--small-margin));
-              height: $track-height;
+            }
+          }
+
+          &::after {
+            background-color: white;
+          }
+        }
+
+        &:hover::after {
+          transform: scale(1.15);
+        }
+
+        &.info::after {
+          -webkit-mask-image: url('../assets/icons/info.svg');
+          mask-image: url('../assets/icons/info.svg');
+        }
+
+        &.maximize-full-screen::after {
+          -webkit-mask-image: url('../assets/icons/maximize.svg');
+          mask-image: url('../assets/icons/maximize.svg');
+        }
+
+        &.minimize-full-screen::after {
+          -webkit-mask-image: url('../assets/icons/minimize.svg');
+          mask-image: url('../assets/icons/minimize.svg');
+        }
+
+        &.settings::after {
+          -webkit-mask-image: url('../assets/icons/settings.svg');
+          mask-image: url('../assets/icons/settings.svg');
+        }
+
+        &.restart::after {
+          -webkit-mask-image: url('../assets/icons/restart.svg');
+          mask-image: url('../assets/icons/restart.svg');
+        }
+      }
+    }
+
+    > main.pages {
+      overflow-x: hidden;
+      overflow-y: auto;
+      &::-webkit-scrollbar-track,
+      &::-webkit-scrollbar {
+        background-color: transparent;
+        width: 6px;
+      }
+      &::-webkit-scrollbar-thumb {
+        background-color: var(--main-color);
+        border-radius: var(--border-radius);
+      }
+
+      &,
+      > * {
+        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);
+        }
+      }
+
+      &.hidden {
+        @include on-large-screen {
+          width: 0;
+        }
+
+        @include on-small-screen {
+          height: 0;
+        }
+      }
+
+      > section {
+        padding: var(--normal-margin);
+        display: flex;
+        flex-direction: column;
+
+        .slider {
+          $track-height: 12px;
+          margin-bottom: var(--small-margin);
+          user-select: none;
+
+          p {
+            display: flex;
+            justify-content: space-between;
+          }
+
+          input[type='range'] {
+            width: 100%;
+            height: $track-height;
+            appearance: none;
+            background: transparent;
+            outline: none;
+            border-radius: 1000px;
+
+            &::-webkit-slider-runnable-track {
               appearance: none;
-              background: transparent;
+              cursor: pointer;
-              outline: none;
               border-radius: 1000px;
+              @include square(15px);
+              background: var(--accent-color);
+            }
 
-              &::-webkit-slider-runnable-track {
+            &::-webkit-slider-thumb {
-                appearance: none;
+              appearance: none;
-                cursor: pointer;
+              cursor: pointer;
-                border-radius: 1000px;
+              border-radius: 1000px;
-                @include square(15px);
+              $size: 24px;
-                background: var(--accent-color);
+              @include square($size);
-              }
+              background: white;
+              box-shadow: 0 0 5px 1px var(--accent-color);
 
-              &::-webkit-slider-thumb {
+              transform: translateY(-5px);
-                appearance: none;
+              transition: transform var(--transition-time);
-                cursor: pointer;
+              &:hover {
-                border-radius: 1000px;
+                transform: translateY(-5px) scale(1.1);
-                $size: 24px;
-                @include square($size);
-                background: white;
-                box-shadow: 0 0 5px 1px var(--accent-color);
-
-                transform: translateY(-5px);
-                transition: transform var(--transition-time);
-                &:hover {
-                  transform: translateY(-5px) scale(1.1);
-                }
               }
             }
           }

src/style/common.scss

@@ -0,0 +1,47 @@
+@use 'vars';
+@use 'fonts';
+@use 'mixins' as *;
+
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+
+  @media (prefers-reduced-motion) {
+    transition: none !important;
+    animation: none !important;
+  }
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-family: 'Comfortaa', sans-serif;
+  margin-bottom: var(--small-margin);
+}
+
+p {
+  font-family: 'Open Sans', sans-serif;
+}
+
+html {
+  height: 100%;
+  -webkit-font-smooth: antialiased;
+}
+
+.large-button {
+  border: none;
+  background-color: var(--accent-color);
+  cursor: pointer;
+  border-radius: var(--border-radius);
+  padding: calc(var(--small-margin) / 2) var(--small-margin);
+  margin: var(--small-margin) auto;
+  align-self: flex-end;
+  @include main-font();
+  color: white;
+}

src/style/vars.scss

@@ -12,8 +12,7 @@
   --blurred-card-color: transparent;
   --blur-radius: 12px;
   --special-text-color: var(--accent-color);
-  --inset-shadow: inset 0 0 4px 1px rgba(0, 0, 0, 0.05), inset 0 0 5px rgba(0, 0, 0, 0.2);
+  --border-radius: 0.6rem;
-  --border-radius: 0.85rem;
 
   --large-margin: 4.6rem;
   --normal-margin: 2rem;