jekyll-theme-morph 0.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (45) hide show
  1. checksums.yaml +7 -0
  2. data/LICENSE +21 -0
  3. data/README.md +189 -0
  4. data/_includes/bread-bar.html +9 -0
  5. data/_includes/catalogue.html +26 -0
  6. data/_includes/footer.html +7 -0
  7. data/_includes/head.html +37 -0
  8. data/_includes/header.html +45 -0
  9. data/_includes/paginator.html +27 -0
  10. data/_includes/post-info.html +31 -0
  11. data/_includes/simple-post-info.html +14 -0
  12. data/_includes/trending-article-item.html +25 -0
  13. data/_layouts/classify.html +55 -0
  14. data/_layouts/default.html +16 -0
  15. data/_layouts/home.html +82 -0
  16. data/_layouts/page.html +8 -0
  17. data/_layouts/post.html +84 -0
  18. data/_layouts/search.html +36 -0
  19. data/_sass/classify.scss +58 -0
  20. data/_sass/home.scss +67 -0
  21. data/_sass/morph.scss +7 -0
  22. data/_sass/morph/_base.scss +62 -0
  23. data/_sass/morph/_colors.scss +42 -0
  24. data/_sass/morph/_functions.scss +57 -0
  25. data/_sass/morph/_utilities.scss +196 -0
  26. data/_sass/morph/_variables.scss +50 -0
  27. data/_sass/morph/components/_catalogue.scss +68 -0
  28. data/_sass/morph/components/_footer.sass +9 -0
  29. data/_sass/morph/components/_header.scss +80 -0
  30. data/_sass/morph/components/_highlight.scss +66 -0
  31. data/_sass/morph/components/_nano-compo.scss +23 -0
  32. data/_sass/morph/components/_paginator.scss +19 -0
  33. data/_sass/morph/components/_post-info.scss +30 -0
  34. data/_sass/morph/themes/obsidian.scss +86 -0
  35. data/_sass/morph/themes/silver.scss +79 -0
  36. data/_sass/post.scss +194 -0
  37. data/_sass/search.scss +68 -0
  38. data/assets/javascript/post.js +52 -0
  39. data/assets/javascript/search.js +51 -0
  40. data/assets/style/classify.scss +4 -0
  41. data/assets/style/home.scss +4 -0
  42. data/assets/style/main.scss +4 -0
  43. data/assets/style/post.scss +5 -0
  44. data/assets/style/search.scss +4 -0
  45. metadata +156 -0
