vertical.css

@import url("https://fonts.googleapis.com/css2?family=LXGW+WenKai+TC&family=Noto+Serif+TC:wght@200..900&display=swap");
/* ：； 用 Hina Mincho（Google Fonts）：其 vert 二者皆为横两点 */
@import url("https://fonts.googleapis.com/css2?family=Hina+Mincho&display=swap&text=%EF%BC%9A%EF%BC%9B");

html {
  height: 100%;
}

body {
  writing-mode: vertical-rl;
  text-orientation: upright;
  font-feature-settings: "vert" 1, "vrt2" 1;
  font-family: "Hina Mincho", "LXGW WenKai TC", "Noto Serif TC", serif;
  margin-block-end: 0;
  margin-block-start: 0;
  font-variant-numeric: tabular-nums;
  font-size: 2vh;
  height: 100%;
}

#main {
  margin: auto 0;
  height: 56vh;
  position: relative;
  padding-left: 20vw;
  padding-right: 20vw;
  box-sizing: border-box;
}

h1 {
  margin: 0;
  font-size: 1.5em;
  line-height: 3rem;
  margin-left: 1em;
}
h3 {
  font-size: 1em;
  text-indent: 1em;
  line-height: 1.5em;
  margin-block-end: 0;
  margin-block-start: 0;
}
p, li {
  line-height: 1.5em;
  font-size: 1em;
  /* 段间空一行 = 一个行盒高（line-height 1.5）；相邻 margin 会折叠为 1.5em */
  margin-block-start: 1.5em;
  margin-block-end: 1.5em;
  text-align: left;
}
p {
  text-indent: 1em;
}

.description a {
  color: #999;
  text-orientation: mixed;
}

code {
  text-orientation: mixed;
  font-size: 0.75em;
}

/* 縦中横：列表序号横放 */
ol {
  list-style: none;
  counter-reset: ol-item;
  padding: 0;
  margin-block-start: 1.5em;
  margin-block-end: 1.5em;
}

ol > li {
  counter-increment: ol-item;
}

ol > li::before {
  content: counter(ol-item) ".";
  text-combine-upright: all;
  -webkit-text-combine: horizontal;
  margin-inline-end: 0em;
}

nav {
  background: #fbfbfb;
  text-indent: 1.5em;
  border-left: 1px solid #eaeaea;
  border-right: 1px solid #eaeaea;
  display: block;
  min-height: 20px;
  margin-right: 1em;
  margin-left: 1em;
  margin-top: -1.5em;
  margin-bottom: -1.5em;
  position: relative;
  color: #999;
}
.description {
  color: #999;
  text-align: left;
  margin-left: 0em;
  margin-right: 0em;
}
.author {
  color: #999;
  text-align: left;
  margin-right: 0em;
}
.image {
  color: #999;
  text-align: left;
}
.image-desc {
  color: #555;
  text-align: left;
}
img {
  max-width: 100%;
  max-height: 200px;
  margin: 5px auto;
  border: 1px solid #ccc;
}
.info {
  margin-right: 0.5em;
  margin-left: 0em;
  color: #999;
  font-style: normal;
}
hr {
  border: none;
  border-left: 1px solid #eaeaea;
  width: 0;
  /* 线两侧各一行高，与段间距 1.5em 同轨 */
  margin: 0 1.5em;
  padding: 0;
  height: 100%;
}
/* Same idea as horizontal: line runs through the middle, text covers the gap.
   In vertical-rl, flex row = top→bottom, so lines go above & below the text. */
.separator {
  display: flex;
  align-items: center;
  text-align: center;
  height: 100%;
  width: 3em;
}

.separator::before,
.separator::after {
  content: "";
  flex: 1;
  width: 1px;
  align-self: center;
  background: gray;
}

.separator:not(:empty)::before {
  margin-bottom: 0.25em;
}

.separator:not(:empty)::after {
  margin-top: 0.25em;
}

a {
  color: black;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

.recent-post {
  color: gray !important;
  font-style: normal;
}

.recent-post-date {
  color: darkgray !important;
}

/*
 * Giscus shares #main’s 56vh band — use 100%, not another 56vh
 * (nested 56vh + iframe baseline gap sits lower than the article columns).
 */
.comments {
  display: block;
  /*
   * vertical-rl: margin-inline = 上下内缩。各 0.5em，高度就要比 #main 少 1em。
   */
  height: calc(100% - 1em);
  max-height: calc(100% - 1em);
  width: auto;
  margin: 0;
  margin-inline: 0.5em;
  /*
   * 右边竖线 = 正文 hr：1px #eaeaea；margin-right = 线外侧 1.5em。
   * 线内侧右槽改到 iframe 主题 padding-right（回应最多两列往右超出 1em 轨）。
   */
  padding: 0;
  margin-right: 1.5em;
  border: none;
  border-right: 1px solid #eaeaea;
  box-sizing: border-box;
  /* visible: reaction popovers can extend near the frame edge */
  overflow: visible;
  color: #333;
  background: #fff;
  color-scheme: light;
  font-size: 1em;
  line-height: 0; /* kill replaced-element strut under the iframe */
}

.giscus,
.giscus-frame {
  display: block !important;
  /*
   * Giscus only auto-resizes height. In vertical-rl content grows sideways,
   * so give a real column budget; height fills .comments (already #main − 1em).
   * 42em 正文 + 1.75em 内侧右槽（主区右侧空格 + 起始轨边距）。
   */
  height: 100% !important;
  max-height: 100% !important;
  width: 43.75em !important;
  min-width: 43.75em;
  max-width: none;
  margin: 0 !important;
  padding: 0;
  background: #fff;
  color-scheme: light;
  border: 0;
  vertical-align: top;
}

.giscus {
  overflow: visible;
  line-height: normal;
}

.giscus-frame {
  line-height: 0;
}