asandikci.com/web
1
0
Fork 0
Code Issues 10 Pull requests Projects Releases Packages Wiki Activity Actions

Merge branch 'feature/refactor-layouts'

Browse source
This commit is contained in:
Cotes Chung 2021-12-02 05:54:56 +08:00
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. The Disqus lazy loading.
--> -->
{% if site.disqus.comments and page.comments %}
<div id="disqus_thread" class="pt-2 pb-2"> <div id="disqus_thread" class="pt-2 pb-2">
<p class="text-center text-muted small"> <p class="text-center text-muted small">
Comments powered by <a href="https://disqus.com/">Disqus</a>. Comments powered by <a href="https://disqus.com/">Disqus</a>.
@ -52,3 +54,5 @@
} }
</script> </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 id="search-result-wrapper" class="d-flex justify-content-center unloaded">
<div class="col-12 col-sm-11 post-content"> <div class="col-12 col-sm-11 post-content">
<div id="search-hints"> <div id="search-hints">
<h4 class="text-muted mb-4">{{ site.data.locales[lang].panel.trending_tags }}</h4>
{% include trending-tags.html %} {% 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>
<div id="search-results" class="d-flex flex-wrap justify-content-center text-muted mt-3"></div> <div id="search-results" class="d-flex flex-wrap justify-content-center text-muted mt-3"></div>
</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 %} {% endif %}
{% endfor %} {% endfor %}
{% 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 %} {% for entry in all_list limit:MAX_SIZE %}
{% assign update_list = update_list | push: entry %} {% assign update_list = update_list | push: entry %}
{% endfor %} {% 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-wrapper">
<div id="main"> <div id="main">
{% include refactor-content.html content=content %} {{ content }}
{% include footer.html %} {% include footer.html %}

49
_layouts/page.html
View file

@ -1,11 +1,14 @@
--- ---
layout: default layout: default
# The page layout
--- ---
<div class="row"> {% include lang.html %}
<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"> <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 %} {% if page.dynamic_title %}
<h1 class="dynamic-title"> <h1 class="dynamic-title">
{% if page.collection == 'tabs' %} {% if page.collection == 'tabs' %}
@ -16,26 +19,40 @@ layout: default
{% endif %} {% endif %}
</h1> </h1>
<div class="post-content"> <div class="post-content">
{{ content }} {% include refactor-content.html content=content %}
</div> </div>
{% else %} {% else %}
{{ content }} {% include refactor-content.html content=content %}
{% endif %} {% endif %}
</div> <!-- #page --> </div>
</div><!-- .col-12 --> </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> </div>
{% if site.disqus.comments and page.comments %} <!-- tail -->
{% if layout.tail_includes %}
<div class="row"> <div class="row">
<div class="col-12 col-lg-11 col-xl-8"> <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"> <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 %}
{% include disqus.html %} {% assign _include_path = _include | append: '.html' %}
{% include {{ _include_path }} %}
</div> <!-- .pl-1 pr-1 --> {% endfor %}
</div> <!-- .col-12 --> </div>
</div>
</div> <!-- .row --> </div> <!-- .row -->
{% endif %} {% endif %}

57
_layouts/post.html
View file

@ -1,16 +1,15 @@
--- ---
layout: default layout: page
# The posts' layout pannel_includes:
- toc
tail_includes:
- related-posts
- post-nav
- disqus
--- ---
{% include lang.html %} {% include lang.html %}
<div class="row">
<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> <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">
@ -65,7 +64,6 @@ layout: default
<!-- categories --> <!-- categories -->
{% if page.categories.size > 0 %} {% if page.categories.size > 0 %}
<div class="post-meta mb-3"> <div class="post-meta mb-3">
<i class="far fa-folder-open fa-fw mr-1"></i> <i class="far fa-folder-open fa-fw mr-1"></i>
{% for category in page.categories %} {% for category in page.categories %}
@ -91,13 +89,17 @@ layout: default
<div class="post-tail-bottom <div class="post-tail-bottom
d-flex justify-content-between align-items-center mt-3 pt-5 pb-2"> d-flex justify-content-between align-items-center mt-3 pt-5 pb-2">
<div class="license-wrapper"> <div class="license-wrapper">
{% if site.data.locales[lang].copyright.license.template %} {% if site.data.locales[lang].copyright.license.template %}
{% capture _replacement %} {% capture _replacement %}
<a href="{{ site.data.locales[lang].copyright.license.link }}"> <a href="{{ site.data.locales[lang].copyright.license.link }}">
{{ site.data.locales[lang].copyright.license.name }} {{ site.data.locales[lang].copyright.license.name }}
</a> </a>
{% endcapture %} {% endcapture %}
{{ site.data.locales[lang].copyright.license.template | replace: ':LICENSE_NAME', _replacement }} {{ site.data.locales[lang].copyright.license.template | replace: ':LICENSE_NAME', _replacement }}
{% endif %} {% endif %}
</div> </div>
@ -105,39 +107,4 @@ layout: default
</div><!-- .post-tail-bottom --> </div><!-- .post-tail-bottom -->
</div><!-- div.post-tail --> </div><!-- div.post-tail-wrapper -->
</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 -->

54
_sass/addon/commons.scss
View file

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

2
_sass/addon/module.scss
View file

@ -48,7 +48,7 @@
} }
%section { %section {
#post-wrapper & { #core-wrapper & {
line-height: 1.2; line-height: 1.2;
margin-bottom: 1rem; 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; $panel-max-width: 300px !default;
$post-extend-min-height: 35rem !default; $bottom-min-height: 35rem !default;
/* syntax highlight */ /* syntax highlight */

8
_sass/layout/post.scss
View file

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