Merge branch 'refactor-layout'

.stylelintrc.json

@@ -8,6 +8,7 @@
     "scss/dollar-variable-pattern": null,
     "scss/percent-placeholder-pattern": null,
     "scss/no-global-function-names": null,
+    "scss/at-extend-no-missing-placeholder": null,
     "property-no-vendor-prefix": [
       true,
       { "ignoreProperties": ["background-clip", "backdrop-filter"] }

src/App.scss

@@ -1,7 +1,5 @@
 @use './scss/reset';
 
-@import './scss/media';
-
 html,
 body {
   font-family: Lato, 'Noto Sans TC', sans-serif;

src/Components/14Example/styles.module.scss

@@ -1,5 +1,3 @@
-@import '../../scss/color';
-
 .example {
   display: flex;
   flex-direction: column;
@@ -8,13 +6,13 @@
   & h4 {
     font-size: 1.25rem;
     font-weight: 500;
-    color: $primary;
+    color: #3479be;
   }
 
   & p {
     font-size: 1rem;
     line-height: 140%;
-    color: $primary;
+    color: #3479be;
     letter-spacing: 1px;
   }
 

src/Components/Titles/index.jsx

@@ -0,0 +1,18 @@
+import styles from './styles.module.scss';
+
+const Title = ({ title, subtitle, titleColor, titleClassName, size }) => {
+  let titleSize = styles.title_L;
+  if (size === 'm') titleSize = styles.title_M;
+  if (size === 's') titleSize = styles.title_S;
+
+  return (
+    <div className={`${styles.title_container} ${titleClassName}`}>
+      <h1 className={titleSize} style={{ color: titleColor }}>
+        {title}
+      </h1>
+      {subtitle && <p className={styles.subtitle}>{subtitle}</p>}
+    </div>
+  );
+};
+
+export { Title };

src/Components/Titles/styles.module.scss

@@ -0,0 +1,44 @@
+@use '../../scss/space' as space;
+@use '../../scss/font' as font;
+
+.title_container {
+  display: flex;
+  flex-direction: column;
+  gap: space.$space_1;
+
+  width: 100%;
+
+  text-align: center;
+}
+
+.title {
+  &_L {
+    font-size: font.$h1;
+    font-weight: 900;
+    line-height: 160%;
+  }
+
+  &_M {
+    font-size: font.$h2;
+    font-weight: 700;
+    line-height: 140%;
+  }
+
+  &_S {
+    font-size: font.$h3;
+    font-weight: 700;
+    line-height: 120%;
+  }
+}
+
+.subtitle {
+  font-size: font.$h4;
+  font-weight: 500;
+  line-height: 100%;
+  color: #747b88;
+
+  & a {
+    color: #747b88;
+    text-decoration: underline;
+  }
+}

src/Components/index.jsx

@@ -11,5 +11,7 @@ export { Example } from './14Example';
 export { Form } from './15Form';
 export { List } from './15List';
 
+export { Title } from './Titles';
+
 export { Card } from './Card';
 export { Image } from './Image';

src/Layouts/LayoutCol1/index.jsx

@@ -0,0 +1,12 @@
+import { Image } from '@/Components';
+import styles from './styles.module.scss';
+
+export const LayoutCol1 = ({ baseClassName, children, bgImages, layout }) => {
+  const layoutClass = layout === 'full' ? styles.layout_full : styles.layout_center_col;
+  return (
+    <section className={`${styles.base} ${baseClassName}`}>
+      {bgImages && <Image images={bgImages} className={styles.bg} />}
+      <div className={layoutClass}>{children}</div>
+    </section>
+  );
+};

src/Layouts/LayoutCol1/styles.module.scss

@@ -0,0 +1,45 @@
+@use '../../scss/space' as space;
+
+.base {
+  position: relative;
+  overflow-x: hidden;
+  overflow-y: scroll;
+  height: 100vh;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
+
+.bg {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+}
+
+%base_layout {
+  position: relative;
+
+  display: flex;
+  flex-direction: column;
+  gap: space.$space_3;
+  align-items: center;
+
+  width: 100%;
+  padding: space.$space_3;
+}
+
+.layout_full {
+  @extend %base_layout;
+
+  justify-content: center;
+  height: 100%;
+}
+
+.layout_center_col {
+  @extend %base_layout;
+
+  max-width: 800px;
+  margin: 0 auto space.$space_3;
+}

src/Layouts/index.jsx

@@ -0,0 +1 @@
+export { LayoutCol1 } from './LayoutCol1';

src/Pages/01Drums/index.jsx

@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react';
 
-import { Key, Image } from '@/Components/index';
+import { Key } from '@/Components/index';
 import {
   clap,
   hihat,
@@ -15,6 +15,7 @@ import {
 import baseImg from '@/Assets/01bg/base.jpg';
 import webpImg from '@/Assets/01bg/base.webp';
 import styles from './styles.module.scss';
+import { LayoutCol1 } from '@/Layouts';
 
 const keys = [
   { keyNum: 65, keyName: 'a', soundTag: 'clap' },
@@ -40,6 +41,17 @@ const sounds = {
   l: new Audio(tink),
 };
 
+const images = {
+  base: baseImg,
+  l1x: webpImg,
+  l2x: webpImg,
+  m1x: webpImg,
+  m2x: webpImg,
+  s1x: webpImg,
+  s2x: webpImg,
+  s3x: webpImg,
+};
+
 const DrumPage = () => {
   const [currentKey, setCurrentKey] = useState('');
 
@@ -64,38 +76,21 @@ const DrumPage = () => {
   }, []);
 
   return (
-    <section className={styles.page}>
-      <Image
-        images={{
-          base: baseImg,
-          l1x: webpImg,
-          l2x: webpImg,
-          m1x: webpImg,
-          m2x: webpImg,
-          s1x: webpImg,
-          s2x: webpImg,
-          s3x: webpImg,
-        }}
-        className={styles.bg}
-      />
+    <LayoutCol1 baseClassName={styles.page} bgImages={images} layout='full'>
+      <p className={styles.caption}>Press your keyboard or tap the keys on the screen!</p>
 
-      <div className={styles.container}>
-        <h1 className={styles.caption}>
-          Press your keyboard or tap the keys on the screen!
-        </h1>
-        <div className={styles.keys}>
-          {keys.map(({ keyNum, keyName, soundTag }) => (
-            <Key
-              key={keyNum}
-              keyName={keyName}
-              soundTag={soundTag}
-              onClick={() => handlePlaySound(keyName)}
-              currentKey={currentKey}
-            />
-          ))}
-        </div>
+      <div className={styles.keys}>
+        {keys.map(({ keyNum, keyName, soundTag }) => (
+          <Key
+            key={keyNum}
+            keyName={keyName}
+            soundTag={soundTag}
+            onClick={() => handlePlaySound(keyName)}
+            currentKey={currentKey}
+          />
+        ))}
       </div>
-    </section>
+    </LayoutCol1>
   );
 };
 

src/Pages/01Drums/styles.module.scss

@@ -1,11 +1,4 @@
-.page {
-  position: relative;
-  overflow: hidden;
-  width: 100%;
-  height: 100%;
-}
-
-.bg::after {
+.page > div:first-child::after {
   content: '';
 
   position: absolute;
@@ -16,16 +9,7 @@
   height: 100%;
 
   background-color: rgba($color: #000, $alpha: 40%);
-  backdrop-filter: blur(8px) saturate(0.8);
-}
-
-.container {
-  position: absolute;
-  top: 50%;
-  transform: translate(0, -70%);
-
-  width: 100%;
-  padding: 0 4rem;
+  backdrop-filter: blur(8px) saturate(1);
 }
 
 .keys {
@@ -34,11 +18,11 @@
   gap: 2rem;
   align-items: center;
   justify-content: center;
-}
 
-.caption {
   margin-bottom: 4rem;
+}
 
+.caption {
   font-family: monospace;
   font-size: 1.2rem;
   font-weight: 500;