settings
フォント
code:style.css
/* ===== Fonts ===== */
@font-face {
font-family: 'l-safe';
src: local("Bahnschrift"), local("DIN"), local("ＭＳ Ｐゴシック"), local("MS PGothic");
unicode-range: U+006C;
}
html,
body,
.grid li {
font-family: 'l-safe', 'Zen Kaku Gothic New', 'YuGothic', 'Yu Gothic', 'Font Awesome 5 Free', 'Font Awesome 5 Brands', 'Roboto', 'メイリオ', 'Meiryo', 'Osaka', 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
}
変数
code:style.css
/* ===== Tokens ===== */
:root {
--home-new-hover-bg: rgb(0 0 0 / 8%);
--book-radius: 5px;
--book-title-radius: 3px 0 0 0;
--book-grid-unit: 15px;
--book-row-gap: 40px;
--book-shelf-shadow: rgb(0 0 0 / 24%);
--book-anim-duration: 0.4s;
--book-anim-ease: cubic-bezier(.165, .84, .44, 1);
--book-shadow-ease: ease-in-out;
--book-shell-bg:
linear-gradient(180deg, rgb(205 205 205 / 100%) 0%, rgb(255 255 255 / 0%) 15px),
linear-gradient(90deg, rgb(194 194 194 / 100%) 0%, rgb(255 255 255 / 100%) 5%, rgb(193 191 191 / 0%) 100%),
linear-gradient(270deg, rgb(194 194 194 / 100%) 0%, rgb(255 255 255 / 100%) 5%, rgb(193 191 191 / 0%) 100%);
--book-spine-shade:
linear-gradient(90deg, rgb(0 0 0 / 20%) 0%, rgb(0 0 0 / 5%) 6px, rgb(0 0 0 / 5%) 100%),
linear-gradient(270deg, rgb(0 0 0 / 25%) 0%, rgb(0 0 0 / 4%) 4px, rgb(0 0 0 / 4%) 100%);
--book-hover-shade: linear-gradient(0deg, rgb(0 0 0 / 58%) 0%, rgb(119 119 119 / 17%) 100%);
--pin-cover-shade: linear-gradient(180deg, rgb(32 36 49 / 25%) 0%, rgb(141 141 141 / 0%) 100%);
--pin-gap-inline: 1.5rem;
--li-color-1: var(--quick-launch-selected);
--li-color-3: var(--quick-launch-selected);
--li-color-5: var(--quick-launch-selected);
}
ホーム画面
code:style.css
/* Home only */
body { background-color: var(--home-bg); }
.app { padding-top: 8rem; }
.navbar { background-color: var(--home-navbar-bg); }
.new-button {
background-color: transparent;
& .horizontal-line,
& .vertical-line { background-color: var(--home-accent); }
}
.search-form .form-group input { background-color: var(--home-search-bg); }
.page-list ul.grid {
display: grid;
grid-template-columns: repeat(auto-fill, var(--book-grid-unit));
column-gap: 0;
row-gap: var(--book-row-gap);
align-items: end;
filter: drop-shadow(-10px 14px 14px var(--book-shelf-shadow));
}
.page-list li.page-list-item {
--W: 4;
--H: 420px;
--book-tone: 0;
grid-column: span var(--W);
height: auto;
a { display: block; height: var(--H); }
}
.page-list-item.pin + .page-list-item:not(.pin) { grid-column: 1 / span var(--W); }
.page-list .grid li.page-list-item {
position: relative;
z-index: 1;
& > a {
position: relative;
overflow: visible;
border-radius: var(--book-radius);
box-shadow: none;
background: var(--book-shell-bg);
& .content {
position: relative;
z-index: 1;
height: 100%;
border-radius: var(--book-radius);
overflow: hidden;
transform: translateZ(0) rotateX(0deg);
transform-origin: bottom;
filter: brightness(calc(1 + var(--book-tone)));
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
will-change: transform;
transition:
transform var(--book-anim-duration) 0s var(--book-anim-ease),
filter var(--book-anim-duration) 0s var(--book-anim-ease);
&::before {
content: "";
position: absolute;
inset: 0;
z-index: 4;
pointer-events: none;
background: var(--book-spine-shade);
}
&::after {
content: "";
position: absolute;
inset: 0;
z-index: 4;
opacity: 0;
pointer-events: none;
border-radius: var(--book-radius);
background: var(--book-hover-shade);
transition: opacity var(--book-anim-duration) 0s var(--book-anim-ease);
}
}
& .title {
position: absolute;
right: 0;
bottom: 0;
z-index: 3;
writing-mode: vertical-rl;
text-orientation: mixed;
max-height: none;
padding: 5px 2px 5px 0;
font-size: 13px;
line-height: 1.25;
letter-spacing: 0.02em;
font-kerning: normal;
font-feature-settings: "palt" 1;
color: var(--home-title-color);
background: var(--home-card-surface);
border-radius: var(--book-title-radius);
}
& .icon {
position: absolute;
inset: 0;
margin: 0;
& img {
width: 100%;
height: 100%;
object-fit: cover;
}
}
& .description,
& .pin { display: none; }
& .hover { background-color: transparent; }
}
}
.grid li.page-list-item a .header {
padding: 15px;
border-top: none;
height: 100%;
background: var(--home-card-surface);
}
data-hover-visible .page-list .grid li.page-list-item:not(.pin) > a:hover { box-shadow: none; } data-hover-visible .page-list .grid li.page-list-item:not(.pin) > a:hover .hover { opacity: 0; } .page-list .grid li.page-list-item:not(.pin) > a:hover .content {
transform: translateZ(0) rotateX(20deg);
transform-origin: bottom;
}
.page-list .grid li.page-list-item:not(.pin) > a:hover .content::after {
opacity: 1;
transition: opacity var(--book-anim-duration) 0s var(--book-shadow-ease);
}
.page-list .grid li.page-list-item.grid-style-item.pin {
--W: 16;
--H: 290px;
--book-tone: 0;
padding-inline: var(--pin-gap-inline);
& > a {
box-sizing: border-box;
background: none;
transform-origin: bottom;
& .title { display: none; }
& .content {
transform: translateZ(0) rotateX(24deg);
transform-origin: 80%;
filter: brightness(1);
&::after {
opacity: 1;
background: var(--pin-cover-shade);
}
}
&::before {
content: "";
position: absolute;
bottom: 0;
z-index: 0;
width: 100%;
height: 50%;
border-radius: var(--book-radius);
background:
linear-gradient(0deg, rgb(185 185 185 / 100%) 12%, rgb(255 255 255 / 0%) 15px),
linear-gradient(90deg, rgb(194 194 194 / 100%) 0%, rgb(255 255 255 / 100%) 25%, rgb(193 191 191 / 0%) 100%),
linear-gradient(270deg, rgb(194 194 194 / 100%) 0%, rgb(255 255 255 / 100%) 25%, rgb(193 191 191 / 0%) 100%);
}
&:hover .content {
transform: translateZ(0) rotateX(0);
filter: brightness(1.05);
&::after { opacity: 0; }
}
}
}
.quick-launch { margin-bottom: 2rem; }
.quick-launch .flex-box {
justify-content: center;
& .page-list-mode-menu { display: none; }
& .page-sort-menu {
& .tool-btn { display: none; }
& .dropdown-menu {
position: relative;
display: flex;
flex-direction: row;
margin: 0;
border: none;
box-shadow: none;
background-color: transparent;
z-index: 0;
& .dropdown-header { display: none; }
& > li > a {
color: var(--quick-launch-text);
transition: all 100ms cubic-bezier(0.2, 0.91, 0.85, 0.96) 0s;
&.selected { color: var(--quick-launch-selected); }
}
}
}
}
quick-launch
code:style.css
/* ===== Quick Launch ===== */
.quick-launch {
margin-bottom: 2rem;
}
.quick-launch .flex-box {
justify-content: center;
& .page-list-mode-menu {
display: none;
}
& .page-sort-menu {
& .tool-btn {
display: none;
}
& .dropdown-menu {
position: relative;
display: flex;
flex-direction: row;
margin: 0;
border: none;
box-shadow: none;
background-color: transparent;
z-index: 0;
& .dropdown-header {
display: none;
}
& > li > a {
color: var(--quick-launch-text);
transition: all 100ms cubic-bezier(0.2, 0.91, 0.85, 0.96) 0s;
font-weight: bold;
&:hover {
}
&.selected {
color: var(--quick-launch-selected);
}
}
}
}
}
関連ページ
code:style.css
/* Related only: pin-card reference (design + animation only) */
.related-page-list {
overflow: visible;
.toolbar {
margin-bottom: 6rem;
}
.links-container {
gap: 6rem;
}
.grid {
position: relative;
filter: drop-shadow(-10px 14px 14px var(--book-shelf-shadow));
li.relation-label.links a,
li.relation-label.project-links a,
li.relation-label.empty-links a {
background: transparent;
color: var(--related-label-color);
}
&:hover {
.relation-label a {
background-color: transparent !important;
color: var(--related-label-color) !important;
}
}
.relation-label {
position: absolute;
top: -30px;
aspect-ratio: unset;
a {
padding: 2px 10px;
background: transparent;
color: var(--related-label-color);
font-weight: bold;
transition: all 100ms cubic-bezier(0.2, 0.91, 0.85, 0.96) 0s;
&:hover {
color: var(--quick-launch-selected) !important;
}
.icon-lg {
display: none;
}
}
.arrow {
display: none;
}
}
li.page-list-item {
aspect-ratio: 2 / 3;
a {
position: relative;
box-sizing: border-box;
border-radius: var(--book-radius);
box-shadow: none;
background: none;
transform-origin: bottom;
.content {
position: relative;
z-index: 1;
height: 100%;
border-radius: var(--book-radius);
overflow: hidden;
transform: translateZ(0) rotateX(24deg);
transform-origin: 80%;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
will-change: transform;
filter: brightness(1);
transition:
transform var(--book-anim-duration) 0s var(--book-anim-ease),
filter var(--book-anim-duration) 0s var(--book-anim-ease);
&::before {
content: "";
position: absolute;
inset: 0;
z-index: 4;
pointer-events: none;
background: var(--book-spine-shade);
}
&::after {
content: "";
position: absolute;
inset: 0;
z-index: 4;
pointer-events: none;
border-radius: var(--book-radius);
opacity: 1;
background: var(--pin-cover-shade);
transition: opacity var(--book-anim-duration) 0s var(--book-shadow-ease);
}
.icon {
position: absolute;
inset: 0;
margin: 0;
img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
transform: translateZ(0);
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
}
}
&::before {
content: "";
position: absolute;
bottom: 0;
z-index: 0;
width: 100%;
height: 50%;
border-radius: var(--book-radius);
background:
linear-gradient(0deg, rgb(185 185 185 / 100%) 12%, rgb(255 255 255 / 0%) 15px),
linear-gradient(90deg, rgb(194 194 194 / 100%) 0%, rgb(255 255 255 / 100%) 25%, rgb(193 191 191 / 0%) 100%),
linear-gradient(270deg, rgb(194 194 194 / 100%) 0%, rgb(255 255 255 / 100%) 25%, rgb(193 191 191 / 0%) 100%);
}
.description,
.pin,
.hover {
display: none;
}
}
a:hover .content {
transform: translateZ(0) rotateX(0deg);
filter: brightness(1.05);
&::after {
opacity: 0;
}
}
}
}
}
ページデザイン
code:style.css
/* ===== Page ===== */
.page {
box-shadow: none;
border-radius: 10px;
}
.line.line-title .text {
text-align: center;
font-weight: bold;
}
.line img.image {
display: block;
position: relative;
top: 1em;
margin: 0 auto -1em;
max-width: 700px;
border-radius: 0.2em;
filter: drop-shadow(0 8px 24px rgb(149 157 165 / 22%));
}
content: " \f35d";
display: inline-block;
font-family: 'Font Awesome 5 Free', 'Font Awesome 5 Brands';
font-size: 0.8rem;
font-weight: 900;
}
code:style.css
/* ===== Page: List Bullet (Font Awesome) ===== */
.line .indent-mark .dot {
background-color: transparent;
}
.line .indent-mark .dot::before {
content: "\f068";
display: block;
position: absolute;
right: -4px;
top: -10px;
font-family: 'Font Awesome 5 Free';
font-size: 6px;
font-weight: 900;
color: var(--li-color-0);
}
.line .indent-mark .c-0 + .dot::before {
font-size: 10px;
color: var(--li-color-1);
}
.line .indent-mark .c-1 + .dot::before {
font-size: 10px;
color: var(--li-color-2);
}
.line .indent-mark .c-2 + .dot::before {
font-size: 10px;
color: var(--li-color-3);
}
.line .indent-mark .c-3 + .dot::before {
font-size: 9px;
color: var(--li-color-4);
}
.line .indent-mark .c-4 + .dot::before {
font-size: 8px;
color: var(--li-color-5);
}