PlexSheep
/
krata
1
1
Fork 0
Code Issues 2 Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'feature/refactor-layouts'

This commit is contained in:
Cotes Chung 2021-12-02 05:54:56 +08:00
parent 12407bbfc0 1c758cf4a2
commit b518c9d3bc
13 changed files with 213 additions and 242 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
_includes/disqus.html
View File

@ -2,6 +2,8 @@
The Disqus lazy loading.
-->
{% if site.disqus.comments and page.comments %}
<div id="disqus_thread" class="pt-2 pb-2">
<p class="text-center text-muted small">
Comments powered by <a href="https://disqus.com/">Disqus</a>.
@ -52,3 +54,5 @@
}
</script>
{% endif %}

59
_includes/panel.html
View File

@ -1,59 +0,0 @@
<!--
The Pannel on right side (Desktop views)
-->
{% include lang.html %}
<div id="panel-wrapper" class="col-xl-3 pl-2 text-muted topbar-down">
<div class="access">
{% include update-list.html %}
{% if update_list.size > 0 %}
<div id="access-lastmod" class="post">
<span>{{- site.data.locales[lang].panel.lastmod -}}</span>
<ul class="post-content pl-0 pb-1 ml-1 mt-2">
{% for item in update_list %}
{% assign index = item | split: "::" | last | plus: 0 %}
{% assign post = site.posts[index] %}
{% assign url = post.url | relative_url %}
<li><a href="{{ url }}">{{ post.title }}</a></li>
{% endfor %}
</ul>
</div> <!-- #access-lastmod -->
{% endif %}
{% include trending-tags.html %}
{% if trending_tags.size > 0 %}
<div id="access-tags">
<span>{{- site.data.locales[lang].panel.trending_tags -}}</span>
<div class="d-flex flex-wrap mt-3 mb-1 mr-3">
{% for tag_name in trending_tags %}
{% assign url = tag_name | slugify | url_encode | prepend: "/tags/" | append: "/" %}
<a class="post-tag" href="{{ url | relative_url }}">{{ tag_name }}</a>
{% endfor %}
</div>
</div>
{% endif %}
</div> <!-- .access -->
{% if include.toc %}
<!-- BS-toc.js will be loaded at medium priority -->
<script src="https://cdn.jsdelivr.net/gh/afeld/bootstrap-toc@1.0.1/dist/bootstrap-toc.min.js"></script>
<div id="toc-wrapper" class="pl-0 pr-4 mb-5">
<span class="pl-3 pt-2 mb-2">
{{- site.data.locales[lang].panel.toc -}}
</span>
<nav id="toc" data-toggle="toc"></nav>
</div>
{% endif %}
</div> <!-- #panel-wrapper -->

8
_includes/search-results.html
View File

@ -4,15 +4,7 @@
<div id="search-result-wrapper" class="d-flex justify-content-center unloaded">
<div class="col-12 col-sm-11 post-content">
<div id="search-hints">
<h4 class="text-muted mb-4">{{ site.data.locales[lang].panel.trending_tags }}</h4>
{% include trending-tags.html %}
{% for tag in trending_tags %}
{% capture url %}/tags/{{ tag | slugify | url_encode }}/{% endcapture %}
<a class="post-tag" href="{{ url | relative_url }}">{{ tag | replace: '-', ' ' }}</a>
{% endfor %}
</div>
<div id="search-results" class="d-flex flex-wrap justify-content-center text-muted mt-3"></div>
</div>

10
_includes/toc.html Normal file
View File

@ -0,0 +1,10 @@
{% if site.toc and page.toc %}
<!-- BS-toc.js will be loaded at medium priority -->
<script src="https://cdn.jsdelivr.net/gh/afeld/bootstrap-toc@1.0.1/dist/bootstrap-toc.min.js"></script>
<div id="toc-wrapper" class="pl-0 pr-4 mb-5">
<h4 class="pl-3 pt-2 mb-2">
{{- site.data.locales[lang].panel.toc -}}
</h4>
<nav id="toc" data-toggle="toc"></nav>
</div>
{% endif %}

