databook-theme 0.1.1

data/_sass/components/_post.scss

@@ -0,0 +1,19 @@
+.c-post-prevnext {
+  display: flex;
+  
+  &__prev,
+  &__next {
+    width: 40%;
+    border-radius:  $border-radius-object;
+    border: 1px solid var(--db-border-color);
+  }
+
+  &__next {
+    text-align: right;
+    margin-left: auto;
+  }
+
+  a {
+    display: block;
+  }
+}

data/_sass/components/_sidebar.scss

@@ -0,0 +1,303 @@
+.c-profile {
+  margin: 0;
+  padding: 0;
+  text-align: center;
+
+  &__image {
+    @include flex-center;
+    
+    border-radius: 128px;
+    margin: 2rem auto;
+    height: 128px;
+    width: 128px;
+
+    border: 1px solid var(--db-border-color-inactive);
+    background: white;
+
+    & img {
+      max-width: 80%;
+      max-height: 80%;
+    }
+  }
+
+  &__title {
+    font-weight: bold;
+    font-size: 1.5em;
+    margin: .5rem auto;
+    color: var(--db-text-color-active);
+  }
+
+  &__subtitle {
+    color: var(--db-text-color-inactive);
+    margin: .25rem auto;
+  }
+
+  &__description {
+    margin: 1rem 0;
+    color: var(--db-text-color-inactive);
+  }
+
+}
+
+.c-navlist {
+  margin-top: 1rem;
+  user-select: none;
+  
+  &__item {
+    text-align: center;
+
+    &::before,
+    &:last-of-type::after {
+      background-image: linear-gradient(to left, transparent, var(--db-border-color) 30%, var(--db-border-color) 70%, transparent);
+      content: "";
+      display: block;
+      height: 2px;
+      width: 100%;
+      opacity: 0.6;
+    }
+
+    &:hover {
+      background-image: linear-gradient(to left, transparent, var(--db-surface-hover-color) 30%, var(--db-surface-hover-color) 70%, transparent);
+    }
+
+    &.is-active {
+      font-weight: bold;
+    }
+  }
+
+  &__link {
+    color: inherit;
+    display: block;
+    padding: .5rem;
+    text-decoration: none;
+    text-overflow: ellipsis;
+
+    &:not([href]):not([onclick]):hover {
+      color: inherit;
+      text-decoration: none;
+    }
+  }
+  
+}
+
+.c-sociallist {
+  display: table;
+  color: var(--db-text-color-inactive);
+  vertical-align: top;
+  margin: 2rem auto;
+
+  &__item {
+    font-size: .875em;
+  }
+
+  &__icon {
+    width: 1.5rem;
+    text-align: center;
+    padding-bottom: .5rem;
+  }
+
+  &__text {
+    text-align: left;
+    padding-bottom: .5rem;
+  }
+
+  a {
+    color: inherit;
+    text-decoration: none;
+
+    &:hover {
+      color: var(--db-text-color-active);
+      text-decoration: underline;
+    }
+  }
+
+}
+
+.c-navtree {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  padding: 0;
+  user-select: none;
+
+  &__group {
+    &:not(&--bottom) {
+      margin-bottom: 1rem;
+    }
+    
+    &:not(&--bottom) + &--bottom {
+      margin-top: auto;
+    }
+  }
+
+  &__label {
+    font-size: small;
+    font-weight: bold;
+    padding: .5em;
+    margin-top: .5rem;
+    color: var(--db-text-color-inactive);
+    opacity: .75;
+
+    &::after {
+      background-image: linear-gradient(to right, var(--db-border-color) 33%, transparent);
+      content: "";
+      display: block;
+      margin-top: .25rem;
+      height: 2px;
+      width: 100%;
+      opacity: 0.6;
+    }
+  }
+
+  &__item {
+    display: flex;
+    flex-direction: row;
+    border: 1px solid transparent;
+    border-radius: $border-radius-control;
+    margin: 2px 0;
+    overflow: hidden;
+
+    &.is-active {
+      font-weight: bold;
+    }
+
+    &:not(.is-disabled) .c-navtree__link:hover,
+    &:not(.is-disabled) .c-navtree__link:hover + .c-navtree__toggle {
+      background-color: var(--db-surface-hover-color);
+    }
+
+    &.is-disabled {
+      color: var(--db-text-color-disabled);
+    }
+    
+  }
+
+  &__link {
+    display: flex;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    padding: 8px 0 8px 8px;
+    align-items: center;
+    flex: 1;
+    border: 1px solid transparent;
+    color: inherit;
+
+    &:hover {
+      text-decoration: none;
+      color: inherit;
+    }
+  }
+
+  &__icon {
+    width: 1.5rem;
+    text-align: center;
+    color: var(--db-text-color-inactive);
+    opacity: .88;
+  }
+
+  &__badge {
+    width: 2.4rem;
+    text-align: center;
+    color: var(--db-text-color-inactive);
+    opacity: .88;
+  }
+
+  &__text {
+    flex: 1;
+    padding: 0 4px;
+  }
+
+  &__button {
+    color: var(--db-text-color-inactive);
+    width: 2.4rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    user-select: none;
+
+    &--toggle {
+      &::before {
+        font-family: 'Font Awesome 5 Free';
+        content: "\f067";
+        font-weight: 600;
+  
+        @at-root .is-expanded #{&} {
+          content: "\f068";
+        }
+      }
+    }
+
+    &:hover {
+      color: var(--db-text-color-active);
+      background-color: var(--db-surface-hover-color);
+    }
+    &[href]:hover,
+    &[onclick]:hover {
+      cursor: pointer;
+    }
+  }
+
+  &__list {
+    flex-direction: column;
+    display: none;
+    font-size: .8em;
+    padding-left: 2rem;
+
+    .c-navtree__icon {
+      font-size: xx-small;
+    }
+
+    .c-navtree__link {
+      padding: 6px 8px;
+      font-size: 15px;
+    }
+
+    @at-root .is-expanded + #{&} {
+      display: inherit;
+    }
+
+  }
+
+}
+
+$sidebutton-size: 2rem;
+.c-sidebuttons {
+  @include flex-center;
+  margin-top: auto;
+
+  &__item {
+    border: 1px solid var(--db-border-color);
+    color: var(--db-text-color-inactive);
+    border-radius: $sidebutton-size;
+    margin: $sidebutton-size / 4;
+    width: $sidebutton-size;
+    height: $sidebutton-size;
+    line-height: $sidebutton-size;
+    text-align: center;
+
+    &:hover {
+      background-color: var(--db-surface-hover-color);
+      color: var(--db-text-color-active);
+      text-decoration: none;
+    }
+  }
+
+  &__link {
+    color: inherit;
+    text-decoration: none;
+    display: block;
+
+    &:hover {
+      color: inherit;
+      text-decoration: none;
+    }
+  }
+}
+
+.c-texticon {
+  font-family: monospace;
+  margin: auto;
+  overflow: hidden;
+  white-space: nowrap;
+  width: 2ch;
+}

