Merge pull request #127 from lumirlumir/develop-responsive

Develop responsive
lumirlumir · Oct 29, 2024 · b6268ed · b6268ed
2 parents b72c0aa + e92ff5e
commit b6268ed
Show file tree

Hide file tree

Showing 8 changed files with 123 additions and 91 deletions.
diff --git a/src/components/article/Content/Content.jsx b/src/components/article/Content/Content.jsx
@@ -6,6 +6,19 @@ import { markdownToJsx } from '@/utils/markup';
 
 import styles from './Content.module.scss';
 
+function ContentBoxContainer({ children }) {
+  return <div className={styles['content-box-container']}>{children}</div>;
+}
+
+function ContentBoxItem({ icon, text }) {
+  return (
+    <span className={styles['content-box-item']}>
+      <span className={styles['react-icons']}>{icon}</span>
+      <span>{text}</span>
+    </span>
+  );
+}
+
 export default function Content({ markdownDocument }) {
   const {
     basename,
@@ -21,31 +34,26 @@ export default function Content({ markdownDocument }) {
           {markdownToJsx(description)}
         </div>
 
-        <div>
-          <span className={styles.date}>
-            <span className={styles['react-icons']}>
-              {MARKDOWN_DOCUMENT_DATA_META.created.reactIcons}
-            </span>
-            <span>{created}</span>
-          </span>
-          <span className={styles.date}>
-            <span className={styles['react-icons']}>
-              {MARKDOWN_DOCUMENT_DATA_META.updated.reactIcons}
-            </span>
-            <span>{updated}</span>
-          </span>
-        </div>
+        <ContentBoxContainer>
+          <ContentBoxItem
+            icon={MARKDOWN_DOCUMENT_DATA_META.created.reactIcons}
+            text={created}
+          />
+          <ContentBoxItem
+            icon={MARKDOWN_DOCUMENT_DATA_META.updated.reactIcons}
+            text={updated}
+          />
+        </ContentBoxContainer>
 
-        <div className={styles.tags}>
+        <ContentBoxContainer>
           {tags.map(tag => (
-            <span key={tag} className={styles.tag}>
-              <span className={styles['react-icons']}>
-                {MARKDOWN_DOCUMENT_DATA_META.tags.reactIcons}
-              </span>
-              <span>{MARKDOWN_DOCUMENT_DATA_TAG_META[tag].name.en}</span>
-            </span>
+            <ContentBoxItem
+              key={tag}
+              icon={MARKDOWN_DOCUMENT_DATA_META.tags.reactIcons}
+              text={MARKDOWN_DOCUMENT_DATA_TAG_META[tag].name.en}
+            />
           ))}
-        </div>
+        </ContentBoxContainer>
       </div>
     </Link>
   );

diff --git a/src/components/article/Content/Content.module.scss b/src/components/article/Content/Content.module.scss
@@ -1,3 +1,27 @@
+.content-box-container {
+  @include selector-scrollbar(0, x);
+
+  display: flex;
+  white-space: nowrap;
+}
+
+.content-box-item {
+  padding: $size-6 $size-10;
+  margin-right: $size-8;
+  font-size: $size-12;
+  letter-spacing: $size-letter-spacing-small;
+  border: $border-default;
+  border-radius: $size-border-radius;
+
+  > .react-icons {
+    padding-right: $size-4;
+  }
+
+  @include screen(sm) {
+    font-size: $size-14;
+  }
+}
+
 .content {
   @include selector-hover-default;
 
@@ -6,69 +30,47 @@
   padding: $size-16 $size-24;
   margin-bottom: $size-16;
   background-color: var(--color-bg-default);
-  border: 1px solid var(--color-border-default);
+  border: $border-default;
   border-radius: $size-border-radius;
 
   > div {
-    margin-bottom: 14px;
-  }
-
-  .react-icons {
-    padding-right: 4px;
+    margin-bottom: $size-8;
   }
 
   .title {
-    display: -webkit-box; // ellipsis(...)
-    overflow: hidden; // ellipsis(...)
-    font-size: 28px;
+    @include props-ellipsis(3);
+
+    font-size: $size-24;
     font-weight: $text-weight-semibold;
-    -webkit-line-clamp: 1; // ellipsis(...)
-    line-clamp: 1; // ellipsis(...)
-    letter-spacing: -1px;
-    -webkit-box-orient: vertical; // ellipsis(...)
+    letter-spacing: $size-letter-spacing-medium;
   }
 
   .description {
-    display: -webkit-box; // ellipsis(...)
-    overflow: hidden; // ellipsis(...)
-    color: var(--color-fg-muted);
-    -webkit-line-clamp: 2; // ellipsis(...)
-    line-clamp: 2; // ellipsis(...)
-    letter-spacing: -0.5px;
-    -webkit-box-orient: vertical; // ellipsis(...)
-  }
+    @include props-ellipsis(4);
 
-  .date {
-    padding: 4px 10px;
-    margin-right: 8px;
-    font-size: 14px;
-    letter-spacing: -0.5px;
-    border: 1px solid var(--color-border-default);
-    border-radius: $size-border-radius;
-  }
-
-  .tags {
-    margin-top: 8px;
+    font-size: $size-14;
+    color: var(--color-fg-muted);
+    letter-spacing: $size-letter-spacing-small;
   }
 
-  .tag {
-    padding: 4px 10px;
-    margin-right: 8px;
-    font-size: 14px;
-    letter-spacing: -0.5px;
-    border: 1px solid var(--color-border-default);
-    border-radius: $size-border-radius;
+  &:hover {
+    .title,
+    .description {
+      @include props-line-clamp(10);
+    }
   }
 
-  &:hover {
+  @include screen(sm) {
     .title {
-      -webkit-line-clamp: 10; // ellipsis(...), 10 is just a large number representation.
-      line-clamp: 10; // ellipsis(...)
+      @include props-line-clamp(1);
+
+      font-size: $size-28;
     }
 
     .description {
-      -webkit-line-clamp: 10; // ellipsis(...), 10 is just a large number representation.
-      line-clamp: 10; // ellipsis(...)
+      @include props-line-clamp(2);
+
+      font-size: $size-16;
     }
   }
 }
diff --git a/src/components/aside/Categories/Categories.module.scss b/src/components/aside/Categories/Categories.module.scss
@@ -38,14 +38,14 @@
     > div.name-en {
       grid-area: 1 / 2 / 2 / 3;
       font-weight: $text-weight-medium;
-      letter-spacing: -1px;
+      letter-spacing: $size-letter-spacing-medium;
     }
 
     > div.name-ko {
       grid-area: 2 / 2 / 3 / 3;
-      font-size: 11px;
+      font-size: $size-11;
       color: var(--color-fg-muted);
-      letter-spacing: -1px;
+      letter-spacing: $size-letter-spacing-medium;
     }
 
     > div.count-docs {
@@ -56,18 +56,18 @@
       > span {
         @include props-flex-center;
 
-        width: 20px;
-        height: 20px;
-        font-size: 12px;
+        width: $size-20;
+        height: $size-20;
+        font-size: $size-12;
         font-weight: $text-weight-semibold;
-        letter-spacing: -1px;
-        border: 1px solid var(--color-border-default);
+        letter-spacing: $size-letter-spacing-medium;
+        border: $border-default;
         border-radius: 50%;
       }
 
       > svg {
-        width: 10px;
-        height: 10px;
+        width: $size-10;
+        height: $size-10;
         transform: translate(-3px, -10px);
       }
     }

diff --git a/src/components/aside/Links/Links.module.scss b/src/components/aside/Links/Links.module.scss
@@ -1,25 +1,23 @@
 .links {
   @include props-flex-center;
 
-  padding: 8px 0 16px;
-  margin: 8px 0;
+  padding: $size-8 0 $size-16;
 
   > li > a {
     @include props-flex-center;
     @include selector-hover-default;
 
+    flex-direction: column;
+    padding: $size-6;
+
     &:hover {
       > svg {
         @include props-animation-shake;
       }
     }
 
-    flex-direction: column;
-    padding: 6px;
-
     > * {
-      width: 40px;
-      margin: 2px;
+      margin: $size-2;
     }
 
     > svg {
@@ -30,8 +28,9 @@
     > span {
       @include props-flex-center;
 
+      width: $size-40;
       color: var(--color-fg-muted);
-      letter-spacing: -1px;
+      letter-spacing: $size-letter-spacing-medium;
     }
   }
 }
diff --git a/src/components/aside/Profile/Profile.module.scss b/src/components/aside/Profile/Profile.module.scss
@@ -2,21 +2,21 @@
   @include props-flex-center;
 
   flex-direction: column;
-  margin: 16px;
+  margin: $size-16;
 
   > img {
     border-radius: 50%;
   }
 
   > .user-name {
-    padding: 16px 0;
-    font-size: 20px;
+    padding: $size-16 0;
+    font-size: $size-20;
     font-weight: $text-weight-semibold;
   }
 
   > .user-bio {
-    font-size: 12px;
+    font-size: $size-12;
     color: var(--color-fg-muted);
-    letter-spacing: -0.5px;
+    letter-spacing: $size-letter-spacing-small;
   }
 }
diff --git a/src/components/layouts/Body/Body.module.scss b/src/components/layouts/Body/Body.module.scss
@@ -13,6 +13,7 @@
   }
 
   > aside {
+    z-index: 1;
     grid-area: 2 / 1 / 3 / 2;
     transform: translateX(-100%); // TODO: Move to `Aside` component.
   }

diff --git a/src/styles/utils/_mixins.scss b/src/styles/utils/_mixins.scss
@@ -5,6 +5,19 @@
   justify-content: center;
 }
 
+@mixin props-line-clamp($line: 1) {
+  -webkit-line-clamp: $line;
+  line-clamp: $line;
+}
+
+@mixin props-ellipsis($line: 1) {
+  @include props-line-clamp($line);
+
+  display: -webkit-box;
+  overflow: hidden;
+  -webkit-box-orient: vertical;
+}
+
 @mixin props-animation-fade-in {
   animation: fade-in 0.6s ease-in-out;
 
@@ -59,8 +72,12 @@
   }
 }
 
-@mixin selector-scrollbar($width: $size-4) {
-  overflow: hidden auto;
+@mixin selector-scrollbar($width: $size-4, $axis: y) {
+  @if $axis == y {
+    overflow: hidden scroll;
+  } @else {
+    overflow: scroll hidden;
+  }
 
   // Global usage: `*::webkit-scrollbar`.
   &::-webkit-scrollbar {

diff --git a/src/styles/utils/_variables.scss b/src/styles/utils/_variables.scss
@@ -4,11 +4,16 @@ $config-base-not-pseudo-class-selector: '.markdown-body *';
 /* size */
 $size-2: 0.125rem;
 $size-4: 0.25rem;
+$size-6: 0.375rem;
 $size-8: 0.5rem;
 $size-10: 0.625rem;
 $size-11: 0.6875rem;
+$size-12: 0.75rem;
+$size-14: 0.875rem;
 $size-16: 1rem;
+$size-20: 1.25rem;
 $size-24: 1.5rem;
+$size-28: 1.75rem;
 $size-40: 2.5rem;
 $size-border-radius: 6px;
 $size-header-height: 64px;