👄 list

nijigen/css/base.css

@@ -604,6 +604,11 @@ a {
   margin-bottom: 30px;
   box-shadow: 1px 1px 3px 1px rgba(0, 0, 0, 0.2);
   transition: all .3s; }
+  .module.item {
+    transform: translateY(30px);
+    transition: transform 2s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
+    .module.item--active {
+      transform: translate(0); }
   .module:hover {
     box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.8); }
   .module__content {
@@ -723,6 +728,10 @@ a {
   margin: auto;
   display: flex; }
 
+.content {
+  flex: 1;
+  min-width: 1px; }
+
 .side {
   width: 280px;
   min-width: 280px;
@@ -766,13 +775,18 @@ a {
     box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
     text-decoration: none; }
 
+.breadcrumb {
+  color: #7266BA !important; }
+  .breadcrumb:hover {
+    color: #3d4450 !important; }
+
 .footer {
   text-align: center;
   color: #fff;
   padding: 15px;
   margin-bottom: 30px; }
   .footer a {
-    color: #3d4450; }
+    color: #7266BA; }
 
 .article-list .item {
   border-radius: 5px;
@@ -781,7 +795,10 @@ a {
   padding: 15px;
   background-color: rgba(255, 255, 255, 0.8);
   position: relative;
-  transition: all .3s; }
+  transition: all 0.3s, transform 1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+  transform: perspective(2500px) rotateX(-100deg); }
+  .article-list .item--active {
+    transform: perspective(2500px) rotateX(0); }
   .article-list .item:hover {
     background-color: #fff;
     box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.8); }
@@ -828,7 +845,7 @@ a {
   padding: 0 10px;
   line-height: 24px;
   display: inline-block;
-  margin-left: 10px;
+  margin: 0 0 10px 10px;
   background-color: rgba(114, 102, 186, 0.58); }
   .pagination__item--text {
     background-color: rgba(255, 255, 255, 0.8);
@@ -870,7 +887,8 @@ a {
   .article-list .item__date--m {
     text-align: center;
     margin-bottom: 10px;
-    color: #3d4450; }
+    color: #3d4450;
+    display: block; }
   .tag {
     margin: 0 5px 10px 0;
     font-size: 12px; }
@@ -892,4 +910,6 @@ a {
     .header__m .module__list {
       display: none; }
       .header__m .module__list li {
-        background-color: #fff; } }
+        background-color: #fff; }
+  .module__content.ft__center {
+    text-align: left; } }