feat(directory): update home.jsx mobile layout

directory/index.html

@@ -26,7 +26,7 @@
       transition: opacity cubic-bezier(0.65, 0.05, 0.36, 1) 0.3s;;
     }
 
-    .loader .icon {
+    .loader .icon, .loader .flasher {
       display: block;
       margin: 0 auto;
       width: 2rem;
@@ -36,11 +36,16 @@
       border-right: 0.3rem solid;
       border-top: 0.3rem solid;
       transform: translateY(-0.3rem) rotate(-45deg);
-      animation: icon-flash 2s cubic-bezier(0.65, 0.05, 0.36, 1) infinite;
       box-shadow: inset 0 0 16px 2px rgb(200 14 0), 0 0 18px 5px rgb(200 14 0);
       border-color: rgba(54, 0, 0, 87%);
     }
 
+    .loader .flasher {
+      position: absolute;
+      box-shadow: unset;
+      animation: icon-flash 1.2s cubic-bezier(0.2, 0.6, 0.2, 1) infinite;
+    }
+
     @media (prefers-color-scheme: dark) {
       .loader {
         background-color: #131313;
@@ -54,8 +59,11 @@
     }
 
     @keyframes icon-flash {
-      50% {
-        opacity: 0.2;
+      100%{
+        opacity: 0;
+        width: 4rem;
+        height: 4rem;
+        border-color: rgb(0, 0, 0);
       }
     }
   </style>
@@ -65,6 +73,7 @@
   <div id="root"></div>
   <div class="loader">
     <span class="icon"></span>
+    <span class="flasher"></span>
   </div>
   <script type="module" src="/src/App.jsx"></script>
 </body>

directory/src/App.scss

@@ -52,6 +52,17 @@
   color: var(--text-color);
   background-color: var(--root-background-color);
   min-height: 100vh;
+
+  @media only screen and (max-width: 430px) {
+    & {
+      font-size: 12px;
+    }
+  }
+  @media only screen and (max-width: 1600px) {
+    & {
+      font-size: 14px;
+    }
+  }
 }
 
 #root {
@@ -62,27 +73,6 @@
   min-height: 100vh;
 }
 
-*::-webkit-scrollbar {
-  width: 12px;
-}
-
-*::-webkit-scrollbar-track {
-  background-color: transparent;
-}
-
-*::-webkit-scrollbar-thumb {
-  background-color: var(--border-color);
-  border-radius: 100px;
-  border: 5px solid transparent;
-  background-clip: padding-box;
-  transition: all 0.3s ease-in-out;
-}
-
-*::-webkit-scrollbar-thumb:hover {
-  border: 4px solid transparent;
-  background-color: var(--text-color);
-}
-
 a {
   color: var(--text-color);
   text-decoration: none;

directory/src/component/scss/border.module.scss

@@ -18,5 +18,11 @@
   }
   &:after {
     left: 100%;
+    @media only screen and (max-width: 430px) {
+      & {
+        width: 0;
+        height: 0;
+      }
+    }
   }
 }

directory/src/component/scss/dropdown.module.scss

@@ -90,7 +90,7 @@
     .date {
       font-family: "Bender", 'Noto Sans SC', 'Noto Sans JP', 'Noto Sans KR', 'Noto Sans', sans-serif;
       font-weight: bold;
-      font-size: 24px;
+      font-size: 1.5rem;
       display: flex;
       flex-direction: row;
       flex-wrap: nowrap;

directory/src/routes/path/Home.jsx

@@ -227,6 +227,7 @@ export default function Home() {
           return (
             <section key={v[0].date} hidden={length === 0}>
               <section className={classes.group}>
+                <section className={classes['operator-group']}>
                 {v.map(item => {
                   return (
                     <OperatorElement
@@ -237,6 +238,7 @@ export default function Home() {
                     />
                   )
                 })}
+                </section>
                 <section className={classes.date}>{v[0].date}</section>
               </section>
               <Border />

directory/src/scss/_main_share.scss

@@ -10,4 +10,11 @@
   max-width: 100rem;
   padding-top: 5rem;
   min-height: calc(100vh - 5rem - 3rem);
+
+  @media only screen and (max-width: 430px) {
+    & {
+      width: calc(100vw - 2rem);
+      margin-left: 2rem;
+    }
+  }
 }

directory/src/scss/_page_base.scss

@@ -9,6 +9,12 @@
   letter-spacing: 0.1rem;
   flex: auto;
   user-select: none;
+
+  @media only screen and (max-width: 430px) {
+    & {
+      margin: 0rem;
+    }
+  }
 }
 
 .container {
@@ -43,10 +49,25 @@
   flex-wrap: wrap;
   user-select: none;
 
+  .operator-group {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+
+    @media only screen and (max-width: 430px) {
+      & {
+        width: 100%;
+        padding-bottom: 1rem;
+        overflow-y: hidden;
+        flex-wrap: nowrap;
+      }
+    }
+  }
+
   .item {
     position: relative;
     cursor: pointer;
-    width: 180px;
+    width: 12rem;
     margin: 1.25rem;
     background-image: repeating-linear-gradient(
       90deg,
@@ -98,9 +119,13 @@
     }
 
     .img {
-      height: 360px;
-      width: 100%;
       transition: background-color cubic-bezier(0.65, 0.05, 0.36, 1) 0.3s;
+
+      & img {
+        height: auto;
+        width: 100%;
+        display: block;
+      }
     }
 
     .info {
@@ -149,6 +174,27 @@
         visibility: visible;
       }
     }
+
+    @media only screen and (max-width: 430px) {
+      & {
+        width: 8.08rem;
+        margin: 1.08rem;
+
+        .outline,
+        .info .background {
+          opacity: 1;
+          visibility: visible;
+        }
+      }
+    }
+  }
+  @media only screen and (max-width: 430px) {
+    & {
+      align-items: flex-start;
+      flex-direction: column-reverse;
+      padding-right: 0;
+      padding-bottom: 0;
+    }
   }
 }
 

directory/src/scss/root/Root.module.scss

@@ -55,12 +55,8 @@
         display: inline-block;
         cursor: pointer;
         text-decoration: none;
-        overflow: hidden;
-        text-overflow: ellipsis;
 
         .text-wrapper {
-          overflow: hidden;
-          text-overflow: ellipsis;
           color: var(--text-color);
           transition: color cubic-bezier(0.65, 0.05, 0.36, 1) 0.3s;
         }
@@ -78,13 +74,23 @@
         }
       }
     }
