settings
code:style.css
:root{
--project-subtitle: ""; /* */
/* --project-subtitle: "💧行雲流水"; /* */
/* --project-subtitle-color : white; /* */
--project-subtitle-color : var(--text-color, #333); /* */ --project-subtitle-background-color : transparent; /* */
/* --project-subtitle-background-color : lightgreen; /* */
/* --project-subtitle-image : url("/api/pages/suto3/弱音ハク/icon"); /* */
/* --project-subtitle-image : url('/api/pages/suto3/clipart/icon'); /* */
/* --project-subtitle-image : url("/api/pages/villagepump/brand-icon/icon"); /* */
--project-subtitle-opacity : 0.7 ;
--brand-icon-background-color : transparent; /* */
/* --brand-icon-background-color : pink; /* */
}
code:stylexx.css
:root {
}
code:stylexx.css
body {
}
code:stylexx.css
:root{
--project-subtitle: "愛は負けても親切は勝つ"; /* */
--project-subtitle-color : white; /* */
--project-subtitle-background-color : transparent; /* */
}
code:stylexx.css
/* Project description */
.project-home > .title:after {
content: var(--project-subtitle);
color: var(--project-subtitle-color);
background-color: var(--project-subtitle-background-color);
white-space: pre;
font-size: 0.7em;
}
code:style.css
.project-home::after {
display: block;
flex-shrink: 0;
height: 36px;
/* aspect-ratio: 4 / 3; /* */
aspect-ratio: 4 / 1; /* */
margin-left: 4px; /* */
padding: 2px 0px 2px 0px;
background-image: var(--project-subtitle-image); /* */
background-repeat: no-repeat;
background-size: contain;
background-position: right bottom;
content: var(--project-subtitle);
color: var(--project-subtitle-color);
background-color: var(--project-subtitle-background-color);
white-space: pre;
font-size: 0.7em;
border-radius: 4px; /*角丸*/
opacity: var(--project-subtitle-opacity);
}
code:style.css
.brand-icon {
display: block;
flex-shrink: 0;
height: 36px;
aspect-ratio: 4 / 3; /* */
/* aspect-ratio: 5 / 4; /* */
/* aspect-ratio: 1; /* */
/* margin-left: 8px; /* */
padding: 2px 0px 2px 0px;
background-repeat: no-repeat;
background-size: contain;
background-position: right bottom;
background-color: var(--brand-icon-background-color); /* */
/* border-radius: 50% ; /* */
border-radius: 4px; /* 角丸 */
}
.brand-icon svg { display: none; } /* */
.brand-icon:hover {
height: 64px;
background-image: var(--brand-icon-hover-image); /* */
}
code: stylexx.css
.btn-search svg {
display: none !important;
}
.btn-search {
background-size: 100% !important;
}
[https://i.gyazo.com/cb772b56d5a6a489141cebaf611b8623.png]