👄 list

nijigen/css/base.scss

@@ -50,8 +50,16 @@ a {
   box-shadow: 1px 1px 3px 1px rgba(0, 0, 0, 0.2);
   transition: all .3s;
 
+  &.item {
+    transform: translateY(30px);
+    transition: transform 2s cubic-bezier(.175, .885, .32, 1.275);
+    &--active {
+      transform: translate(0);
+    }
+  }
+
   &:hover {
-    box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.8);
+    box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.8);
   }
 
   &__content {
@@ -225,6 +233,11 @@ a {
   display: flex;
 }
 
+.content {
+  flex: 1;
+  min-width: 1px;
+}
+
 // side
 .side {
   width: 280px;
@@ -282,6 +295,13 @@ a {
   }
 }
 
+.breadcrumb {
+  color: $purple !important;
+  &:hover {
+    color: $black !important;
+  }
+}
+
 // footer
 .footer {
   text-align: center;
@@ -289,7 +309,7 @@ a {
   padding: 15px;
   margin-bottom: 30px;
   a {
-    color: $black;
+    color: $purple;
   }
 }
 
@@ -302,11 +322,16 @@ a {
     padding: 15px;
     background-color: rgba(255, 255, 255, 0.8);
     position: relative;
-    transition: all .3s;
+    transition: all .3s, transform 1s cubic-bezier(.175, .885, .32, 1.275);
+    transform: perspective(2500px) rotateX(-100deg);
+
+    &--active {
+      transform: perspective(2500px) rotateX(0);
+    }
 
     &:hover {
       background-color: #fff;
-      box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.8);
+      box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.8);
     }
 
     .tag {
@@ -368,7 +393,7 @@ a {
     padding: 0 10px;
     line-height: 24px;
     display: inline-block;
-    margin-left: 10px;
+    margin: 0 0 10px 10px;
     background-color: rgba($purple, 0.58);
 
     &--text {
@@ -436,6 +461,7 @@ a {
     text-align: center;
     margin-bottom: 10px;
     color: $black;
+    display: block;
   }
 
   .tag {
@@ -473,4 +499,8 @@ a {
       }
     }
   }
+
+  .module__content.ft__center {
+    text-align: left;
+  }
 }