hexo-theme-essence/source/css/_partial/post.styl

A Simple Clean Theme for Hexo with user-friendly Navigation System.

.post 
  margin: 1em auto;
  padding: 30px 50px;
  max-width: 920px;
  line-height: 1.8em;

  .post-meta
    .post-info
      user-select: none
      .info-icon
        margin-right: 0.2em
      .post-info-item
        &, .info-icon
          transition: .2s all ease
          cursor: pointer
        &:hover
          color: var(--text-color)
          &.post-time .info-icon
            color: #4caf50
          &.post-wordcount .info-icon
            color: #2196f3
          &.post-recommend .info-icon
            color: #ffc107
    
    .post-tags
      span.tag
        user-select: none

        .meta-icon
          transition: color .2s ease
          padding-right: 1px

        &:hover
          .meta-icon
            color: #3f51b5
    
    .post-directory
      .directory
        user-select: none

  .post-content 
    counter-reset: h2

    h2
      counter-reset: h3
      font-size: 3.2rem;
      margin: 1em 0;
      &:before
        counter-increment: h2;
        content: counter(h2);
    h3
      counter-reset: h4
      font-size: 2.56rem;
      margin: 1em 0;
      &:before
        counter-increment: h3;
        content: counter(h2) "." counter(h3)
    h4
      counter-reset: h5
      font-size: 2.08rem;
      &:before
        counter-increment: h4;
        content: counter(h2) "." counter(h3) "." counter(h4)
    h5
      counter-reset: h6
      font-size: 1.76rem;
      &:before
        counter-increment: h5;
        content: counter(h2) "." counter(h3) "." counter(h4) "." counter(h5)
    h6 
      font-size: 1.7rem;
      &:before
        counter-increment: h6;
        content: counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) "." counter(h6)
    h2:before,
    h3:before,
    h4:before,
    h5:before,
    h6:before
      font-size: 80%;
      color: #afafaf;
      margin-right: 0.96rem;
    a 
      text-decoration: underline;
      &.headerlink 
        position: relative;
        top: -70px;
    ul 
      margin: 0.5em 0;
      padding-inline-start: 30px;
      list-style-type: disc;
    ol 
      margin: 0.5em 0;
      padding-inline-start: 30px;
    p 
      margin: 1em 0;
  .post-footer
    margin-top:2em;
    .next-post
      display: inline-block;
    .prev-post
      display: inline-block;
      float: right;
  
  .inline-code 
    font-family: Menlo,Monaco,Consolas,"Courier New",monospace;
    padding: 4px 4px 1px 4px;
    font-size: 90%;
    color: var(--inline-code-color);
    background-color: var(--inline-code-background);
    border-radius: 4px;
    margin: 0 1px;
  pre
    border-radius: 5px;
    span
      white-space: pre-wrap;
  code[class*="language-"]
    white-space: pre-wrap


.page-title
  line-height: 2em;
  margin: 2em 0;
  text-align: center;
  font-size: 3em;

@media only screen and (max-width: 769px)
  .post
    padding: 20px;
    .post-content 
      ul 
        padding-inline-start: 20px;
      ol 
        padding-inline-start: 25px;

  .page-title
    line-height: normal;
    font-size: 2.4em;

@media only screen and (max-width: 600px) 
  .page-title
    font-size: 2.1em;

@media only screen and (max-width: 500px) 
  .page-title
    font-size: 1.8em;