14
_includes/trending-tags.html
View File

@ -34,3 +34,17 @@
{% endif %}
{% endfor %}
{% endfor %}
{% if trending_tags.size > 0 %}
<div id="access-tags">
<h4 class="text-muted">{{- site.data.locales[lang].panel.trending_tags -}}</h4>
<div class="d-flex flex-wrap mt-3 mb-1 mr-3">
{% for tag_name in trending_tags %}
{% assign url = tag_name | slugify | url_encode | prepend: "/tags/" | append: "/" %}
<a class="post-tag" href="{{ url | relative_url }}">{{ tag_name }}</a>
{% endfor %}
</div>
</div>
{% endif %}

16
_includes/update-list.html
View File

@ -22,3 +22,19 @@
{% for entry in all_list limit:MAX_SIZE %}
{% assign update_list = update_list | push: entry %}
{% endfor %}
{% if update_list.size > 0 %}
<div id="access-lastmod" class="post">
<h4>{{- site.data.locales[lang].panel.lastmod -}}</h4>
<ul class="post-content pl-0 pb-1 ml-1 mt-2">
{% for item in update_list %}
{% assign index = item | split: "::" | last | plus: 0 %}
{% assign post = site.posts[index] %}
{% assign url = post.url | relative_url %}
<li><a href="{{ url }}">{{ post.title }}</a></li>
{% endfor %}
</ul>
</div> <!-- #access-lastmod -->
{% endif %}

2
_layouts/default.html
View File

@ -30,7 +30,7 @@ layout: compress
<div id="main-wrapper">
<div id="main">
{% include refactor-content.html content=content %}
{{ content }}
{% include footer.html %}

49
_layouts/page.html
View File

@ -1,11 +1,14 @@
---
layout: default
# The page layout
---
<div class="row">
<div class="col-12 col-lg-11 col-xl-8">
<div id="page" class="post pb-5 pl-1 pr-1 pl-sm-2 pr-sm-2 pl-md-4 pr-md-4 mb-md-4">
{% include lang.html %}
<div class="row{% unless layout.tail_includes %} alone{% endunless %}">
<!-- core -->
<div id="core-wrapper" class="col-12 col-lg-11 col-xl-8">
<div class="post pl-1 pr-1 pl-sm-2 pr-sm-2 pl-md-4 pr-md-4">
{% if page.dynamic_title %}
<h1 class="dynamic-title">
{% if page.collection == 'tabs' %}
@ -16,26 +19,40 @@ layout: default
{% endif %}
</h1>
<div class="post-content">
{{ content }}
{% include refactor-content.html content=content %}
</div>
{% else %}
{{ content }}
{% include refactor-content.html content=content %}
{% endif %}
</div> <!-- #page -->
</div><!-- .col-12 -->
</div>
</div> <!-- #core-wrapper -->
{% include panel.html %}
<!-- pannel -->
<div id="panel-wrapper" class="col-xl-3 pl-2 text-muted topbar-down">
<div class="access">
{% include update-list.html %}
{% include trending-tags.html %}
</div>
{% for _include in layout.pannel_includes %}
{% assign _include_path = _include | append: '.html' %}
{% include {{ _include_path }} %}
{% endfor %}
</div>
</div>
{% if site.disqus.comments and page.comments %}
<!-- tail -->
{% if layout.tail_includes %}
<div class="row">
<div class="col-12 col-lg-11 col-xl-8">
<div class="pl-1 pr-1 pl-sm-2 pr-sm-2 pl-md-4 pr-md-4">
{% include disqus.html %}
</div> <!-- .pl-1 pr-1 -->
</div> <!-- .col-12 -->
<div id="tail-wrapper" class="pl-1 pr-1 pl-sm-2 pr-sm-2 pl-md-4 pr-md-4">
{% for _include in layout.tail_includes %}
{% assign _include_path = _include | append: '.html' %}
{% include {{ _include_path }} %}
{% endfor %}
</div>
</div>
</div> <!-- .row -->
{% endif %}

