first commit

source/css/_layout/aside.styl

@@ -0,0 +1,292 @@
+#aside_content
+  width: 25%
+
+  .card_widget
+    -webkit-box-shadow: 0 4px 8px 6px rgba(7,17,27,.06)
+    box-shadow: 0 4px 8px 6px rgba(7,17,27,.06)
+    border-radius: 8px
+    -webkit-transition: all .3s
+    -moz-transition: all .3s
+    -o-transition: all .3s
+    -ms-transition: all .3s
+    transition: all .3s
+    background: #fff
+    margin-top: 20px
+    margin-left: 15px
+    overflow: hidden
+
+    &:hover
+      -webkit-box-shadow: 0 4px 12px 12px rgba(7,17,27,0.15)
+      box-shadow: 0 4px 12px 12px rgba(7,17,27,0.15)
+
+  .card-author
+    img
+      height: 128px
+      width: 128px
+      display: inline-block
+      vertical-align: top
+      border-radius: 70px
+      transition: all .3s
+
+      &:hover
+        -moz-transform: rotate(540deg)
+        -o-transform: rotate(540deg)
+        -webkit-transform: rotate(540deg)
+        transform: rotate(540deg)
+    .author-info
+      &__name
+        font-size: 1.1rem
+        display: block
+        margin: -0.1rem auto
+        font-weight: 500
+
+      &__description
+        display: block
+        margin: -0.1rem auto
+
+    .data_link 
+      a
+        text-decoration: none
+
+      .length_num 
+        font-size: 1rem
+        color: #000
+
+      .headline 
+        display: block
+        font-size: 0.7rem
+        letter-spacing: 1px
+        margin-bottom: -21px
+        text-transform: uppercase
+        color:#4c4948
+
+    #aside-social-icons
+      margin: 0.5rem auto -0.7rem
+      width: 15rem
+      text-align: center
+
+      .social-icon 
+        margin: 0 0.5rem
+        color: #4c4948
+        /* text-shadow: 0.1rem 0.1rem 0.2rem rgba(0,0,0,0.15) */
+        font-size: 1rem
+        cursor: pointer
+      
+      i
+        transition: all 0.3s
+        
+        &:hover
+          -moz-transform: rotate(540deg)
+          -o-transform: rotate(540deg)
+          -webkit-transform: rotate(540deg)
+          transform: rotate(540deg)
+        
+
+    a#bookmark-it
+      display: inline-block
+      margin-top: .2rem
+      padding: 0 1rem
+      height: 1.6rem
+      background: #49b1f5
+      color: #fff
+      text-decoration: none
+      line-height: 1.6rem
+      position: relative
+      text-transform: uppercase
+      z-index: 1
+
+    .toggle_change--primary,.bookmark--primary 
+      color: $cyan
+    
+    .toggle_change--animated,.bookmark--animated 
+      transition-property: color
+      transition-duration: 1s
+
+      &:before {
+        content: ""
+        position: absolute
+        top: 0
+        left: 0
+        right: 0
+        bottom: 0
+        background: $cyan
+        transform: scaleX(0)
+        transform-origin: 0 50%
+        transition-property: transform
+        transition-duration: 0.5s
+        transition-timing-function: ease-out
+        z-index: -1
+      }
+
+      &:hover {
+        color: white
+
+        &:before {
+          transform: scaleX(1)
+          transition-timing-function: cubic-bezier(0.45, 1.64, 0.47, 0.66)
+        }
+      }
+      
+
+
+  .card-content 
+    padding: 1rem 1.2rem
+  
+  .post_data
+    display: flex
+
+  .data-item
+    flex-grow: 1
+    align-items: center
+    flex-basis: auto
+    justify-content: center
+
+
+  .item_headline 
+    font-size: 0.8rem
+    
+    span 
+      margin-left: 10px
+
+  .card-tag-cloud a
+    text-decoration: none
+    position: relative
+    padding-bottom: 0.3rem
+    word-break: keep-all
+
+    &::after
+      position: absolute
+      bottom: 0
+      left: 0
+      z-index: -1
+      width: 0
+      height: 3px
+      background-color: lighten($theme-color, 30%)
+      content: ""
+      transition: all 0.3s ease-in-out
+
+    &:hover
+      color: $light-blue !important
+
+      &::after
+        width: 100%
+
+
+
+  .aside_recent_item 
+      margin: 10px 0 -15px 0
+    
+    .aside_recent_post 
+      a
+        text-decoration: none
+        color: #4c4948
+
+    .aside_recent_post
+      margin-bottom: 10px
+      width: 100%
+
+    .aside_post_cover
+      height: 70px
+      width: 70px
+      float: left
+    .aside_post_bg
+      object-fit: cover
+      width: 100%
+      height: 100%
+      max-width: 100%
+
+      &:hover
+        box-shadow: none
+    
+    #aside_title
+      padding-top: 4px
+    
+      .aside_post_meta
+        font-size: 0.6rem
+        padding-left: 5px
+
+      .aside_post_title
+        line-height: 1rem
+        display: -webkit-box
+        -webkit-line-clamp: 2
+        -webkit-box-orient: vertical
+        overflow: hidden
+        height: 41px
+        padding-left: 5px
+
+        &:hover
+          color: $light-blue !important
+
+
+
+  .aside_category_item,.archive-list
+    list-style: none
+    margin-bottom: -3px
+    margin-block-start: 0.2rem
+
+  .aside_category_list,.archive-list-item
+    margin-left: -40px
+    padding: 0.2rem 1rem
+
+    &:hover
+      background-color: $light-blue
+      color: #363636
+    a
+      text-decoration: none
+      color: #4c4948
+
+  .aside_category_list_length,.archive-list-count
+    float: right 
+  
+  .card-archives
+    margin-bottom: 20px
+
+  .card-announcement-animation
+    animation: announ_animation 1.5s infinite
+  
+  .card-webinfo
+    .webinfo
+      padding: 0.2rem 1rem
+
+      .webinfo_item
+        display: block
+        padding: 4px 0 0
+
+        .webinfo_article_name,
+        .webinfo_runtime_name,
+        .webinfo_site_uv_name,
+        .webinfo_site_name
+          display: inline-block
+        
+        .webinfo_article_count,
+        .webinfo_runtime_count,
+        .webinfo_site_uv_count,
+        .webinfo_site_pv_count
+          float: right
+          display: inline-block
+
+
+@keyframes announ_animation{
+
+  0%,to{
+    color: #4c4948
+
+}
+  50%{
+    color: #FF0000
+
+    }
+    }
+
+
+@media screen and (max-width: 900px) 
+  .layout_page
+    flex-direction: column
+  
+  #recent-posts,#aside_content
+    width: 100% !important
+  
+  .card_widget
+    margin-left: 0 !important
+
+