settings
code:style.css
/* インポート */
@import "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css";
@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@300;400;600&family=Shippori+Mincho:wght@400;700&family=Inter@400;700&family=Zen+Kaku+Gothic+New:wght@400;700&display=swap');
body {
/* 変数オーバーライド */
--search-form-bg: transparent;
--search-form-icon-color: #002a00;
--search-form-text-color: rgba(0, 42, 0, 1);
--navbar-bg: #e8ffe8;
--navbar-icon-color: #002a00;
--navbar-title-color: #367736;
--new-button-vertical-color: #005a00;
--new-button-horizontal-color: #005a00;
--new-button-bg: var(--body-bg);
--new-button-hover-bg: #80f080;
--card-border: none;
--navbar-icon-color: #002a00;
--page-text-color: #002a00;
--page-link-color: #b103b1;
--page-link-hover-color: #d300d3;
--page-link-color-cursor-line: #00a000;
--page-bg: #e8ffe8;
--empty-page-link-color: #c0392b;
--empty-page-link-hover-color: #e74c3c;
--logo-url: url(/assets/img/logo_gray.svg);
--line-title-color: #003d00;
--cursor-color: #008a00;
--code-color: #006b00;
/* カスタム変数 */
--heading-font: 'Inter', Helvetica, 'Zen Kaku Gothic New', sans-serif;
--text-font: 'Shippori Mincho', yu-mincho-pr6n, YuMincho, 游明朝, 'Yu Mincho',
YuMincho, 'Hiragino Mincho ProN', HGS明朝E, serif;
--code-font: 'Fira Code', Monaco, monospace;
background-color:#e8ffe8;
}
/* シンタックスハイライト */
code.highlight .hljs-comment {
color: #003d00 !important;
background-color: #80f080;
font-weight: bold;
}
/* ページ設定 */
.line.line-title .text {
font-weight: 700 !important;
font-family: var(--heading-font);
text-align: center;
}
.line .text {
font-family: var(--text-font);
}
/* リンクの下線を非表示（hashTagは除く） */
.line a:not(type="hashTag") {
text-decoration: none !important;
border-bottom: none !important;
}
/* リンク付き画像の中央配置 */
a.link:has(img.image) {
display: block !important;
margin-left: auto !important;
margin-right: auto !important;
width: fit-content !important;
}
/* リンク付き画像：デフォルトで境界線なし */
a.link img.image {
border: none !important;
display: block !important;
transition: border 0.2s ease;
}
/* リンク付き画像：ホバー時にアンバーの境界線を表示 */
a.link:hover img.image {
border: 0.5px solid #008a00 !important;
}
img.gyazo.image {
display: block;
margin-left: auto;
margin-right: auto;
}
.line span.code-block {
background-color: #f7fdbd;
}
/* 設定を非表示 */
.page-filter-menu {
display: none;
}
/* 関連ページリストの検索バーを非表示 */
.related-page-list-search {
display: none !important;
}
/* ナビゲーションバー */
.navbar {
/*position: inherit;*/
font-family: var(--heading-font);
padding: 12px 0 8px;
background-color: transparent;
/*background-image: var(--gradient-bg);*/
background-size: 100% 4px;
background-repeat: repeat-x;
border-bottom: none;
backdrop-filter: none;
-webkit-backdrop-filter: none;
--button-hover-color: #59ee59;
& .navbar-menu {
margin: 0 10px 0 0;
}
& .navbar-menu > li > a {
color: #002a00;
background: transparent;
border-radius: 1000px;
& :hover {
color: #008a00;
}
}
& .navbar-brand {
margin-left: 10px;
}
& .project-home {
color: #002a00;
& :hover {
color: #008a00;
}
}
}
.brand-icon {
& path {
fill: transparent;
stroke: #002a00;
vector-effect: non-scaling-stroke;
transform: scale(.1);
transform-origin: 50% 50%;
}
}
/* 検索フォーム */
.search-form .form-group {
& input {
backdrop-filter: blur(1px);
-webkit-backdrop-filter: blur(1px);
background: rgba(232, 255, 232, 0);
border: 1px solid #080808;
&:focus {
border-radius: 16px 16px 0 0 !important;
backdrop-filter: blur(4px);
background: rgba(232, 255, 232, 0.7);
border: 1px solid #080808;
}
}
/* 検索窓入力中の文字色 */
& .form-control {
caret-color: #002a00; /* カーソル（キャレット） */
}
& input:focus {
color: #002a00;
}
/* 検索窓のサジェストのアピアランス*/
& .dropdown-menu {
border: 1px solid #080808;
background: rgba(232, 255, 232, 0.95);
backdrop-filter: blur(4px);
margin: 0 -1px 0;
border-radius: 0 0 16px 16px;
max-width: auto;
width: calc(100% + 2px);
& li > a {
color: #002a00;
&:hover {
color: #008a00;
}
}
/* settingsページを検索候補から非表示 */
& li:has(ahref*="/settings") {
display: none !important;
}
}
& button {
right: 5px;
}
}
/* フッター */
.footer .status-bar {
display: none;
}
/* テロメア非表示 */
.line .telomere .telomere-border {
border-width: 0px 0px 0px 0px !important;
width: 0;
}
.line .telomere .telomere-border .description {
display: none
}
/* リストサイズ */
input.grid-size-range { display: none }
a#dropdownMenuSort.tool-btn.dropdown-toggle { display: none }
div.page-list{
max-width:940px;
margin-left:auto;
margin-right:auto;
}
.page-list .grid li {
/* width : 300px !important; */
width: 100%!important;
height: 180px !important;
}
/* 先頭ブロック */
.page-list .grid li:first-child {
/* grid-column: 1 / -1 !important; */
grid-column: span 2 !important;
grid-row: span 2 !important;
width: 100% !important;
max-width: none !important;
min-height: 370px;
border-radius: 50px;
}
.related-page-list .grid li.page-list-item,
.related-page-list .grid li.relation-label {
width: 100%!important;
height: 280px !important;
&:first-child{
display: none;
}
}
@media (width < 650px) {
.page-list .grid li,
.related-page-list .grid li.page-list-item,
.related-page-list .grid li.relation-label {
/* width : 300px !important; */
height: auto !important;
}
}
/* カードのカスタマイズ */
.grid li.page-list-item {
box-shadow: 0px 2px 3px 1px rgba(0,0,0,0.1);
border-radius: 60px;
overflow: hidden;
}
.grid li.page-list-item a {
box-shadow: 0 0px 0 rgba(0,0,0,0);
background-color: #d0ffd0;
}
.grid li.page-list-item a .content{
height: 100%;
}
/* カードのサムネイル画像をフィット＆フィルタをかける */
.grid li.page-list-item a .icon img {
display: block;
width: 100%;
height: 100%;
margin: 0 auto;
object-fit: cover;
filter: saturate(0.5) blur(2px);
}
.grid li.page-list-item a:hover .icon img {
filter: none;
transition: filter 0.2s ease;
}
/* カード内のテキスト */
ul.grid li.page-list-item a .description {
opacity: 0;
}
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 {
text-align: center;
}
ul.grid li.page-list-item a .header {
border-top: none;
padding: 0;
z-index: 1;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
ul.grid li.page-list-item a .title {
font-weight: 700 !important;
font-size: 20px;
font-family: var(--heading-font);
background: #003d00;
color: #e8ffe8;
display: inline;
padding: 0 2px;
border-radius: .2em;
margin 0 auto;
}
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;
}
/*先頭アイテムのアピアランス調整*/
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: #000f00 !important;
background: #e8ffe8 !important;
text-align: center;
height: 1.1em;
line-height: 1em;
padding-top: .1em;
}
/* インデント箇条書きを非表示 */
.line .dot {
display: none !important;
}
/*Streamにアクセスするボタン*/
.navbar .navbar-menu>li.stream-btn,
.navbar .navbar-menu>li.stream-btn.hidden-xs
{ display: block !important; }
/* ハッシュタグ */
type="hashTag"{
display: inline-block;
padding: 2px 8px;
margin: 0 8px 10px 0;
background: transparent;
color: #008a00 !important;
font-weight: 700;
font-size: 0.8em;
border: 1px solid #008a00;
border-radius: 3px;
transition: .3s;
-webkit-transform: scale(1);
transform: scale(1);
}
type="hashTag":hover{
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
/*─────────────────────────────
Custom Syntax
[# 赤くする]
[! 白ボックス]
[| コメント]
[~ 中央ぞろえ]
─────────────────────────────*/
.deco-\# {
color: inherit;
background: linear-gradient(transparent 90%, rgba(205, 0, 51, 0.9) 0%);
}
.deco-\! {
background-color: #ffffff; /* 背景色 */
padding: 0.1em 0.5em 0.1em 0.5em;
border-radius: 6px; /* 角丸 */
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15); /* ドロップシャドウ */
}
.deco-\~ {
font-size: 1em;
display: inline-block;
width: 100%;
text-align: center;
}
.deco-\| {
color: #777;
font-size: 0.8em;
--page-link-color: currentColor;
}