代码草稿

/*来自http://etinjat.wikidot.com/theme:sunside*/
/*--------- HR ----------*/
 
hr {
    --hr-icon-mask: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' data-name='Layer 1' viewBox='0 0 234.9 134.1'%3E%3Cpath d='m178.9 123-10.6-10.6L213.7 67l-45.4-45.4L178.9 11l56 56-56 56z' class='cls-1'/%3E%3Cpath d='m117.5 134-67-67 67-67 67 67ZM71.6 67l45.9 45.8L163.3 67l-45.8-45.8Z' class='cls-1'/%3E%3Cpath d='M56 123 0 67l56-56 10.6 10.6L21.2 67l45.4 45.4L56 123z' class='cls-1'/%3E%3C/svg%3E");
    --hr-icon-size: 2rem;
    margin: 1.375rem 0;
    background: transparent;
    height: var(--hr-icon-size);
    display: grid;
    place-items: center;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
}
hr::before, hr::after {
    content: "";
    display: grid;
    grid-column: 1/2;
    grid-row: 1/2;
    background-color: hsl(var(--primary-accent-3));
}
hr::before {
    height: 0.1625rem;
    width: 100%;
    -webkit-mask-image: linear-gradient(90deg, black calc(50% - var(--hr-icon-size)/2 + 0.125rem), transparent calc(50% - var(--hr-icon-size)/2 + 0.125rem), transparent calc(50% + var(--hr-icon-size)/2 - 0.125rem), black calc(50% + var(--hr-icon-size)/2 - 0.125rem));
    mask-image: linear-gradient(90deg, black calc(50% - var(--hr-icon-size)/2 + 0.125rem), transparent calc(50% - var(--hr-icon-size)/2 + 0.125rem), transparent calc(50% + var(--hr-icon-size)/2 - 0.125rem), black calc(50% + var(--hr-icon-size)/2 - 0.125rem));
     clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%)
}
hr::after {
    width: var(--hr-icon-size);
    height: var(--hr-icon-size);
    -webkit-mask-image: var(--hr-icon-mask);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    -webkit-mask-position: center;
    mask-image: var(--hr-icon-mask);
    mask-repeat: no-repeat;
    mask-size: contain;
    mask-position: center;
}
 
/*------ Blockquotes, TOC ------*/
 
blockquote, div.blockquote, #toc {
    background-color: transparent;
    border: none;
    border-inline-start: solid 0.25rem hsl(var(--primary-accent-1));
    padding: 0.125em 1.25em;
}
 
#toc {
    border-color: hsl(var(--primary-accent-2));
    padding: 0.125rem 0.675rem;
}
#toc .title {
    font-family: var(--UI-font);
    color: hsl(var(--primary-accent-2));
}
 
/*------ Collapsible ------*/
 
.collapsible-block {
     --cut: 1.375rem;
}
 
.collapsible-block-folded a.collapsible-block-link,
.collapsible-block-unfolded-link a.collapsible-block-link {
    display: inline-flex;
    align-items: center;
    position: relative;
    min-height: calc(var(--cut) * 2);
    box-sizing: border-box;
    padding: calc(var(--cut) * .3535) calc(var(--cut) * 1.414);
    padding-inline-start: calc(var(--cut) * 2.414);
    border: none;
    clip-path: polygon(
        0% var(--cut),
        var(--cut) 0%,
        calc(100% -  var(--cut)) 0%,
        100% var(--cut),
        100% calc(100% -  var(--cut)),
        calc(100% -  var(--cut)) 100%,
        var(--cut) 100%,
        0% calc(100% -  var(--cut))
        );
    background-color: hsl(var(--light-accent-3) / 0.25);
    color: inherit;
    overflow: hidden;
    isolation: isolate;
    transition: color .125s linear;
}
.collapsible-block-folded a.collapsible-block-link:is(:hover,:focus) {
    color: hsl(var(--light-accent-1));
}
 
.collapsible-block-folded a.collapsible-block-link::before {
    content: "";
    display: block;
    background-color: hsl(var(--dark-accent));
    height: 100%;
    width: calc(var(--cut) * 2);
    clip-path: inherit;
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    transition: width 0.175s ease-out;
    z-index: -1;
}
.collapsible-block-folded a.collapsible-block-link:is(:hover,:focus)::before {
    width: 100%;
}
 
:is(.collapsible-block-folded a.collapsible-block-link, .collapsible-block-unfolded-link a.collapsible-block-link)::after {
    content: "+";
    font-size: 1.375em;
    font-weight: bold;
    font-family: var(--UI-font);
    display: grid;
    place-content: center;
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    height: 100%;
    width: calc(var(--cut) * 2);
    background-color: hsl(var(--dark-accent));
    color: hsl(var(--light-accent-1));
    clip-path: inherit;
    transition: background-color 0.125s ease-out;
}
 
.collapsible-block-folded a.collapsible-block-link:is(:hover,:focus)::after {
    background-color: hsl(var(--primary-accent-1));
}
 
.collapsible-block-unfolded-link a.collapsible-block-link {
    color: hsl(var(--light-accent-1));
    background-color: hsl(var(--primary-accent-1));
}
 
.collapsible-block-unfolded-link a.collapsible-block-link::after {
    content: "-";
    background-color: hsl(var(--primary-accent-1));
}
.collapsible-block-unfolded-link a.collapsible-block-link:is(:hover,:focus)::after {
    background-color: hsl(var(--assist-color));
}
 
/*------ Tabs ------*/
 