69
_layouts/post.html
View File

@ -1,19 +1,18 @@
---
layout: default
# The posts' layout
layout: page
pannel_includes:
- toc
tail_includes:
- related-posts
- post-nav
- disqus
---
{% include lang.html %}
<div class="row">
<h1 data-toc-skip>{{ page.title }}</h1>
<div id="post-wrapper" class="col-12 col-lg-11 col-xl-8">
<div class="post pl-1 pr-1 pl-sm-2 pr-sm-2 pl-md-4 pr-md-4">
<h1 data-toc-skip>{{ page.title }}</h1>
<div class="post-meta text-muted d-flex flex-column">
<div class="post-meta text-muted d-flex flex-column">
<!-- Published date and author -->
<div>
<span class="semi-bold">
@ -45,9 +44,9 @@ layout: default
</div>
</div> <!-- .post-meta -->
</div> <!-- .post-meta -->
<div class="post-content">
<div class="post-content">
{% if page.image.src %}
<img src="{{ page.image.src }}"
@ -59,13 +58,12 @@ layout: default
{{ content }}
</div>
</div>
<div class="post-tail-wrapper text-muted">
<div class="post-tail-wrapper text-muted">
<!-- categories -->
{% if page.categories.size > 0 %}
<div class="post-meta mb-3">
<i class="far fa-folder-open fa-fw mr-1"></i>
{% for category in page.categories %}
@ -91,13 +89,17 @@ layout: default
<div class="post-tail-bottom
d-flex justify-content-between align-items-center mt-3 pt-5 pb-2">
<div class="license-wrapper">
{% if site.data.locales[lang].copyright.license.template %}
{% capture _replacement %}
<a href="{{ site.data.locales[lang].copyright.license.link }}">
{{ site.data.locales[lang].copyright.license.name }}
</a>
{% endcapture %}
{{ site.data.locales[lang].copyright.license.template | replace: ':LICENSE_NAME', _replacement }}
{% endif %}
</div>
@ -105,39 +107,4 @@ layout: default
</div><!-- .post-tail-bottom -->
</div><!-- div.post-tail -->
</div> <!-- .post -->
</div> <!-- #post-wrapper -->
{% assign enable_toc = false %}
{% if site.toc and page.toc %}
{% if content contains '<h2' or content contains '<h3' %}
{% assign enable_toc = true %}
{% endif %}
{% endif %}
{% include panel.html toc=enable_toc %}
</div> <!-- .row -->
<div class="row">
<div class="col-12 col-lg-11 col-xl-8">
<div id="post-extend-wrapper" class="pl-1 pr-1 pl-sm-2 pr-sm-2 pl-md-4 pr-md-4">
{% include related-posts.html %}
{% include post-nav.html %}
{% if site.disqus.comments and page.comments %}
{% include disqus.html %}
{% endif %}
</div> <!-- #post-extend-wrapper -->
</div> <!-- .col-* -->
</div> <!-- .row -->
</div><!-- div.post-tail-wrapper -->

54
_sass/addon/commons.scss
View File