@@ -0,0 +1,55 @@
1
+ ---
2
+ layout: page
3
+ ---
4
+ {% assign sources = "tags,categories" | split:"," %}
5
+ {% if sources contains page.source %}
6
+
7
+ {% assign t = site.data.language[page.lang].t %}
8
+
9
+ {% if page.source == 'tags' %}
10
+ {% assign title = t.tags_up | default: 'Tags' %}
11
+ {% assign fws_class = 'fas fa-tags' %}
12
+ {% else %}
13
+ {% assign title = t.categories_up | default: 'Categories' %}
14
+ {% assign fws_class = 'far fa-folder-open' %}
15
+ {% endif %}
16
+
17
+ <div class="page-classify">
18
+ <div>
19
+ {% assign paths = t.page | default: 'Page' %}
20
+ {% include bread-bar.html paths=paths %}
21
+ </div>
22
+ <header class="header">
23
+ <h1 class="color-secondary fw-normal">
24
+ <i class="{{ fws_class }}"></i> {{ title }}
25
+ </h1>
26
+ </header>
27
+ <div class="custom-area">
28
+ {{ content }}
29
+ </div>
30
+ <div class="container">
31
+ {% for data in site[page.source] %}
32
+ <a href="#{{ data[0] }}" class="component-tag d-inline-block">
33
+ {{ data[0] }}
34
+ </a>
35
+ {% endfor %}
36
+ </div>
37
+ <div>
38
+ {% for data in site[page.source] %}
39
+ <div id="{{ data[0] }}" class="archive-box color-secondary">
40
+ <h3 class="title">
41
+ <i class="fas fa-circle color-link-light" style="font-size:.7rem"></i>
42
+ {{ data[0] }}
43
+ </h3>
44
+ <div class="menu-box">
45
+ {% for post in data[1] %}
46
+ {% include simple-post-info.html post=post %}
47
+ {% endfor %}
48
+ </div>
49
+ </div>
50
+ {% endfor %}
51
+ </div>
52
+ </div>
53
+ {% else %}
54
+ {{ content }}
55
+ {% endif %}
@@ -0,0 +1,16 @@
1
+ <!DOCTYPE html>
2
+ <html lang="{{ page.lang | default: 'en' }}">
3
+
4
+ <head>
5
+ <title>{{ page.title | default: site.title }}</title>
6
+ {% include head.html %}
7
+ </head>
8
+
9
+ <body>
10
+ {% include header.html %}
11
+
12
+ {{ content }}
13
+
14
+ {% include footer.html %}
15
+ </body>
16
+ </html>
@@ -0,0 +1,82 @@
1
+ ---
2
+ layout: default
3
+ ---
4
+ {% assign t = site.data.language[page.lang].t %}
5
+ <div class="page-home">
6
+ {% if site.paginate %}
7
+ {% assign posts = paginator.posts %}
8
+ {% else %}
9
+ {% assign posts = site.posts %}
10
+ {% endif %}
11
+ <div class="content m-auto d-flex d-sm-block">
12
+ <div class="left flex-sm-none">
13
+ <div class="catalogue">
14
+ {% for post in posts %}
15
+ {% include post-info.html post=post %}
16
+ {% endfor %}
17
+ </div>
18
+ {% if site.paginate %}
19
+ <!-- Pagination links -->
20
+ {% include paginator.html %}
21
+ {% endif %}
22
+ </div>
23
+
24
+ {% assign _stickies = site.posts | map: "sticky" %}
25
+ <div class="right flex-sm-none">
26
+ {% if _stickies contains true %}
27
+ <div class="w-100 item">
28
+ <h2 class="d-flex color-secondary title">
29
+ <p class="flex-grow-1"><i class="fas fa-feather"></i> {{ t.pinned_articles | default: 'Pinned Articles' }}</p>
30
+ </h2>
31
+ <ul class="list-container">
32
+ {% assign sticky_index = 0 %}
33
+ {% for post in site.posts %}
34
+ {% if post.sticky %}
35
+ {% assign sticky_index = sticky_index | plus:1 %}
36
+ {% include trending-article-item.html post=post index=sticky_index %}
37
+ {% endif %}
38
+ {% endfor %}
39
+ </ul>
40
+ </div>
41
+ {% endif %}
42
+
43
+ {% if site.tags.size > 0 and site.morph.include.home_tags_bar %}
44
+ {% assign home_tags_bar = site.morph.include.home_tags_bar %}
45
+ <div class="w-100 item">
46
+ <h2 class="d-flex color-secondary title">
47
+ <p class="flex-grow-1"><i class="fas fa-tag"></i> {{ home_tags_bar.title | default: 'Top Tags' }}</p>
48
+ <a class="fw-normal" href="{{ home_tags_bar.path | prepend: site.baseurl }}">
49
+ <span style="font-size: .9rem">{{ t.show_more | default: 'show more' }} »</span>
50
+ </a>
51
+ </h2>
52
+ <ul class="list-container">
53
+ {% for tag in site.tags limit:12 %}
54
+ <li class="horizontal list-style-none">
55
+ <a class="flat" href="{{ home_tags_bar.path | prepend: site.baseurl }}#{{ tag[0] }}">{{ tag[0] }}</a>
56
+ </li>
57
+ {% endfor %}
58
+ </ul>
59
+ </div>
60
+ {% endif %}
61
+
62
+ {% if site.categories.size > 0 and site.morph.include.home_categories_bar %}
63
+ {% assign home_categories_bar = site.morph.include.home_categories_bar %}
64
+ <div class="w-100 item">
65
+ <h2 class="d-flex color-secondary title">
66
+ <p class="flex-grow-1"><i class="fas fa-folder-open"></i> {{ home_categories_bar.title | default: 'Top Categories' }}</p>
67
+ <a class="fw-normal" href="{{ home_categories_bar.path | prepend: site.baseurl }}">
68
+ <span style="font-size: .9rem">{{ t.show_more | default: 'show more' }} »</span>
69
+ </a>
70
+ </h2>
71
+ <ul class="list-container">
72
+ {% for cate in site.categories limit:10 %}
73
+ <li class="horizontal list-style-none">
74
+ <a class="flat" href="{{ home_categories_bar.path | prepend: site.baseurl }}#{{ cate[0] }}">{{ cate[0] }}</a>
75
+ </li>
76
+ {% endfor %}
77
+ </ul>
78
+ </div>
79
+ {% endif %}
80
+ </div>
81
+ </div>
82
+ </div>
@@ -0,0 +1,8 @@
1
+ ---
2
+ layout: default
3
+ ---
4
+ <div>
5
+ <div class="content m-auto">
6
+ {{ content }}
7
+ </div>
8
+ </div>
@@ -0,0 +1,84 @@
1
+ ---
2
+ layout: default
3
+ ---
4
+ {% assign t = site.data.language[page.lang].t %}
5
+ <div class="page-post">
6
+ {% include catalogue.html list_id="structure-sm" %}
7
+ <div class="content m-auto">
8
+ <div class="d-flex">
9
+ <section class="left flex-sm-none flex-auto">
10
+ <div class="status-bar d-flex position-sm-sticky bg-base">
11
+ <div class="h-100 flex-grow-1 d-flex flex-column justify-content-center">
12
+ {% assign post_up = t.post_up | default: 'Post' %}
13
+ {% assign paths = page.date | date: ' %Y %m %d' | prepend: post_up %}
14
+ {% include bread-bar.html paths=paths %}
15
+ </div>
16
+ <div class="structure-menu d-flex flex-column justify-content-center">
17
+ <div>
18
+ <button type="button" class="bg-primary color-secondary" id="scroll-top">
19
+ <i class="fas fa-angle-up"></i>
20
+ </button>
21
+ <button type="button" class="bg-primary color-secondary" id="structure-button">
22
+ <i class="far fa-caret-square-down"></i>
23
+ </button>
24
+ </div>
25
+ </div>
26
+ </div>
27
+ <header>
28
+ <h1 class="title fw-normal">{{ page.title }}</h1>
29
+ <p class="color-secondary-light">
30
+ {{ t.update_time | default: 'Update time' }}:
31
+ <time datetime="{{ site.time }}">{{ page.date | date: '%Y-%m-%d %H:%M' }}</time>
32
+ </p>
33
+ </header>
34
+ <article class="text">
35
+ {{ content }}
36
+ </article>
37
+ </section>
38
+ <aside class="right flex-sm-none flex-none d-sm-none component catalogue">
39
+ <ul class="body bg-base position-sticky-top" id="structure">
40
+ <!-- document structure list -->
41
+ </ul>
42
+ <button class="bg-primary-dark color-secondary-dark text-center cursor-pointer" title="to top" id="scroll-top-lg">
43
+ <i class="fas fa-caret-up"></i>
44
+ </button>
45
+ </aside>
46
+ </div>
47
+ </div>
48
+ </div>
49
+
50
+ <script>
51
+ var postPage = new PostPage('{{ page.title }}')
52
+ var structure = document.getElementById('structure')
53
+ var structureSm = document.getElementById('structure-sm')
54
+ var structureButton = document.getElementById('structure-button')
55
+ var scrollTop = document.getElementById('scroll-top')
56
+ var scrollTopLg = document.getElementById('scroll-top-lg')
57
+ postPage.initStructure(structure)
58
+ postPage.initStructure(structureSm)
59
+ postPage.addAnchorToHeaders()
60
+
61
+ structureButton.onclick = function () {
62
+ window.comShowCatalogue()
63
+ }
64
+
65
+ scrollTop.onclick = function () {
66
+ window.scrollTo({top: 0, behavior: "smooth"})
67
+ }
68
+ scrollTopLg.onclick = scrollTop.onclick
69
+
70
+ function handleScrollTop() {
71
+ var scrollTop = document.documentElement.scrollTop || document.body.scrollTop
72
+ if (scrollTop >= 200) {
73
+ if (scrollTopLg.style.display !== 'block') {
74
+ scrollTopLg.style.display = 'block'
75
+ }
76
+ } else {
77
+ if (scrollTopLg.style.display === 'block') {
78
+ scrollTopLg.style.display = 'none'
79
+ }
80
+ }
81
+ }
82
+ window.onscroll = handleScrollTop;
83
+ handleScrollTop();
84
+ </script>
@@ -0,0 +1,36 @@
1
+ ---
2
+ layout: default
3
+ ---
4
+ {% assign t = site.data.language[page.lang].t %}
5
+ <div id="page-search" class="page-search">
6
+ <div class="content m-auto">
7
+ <div style="padding-top: 2rem;">
8
+ {% assign paths = t.search_up | default: 'Search' %}
9
+ {% include bread-bar.html paths=paths %}
10
+ </div>
11
+ <header class="header d-flex">
12
+ <div class="search-wrap d-flex">
13
+ <label for="search-input"></label>
14
+ <input
15
+ type="text"
16
+ class="search-input flex-grow-1 bg-base color-secondary"
17
+ id="search-input"
18
+ placeholder="{{ t.search_placeholder | default: 'input key words here...' }}"
19
+ />
20
+ <button
21
+ type="button"
22
+ id="search-button"
23
+ class="search-button cursor-pointer bg-primary color-secondary"
24
+ >
25
+ {{ t.search_up | default: 'Search' }}
26
+ </button>
27
+ </div>
28
+ </header>
29
+
30
+ <div>
31
+ <ul class="search-results-container color-secondary" id="search-results-container">
32
+ <!-- search list -->
33
+ </ul>
34
+ </div>
35
+ </div>
36
+ </div>
@@ -0,0 +1,58 @@
1
+ @import "morph/functions";
2
+ @import "morph/components/post-info";
3
+
4
+ .page-classify {
5
+ font-size: 1.2rem;
6
+
7
+ &, header.header {
8
+ padding: 2rem 0 0 0;
9
+ }
10
+
11
+ .custom-area {
12
+ padding: 1rem 0;
13
+ }
14
+
15
+ .container {
16
+ width: 50%;
17
+ @include media-sm() {
18
+ width: 100%;
19
+ }
20
+ border-left: 3px solid $color-link-light;
21
+ padding: 1rem;
22
+ .component-tag {
23
+ margin: .5rem;
24
+ color: $color-link-light;
25
+ }
26
+ }
27
+
28
+ .simple-post-info {
29
+ padding: 0 1rem;
30
+ }
31
+
32
+ .archive-box {
33
+ padding: 1rem 0;
34
+ &:not(:last-child) {
35
+ border-bottom: 1px dashed $color-primary-dark;
36
+ }
37
+ .title {
38
+ font-size: 1.3rem;
39
+ }
40
+ h3 {
41
+ padding: .5rem 0;
42
+ }
43
+ h3, .info {
44
+ @include media-sm() {
45
+ font-size: 1.2rem;
46
+ }
47
+ }
48
+ .menu-box {
49
+ border-left: 1px dashed $color-primary-dark;
50
+ }
51
+ }
52
+
53
+ .component-tag {
54
+ background-color: $color-primary;
55
+ padding: 3px 8px;
56
+ border-radius: 4px;
57
+ }
58
+ }
data/_sass/home.scss ADDED
@@ -0,0 +1,67 @@
1
+ @import "morph/variables";
2
+ @import "morph/functions";
3
+ @import "morph/components/post-info";
4
+ @import "morph/components/paginator";
5
+
6
+ .page-home {
7
+ font-size: 16px;
8
+ .left {
9
+ padding: 1rem 0;
10
+ width: 59%;
11
+ @include media-sm() {
12
+ width: 100%;
13
+ }
14
+ }
15
+
16
+ .right {
17
+ width: 40%;
18
+ padding: 10px 0 10px 3rem;
19
+
20
+ .title {
21
+ font-size: 1.2rem;
22
+ padding: 10px 0;
23
+ border-bottom: 1px dashed $color-primary-dark;
24
+ }
25
+
26
+ .list-container {
27
+ padding: 1rem 0;
28
+ li {
29
+ a.hover-color-reversal:hover {
30
+ background-color: $color-link;
31
+ color: white;
32
+ }
33
+ &.horizontal {
34
+ display: inline-block;
35
+ margin-top: .5rem;
36
+ }
37
+ &:not(:last-child) {
38
+ border-bottom: 1px dashed $color-primary-dark;
39
+ }
40
+ @include media-sm() {
41
+ a.hover-border {
42
+ border: 1px solid darken($color-primary-dark, 3%);
43
+ position: relative;
44
+ left: 1px;
45
+ }
46
+ }
47
+ &.hover-primary:hover {
48
+ background-color: $color-primary;
49
+ a.hover-border {
50
+ border: 1px solid $color-primary-dark;
51
+ position: relative;
52
+ left: 1px;
53
+ }
54
+ }
55
+ }
56
+ }
57
+
58
+ .item:not(:first-child) {
59
+ padding-top: 1rem;
60
+ }
61
+
62
+ @include media-sm() {
63
+ width: 100%;
64
+ padding-left: 0;
65
+ }
66
+ }
67
+ }
data/_sass/morph.scss ADDED
@@ -0,0 +1,7 @@
1
+ @import "morph/variables";
2
+ @import "morph/colors";
3
+ @import "morph/utilities";
4
+ @import "morph/base";
5
+ @import "morph/components/header";
6
+ @import "morph/components/footer";
7
+ @import "morph/components/nano-compo";
@@ -0,0 +1,62 @@
1
+ @import "variables";
2
+ @import "functions";
3
+
4
+ * {
5
+ box-sizing: border-box;
6
+ margin: 0;
7
+ padding: 0;
8
+ -webkit-font-smoothing: antialiased;
9
+ -moz-osx-font-smoothing: grayscale;
10
+ }
11
+
12
+ :root {
13
+ background-color: $color-base;
14
+ }
15
+
16
+ html {
17
+ font-family: $serif-primary;
18
+ font-size: 14px;
19
+ -webkit-text-size-adjust: 100%;
20
+ }
21
+
22
+ a {
23
+ color: $color-link;
24
+ text-decoration: none;
25
+
26
+ &.flat {
27
+ display: inline-block;
28
+ color: $color-link-light;
29
+ background-color: $color-primary;
30
+ //border-radius: 5px;
31
+ padding: 4px 8px;
32
+ &:hover {
33
+ background-color: $color-primary-dark;
34
+ }
35
+ }
36
+ }
37
+
38
+ input {
39
+ -webkit-writing-mode: horizontal-tb !important;
40
+ text-rendering: auto;
41
+ letter-spacing: normal;
42
+ word-spacing: normal;
43
+ text-transform: none;
44
+ text-indent: 0;
45
+ -webkit-rtl-ordering: logical;
46
+ }
47
+
48
+ .content {
49
+ max-width: $content-max-width;
50
+ padding: 0 10px;
51
+ }
52
+
53
+ @keyframes fade-in {
54
+ 0% {opacity: 0;}
55
+ 40% {opacity: 0;}
56
+ 100% {opacity: 1;}
57
+ }
58
+ @-webkit-keyframes fade-in {
59
+ 0% {opacity: 0;}
60
+ 40% {opacity: 0;}
61
+ 100% {opacity: 1;}
62
+ }