Settings
https://gyazo.com/4c8986d0572242fcef5601e401997aa1
code:style.css
/* @import "../破線で下線なリンクデザイン/style.css"; */
@import "../箇条書きのバレットをFontAwesomeにするUserCSS/style.css";
@import "../箇条書きの深さをリセットするUserCSS/style.css";
@import "../../work4ai/外部リンクをファビコンに置き換える記法/style.css";
@import "../画像を並べるUserCSS/style.css";
フォント
code:style.css
code:style.css
@font-face {
font-family: 'l-safe';
src:local("Bahnschrift"), local("DIN"), local("MS Pゴシック"), local("MS PGothic");
unicode-range: U+006C;
}
html, body, #editor, .grid li{font-family:'l-safe','calibri','Zen Kaku Gothic New',"YuGothic",'Yu Gothic',"Font Awesome 5 Free","Font Awesome 5 Brands","Roboto","メイリオ", "Meiryo", "Osaka", "MS Pゴシック", "MS PGothic", "sans-serif";} 色
code:style.css
:root {
--new-button-hover-bg: #ffca45; /* +ボタン背景ホバー */ --new-button-active-bg: #ffca45; /* +ボタン背景クリック */ }
ベースデザイン
code:style.css
body {
margin: initial;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
.app {
position: relative;
height: 85vh;
overflow-x: hidden;
overflow-y: scroll;
inset: 0;
top: -2%;
margin: auto 5rem;
border-radius: 10px;
padding-top: 1em;
padding-left: 4em;
padding-right: 3.5em;
.navbar {
position: fixed;
top: initial;
bottom: 3rem;
width: auto;
left: 50%;
transform: translateX(-50%);
border-bottom: none;
border-radius: 50px;
.row {
flex-wrap: nowrap;
&:has(.col-search){
display: flex;
}
.left {
.dropdown {
ul.global-menu {
top: initial;
bottom: 52px;
}
}
.project-home {
.title {
display: none;
}
&:after {
content: "Go to Home";
}
}
}
.col-search {
.navbar-form {
.dropdown {
input {
width: clamp(100px, 17vw, 400px);
outline-offset: -2px;
}
ul.dropdown-menu {
top: initial;
bottom: 52px;
min-height: 400px;
}
}
}
}
.col-menu {
.navbar-menu {
.dropdown-menu-right {
top: initial;
bottom: 52px;
}
}
}
}
}
.navbar-default {
}
&:has(.quick-launch) {
padding-top: 6em;
.navbar .row .left .project-home {
.title {
display: inherit;
}
&:after {
content: "";
}
}
}
.container {
.quick-launch {
position: fixed;
top: 2%;
right: 50%;
transform: translateX(50%);
z-index: 9999;
.dropdown-menu-right {
left: 50%;
transform: translateX(-50%);
}
}
.page-list, .related-page-list {
.grid {
gap: clamp(25px, 1.7svw, 40px);
li {
a {
background-color: transparent;
box-shadow: none;
.content {
flex-direction: column-reverse;
.header {
border-top: none;
text-align: center;
padding: 10px 10px;
height: 30%;
.title {
-webkit-line-clamp: 2;
}
}
.description {
position: relative;
font-size: 11px;
height: 70%;
display: flex;
flex-direction: column;
padding: 16px 45px 0px 45px;
transition: all 100ms cubic-bezier(0.2, 0.91, 0.85, 0.96) 0s;
&:before {
content: "";
position: absolute;
mask-repeat: no-repeat;
mask-position: center;
height: 100%;
width: 100%;
top: 0;
left: 0;
transition: all 100ms cubic-bezier(0.2, 0.91, 0.85, 0.96) 0s;
}
&:after {
content: "";
position: absolute;
mask-repeat: no-repeat;
mask-position: center;
height: 100%;
width: 100%;
top: 0;
left: 0;
transition: all 100ms cubic-bezier(0.2, 0.91, 0.85, 0.96) 0s;
}
}
.icon {
position: relative;
height: 70%;
img {
position: absolute;
width: 65%;
height: auto;
top: 25px;
left: 50%;
transform: translateX(-50%);
filter: brightness(0.85);
transition: all 100ms cubic-bezier(0.2, 0.91, 0.85, 0.96) 0s;
}
&:before {
content: "";
position: absolute;
mask-repeat: no-repeat;
mask-position: center;
height: 100%;
width: 100%;
top: 0;
left: 0;
}
&:after {
content: "";
position: absolute;
mask-repeat: no-repeat;
mask-position: center;
height: 100%;
width: 100%;
top: 0;
left: 0;
transform: rotateX(45deg);
transform-origin: bottom;
transition: all 100ms cubic-bezier(0.2, 0.91, 0.85, 0.96) 0s;
}
}
}
&:hover {
.content {
.description {
transform: rotateX(-23deg) rotateY(20deg) rotateZ(14deg);
&:before {
}
&:after {
}
}
.icon {
&:after {
transform: rotateX(60deg);
}
img {
top: 0;
filter: brightness(1);
}
}
}
}
}
}
}
}
}
}
}
}
ホバー打ち消し
code:style.css
opacity: 0;
}
ピンデザイン
code:style.css
.page-list {
.grid {
li.pin {
a {
.pin {
display: none;
}
}
&:first-of-type {
&:before {
content: "> Pinned";
position: absolute;
font-size: 1.1em;
font-weight: 400;
top: -2.7em;
letter-spacing: 4px;
}
}
&:nth-of-type(3) {
margin-bottom: 4em;
}
}
li.pin + li:not(.pin) {
grid-column-start: 1; /* ピンされたページを独立した段に */
&:before {
content: "> Pages";
position: absolute;
font-size: 1.1em;
font-weight: 400;
top: -2.7em;
letter-spacing: 4px;
}
}
}
}
関連ページデザイン修正
code:style.css
.page-wrapper {
.related-page-list {
.toolbar {
margin-bottom: 40px;
.related-page-list-search {
}
}
.links-container {
ul.grid {
position: relative;
margin-top: 3em;
.relation-label {
position: absolute;
top: -50px;
a {
flex-direction: row-reverse;
padding: 0;
height: auto;
.title {
font-size: 17px;
}
.kamon {
font-size: 20px;
margin: 0;
}
}
}
}
}
}
}
code:style.css
/* 関連ページ ラベルデザイン */
:root{
--relation-label-text:#304ea2;
}
ページ
デザイン
code:style.css
.page{box-shadow:none;}
.line.line-title .text{
text-align: center;
font-weight: 500;
letter-spacing: 0.06em;
text-indent: 0.06em;
}
動画
code:style.css
.video-player video{
max-height: 360px;
}
画像 中央揃え/角丸/シャドウ
code:style.css
.line img.image {
display : block;
position: relative;
margin : 0 auto 0.7em;
border-radius: 0.5em;
filter: drop-shadow(0px 8px 24px rgba(149,157,165,0.22));
top: 1em;
}
ポップアップ
code:style.css
/* ポップアップメニューのボタン周りの線を消す */
.selections .popup-menu .button-container .button:not(:first-of-type) { border: 0 }