added cactus theme files

hugo-content/themes/cactus/assets/scss/partial/archive.scss

@@ -0,0 +1,32 @@
+#archive {
+  .post-list {
+    padding: 0;
+
+    .post-item {
+      margin-bottom: 1rem;
+      margin-left: 0;
+      list-style-type: none;
+
+      .meta {
+        display: block;
+        margin-right: 16px;
+        min-width: 100px;
+        color: $color-meta;
+        font-size: 14px;
+      }
+    }
+  }
+  @media (min-width: 480px) {
+    .post-list {
+      .post-item {
+        display: flex;
+        margin-bottom: 5px;
+        margin-left: 1rem;
+
+        .meta {
+          text-align: left;
+        }
+      }
+    }
+  }
+}

hugo-content/themes/cactus/assets/scss/partial/article.scss

@@ -0,0 +1,158 @@
+article {
+  header {
+    .posttitle {
+      margin-top: 0;
+      margin-bottom: 0;
+      text-transform: none;
+      font-size: 1.5em;
+      line-height: 1.25;
+    }
+    .meta {
+      margin-top: 0;
+      margin-bottom: 1rem;
+    }
+    .meta * {
+      color: $color-accent-3;
+      font-size: .85rem;
+    }
+    .author {
+      text-transform: uppercase;
+      letter-spacing: .01em;
+      font-weight: 700;
+    }
+    .postdate {
+      display: inline;
+    }
+  }
+  .content {
+    h2 {
+      &:before {
+        position: absolute;
+        top: -4px;
+        left: -1rem;
+        color: $color-accent-1;
+        content: "#";
+        font-weight: bold;
+        font-size: 1.2rem;
+      }
+    }
+  }
+  .content img,
+  .content video {
+    display: block;
+    margin: auto;
+    max-width: 100%;
+    height: auto;
+
+    /* http://webdesignerwall.com/tutorials/css-elastic-videos */
+    .video-container {
+      position: relative;
+      overflow: hidden;
+      padding-top: 56.25% e;
+      // (9/16 * 100)% // 16:9 ratio
+      height: 0;
+
+      iframe,
+      object,
+      embed {
+        position: absolute;
+        top: 0;
+        left: 0;
+        margin-top: 0;
+        width: 100%;
+        height: 100%;
+      }
+    }
+    blockquote {
+      margin: 1rem 10px;
+      padding: .5em 10px;
+      background: inherit;
+      color: $color-quote;
+      quotes: "\201C" "\201D" "\2018" "\2019";
+      font-weight: bold;
+
+      p {
+        margin: 0;
+      }
+      &:before {
+        margin-right: .25em;
+        color: $color-quote;
+        content: "\201C";
+        vertical-align: -.4em;
+        font-size: 2em;
+        line-height: .1em;
+      }
+      footer {
+        margin: line-height 0;
+        color: $color-meta;
+        font-size: 11px;
+
+        a {
+          background-image: linear-gradient(transparent, transparent 5px, $color-meta 5px, $color-meta);
+          color: $color-meta;
+        }
+        a:hover {
+          background-image: linear-gradient(transparent, transparent 4px, lighten($color-meta, 20%) 4px, lighten($color-meta, 20%));
+          color: lighten($color-meta, 20%);
+        }
+        cite {
+          &:before {
+            padding: 0 .5em;
+            content: "—";
+          }
+        }
+      }
+    }
+    .pullquote {
+      margin: 0;
+      width: 45%;
+      text-align: left;
+
+      &.left {
+        margin-right: 1em;
+        margin-left: .5em;
+      }
+      &.right {
+        margin-right: .5em;
+        margin-left: 1em;
+      }
+    }
+    .caption {
+      position: relative;
+      display: block;
+      margin-top: .5em;
+      color: $color-meta;
+      text-align: center;
+      font-size: .9em;
+    }
+  }
+}
+.posttitle {
+  text-transform: none;
+  font-size: 1.5em;
+  line-height: 1.25;
+}
+.article-tag {
+  .tag-link {
+    &:before {
+      content: "#";
+      @include underline(10px, $color-link);
+    }
+  }
+}
+.article-category {
+  .category-link {
+    @include underline(10px, $color-link);
+  }
+}
+@media (min-width: 480px) {
+  .article-read-time,
+  .article-tag,
+  .article-category {
+    display: inline;
+
+    &:before {
+      content: "|";
+    }
+  }
+};

hugo-content/themes/cactus/assets/scss/partial/categories.scss

