auto commit 11/05/2019 Tue

dist/css/bundle.css

@@ -3,6 +3,8 @@
  * must before import
  */
 /* font color */
+/* Tablet min width */
+/* img files */
 /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
 /* Document
    ========================================================================== */
@@ -2243,13 +2245,20 @@ template {
  * @license MIT
  */
 footer {
-  background-image: url(../images/wave.svg); }
-  footer::before {
-    content: "";
+  position: relative;
+  background-color: #fcb8ab;
+  height: 100px; }
+  footer .before {
     display: block;
     width: 100%;
     background-position: center;
-    background-size: auto 100%; }
+    background-size: auto 100%;
+    background-image: url(../images/wave.svg); }
+    @media screen and (min-width: 761px) {
+      footer .before {
+        height: 30px;
+        position: absolute;
+        top: -30px; } }
 
 /**
  * @description homepage cover image
@@ -2265,8 +2274,19 @@ footer {
     margin: 0;
     overflow: hidden; }
 
-#header-top-after {
+.header-top-after {
   width: 100%; }
+  .header-top-after-deco {
+    display: block;
+    width: 100%;
+    background-position: center;
+    background-size: auto 100%;
+    background-image: url(../images/wave2.svg); }
+    @media screen and (min-width: 761px) {
+      .header-top-after-deco {
+        height: 30px;
+        position: absolute;
+        bottom: 0; } }
 
 /**
  * Copyright 2019 Mashiro
@@ -2285,9 +2305,9 @@ footer {
   -webkit-box-pack: justify;
           justify-content: space-between; }
   .page-content .main-center {
+    margin: 50px 0;
     height: 100%;
-    width: 800px;
-    background: #9acd3220; }
+    width: 800px; }
   .page-content .side-bar-left {
     width: 100px; }
   .page-content .side-bar-right {

dist/index.html

@@ -36,7 +36,11 @@
       <div class="cover-video-container"></div>
     </div>
 
-    <div id="header-top-after"></div>
+    <!--transparent area-->
+    <div id="header-top-after" class="header-top-after">
+      <!--wave decoration-->
+      <div id="header-top-after-deco" class="header-top-after-deco"></div>
+    </div>
 
     <div class="page-content">
       <aside class="side-bar-left">left</aside>
@@ -62,7 +66,8 @@
                       <i class="iconfont icon-file"></i> Child
                     </h4>
                     <div class="mdc-typography mdc-typography--body2 post-abstract">
-                      Visit ten places on our planet that are undergoing the biggest changes today.
+                      Visit ten places on our planet that are undergoing the biggest changes
+                      today.
                     </div>
                   </div>
 
@@ -103,7 +108,8 @@
                       <i class="iconfont icon-file"></i> Child
                     </h4>
                     <div class="mdc-typography mdc-typography--body2 post-abstract">
-                      Visit ten places on our planet that are undergoing the biggest changes today.
+                      Visit ten places on our planet that are undergoing the biggest changes
+                      today.
                     </div>
                   </div>
 
@@ -122,7 +128,8 @@
     </div>
 
     <footer>
-      Copyright
+      <div class="before" id="footer-before"></div>
+      <div class="main">Copyright</div>
     </footer>
 
   </div>

images/wave.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 60"><defs><style>.cls-1{fill:#ce9740;}</style></defs><title>deco-1</title><g id="レイヤー_2" data-name="レイヤー 2"><g id="page-2"><g id="背景"><g id="飾り"><path class="cls-1" d="M166.51,48.09c-8.57-7-15.26-16-22.36-24.21-4.73-5.5-9.63-10.68-15.34-14.79A47.21,47.21,0,0,0,100,0,49.17,49.17,0,0,0,82.13,3.13a49.71,49.71,0,0,0-13.73,8.1c-8.18,6.66-14.79,15.48-22,23.84C41.64,40.64,36.58,46,30.56,50.34A50.27,50.27,0,0,1,0,60H200a50.48,50.48,0,0,1-33.49-11.91Z"/></g></g></g></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 60"><defs><style>.cls{fill:#ffffff;}</style></defs><title>wave</title><g id="wave" data-name="wave"><g id="page"><g id="background"><g id="deco"><path class="cls" d="M166.51,48.09c-8.57-7-15.26-16-22.36-24.21-4.73-5.5-9.63-10.68-15.34-14.79A47.21,47.21,0,0,0,100,0,49.17,49.17,0,0,0,82.13,3.13a49.71,49.71,0,0,0-13.73,8.1c-8.18,6.66-14.79,15.48-22,23.84C41.64,40.64,36.58,46,30.56,50.34A50.27,50.27,0,0,1,0,60H200a50.48,50.48,0,0,1-33.49-11.91Z"/></g></g></g></g></svg>

images/wave2.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 60"><defs><style>.cls{fill:#ffffff;}</style></defs><title>wave</title><g id="wave" data-name="wave"><g id="page"><g id="background"><g id="deco"><path class="cls" d="M166.51,48.09c-8.57-7-15.26-16-22.36-24.21-4.73-5.5-9.63-10.68-15.34-14.79A47.21,47.21,0,0,0,100,0,49.17,49.17,0,0,0,82.13,3.13a49.71,49.71,0,0,0-13.73,8.1c-8.18,6.66-14.79,15.48-22,23.84C41.64,40.64,36.58,46,30.56,50.34A50.27,50.27,0,0,1,0,60H200a50.48,50.48,0,0,1-33.49-11.91Z"/></g></g></g></g></svg>