jekyll-theme-morph 0.0.1

Sign up to get free protection for your applications and to get access to all the features.
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
+ }