jekyll-theme-acg 1.0.2 → 1.0.7

data/_layouts/home.html

@@ -1,11 +1,16 @@
 ---
 layout: default
 ---
-{% capture color %}{{ page.color | default: site.color }}{% endcapture %}
+{% assign color = site.color %}
+{% assign title = site.title %}
+{% assign description = site.description %}
 
-<div class="w-full max-w-acg m-auto p-4 grid gap-6 grid-cols-1">
+<div class="w-full h-screen flex flex-col justify-center items-center select-none text-{{ color }}-50">
+  <div class="font-serif text-4xl w-3/4 text-center py-4">{{ title }}</div>
+  <div class="font-sans text-base w-2/3 text-center">{{ description }}</div>
+</div>
 
-{%- comment -%}
+{% comment %}
 paginator.page                The number of the current page
 paginator.per_page            Number of posts per page
 paginator.posts               Posts available for the current page
@@ -15,91 +20,15 @@ paginator.previous_page       The number of the previous page, or nil if no prev
 paginator.previous_page_path  The path to the previous page, or nil if no previous page exists
 paginator.next_page           The number of the next page, or nil if no subsequent page exists
 paginator.next_page_path      The path to the next page, or nil if no subsequent page exists
-{%- endcomment -%}
-
-{% capture workspace %}
-  {% assign posts1 = "" | split: "" %}
-  {% assign posts2 = "" | split: "" %}
-
-  {% for post in site.posts %}
-    {% if post.pin %}
-      {% assign posts1 = posts1 | push: post %}
-    {% else %}
-      {% assign posts2 = posts2 | push: post %}
-    {% endif %}
-  {% endfor %}
-
-  {% assign posts = posts1 | concat: posts2 %}
-
-  {% assign offset = paginator.page | minus: 1 | times: paginator.per_page %}
-  {% assign count = paginator.posts | size | minus: 1 %}
-  {% assign minIndex = offset %}
-  {% assign maxIndex = offset | plus: count %}
-{% endcapture %}
-
-{%- for index in (minIndex..maxIndex) -%}
-
-{% capture workspace %}
-  {% assign index = offset | plus: i %}
-  {% assign post = posts[index] %}
-
-  {% capture url %}{{ post.id | relative_url }}{% endcapture %}
-  {% capture title %}{{ post.title | default: "NO TITLE" | escape }}{% endcapture %}
-  {% capture date %}{{ post.date | date: "%Y-%m-%d" }}{% endcapture %}
-  {% capture description %}{{ post.description | default: post.excerpt | default: site.description | strip_html }}{% endcapture %}
-
-  {% assign tags = post.tags | default: nil %}
-  {% assign categories = post.categories | default: nil %}
-  {% assign pin = post.pin | default: false %}
-{% endcapture %}
-  <!-- PostItem -->
-  <div class="relative p-3 pb-1 rounded-lg flex flex-col justify-between bg-{{ color }}-50 bg-opacity-75 text-black">
-    <!-- Pin -->
-    {% if pin %}
-    <svg xmlns="http://www.w3.org/2000/svg" class="absolute -left-2 -top-2 h-6 w-6 text-{{ color }}-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13" />
-    </svg>
-    {% endif %}
-
-    <a class="block text-3xl font-serif font-medium" href="{{ url }}">{{ title }}</a>
-
-    <span class="block p-1 text-sm font-extralight">{{ description }}</span>
-
-    <div class="flex flex-wrap select-none">
-      <!-- Date -->
-      <div class="flex-grow mx-px text-sm text-{{ color }}-500 text-opacity-75 flex items-center self-end">
-        <svg xmlns="http://www.w3.org/2000/svg" class="inline-block h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" /></svg>
-        <span class="inline-block p-1 whitespace-nowrap">{{ date }}</span>
-      </div>
-
-      <div class="flex flex-wrap">
-        <!-- Categories -->
-        {% for category in categories %}
-        <!-- Category -->
-        <a class="mx-px text-sm text-{{ color }}-500 text-opacity-75 flex items-center" href="">
-          <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z" /></svg>
-          <span class="inline-block p-1">{{ category }}</span>
-        </a>
-        {% endfor %}
-        <!-- Tags -->
-        {%- for tag in tags -%}
-        <!-- Tag -->
-        <a class="mx-px text-sm text-{{ color }}-500 text-opacity-75 flex items-center" href="">
-          <svg xmlns="http://www.w3.org/2000/svg" class="inline-block h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z" /></svg>
-          <span class="inline-block p-1">{{ tag }}</span>
-        </a>
-        {%- endfor -%}
-
-      </div>
-    </div>
-  </div>
-{%- endfor -%}
+{% endcomment %}
+<div class="w-full max-w-acg m-auto p-4 grid gap-6 grid-cols-1">
+  {% include posts.html posts=site.posts%}
 
 
 <!-- Paginator -->
 <div class="flex justify-between items-center">
   <!-- Prev -->
