setup

themes/hugo-theme-monochrome/assets/scss/layout/article.scss

@@ -0,0 +1,197 @@
+article {
+  line-height: 1.7;
+
+  > *:first-child {
+    margin-top: 0;
+  }
+
+  > *:last-child {
+    margin-bottom: 0;
+  }
+
+  hr {
+    @include my-8;
+  }
+
+  p {
+    overflow-wrap: break-word;
+  }
+
+  li {
+    list-style-type: disc;
+    @include my-2;
+
+    p {
+      @include my-0;
+    }
+  }
+
+  ul, ol {
+    @include my-4;
+    padding-left: 1.3rem;
+  }
+
+  ol {
+    li {
+      list-style-type: decimal;
+    }
+  }
+
+  ul, ol {
+    @include my-2;
+
+    li:first-child {
+      margin-top: 0;
+    }
+
+    li:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  blockquote {
+    @include px-4;
+    @include my-6;
+    @include mx-0;
+    border-left: 2px solid var(--color-border);
+
+    p:first-child {
+      margin-top: 0;
+    }
+
+    p:last-child {
+      margin-bottom: 0;
+    }
+
+    blockquote {
+      @include my-0;
+    }
+  }
+
+  code { /* Inline code style */
+    border-radius: .25rem;
+    padding: .2rem .375rem .2rem .375rem;
+    background-color: var(--color-background-inline-code);
+  }
+
+  pre {
+    @include my-6;
+    padding: 1rem;
+    overflow-x: auto;
+    border-radius: .5rem;
+    background-color: $gray-850;
+    color: $gray-50;
+
+    code { /* Disable inline code style */
+      border-radius: 0;
+      padding: 0;
+      background-color: transparent;
+    }
+  }
+
+  pre.mc-prism.hide code { /* Smooth transition for prism.js */
+    opacity: 0;
+  }
+
+  pre.mc-prism code { /* Smooth transition for prism.js */
+    opacity: 1;
+    transition: opacity 0.1s ease-in;
+  }
+
+  .code-toolbar {
+    .toolbar-item {
+      @include mx-1;
+    }
+  }
+
+  .highlight {
+    @include my-6;
+    position: relative;
+
+    .code-toolbar {
+      padding: 0;
+
+      pre {
+        padding: 1rem;
+        border-radius: 0.375rem;
+      }
+    }
+
+    > div,
+    > pre {
+      padding: 0.75rem;
+      border-radius: 0.375rem;
+      overflow-x: auto;
+
+      pre {
+        padding: 0;
+        margin: 0;
+        border-radius: 0;
+
+        code { /* Disable inline code style */
+          border-radius: 0;
+          padding: 0;
+          background-color: transparent;
+        }
+      }
+    }
+  }
+
+  .copy-code-button {
+    @include text-xs;
+    position: absolute;
+    right: 0;
+    height: 1.5rem;
+    top: -1.5rem;
+    padding-left: 0.375rem;
+    padding-right: 0.375rem;
+    border-radius: .25rem;
+    cursor: pointer;
+    background-color: transparent;
+    display: flex;
+    align-items: center;
+
+    &:hover {
+      background-color: var(--color-background-hover);
+    }
+  }
+
+  table.mc-table {
+    @include my-6;
+    table-layout: auto;
+    border-collapse: collapse;
+    display: block;
+    overflow-x: auto;
+
+    td, th {
+      @include px-3;
+      @include py-2;
+      border: 1px solid var(--color-border);
+    }
+  }
+
+  figure {
+    @include my-4;
+    text-align: center;
+    
+    figcaption {
+      @include my-2;
+    }
+  }
+
+  img {
+    @include mx-auto;
+    display: block;
+  }
+}
+
+html[data-theme='dark'] {
+  .twitter-tweet {
+    color: var(--color-text);
+
+    a {
+      color: var(--color-link);
+    }
+  } 
+}
+

themes/hugo-theme-monochrome/assets/scss/layout/balloon.scss

@@ -0,0 +1,152 @@
+%balloon-item-base {
+  display: flex;
+  flex-direction: column;
+
+  @media screen and (min-width: $md_min_width) {
+    flex-direction: row;
+  }
+}
+
+%balloon-item-line-base {
+  width: 7rem;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  align-items: center;
+
+  @media screen and (max-width: $md_min_width) {
+    display: none;
+  }
+}
+
+%balloon-item-content-base {
+  display: flex;
+  flex: 1 1 0%;
+  margin-left: -12px;
+
+  @media screen and (max-width: $md_min_width) {
+    margin-left: 0;
+  }
+}
+
+
+.balloon-layout {
+  @media screen and (min-width: $md_min_width) {
+    margin-left: -1.75rem;
+  }
+
+  .balloon-head-item {
+    @extend %balloon-item-base;
+    width: 100%;
+    gap: 20px;
+
+    .balloon-head-item-desktop {
+      @extend %balloon-item-line-base;
+    }
+
+    .balloon-head-item-mobile {
+      width: 100%;
+      justify-content: center;
+
+      @media screen and (min-width: $md_min_width) {
+        display: none;
+      }
+    }
+
+    .balloon-head-item-img-light, .balloon-head-item-img-dark {
+      display: flex;
+      justify-content: center;
+    }
+
+    .balloon-head-item-img {
+      img {
+        width: 6rem;
+        height: 6rem;
+      }
+
+      .rounded {
+        border-radius: 9999px;
+      }
+    }
+
+    .balloon-head-item-content {
+      @extend %balloon-item-content-base;
+      margin: 0;
+      align-items: center;
+
+      @media screen and (max-width: $md_min_width) {
+        justify-content: center;
+        text-align: center;
+      }
+    }
+  }
+
+  .balloon-title-item {
+    @extend %balloon-item-base;
+
+    .balloon-title-item-line {
+      @extend %balloon-item-line-base;
+    }
+
+    .balloon-title-item-content {
+      @extend %balloon-item-content-base;
+
+      @media screen and (max-width: $md_min_width) {
+        justify-content: center;
+        text-align: center;
+      }
+    }
+  }
+
+  .balloon-card-item {
+    @extend %balloon-item-base;
+
+    .balloon-card-item-line {
+      @extend %balloon-item-line-base;
+    }
+
+    .balloon-card-item-content {
+      @extend %balloon-item-content-base;
+      @include text-sm;
+      overflow: auto;
+      border-radius: 0.375rem;
+      box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+      background-color: var(--color-background-card);
+      padding: 1rem 1.2rem;
+    }
+  }
+
+  .balloon-dot {
+    width: .8rem;
+    height: .8rem;
+    border-radius: 1rem;
+    margin: 0.25rem 0;
+    border: 2px solid var(--color-text);
+  }
+
+  .balloon-line-container {
+    display: flex;
+    flex: 1 1 0%;
+    justify-content: center;
+
+    .balloon-line {
+      background-color: var(--color-text);
+    }
+  }
+}
+
+html[data-theme="dark"] {
+  .balloon-head-item {
+    .balloon-head-item-img-light {
+      display: none;
+    }
+  }
+}
+
+html[data-theme="light"] {
+  .balloon-head-item {
+    .balloon-head-item-img-dark {
+      display: none;
+    }
+  }
+}

themes/hugo-theme-monochrome/assets/scss/layout/bookcase.scss

@@ -0,0 +1,55 @@
+.bookcase-layout {
+  display: grid;
+  gap: 1rem;
+  grid-template-columns: repeat(auto-fill, 8rem);
+
+  .bookcase-item {
+    figure {
+      position: relative;
+      margin: 0;
+    }
+
+    figcaption {
+      @include text-sm;
+      text-align: center;
+      margin-top: .7rem;
+
+      a {
+        color: var(--color-text);
+      }
+    }
+
+    img, .bookcase-item-overlay {
+      width: 8rem;
+      height: 12rem;
+      border-radius: 0.375rem;
+      box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+      object-fit: cover;
+    }
+
+    .bookcase-item-overlay {
+      position: absolute;
+      top: 0;
+      left: 0;
+      background-color: transparent;
+      opacity: 0.25;
+  
+      &:hover {
+        background-color: var(--color-background-overlay);
+      }
+    }
+  }
+}
+
+html[data-theme="light"] {
+  .bookcase-item-img-dark {
+    display: none;
+  }
+}
+
+html[data-theme="dark"] {
+  .bookcase-item-img-light {
+    display: none;
+  }
+}
+

themes/hugo-theme-monochrome/assets/scss/layout/gallery.scss

@@ -0,0 +1,46 @@
+.gallery-layout {
+  figure {
+    @media screen and (min-width: $md_min_width) {
+      margin-left: -1.25rem;
+      margin-right: -1.25rem;
+    }
+
+    img {
+      @include mx-auto;
+    }
+  }
+
+  figcaption {
+    @include my-2;
+    @include text-xs;
+    font-style: italic;
+    text-align: center;
+  }
+
+  .gallery-item {
+    margin-bottom: 4rem;
+  }
+
+  .gallery-item-title {
+    margin: 1rem 0;
+
+    a {
+      @include list-link-item;
+    }
+
+    span {
+      @include text-3xl;
+      @include font-bold;
+    }
+  }
+
+  .gallery-item-content {
+    @include my-4;
+  }
+
+  .gallery-item-statistic {
+    display: grid;
+    gap: 0.5rem;
+    grid-template-columns: max-content 1fr;
+  }
+}

themes/hugo-theme-monochrome/assets/scss/layout/list.scss

@@ -0,0 +1,21 @@
+ul.list-layout {
+  list-style: none;
+  padding: 0;
+
+  li {
+    margin-bottom: .5rem;
+    line-height: 1.625;
+    display: list-item;
+    list-style-type: none;
+
+    a {
+      @include list-link-item;
+      line-height: 1.7rem;
+    }
+
+    span {
+      @include text-xs;
+      color: var(--color-text-secondary);
+    }
+  }
+}

themes/hugo-theme-monochrome/assets/scss/layout/postcard.scss

@@ -0,0 +1,36 @@
+.postcard-layout {
+  a {
+    color: var(--color-text);
+  }
+
+  .postcard-item {
+    padding: 1rem;
+    background-color: var(--color-background-card);
+    border-radius: .375rem;
+    margin: 2rem 0;
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+
+    &:hover {
+      background-color: var(--color-background-hover);
+    }
+
+    .postcard-title {
+      @include text-xl;
+      @include font-medium;
+    }
+  
+    .postcard-summary {
+      @include text-xs;
+      color: var(--color-text-secondary);
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      margin: .5rem 0;
+    }
+
+    .postcard-metadata {
+      @include text-xs;
+      color: var(--color-text-secondary);
+    }
+  }
+}

themes/hugo-theme-monochrome/assets/scss/layout/term.scss

@@ -0,0 +1,10 @@
+.term-title {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin: 2rem 0;
+
+  h1 {
+    margin: 0;
+  }
+}