@@ -0,0 +1,18 @@
+#categories {
+  .category-list-title {
+    color: $color-meta;
+  }
+  .category-list {
+    .category-list-item {
+      .category-list-count {
+        color: $color-meta;
+      }
+      .category-list-count:before {
+        content: " (";
+      }
+      .category-list-count:after {
+        content: ")";
+      }
+    }
+  }
+}

hugo-content/themes/cactus/assets/scss/partial/comments.scss

@@ -0,0 +1,3 @@
+.blog-post-comments {
+  margin-top: 4rem;
+}

hugo-content/themes/cactus/assets/scss/partial/footer.scss

@@ -0,0 +1,66 @@
+#footer {
+  position: absolute;
+  bottom: 0;
+  margin-bottom: 10px;
+  width: 100%;
+  color: $color-meta;
+  vertical-align: top;
+  text-align: center;
+  font-size: 11px;
+
+  ul {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+  li {
+    display: inline-block;
+    margin-right: 15px;
+    border-right: 1px solid;
+    border-color: $color-border;
+    vertical-align: middle;
+
+    a {
+      margin-right: 15px;
+    }
+  }
+  li:last-child {
+    margin-right: 0;
+    border-right: 0;
+
+    a {
+      margin-right: 0;
+    }
+  }
+  a {
+    color: $color-meta;
+    text-decoration: underline;
+    background-image: none;
+  }
+  a:hover {
+    color: lighten($color-meta, 20%);
+  }
+  .footer-left {
+    height: 20px;
+    vertical-align: middle;
+    line-height: 20px;
+  }
+}
+@media (min-width: 39rem) {
+  #footer {
+    display: flex;
+    flex-flow: row wrap;
+    justify-content: space-between;
+    align-items: center;
+    align-content: center;
+    margin-bottom: 20px;
+
+    .footer-left {
+      align-self: flex-start;
+      margin-right: 20px;
+    }
+    .footer-right {
+      align-self: flex-end;
+    }
+  }
+};

hugo-content/themes/cactus/assets/scss/partial/header.scss

@@ -0,0 +1,123 @@
+#header {
+  margin: 0 auto 2rem;
+  width: 100%;
+
+  h1,
+  .h1 {
+    margin-top: 0;
+    margin-bottom: 0;
+    color: $color-text;
+    letter-spacing: .01em;
+    font-weight: 700;
+    font-style: normal;
+    font-size: 1.5rem;
+    line-height: 2rem;
+
+    @include antialias();
+  }
+  a {
+    background: none;
+    color: inherit;
+    text-decoration: none;
+  }
+  #logo {
+    display: inline-block;
+    float: left;
+    margin-right: 20px;
+    width: $logo-width;
+    height: $logo-height;
+    border-radius: 5px;
+    background-size: $logo-width $logo-height;
+    background-repeat: no-repeat;
+    @if $logo-grayout {
+      filter: grayscale(100%);
+      -webkit-filter: grayscale(100%);
+    }
+  }
+  #nav {
+    color: $color-accent-1;
+    letter-spacing: .01em;
+    font-weight: 200;
+    font-style: normal;
+    font-size: .8rem;
+
+    ul {
+      margin: 0;
+      padding: 0;
+      list-style-type: none;
+      line-height: 15px;
+
+      a {
+        margin-right: 15px;
+        color: $color-accent-1;
+      }
+      a:hover {
+        @include underline(5px, $color-accent-1);
+      }
+      li {
+        display: inline-block;
+        margin-right: 15px;
+        border-right: 1px dotted;
+        border-color: $color-accent-1;
+        vertical-align: middle;
+      }
+      .icon {
+        display: none;
+      }
+      li:last-child {
+        margin-right: 0;
+        border-right: 0;
+
+        a {
+          margin-right: 0;
+        }
+      }
+    }
+  }
+}
+@if $logo-grayout {
+  #header:hover {
+    #logo {
+      filter: none;
+      -webkit-filter: none;
+    }
+  }
+}
+@media screen and (max-width: 480px) {
+  #header #title {
+    display: table;
+    margin-right: 5rem;
+    min-height: $logo-height;
+    h1 {
+      display: table-cell;
+      vertical-align: middle;
+    }
+  }
+  #header #nav {
+    ul {
+      a:hover {
+        background: none;
+      }
+      li {
+        display: none;
+        border-right: 0;
+      }
+      li.icon {
+        position: absolute;
+        top: 77px;
+        right: 1rem;
+        display: inline-block;
+      }
+    }
+    ul.responsive {
+      li {
+        display: block;
+      }
+    }
+    li:not(:first-child) {
+      padding-top: 1rem;
+      padding-left: $logo-width + 20px;
+      font-size: 1rem;
+    }
+  }
+};

hugo-content/themes/cactus/assets/scss/partial/index.scss

