databook-theme 0.1.1 → 0.1.2

data/_sass/typography/_table.scss

@@ -1,119 +1,119 @@
-.l-typography {
-  --db-cell-padding: .6rem .8rem;
-  --db-cell-bold-border: 2px;
-  --db-cell-border-row: var(--db-border-color);
-  --db-cell-border-column: var(--db-border-color);
-
-  table:not(.rouge-table) {
-    border: 1px solid var(--db-border-color);
-    border-collapse: separate;
-    border-radius: $border-radius-object;
-    border-spacing: 0;
-    margin-top: 1rem;
-    margin-bottom: 1rem;
-    overflow: hidden;
-    width: 100%;
-  
-    th, td {
-      padding: var(--db-cell-padding);
-      border-bottom: 1px solid var(--db-cell-border-row);
-      border-right: 1px solid var(--db-cell-border-column);
-    }
-  
-    > *:last-child > tr:last-child > * {
-      border-bottom: none;
-    }
-  
-    > * > tr > *:last-child {
-      border-right: none;
-    }
-
-    > *:not(:last-child) > tr:last-child {
-      position : relative;
-
-      &::after {
-        content: '';
-        position: absolute;
-        bottom: 0;
-        left: 0;
-        height: 0;
-        width: 100%;
-        border-bottom: var(--db-cell-bold-border) solid var(--db-border-color);
-      }
-    }
-    
-    + .h-table--combined {
-      margin-top: calc(-1rem - 1px) !important;
-      border-top: none !important;
-      border-top-left-radius: 0 !important;
-      border-top-right-radius: 0 !important;
-    }
-  }
-
-}
-
-.h-table--small {
-  --db-cell-padding: .2rem .4rem;
-  font-size: 90%;
-}
-
-.h-table--row {
-  --db-cell-border-column: transparent;
-}
-
-.h-table--column {
-  --db-cell-border-row: transparent;
-  --db-cell-bold-border: 1px;
-}
-
-.h-table--grid {
-  --db-cell-border-row: var(--db-border-color);
-  --db-cell-border-column: var(--db-border-color);
-}
-
-.h-table--striped {
-  > tbody:first-child > tr:nth-child(even),
-  > tbody:not(:first-child) > tr:nth-child(odd) {
-  background-color: var(--db-highlight-color-hover);
-  }
-}
-
-.h-table--hover:not(.h-table--striped) {
-  > tbody > tr:hover {
-    background-color: var(--db-highlight-color-hover);
-  }
-}
-
-.h-table--hover.h-table--column {
-  // todo
-  td:hover {
-  }
-}
-
-.h-table--left {
-  text-align: left;
-}
-
-.h-table--center {
-  text-align: center;
-}
-
-.h-table--right {
-  text-align: right;
-}
-
-.h-table--justify {
-  text-align: justify;
-}
-
-.h-table--top td {
-  vertical-align: top;
-}
-
-.h-table--middle td {
-  vertical-align: middle;
-}
-
-.h-table--bottom td {
-  vertical-align: bottom;
-}
+.l-typography {
+  --db-cell-padding: .6rem .8rem;
+  --db-cell-bold-border: 2px;
+  --db-cell-border-row: var(--db-border-color);
+  --db-cell-border-column: var(--db-border-color);
+
+  table:not(.rouge-table) {
+    border: 1px solid var(--db-border-color);
+    border-collapse: separate;
+    border-radius: $border-radius-object;
+    border-spacing: 0;
+    margin-top: 1rem;
+    margin-bottom: 1rem;
+    overflow: hidden;
+    width: 100%;
+  
+    th, td {
+      padding: var(--db-cell-padding);
+      border-bottom: 1px solid var(--db-cell-border-row);
+      border-right: 1px solid var(--db-cell-border-column);
+    }
+  
+    > *:last-child > tr:last-child > * {
+      border-bottom: none;
+    }
+  
+    > * > tr > *:last-child {
+      border-right: none;
+    }
+
+    > *:not(:last-child) > tr:last-child {
+      position : relative;
+
+      &::after {
+        content: '';
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        height: 0;
+        width: 100%;
+        border-bottom: var(--db-cell-bold-border) solid var(--db-border-color);
+      }
+    }
+    
+    + .h-table--combined {
+      margin-top: calc(-1rem - 1px) !important;
+      border-top: none !important;
+      border-top-left-radius: 0 !important;
+      border-top-right-radius: 0 !important;
+    }
+  }
+
+}
+
+.h-table--small {
+  --db-cell-padding: .2rem .4rem;
+  font-size: 90%;
+}
+
+.h-table--row {
+  --db-cell-border-column: transparent;
+}
+
+.h-table--column {
+  --db-cell-border-row: transparent;
+  --db-cell-bold-border: 1px;
+}
+
+.h-table--grid {
+  --db-cell-border-row: var(--db-border-color);
+  --db-cell-border-column: var(--db-border-color);
+}
+
+.h-table--striped {
+  > tbody:first-child > tr:nth-child(even),
+  > tbody:not(:first-child) > tr:nth-child(odd) {
+  background-color: var(--db-highlight-color-hover);
+  }
+}
+
+.h-table--hover:not(.h-table--striped) {
+  > tbody > tr:hover {
+    background-color: var(--db-highlight-color-hover);
+  }
+}
+
+.h-table--hover.h-table--column {
+  // todo
+  td:hover {
+  }
+}
+
+.h-table--left {
+  text-align: left;
+}
+
+.h-table--center {
+  text-align: center;
+}
+
+.h-table--right {
+  text-align: right;
+}
+
+.h-table--justify {
+  text-align: justify;
+}
+
+.h-table--top td {
+  vertical-align: top;
+}
+
+.h-table--middle td {
+  vertical-align: middle;
+}
+
+.h-table--bottom td {
+  vertical-align: bottom;
+}