.yui-navset .yui-nav {
    isolation: isolate;
    position: relative;
    border: none;
    font-family: var(--UI-font);
    font-size: 0.925em;
    --cut: 1.125rem;
}
.yui-navset .yui-nav::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--sp_tab-background);
    z-index: -1;
    clip-path: polygon( 0% var(--cut), var(--cut) 0%, calc(100% - var(--cut)) 0%, 100% var(--cut), 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, var(--cut) 100%, 0% calc(100% - var(--cut)) );
}
.yui-navset .yui-nav::after {
    content: "";
    position: absolute;
    z-index: -1;
    height: 50%; width: 0.05rem;
    background-color: hsl(var(--primary-accent-3));
    inset-block-end: -0.05rem; inset-inline-start: 0;
    transform-origin: bottom;
    transform: rotate(45deg);
}
 
.yui-navset .yui-nav li { flex-grow: 1; }
 
.yui-navset.yui-navset-top .yui-nav li a {
    position: relative;
    border: none;
    padding: calc(var(--cut) * .3535) calc(var(--cut) * 1.414);
    min-height: calc(var(--cut)*2);
    clip-path: polygon( 0% 0%, 0% 0%, 100% 0%, 100% 0%, 100% 100%, 100% 100%, 0% 100%, 0% 100%);
    transition: clip-path 0.15s linear, transform 0.2125s ease-out;
}
.yui-navset.yui-navset-top .yui-nav .selected a {
    clip-path: polygon( 0% var(--cut), var(--cut) 0%, calc(100% - var(--cut)) 0%, 100% var(--cut), 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, var(--cut) 100%, 0% calc(100% - var(--cut)) );
    transform: scale(1.0625);
    z-index: 1;
}
.yui-navset.yui-navset-top .yui-nav li a::before {
    content: "";
    background-color: hsl(var(--primary-accent-1));
    position: absolute;
    inset-block-start: 0; inset-inline-start: 0;
    width: 0; height: 0.225rem;
    transition: width 0.25s ease-out;
}
.yui-navset.yui-navset-top .yui-nav li a:is(:hover,:focus)::before { width: 100%; }
 
.yui-navset .yui-content {
    background-color: transparent;
    border: none;
    border-inline-start: solid 0.05rem hsl(var(--primary-accent-3));
    padding: 0.225rem 0.75rem;
    position: relative;
}
.yui-navset .yui-content::before {
    content: "";
    position: absolute;
    border: solid 0.05rem;
    border-color: hsl(var(--primary-accent-3));
    width: 0.375rem;
    height: 0.375rem;
    inset-block-start: calc(100% + 0.05rem);
    inset-inline-start: -0.25rem;
    transform: rotate(45deg);
}
 
/*------ Table ------*/
 
table.wiki-content-table td {
    border-color: hsl(var(--assist-color));
}
 
table.wiki-content-table th {
    background-color: hsl(var(--assist-color));
    color: hsl(var(--light-accent-2));
    border-color: hsl(var(--assist-color));
}
 
/*-----------------------------*/
/*------  CUSTOM SYNTAX ------*/
/*-----------------------------*/
 
.header-center {
    text-align: center;
}
.header-center :is(h1,h2,h3,h4,h5,h6) {
    margin-inline: auto;
}
 
.city-block {
    --border: 0.175rem;
    box-sizing: border-box;
    width: calc(100% - 2rem);
    margin-inline: auto;
    margin-block: 1.5rem;
    padding: 0.25rem 0.75rem;
    background-color: hsl(var(--primary-complement) / 0.075);
    position: relative;
}
 
.city-block::before, .city-block::after {
    content: "";
    position: absolute;
    inline-size: calc(100% - 1.125rem);
    block-size: 1.75rem;
    transform: skew(-45deg);
    pointer-events: none;
}
.city-block::before {
    inset-block-start: -0.5rem;
    inset-inline-start: 0.325rem;
    border-inline-start: solid calc(var(--border)*1.414) hsl(var(--primary-accent-1));
    border-block-start: solid var(--border) hsl(var(--primary-accent-1));
}
.city-block::after {
    inset-block-end: -0.5rem;
    inset-inline-end: 0.325rem;
    border-inline-end: solid calc(var(--border)*1.414) hsl(var(--primary-accent-1));
    border-block-end: solid var(--border) hsl(var(--primary-accent-1));
}
 
.side-alley {
    color: hsl(var(--light-complement));
    font-size: 0.925em;
    --cut: 2.75rem;
    width: min(calc(var(--main-content-width)/2.5), 47.5%);
    min-height: calc(var(--cut) * 2);
    box-sizing: border-box;
    padding: calc(var(--cut) * .25) calc(var(--cut) * .707);
    float: left;
    position: relative;
    margin: 0.25rem 1rem;
    shape-outside: polygon( 0% var(--cut), var(--cut) 0%, calc(100% - var(--cut)) 0%, 100% var(--cut), 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, var(--cut) 100%, 0% calc(100% - var(--cut)) );
    isolation: isolate;
}
.side-alley::before {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-color: hsl(var(--assist-color));
    clip-path: polygon( 0% var(--cut), var(--cut) 0%, calc(100% - var(--cut)) 0%, 100% var(--cut), 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, var(--cut) 100%, 0% calc(100% - var(--cut)) );
    z-index: -1;
}
 
.side-alley:where(:not(.right)) {
    margin-left: clamp(calc(var(--main-content-width)/-4.5), calc((90vw - 95%)/-2), 0rem);
}
.side-alley:where(.right) {
    margin-right: clamp(calc(var(--main-content-width)/-4.5), calc((90vw - 95%)/-2), 0rem);
    float: right;
}
 
.side-alley :is(h1,h2,h3,h4,h5,h6) {
    color: hsl(var(--light-accent-2));
}