Layout: add all methods RWD

src/App.vue

@@ -3,7 +3,7 @@
     <Navbar></Navbar>
     <div class="main">
       <Message />
-      <Sidebar class="side" />
+      <Sidebar v-show="isLogin" class="side" />
       <mainFooter class="side" />
       <router-view class="main-container" />
     </div>

src/assets/scss/_footer.scss

@@ -5,7 +5,7 @@
     width: 10rem;
     position: fixed;
     color: $fontColor;
-    @media screen and (max-width: 575px) {
+    @media screen and (max-width: 900px) {
       display: none;
     }
 

src/assets/scss/_list.scss

@@ -7,7 +7,7 @@
     color: $fontColor;
 
     @media screen and (max-width: 575px) {
-      padding: 1rem;
+      margin: 1rem;
     }
 
     &.file .list {
@@ -27,13 +27,38 @@
       background-color: $backColor;
       border-radius: 2pt;
 
+      @media screen and (max-width: 900px) {
+        grid-template-areas:
+          "title action"
+          "content action";
+        grid-template-columns: 1fr 8rem;
+        grid-template-rows: auto 1fr;
+      }
+
+      .title {
+        grid-area: title;
+        p {
+          font-weight: 800;
+        }
+      }
+
+      .content {
+        grid-area: content;
+      }
+
+      .action {
+        grid-area: action;
+      }
+
       &.head {
         background-color: $tone;
         color: $white;
         padding: 5pt 10pt;
 
         .action p {
-          &:last-child, &:hover {
+
+          &:last-child,
+          &:hover {
             color: inherit;
           }
         }

src/assets/scss/_login.scss

@@ -6,6 +6,10 @@
     align-items: center;
     color: $fontColor;
 
+    &.main-container {
+      margin: 0;
+    }
+
     .container {
       background-color: $backColor;
       padding: 2rem;
@@ -14,6 +18,33 @@
       display: flex;
       flex-direction: column;
 
+      @media screen and (max-width: 575px) {
+        padding: 1rem;
+
+        .recaptcha, .recaptcha > div {
+          width: 100%;
+        }
+      }
+
+      @media screen and (max-width: 375px) {
+        padding: 1.5rem;
+
+        .recaptcha, .recaptcha > div, .recaptcha iframe {
+          width: 280px !important;
+          border-radius: 3pt;
+          overflow: hidden;
+        }
+      }
+
+      @media screen and (max-width: 375px) {
+
+        .recaptcha, .recaptcha > div, .recaptcha iframe {
+          width: 250px !important;
+        }
+      }
+
+
+
       h1 {
         margin-bottom: 1rem;
       }

src/assets/scss/_navbar.scss

@@ -12,14 +12,34 @@
     padding: 0 2rem;
     z-index: 1000;
 
+    @media screen and (max-width: 575px) {
+      padding: 0 1rem;
+      width: calc(100% - 2rem);
+    }
+
     h1 {
       font-size: 24px;
 
+      span {
+        font-weight: 600;
+      }
+
+      @media screen and (max-width: 575px) {
+        font-size: 18px;
+      }
+
       &.logo {
         display: flex;
         flex-direction: row;
         align-items: center;
 
+        span {
+          z-index: 1;
+          @media screen and (max-width: 414px) {
+            text-shadow: 0 0 3px $tone;
+          }
+        }
+
         .version {
           margin-left: 5px;
           font-size: 12px;
@@ -28,6 +48,27 @@
           padding: 5px;
           border-radius: 1rem;
           line-height: 12px;
+          z-index: 0;
+
+          @media screen and (max-width: 900px) {
+            font-size: 8px;
+            padding: 3px;
+            margin-left: 0;
+          }
+
+          @media screen and (max-width: 414px) {
+            position: absolute;
+            transform: scale(0.7) translate(15px, -20px);
+          }
+        }
+
+        @media screen and (max-width: 414px) {
+          flex-direction: column-reverse;
+          align-items: flex-end;
+
+          span {
+            font-size: 16px;
+          }
         }
       }
     }
@@ -40,6 +81,15 @@
         cursor: pointer;
         padding-left: 1rem;
 
+        @media screen and (max-width: 900px) {
+          font-size: 14px;
+          padding-left: 5px;
+        }
+
+        @media screen and (max-width: 414px) {
+          font-size: 12px;
+        }
+
         span {
           margin-left: 5px;
         }

src/assets/scss/_plugin.scss

@@ -22,6 +22,10 @@
       outline: none;
       color: $fontColor;
 
+      @media screen and (max-width: 675px) {
+        font-size: 12pt;
+      }
+
       &:required {
         box-shadow: none;
 
@@ -94,6 +98,10 @@
       top: 10px;
       transition: all ease .2s;
       color: $gray;
+
+      @media screen and (max-width: 675px) {
+        font-size: 12pt;
+      }
     }
   }
 
@@ -132,6 +140,15 @@
     border-radius: 2pt;
     color: $dark;
 
+    @media screen and (max-width: 1200px) {
+      width: 700px;
+    }
+
+    @media screen and (max-width: 900px) {
+      width: auto;
+      margin: 1rem !important;
+    }
+
     .input-box input {
       color: $dark;
     }
@@ -141,6 +158,10 @@
       color: $fontColor;
       width: 500px;
 
+      @media screen and (max-width: 900px) {
+        width: auto;
+      }
+
       .input-box input {
         color: $fontColor;
       }
@@ -426,6 +447,10 @@
       background-color: $tone;
       -webkit-transition: .4s;
       transition: .4s;
+
+      @media screen and (max-width: 675px) {
+        left: -2px;
+      }
     }
 
     input:checked+.slider {
@@ -459,10 +484,18 @@
 
     p {
       text-indent: 0;
+
+      @media screen and (max-width: 675px) {
+        font-size: 8pt;
+      }
     }
 
     .switch {
       margin: 0 1rem;
+
+      @media screen and (max-width: 675px) {
+        margin: 0 0.5rem;
+      }
     }
   }
 
@@ -490,6 +523,10 @@
       flex-direction: column;
       margin-right: 10pt;
       width: calc(100% - 10rem - 40pt);
+
+      @media screen and (max-width: 900px) {
+        width: calc(100% - 3rem - 40pt);
+      }
     }
 
     position: relative;
@@ -568,11 +605,22 @@
     }
   }
 
+  .datepicker-main-wrapper {
+    @media screen and (max-width: 675px) {
+      margin-top: 2rem;
+    }
+  }
+
   .datepicker-inputbox,
   .datepicker-main-wrapper {
     color: $tone;
     border-color: $tone;
 
+    @media screen and (max-width: 675px) {
+      transform-origin: 0 0;
+      transform: scale(.8);
+    }
+
     input {
       color: $tone;
       text-shadow: 0 0 0 $tone;