data/_sass/typography/_typography.scss

@@ -1,108 +1,103 @@
-.l-typography {
-  p {
-    margin: .5rem 0;
-    line-height: 1.5em;
-  }
-
-  ol, ul {
-    margin-left: 2em;
-    margin-top: .5rem;
-    margin-bottom: .5rem;
-
-    ol, ul {
-      margin-top: 0;
-      margin-bottom: 0;
-    }
-  }
-  li {
-    line-height: 1.5em;
-    margin: .25rem 0;
-    &::marker {
-      color: var(--db-text-color-important);
-    }
-
-    > p {
-      margin: .25rem 0;
-      &:first-child {
-        margin-top: 0;
-      }
-      &:last-child {
-        margin-bottom: 0;
-      }
-    }
-  }
-
-  dl {
-    line-height: 1.5em;
-  }
-  dt {
-    font-weight: bold;
-    margin: .25rem 0;
-  }
-  dd {
-    margin: .25rem 0 .25rem 2rem;
-  }
-
-  a {
-    color: revert;
-
-    &:hover {
-      color: revert;
-      text-decoration: revert;
-    }
-  }
-
-  .highlight code {
-    background-color: var(--db-surface-color);
-    border: 1px solid var(--db-border-color);
-    max-width: 100%;
-    overflow-x: auto;
-    border-radius: $border-radius-object;
-    margin: 1rem 0;
-    
-    line-height: 1.5em;
-    padding: .5em 1rem;
-
-    display: block;
-
-    &::before {
-      content: ' ';
-      color: white;
-    }
-  }
-  
-  code.language-plaintext {
-    padding: .2rem .4em;
-    margin: 0 .2rem;
-    font-size: .9em;
-    background-color: var(--db-surface-color);
-    border-radius: $border-radius-object;
-    white-space: nowrap;
-  }
-
-  hr {
-    border-top: 1px solid var(--db-border-color);
-    border-width: 1px 0 0 0;
-    margin: 1em 2em;
-  }
-  
-  blockquote {
-    margin: .5rem 2rem;
-    color: var(--db-text-color-inactive);
-    border-left: 0.25em solid var(--db-border-color);
-    padding: .25rem 0 .25rem .5rem;
-    > * {
-      &:first-child {
-        margin-top: 0;
-      }
-      &:last-child {
-        margin-bottom: 0;
-      }
-    }
-  }
-
-  p:lang(zh) {
-    text-indent: 2em;
-  }
-
-}
+.l-typography {
+  p {
+    margin: .5rem 0;
+    line-height: 1.5em;
+  }
+
+  ol, ul {
+    margin-left: 2em;
+    margin-top: .5rem;
+    margin-bottom: .5rem;
+
+    ol, ul {
+      margin-top: 0;
+      margin-bottom: 0;
+    }
+  }
+  li {
+    line-height: 1.5em;
+    margin: .25rem 0;
+    &::marker {
+      color: var(--db-text-color-important);
+    }
+
+    > p {
+      margin: .25rem 0;
+      &:first-child {
+        margin-top: 0;
+      }
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+  }
+
+  dl {
+    line-height: 1.5em;
+  }
+  dt {
+    font-weight: bold;
+    margin: .25rem 0;
+  }
+  dd {
+    margin: .25rem 0 .25rem 2rem;
+  }
+
+  a {
+    color: revert;
+
+    &:hover {
+      color: revert;
+      text-decoration: revert;
+    }
+  }
+
+  .highlight code {
+    background-color: var(--db-surface-color);
+    border: 1px solid var(--db-border-color);
+    max-width: 100%;
+    overflow-x: auto;
+    border-radius: $border-radius-object;
+    margin: 1rem 0;
+    
+    line-height: 1.5em;
+    padding: .5em 1rem;
+
+    display: block;
+  }
+  
+  code.language-plaintext {
+    padding: .2rem .4em;
+    margin: 0 .2rem;
+    font-size: .9em;
+    background-color: var(--db-surface-color);
+    border-radius: $border-radius-object;
+    white-space: nowrap;
+  }
+
+  hr {
+    border-top: 1px solid var(--db-border-color);
+    border-width: 1px 0 0 0;
+    margin: 1em 2em;
+  }
+  
+  blockquote {
+    margin: .5rem 2rem;
+    color: var(--db-text-color-inactive);
+    border-left: 0.25em solid var(--db-border-color);
+    padding: .25rem 0 .25rem .5rem;
+    > * {
+      &:first-child {
+        margin-top: 0;
+      }
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+  }
+
+  p:lang(zh) {
+    text-indent: 2em;
+  }
+
+}

data/_sass/utilities/_thinscrollbar.scss

@@ -1,35 +1,35 @@
-.u-thinscrollbar {
-  overflow-y: scroll;
-
-  // entire scrollbar
-  &::-webkit-scrollbar {
-    width: 4px;
-    background-color: transparent;
-  }
-
-  // handle
-  &::-webkit-scrollbar-thumb {
-    border-radius: $border-radius-object;
-    background-color: transparent;
-  }
-
-  // track bar
-  &::-webkit-scrollbar-track {
-    display: none;
-  }
-
-  // arrow buttons
-  &::-webkit-scrollbar-button {
-    display: none;
-  }
-
-  &:hover {
-    &::-webkit-scrollbar-thumb {
-      background-color: hsl(var(--db-accent-color-h), var(--db-accent-color-s), 80%);
-
-      &:hover {
-        background-color: hsl(var(--db-accent-color-h), var(--db-accent-color-s), 70%);
-      }
-    }
-  }
-}
+.u-thinscrollbar {
+  overflow-y: scroll;
+
+  // entire scrollbar
+  &::-webkit-scrollbar {
+    width: 4px;
+    background-color: transparent;
+  }
+
+  // handle
+  &::-webkit-scrollbar-thumb {
+    border-radius: $border-radius-object;
+    background-color: transparent;
+  }
+
+  // track bar
+  &::-webkit-scrollbar-track {
+    display: none;
+  }
+
+  // arrow buttons
+  &::-webkit-scrollbar-button {
+    display: none;
+  }
+
+  &:hover {
+    &::-webkit-scrollbar-thumb {
+      background-color: hsl(var(--db-accent-color-h), var(--db-accent-color-s), 80%);
+
+      &:hover {
+        background-color: hsl(var(--db-accent-color-h), var(--db-accent-color-s), 70%);
+      }
+    }
+  }
+}

data/assets/databook/css/databook.scss

@@ -1,6 +1,6 @@
----
-# Only the main Sass file needs front matter (the dashes are enough)
----
-@charset "utf-8";
-
-@import "databook";
+---
+# Only the main Sass file needs front matter (the dashes are enough)
+---
+@charset "utf-8";
+
+@import "databook";

data/assets/databook/js/databook.js

@@ -1,8 +1,8 @@
----
----
-
-document.documentElement.classList.add('js-loaded');
-
-{% include js/codes.js %}
-
-{% include js/scrollspy.js %}
+---
+---
+
+document.documentElement.classList.add('js-loaded');
+
+{% include js/codes.js %}
+
+{% include js/scrollspy.js %}

data/assets/databook/js/search.js

@@ -1,47 +1,47 @@
-function query(json) {
-  let params = new URLSearchParams(location.search);
-  let keywords = params.get('q').split(' ').filter(x => x.length > 0);
-  if (keywords.length == 0) return [];
-  let reg = new RegExp( keywords.join('|'), 'i');
-
-  let results = [];
-  for (let item of json) {
-    if (item.title && reg.test(item.title)) {
-      results.push(item);
-      break;
-    }
-    if (item.content && reg.test(item.content)) {
-      results.push(item);
-      break;
-    }
-  }
-
-  return results;
-}
-
-function render(results) {
-  let resultTemplate = document.querySelector(".js-search-result").innerHTML;
-  let resultText = resultTemplate.replace('{0}', results.length);
-  document.querySelector('.c-title__meta').innerHTML = resultText;
-  
-  let html = ``;
-  html += `<div class="c-blog-list">`;
-  for(let item of results) {
-    html += `
-<div class="c-blog-list__item">
-  <div class="c-blog-list__title">
-    <a class="c-blog-list__link" href="${item.url}">${item.title}</a>
-  </div>
-  <div class="c-blog-list__content">${item.content?.slice(0, 256) || ''}</div>
-</div>
-    `;
-  }
-  html += `</div>`;
-  
-  document.querySelector('.js-search').innerHTML = html;
-}
-
-fetch("/assets/search.json")
-  .then(response => response.json())
-  .then(query)
-  .then(render);
+function query(json) {
+  let params = new URLSearchParams(location.search);
+  let keywords = params.get('q').split(' ').filter(x => x.length > 0);
+  if (keywords.length == 0) return [];
+  let reg = new RegExp( keywords.join('|'), 'i');
+
+  let results = [];
+  for (let item of json) {
+    if (item.title && reg.test(item.title)) {
+      results.push(item);
+      break;
+    }
+    if (item.content && reg.test(item.content)) {
+      results.push(item);
+      break;
+    }
+  }
+
+  return results;
+}
+
+function render(results) {
+  let resultTemplate = document.querySelector(".js-search-result").innerHTML;
+  let resultText = resultTemplate.replace('{0}', results.length);
+  document.querySelector('.c-title__meta').innerHTML = resultText;
+  
+  let html = ``;
+  html += `<div class="c-blog-list">`;
+  for(let item of results) {
+    html += `
+<div class="c-blog-list__item">
+  <div class="c-blog-list__title">
+    <a class="c-blog-list__link" href="${item.url}">${item.title}</a>
+  </div>
+  <div class="c-blog-list__content">${item.content?.slice(0, 256) || ''}</div>
+</div>
+    `;
+  }
+  html += `</div>`;
+  
+  document.querySelector('.js-search').innerHTML = html;
+}
+
+fetch("/assets/search.json")
+  .then(response => response.json())
+  .then(query)
+  .then(render);

data/assets/databook/version.json

@@ -1,9 +1,9 @@
----
----
-{%- capture version -%}
-  {%- include version -%}
-{%- endcapture -%}
-
-{
-  "version": "{{- version | strip | strip_newlines -}}"
-}
+---
+---
+{%- capture version -%}
+  {%- include version -%}
+{%- endcapture -%}
+
+{
+  "version": "{{- version | strip | strip_newlines -}}"
+}