data/_sass/components/_tabs.scss

@@ -0,0 +1,67 @@
+.c-tabs {
+  display: flex;
+  flex-wrap: wrap;
+
+  &__input {
+    display: none;
+  }
+
+  &__button {
+    order: 0;
+    padding: .5rem;
+    border: 1px solid #aaa;
+    min-width: 3rem;
+    text-align: center;
+    position: relative;
+    background-color: #f2f2f2;
+    
+    &:first-of-type {
+      margin-left: 1rem;
+      border-top-left-radius: .25rem;
+      &::before {
+        background-color: #aaa;
+        content: "";
+        width: 1rem;
+        left: -1rem;
+        bottom: -1px;
+        height: 1px;
+        position: absolute;
+      }
+    }
+
+    &:last-of-type {
+      margin-right: 1rem;
+      border-top-right-radius: .25rem;
+      &::after {
+        background-color: #aaa;
+        content: "";
+        width: 1rem;
+        right: -1rem;
+        bottom: -1px;
+        height: 1px;
+        position: absolute;
+      }
+    }
+
+    &:not(:first-of-type){
+      border-left: none;
+    }
+  }
+
+  &__pane {
+    order: 1;
+    display: none;
+    width: 100%;
+  }
+
+  &__input:checked + &__button {
+    font-weight: bold;
+    border-bottom-color: transparent;
+    background-color: transparent;
+  }
+
+  &__input:checked + &__button + &__pane {
+    display: block;
+  }
+
+}