-  <a href="{{ paginator.previous_page_path }}" class="flex justify-center items-center m-2 w-8 h-8 rounded-full bg-{{ color }}-50 bg-opacity-75 hover:bg-{{ color }}-100 hover:bg-opacity-75 hover:text-{{ color }}-400">
+  <a href="{{ paginator.previous_page_path | relative_url }}" class="flex justify-center items-center m-2 w-8 h-8 rounded-full bg-{{ color }}-50 bg-opacity-75 hover:bg-{{ color }}-100 hover:bg-opacity-75 hover:text-{{ color }}-400">
     <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 flex-shrink-0 text-{{ color }}-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 15l-3-3m0 0l3-3m-3 3h8M3 12a9 9 0 1118 0 9 9 0 01-18 0z" /></svg>
   </a>
   <!-- Pages -->
@@ -110,14 +39,14 @@ paginator.next_page_path      The path to the next page, or nil if no subsequent
     <a class="flex justify-center items-center w-8 h-8 m-px rounded-full text-sm font-mono bg-{{ color }}-50 bg-opacity-75 text-black text-opacity-75 border border-transparent hover:bg-{{ color }}-100 hover:bg-opacity-75 hover:text-{{ color }}-400 {%- if pageCount == paginator.page %} text-{{ color }}-400 select-none{% endif -%}"
 
     {% if pageCount != paginator.page %}
-      {% if pageCount == 1 %}href="/"{% else %}href="{{ pagePath }}"{% endif %}
+      {% if pageCount == 1 %}href={{ "/" | relative_url }}{% else %}href="{{ pagePath | relative_url }}"{% endif %}
     {% endif %}
 
     ><span class="block">{{ pageCount }}</span></a>
     {%- endfor -%}
   </div>
   <!-- Next -->
-  <a href="{{ paginator.next_page_path }}" class="flex justify-center items-center m-2 w-8 h-8 rounded-full bg-{{ color }}-50 bg-opacity-75 hover:bg-{{ color }}-100 hover:bg-opacity-75 hover:text-{{ color }}-400">
+  <a href="{{ paginator.next_page_path | relative_url }}" class="flex justify-center items-center m-2 w-8 h-8 rounded-full bg-{{ color }}-50 bg-opacity-75 hover:bg-{{ color }}-100 hover:bg-opacity-75 hover:text-{{ color }}-400">
     <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 flex-shrink-0 text-{{ color }}-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 9l3 3m0 0l-3 3m3-3H8m13 0a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
   </a>
 </div>

data/_layouts/page.html

