hexo-theme-reimu/source/css/_partial/article.styl

A Hakurei Reimu style Hexo theme

.hr-line
  margin: 10px article-padding + 15px
  opacity: 0.3
  height: 4px
  background-image: linear-gradient(to right, var(--red-0) 50%, transparent 0%)
  background-size: 50px 4px
  background-repeat: repeat-x
  filter: drop-shadow(0px 0px 2px var(--red-1))
  transition: opacity 0.3s, color 0.3s

  &:hover
    opacity: 0.5

.article-inner
  background: var(--color-wrap)
  border-radius: post-radius
  display: flow-root
  transition: 0.3s

.article-meta
  display: flex
  flex-direction: column
  padding: article-padding article-padding + 15px 0

$article-meta-tag
  text-decoration: none
  text-transform: uppercase
  font-size: 14px
  color: var(--red-1)
  background: var(--red-5)
  border-radius: post-radius
  padding: 10px 18px
  margin: 0 12px 1em 0
  box-shadow: var(--shadow-meta)
  transition: 0.3s

.article-date
  display: flex

.article-date-link
  @extend $article-meta-tag

  &:before
    margin-right: 10px

.article-category
  display: flex
  flex-wrap: wrap

.article-category-link
  @extend $article-meta-tag

  &:before
    font-weight: 700
    margin-right: 10px

.article-entry
  @extend $base-style
  clearfix()
  overflow: hidden
  color: var(--color-default)
  padding: 0 article-padding + 15px

  @media mg-normal
    padding: 0 article-padding

  p, table
    line-height: line-height
    margin: (line-height/3*2) 0

  h1, h2, h3, h4, h5, h6
    font-weight: bold
    line-height: line-height-title
    margin: line-height-title 0 (line-height-title/3*2)

    if hexo-config("icon_font")
      &:before
        font-family: font-icon
        font-weight: normal

      a
        font-family: font-icon
        opacity: 0.5
        margin-right: 5px
        transition: 0.3s

        &:hover 
          opacity: 0.8
          text-decoration: none !important
    else
      &:before
        font-family: var(--font-icon)
        font-weight: normal

      a
        font-family: var(--font-icon)
        opacity: 0.5
        margin-right: 5px
        transition: 0.3s

        &:hover
          opacity: 0.8
          text-decoration: none !important

  h2
    margin-bottom: 40px

  a
    color: var(--color-link)
    text-decoration: none
    word-break: break-word

    &:hover
      text-decoration: underline

  a:not(:has(code),h1 a,h2 a,h3 a,h4 a,h5 a,h6 a,.post-link-card a,.friend-item-wrap a,a.article-gallery-item)::after
    if hexo-config("icon_font")
        font-family: font-icon
        content: "\e639"
    else
      font-family: var(--font-icon)
      content: "\f0c1"

    font-size: 0.5em
    margin: 0 0.5em
    vertical-align: bottom
    font-style: normal

  a:not(h1 a,h2 a,h3 a,h4 a,h5 a,h6 a) code::after 
    if hexo-config("icon_font")
        font-family: font-icon
        content: "\e639"
    else
      font-family: var(--font-icon)
      content: "\f0c1"

    font-size: 0.5em
    margin: 0 0.5em
    vertical-align: bottom
    font-style: normal

  ul, ol, dl
    margin-top: (line-height/3*2)
    margin-bottom: (line-height/3*2)

  li
    &:hover
      &::marker
        transition: color 0.2s
        color: var(--red-1)

  img
    opacity: 0
    transition: 0.3s

  img, video
    max-width: 100%
    height: auto
    display: block
    margin: auto

  img.lazyloaded
    opacity: 1
    animation: blur 0.8s ease-in-out forwards

  iframe
    border: none

  table
    width: 100%
    border-collapse: collapse
    border-spacing: 0

  th
    font-weight: bold
    border-bottom: 3px solid var(--color-border)
    padding-bottom: 0.5em

  td
    border-bottom: 1px solid var(--color-border)
    padding: 10px 0

  blockquote
    background: var(--red-5-5)
    border-left: 6px var(--red-4) solid
    margin: (line-height/3*2) 0
    border-radius: post-radius
    transition: 0.3s
    padding: 1px 10px
    box-shadow: var(--shadow-meta)

    &:hover
      box-shadow: var(--shadow-meta-hover)

    footer
      font-size: font-size
      margin: line-height 0

      cite
        &:before
          content: "—"
          padding: 0 0.5em
  
  details
    padding: 18px 12px
    border-radius: post-radius
    background-color: var(--red-5-5)
    box-shadow: var(--shadow-meta)
    transition: 0.3s

    &:hover
      box-shadow: var(--shadow-meta-hover)

  summary
    font-size: 1.1em
    font-weight: bold
    cursor: var(--cursor-pointer) !important
    padding: 8px
    border: none
    border-radius: 10px
    transition: 0.3s

  summary:hover
    background-color: var(--red-5)

  details[open] summary
    background-color: var(--red-5)

  details[open] summary:hover
    background-color: var(--red-5)

  details p
    margin: 20px 0 0
    padding: 10px
    background-color: var(--color-footer-background)
    border-radius: 10px
    transition: 0.3s
  
  .pullquote
    text-align: left
    width: 45%
    margin: 0

    &.left
      margin-left: 0.5em
      margin-right: 1em

    &.right
      margin-right: 0.5em
      margin-left: 1em

  .caption
    color: var(--grey-9)
    display: block
    font-size: 0.9em
    margin-top: 0.5em
    position: relative
    text-align: center

  // http://webdesignerwall.com/tutorials/css-elastic-videos

  .video-container
    position: relative
    padding-top: (9 / 16 * 100) % // 16:9 ratio
    height: 0
    overflow: hidden

    iframe, object, embed
      position: absolute
      top: 0
      left: 0
      width: 100%
      height: 100%
      margin-top: 0