@@ -0,0 +1,40 @@
+.post-list {
+  padding: 0;
+
+  .post-item {
+    margin-bottom: 1rem;
+    margin-left: 0;
+    list-style-type: none;
+
+    .meta {
+      display: block;
+      margin-right: 16px;
+      min-width: 100px;
+      color: $color-meta;
+      font-size: 14px;
+    }
+  }
+}
+@media (min-width: 480px) {
+  .post-list {
+    .post-item {
+      display: flex;
+      margin-bottom: 5px;
+
+      .meta {
+        text-align: left;
+      }
+    }
+  }
+}
+.project-list {
+  padding: 0;
+  list-style: none;
+
+  .project-item {
+    margin-bottom: 5px;
+    p {
+      display: inline;
+    }
+  }
+}

hugo-content/themes/cactus/assets/scss/partial/pagination.scss

@@ -0,0 +1,25 @@
+.pagination {
+  display: inline-block;
+  margin-top: 2rem;
+  width: 100%;
+  text-align: center;
+
+  .page-number {
+    color: $color-text;
+    font-size: .8rem;
+  }
+  a {
+    padding: 4px 6px;
+    border-radius: 5px;
+    // background-color: $color-accent-1
+    background-image: none;
+    color: $color-text;
+    text-decoration: none;
+  }
+  a:hover {
+    background-image: none;
+  }
+  a:hover:not(.active) {
+    color: $color-accent-2;
+  }
+}

hugo-content/themes/cactus/assets/scss/partial/post/actions_desktop.scss

@@ -0,0 +1,256 @@
+#header-post {
+  position: fixed;
+  top: 2rem;
+  right: 0;
+  display: inline-block;
+  float: right;
+  z-index: 100;
+
+  a {
+    background: none;
+    color: inherit;
+    text-decoration: none;
+  }
+  a.icon {
+    background: none;
+
+    &:hover {
+      color: $color-link;
+    }
+  }
+  nav {
+    ul {
+      display: block;
+
+      list-style-image: none;
+
+      list-style-position: outside;
+
+      list-style-type: none;
+
+      padding-inline-start: 40px;
+
+      li {
+        display: list-item;
+
+        margin-right: 0px;
+      }
+    }
+  }
+  nav > ul {
+    margin-block-end: 1em;
+
+    margin-block-start: 1em;
+  }
+
+  ul {
+    display: inline-block;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+
+    li {
+      display: inline-block;
+      margin-right: 15px;
+      vertical-align: middle;
+    }
+    li:last-child {
+      margin-right: 0;
+    }
+  }
+  #menu-icon {
+    float: right;
+    margin-right: 2rem;
+    margin-left: 15px;
+
+    &:hover {
+      color: $color-accent-1;
+    }
+  }
+  #menu-icon-tablet {
+    float: right;
+    margin-right: 2rem;
+    margin-left: 15px;
+
+    &:hover {
+      color: $color-accent-1;
+    }
+  }
+  #top-icon-tablet {
+    position: fixed;
+    right: 2rem;
+    bottom: 2rem;
+    margin-right: 2rem;
+    margin-left: 15px;
+
+    &:hover {
+      color: $color-accent-1;
+    }
+  }
+  .active {
+    color: $color-accent-1;
+  }
+  #menu {
+    visibility: hidden;
+    margin-right: 2rem;
+  }
+  #nav {
+    color: $color-accent-1;
+    letter-spacing: .01em;
+    font-weight: 200;
+    font-style: normal;
+    font-size: .8rem;
+
+    ul {
+      line-height: 15px;
+
+      a {
+        margin-right: 15px;
+        color: $color-accent-1;
+      }
+      a:hover {
+        @include underline(5px, $color-accent-1);
+      }
+      li {
+        border-right: 1px dotted $color-accent-1;
+      }
+      li:last-child {
+        margin-right: 0;
+        border-right: 0;
+
+        a {
+          margin-right: 0;
+        }
+      }
+    }
+  }
+  #actions {
+    float: right;
+    margin-top: 2rem;
+    margin-right: 2rem;
+    width: 100%;
+    text-align: right;
+
+    ul {
+      display: block;
+    }
+    .info {
+      display: block;
+      font-style: italic;
+    }
+  }
+  #share {
+    clear: both;
+    padding-top: 1rem;
+    padding-right: 2rem;
+    text-align: right;
+
+    li {
+      display: block;
+      margin: 0;
+    }
+  }
+  #toc {
+    float: right;
+    clear: both;
+    overflow: auto;
+    margin-top: 1rem;
+    padding-right: 2rem;
+    max-width: 20em;
+    max-height: calc(95vh - 7rem);
+    text-align: right;
+
+    a:hover {
+      color: $color-link;
+    }
+    // .toc-level-1 > .toc-link
+    //   display: none
+
+    nav > ul > li {
+      color: $color-text;
+      font-size: .8rem;
+
+      &:before {
+        color: $color-accent-1;
+        content: "#";
+        margin-right: 8px;
+      }
+    }
+    nav > ul > li > ul > li {
+      color: $color-meta;
+      font-size: .7rem;
+
+      &:before {
+        color: $color-accent-1;
+        content: "·";
+        font-weight: bold;
+        margin-right: 3px;
+      }
+    }
+    nav > ul > li > ul > li > ul > li {
+      color: darken($color-meta, 20%);
+      font-size: .4rem;
+    }
+    .toc-level-5 {
+      display: none;
+    }
+    .toc-level-6 {
+      display: none;
+    }
+    .toc-number {
+      display: none;
+    }
+// smartphone + phapblet
+  }
+}
+@media screen and (max-width: 500px) {
+  #header-post {
+    display: none;
+  }
+}
+
+@media screen and (max-width: 900px) {
+  #header-post {
+    #menu-icon {
+      display: none;
+    }
+    #actions {
+      display: none;
+    }
+  }
+}
+@media screen and (max-width: 1199px) {
+  #header-post {
+    #toc {
+      display: none;
+    }
+  }
+}
+@media screen and (min-width: 900px) {
+  #header-post {
+    #menu-icon-tablet {
+      display: none !important;
+    }
+    #top-icon-tablet {
+      display: none !important;
+    }
+  }
+}
+@media screen and (min-width: 1199px) {
+  #header-post {
+    #actions {
+      width: auto;
+
+      ul {
+        display: inline-block;
+        float: right;
+      }
+      .info {
+        display: inline;
+        float: left;
+        margin-right: 2rem;
+        font-style: italic;
+      }
+    }
+  }
+};

