异常美食部 主题版式

---

+ Show component code

:root {
        /* header measurements */
        --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);
 
        --logo-image: url("https://nu-scptheme.github.io/Black-Highlighter/img/logo.svg");
    }
 
    #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: center 0;
        background-size: auto calc(var(--header-height-on-desktop) - 1.5rem);
        opacity: 0.8;
        pointer-events: none;
    }
 
    #header h1,
    #header h2 {
        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;
    }
 
    #header h1 a,
    #header h1 a::before,
    #header h2 span,
    #header h2 span::before {
        margin: 0;
        padding: 0;
        z-index: 0;
        display: block;
        text-align: center;
    }
 
    #header h1 {
        z-index: 1;
    }
 
    #header h1 a::before,
    #header h1 a::after {
        content: var(--header-title);
    }
 
    #header h1 a::before  {
        color: rgb(var(--swatch-text-tertiary-color));
        z-index: -1;
        -webkit-text-stroke: 0.325rem rgb(var(--swatch-text-dark));
    }
 
    #header h1 a::after {
        color: rgb(var(--swatch-headerh1-color));
        z-index: 1;
    }
 
    #header h2 {
        z-index: 0;
        text-transform: uppercase;
        pointer-events: none;
    }
 
    #header h2 span {
        margin-top: calc(var(--header-height-on-mobile)/2 + var(--header-h1-font-size)/2 - 2em);
    }
 
    #header h2 span::before,
    #header h2 span::after {
        --wght: 600;
        content: var(--header-subtitle);
        position: absolute;
        left: 50%;
        transform: translateY(-50%) translateX(-50%);
        width: 100%;
        text-align: center;
    }
 
    #header h2 span::before {
        -webkit-text-stroke: 0.25rem rgb(var(--swatch-text-dark));
    }
 
    #header h2 span::after {
        color: rgb(var(--swatch-headerh2-color));
        z-index: 1;
    }
 
    #search-top-box form[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( 0 0, 100% 0, 100% 100%, 0 100% );
            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(
                        0 0,
                        100% 0,
                        100% 100%,
                        0 100%
                    );
            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);
        }
 
         #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(
                        0 0,
                        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(
                        0 0,
                        100% 0,
                        100% 100%,
                        0 100%
                    );
            background-color: rgb(var(--search-icon-hover-bg-color));
        }
 
        #search-top-box form[id="search-top-box-form"]:not(:focus-within) {
            max-width: var(--search-width);
        }
 
        #search-top-box form[id="search-top-box-form"]:not(:focus-within) input[type="text"] {
            max-width: var(--search-width);
            padding: 0 var(--search-height) 0 1em;
            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-box form[id="search-top-box-form"]:not(:focus-within) input[type="submit"],
        #search-top-box form[id="search-top-box-form"]:focus-within input[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: auto 1.25rem auto auto;
    }

食物

shí wù

“唐元稹《酬乐天早夏》诗：“食物风土异，衾裯时节殊。”

---

引证解释：

吃的和其他东西。

---

该主题是设计给fishalt的一篇还处于腹中的文章使用的版式。

---

《后汉书·韦彪传》：“乃赐 彪 珍羞食物。”

---

---

盘著

就像所有的黑色标记笔主题一样，该版式也需要将黑标代码置于前面。没有它，就会崩溃。你不想让东西都崩了，对吧？

将以下代码粘贴到文章中。

[[include :scp-wiki-cn:theme:black-highlighter-theme]]
[[include :scp-wiki-cn:theme:food]]
[[include :scp-wiki:component:centered-header-bhl]]

该主题已和Woedenaz的黑标居中版头搭配使用。没有的话看起来会令人食欲不振。

示例

这啥？一条水平分割线！“-----”技术上来说你只需要弄四条杠，但五条更好。

---

标题。但不是次标题，或者版头标题。用 + 来创建。

+ 标题

一级标题

二级标题

三级标题

四级标题

五级标题

六级标题

分页 :)

菜单第一页