@@ -0,0 +1,57 @@
+---
+layout: default
+---
+{% capture workspace %}
+  {% assign color = page.color | default: site.color %}
+  {% assign title = page.title %}
+  {% assign description = page.description %}
+  {% assign content = content | strip %}
+
+  {% assign list = "" | split: "" %}
+
+  {% if page.permalink == "/404.html" %}
+    {% capture title %}<span class="text-6xl">404</span>{% endcapture %}
+    {% capture description %}{{ site.acg.error | default: "Page not found." }}{% endcapture %}
+  {% elsif page.permalink == "/categories.html" %}
+    {% assign title = site.acg.categories %}
+    {% for item in site.categories %}{% assign list = list | push: item[0] %}{% endfor %}
+  {% elsif page.permalink == "/tags.html" %}
+    {% assign title = site.acg.tags %}
+    {% for item in site.tags %}{% assign list = list | push: item[0] %}{% endfor %}
+  {% endif %}
+
+  {% assign list = list | sort %}
+
+{% endcapture %}
+
+<div class="w-acg min-h-screen py-16">
+  <div class="w-full py-32 text-{{ color }}-50 flex flex-col justify-center items-center content-center">
+    <!-- title -->
+    <div class="text-center text-4xl font-serif py-8">
+      {% if page.type == "category" %}{% include item-category.html name=title title=true %}
+      {% elsif page.type == "tag" %}{% include item-tag.html name=title title=true %}
+      {% else %}{{ title }}{% endif %}
+    </div>
+    <!-- description -->
+    <div class="text-center text-base font-sans py-8">{{ description }}</div>
+    <!-- categories/tags: list -->
+    <div class="flex flex-wrap justify-center items-center content-center select-none">
+    {% if page.permalink == "/categories.html" %}
+      {% for name in list %}{% assign count = site.categories[name].size %}
+      <div class="m-1 px-2 bg-{{ color }}-50 bg-opacity-75 rounded">{% include item-category.html name=name count=count %}</div>
+      {% endfor %}
+    {% elsif page.permalink == "/tags.html" %}
+      {% for name in list %}{% assign count = site.tags[name].size %}
+      <div class="m-1 px-2 bg-{{ color }}-50 bg-opacity-75 rounded">{% include item-tag.html name=name count=count %}</div>
+      {% endfor %}
+    {% endif %}
+    </div>
+
+    <!-- content -->
+    {% if content != empty %}<article class="w-full my-4 mx-auto p-4 rounded-lg text-black bg-{{ color }}-50 bg-opacity-75 markdown-body">{{ content }}</article>{% endif %}
+    <!-- posts -->
+    {% if page.posts %}<div class="w-full p-4 flex flex-col space-y-4">{% include posts.html posts=page.posts %}</div>{% endif %}
+
+  </div>
+
+</div>

data/_layouts/post.html

@@ -1,44 +1,36 @@
 ---
 layout: default
 ---
-{% capture color %}{{ page.color | default: site.color }}{% endcapture %}
-{%- comment -%}{%- endcomment -%}
-<article
-  class="markdown-body  my-4 mx-auto p-4 pb-8 max-w-acg
-    rounded-lg shadow-xl text-black bg-{{ color }}-50 bg-opacity-75 "
->
-  <h1>{{ page.title }}</h1>
-<!-- Jekyll TOC -->
-{% include toc.html html=content %}
-<!-- Jekyll TOC End -->
-{{ content }}
-</article>
-{%- comment -%}{%- endcomment -%}
+{% capture workspace %}
+  {% assign color = page.color | default: site.color %}
+  {% assign title = page.title %}
+  {% assign description = page.description %}
+{% endcapture %}
 
-
-
-
-<div class="mx-auto flex justify-between max-w-acg space-x-4 pb-4">
-  <a
-    class="w-1/2 p-4 flex items-center rounded-lg shadow-xl
-      bg-{{ color }}-50 bg-opacity-75
-      {% unless page.next.id %}opacity-0{% endunless %}"
-    {% if page.next.id %}href="{{ page.next.id }}"{% endif %}
-  >
-    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 flex-shrink-0 text-{{ color }}-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 15l-3-3m0 0l3-3m-3 3h8M3 12a9 9 0 1118 0 9 9 0 01-18 0z" />
-    </svg>
-    <span class="ml-4">{{ page.next.title | default: "" }}</span>
-  </a>
-  <a
-    class="w-1/2 p-4 flex items-center flex-row-reverse rounded-lg shadow-xl
-      bg-{{ color }}-50 bg-opacity-75
-      {% unless page.previous.id %}opacity-0{% endunless %}"
-    {% if page.previous.id %}href="{{ page.previous.id }}"{% endif %}
-  >
-    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 flex-shrink-0 text-{{ color }}-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 9l3 3m0 0l-3 3m3-3H8m13 0a9 9 0 11-18 0 9 9 0 0118 0z" />
-    </svg>
-    <span class="mr-4">{{ page.previous.title | default: "" }}</span>
-  </a>
+<div class="w-acg min-h-screen py-16">
+  <div class="w-full py-32 text-{{ color }}-50 flex flex-col justify-center items-center content-center">
+    <div class="text-center text-4xl font-serif py-8">{{ title }}</div>
+    <div class="text-center text-base font-sans py-8">{{ description }}</div>
+    <!-- article -->
+    <article class="w-full my-4 mx-auto p-4 rounded-lg text-black bg-{{ color }}-50 bg-opacity-75 markdown-body">
+      <h1>{{ title }}</h1>
+      {% include toc.html html=content %}
+      {{ content }}
+    </article>
+    <!-- footer -->
+    <div class="w-full mx-auto flex justify-between space-x-4">
+      <!-- prev -->
+      {% if page.next and page.next.id %}
+      <a class="w-1/2 p-4 flex items-center rounded-lg bg-{{ color }}-50 bg-opacity-75" href="{{ page.next.id | relative_url }}"><svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 flex-shrink-0 text-{{ color }}-600" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 15l-3-3m0 0l3-3m-3 3h8M3 12a9 9 0 1118 0 9 9 0 01-18 0z" /></svg><span class="ml-4 text-black">{{ page.next.title | default: "" }}</span></a>
+      {% else %}
+      <a class="w-1/2 p-4 opacity-0"></a>
+      {% endif %}
+      <!-- next -->
+      {% if page.previous and page.previous.id %}
+      <a class="w-1/2 p-4 flex flex-row-reverse items-center rounded-lg bg-{{ color }}-50 bg-opacity-75" href="{{ page.previous.id | relative_url }}"><svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 flex-shrink-0 text-{{ color }}-600" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 9l3 3m0 0l-3 3m3-3H8m13 0a9 9 0 11-18 0 9 9 0 0118 0z" /></svg><span class="mr-4 text-black">{{ page.previous.title | default: "" }}</span></a>
+      {% else %}
+      <a class="w-1/2 p-4 opacity-0"></a>
+      {% endif %}
+    </div>
+  </div>
 </div>