hugo-content/themes/cactus/assets/scss/partial/post/actions_mobile.scss

@@ -0,0 +1,154 @@
+#footer-post {
+  position: fixed;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 5000000;
+  width: 100%;
+  border-top: 1px solid $color-border;
+  background: $color-footer-mobile-1;
+  transition: opacity .2s;
+
+  a {
+    background: none;
+    color: inherit;
+    text-decoration: none;
+  }
+  a.icon {
+    background: none;
+
+    &:hover {
+      color: $color-link;
+    }
+  }
+  #nav-footer {
+    padding-right: 1rem;
+    padding-left: 1rem;
+    background: $color-footer-mobile-2;
+    text-align: center;
+
+    a {
+      color: $color-accent-1;
+      font-size: 1em;
+    }
+    a:hover {
+      @include underline(5px, $color-accent-1);
+    }
+    ul {
+      display: table;
+      margin: 0;
+      padding: 0;
+      width: 100%;
+      list-style-type: none;
+
+      li {
+        display: inline-table;
+        padding: 10px;
+        width: 20%;
+        vertical-align: middle;
+      }
+    }
+  }
+  #actions-footer {
+    overflow: auto;
+    margin-top: 1rem;
+    margin-bottom: 1rem;
+    padding-right: 1rem;
+    padding-left: 1rem;
+    width: 100%;
+    text-align: center;
+    white-space: nowrap;
+
+    a {
+      display: inline-block;
+      padding-left: 1rem;
+      color: $color-accent-1;
+    }
+  }
+  #share-footer {
+    padding-right: 1rem;
+    padding-left: 1rem;
+    background: $color-footer-mobile-2;
+    text-align: center;
+
+    ul {
+      display: table;
+      margin: 0;
+      padding: 0;
+      width: 100%;
+      list-style-type: none;
+
+      li {
+        display: inline-table;
+        padding: 10px;
+        width: 20%;
+        vertical-align: middle;
+      }
+    }
+  }
+  #toc-footer {
+    clear: both;
+    padding-top: 1rem;
+    padding-bottom: 1rem;
+    background: $color-footer-mobile-2;
+    text-align: left;
+
+    #TableOfContents {
+      ul {
+        margin: 0;
+        padding-left: 20px;
+        list-style-type: none;
+
+        li {
+          line-height: 30px;
+        }
+      }
+    }
+    a:hover {
+      color: $color-link;
+    }
+    // .toc-level-1 > .toc-link
+    //   display: none
+
+    #TableOfContents > ul > li {
+      color: $color-text;
+      font-size: .8rem;
+
+      &:before {
+        color: $color-accent-1;
+        content: "#";
+        margin-right: 8px;
+      }
+    }
+    #TableOfContents > ul > li > ul > li {
+      color: $color-meta;
+      font-size: .7rem;
+      line-height: 15px;
+
+      &:before {
+        color: $color-accent-1;
+        content: "·";
+
+        font-weight: bold;
+
+        margin-right: 3px;
+      }
+    }
+    #TableOfContents > ul > li > ul > li > ul > li {
+      display: none;
+    }
+    // .toc-level-5
+    //   display: none
+
+    // .toc-level-6
+    //   display: none
+
+    // .toc-number
+    //   display: none
+  }
+}
+@media screen and (min-width: 500px) {
+  #footer-post-container {
+    display: none;
+  }
+};

