settings
code:style.css
body {
background:
repeating-radial-gradient(
rgb(0,104,55), /*緑色*/
rgb(0,104,55) 5px,
rgb(26,26,26) 15px, /*黒色*/
rgb(26,26,26) 100px
);
/* 配色・グリッド間隔 */
--body-bg: black;
--grid-gap: 10px;
--card-bg: black;
/* フォント */
--text-font: 'Shippori Mincho', YuMincho, serif;
--code-font: 'Fira Code', monospace;
--code-bg: white;
--heading-font: 'Inter', sans-serif;
--anim-font: "Font Awesome 6 Free","Font Awesome 6 Brands";
/* グラデーション （conic で使うデータと linear で使う背景） */
--gradient-data:
--gradient-bg: linear-gradient(to right, var(--gradient-data));
}
/*カーソル（｜）の色を変更*/
.cursor {
background: #00dd00 !important; /* 好きな色に変更 */ width: 4px !important; /* 太さも同時に変えたい場合 */
}
/*カーソル色のブラウザ互換性*/
textarea,
}
/*カーソルアニメーション*/
@keyframes sbx-blink {
0%,49% { opacity: 0; }
50%,100% { opacity: 1; }
}
.cursor { animation: sbx-blink 1s steps(1) infinite; }
/*ページタイトルテキスト*/
.line.line-title .text {
text-align: center;
color:#00dd00;
}
.project-events {
display: none !important;
}
/*─────────────────────────────
1. グリッドレイアウトのベース
─────────────────────────────*/
/* ページ一覧・関連ページリスト内の ul.grid */
.page-list ul.grid,
.related-page-list ul.grid {
margin: 1;
display: grid;
grid-auto-flow: dense;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: var(--grid-gap);
}
/*─────────────────────────────
2. 各アイテムの基本サイズ
─────────────────────────────*/
.page-list ul.grid li.page-list-item,
.related-page-list ul.grid li.page-list-item {
width: 100%;
height: 100%;
margin: 0;
aspect-ratio: 10 / 9; /*グリッドの各セルのアスペクト比*/
}
/* 先頭アイテムと important タグ付きを大きく */
.page-list ul.grid li.page-list-item:first-child,
.related-page-list ul.grid li.page-list-item:first-child,
grid-column: span 2;
grid-row: span 2;
}
/*─────────────────────────────
3. アイテム内装飾
─────────────────────────────*/
/* 共通のアスペクト比＆初期 border-color */
ul.grid li.page-list-item {
aspect-ratio: 1 / 1;
--border-color: green;
}
ul.grid li.page-list-item a .icon img {
font-family: var(--anim-font);
width: 80%;
height: 80% !important;
border-radius: 5px;
margin: auto;
}
/* 先頭アイテムの見た目上書き */
ul.grid li.page-list-item:first-child {
--border-color: black !important;
}
ul.grid li.page-list-item:first-child .header {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
ul.grid li.page-list-item:first-child .title {
font-size: 2.5rem;
font-family: var(--code-font);
font-weight: 300 !important;
color: white !important;
background: none !important;
text-align: center;
height: 1.1em;
line-height: 1em;
padding-top: .1em;
}
ul.grid li.page-list-item:first-child .icon img {
filter: none !important;
}
/* icon を含む場合の調整 */
ul.grid li.page-list-item:has(.icon) img {
/* filter: saturate(0); */
}
/* member タグ */
box-shadow: none;
}
filter: none !important;
border-radius: 9999px !important;
margin-inline: auto !important;
transform: scale(.7);
transform-origin: 50% 70%;
}
/* play タグ */
width: 75%;
height: 80%;
border-radius: 9px;
transform-origin: 50% 50%;
animation: fa-spin 200s infinite linear;
margin: auto;
}
/* music タグ */
/*
--card-bg: whitesmoke;
}
*/
font-family: var(--anim-font);
width: 70%;
height: 75% !important;
border-radius: 9999px;
margin: auto;
}
/* その他のタグカラー調整 */
order: 10000;
}
order: 5000;
}
/*─────────────────────────────
4. リンク全体のボックスと hover 枠
─────────────────────────────*/
/* hover 時のSVG 波形アニメーション */
/*─────────────────────────────
ホバー時の初期状態（非表示＋アニメーション停止）
─────────────────────────────*/
ul.grid li.page-list-item a .hover::before {
content: '';
position: absolute;
inset: 0; /* 上下左右を 0 にして親要素全体を覆う */
background-image: url("data:image/svg+xml;utf8,\
<path \
d='M0,50 \
Q125,0 250,50 \
T500,50 \
T750,50 \
T1000,50' \
stroke='%2300dd00' stroke-width='15' fill='none' />\
</svg>"
); /* Data URI 化した SVG 波形 */
background-repeat: repeat-x; /* 横方向に繰り返し */
background-size: 200% 100%; /* 波幅を拡大し、動かせる余白を確保 */
animation: wave-scroll 1s linear infinite; /* アニメーション適用 */
/* アニメーションはホバー時だけ動かす */
animation-play-state: paused;
/* フェード用 */
opacity: 0;
transition: opacity 0.3s ease-in-out;
z-index: 20;
filter: blur(2px) drop-shadow(0 0 8px rgba(0, 0, 0, 0.6));
}
/*─────────────────────────────
波形：ホバー時の状態（表示＋波形アニメーション再生）
─────────────────────────────*/
ul.grid li.page-list-item a:hover .hover::before {
opacity: 0.9;
animation-play-state: running;
}
/* 背景を左から右へループ移動 */
@keyframes wave-scroll {
from { background-position-x: 0%; }
to { background-position-x: -100%; }
ul.grid li.page-list-item a .content {
font-family: var(--text-font);
height: calc(100%);
overflow: hidden;
margin: 0;
padding: 12px 12px 12px;
transition: filter 0.3s ease, margin 0.3s ease;
}
/* 波形：ホバー時にカード部分だけ彩度を０に */
ul.grid li.page-list-item a:hover .content {
filter: saturate(0) ; /* 彩度０ */
/* 必要に応じてベンダープレフィックスも */
-webkit-filter: saturate(0) brightness(50%)
/* 色付き化の下地としてセピアを100% */
sepia(100%)
/* 色相を回して青方向へ */
hue-rotate(170deg)
/* 色の鮮やかさを調整（大きいほど強い） */
saturate(250%)
/* 必要なら微調整で明るさも */
brightness(150%);
margin: 0;
}
/* グリッド描画：初期状態は透明 */
ul.grid li.page-list-item a .hover::after {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
z-index: 10;
background-image:
linear-gradient(to right, rgba(255, 255, 255,0.5) 1px, transparent 1px),
linear-gradient(to bottom, rgba(255, 255, 255,0.5) 1px, transparent 1px);
background-size: 20% 20%;
opacity: 0;
transition: opacity 0.3s ease-in-out;
}
/* グリッド描画：ホバー時に不透明にしてフェードイン */
ul.grid li.page-list-item a:hover .hover::after {
opacity: 1;
}
/*─────────────────────────────
5. pin, content, header, title, description, icon
─────────────────────────────*/
ul.grid li.page-list-item a .pin {
right: -1px;
top: -1px;
border-radius: 0 0 0 8px;
z-index: 100;
background: linear-gradient(
45deg,
var(--border-color) 50%,
var(--body-bg) 50%
);
}
ul.grid li.page-list-item a .header {
border-top: none;
padding: 0 0 12px;
z-index: 1;
}
ul.grid li.page-list-item a .title {
font-weight: 700 !important;
font-size: 14px;
font-family: var(--heading-font);
background: black;
display: inline;
padding: 0 2px;
border-radius: .2em;
}
ul.grid li.page-list-item a .description {
padding: 0;
}
ul.grid li.page-list-item a .description code {
padding: 0 3px;
border-radius: 3px;
}
ul.grid li.page-list-item a img.inline-icon {
border-radius: 50%;
padding: 0 2px;
}
ul.grid li.page-list-item a .icon {
padding: 0;
margin-inline: 0;
}
ul.grid li.page-list-item a .icon img {
position: absolute;
object-fit: cover;
height: 100%;
inset: 0;
border-radius: 4px;
}
/*─────────────────────────────
箇条書きのドットを控えめにする
─────────────────────────────*/
.line .indent-mark .dot{
border-radius: .1em;
height: .2em;
width: .3em;
}
.line .indent-mark .c-1 + .dot {
opacity: 0.8;
}
.line .indent-mark .c-2 + .dot {
opacity: 0.6;
}
.line .indent-mark .c-3 + .dot {
opacity: 0.4;
}
.line .indent-mark .c-4 + .dot {
opacity: 0.2;
}
/*─────────────────────────────
[! 赤くする]
[# 緑くする]
[| コメント]
[" 区切り線]
─────────────────────────────*/
.deco-\# {
color: inherit;
background: linear-gradient(transparent 90%, rgba(205, 0, 205, .9) 0%);
}
.deco-\! {
padding: 0.1em 0.5em 0.1em 0.5em;
}
.deco-\~ {
font-size:0.8em;
}
/* Custom Syntax */
.deco-\| {
font-size: 0.8em;
--page-link-color: currentColor;
}
.deco-\" {
color: white;
border-radius: 999px;
padding: 0 1em;
font-family: var(--code-font);
font-family: .9em;
&:after {
content: '';
position: absolute;
height: 1px;
top: 50%;
left: 3.2em;
width: 100%;
}
}
/* セル間に線を入れる */
.table-block .cell {
/* 全てのセルの右と下 */
}
.table-block .cell:first-child {
/* 1列目のセルの左 */
}
.section-title + .line .table-block .cell {
/* 1行目のセルの上 */
}
/* 1行目を太字、中央揃え */
.section-title + .line .table-block .cell {
font-weight: bolder;
text-align: center;
}
/* テーブルがはみ出てしまう場合に横スクロールするように */
.page { /* pageにしないとテロメアが見えない */
overflow-x: scroll;
}
.page-list-item:is(
){
display: none !important;
}
/*Streamにアクセスするボタン*/
.navbar .navbar-menu>li.stream-btn,
.navbar .navbar-menu>li.stream-btn.hidden-xs
{ display: block !important; }
/* モバイル web でテロメアを表示する(行のパーマリンクを表示させることが出来るように) */
@media (max-width: 767px) {
.line {
.telomere {
display: inline;
}
}