分页 :(

可能的菜单第二页

引用块看起来像某种小纸条呢。

显然这是分割线。

---

小纸条上的小纸条

更多小纸条¹

表格	可以
列出	配料
表！

/*
    Powered on 2023/02/25 11:10:42
    [2023 Wikidot Theme]
    Created by fishalt
    CC BY-SA 3.0
*/

blockquote {

    background-image: radial-gradient(#FFE4B5 60%, #D2B48C);
    box-shadow: 0 0 6px 1px  rgb(63, 63, 63)
}

:root {
  --logo-image: url("https://scpsandboxcn.wikidot.com/local--files/fishalt-2/%E6%A0%87%E8%AE%B0%E9%9B%86");
/* Typefaces */
   --body-font:  'IBM Plex Mono', '仿宋',  monospace;
   --header-font:  'ZCOOL XiaoWei', serif;
   --title-font:  'IBM Plex Mono', '仿宋',  monospace;
   --mono-font:  'IBM Plex Mono', '仿宋',  monospace;
   --UI-font: 'ZCOOL XiaoWei', serif;

   --black: 0, 0, 0;
   --PeachPuff: 255, 218, 185;  
   --Burlywood2: 238, 197, 145;  
   --Goldenrod4: 139, 105, 20;
   --Wheat4: 139, 126, 102;  
   --LightGoldenrod3: 205, 190, 112;
   --neon-blue: 0, 229, 255;

--swatch-primary: var(--Goldenrod4);
     --swatch-primary-darker: var(--Burlywood2);
     --swatch-primary-darkest: var(--Burlywood2);
        --swatch-background: var(--Burlywood2);
     --swatch-border-color: var(--PeachPuff);

        --swatch-text-light: var(--PeachPuff);
        --swatch-text-general: var(--Goldenrod4);

        --swatch-menubg-color: var(--Goldenrod4);
        --swatch-menubg-extra-dark-color: var(--Burlywood2);
        --swatch-menutxt-general-color: var(--Goldenrod4);

        --swatch-secondary-color: var(--Burlywood2);
        --swatch-tertiary-color: var(--PeachPuff);
        --swatch-alternate-color: var(--PeachPuff);

        --swatch-text-secondary-color: var(--Goldenrod4);
        --swatch-text-tertiary-color: var(--Wheat4);

        --swatch-topmenu-bg-color: var(--PeachPuff);
}

:root:lang(cn) {
    --header-title: "异常美食部";
    --header-subtitle: "民以食为天";
}

#header {
--login-line-divider-color: var(--PeachPuff);
    --login-username-color: var(--LightGoldenrod3);
    --login-myaccount-color: var(--LightGoldenrod3);
    --login-dropdown-text-color: var(--PeachPuff);
    --login-dropdown-text-hover-color: var(--Goldenrod4);
    }

#main-content {
    --footnotes-footer-title-text-color: var(--PeachPuff);
    --hoverblock-header-txt: var(--PeachPuff);

    --tabs-hover-bg: var(--PeachPuff);
    --tabs-selected-bg: var(--Burlywood2);
    --tabs-selected-txt: var(--Goldenrod4);
    --tabs-selected-outline: var(--Goldenrod4);
    }

#top-bar {
        --dropdown-bg-color: var(--Goldenrod4);
     --mobile-topmenu-sidebar-button-color: var(--Goldenrod4);

     --topmenu-category-color: var(--Burlywood2);
     --topmenu-category-hover-color: var(--Goldenrod4) ;
     --dropdown-links-color: var(--Burlywood2);
     --dropdown-links-hover-color:  var(--Goldenrod4);
    }

#side-bar, .side-block {
    --sideblock-heading-border-color: var(--Wheat4);
    --sideblock-heading-text-color: var(--Goldenrod4);

   --sidebar-bg-color: #FFE4B5;

    --sidebar-border-color: var(--Goldenrod4), 0.08;
    --sidebar-subtest-color: var(--Burlywood2);

    --sidebar-links-text: var(--Goldenrod4);
    --sidebar-links-hover-bg-color: var(--Goldenrod4);
    --sidebar-links-hover-text-color: var(--PeachPuff);
 }

body {
background: rgb(255, 242, 204);
}

a,a:visited {
    color: rgb(210, 117, 20);
}    

h1,h2,h3,h4,h5,h6 {
    color: rgb(120, 63, 4);
    font-family: 'ZCOOL XiaoWei', serif;
}

Footnotes

1. 脚注