$avatarWidth = 46px; $arrow-icon-width = 16px; $post-nav-max-width = 220px; $article-title-font-size = 1.6rem; .article-content-container { keep-container(1.008, 1.002, 30px, 30px); .article-title { color: var(--second-text-color); font-weight: 600; font-size: $article-title-font-size; +keep-tablet() { font-size: $article-title-font-size * 0.9; } +keep-mobile() { font-size: $article-title-font-size * 0.8; } } .article-header { position: relative; padding-left: $avatarWidth; width: 100%; height: $avatarWidth; box-sizing: border-box; .avatar { position: absolute; top: 0 left: 0; width: $avatarWidth; height: $avatarWidth; padding: 1px; box-sizing: border-box; border: 1px solid var(--border-color); border-radius: 50%; img { border-radius: 50%; width: 100%; height: 100%; background: var(--avatar-background-color); } } .info { padding: 2px 0; margin-left: 10px; box-sizing: border-box; display: flex; flex-direction: column; justify-content: space-between; width: 100%; height: 100%; .author { font-weight: 600; font-size: 1.18rem; display: flex; align-items: center; .level { margin-left: 10px; color: #fff; font-size: 0.8rem; font-weight: 500; background: var(--selection-color); padding: 0 4px; border-radius: 5px; } } } } .article-header, .article-header-meta-info { margin-top: 16px; +keep-tablet() { transform: scale(0.88); transform-origin: left top; } } .article-content { margin-top: $component-interspace; padding-bottom: 10px; border-bottom: 1px solid var(--border-color); word-wrap: break-word; text-align: justify; } .post-copyright-info { margin-top: $component-interspace; width: 100%; } .article-nav { height: 40px; margin-top: $component-interspace; .article-prev, .article-next { max-width: $post-nav-max-width; height: 100%; box-sizing: border-box; keep-container(1.08, 1.08, 10px, 0); a { position: relative; display: block; width: 100%; height: 100%; box-sizing: border-box; &.prev { padding-left: $arrow-icon-width; } &.next { padding-right: $arrow-icon-width; } .arrow-icon { position: absolute; top: 0; height: 100%; width: $arrow-icon-width; &.left { left: 0; } &.right { right: 0; } } .title { width: 100%; height: 100%; } } } .article-prev { float: left; } .article-next { float: right; } .post-nav-item { display: none; +keep-tablet() { display: inline-block; } } .post-nav-title-item { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; +keep-tablet() { display: none; } } } }