142 lines
3.5 KiB
Plaintext
142 lines
3.5 KiB
Plaintext
.portable-infobox {
|
|
--pi-item-spacing: calc(var(--space));
|
|
margin-left: calc(var(--space) * 2);
|
|
font-family: 'Shippori Mincho', serif;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
flex: 0 1 0;
|
|
// background: conic-gradient(from 42deg at 12em -24em, var(--gold-3) 30%, var(--gold-1) 40%, var(--gold-3) 50%) padding-box;
|
|
}
|
|
|
|
.portable-infobox > * {
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
// .pi-title.pi-title, .pi-header.pi-header {
|
|
// border-bottom: 2px solid;
|
|
// border-image: linear-gradient(90deg, var(--gold-7), transparent 80%) 30;
|
|
// font-family: 'Libre Caslon';
|
|
// line-height: 1em;
|
|
// padding-bottom: .5em;
|
|
// color: var(--gold-7);
|
|
// }
|
|
|
|
// @media (prefers-color-scheme: dark) {
|
|
|
|
// .portable-infobox {
|
|
// background: conic-gradient(from 42deg at 12em -24em, var(--gold-4) 30%, var(--gold-2) 40%, var(--gold-4) 50%) padding-box;
|
|
// }
|
|
|
|
// .pi-title.pi-title, .pi-header.pi-header {
|
|
// border-image: linear-gradient(90deg, var(--gold-7), transparent 80%) 30;
|
|
// }
|
|
// }
|
|
|
|
// .pi-font, .pi-secondary-font {
|
|
// color: var(--8);
|
|
// }
|
|
|
|
// .pi-horizontal-group *:not(.pi-header), .pi-data, .pi-media{
|
|
// background: var(--0) border-box;
|
|
// }
|
|
|
|
// @media (prefers-color-scheme: dark) {
|
|
// .pi-horizontal-group *:not(.pi-header), .pi-data, .pi-media{
|
|
// background: #666666 border-box;
|
|
// }
|
|
// }
|
|
|
|
// .pi-horizontal-group .pi-horizontal-group-item:not(:first-child) {
|
|
// border: none;
|
|
// }
|
|
|
|
.portable-infobox .pi-media {
|
|
border: 1px solid var(--gold-5);
|
|
padding-top: var(--pi-item-spacing);
|
|
// background: repeating-conic-gradient(
|
|
// var(--0) 0% 25%,
|
|
// transparent 0 50%)
|
|
// 50% / 20px 20px;
|
|
background: black;
|
|
// width: fit-content;
|
|
margin-bottom: var(--pi-item-spacing);
|
|
}
|
|
|
|
.portable-infobox .pi-title, .portable-infobox .pi-header {
|
|
padding: 0;
|
|
padding-bottom: var(--pi-item-spacing);
|
|
// display: flex;
|
|
width: fit-content;
|
|
// text-wrap: nowrap;
|
|
gap: calc(var(--pi-item-spacing) / 2);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.portable-infobox .pi-title::before,
|
|
.portable-infobox .pi-title::after,
|
|
.portable-infobox .pi-header::before,
|
|
.portable-infobox .pi-header::after {
|
|
display: block;
|
|
background-size: 100% 1px;
|
|
background-repeat: no-repeat;
|
|
background-position-y: 50%;
|
|
content: ' ';
|
|
flex-grow: 1;
|
|
min-width: calc(var(--pi-item-spacing) * 2);
|
|
}
|
|
|
|
.portable-infobox .pi-title::before,
|
|
.portable-infobox .pi-header:not(caption)::before {
|
|
background-image: linear-gradient(90deg, transparent, var(--gold-1));
|
|
}
|
|
|
|
.portable-infobox .pi-title::after,
|
|
.portable-infobox .pi-header:not(caption)::after {
|
|
background-image: linear-gradient(270deg, transparent, var(--gold-1));
|
|
}
|
|
|
|
.pi-media * {
|
|
width: fit-content;
|
|
}
|
|
|
|
.pi-caption {
|
|
color: var(--gold-1);
|
|
}
|
|
|
|
.pi-collapse.pi-collapse h2.pi-header.pi-header {
|
|
padding-right: var(--pi-item-spacing);
|
|
}
|
|
|
|
.pi-header.pi-header, .pi-title.pi-title {
|
|
text-align: center;
|
|
// background: var(--gold-3);
|
|
// color: var(--gold-7);
|
|
}
|
|
|
|
.pi-data-label {
|
|
// text-align: right;
|
|
}
|
|
|
|
@media (min-width: 1201px) {
|
|
.portable-infobox {
|
|
margin-right: calc(var(--space) * 20 * -1);
|
|
}
|
|
}
|
|
|
|
@media (min-width: 1200px) {
|
|
|
|
}
|
|
|
|
@media (max-width: 720px) {
|
|
.portable-infobox {
|
|
// background: linear-gradient(85deg, var(--gold-3) 0%, var(--white) 70% 0%, var(--gold-1) 100%);
|
|
margin-right: var(--space);
|
|
margin-left: var(--space);
|
|
}
|
|
|
|
.pi-title:first-child {
|
|
display: none;
|
|
}
|
|
} |