refactor(about): Separate scss files

src/features/styles/ui/about/_activity.scss

@@ -0,0 +1,67 @@
+@mixin activity {
+  @include container;
+
+  padding-bottom: 50px;
+
+  .label {
+    @include label;
+  }
+
+  &-card {
+    display: flex;
+    margin-top: 1rem;
+    line-height: 1.72rem;
+
+    @include mobile {
+      flex-direction: column;
+    }
+
+    .year {
+      min-width: 5rem;
+      font-size: 1.3rem;
+      width: 11rem;
+
+      &:hover {
+        filter: drop-shadow(2px 2px 4px lightgray) invert(2%);
+      }
+
+      @include mobile {
+        margin: 1rem 0 0.2rem;
+      }
+    }
+
+    .left-line {
+      border-left: 0.24rem solid $dark-color;
+      padding-left: 1rem;
+
+      li {
+        display: flex;
+
+        .category {
+          min-width: 120px;
+          color: $min-color;
+
+          @media print {
+            color: #101010;
+          }
+        }
+
+        .link-wrap {
+          width: 100%;
+        }
+
+        .link {
+          color: #2dd0a8;
+
+          @media print {
+            color: #101010;
+          }
+
+          &:hover {
+            color: $highlight-color;
+          }
+        }
+      }
+    }
+  }
+}

src/features/styles/ui/about/_common.scss

@@ -0,0 +1,18 @@
+@mixin container {
+  display: flex;
+  flex-direction: column;
+  padding-bottom: 30px;
+}
+
+@mixin label {
+  user-select: none;
+  border-bottom: 1px solid $base-color;
+  color: $min-color;
+  font-weight: bold;
+  font-size: 1.5rem;
+  margin-bottom: 4px;
+
+  @media print {
+    color: #101010;
+  }
+}

src/features/styles/ui/about/_education.scss

@@ -0,0 +1,11 @@
+@mixin education {
+  @include container;
+
+  .label {
+    @include label;
+  }
+
+  &-position {
+    border-bottom: none;
+  }
+}

src/features/styles/ui/about/_introduction.scss

@@ -0,0 +1,24 @@
+@mixin introduction {
+  @include container;
+
+  .description {
+    margin: 2rem 0 1rem;
+    line-height: 2rem;
+
+    .p {
+      margin: 2rem 0;
+
+      .underline-highlight-fade {
+        @media print {
+          color: $black;
+          text-decoration: underline 0.15em $black;
+        }
+      }
+    }
+
+    li::before {
+      content: '❑';
+      margin-right: 0.5rem;
+    }
+  }
+}

src/features/styles/ui/about/_profile.scss

@@ -0,0 +1,64 @@
+@mixin profile {
+  &-container {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-end;
+
+    @include mobile {
+      flex-direction: column;
+      align-items: normal;
+    }
+
+    .jumbotron {
+      display: flex;
+      justify-content: flex-start;
+      background: linear-gradient(-90deg, #ee7752, #e73c7e, #23a6d5, #e73c7e);
+      background-clip: text;
+      color: transparent;
+      font-size: 8rem;
+      line-height: 8.5rem;
+      letter-spacing: 0.2rem;
+      font-weight: bold;
+      filter: drop-shadow(2px 4px 1px black);
+
+      @include mobile {
+        font-size: 6rem;
+        letter-spacing: 1px;
+      }
+
+      @media print {
+        color: #101010;
+        font-weight: normal;
+        background: none;
+        filter: none;
+      }
+    }
+
+    .logo-container {
+      display: flex;
+      flex-direction: column;
+
+      .about-profile-logo {
+        display: flex;
+        justify-content: flex-end;
+        padding-bottom: 1px;
+        height: 1.7rem;
+
+        a {
+          display: flex;
+          align-items: center;
+        }
+
+        img {
+          padding: 2px 0 2px 5px;
+          height: 1.7rem;
+          width: 1.7rem;
+        }
+
+        .gmail {
+          height: 1.4rem;
+        }
+      }
+    }
+  }
+}

src/features/styles/ui/about/_work.scss

@@ -0,0 +1,107 @@
+@mixin work {
+  @include container;
+
+  .skeleton {
+    height: $max-height;
+  }
+
+  .label {
+    @include label;
+
+    cursor: pointer;
+
+    &:hover {
+      color: $sub-color;
+    }
+  }
+
+  &-card {
+    display: flex;
+    margin-top: 1rem;
+    padding: 10px 0;
+
+    @include mobile {
+      flex-direction: column;
+    }
+
+    .left-side {
+      width: 12rem;
+
+      .logo {
+        width: 4rem;
+        height: 4rem;
+        transition: filter 350ms ease-in-out;
+
+        &:hover {
+          filter: drop-shadow(2px 2px 4px lightgray) invert(2%);
+        }
+      }
+
+      .date {
+        margin-top: 0.3rem;
+      }
+    }
+
+    .border {
+      border: 1px solid $background-color;
+    }
+
+    .content {
+      width: 100%;
+      display: flex;
+      flex-direction: column;
+      margin-left: 22px;
+
+      @include mobile {
+        margin-left: 0;
+      }
+
+      .headline {
+        display: flex;
+        align-items: baseline;
+
+        .title {
+          font-size: 1.5rem;
+          font-weight: bold;
+          user-select: none;
+        }
+
+        .date {
+          padding-left: 4px;
+          font-style: italic;
+        }
+
+        @include mobile {
+          flex-direction: column;
+
+          .date {
+            padding-left: 0;
+          }
+        }
+      }
+
+      .hover {
+        cursor: pointer;
+        transition: color 350ms;
+
+        &:hover {
+          color: $highlight-color;
+        }
+      }
+
+      .position {
+        border-bottom: 1px dotted $min-color;
+        margin-bottom: 15px;
+        user-select: none;
+
+        @media print {
+          border-bottom: 1px dotted $black;
+        }
+      }
+
+      .project {
+        @include project;
+      }
+    }
+  }
+}