data/_sass/markdown.scss

@@ -1,6 +1,37 @@
+.markdown-body h1,
+.markdown-body h2 {
+  border-bottom-color: var(--theme-600);
+}
+.markdown-body h4,
+.markdown-body h5,
+.markdown-body h6 {
+  color: var(--theme-900);
+}
+
+.markdown-body hr {
+  background-color: var(--theme-600);
+}
+
+.markdown-body blockquote {
+  color: var(--theme-700);
+  border-left-color: var(--theme-700);
+  opacity: 0.75;
+}
+
+.markdown-body code:not(.hljs) {
+  color: var(--theme-600);
+}
+
+.markdown-body a {
+  font-weight: 500;
+  color: var(--theme-600);
+}
 .markdown-body a:hover {
   text-decoration: underline;
 }
+.markdown-body a.reversefootnote {
+  font-family: monospace;
+}
 
 .markdown-body .highlight pre,
 .markdown-body pre {
@@ -33,3 +64,30 @@
 .markdown-body ol ol ul {
   list-style-type: square;
 }
+
+.markdown-body .footnotes {
+  padding-top: 2em;
+}
+
+.markdown-body .task-list-item {
+  display: flex;
+  align-items: center;
+}
+.markdown-body .task-list-item input[type="checkbox"] {
+  appearance: none;
+}
+.markdown-body .task-list-item input[type="checkbox"]::before {
+  content: "";
+  display: block;
+  width: 1em;
+  height: 1em;
+  line-height: 1;
+  margin-right: 0.5em;
+  text-align: center;
+  border-radius: 4px;
+  color: white;
+  background-color: var(--theme-600);
+}
+.markdown-body .task-list-item input[type="checkbox"][checked]::before{
+  content: "\2713";
+}

data/_sass/root.scss

@@ -1,39 +1,99 @@
 :root {
-  --opacity: 1;
-
-  --red-200: rgba(254, 200, 200, var(--opacity));
-  --red-400: rgba(248, 114, 114, var(--opacity));
-  --red-500: #ef4444;
-  --red-600: rgba(220, 40, 40, var(--opacity));
-  --red-800: rgba(153, 27, 27, var(--opacity));
-
-  --blue-200: rgba(191, 219, 254, var(--opacity));
-  --blue-400: rgba(96, 165, 250, var(--opacity));
-  --blue-500: #3b82f6;
-  --blue-600: rgba(37, 99, 235, var(--opacity));
-  --blue-800: rgba(30, 64, 175, var(--opacity));
-
-  --pink-200: rgba(251, 207, 232, var(--opacity));
-  --pink-400: rgba(244, 114, 182, var(--opacity));
-  --pink-500: #ec4899;
-  --pink-600: rgba(219, 39, 119, var(--opacity));
-  --pink-800: rgba(157, 23, 77, var(--opacity));
-
-  --green-200: rgba(167, 243, 208, var(--opacity));
-  --green-400: rgba(52, 211, 153, var(--opacity));
-  --green-500: #10b981;
-  --green-600: rgba(5, 150, 105, var(--opacity));
-  --green-800: rgba(6, 95, 70, var(--opacity));
-
-  --yellow-200: rgba(253, 230, 138, var(--opacity));
-  --yellow-400: rgba(251, 191, 36, var(--opacity));
-  --yellow-500: #f59e0b;
-  --yellow-600: rgba(217, 119, 6, var(--opacity));
-  --yellow-800: rgba(146, 64, 14, var(--opacity));
-
-  --purple-200: rgba(221, 214, 254, var(--opacity));
-  --purple-400: rgba(167, 139, 250, var(--opacity));
-  --purple-500: #8b5cf6;
-  --purple-600: rgba(124, 58, 237, var(--opacity));
-  --purple-800: rgba(91, 33, 182, var(--opacity));
+  --gray-50: #F9FAFB;
+  --gray-100: #F3F4F6;
+  --gray-200: #E5E7EB;
+  --gray-300: #D1D5DB;
+  --gray-400: #9CA3AF;
+  --gray-500: #6B7280;
+  --gray-600: #4B5563;
+  --gray-700: #374151;
+  --gray-800: #1F2937;
+  --gray-900: #111827;
+
+  --red-50: #FEF2F2;
+  --red-100: #FEE2E2;
+  --red-200: #FECACA;
+  --red-300: #FCA5A5;
+  --red-400: #F87171;
+  --red-500: #EF4444;
+  --red-600: #DC2626;
+  --red-700: #B91C1C;
+  --red-800: #991B1B;
+  --red-900: #7F1D1D;
+
+  --yellow-50: #FFFBEB;
+  --yellow-100: #FEF3C7;
+  --yellow-200: #FDE68A;
+  --yellow-300: #FCD34D;
+  --yellow-400: #FBBF24;
+  --yellow-500: #F59E0B;
+  --yellow-600: #D97706;
+  --yellow-700: #B45309;
+  --yellow-800: #92400E;
+  --yellow-900: #78350F;
+
+  --green-50: #ECFDF5;
+  --green-100: #D1FAE5;
+  --green-200: #A7F3D0;
+  --green-300: #6EE7B7;
+  --green-400: #34D399;
+  --green-500: #10B981;
+  --green-600: #059669;
+  --green-700: #047857;
+  --green-800: #065F46;
+  --green-900: #064E3B;
+
+  --blue-50: #EFF6FF;
+  --blue-100: #DBEAFE;
+  --blue-200: #BFDBFE;
+  --blue-300: #93C5FD;
+  --blue-400: #60A5FA;
+  --blue-500: #3B82F6;
+  --blue-600: #2563EB;
+  --blue-700: #1D4ED8;
+  --blue-800: #1E40AF;
+  --blue-900: #1E3A8A;
+
+  --indigo-50: #EEF2FF;
+  --indigo-100: #E0E7FF;
+  --indigo-200: #C7D2FE;
+  --indigo-300: #A5B4FC;
+  --indigo-400: #818CF8;
+  --indigo-500: #6366F1;
+  --indigo-600: #4F46E5;
+  --indigo-700: #4338CA;
+  --indigo-800: #3730A3;
+  --indigo-900: #312E81;
+
+  --purple-50: #F5F3FF;
+  --purple-100: #EDE9FE;
+  --purple-200: #DDD6FE;
+  --purple-300: #C4B5FD;
+  --purple-400: #A78BFA;
+  --purple-500: #8B5CF6;
+  --purple-600: #7C3AED;
+  --purple-700: #6D28D9;
+  --purple-800: #5B21B6;
+  --purple-900: #4C1D95;
+
+  --pink-50: #FDF2F8;
+  --pink-100: #FCE7F3;
+  --pink-200: #FBCFE8;
+  --pink-300: #F9A8D4;
+  --pink-400: #F472B6;
+  --pink-500: #EC4899;
+  --pink-600: #DB2777;
+  --pink-700: #BE185D;
+  --pink-800: #9D174D;
+  --pink-900: #831843;
+}
+
+.bg-blur {
+  backdrop-filter: blur(8px);
+}
+.max-w-acg {
+  max-width: MIN(90%, 768px);
+}
+.w-acg {
+  width: MIN(90%, 768px);
 }