画面幅に応じてページの表示スケールを変更する
app.css に指定されている Cosense 標準の値よりも広い段階でページ余白が小さくなるようにする さらにフォントサイズと行間を小さくする
フォントサイズと共に調整すること’
2025-11-18: テロメアの:hover時の表示がwidth: 5pxになってしまう問題を修正
2025-11-17: 全面的な書き直し
ページの余白を文字サイズとの本来の比率になるように変更。
文字サイズに応じて余白が調整される。
テロメアが非表示になってしまう問題を修正。
カードのフォントサイズに干渉してしまう問題を修正。
.lineクラスはページだけでなくカードにも存在するため。
Stream のレイアウト崩れの問題を修正。
ページタイトルの既定のスタイリングにも干渉してしまっていた。
code:style.css
.page {
--page-font-size: 15px;
--page-line-height: calc(28px / var(--page-font-size, 15px));
}
@container page (width <= 767px) {
.page,
.stream .page {
--page-font-size: 13.5px;
--page-line-height: 1.675;
}
}
code:style.css
.page,
.editor,
.lines,
:is(.page, .stream .page) .line:not(.line-title) {
font-size: var(--page-font-size, 15px);
line-height: var(--page-line-height, 28px);
}
.page-wrapper,
.project-events {
container-type: inline-size;
container-name: page;
}
.page {
padding: var(--page-padding-top) var(--page-padding-left) var(--page-padding-bottom);
}
.line .telomere .telomere-border {
left: calc(var(--page-padding-left, 21px) * -1);
min-width: var(--telomere-width, 5px);
}
code:style.css
.page {
--page-layout-unit: calc(var(--page-font-size, 15px) * var(--page-line-height) / 4);
--page-padding-top: calc(var(--page-layout-unit, 7px) * 6); /* 28px */
--page-padding-left: calc(var(--page-layout-unit, 7px) * 7); /* 21px */
--page-padding-bottom: calc(var(--page-layout-unit, 7px) * 6); /* 35px */
--telomere-width: 5px;
}
@container page (width <= 767px) {
.page,
.stream .page {
--page-padding-top: calc(var(--page-layout-unit, 7px) * 4); /* 28px */
--page-padding-left: calc(var(--page-layout-unit, 7px) * 3); /* 21px */
--page-padding-bottom: calc(var(--page-layout-unit, 7px) * 6); /* 42px */
}
}
@media(max-width: 767px) {
.page {
--page-padding-top: calc(var(--page-layout-unit, 7px) * 4); /* 28px */
--page-padding-left: calc(var(--page-layout-unit, 7px) * 3); /* 21px */
--page-padding-bottom: calc(var(--page-layout-unit, 7px) * 6); /* 42px */
}
}
@media(min-width: 768px) and (max-width: 991px) {
.page {
--page-padding-top: calc(var(--page-layout-unit, 7px) * 6); /* 42px */
--page-padding-left: calc(var(--page-layout-unit, 7px) * 6); /* 42px */
--page-padding-bottom: calc(var(--page-layout-unit, 7px) * 5); /* 35px */
}
}