settings
https://gyazo.com/0fef9d2be4cbd6bfb1f5e8118062d7bc
code:style.css
@import "../箇条書きのバレットをFontAwesomeにするUserCSS/style.css";
フォント
code:style.css
@import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@1,500;1,600;1,700;1,800&family=Zen+Kaku+Gothic+New:wght@300;400;500;700;900&family=Noto+Sans:wght@100;200;300;400;500;600;700;800&display=swap');
@font-face {
font-family: 'l-safe';
src:local("Bahnschrift"), local("DIN"), local("ＭＳ Ｐゴシック"), local("MS PGothic");
unicode-range: U+006C;
}
html, body, #editor, .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
.quick-launch {
margin-bottom: 27px;
.flex-box {
display: flex;
justify-content: center;
.line-height {
display: none;
}
.page-sort-menu {
.dropdown-toggle {
display: none;
}
.dropdown-menu {
display: flex;
flex-direction: row;
position: relative;
background-color: transparent;
border: none;
box-shadow: none;
padding: 0 1em;
gap: 2em;
.dropdown-header {
display: none;
}
li a {
padding: 0;
}
}
}
.page-list-translation-menu {
display: none;
}
}
}
code:style.css
:root{
--card-body-color: #fff;
--card-body-yellow-color: #EFD003;
}
.app {
&:before {
content: "";
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url(https://i.gyazo.com/c2b03a5fcbce550583394c65c88b8c09.gif);
background-repeat: no-repeat;
background-size: cover;
background-position: 10% 100%;
mix-blend-mode: multiply;
opacity: 0.3;
z-index: 2;
pointer-events: none;
}
padding-top: 130px;
.container {
max-width: 800px;
.page-list {
ul.grid {
gap: 15px;
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
--card-border: 2px solid #C8C8C8;
li {
aspect-ratio: 1 / 1;
order: 0;
&.pin::after{
display: none;
}
&:nth-child(2) {
.content {
&:before,
&:after {
transform: rotateY(60deg);
filter: brightness(0.9);
}
}
}
&:nth-child(2), &:nth-child(15n), &:nth-child(25n) {
grid-column: span 2;
grid-row: span 2;
a {
background-color: var(--card-body-color);
.content {
&:before {
background-color: var(--card-body-yellow-color);
}
&:after {
background-color: #CC9C00;
}
}
}
}
a {
border: none;
border-radius: inherit;
box-shadow: none;
overflow: visible;
.pin {
display: none;
}
.content {
position: relative;
display: block;
overflow: visible;
height: 100%;
perspective: 3500px;
z-index: 1;
&:before,
&:after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform: rotateY(0deg);
transform-origin: right;
filter: brightness(1.0);
transition: transform 1.5s cubic-bezier(0.85, 0, 0.15, 1),
top 1.5s cubic-bezier(0.85, 0, 0.15, 1),
filter 1.5s cubic-bezier(0.85, 0, 0.15, 1);
z-index: 1;
pointer-events: none;
}
&:before {
background-color: var(--card-body-color);
}
&:after {
background-color: #C7C7C7;
mask: url(https://scrapbox.io/files/685cfcf99a5a231e430349d5.svg);
}
.header {
position: absolute;
bottom: 0;
left: 0;
width: 70%;
padding: 0 0 2px 5px;
overflow: hidden;
border-top: none;
.title {
font-size: 9px;
color: #484848;
font-weight: 500;
line-height: 10px;
}
}
.icon {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
margin: 0;
&:before {
content: "";
position: absolute;
width: 100%;
height: 100%;
mask: url(https://scrapbox.io/files/685d3a3ccff93612316a612a.svg);
background-color: #EFEFEF;
z-index: -1;
}
&:after {
content: "";
position: absolute;
width: 100%;
height: 100%;
background-color: #746c606e;
clip-path: polygon(100% 0, 100% 100%, 0 0);
mix-blend-mode: multiply;
}
img {
width: 80%;
filter: drop-shadow(13px 13px 1px rgba(0, 0, 0, 0.1));
}
}
.description {
display: none;
}
}
&:hover {
.hover {
opacity: 0;
}
.content {
&:before,
&:after {
transform: rotateY(75deg);
filter: brightness(0.9);
transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
top 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
filter 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
}
}
}
}
}
}
}
}
https://scrapbox.io/files/685cfcf99a5a231e430349d5.svghttps://scrapbox.io/files/685d3a3ccff93612316a612a.svg
編集ページ
code:style.css
.line.line-title .text {
text-align: center;
}
.line img.image, .line video.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
.brand-icon {
--logo-url: url('https://i.gyazo.com/0fef9d2be4cbd6bfb1f5e8118062d7bc.png');
width: 30px;
height: 30px;
background-image:var(--logo-url);
background-color: #f9f9fb;
background-size:cover;
background-repeat:no-repeat;
border-radius: 50%;
svg {display: none;}
}