@ -223,19 +223,16 @@ i { // fontawesome icons
}
}
span {
@include panel-label;
}
.post-content {
font-size: 0.9rem;
}
}
#access-tags {
> div.post-content > div {
max-width: 80%;
#panel-wrapper {
h4 {
@include panel-label;
font-family: inherit;
}
.post-tag {
@ -996,7 +993,11 @@ $sidebar-display: "sidebar-display";
}
#search-hints {
display: none;
padding: 0 1rem;
h4 {
margin-bottom: 1.5rem;
}
.post-tag {
display: inline-block;
@ -1005,13 +1006,15 @@ $sidebar-display: "sidebar-display";
background: var(--search-tag-bg);
border: none;
padding: 0.5rem;
margin: 0 1rem 1rem 0;
margin: 0 1.25rem 1rem 0;
&::before {
content: "#";
color: var(--text-muted-color);
padding-right: 0.2rem;
}
@extend %link-color;
}
}
@ -1068,7 +1071,7 @@ $sidebar-display: "sidebar-display";
white-space: nowrap;
}
#page {
#core-wrapper {
.categories,
#tags,
#archives {
@ -1105,7 +1108,9 @@ $sidebar-display: "sidebar-display";
@include pl-pr(0);
}
#main > div.row:first-child > div {
#main {
.row:first-child {
> div {
&:nth-child(1),
&:nth-child(2) {
margin-top: $topbar-height; /* same as the height of topbar */
@ -1113,12 +1118,18 @@ $sidebar-display: "sidebar-display";
&:first-child {
/* 3rem for topbar, 6rem for footer */
min-height: calc(100vh - #{$topbar-height} - #{$footer-height} - #{$post-extend-min-height});
min-height: calc(100vh - #{$topbar-height} - #{$footer-height} - #{$bottom-min-height});
}
}
}
.row.alone {
margin-bottom: 4rem;
}
}
#post-wrapper {
min-height: calc(100vh - #{$topbar-height} - #{$footer-height} - #{$post-extend-min-height}) !important;
#core-wrapper {
min-height: calc(100vh - #{$topbar-height} - #{$footer-height} - #{$bottom-min-height}) !important;
}
#topbar-wrapper.row,
@ -1175,8 +1186,8 @@ $sidebar-display: "sidebar-display";
min-height: calc(100vh - #{$topbar-height} - #{$footer-height});
}
#post-wrapper {
min-height: calc(100vh - #{$topbar-height} - #{$footer-height} - #{$post-extend-min-height}) !important;
#core-wrapper {
min-height: calc(100vh - #{$topbar-height} - #{$footer-height} - #{$bottom-min-height}) !important;
h1 {
margin-top: 2.2rem;
@ -1318,18 +1329,13 @@ $sidebar-display: "sidebar-display";
letter-spacing: 0;
}
#search-hints {
display: block;
padding: 0 1rem;
}
#tags {
-webkit-box-pack: center !important;
-ms-flex-pack: center !important;
justify-content: center !important;
}
#page h1.dynamic-title {
h1.dynamic-title {
display: none;
~ .post-content {
@ -1523,6 +1529,10 @@ $sidebar-display: "sidebar-display";
}
}
#search-hints {
display: none;
}
.post-content {
font-size: 1.03rem;
}

2
_sass/addon/module.scss
View File

@ -48,7 +48,7 @@
}
%section {
#post-wrapper & {
#core-wrapper & {
line-height: 1.2;
margin-bottom: 1rem;
}

2
_sass/addon/variables.scss
View File

@ -27,7 +27,7 @@ $main-content-max-width: 1150px !default;
$panel-max-width: 300px !default;
$post-extend-min-height: 35rem !default;
$bottom-min-height: 35rem !default;
/* syntax highlight */

8
_sass/layout/post.scss
View File

@ -23,7 +23,7 @@
padding-right: $pr;
}
#post-wrapper .post-meta {
h1 + .post-meta {
> div:nth-child(2) {
> span:not(:first-child)::before {
@include dot;
@ -220,7 +220,7 @@ nav[data-toggle=toc] {
}
}
#post-extend-wrapper {
#tail-wrapper {
min-height: 2rem;
#disqus_thread {
@ -339,8 +339,8 @@ nav[data-toggle=toc] {
}
@media all and (min-width: 768px) {
#post-wrapper {
.post-meta {
#core-wrapper {
h1 + .post-meta {
> div:not(:first-child)::before {
@include dot(0.5rem, 0.2rem);
}