+ schedule.scss;

+ animate.min.css;
= view/*.scss -> assets/style;
= gulpfile.js changed sass task for new env;

assets/style/animate.min.css

@@ -0,0 +1 @@
+@charset "UTF-8";.animated{-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both}.animated.hinge{-webkit-animation-duration:2s;animation-duration:2s}@-webkit-keyframes bounce{0%,20%,50%,80%,100%{-webkit-transform:translateY(0);transform:translateY(0)}40%{-webkit-transform:translateY(-30px);transform:translateY(-30px)}60%{-webkit-transform:translateY(-15px);transform:translateY(-15px)}}@keyframes bounce{0%,20%,50%,80%,100%{-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}40%{-webkit-transform:translateY(-30px);-ms-transform:translateY(-30px);transform:translateY(-30px)}60%{-webkit-transform:translateY(-15px);-ms-transform:translateY(-15px);transform:translateY(-15px)}}.bounce{-webkit-animation-name:bounce;animation-name:bounce}@-webkit-keyframes flash{0%,50%,100%{opacity:1}25%,75%{opacity:0}}@keyframes flash{0%,50%,100%{opacity:1}25%,75%{opacity:0}}.flash{-webkit-animation-name:flash;animation-name:flash}@-webkit-keyframes pulse{0%{-webkit-transform:scale(1);transform:scale(1)}50%{-webkit-transform:scale(1.1);transform:scale(1.1)}100%{-webkit-transform:scale(1);transform:scale(1)}}@keyframes pulse{0%{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}50%{-webkit-transform:scale(1.1);-ms-transform:scale(1.1);transform:scale(1.1)}100%{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}}.pulse{-webkit-animation-name:pulse;animation-name:pulse}@-webkit-keyframes shake{0%,100%{-webkit-transform:translateX(0);transform:translateX(0)}10%,30%,50%,70%,90%{-webkit-transform:translateX(-10px);transform:translateX(-10px)}20%,40%,60%,80%{-webkit-transform:translateX(10px);transform:translateX(10px)}}@keyframes shake{0%,100%{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}10%,30%,50%,70%,90%{-webkit-transform:translateX(-10px);-ms-transform:translateX(-10px);transform:translateX(-10px)}20%,40%,60%,80%{-webkit-transform:translateX(10px);-ms-transform:translateX(10px);transform:translateX(10px)}}.shake{-webkit-animation-name:shake;animation-name:shake}@-webkit-keyframes swing{20%{-webkit-transform:rotate(15deg);transform:rotate(15deg)}40%{-webkit-transform:rotate(-10deg);transform:rotate(-10deg)}60%{-webkit-transform:rotate(5deg);transform:rotate(5deg)}80%{-webkit-transform:rotate(-5deg);transform:rotate(-5deg)}100%{-webkit-transform:rotate(0);transform:rotate(0)}}@keyframes swing{20%{-webkit-transform:rotate(15deg);-ms-transform:rotate(15deg);transform:rotate(15deg)}40%{-webkit-transform:rotate(-10deg);-ms-transform:rotate(-10deg);transform:rotate(-10deg)}60%{-webkit-transform:rotate(5deg);-ms-transform:rotate(5deg);transform:rotate(5deg)}80%{-webkit-transform:rotate(-5deg);-ms-transform:rotate(-5deg);transform:rotate(-5deg)}100%{-webkit-transform:rotate(0);-ms-transform:rotate(0);transform:rotate(0)}}.swing{-webkit-transform-origin:top center;-ms-transform-origin:top center;transform-origin:top center;-webkit-animation-name:swing;animation-name:swing}@-webkit-keyframes tada{0%{-webkit-transform:scale(1);transform:scale(1)}10%,20%{-webkit-transform:scale(.9)rotate(-3deg);transform:scale(.9)rotate(-3deg)}30%,50%,70%,90%{-webkit-transform:scale(1.1)rotate(3deg);transform:scale(1.1)rotate(3deg)}40%,60%,80%{-webkit-transform:scale(1.1)rotate(-3deg);transform:scale(1.1)rotate(-3deg)}100%{-webkit-transform:scale(1)rotate(0);transform:scale(1)rotate(0)}}@keyframes tada{0%{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}10%,20%{-webkit-transform:scale(.9)rotate(-3deg);-ms-transform:scale(.9)rotate(-3deg);transform:scale(.9)rotate(-3deg)}30%,50%,70%,90%{-webkit-transform:scale(1.1)rotate(3deg);-ms-transform:scale(1.1)rotate(3deg);transform:scale(1.1)rotate(3deg)}40%,60%,80%{-webkit-transform:scale(1.1)rotate(-3deg);-ms-transform:scale(1.1)rotate(-3deg);transform:scale(1.1)rotate(-3deg)}100%{-webkit-transform:scale(1)rotate(0);-ms-transform:scale(1)rotate(0);transform:scale(1)rotate(0)}}.tada{-webkit-animation-name:tada;animation-name:tada}@-webkit-keyframes wobble{0%{-webkit-transform:translateX(0%);transform:translateX(0%)}15%{-webkit-transform:translateX(-25%)rotate(-5deg);transform:translateX(-25%)rotate(-5deg)}30%{-webkit-transform:translateX(20%)rotate(3deg);transform:translateX(20%)rotate(3deg)}45%{-webkit-transform:translateX(-15%)rotate(-3deg);transform:translateX(-15%)rotate(-3deg)}60%{-webkit-transform:translateX(10%)rotate(2deg);transform:translateX(10%)rotate(2deg)}75%{-webkit-transform:translateX(-5%)rotate(-1deg);transform:translateX(-5%)rotate(-1deg)}100%{-webkit-transform:translateX(0%);transform:translateX(0%)}}@keyframes wobble{0%{-webkit-transform:translateX(0%);-ms-transform:translateX(0%);transform:translateX(0%)}15%{-webkit-transform:translateX(-25%)rotate(-5deg);-ms-transform:translateX(-25%)rotate(-5deg);transform:translateX(-25%)rotate(-5deg)}30%{-webkit-transform:translateX(20%)rotate(3deg);-ms-transform:translateX(20%)rotatLine truncated

assets/style/schedule.scss

@@ -0,0 +1,186 @@
+.schedule{
+    position: relative;
+    margin: 30px auto 0 auto;
+
+    table{
+        position: relative;
+        margin: 0 auto 0 auto;
+        
+        border-spacing: 0px;
+        text-align: center;
+
+        td{
+            position: relative;
+
+            :not(.group){
+                min-width: 150px;
+            /*    width: 15%;*/
+                width: 150px;
+                padding: 8px 10px 8px;
+                
+                vertical-align:baseline;
+            }
+
+            &.group{
+                min-width: 60px;
+            /*    width: 5%;*/
+                width: 60px;
+                position: relative;
+                vertical-align:baseline;
+
+                p{
+                    position: absolute;
+                    width:30px;
+                    height: 30px;
+                    left: 0;
+                    right: 0;
+                    margin: 7px auto 0 auto;
+                    padding: 7px;
+                    border: 1px solid #e8e8e8;
+                    background-color: white;
+                    border-radius: 50%;
+                    font-size: 1.4em;
+                }
+            }
+        }
+
+        tr:nth-child(even) td.group p{
+            background-color: #f9f9fd;
+        }
+    }
+
+    thead{
+        animation-duration: 0.3s;
+
+        th{
+            font-weight: normal;
+            vertical-align: baseline;
+            height: 80px;
+            padding: 10px 0 0;
+
+            &.weekend{
+                color: #f52;
+            }
+        }
+
+        .date{
+            font-size: 1.5em;
+        }
+
+        .group{
+            color: #666;
+        }
+    }
+
+    tbody tr:nth-child(odd){
+        background-color: #f9f9fd;
+    }
+
+    .lesson{
+        font-size: 1.1em;
+        font-weight: bold;
+    }
+
+    .teacher{
+        font-style: italic;
+    }
+
+    p{
+        margin-bottom: 10px;
+    }
+
+    a{
+        color: black;
+        
+        text-decoration: none;
+        border-bottom: 1px solid #ccc;
+    }
+
+    .current{
+        border-left: 2px solid #4b8ff3;
+        border-right: 2px solid #4b8ff3;
+
+        &.first{
+            border-radius: 15px 15px 0 0;
+            border-top: 2px solid #4b8ff3;
+        }
+
+        &.last{
+            border-radius: 0 0 15px 15px;
+            border-bottom: 2px solid #4b8ff3;
+        }
+    }
+
+    .canceled:before{
+        position: absolute;
+        content: "";
+        width:70%;
+        height: 100%;
+        top: 0;
+        left: 15%;
+        background-image: url(lesson-canceled.svg);
+    }
+
+    ul{
+        margin: 0px auto 30px auto;
+        text-align: center;
+
+        li{
+            display: inline-block;
+            padding: 5px 10px;
+            margin: 0 5px;
+
+            &.current{
+                color: #68aeff;
+                border: none;
+                font-weight: bold;
+            /*    color: #555;*/
+            /*    padding: 5px 15px;*/
+            /*    border: 1px solid #4b8ff3;*/
+            /*    border-radius: 100px;*/
+            }
+        }
+
+        a{
+            color: #3f9cea;
+            border-bottom: 1px dashed #ccc;
+            display: inline-block;
+            padding: 0px;
+        }
+    }    
+
+    thead.fix{
+        position: fixed;
+        top: 0;
+        background-color: rgba(255, 255, 255, 0.96);
+        z-index: 100;
+        box-shadow: 0 2px 3px rgba(0, 0, 0, 0.5);
+
+        .current{
+            border: none;
+            border-radius: 0px;
+            color: #3f9cea;
+            width: 155px;
+        }
+
+        th{
+        /*    border: 1px solid black;*/
+            :not(.group){
+                min-width: 150px;
+            /*    width: 15%;*/
+                width: 150px;
+                padding: 8px 10px 8px;
+            }
+
+            &.group{
+                width: 63px;
+            }
+        }
+    }
+
+    tbody.fix:before{
+        content: "";    
+        display: block;
+        margin-top: 90px;
+    }
+}

gulpfile.js

@@ -1,14 +1,16 @@
 var gulp = require("gulp");
 var sass = require("gulp-sass");
 var minifyCSS = require("gulp-minify-css");
+var autoprefixer = require("gulp-autoprefixer");
 var imageMin = require("gulp-imagemin");
 
 var pub = "./public/";
 
 gulp.task("sass", function () {
-    gulp.src("./view/*.scss")
+    gulp.src("./assets/style/*.scss")
         .pipe(sass())
-        // .pipe(minifyCSS())
+        .pipe(minifyCSS())
+        .pipe(autoprefixer())
         .pipe(gulp.dest(pub+"s"));
 });