Settings
code:style.css
.page-list-item.pin + .page-list-item:not(.pin) {
clear: both;
}
code:style.css
.navbar .navbar-menu>li.stream-btn,
.navbar .navbar-menu>li.stream-btn.hidden-xs
{ display: block !important; }
code:style.css
.navbar-form .dropdown.open .dropdown-menu {
min-width: 100%;
max-height: calc(100vh - 130px) !important;
overflow-y: auto;
}
code:style.css
@media screen {
.quick-launch .left-box {
position: fixed;
top: -2px;
left: 40px; /* brand-iconの幅に応じて変えてください */
z-index: 1000;
}
}
@media screen and (min-width: 768px) and (max-width: 991px) {
.quick-launch .left-box {
left: 55px;
}
}
@media screen and (min-width: 992px) and (max-width: 1260px) {
.quick-launch .left-box {
left: 70px;
}
}
@media screen and (min-width: 1261px) {
.quick-launch .left-box {
left: calc((100% - 1280px)/2 + 80px);
}
}
code:style.css
.line.number-list .dot {
background-color: transparent !important;
display: list-item;
}
.line.number-list .dot::before {
display: block;
position: absolute;
font-family: 'Font Awesome 5 Free';
top: -11px;
content: '\f292'; /* # */
font-weight: 900;
font-size: 11px;
opacity: 0.0;
}
.line.number-list .c-0 + .dot::before {
opacity: 1.0;
}
.line.number-list .c-1 + .dot::before {
opacity: 0.8;
}
.line.number-list .c-2 + .dot::before {
opacity: 0.6;
}
.line.number-list .c-3 + .dot::before {
opacity: 0.4;
}
.line.number-list .c-4 + .dot::before {
opacity: 0.2;
}
code:style.css
.line .deco-\. {
font-size: .8em;
position: relative;
top: -0.5em;
}
.line:not(.cursor-line) .deco-\. a:is(.page-link:not(.icon), .link) span:not(.empty-char-index) + span + span ~ span {
display: inline-block;
width: 0;
text-indent: -9999px;
}
.line:not(.cursor-line) .deco-\. .page-link:not(.icon) span.empty-char-index ~ span.char-index {
display: inherit;
width: inherit;
text-indent: inherit;
}
.line:not(.cursor-line) .deco-\. a.page-link:not(.icon) span.empty-char-index + span::before {
content: "#";
}
.line .deco-\. :is(.page-link:not(.icon), .link)::before {
display: inline-block;
min-width: 1.15em;
padding-left: 1px;
/* padding: 0 1px; */
font-family: "Font Awesome 5 Free","Font Awesome 5 Brands";
text-align: center;
vertical-align: middle;
font-weight: 900;
content: "\f02d";
}
/* 斜体を取り消す */
.line .deco-\..deco-\/ {
font-style: initial;
}
.line .deco-\..deco-\/ :is(.page-link:not(.icon), .link)::before {
font-weight: 400;
content: "\f15c";
}
code:style.css
.line .deco-\/ img.icon {
margin: 3px 0;
max-width: 100%;
max-height: 300px;
height: revert;
}
.line .deco-\/.deco-\* img.icon {
margin: 3px 0;
max-width: 95%;
max-height: none;
height: revert;
display: inline-block;
vertical-align: middle;
}
code:style.css
.deco-\" {
border-radius: .2em;
padding: 0 .4em;
background-color: rgba(128,128,128,0.1);
font-size: 95%;
font-style: italic;
}
.line:not(.cursor-line) .deco-\"::before {
font-size: 85%;
/* font-family: 'FontAwesome'; */
font-family: 'Font Awesome 5 Free';
font-weight: 900;
content: '\f10d';
position: relative;
top: -0.5em;
left: -0.2em;
}
dark themeのweb browserではdefault-darkthemeを使う
code:style.css
@media (prefers-color-scheme: dark) {
body {
--navbar-bg: rgba(55, 59, 68, 0.3);
--navbar-icon-color: #fff; --search-form-bg: rgba(255, 255, 255, 0.13);
--search-form-icon-color: #fff; --search-form-icon-focus-color: #4a4a4a; --card-hover-bg: rgba(0, 0, 0, 0.1);
--card-active-bg: rgba(229, 229, 229, 0.1);
--card-description-code-color: #ccc; --card-box-shadow-color: #000; --card-box-shadow: 0 2px 0 var(--card-box-shadow-color);
--card-box-hover-shadow: 0 2px 0 rgba(0, 0, 0, 0.23);
--relation-label-empty-text: #fff; --new-button-vertical-color: #fff; --new-button-horizontal-color: #fff; --page-text-color: rgba(255, 255, 255, 0.87);
--line-title-color: rgba(255, 255, 255, 0.87);
--line-permalink-color: rgba(234, 218, 74, 0.35);
--code-bg: rgba(0, 0, 0, 0.18);
--quote-bg-color: rgba(0, 0, 0, 0.2);
}
code.highlight {
color:#ccc;
}
code.highlight .hljs {
display:block;
overflow-x:auto;
padding:.5em;
background:#fdf6e3;
color:#657b83;
}
code.highlight :is(.hljs-comment, .hljs-quote) {
color:#93a1a1;
}
code.highlight :is(
.hljs-keyword,
.hljs-selector-tag,
.hljs-addition,
) {
color:#859900;
}
code.highlight :is(
.hljs-number,
.hljs-string,
.hljs-meta .hljs-meta-string,
.hljs-literal,
.hljs-doctag,
.hljs-regexp
) {
color:#2aa198;
}
code.highlight :is(
.hljs-title,
.hljs-section,
.hljs-name,
.hljs-selector-id,
.hljs-selector-class
) {
color:#268bd2;
}
code.highlight :is(
.hljs-attribute,
.hljs-attr,
.hljs-variable,
.hljs-template-variable,
.hljs-class .hljs-title,
.hljs-type
) {
color:#b58900;
}
code.highlight :is(
.hljs-symbol,
.hljs-bullet,
.hljs-subst,
.hljs-meta,
.hljs-meta .hljs-keyword,
.hljs-selector-attr,
.hljs-selector-pseudo,
.hljs-link
) {
color:#cb4b16;
}
code.highlight :is(
.hljs-built_in,
.hljs-deletion
) {
color:#dc322f;
}
code.highlight .hljs-strong {
font-weight:bold;
}
}
ピンが多いprojectで便利そうだったので入れた
あれ? !important削ったら変なことになっちゃった……
なんかおかしい？
2022-02-17 00:33:10 たぶんだいたいなおった
2024-06-11 16:07:07 崩れてたので更新
code:style.css
@media (hover: none) {
/* ピン留めするカードの数が偶数である限りは秩序が保たれる脆弱なCSS */
.page-list ul.grid {
grid-template-columns: repeat(6, 1Fr);
}
.page-list > .grid li {
&.pin {
grid-column: 2 span;
}
&:not(.pin) {
&:nth-child(odd) {
grid-column: 1 / 4;
}
&:nth-child(even) {
grid-column: 4 / 7;
}
}
}
}
.page-list > .grid li {
&.pin {
height: 32px;
width: 100%;
margin-bottom: 5px;
}
&.page-list-item {
&.pin a {
background-color: var(--card-bg);
border-radius: 7px;
margin: none;
box-shadow: none;
.title {
font-size: 12px;
color: var(--card-title-color);
max-height: 20px;
text-align: center;
}
.content :is(.description,.icon) { display: none; }
}
a {
.header.pinned {
border-top:none;
padding: 6px 5px;
}
.pin {background: none;}
}
}
}