data/_sass/components/_text.scss

@@ -0,0 +1,27 @@
+.c-list {
+  border-collapse: collapse;
+  width: 100%;
+  margin-bottom: 1rem;
+  color: var(--db-text-color-active);
+  vertical-align: top;
+  border-color: var(--db-border-color);
+
+  td {
+    padding: .5rem .5rem;
+
+    &:not(:first-child) {
+      text-align: center;
+    }
+  }
+
+  tr {
+    &:not(:last-child) {
+      border-bottom: 1px solid var(--db-border-color);
+    }
+
+    &:hover {
+      background-color: var(--db-highlight-color-hover);
+    }
+
+  }
+}

data/_sass/components/_toc.scss

@@ -0,0 +1,50 @@
+.c-toc {
+  --db-toc-spacing: 1rem;
+  font-size: small;
+  border: 1px solid var(--db-border-color);
+  border-radius: $border-radius-object;
+  display: inline-block;
+  padding: var(--db-toc-spacing) 1rem;
+  width: 100%;
+
+  &__header {
+    border-bottom: 1px dashed var(--db-border-color-inactive);;
+    color: var(--db-text-color-inactive);
+    font-weight: bold;
+    margin-bottom: var(--db-toc-spacing);
+    text-align: center;
+    padding-bottom: var(--db-toc-spacing);
+  }
+
+  &__item {
+    margin-left: 1rem;
+    line-height: 1.8rem;
+
+    a {
+      color: var(--db-text-color-inactive);
+
+      &.is-active {
+        color: var(--db-text-color-active);
+        font-weight: bold;
+      }
+
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+  }
+
+  ol,
+  ul {
+    margin: 0 !important;
+    margin-left: 1rem !important;
+  }
+
+  
+  @media #{$wide-screen} {
+    display: block;
+    padding: .5rem;
+    --db-toc-spacing: .5rem;
+  }
+
+}

data/_sass/layout/_article.scss

