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,39 +1,7 @@
-@use 'style/vars';
-@use 'style/fonts';
 @use 'style/mixins' as *;
+@use 'style/common';
 
-*,
+html > body {
-*::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;
-
-  > body {
   width: 100%;
   height: 100%;
   display: flex;
@@ -83,6 +51,7 @@ html {
 
   > aside {
     @include blurred-background(#fff);
+    box-shadow: var(--shadow);
     display: flex;
     position: absolute;
     overflow: hidden;
@@ -232,8 +201,7 @@ html {
 
       &,
       > * {
-          transition: width var(--transition-time-long),
+        transition: width var(--transition-time-long), height var(--transition-time-long);
-            height var(--transition-time-long);
 
         @include on-large-screen {
           width: max(500px, 10vw);
@@ -256,6 +224,8 @@ html {
 
       > section {
         padding: var(--normal-margin);
+        display: flex;
+        flex-direction: column;
 
         .slider {
           $track-height: 12px;
@@ -303,5 +273,4 @@ html {
       }
     }
   }
-  }
 }

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;