hugo-content/themes/cactus/assets/scss/partial/search.scss

@@ -0,0 +1,49 @@
+.search-input {
+  padding: 4px 7px;
+  width: 100%;
+  outline: none;
+  border: solid 1px $color-accent-3;
+  border-radius: 5px;
+  background-color: $color-background;
+  color: $color-text;
+  font-size: 1.2rem;
+  -webkit-border-radius: 5px;
+  -moz-border-radius: 5px;
+
+  &:focus {
+    border: solid 1px $color-accent-1;
+  }
+}
+#search-result {
+  ul.search-result-list {
+    padding: 0;
+    list-style-type: none;
+  }
+  li {
+    margin: 2em auto;
+  }
+  a.search-result-title {
+    background-image: none;
+    color: $color-text;
+    text-transform: capitalize;
+    font-weight: bold;
+    line-height: 1.2;
+  }
+  p.search-result {
+    overflow: hidden;
+    margin: .4em auto;
+    max-height: 13em;
+    text-align: justify;
+    font-size: .8em;
+  }
+  em.search-keyword {
+    border-bottom: 1px dashed $color-link;
+    color: $color-link;
+    font-weight: bold;
+  }
+}
+.search-no-result {
+  display: none;
+  padding-bottom: .5em;
+  color: $color-text;
+}

hugo-content/themes/cactus/assets/scss/partial/tags.scss

@@ -0,0 +1,13 @@
+#tag-cloud {
+  .tag-cloud-title {
+    color: $color-meta;
+  }
+  .tag-cloud-tags {
+    clear: both;
+    text-align: center;
+    a {
+      display: inline-block;
+      margin: 10px;
+    }
+  }
+}

hugo-content/themes/cactus/assets/scss/partial/tooltip.scss

@@ -0,0 +1,86 @@
+// ref: https://github.com/primer/primer/blob/master/modules/primer-tooltips/lib/tooltips.scss
+.tooltipped {
+  position: relative;
+}  
+// This is the tooltip bubble
+.tooltipped::after {
+  position: absolute;
+  z-index: 1000000;
+  display: none;
+  padding: .2em .5em;
+  -webkit-font-smoothing: subpixel-antialiased;
+  color: $color-background;
+  font-display: swap;
+  font-weight: 400;
+  font-size: $font-size * 0.8;
+  font-family: $font-family-body;
+  line-height: $line-height;
+  text-rendering: geometricPrecision;
+  text-align: center;
+  word-wrap: break-word;
+  white-space: pre;
+  content: attr(aria-label);
+  background: $color-text;
+  border-radius: 3px;
+  opacity: 0;
+}  
+// This is the tooltip arrow
+.tooltipped::before {
+  position: absolute;
+  z-index: 1000001;
+  display: none;
+  width: 0;
+  height: 0;
+  color: $color-text;
+  pointer-events: none;
+  content: '';
+  border: 6px solid transparent;
+  opacity: 0;
+}  
+// delay animation for tooltip
+@keyframes tooltip-appear {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+};
+    
+// This will indicate when we'll activate the tooltip
+.tooltipped:hover,
+.tooltipped:active,
+.tooltipped:focus {
+  &::before,
+  &::after {
+    display: inline-block;
+    text-decoration: none;
+    animation-name: tooltip-appear;
+    animation-duration: 0.1s;
+    animation-fill-mode: forwards;
+    animation-timing-function: ease-in;
+  }    
+// Tooltipped south
+}
+.tooltipped-s,
+.tooltipped-sw {
+  &::after {
+    top: 100%;
+    right: 50%;
+    margin-top: 6px;
+  }
+  &::before {
+    top: auto;
+    right: 50%;
+    bottom: -7px;
+    margin-right: -6px;
+    border-bottom-color: $color-text;
+  }
+}
+.tooltipped-sw::after {
+  margin-right: -16px;
+}  
+// Move the tooltip body to the center of the object.
+.tooltipped-s::after {
+  transform: translateX(50%);
+}