黑标居中页眉

注意


此页为于 SCP 维基内部使用的"组件"页。用于在其他页面中引用。

未经组件作者或工作人员允许,请勿修改此页的内容。


[フレーム]

这是干什么用的

重排页眉,使标题和标志居中


使用方法

1. 复制以下代码。

2. 粘贴至黑色标记笔及其他版式 include 之后。

[[include :scp-wiki:component:centered-header-bhl]]


@supports(display: grid) {
 :root{
 /*headermeasurements*/
 --header-height-on-desktop:10rem;
 --header-height-on-mobile:10rem;
 --header-h1-font-size: clamp(2rem, 5vw, 2.8125rem);
 --header-h2-font-size: clamp(0.875rem, 3vw, 0.9375rem);
 }#header{
 --search-textbox-text-color: var(--swatch-secondary-color);
 background:none;
 }#header::before{content: " ";
 position:absolute;
 width:100%;
 height:100%;
 left:0;
 top:0.75rem;
 background-image: var(--logo-image);
 background-repeat:no-repeat;
 background-position:center0;
 background-size:auto calc(var(--header-height-on-desktop) - 1.5rem);
 opacity:0.8;
 pointer-events:none;
 }#headerh1,
 #headerh2{margin:0;
 padding:0;
 width:100%;
 height: var(--header-height-on-desktop);
 display: flex;
 align-items:center;
 justify-content:center;
 display: flex;
 align-items:center;
 justify-content:center;
 }#headerh1a,
 #headerh1a::before,
 #header h2 span,
 #header h2 span::before {
 margin: 0;
 padding:0;
 z-index:0;
 display:block;
 text-align:center;
 }#headerh1{z-index:1;
 }#headerh1a::before,
 #headerh1a::after{content: var(--header-title);
 }#headerh1a::before{color: rgb(var(--swatch-text-tertiary-color));
 z-index: -1;
 -webkit-text-stroke:0.325rem rgb(var(--swatch-text-tertiary-color));
 }#headerh1a::after{color: rgb(var(--swatch-headerh1-color));
 z-index:1;
 }#headerh2{z-index:0;
 text-transform:uppercase;
 pointer-events:none;
 }#headerh2span{margin-top: calc(var(--header-height-on-mobile)/2 + var(--header-h1-font-size)/2 - 2em);
 }#headerh2span::before,
 #headerh2span::after{
 --wght:600;
 content: var(--header-subtitle);
 position:absolute;
 left:50%;
 transform: translateY(-50%) translateX(-50%);
 width:100%;
 text-align:center;
 }#headerh2span::before{
 -webkit-text-stroke:0.25rem rgb(var(--swatch-text-tertiary-color));
 }#headerh2span::after{color: rgb(var(--swatch-headerh2-color));
 z-index:1;
 }#search-top-boxform[id="search-top-box-form"]:not(:focus-within) input[type="text"]{color: rgba(0, 0, 0, 0);
 }@media (min-width: 36rem) {#login-status{flex-grow:1;
 left:3%;
 right: initial;
 }#login-status::before{
 --mask-image:none;
 background-color:transparent;
 }#login-status:not(:focus-within) {color: rgb(var(--login-line-divider-color));
 -webkit-user-select: initial;
 -moz-user-select: initial;
 -ms-user-select: initial;
 user-select: initial;
 }#login-status#account-topbutton,
 #login-status:not(:focus-within) #account-topbutton{
 --clip-path:
 polygon( 00, 100%0, 100%100%, 0100% );
 background-color: rgba(var(--login-arrow-color), 0);
 
 }#login-status#account-topbutton::before{
 --clip-path:
 polygon( 30%35%, 70%35%, 50%60%, 50%60% );
 --mask-image: initial;
 content: "";
 position:absolute;
 top:0;
 left:0;
 width:100%;
 height:100%;
 background-color: rgba(var(--login-arrow-color), 1);
 -webkit-clip-path: var(--clip-path);
 clip-path: var(--clip-path);
 }#login-status#account-topbutton::before,
 #login-status:not(:focus-within) #account-topbutton::before,
 #login-status:not(:focus-within) #account-topbutton:hover::before {
 --clip-path:
 polygon( 30%35%, 70%35%, 50%60%, 50%60% );
 --mask-image: initial;
 }#login-status:not(:focus-within) #account-topbutton::after{display:none;
 }#login-status:not(:focus-within) *:not(#account-topbutton):not([href*="account/messages"]) {
 --clip-path:
 polygon(
 00,
 100%0,
 100%100%,
 0100%
 );
 pointer-events:all;
 -webkit-clip-path: var(--clip-path);
 clip-path: var(--clip-path);
 }#login-status:not(:focus-within) *:not(#account-topbutton):not(#account-options):not([href*="account/messages"]) {opacity:1;
 }#login-status#my-account{
 --wght:300;
 }#account-options{background: var(--gradient-header);
 }#search-top-box{top:1.5em;
 right:3%;
 background: rgba(var(--search-focus-textbox-bg-color), 0.4);
 box-shadow: calc(var(--search-height) / 2 * -1) 0 calc(var(--search-height) / 2) rgba(var(--search-focus-textbox-bg-color), 0.4);
 }#search-top-box:focus-within ~ #login-status{opacity:1;
 }#search-top-box::after{transition:
 background-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
 -webkit-clip-path 150ms cubic-bezier(0.4, 0, 0.2, 1);
 transition:
 background-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
 clip-path 150ms cubic-bezier(0.4, 0, 0.2, 1);
 transition:
 background-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
 clip-path 150ms cubic-bezier(0.4, 0, 0.2, 1),
 -webkit-clip-path 150ms cubic-bezier(0.4, 0, 0.2, 1);
 }#search-top-box:not(:focus-within)::after{
 --clip-path:
 polygon(
 00,
 100%0,
 100%100%,
 0%100%
 );
 background-color: rgba(var(--search-icon-bg-color, --dark-accent), 1);
 -webkit-clip-path: var(--clip-path);
 clip-path: var(--clip-path);
 }#search-top-box:not(:focus-within):hover::after{
 --clip-path:
 polygon(
 00,
 100%0,
 100%100%,
 0100%
 );
 background-color: rgb(var(--search-icon-hover-bg-color));
 }#search-top-boxform[id="search-top-box-form"]:not(:focus-within) {max-width: var(--search-width);
 }#search-top-boxform[id="search-top-box-form"]:not(:focus-within) input[type="text"]{max-width: var(--search-width);
 padding:0 var(--search-height) 01em;
 outline-width:0;
 background-color: rgb(var(--search-focus-textbox-bg-color), 0.35);
 color: rgba(var(--search-textbox-text-color), 0.4);
 cursor:pointer;
 }#search-top-boxform[id="search-top-box-form"]:not(:focus-within) input[type="submit"],
 #search-top-boxform[id="search-top-box-form"]:focus-withininput[type="submit"]{pointer-events:all;
 border:none;
 }
 
 }
 
 #page-title::after,
 .meta-title::after,
 #page-title::before,
 .meta-title::before{content: "";
 flex-grow:1;
 height:0.0625rem;
 background: rgb(var(--swatch-primary));
 }#page-title::before,
 .meta-title::before{margin:auto1.25rem autoauto;
 }
}
页面版本: 14, 最后编辑于: 12 Jan 2025 05:01
除非特别注明,本页内容采用以下授权方式: Creative Commons Attribution-ShareAlike 3.0 License
点击编辑本页内容。
点击显示页面各部分的编辑按钮(如果可能)。 在标题边会出现"编辑"按钮。
在不编辑全部页面源代码的情况下添加内容。
查看本页过去是如何沿革的。
若您想要讨论本页内容,这是最简单的方法。
检视并管理本页附件。
管理网站的实用工具。
变更页面名称(及 URL 地址,或许会影响分类)。
在不编辑的情形下检视维基源代码。
检视 / 设定父页面(用以建立浏览足迹与结构化​​配置)。
向管理员举报本页有令人反感的内容。
事情不如预期?看看您可以做些什么。
通用的 Wikidot.com 文件与说明。
Wikidot.com 服务条款 — 您可以做的事,您不该做的事之类的。
Wikidot.com 隐私政策。

AltStyle によって変換されたページ (->オリジナル) /