Settings
code:style.css
/* Scrapbox / Cosense カスタムCSS
* レイアウト部分（保持したい）とインタラクション部分（カスタムしたい）を分離
*/
:is(.page-list, .related-page-list) ul.grid {
display: grid;
grid-auto-flow: dense;
grid-template-columns: repeat(auto-fill, minmax(169px, 1fr));
gap: var(--grid-gap);
}
ul.grid li.page-list-item {
aspect-ratio: 10 / 11;
margin: 0;
}
/* first-child または important のページは2倍サイズに */
.page-list ul.grid li.page-list-item:nth-of-type(1) {
aspect-ratio: 5 / 1;
grid-column: span 2;
grid-row: span 1;
}
.page-list ul.grid li.page-list-item:nth-of-type(2),
aspect-ratio: 185.5 / 100;
grid-column: span 2;
grid-row: span 1;
}
.page-list ul.grid li.page-list-item:nth-of-type(3) {
aspect-ratio: 1 / 0;
grid-column: span 2;
grid-row: span 1;
}
display: none;
}
.page-list ul.grid li.page-list-item a {
background-color: rgba(255, 255, 255, 0.6);
backdrop-filter: blur(0px);
position: relative;
box-shadow: inset 0 0 0 1px black;
overflow: hidden;
border-radius: 8px;
}
.page-list ul.grid li.page-list-item:nth-of-type(n+3) a {
background-color: rgba(255, 255, 255, 0.6);
backdrop-filter: blur(0px);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
transition: transform 0.25s ease-out;
}
background-color: rgba(255, 255, 255, 0.6);
backdrop-filter: blur(8px);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
transform: scale(1.04) rotate(-3deg) translate(-5px, -6px);
transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1);
}
background-color: rgba(255, 255, 255, 0.6);
backdrop-filter: blur(8px);
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25);
transform: scale(1.02) rotate(-2deg) translate(-5px, -4px);
transition: transform 0.2s ease-in-out;
}
.page-list ul.grid li.page-list-item:nth-of-type(1) .pin,
.page-list ul.grid li.page-list-item:nth-of-type(2) .pin {
display: none;
}
.page-list ul.grid li.page-list-item:nth-of-type(1) a,
.page-list ul.grid li.page-list-item:nth-of-type(2) a {
box-shadow: var(--highlight-card-border);
}
.page-list ul.grid li.page-list-item:nth-of-type(1) .title,
.page-list ul.grid li.page-list-item:nth-of-type(2) .title {
font-size: var(--highlight-title-size);
}
.page-list ul.grid li.page-list-item:nth-of-type(1) .description,
.page-list ul.grid li.page-list-item:nth-of-type(2) .description {
font-size: var(--highlight-description-size);
color: var(--highlight-description-color);
}
.page-list ul.grid li.page-list-item .content {
font-size: 14px;
line-height: 1.3;
height: calc(14px * 1.3 * 10.3);
overflow: hidden;
color: var(--page-text-color);
}
.page-list ul.grid li.page-list-item .content .header {
padding: 6px 16px;
border-top: 8px solid transparent;
color: var(--page-text-color);
}
.page-list ul.grid li.page-list-item .content .description {
padding: 6px 16px;
color: var(--page-text-color);
}
.links-container ul.grid li.page-list-item a {
background-color: rgba(255, 255, 255, 0.6);
backdrop-filter: blur(0px);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
position: relative;
overflow: hidden;
border-radius: 8px;
transition: transform 0.25s ease-out;
}
.links-container ul.grid li.page-list-item a:hover {
background-color: rgba(255, 255, 255, 0.6);
backdrop-filter: blur(8px);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
transform: scale(1.02) rotate(-1deg) translate(-2px, -4px);
transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1);
}
.links-container ul.grid li.page-list-item .content {
font-size: 14px;
line-height: 1.3;
height: calc(14px * 1.3 * 10.3);
overflow: hidden;
color: var(--page-text-color);
}
.links-container ul.grid li.page-list-item .content .header {
padding: 6px 16px;
border-top: 8px solid transparent;
color: var(--page-text-color);
}
.links-container ul.grid li.page-list-item .content .description {
padding: 6px 16px;
color: var(--page-text-color);
}
.brand-icon path {
fill: black;
stroke: white;
stroke-width: 0.5px;
vector-effect: non-scaling-stroke;
transform: scale(0.8);
transform-origin: 50% 50%;
}
.navbar {
font-family: var(--heading-font);
padding: 8px 12px 8px;
background-color: transparent;
background-size: 100% 4px;
background-repeat: repeat-x;
border-bottom: none;
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
padding: 2px 6px;
margin: 0 6px 0 2px;
font-size: 0.8em;
font-weight: 600;
border-radius: 1px;
transition: .3s;
-webkit-transform: scale(1);
transform: scale(1);
}
}
/* ========== (2) インタラクション・書体・色など（カスタム対象） ========== */
body {
background-color: var(--background-color);
--text-font: 'Zen Kaku Gothic New', sans-serif;
--heading-font: 'Zen Kaku Gothic New', sans-serif;
--code-font: 'Zen Kaku Gothic New', sans-serif;
--title-font: "Gowun Dodum", 'Zen Kaku Gothic New', serif;
--title-weight: 400;
--title-font-size: 20px;
--page-text-color: black;
--grid-gap: 8px;
--navbar-bg: white;
--highlight-description-size: 12px;
}
.page {
background-color: transparent;
}
.editor {
font-family: var(--text-font);
}
.project-home .title {
font-family: var(--title-font);
font-weight: var(--title-weight);
font-size: var(--title-font-size);
}
.page-list, .related-page-list, ul.grid li.page-list-item {
font-family: var(--text-font);
}
ul.grid li.page-list-item .title {
font-family: var(--heading-font);
color: var(--page-text-color);
}
.navbar-menu > li > a {
background: var(--navbar-bg);
}
/* ========== (3) Scrapboxの装飾記法 ========== */
.deco-\*{
background-image: linear-gradient(transparent 60%, #F5EE5B 60%); background-repeat: no-repeat;
background-size: 100% 100%; /* 必要に応じて調整 */
}
.deco-\**{
background-image:none;
}
.line .image {
border-radius: 4px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
display: inline-block;
margin: 0.5em 0;
}
.level-1 img { width: 16.7%; height: auto; max-height: none !important; }
.level-2 img { width: 33.3%; height: auto; max-height: none !important; }
.level-3 img { width: 50%; height: auto; max-height: none !important; }
.level-4 img { width: 66.7%; height: auto; max-height: none !important; }
.level-5 img { width: 83.3%; height: auto; max-height: none !important; }
.level-6 img { width: 100%; height: auto; max-height: none !important; }