jekyll-theme-persephone 0.1.0

data/_includes/smiley.html

@@ -0,0 +1,12 @@
+<div class="comment__smileys" id="smileyContainer">
+  <div class="comment__smileys_box" id="smileyBox">
+    {%- for smiley in site.smileys -%}
+    <a href="#" data-smiley="{{ smiley[1]['slug'] }}" data-src="{{ smiley[1]['img'] }}" class="comment__smiley">
+      <img src="{{ smiley[1]['img'] }}" alt="{{ smiley[0] }}" />
+    </a>
+    {%- endfor -%}
+  </div>
+  <div class="comment__smileys_toggler">
+  {%- include icons/smile.html -%}
+  </div>
+</div>

data/_includes/summary.html

@@ -0,0 +1,30 @@
+<div class="book-summary" id="bookSummary">
+  <nav role="navigation">
+    <ul class="summary">
+      <li class="chapter {% if page.book.index.url == page.url -%}active{% endif -%}">
+        <a href="{{ page.book.url | relative_url }}" class="custom-link">{{ page.book.title }}</a>
+      </li>
+      <li class="divider"></li>
+      {%- for part in page.book.parts -%}
+      <li class="chapter {% if part.url == page.url -%}active{% endif -%}">
+        {%- if part.url -%}
+        <a href="{{ part.url | relative_url }}">{{ part.title }}</a>
+        {%- else -%}
+        <span>{{ part.title }}</span>
+        {%- endif -%}
+
+        {%- if part.parts.size > 0 -%}
+        <ul class="articles">
+          {%- for part in part.parts -%}
+            
+          <li class="chapter {% if part.url == page.url -%}active{% endif -%}">
+            <a href="{{ part.url | relative_url }}">{{ part.title }}</a>
+          </li>
+          {%- endfor -%}
+        </ul>
+        {%- endif -%}
+      </li>
+      {%- endfor -%}
+    </ul>
+  </nav>
+</div>

data/_includes/title.html

@@ -0,0 +1,7 @@
+{%- if page.layout == "chapter" -%}
+<title>{{ page.title }} - {{ page.book.title }} | {{ site.title }}</title>
+{%- elsif page.layout == "home" -%}
+<title>{{ site.title }}</title>
+{%- else -%}
+<title>{{ page.title }} | {{ site.title }}</title>
+{%- endif -%}

data/_layouts/404.html

