Add solitude

2026-11-03 19:07:56 +09:00 · 2024-07-05 21:01:19 +08:00
parent 26d71c4fbc
commit 71758b9fce
289 changed files with 23277 additions and 0 deletions
@@ -0,0 +1,149 @@
+.relatedPosts
+  margin-top 2rem
+  user-select none
+
+  .relatedPosts-list > div
+    position relative
+    display inline-block
+    overflow hidden
+    margin 3px
+    width calc(33.333% - 6px)
+    height 200px
+    background var(--efu-main)
+    vertical-align bottom
+
+    .cover
+      width 360px
+      min-width 45%
+      height 100%
+      transition all .6s ease 0s
+      object-fit cover
+      filter brightness(.9)
+      max-width 45%
+
+      &::after
+        content ' '
+        display block
+        position absolute
+        z-index 0
+        top 0
+        left 0
+        width 100%
+        height 100%
+        background url(error_img) 50%
+        background-size cover
+
+    .content
+      padding 0 1rem
+      width 100%
+
+      .date
+        color var(--light-grey)
+        font-size 90%
+
+      .title
+        color var(--efu-white)
+        -webkit-line-clamp 2
+        margin-right auto
+
+    a
+      display flex
+      width 100%
+      height 100%
+
+  .headline
+    margin-bottom .5rem
+    font-weight 700
+    font-size 20px
+    display flex
+    align-items center
+
+    span
+      margin-right auto
+      margin-left 8px
+
+    a
+      font-weight 400
+
+      &:hover
+        color var(--efu-lighttext)
+
+  &-link
+    display block
+    justify-content space-between
+    margin-left 8px
+    font-size 13px
+
+.relatedPosts-list
+  display flex
+  flex-wrap wrap
+  justify-content space-between
+  flex-direction column
+
+maxWidth768()
+  .relatedPosts,
+  .relatedPosts-list > div
+    margin 2px
+    width calc(50% - 4px)
+    height 150px
+
+maxWidth600()
+  .relatedPosts,
+  .relatedPosts-list > div
+    width calc(100% - 4px)
+
+minWidth768()
+  #post > div.relatedPosts > div.relatedPosts-list > div
+    -webkit-mask-image -webkit-radial-gradient(center, #fff, #000)
+    border-radius 12px
+
+  .relatedPosts > .headline
+    font-size .8em
+
+maxWidth1300()
+  #post > div.relatedPosts > div.relatedPosts-list > div:nth-child(7),
+  #post > div.relatedPosts > div.relatedPosts-list > div:nth-child(8)
+    display none
+
+.relatedPosts > .relatedPosts-list > div
+  background var(--efu-secondbg)
+  border var(--style-border)
+  transition .3s
+  cursor pointer
+  overflow hidden
+  width 100%
+  margin-bottom 8px
+
+  &:hover
+    background var(--efu-main)
+
+  .content
+    .title
+      color var(--efu-fontcolor)
+      font-weight 700
+      line-height 1.5
+      -webkit-line-clamp 4
+      font-size .9rem
+      text-align left
+      overflow hidden
+
+    .date
+      color var(--efu-fontcolor)
+      display none
+
+  &:hover
+    a
+      .title
+        color var(--efu-white)
+
+maxWidth768()
+  .relatedPosts
+    display none
+
+    > .relatedPosts-list
+      > div
+        border-radius 4px
+
+minWidth768()
+  .relatedPosts
+    margin-top .5rem