+    @media only screen and (max-width: 430px) {
+      & {
+        padding-right: 0;
+      }
+    }
   }
-
   .fast-navigate {
     position: absolute;
     right: -2em;
     bottom: calc(-1em - 2px);
     font-size: 32px;
+
+    @media only screen and (max-width: 430px) {
+      & {
+        display: none;
+      }
+    }
   }
 
   .return-button {

directory/src/scss/root/drawer.module.scss

@@ -4,7 +4,7 @@
   left: -15rem;
   width: 15rem;
   height: 100%;
-  z-index: 2;
+  z-index: 3;
   pointer-events: none;
   transition: left cubic-bezier(0.65, 0.05, 0.36, 1) 0.3s;
   text-align: center;
@@ -44,7 +44,7 @@
   .overlay {
     height: 100%;
     flex-grow: 1;
-    z-index: 2;
+    z-index: 3;
   }
   &.active {
     pointer-events: all;

directory/src/scss/root/footer.module.scss

@@ -12,8 +12,10 @@
   .links {
     flex-direction: row;
     height: 2rem;
+    overflow-y: hidden;
 
     .item {
+      text-align: center;
       padding: 0 1rem;
       border-left: 2px solid var(--border-color);
       height: inherit;

directory/src/scss/root/header.module.scss

@@ -14,10 +14,6 @@
   justify-content: flex-start;
   pointer-events: none;
 
-  .spacer {
-    flex-grow: 1;
-  }
-
   .dropdown {
     margin-left: auto;
   }
@@ -72,3 +68,7 @@
     }
   }
 }
+
+.spacer {
+  flex-grow: 1;
+}

package.json

@@ -23,21 +23,21 @@
   },
   "devDependencies": {
     "@perfsee/rollup": "^1.8.4",
-    "@types/react": "^18.2.25",
-    "@types/react-dom": "^18.2.11",
+    "@types/react": "^18.2.31",
+    "@types/react-dom": "^18.2.14",
     "@vitejs/plugin-react-swc": "^3.4.0",
     "autoprefixer": "^10.4.16",
-    "eslint": "^8.51.0",
+    "eslint": "^8.52.0",
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "postcss": "^8.4.31",
     "prop-types": "^15.8.1",
     "rollup": "^3.29.4",
-    "sass": "^1.69.0",
-    "stylelint": "^15.10.3",
+    "sass": "^1.69.4",
+    "stylelint": "^15.11.0",
     "stylelint-config-standard": "^30.0.1",
     "stylelint-config-standard-scss": "^7.0.1",
-    "vite": "^4.4.11"
+    "vite": "^4.5.0"
   },
   "dependencies": {
     "@parcellab/react-use-umami": "^2.0.1",
@@ -48,10 +48,10 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-refresh": "^0.14.0",
-    "react-router-dom": "^6.16.0",
+    "react-router-dom": "^6.17.0",
     "react-simple-typewriter": "^5.0.1",
     "reset-css": "^5.0.2",
     "sharp": "^0.31.3",
-    "yaml": "^2.3.2"
+    "yaml": "^2.3.3"
   }
 }