settings
色んな方のcssを参考にしています
このプロジェクトは以下のサイトをrefにして組んでいます
---
code:style.css
/*──────────────────────────────
@imports & :root
──────────────────────────────*/
@font-face {
font-family: 'Slash';
src: local('Noto Sans JP');
unicode-range: U+002F;
}
:root{
/* Colors */
--color-bg-rgb: 255, 255, 255;
--color-gray-light: #ccc; --color-gray-medium: #BBB; /* Layout */
--max-width: 1300px;
--content-width: 862px;
--page-offset: 30px;
--navbar-height: 145px;
--grid-gap: 30px;
/* Fonts & sizes */
--font-main: 'Slash', Helvetica, 'Inter', 'Noto Sans JP', 'Noto Sans SC', sans-serif;
--font-sans: Helvetica, 'Noto Sans JP', sans-serif;
--font-inter: 'Inter', 'Noto Sans JP', 'Noto Sans SC', sans-serif;
--font-serif: "Noto Serif JP", serif;
--font-size-base: 14px;
--font-size-small: 11px;
--font-size-medium: 13px;
--line-height-base: 2.25em;
--title-size: 1.73em;
}
/*──────────────────────────────
Global body & small helpers
──────────────────────────────*/
body{
--search-form-icon-color: var(--color-text);
--page-link-color: var(--color-primary);
--page-link-hover-color: var(--color-primary);
--card-description-link-color: var(--color-primary);
--relation-label-links-bg: var(--color-primary);
--empty-page-link-color: var(--color-accent);
--empty-page-link-hover-color: var(--color-accent);
--relation-label-empty-bg: var(--color-accent);
--line-title-color: var(--color-text);
--tool-color: var(--color-text);
--telomere-border: var(--color-gray-light);
--telomere-unread: var(--color-primary);
--telomere-updated: var(--color-text);
--card-bg: var(--color-bg);
background-color: var(--color-bg);
text-underline-offset: 2px;
padding-right: unset !important;
color: var(--color-text);
}
/*──────────────────────────────
Layout
──────────────────────────────*/
.app { padding-top: 0 !important; }
.container{
max-width: none !important;
justify-content: center !important;
width: var(--max-width) !important;
margin: 0 auto !important;
padding: var(--navbar-height) 0 0 !important;
}
.page{
background-color: var(--color-bg) !important;
padding: 0;
box-shadow: none !important;
border: none !important;
}
.page-column { margin: 0 !important; gap: 0; }
.col-page{
width: var(--content-width);
padding: 0 !important;
position: relative;
left: var(--page-offset);
}
.links-container { width: var(--content-width) !important; }
/*──────────────────────────────
Selection & custom selections
──────────────────────────────*/
::selection{
color: var(--color-bg);
background-color: var(--color-black);
}
.selections .selection{
position: absolute;
z-index: 100;
pointer-events: none;
top: 0; left: 0;
opacity: 1;
background-color: transparent;
backdrop-filter: grayscale(1) invert(1);
}
/* keep transparent when window doesn't have focus */
background-color: transparent;
}
/* permalink line special */
.line.permalink{
background-color: var(--color-black);
color: var(--color-selection);
& .link,
color: var(--color-selection);
}
}
/*──────────────────────────────
Typography
──────────────────────────────*/
.lines, textarea, contenteditable="true", .editor textarea, .editor contenteditable="true", .text-input, .description, .dropdown-menu, .grid li.relation-label a .title, strong, b, em{ font-family: var(--font-main);
font-optical-sizing: auto;
font-kerning: auto;
font-style: normal;
letter-spacing: .03em;
}
/* body text scaling */
color: var(--color-text) !important;
line-height: var(--line-height-base) !important;
font-size: var(--font-size-base) !important;
}
/* Titles */
.line-title{
font-family: var(--font-inter);
font-size: var(--title-size) !important;
line-height: 1.5em !important;
font-weight: 600;
font-feature-settings: "palt" 1;
& .text { padding-bottom: 30px !important; }
}
.line .line-title .text { padding: 0 !important; margin-bottom: 30px; }
/* small text blocks */
.grid li.page-list-item a .description,
.related-page-list .grid li.page-list-item a .description{
line-height: 2.08 !important;
font-size: var(--font-size-small) !important;
}
.related-page-list .grid li.page-list-item a .description{ line-height: 1.84 !important; }
/* dropdowns & small UI text */
.dropdown-menu, .grid li.relation-label a .title { font-size: var(--font-size-medium) !important; }
/* quotes */
.line .quote{
font-family: var(--font-serif);
font-weight: 500;
margin-left: 1em;
background-color: transparent;
padding: 0 3em 0 2em;
}
div.lines > div.line.quote-line:first-child .text,
div.line:not(.quote-line) + div.line.quote-line .text {
padding-top: 10px;
}
div.line.quote-line:not(:has(+ div.line.quote-line)) .text {
padding-bottom: 10px;
}
strong, b { font-weight: 600 !important; }
em { font-style: italic !important; }
/*──────────────────────────────
Links
──────────────────────────────*/
.line a.page-link{
text-decoration: underline;
text-decoration-thickness: from-font;
}
.line a.link { text-decoration-thickness: from-font; }
/* compact grid text */
.grid li.page-list-item a { word-break: break-all; line-height: 12px; }
/*──────────────────────────────
Project home / small UI bits
──────────────────────────────*/
.project-home, .project-home .title{
font-family: var(--font-sans);
font-size: var(--font-size-small);
letter-spacing: .03em;
font-weight: 400;
font-kerning: auto;
text-transform: uppercase;
color: var(--color-text) !important;
pointer-events: auto;
height: 30px;
margin-top: 2px;
background-color: transparent !important;
display: flex;
align-items: center;
}
.project-home:hover .title { text-decoration: underline; }
/* special chars vertical adjust */
/*──────────────────────────────
Code block style / visual code lines
──────────────────────────────*/
/* unify selectors referencing code fence '|' marker */
.line:has(span.char-index.c-0data-char="|"), .line:has(.deco-\|) { font-size: var(--font-size-small) !important;
line-height: 1.5em !important;
color: var(--color-text);
background-color: var(--color-gray-bg);
padding: 2px 8px 2px 2em;
position: relative;
&::before{
content: "";
position: absolute;
left: 0; top: 0; bottom: 0;
width: 2px;
background: var(--color-gray-medium);
}
}
/*──────────────────────────────
Animations
──────────────────────────────*/
@keyframes blink{ 0%,49%{opacity:0;} 50%{opacity:1;} }
.cursor{ animation: blink 1s infinite; }
/*──────────────────────────────
Scrollbar
──────────────────────────────*/
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background-color: var(--color-white); }
::-webkit-scrollbar-thumb{ background-color: var(--color-gray-light); border-radius: 0; }
/*──────────────────────────────
Related Pages / Page List / Grid common
──────────────────────────────*/
/* compact related page spacing */
.related-page-list{ margin-top:0; .links-container{ gap:60px; } }
li.pin:not(:has(~ li.pin)){ margin-bottom:30px; }
/* page-list line */
.page-list{
position: relative;
&::before{
content: "";
position: absolute;
width: var(--max-width);
height: 1px;
background-color: var(--color-text);
top: 380px;
left: 50%;
transform: translateX(-50%);
z-index: 1;
pointer-events: none;
}
}
/* hide specific title */
/* page list items general compacting */
ul.grid li.page-list-item{
a .content:has(.description){
height: 100%;
margin: 0;
padding-top: 0;
& .header{ padding: 0 0 16px; text-align: right; }
& .title{ background:none; }
}
a:hover{
box-shadow:none !important;
border-bottom:none !important;
& .content:has(.description) .title{ text-decoration: underline; }
}
}
/* remove pin backgrounds */
.grid li.page-list-item a .pin,
.grid li.page-list-item.pin::after { background: transparent; background-image:none; display:none; }
/* hide private pages */
/* icon sizing for relation labels */
.grid li.relation-label a .icon-lg{
width:36px; height:24px !important; line-height:36px; font-size:24px; display:inline-block;
}
.page-menu .tool-btn{border-radius: 0;}
/*──────────────────────────────
Editor & small layout bits
──────────────────────────────*/
.editor{ border-bottom:1px solid var(--color-black) !important; }
.related-page-list-search, .random-jump-button{ display:none !important; }
.related-page-list .toolbar{ margin-bottom:0; }
/* telomere & indent visuals */
.telomere{ display:block; }
.line .telomere .telomere-border{ border-width: 0 0 0 1px !important; left: -30px; }
/* indent marker dot */
.app .line .indent-mark .dot{
height:2px; width:8px; background-color:var(--color-gray-light); border-radius:0; display:inline-block; vertical-align:middle; margin-top:0.3em; right:7px; top:11px;
}
/* number-list / quote-line dots */
.line.number-list .dot, .line.quote-line .dot{
top:12.5px !important; height:2px !important; border-radius:unset !important; background-color:var(--color-black) !important;
}
/* line internals */
.lines .line{ .indent-mark{ height:100%; } .table-block .indent-mark{ height:auto; } }
.indent-mark{
& .pad{ height:100% !important; overflow:unset !important; }
& span:not(:nth-last-child(-n+2)) .pad{ border-right:1px solid var(--color-gray-dark); }
}
.line:has(.quote) .indent-mark span .pad{ border-right-color: transparent !important; }
.line:not(.cursor-line) .quote:has(.modal-image) > .tag{ display:none; }
/*──────────────────────────────
Images & image-line sizing
──────────────────────────────*/
.line img.icon{ top:-0.1em; }
.line .image{
margin:2.5px 0;
max-width:100%;
max-height:484.875px;
display:inline-block;
vertical-align:top;
}
/* small image spacing for inline groups */
.text > span > span:has(.modal-image) ~ span:has(.modal-image) .image,
.indent > span:has(.modal-image) ~ span:has(.modal-image) .image,
.quote > span:has(.modal-image) ~ span:has(.modal-image) .image{ margin-left:5px; }
max-width: calc((100% - (var(--n) - 1) * 5px) / var(--n));
}
/* the .image-line-N classes set --n */
.line.image-line-2{ --n:2; }
.line.image-line-3{ --n:3; }
.line.image-line-4{ --n:4; }
aspect-ratio: 16 / 9;
object-fit: cover;
height: 241.031px;
}
display: none;
}
/*──────────────────────────────
Image Modal tweaks
──────────────────────────────*/
.full-content-modal .modal-body .full-content{
display:inline-block;
pointer-events:none !important;
height:80vh;
width:auto;
object-fit:contain;
}
.full-content-modal .modal-body img.full-content,
.full-content-modal .modal-body svg.full-content{ background:none !important; }
/* hide draw button */
button.btn.btn-primary.draw-button{ display:none; }
/* modal backdrop / fade transitions */
.modal-backdrop.fade{ opacity:0; }
.fade{ transition: opacity 0s linear; }
.modal.fade .modal-dialog{ transition: transform 0s ease-out; }
.modal-backdrop.in{ opacity:.9; }
/*──────────────────────────────
Level-based image sizing
──────────────────────────────*/
.level-1 img{ width:100%; max-height:none !important; }
.level-2 img{ width:60%; max-height:none !important; }
.level-3 img{ width:70%; max-height:none !important; }
.level-4 img{ width:80%; max-height:none !important; }
.level-5 img{ width:90%; max-height:none !important; }
.level-6 img{ width:100%; max-height:none !important; }
/*──────────────────────────────
Decorative lines / deviders
──────────────────────────────*/
.line:not(.cursor-line) .deco:has(.deco-\~){
display:flex; align-items:center; text-align:center; color:transparent;
&::before, &::after{
flex-grow:1; min-width:30px; content:""; border-top:1px solid var(--color-black); margin:auto;
}
&::before{ margin-right:-50px; } &::after{ margin-left:-50px; }
&:has(.deco-\-){
&::before, &::after{ border-style: dashed none none; }
}
& .deco-\-{ text-decoration:none; color:transparent; }
}
/* three-hyphen line style */
display:flex; align-items:center; text-align:center;
&:not(.cursor-line){ height:28px;
&::after{ flex-grow:1; content:""; border-top:1px solid var(--color-black); }
}
}
}
/*──────────────────────────────
Hash tags
──────────────────────────────*/
background-color: #EDEFF2; border-radius:2px; padding:2px 6px; margin:0 2px; text-decoration:none; border:1px solid var(--color-border); }
background-color:#DFE2E6; color:var(--color-text) !important; border-color:#B0B4BA;
}
/*──────────────────────────────
Tables & minor text highlight
──────────────────────────────*/
.table-block .table-block-start{ background-color: rgba(0,0,0,0.1); }
.table-block .cell{ border-top: 1px solid currentColor; }
/* highlight strong inline */
.line strong:not(class){ background: linear-gradient(transparent 60%, #ffc414 0%); } /* remove dot on quote lines */
.line.quote-line .dot{ display:none !important; }
/*──────────────────────────────
External link icon (Material Symbols)
──────────────────────────────*/
.line span:not(.modal-image):not(.pointing-device-map) > a.link:not(.icon)::after{
font-family: Material Symbols Sharp;
font-style: normal; font-weight:400; text-transform:none; white-space:nowrap; word-wrap:normal; direction:ltr;
-webkit-font-feature-settings: "liga"; -webkit-font-smoothing: antialiased;
content: "arrow_outward"; vertical-align: middle; display: inline-block;
}
/*──────────────────────────────
Video embeds
──────────────────────────────*/
.iframe-video-player iframe{
display:inline-block; vertical-align:middle; width:100%; height:auto; aspect-ratio:16/9; max-height:40vw; border:0;
}
iframe.vimeo{ background: var(--color-black); }
/*──────────────────────────────
Navbar / row / brand / menu
──────────────────────────────*/
.navbar{
background-color: rgba(var(--color-bg-rgb), .8);
box-shadow: none !important;
border-bottom: none !important;
}
/* header row sizing */
.row{
background-color: transparent !important;
max-width: none !important;
width: var(--max-width) !important;
height: var(--navbar-height) !important;
padding: 75px 0 30px !important;
margin: 0 auto !important;
}
/* caret color */
.kamon-caret-down, .navbar .navbar-brand .kamon-caret-down{ color: var(--color-black) !important; }
/* dropdown menu styles */
ul.dropdown-menu{
max-width: none !important;
width: 100%;
box-shadow: none;
border: none;
border-radius: unset;
pointer-events: auto;
background-color: var(--color-bg);
}
ul.global-menu.dropdown-menu, .navbar .dropdown-menu-right{ min-width: max-content; box-shadow: none; }
/* search form input */
.search-form .form-group input{
background-color: transparent !important;
border-radius: 0; border: none; border-bottom: 1px solid var(--color-black) !important;
height: 30px; pointer-events: auto;
}
/* navbar items */
.navbar .navbar-menu > li{
pointer-events: auto; min-width:30px;
& .dropdown-toggle > .icon{ border:none; border-radius:0; width:30px; height:30px; }
}
/* brand icon */
.brand-icon{
width:40px; height:40px; background: transparent var(--logo-url) no-repeat center / cover;
border:2px solid transparent !important; border-radius:25% !important; display:none;
& svg{ display:none; }
}
/* hamburger / global-menu button */
div.col-brand.dropdown.global-menu-button{
& a.navbar-brand{
justify-content:left; display:inline; margin-right:18px; pointer-events:auto;
& span.kamon.kamon-caret-down{
background:var(--color-black) !important; border:none !important; box-shadow:none !important; width:20px; height:1px;
display:inline-block; position:relative; cursor:pointer; vertical-align:middle; margin-right:0; padding:0; box-sizing:border-box;
transform:none !important; transition: background-color 0.15s ease-in-out, transform 0.15s ease-in-out, width 0.15s ease-in-out;
&::before, &::after{
content:""; position:absolute; left:0; width:20px; height:1px; background-color:var(--color-black); transform:none !important;
transform-origin:center; transition: transform 0.15s ease-in-out, top 0.15s ease-in-out, bottom 0.15s ease-in-out;
}
&::before{ top:-6px; } &::after{ bottom:-6px; }
}
}
&.open a.navbar-brand span.kamon.kamon-caret-down{
background-color: transparent !important; transform:none !important;
&::before{ top:0 !important; height:.5px !important; transform: rotate(45deg) !important; }
&::after{ bottom:0 !important; height:.5px !important; transform: rotate(-45deg) !important; }
}
}
/* new button (page creation) */
.new-button{
background-color: transparent !important;
margin-right: 18px;
& .horizontal-line, & .vertical-line{ display:none; }
&::after{
content:"page"; display:flex; align-items:center; justify-content:center; width:100%; height:100%;
font-family: var(--font-sans); font-weight:400 !important; letter-spacing:.03em !important; font-size:var(--font-size-small);
color:var(--color-text); pointer-events:auto; text-align:center; line-height:normal; white-space:nowrap;
}
&:hover::after{ text-decoration: underline; }
}
/* page menu sticky */
.page-menu{ position: sticky !important; top: var(--navbar-height); }
.btn.tool-btn.dropdown-toggle{ display:none !important; }
/* expandable menu */
.expandable-menu{
top:12px; backdrop-filter:none; box-shadow: 0 0 0 1px var(--color-black); border-radius: 1000px 0 0 1000px;
& .toggle-button{ opacity:1; color:var(--color-black); }
& .page-menu .tool-btn{ color:var(--tool-color); }
}
/* highlight markers in menus */
.global-menu li a.updated, .global-menu li a.highlight, .user-menu li a.updated, .user-menu li a.highlight{ border-left: 2px solid var(--unread-color, var(--color-primary)); }
.dropdown-menu > li > a.selected, data-hover-visible .dropdown-menu > li > a.selected, .user-menu li a.highlight{ color: var(--unread-color, var(--color-primary)); } .quick-launch{ margin-bottom:0; }
.grid li.page-list-item a .hover{ background-color: transparent; }
.status-bar > div{ border-style: dashed none none dashed; font-family: var(--code-font); }
/*──────────────────────────────
Global menu search tweaks
──────────────────────────────*/
.global-menu{
.project-list-filter{
& input{ display:block; font-size:14px; flex-grow:1; padding-left:36px !important; }
& .kamon{ position:absolute; left:26px; }
& a{ padding:0; overflow: visible !important;
&:focus-within{ box-shadow:none; background-color: transparent !important; }
}
}
}
/* grid system cleanup */
.grid li.splitter.splitter{ display:none; }
/* unify page-list and related page-list grid behavior */
:is(.page-list, .related-page-list) ul.grid{
margin:0; display:grid; grid-auto-flow:dense;
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
gap: var(--grid-gap) !important;
}
/* page-list item layout within ul.grid */
ul.grid{
--border-color: var(--color-black);
.page-list & li.page-list-item{
height:160px; width:160px; aspect-ratio:auto; grid-column: span 1; grid-row: span 1;
&:first-child, &data-page-links~="'_'"{ grid-column: span 2; grid-row: span 2; width:350px; height:auto; aspect-ratio:1/1; } &.pin{ order:-3; }
}
/* spacer items */
width:auto; opacity:0; pointer-events:none; cursor:default; order:-2 !important;
}
/* access counter special case */
grid-column: span 2; width:auto !important; order:-1 !important;
& .title{ display:none; }
& a .icon img{ width:100% !important; object-fit: contain; }
}
/* item link styles */
& li.page-list-item{
&:first-child{ --border-color: var(--color-black) !important;
& .header{ height:100%; display:flex; align-items:center; justify-content:center; }
& .title{
font-family: var(--font-inter) !important; font-weight:400 !important; font-size:var(--font-size-medium);
letter-spacing:0.03em; color:var(--color-white) !important; background:none !important;
text-align:center; line-height:1.6; overflow:visible !important; margin:auto !important; transform: translateY(12px);
}
& .icon img{ filter:none !important; }
}
}
& li.page-list-item a{
position: relative; box-shadow: inset 0 0 0 0 rgba(0,0,0,1); overflow:hidden; height:100%; border-radius:0; border:none !important;
&:has(.icon){ box-shadow:none; }
& .content{
font-family: var(--text-font); height: calc(100% - 14px); border-radius:0; overflow:hidden; margin:0 5px 5px; padding-top:4px;
}
& .header{ border-top:none; padding:0 0 12px; z-index:30; position:relative; }
& .title{
font-family: var(--font-sans) !important; font-weight:400 !important; font-size:var(--font-size-small);
letter-spacing:.03em; line-height:14px; color:var(--color-text);
background: linear-gradient(var(--color-white) 0 0) left / 100% .95em no-repeat;
display:inline; padding:0; border-radius:0; position:relative; z-index:30;
}
& .description{ padding:0;
& code{ padding:0 3px; border-radius:3px; }
}
& img.inline-icon{ border-radius:0; width:auto; padding:0; }
& .icon{
padding:0; margin-inline:0;
& img{ position:absolute; object-fit:cover; height:100%; inset:0; border-radius:0; transition: transform 0.2s ease; }
}
&::before{
content:""; position:absolute; inset:0; background-color: rgba(255,255,255,0); mix-blend-mode:screen;
transition: background-color 0s ease, backdrop-filter 0s ease; z-index:10; pointer-events:none;
}
&:hover{
&::before{ background-color: rgba(255,255,255, .6); }
& .icon img{ transform: scale(1.0); }
}
}
}
/*──────────────────────────────
Related page list specifics
──────────────────────────────*/
.related-page-list{
padding:0; display:flex; flex-direction:column; gap:var(--grid-gap);
& .grid li{ height:100%; aspect-ratio:1/1; }
& .grid li.relation-label a{
aspect-ratio:1/1; border-radius:0; background-color:var(--color-text); display:flex; flex-direction:column; justify-content:center; border:0 solid var(--color-black);
background-image: linear-gradient(45deg, #333333 6.25%, transparent 6.25%, transparent 50%, #333333 50%, #333333 56.25%, transparent 56.25%); background-size: 8px 8px;
& :is(.title, .icon-lg){ color: var(--color-white); }
}
& li.relation-label:is(.links, .project-links) a{ background-image: none; }
}
/*──────────────────────────────
Mobile Responsive (single consolidated block)
──────────────────────────────*/
@media screen and (max-width: 768px){
html, body, .page, .content{ margin:0; padding:0; box-sizing:border-box; overflow-x:hidden; }
.container, .row, .col-page, .links-container{ width:95% !important; }
.row{ height:auto !important; padding:20px 0 !important; }
.app{ padding-top:0 !important; }
.container{ padding-top:80px !important; }
.col-page{ left:0; }
/* Mobile grid layout: unify page-list behaviours */
.page-list{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; width:100%; margin:0 auto; box-sizing:border-box;
&::before{ display:none; }
& ul.grid{
display:grid !important; gap:10px !important;
& > .page-list-item{ grid-column:auto !important; grid-row:auto !important; width:auto !important; height:auto !important; aspect-ratio:1/1 !important; }
}
}
:is(.page-list, .related-page-list) ul.grid{
grid-auto-flow: row !important;
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
gap:10px !important;
& > li.page-list-item.pin + li.page-list-item:not(.pin){ grid-column-start:1 !important; }
}
/* hide spacers */
.related-page-list .links-container{ gap:30px; }
/* images inside grid for mobile */
.iframe-video-player iframe{ max-height:50vw; }
/* condense typography slightly */
.brand-icon{ display:block; width:30px; height:30px; pointer-events:auto; }
grid-column: span 1 !important; width:auto !important; order:-1 !important;
& .title{ display:none; }
& a .icon img{ width:100% !important; object-fit:contain; }
}
.expandable-menu, .expandable-menu-margin{ display:none; }
.app .line .indent-mark .dot{ margin-top:0.1em; right:4.5px; }
}
/*──────────────────────────────
Small overrides & remaining tweaks (kept compact)
──────────────────────────────*/
/* hide certain toolbar buttons & UI extras everywhere */
.expandable-menu, .expandable-menu-margin{ /* kept for clarity */ }
/* media symbol fallback & misc */
.modal-backdrop.in{ opacity:.9; }
.full-content-modal .modal-body .full-content{ pointer-events:none; }
.related-page-list-search, .random-jump-button, .status-bar > div, button.btn.btn-primary.draw-button{ /* intentionally hidden */ }
/* ensure .line .quote tag hidden when image modal present */
.line:not(.cursor-line) .quote:has(.modal-image) > .tag{ display:none; }
/* final safety: ensure page menu tools hidden if necessary */
.btn.tool-btn.dropdown-toggle{ display: none !important; }
/*.project-events{ display: none !important; }*/
/* end of file */
![https://pbs.twimg.com/profile_images/1871168869508988928/ow08AHvm_400x400.jpg");](https://pbs.twimg.com/profile_images/1871168869508988928/ow08AHvm_400x400.jpg");){kind=link}