.article-more-link a
  display: inline-block
  line-height: 1em
  padding: 10px 18px
  border-radius: post-radius
  background: var(--red-5)
  color: var(--red-1)
  text-decoration: none
  box-shadow: var(--shadow-meta)
  transition: 0.3s

  &:hover
    background: var(--color-link)
    color: #fff
    text-decoration: none

.article-footer
  clearfix()
  font-size: 14px
  margin: 0 article-padding + 15px article-padding

  @media mg-normal
    margin: 0 article-padding article-padding

  &:hover
    &:before
      opacity: 0.5

  &:before
    content: ""
    display: block
    margin-top: 10px
    opacity: 0.3
    height: 4px
    background-image: linear-gradient(to right, var(--red-0) 50%, transparent 0%)
    background-size: 50px 4px
    background-repeat: repeat-x
    filter: drop-shadow(0px 0px 2px var(--red-1))
    transition: .3s

  a
    text-decoration: none

.article-tag-list-link,
.article-comment-link
.article-visitor-link
  color: var(--red-1)
  margin-top: article-padding

.article-tag-list-item
  float: left
  text-decoration: none
  text-transform: uppercase
  background: var(--red-5)
  border-radius: post-radius
  padding: 8px 15px
  margin-top: article-padding
  margin-right: 10px
  box-shadow: var(--shadow-meta)

.article-tag-list-link
  &:before
    margin-right: 10px

.article-comment-link
  float: right
  background: var(--red-5)
  margin-left: 20px
  border-radius: post-radius
  padding: 8px 15px

  &:before
    margin-right: 10px

.article-visitor-link
  float: right
  font-size: 14px
  background: var(--red-5)
  margin-left: article-padding
  border-radius: post-radius
  padding: 8px 15px

#article-nav
  margin-top: 10px
  display: flex
  flex-direction: column
  border-radius: post-radius
  overflow: hidden
  @media mq-normal
    flex-direction: row

.article-nav-link-wrap
  color: #fff
  position: relative
  flex: 1
  display: flex
  flex-direction: column
  justify-content: center
  padding-left: 20px
  opacity: 0.9
  transition: opacity 0.3s
  height: 150px
  min-height: 150px
  flex-shrink: 0

  a,
  img
    position: absolute
    top: 0
    left: 0
    width: 100%
    height: 100%
    filter: brightness(70%)

  img
    display: block
    opacity: 0
    object-fit: cover
    z-index: -1

  img.lazyloaded
    opacity: 1

  &:hover
    opacity: 1

.article-nav-link-right
  align-items: flex-end
  padding-right: 20px

.article-nav-caption
  text-transform: uppercase
  letter-spacing: 2px
  font-weight: bold

.article-nav-title
  font-size: 1.2em
  line-height: line-height
  margin-top: 0.8em
  text-shadow: 0 0.2rem 0.3rem rgba(0, 0, 0, .5);

.article-gallery
  background: #000
  position: relative

.article-gallery-photos
  position: relative
  overflow: hidden

.article-gallery-img
  display: none
  max-width: 100%

  &:first-child
    display: block

  &.loaded
    position: absolute
    display: block

  img
    display: block
    max-width: 100%
    margin: 0 auto

if hexo-config("math.enable") and hexo-config("math.katex.enable")
  .katex-display
    overflow-x: auto
    overflow-y: hidden
    
    &::-webkit-scrollbar
      display: none

  .katex
    width: calc(100% - 2px)

  .katex-html
    padding: 3px
    .base
      margin: 0 auto

  .katex-html:has(span.tag)
    display: flex !important


  .katex-display>.katex>.katex-html>.tag
    position: relative !important
    float: right
    margin-left: 0.25rem

if hexo-config("math.enable") and hexo-config("math.mathjax.enable")
  mjx-container
    display: inline-grid
    overflow-x: auto
    overflow-y: hidden
    max-width: 100%
    min-width: auto !important
    &::-webkit-scrollbar
      display: none