@@ -0,0 +1,211 @@
+.l-page {
+  display: flex;
+  flex-direction: row;
+  border: 1px solid transparent;
+  border-radius: $border-radius-control;
+  margin: 0 auto;
+  width: 100%;
+  flex-wrap: wrap;
+
+  &__header {
+    width: 100%;
+    position: relative;
+  }
+
+  &__side {
+    order: 1;
+    margin-bottom: 1.5rem;
+    width: 100%;
+
+    &:empty {
+      display: none;
+    }
+
+    @media #{$wide-screen} {
+      order: 3;
+      width: 15rem;
+      margin-bottom: 0;
+      padding: 0 1.5rem;
+
+      position: sticky;
+      align-self: flex-start;
+      top: 1em;
+
+      &:empty {
+        display: unset;
+      }
+    }
+  }
+
+  &__content {
+    order: 2;
+    flex: 1;
+    margin: 2rem 0;
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+  }
+
+  &__footer {
+    width: 100%;
+  }
+
+  + #{&} {
+    margin-top: 4rem;
+
+    &::before {
+      content: '';
+      height: 4px;
+      width: 100%;
+      border-top: 1px solid var(--db-border-color);
+      border-bottom: 1px solid var(--db-border-color);
+      margin-bottom: 2rem;
+    }
+  }
+}
+
+
+
+.c-title {
+  display: flex;
+  align-items: flex-end;
+  flex-direction: row;
+  flex-wrap: wrap;
+  padding: 1.5rem 0;
+  margin-top: 2rem;
+  margin-bottom: 1rem;
+
+  &__tagline  {
+    width: 100%;
+    color: var(--db-text-color-inactive);
+    margin-top: .5rem;
+  }
+
+  &__title {
+    flex: 1;
+    display: flex;
+    align-items: flex-end;
+    font-size: 3rem;
+    font-weight: bold;
+    flex: 1;
+    color: var(--db-text-color-important);
+  }
+
+  &__right {
+    color: var(--db-text-color-inactive);
+  }
+
+  &__divider {
+    border: none;
+    border-bottom: 1px solid var(--db-border-color);
+    margin-top: 1.5rem;
+    margin-bottom: .5rem;
+    width: 100%;
+  }
+
+  &__meta {
+    flex: 1;
+    color: var(--db-text-color-inactive);
+  }
+
+  &__indicator {
+    color: var(--db-text-color-inactive);
+  }
+
+  &__breadcrumb {
+    width: 100%;
+    color: var(--db-text-color-inactive);
+    margin-bottom: 1rem;
+  }
+
+  a:hover {
+    text-decoration: underline;
+  }
+}
+
+.c-breadcrumb {
+  &__item {
+    &::after {
+      margin: 0 .5rem;
+    }
+
+    &:not(:last-child)::after {
+      content: "/";
+    }
+
+    &:last-child::after {
+      @include fontawesome-text;
+      content: "\f105";
+    }
+  }
+}
+
+
+.c-meta {
+  
+  &__item {
+    color: var(--db-text-color-inactive);
+
+    &::before {
+      @include fontawesome-text;
+      font-size: 0.8rem;
+      margin-right: 0.25rem;
+    }
+
+    &:not(:last-child)::after {
+      content: "·";
+      margin-right: 0.5rem;
+      margin-left: 0.5rem;
+      opacity: 66%;
+    }
+
+    
+    a:not(:last-child)::after {
+      content: " ";
+      display: inline-block;
+      margin-right: .25rem;
+    }
+
+    &--time::before {
+      content: "\f017";
+    }
+
+    &--authors::before {
+      content: "\f4ff";
+    }
+
+    &--categories::before {
+      content: "\f07c";
+    }
+
+    &--tags::before {
+      content: "\f02c";
+      font-weight: 600;
+    }
+
+    &--source::before {
+      content: "\f121";
+      font-weight: 600;
+    }
+
+    &--sticky::before {
+      content: "\f08d";
+      font-weight: 600;
+    }
+
+    &--featured::before {
+      content: "\f058";
+      font-weight: 600;
+    }
+    
+  }
+}
+
+.c-thumbnail {
+  width: 100%;
+
+  img {
+    max-width: 100%;
+    margin: 0 auto;
+  }
+}

data/_sass/layout/_body.scss

@@ -0,0 +1,26 @@
+.l-body {
+  flex: 1;
+  flex-direction: column;
+  display: flex;
+  padding: $page-spacing-small;
+  margin: auto;
+  width: 100%;
+
+  @media #{$medium-screen} {
+    padding: $page-spacing-medium * .5 $page-spacing-medium;
+  }
+
+  @media #{$large-screen} {
+    padding: $page-spacing-large * .5 $page-spacing-large;
+  }
+
+  @media #{$wide-screen} {
+    padding: $page-spacing-large * .5 $page-spacing-wide;
+    max-width: $page-max-width + $page-spacing-wide * 2;
+
+    @at-root .l-wrapper.is-wide #{&} {
+      max-width: unset;
+    }
+  }
+
+}