@@ -0,0 +1,8 @@
+---
+layout: default
+---
+<div class="error-container">
+  <h1 class="error-title">404</h1>
+  <p class="error-hint"><strong>Page not found :(</strong></p>
+  <a href="{{ "/" | relative_url }}" class="error-link">Back to {{ site.title }}</a>
+</div>

data/_layouts/archive.html

@@ -0,0 +1,33 @@
+---
+layout: default
+---
+{%- include header.html -%}
+<main class="archive">
+  <div class="archive__header">
+    <h1>
+      {%- assign about_page_path = site.theme_setting.about_page | default: "index.md" %}
+      {%- assign about_page = site.pages | where: "path", about_page_path | first -%}
+      <a href="{{ about_page.url | relative_url }}">{{ site.author | default: site.title }}</a>
+    </h1>
+    <div class="archive__header_intro">
+      {{ site.description | markdownify }}
+    </div>
+    {%- include icons.html -%}
+  </div>
+  <div class="archive__content">
+		<div class="archive__list">
+			<ul>
+      {%- assign pages = site[page.pages] | default: site.posts -%}
+			{%- for page in pages -%}
+				<li class="archive__item">
+					<a href="{{ page.url | relative_url }}" class="archive__link clearfix">
+            <span class="archive__time">{%- if page.layout == 'book' -%}{{ page.date }}{%- else -%}{{ page.date | date: "%Y-%m-%d" }}{%- endif -%}</span>
+						<span class="archive__title">{{ page.title }}</span>
+					</a>
+				</li>
+			{%- endfor -%}
+			</ul>
+		</div>
+  </div>
+  {%- include footer.html -%}
+</main>

data/_layouts/blog.html

@@ -0,0 +1,29 @@
+---
+layout: default
+---
+
+{%- include header.html -%}
+<main class="post__archive">
+  {%- include header_nav.html -%}
+  {%- if paginator -%}
+  {%- assign posts=paginator.posts -%}
+  {%- else -%}
+  {%- assign posts=site.posts -%}
+  {%- endif -%}
+  {%- for post in posts -%}
+    <article class="post__entry">
+      <a href="{{ post.url | relative_url }}" class="post__entry__link">
+        <h2>{{ post.title }}</h2>
+        <div class="post__meta">
+          <time>{{ post.date | date: "%Y-%m-%d" }}</time>
+        </div>
+        <div class="post__excerpt">
+          {{ post.excerpt | markdownify | strip_html | truncate: 100 }}
+        </div>
+        <div class="post__more_arrow"></div>
+      </a>
+    </article>
+  {%- endfor -%}
+  {%- include pagination.html -%}
+</main>
+{%- include footer.html -%}

data/_layouts/book.html

@@ -0,0 +1,28 @@
+---
+layout: default
+---
+<div class="book sidebar-right">
+  {%- include header.html -%}
+  <div class="book__cover">
+    <img src="{{ page.img | img_url_prefix }}" class="book__img" alt="{{ page.title }}"/>
+  </div>
+  <div class="book__content">
+    <div class="book__content_inner">
+      <h1 class="book__title">{{ page.title }}</h1>
+      <div class="book__desc">
+        {{ content }}
+      </div>
+      {%- if page.next -%}
+      <a href="{{ page.next.url | relative_url }}" class="book__more">
+        <div class="book__icon">
+          <svg width="80" height="80">
+            <circle class="circle-progress" r="36" cy="40" cx="40"  stroke-linejoin="round" stroke-linecap="round" />
+          </svg>
+          <span class="book__icon_arrow"></span>
+        </div>
+      </a>
+      {%- endif -%}
+      </div>
+    {%- include footer.html -%}
+  </div>
+</div>

data/_layouts/chapter.html

@@ -0,0 +1,32 @@
+---
+layout: default
+---
+<div class="book__wrapper sidebar-right" id="bookMain">
+  {%- include summary.html -%}
+  <div class="book__body">
+    <div class="body__inner">
+      {%- include header.html -%}
+      <main class="chapter__wrapper" tabindex="-1" role="main">
+        <div class="chapter__inner">
+          <article class="chapter__content content">
+            {{ content | img_prefix }}
+          </article>
+        </div>
+        {%- include footer.html -%}
+      </main>
+    </div>
+    {%- if page.prev -%}
+      <a href="{{ page.prev.url | relative_url }}" class="navigation navigation-prev" aria-label="Previous page: {{ page.prev.title }}">
+        {%- include icons/left.html -%}
+      </a>
+    {%- endif -%}
+    {%- if page.next -%}
+      <a href="{{ page.next.url | relative_url }}" class="navigation navigation-next" aria-label="Next page: {{ page.next.title }}">
+        {%- include icons/right.html -%}
+      </a>
+    {%- endif -%}
+  </div>
+</div>
+{%- if page.code -%}
+  <script>hljs.initHighlightingOnLoad();</script>
+{%- endif -%}

data/_layouts/default.html

@@ -0,0 +1,7 @@
+<!DOCTYPE html>
+<html lang="{{ page.locale | default: 'zh' }}">
+  {%- include head.html -%}
+  <body class="body-{{ page.layout }}">
+    {{ content }}
+  </body>
+</html>

data/_layouts/home.html

@@ -0,0 +1,6 @@
+---
+layout: default
+---
+{%- include loading.html -%}
+{%- include header.html -%}
+{%- include slides.html -%}

data/_layouts/list.html

@@ -0,0 +1,33 @@
+---
+layout: default
+---
+
+{% include header.html %}
+
+<main class="post__archive" id="postArchive">
+  {%- include header_nav.html -%}
+  <nav class="blog__categories">
+    <a href="#all" data-category="all" class="category active nav-link">{{ site.theme_setting.lang.category_all | default: "All" }}</a>
+    {%- for category in site.categories %}
+    <a href="#{{ category[0] }}" class="category nav-link" data-category="{{ category[0] }}">{{ category[0] }}</a>
+    {%- endfor %}
+  </nav>
+  <div class="post__list archive__list">
+    {%- assign years = site.posts | group_by_exp: "post", "post.date | date: '%Y'" %}
+    {%- for year in years %}
+      <h3 class="post__list_title">{{ year.name }}</h3>
+      {%- assign posts = year.items %}
+      <ul>
+        {%- for post in posts %}
+        <li class="post__list_item" data-category="{{ post.category }}" {% if post.img %}data-img="{{ post.img | img_url_prefix }}"{% endif %}>
+          <a href="{{ post.url | relative_url }}">
+            <span class="archive__time">{{ post.date | date: "%Y-%m-%d" }}</span>
+            <span class="archive__title">{{ post.title }}</span>
+          </a>
+        </li>
+        {%- endfor %}
+      </ul>
+    {%- endfor %}
+  </div>
+</main>
+{%- include footer.html -%}

data/_layouts/page.html

@@ -0,0 +1,17 @@
+---
+layout: default
+---
+{%- include header.html -%}
+<main class="post__wrapper">
+  {%- include header_nav.html -%}
+  <article class="post">
+    <header class="post__header">
+      <h1 class="post__title page__title">{{ page.title | escape }}</h1>
+    </header>
+    <div class="post__content content">
+      {{ content | img_prefix }}
+    </div>
+  </article>
+  {%- include contact.html -%}
+</main>
+{%- include footer.html -%}

data/_layouts/post.html

@@ -0,0 +1,42 @@
+---
+layout: default
+---
+{%- include header.html -%}
+<main class="post__wrapper">
+  {%- include header_nav.html -%}
+  <div class="post__top_navs clearfix">
+    <nav class="post__archive_path">
+      {%- assign blog_page_path = site.theme_setting.blog_page | default: "index.md" %}
+      {%- assign blog_page = site.pages | where: "path", blog_page_path | first -%}
+      <a href="{{ blog_page.url | relative_url }}" id="archiveBtn">
+        <div class="post__archive_icon">
+          <svg width="40" height="40">
+            <circle class="circle-progress" r="18" cy="20" cx="20"  stroke-linejoin="round" stroke-linecap="round" />
+          </svg>
+          <span class="post__archive_icon"></span>
+        </div>
+        {{ site.theme_setting.lang.blog_title | default: site.title }}
+      </a>
+    </nav>
+  </div>
+  <article class="post">
+    <header class="post__header">
+      <h1 class="post__title">{{ page.title | escape }}</h1>
+      <div class="post__meta">
+        <time>{{ page.date | date: "%Y-%m-%d %H:%M" }}</time>
+      </div>
+    </header>
+    <div class="post__content content">
+      {{ content | img_prefix }}
+    </div>
+  </article>
+  {%- if site.comment.enabled -%}
+  {% include comments.html -%}
+  {%- else -%}
+  {% include contact.html -%}
+  {%- endif -%}
+</main>
+{%- if page.code -%}
+  <script>hljs.initHighlightingOnLoad();</script>
+{%- endif -%}
+{%- include footer.html -%}

data/_sass/persephone.scss

@@ -0,0 +1,29 @@
+@charset "utf-8";
+
+// common
+@import "persephone/variables";
+@import "persephone/keyframes";
+@import "persephone/minxins";
+@import "persephone/common";
+@import "persephone/header";
+@import "persephone/content";
+
+// 404
+@import "persephone/error";
+
+// archive
+@import "persephone/archive";
+
+// home
+@import "persephone/slides";
+
+//book
+@import "persephone/summary";
+@import "persephone/book";
+@import "persephone/chapter";
+
+//blog
+@import "persephone/blog";
+@import "persephone/list";
+@import "persephone/post";
+@import "persephone/comments";

data/_sass/persephone/_archive.scss

@@ -0,0 +1,140 @@
+.body-archive {
+  overflow-x: hidden;
+}
+.archive {
+  width: 100vw;
+  height: 100vh;
+  overflow: hidden;
+  .site-footer {
+    position: fixed;
+    width: 35%;
+    left: 0;
+    bottom: 0;
+    z-index: 2;
+  }
+}
+.archive__header {
+  width: 35%;
+  height: 100%;
+  border-right: 1px solid var(--lighter);
+  text-align: center;
+  justify-content: center;
+  position: fixed;
+  left: 0;
+  top: 0;
+  z-index: 1;
+  @include flex();
+  @include flex-middle();
+  @include flex-column();
+  h1 {
+    font-size: 1.5rem;
+    margin-bottom: 0.75rem;
+    a:hover {
+      text-decoration: underline;
+    }
+  }
+  .archive__header_intro {
+    width: 70%;
+    max-width: 345px;
+    margin: 0 0 1.5rem 0;
+    color: var(--grayer);
+    font-size: 0.875rem;
+  }
+}
+.archive__content {
+  width: 65%;
+  min-height: 100%;
+  margin-left: 35%;
+  @include flex();
+  @include flex-column();
+  flex-wrap: nowrap;
+  justify-content: center;
+}
+.archive__list {
+  width: 100%;
+  margin: 1.5rem 0 2.5rem 0;
+  flex: 1;
+  @include flex();
+  @include flex-column();
+  justify-content: center;
+}
+.archive__item {
+  list-style: none;
+  padding: 0.75rem 5.35rem;
+  border-top: 1px solid transparent;
+  border-bottom: 1px solid transparent;
+  width: 100%;
+  overflow: hidden;
+  &:hover {
+    border-color: var(--lighter);
+  }
+}
+.archive__link {
+  color: var(--dark);
+  width: 100%;
+  height: 100%;
+  font-size: 18px;
+  line-height: 1.5rem;
+  @include flex()
+}
+.archive__time {
+  width: 135px;
+  flex-basis: 135px;
+  font-size: 0.9rem;
+  color: var(--gray);
+  flex-shrink: 0;
+}
+.icon__list {
+  text-align: center;
+  margin: 0 0 1.5rem 0;
+}
+.icon__link svg {
+  margin: 0 5px;
+  width: 18px;
+  height: 18px;
+}
+.icon__fill {
+  fill: var(--gray);
+}
+.icon__stroke {
+  stroke: var(--gray);
+}
+.icon__list a:hover .icon__fill {
+  fill: var(--dark);
+}
+.icon__list a:hover .icon__stroke {
+  stroke: var(--dark);
+}
+@media screen and (max-width: 800px) {
+  .archive {
+    @include flex-column();
+    min-height: 100%;
+    height: auto;
+    .site-footer {
+      position: static;
+      width: 100%;
+    }
+  }
+  .archive__header, .archive__content {
+    width: 100%;
+    height: auto;
+    margin: 0;
+  }
+  .archive__header {
+    padding: 5rem 0 0 0;
+    position: static;
+  }
+}
+@media screen and (max-width: 600px) {
+  .archive__item {
+    padding: 0.75rem 2rem;
+  }
+  .archive__time {
+    width: 100px;
+    flex-basis: 100px;
+  }
+}
+.page__content {
+	max-width: 800px;
+	padding: 2rem 3rem!important;
+}