diff options
Diffstat (limited to 'assets/scss/_fuji-style/_content.scss')
| -rw-r--r-- | assets/scss/_fuji-style/_content.scss | 265 |
1 files changed, 133 insertions, 132 deletions
diff --git a/assets/scss/_fuji-style/_content.scss b/assets/scss/_fuji-style/_content.scss index 1c10be2..4c06c45 100644 --- a/assets/scss/_fuji-style/_content.scss +++ b/assets/scss/_fuji-style/_content.scss @@ -1,214 +1,215 @@ .content { - padding: 1.5rem 1.5rem 0 1.5rem; // same as sidebar + padding: 1.5rem 1.5rem 0 1.5rem; // same as sidebar } .post { - // paddings between posts - &:not(:first-child) { - padding: 1.5rem 0; - } + // paddings between posts + &:not(:first-child) { + padding: 1.5rem 0; + } - &:first-child { - padding: 0 0 1.5rem 0; - } + &:first-child { + padding: 0 0 1.5rem 0; + } } .post-title { - font-size: $font-size-1; + font-size: $font-size-1; } .post-meta { + display: flex; + align-items: center; + margin: 0.5rem 0.1rem 1rem 0.1rem; // little space + flex-wrap: wrap; + + span { display: flex; align-items: center; - margin: 0.5rem 0.1rem 1rem 0.1rem; // little space - flex-wrap: wrap; + } - span { - display: flex; - align-items: center; - } - - span:not(:last-child) { - padding-right: 1.5rem; - } + span:not(:last-child) { + padding-right: 1.5rem; + } } .post-summary { - margin: 0 0.1rem; // little space + margin: 0 0.1rem; // little space - p:last-child { - margin-bottom: 0; // remove margin-bottom of last para in summary - } + p:last-child { + margin-bottom: 0; // remove margin-bottom of last para in summary + } - h1, - h2, - h3, - h4, - h5, - h6 { - display: none; // hide h1-h6 in post summary - } + h1, + h2, + h3, + h4, + h5, + h6 { + display: none; // hide h1-h6 in post summary + } } .post-meta-archive { + display: flex; + align-items: center; + margin: 0.5rem 0.1rem 0 0.1rem; // little space + flex-wrap: wrap; + + span { display: flex; align-items: center; - margin: 0.5rem 0.1rem 0 0.1rem; // little space - flex-wrap: wrap; - - span { - display: flex; - align-items: center; - } + } - span:not(:last-child) { - padding-right: 1.5rem; - } + span:not(:last-child) { + padding-right: 1.5rem; + } } .pagination { + display: flex; + align-items: center; + justify-content: center; + font-size: 1.25rem; + line-height: 1.25rem; + padding: 1.25rem 0; + + div { display: flex; align-items: center; justify-content: center; - font-size: 1.25rem; - line-height: 1.25rem; - padding: 1.25rem 0; - - div { - display: flex; - align-items: center; - justify-content: center; - width: 2rem; - height: 2rem; - - a { - display: flex; - align-items: center; - } + width: 2rem; + height: 2rem; + + a { + display: flex; + align-items: center; } + } } .page-info { - padding: 0 0.1rem 1.5rem 0.1rem; + padding: 0 0.1rem 1.5rem 0.1rem; } // single page part article { - padding-bottom: 1.5rem; + padding-bottom: 1.5rem; - .post-content { - margin: 1.25rem 0.1rem 0 0.1rem; - } + .post-content { + margin: 1.25rem 0.1rem 0 0.1rem; + } } .license { - margin-bottom: 1.5rem; + margin-bottom: 1.5rem; } .post-loading { - margin: 0 0 1.5rem 0; - padding-top: 1.5rem; - text-align: center; + margin: 0 0 1.5rem 0; + padding-top: 1.5rem; + text-align: center; - i { - font-size: 1.25rem; - } + i { + font-size: 1.25rem; + } - p { - margin: 0.5rem 0 0 0; - } + p { + margin: 0.5rem 0 0 0; + } } .markdown-body { - h1 { - font-size: $font-size-1; - margin-top: 1.5rem; - } + h1 { + font-size: $font-size-1; + margin-top: 1.5rem; + } - h2 { - font-size: $font-size-2; - margin-top: 1.375rem; - } + h2 { + font-size: $font-size-2; + margin-top: 1.375rem; + } - h3 { - font-size: $font-size-3; - margin-top: 1.25rem; - } + h3 { + font-size: $font-size-3; + margin-top: 1.25rem; + } - h4 { - margin-top: 1.25rem; - } + h4 { + margin-top: 1.25rem; + } - ul { - list-style-type: circle; - } + ul { + list-style-type: circle; + } - img { - max-width: 98%; - margin: 0 0.25rem 0.5rem 0.25rem; - } + img { + max-width: 98%; + margin: 0 0.25rem 0.5rem 0.25rem; + } - .table-dense { - font-size: 0.875rem; + .table-dense { + font-size: 0.875rem; - td, th { - padding: 4px 8px !important; - } + td, + th { + padding: 4px 8px !important; } + } } .post-comment { - span.post-comment-notloaded { - display: flex; - align-items: center; - justify-content: center; - } + span.post-comment-notloaded { + display: flex; + align-items: center; + justify-content: center; + } } #disqus_thread { - padding: 1.25rem 0; + padding: 1.25rem 0; } // search page part #search-result .post:first-child { - padding: 1.5rem 0; + padding: 1.5rem 0; } .search-result-info { - padding: 1rem 0.1rem; + padding: 1rem 0.1rem; } .search-input { - display: flex; - height: 2.5rem; - align-items: center; - padding-left: 0.5rem; + display: flex; + height: 2.5rem; + align-items: center; + padding-left: 0.5rem; + width: 100%; + + input { width: 100%; + min-width: 0; + flex: 1 1 auto; + height: 2rem; + } + + button { + flex: 0 1 auto; + padding: 0 0.5rem; + word-break: keep-all; + height: 2.5rem; - input { - width: 100%; - min-width: 0; - flex: 1 1 auto; - height: 2rem; + &:hover { + i { + color: var(--color-primary); + } } - button { - flex: 0 1 auto; - padding: 0 0.5rem; - word-break: keep-all; - height: 2.5rem; - - &:hover { - i { - color: var(--color-primary); - } - } - - i { - color: var(--color-mute); - height: 100%; - font-size: 1.6rem; - } + i { + color: var(--color-mute); + height: 100%; + font-size: 1.6rem; } + } } |