介绍
使用以下代码快速自定义版式外观:
[[module CSS]]
:root {
--header-title: "版头标题";
--header-subtitle: "版头副标题";
--accent-color: r, g, b; /* 主题色 */
--background-image: url("图片链接");
}
[[/module]]更多自定义:
[[module CSS]]
:root {
--background-color: r, g, b; /* 页面背景色 */
--text-color: r, g, b; /* 文本色 */
--light-color-1: r, g, b; /* 正文背景色 */
}
[[/module]]
展示
Level 0 的第一张照片。
Level 0 是一处非线性空间,外观类似于一家零售店的储藏后室。与它此前被确认的形式相似,Level 0 中的所有房间都在外观上呈现出具有共同表面特征的统一制式模样,例如泛黄的墙纸、潮湿的地毯和以不一致方式安装的荧光灯具。然而,本层中不存在两个完全相同的房间。1
一号标题
二号标题
三号标题
这是第二个分页。要创建分页,使用以下代码:
[[tabview]]
[[tab 第一个分页]]
内容
[[/tab]]
[[tab 第二个分页]]
内容
[[/tab]]
[[/tabview]]
这是一个长分页。长分页里面有许多文字。
这是一个长分页。长分页里面有许多文字。
这是一个长分页。长分页里面有许多文字。
这是一个长分页。长分页里面有许多文字。
这是一个长分页。长分页里面有许多文字。
这是一个长分页。长分页里面有许多文字。
这是一个长分页。长分页里面有许多文字。
这是一个长分页。长分页里面有许多文字。
这是一个长分页。长分页里面有许多文字。
这是一个长分页。长分页里面有许多文字。
这是一个长分页。长分页里面有许多文字。
这是一个长分页。长分页里面有许多文字。
内容。
| 这是一个 | 表格 |
|---|---|
| 制作它的 | 方法 |
| 请查询维基语法。 | |
| 这是一个 | 三线表格 |
|---|---|
| 三线表格 | 需要被 |
| 包裹在[[div class="three-line"]]中。这使表格看起来更简洁。 内容长一些更好看。 |
|
> blockquote
[[div class="blockquote"]]
[[code]]
[[div class="code"]]
[[div class="lightblock"]]
[[div class="darkblock"]]
[[div class="styled-quote"]]
[[div class="dark-styled-quote"]]
[[div class="lightblock radius"]]
更圆的角!
[[div class="lightblock shadow"]]
更重的阴影!
[[note]]
墙是黄的
[[span class="bblock"]]
[[span class="dblock"]]
[[span class="keycap"]]
[[span class="ruby"]][[span class="rt"]]
[[div class="meta-title"]]
请按如下方式引用此页:
“版式:清新”,作者 bleuboat,来自后室中文维基。原文链接:http://backrooms-wiki-cn.wikidot.com/theme:fresh。遵循 CC BY-SA 3.0 协议。
图像名: Selective focus photo of green vine
图像作者: Goutham Krishna
授权协议: Unsplash 协议
来源链接: https://unsplash.com/photos/selective-focus-photo-of-green-vine-h5wvMCdOV3w
图像名: Green mountain across body of water
图像作者: Kalen Emsley
授权协议: Unsplash 协议
来源链接: https://unsplash.com/photos/green-mountain-across-body-of-water-Bkci_8qcdvQ
图像名: rain-3524800_1280.jpg
图像作者: Bru-nO
授权协议: Pixabay 协议
来源链接: https://pixabay.com/zh/photos/rain-umbrella-protection-water-wet-3524800/
图像名: Blue body of water during daytime
图像作者: Carter Baran
授权协议: Unsplash 协议
来源链接: https://unsplash.com/photos/blue-body-of-water-during-daytime-Nzhh2y5f0cg
图像名: OGLevel0.jpg
图像作者: Bob Mazza
授权协议: CC0 1.0 协议
来源链接: https://archive.org/details/backrooms-photos/807OREGON/dsc00686.jpg
图像名: c588bed.jpg
图像作者: Mo
授权协议: Unsplash 协议
来源链接: https://unsplash.com/photos/a-person-flying-in-the-air-p8t3Q0_ot1Q
图像名: Poolrooms-1.jpg
图像作者: AnarkyMusic
授权协议: CC-BY-SA 4.0 协议
来源链接: https://backrooms-wiki.wdfiles.com/local--files/level-37/Poolrooms-1.jpg
图像名: balconyroomsbanner.jpg
图像作者: DALL·E 2
授权协议: CC-BY-SA 3.0 协议
来源链接: https://backrooms-wiki.wikidot.com/local--files/level-371/balconyroomsbanner.jpg
更多授权相关信息,请查阅授权指导。
预设
要使用预设,请将引用语句修改为:
[[include :backrooms-wiki-cn:theme:fresh
|预设方案1
|预设方案2
]]
功能预设
预设:窄屏
|narrow=a使你的页面变窄。
预设:移除标题
|hide-title=a移除页面的标题。
预设:全屏背景
|full-bg=a移除背景的横向渐变。推荐搭配较浅的背景,也可搭配下面的外观预设。
预设:固定背景
|fixed-bg=a使背景固定在屏幕上。
外观预设
预设:青山
|mountain=a山。
预设:海洋
|sea=a海。
预设:大雨
|rain=a雨。可以将其作为暗色样式的基础。
预设:后室
|br=a假如你不小心在错误的地方从现实中切出…
以下预设修改自飘渺愿景。
预设:迷恋乐章
|obssession=a
|full-bg=a
预设:崇高舞曲
|sublimity=a
|full-bg=a
预设:黯然曲调
|despondency=a
|full-bg=a:root { --accent-color: 52, 180, 88; --background-image: url("https://images.unsplash.com/photo-1518173946687-a4c8892bbd9f"); --background-color: 246, 246, 246; --text-color: 51, 51, 51; --light-color-1: 252, 252, 252; --light-color-2: var(--light-color-1); --dark-color-1: var(--accent-color); --dark-color-2: var(--accent-color); --dark-color-3: var(--accent-color); --dark-color-4: var(--accent-color); --link-color: var(--accent-color); --hover-link-color: var(--link-color), 0.7; --visited-link-color: var(--link-color); --selected-background-color: var(--accent-color), 0.2; --selected-text-color: ; --general-blur: 0; --general-button-text-color: var(--general-light-text-color); --general-button-background-color: var(--general-light-background-color); --general-hover-button-text-color: var(--accent-color); --general-hover-button-background-color: var(--general-button-background-color); --main-header-height: 8.5rem; --main-header-height-on-mobile: 8.5rem; --header-width: 66rem; --header-margin: max(calc((100% - var(--header-width)) / 2), 1rem); --logo-image: none; --header-title-font-size: 3.5rem; --header-title-font-size-on-mobile: 2.15rem; --header-subtitle-font-size: 1.35rem; --header-subtitle-font-size-on-mobile: 0.8rem; --search-icon-width-on-mobile: 1rem; --header-background-image: none; --header-extra-background-image: none; --topbar-height-on-mobile: var(--topbar-height); --topbar-font-size-on-mobile: var(--topbar-font-size); --topbar-text-color: var(--general-light-text-color); --topbar-hover-text-color: var(--accent-color); --topbar-background-color: var(--general-light-background-color); --topbar-hover-background-color: 0, 0, 0, 0; --topbar-hover-border-color: 0, 0, 0, 0; --topbar-drop-text-color: var(--topbar-text-color); --topbar-drop-hover-text-color: var(--topbar-hover-text-color); --topbar-drop-background-color: var(--topbar-background-color); --topbar-drop-hover-background-color: 0, 0, 0, 0; --topbar-drop-shadow-color: var(--general-shadow-color), 0.06; --header-username-color: var(--header-text-color); --account-button-text-color: var(--header-text-color); --account-button-hover-text-color: var(--accent-color); --account-button-background-color: 0, 0, 0, 0; --account-button-hover-background-color: 0, 0, 0, 0; --account-drop-hover-text-color: var(--accent-color); --account-drop-hover-background-color: 0, 0, 0, 0; --body-width: 66rem; --page-tag-border-color: var(--general-strong-border-color); --page-tag-title-color: var(--text-color); --page-tag-text-color: var(--text-color); --page-tag-hover-text-color: var(--accent-color); --page-tag-background-color: 0, 0, 0, 0; --page-tag-hover-background-color: 0, 0, 0, 0; --footer-background-color: 0, 0, 0, 0; --license-background-color: 0, 0, 0, 0; --footer-text-color: var(--text-color), 0.5; --license-text-color: var(--footer-text-color); --sidebar-media-background-color: 0, 0, 0, 0; --sidebar-title-background-color: var(--general-dark-background-color); --sidebar-hover-background-color: var(--general-medium-border-color); --edit-area-background-color: var(--general-light-background-color); --hovertip-border-color: var(--general-strong-border-color); --imageblock-border-color: var(--general-strong-border-color); --hr-color: var(--general-strong-border-color); --tabview-border-width: 0.15rem; --tabview-horizon-color: 0, 0, 0, 0; --tabview-content-background-color: var(--general-light-background-color); --table-background-color: var(--general-light-background-color); --table-text-color: var(--general-light-text-color); --note-background-color: 255, 255, 136; --note-text-color: var(--text-color); --popup-fader-color: 0, 0, 0, 0.2; --popup-tip-color: var(--text-color); --white-monochrome: var(--light-color-1); --thread-accent-color: var(--general-light-background-color); } body, html { -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scrollbar-width: thin; } ::-webkit-scrollbar { width: 0.5rem; height: 0.5rem; } ::-webkit-scrollbar-track { background: rgba(var(--scrollbar-background-color)); } ::-webkit-scrollbar-thumb { background: rgba(var(--scrollbar-color)); } a:is(:hover, :active, :focus, :focus-within) { -webkit-text-decoration: underline 0.1em; } #side-bar .menu-item a { transition: background var(--general-transition-time-fast); } #file-comments { padding: 0.2em 0.5em; } table.page-files .highlight { background: rgba(var(--action-area-border-color)) } .pager a, .pager .current, .pager .dots { transition: background var(--general-transition-time-slow), color var(--general-transition-time-slow); } #action-area h1 + p + h2 ~ div[style="padding-left:3em;"] > div { align-items: center; } #edit-meta-newtag-form > table { display: flex; align-items: center; } #edit-meta-newtag-form > table :is(tbody, tr) { display: contents; } #edit-meta-newtag-form > table td { display: block; } #edit-meta-newtag-form > table td:nth-child(2n) { flex: 1; } #edit-meta-newtag-form > table td input { width: 100%; box-sizing: border-box; border: none; background: rgba(var(--edit-area-textarea-background-color)); color: rgba(var(--edit-area-textarea-text-color)); padding: 0.2em 0.5em; margin: 0; outline: none; transition: box-shadow var(--general-transition-time-slow); font-weight: 500; } #edit-meta-newtag-form > table td input:focus-visible { box-shadow: 2px 2px 0 rgba(var(--edit-area-textarea-border-color)), -2px 2px 0 rgba(var(--edit-area-textarea-border-color)), -2px -2px 0 rgba(var(--edit-area-textarea-border-color)), 2px -2px 0 rgba(var(--edit-area-textarea-border-color)); } #edit-meta-newtag-form > div { margin: 1rem 0; padding: 0 !important; display: flex; grid-gap: 1rem; } hr { background: transparent; } [class|=colmod-link] { margin: 1rem 0; } .yui-navset .yui-nav li a, .yui-navset .yui-nav li.selected a { transition: color var(--general-transition-time-slow); } .hl-default, .hl-code, .hl-brackets, .hl-identifier { color: inherit; } #toc #toc-action-bar { top: 0.25rem; } :where(ol ul, ul ul) { list-style-type: circle; } .join-box a { color: rgba(var(--general-button-text-color)); background: rgba(var(--general-button-background-color)); } .join-box a:is(:hover, :active, :focus, :focus-within) { color: rgba(var(--general-hover-button-text-color)); background: rgba(var(--general-hover-button-background-color)); } .forum-thread-box .description-block { padding: 0.5em 1em; } .thread-container .post .long { padding: 0.5em; } #page-content > div.forum-thread-box > div.options, .post-container > .post > div.long > div.options { display: flex; justify-content: flex-end; } .signature { display: none; } .notepaper { max-width: 100%; } .bettercollap .collapsible-block-unfolded-link, .bettercollap .collapsible-block-folded { margin: 0; } @media (pointer: coarse) { #login-status #account-options:hover, #login-status #account-topbutton:hover + #account-options { opacity: 1; pointer-events: all; } } @keyframes fresh-fade-in { from { opacity: 0; } to { opacity: 1; } } a { text-decoration: underline; text-decoration-thickness: 0.1em; text-decoration-color: transparent; transition: color 0.15s, text-decoration-color 0.15s; } a:is(:hover, :active, :focus, :focus-within) { text-decoration-color: currentColor; } #extra-div-1 { position: absolute; top: 0; left: 0; width: 100%; height: 100vh; -webkit-mask-image: linear-gradient(to top, transparent, black 80%); mask-image: linear-gradient(to top, transparent, black 80%); } #extra-div-1 span { display: block; width: 100%; height: 100%; -webkit-mask-image: linear-gradient(to right, transparent, black); mask-image: linear-gradient(to right, transparent, black); background: var(--background-image); background-size: cover; background-repeat: no-repeat; } #container-wrap { position: relative; z-index: 1; } #header { grid-template-areas: "h1" "h1"; position: relative; top: 0; } #header h1 a span { padding-top: 3rem; color: rgba(var(--text-color)); align-items: flex-start; text-shadow: none; grid-gap: 0; } #top-bar { position: absolute; bottom: 0; right: var(--header-margin); width: min(calc(var(--header-width) * 0.45), 45%); height: var(--topbar-height); padding: 0; background: transparent; pointer-events: none; } #top-bar div[class*=top-bar] > ul { grid-gap: 0.5rem; justify-content: flex-end; } #top-bar div[class*=top-bar] > ul > li { pointer-events: auto; flex: 0 1 7.5rem; position: relative; } #top-bar div[class*=top-bar] > ul > li > a, #top-bar .mobile-top-bar .open-menu a { background: rgba(var(--topbar-background-color)); border-radius: 1rem; box-shadow: 0 0.15rem 0.4rem rgba(var(--general-shadow-color), 0.06); font-weight: 400; transition: color var(--general-transition-time-slow); } #top-bar div[class*=top-bar] > ul > li > ul { top: 100%; border-radius: 1rem; box-shadow: 0 0.15rem 0.4rem rgba(var(--topbar-drop-shadow-color)); border: none; flex-direction: column; flex-wrap: nowrap; } #top-bar div[class*=top-bar] > ul > li > ul > li { border-radius: 1rem; border: none; flex-basis: auto; } #top-bar div[class*=top-bar] > ul > li > ul > li:nth-child(2n):nth-last-child(2) { box-shadow: none; } #top-bar div[class*=top-bar] > ul > li > ul > li > a { border-radius: 1rem; transition: color var(--general-transition-time-slow); } #top-bar .mobile-top-bar { padding-bottom: 0.15rem; } #top-bar .mobile-top-bar .open-menu { display: contents; } #top-bar .mobile-top-bar .open-menu a { pointer-events: auto; position: fixed; top: 0.5rem; left: 0.5rem; width: 3rem; height: 3rem; border: 0.15rem solid rgba(var(--general-medium-border-color)); border-radius: 50%; box-sizing: border-box; transition: border-color var(--general-transition-time-slow); } #top-bar .mobile-top-bar .open-menu a::before { transition: background var(--general-transition-time-slow); } #top-bar .mobile-top-bar .open-menu a:is(:hover, :active, :focus, :focus-within) { border-color: rgba(var(--general-dark-border-color)); } #login-status, #search-top-box { right: var(--header-margin); font-weight: 400; } #login-status { top: 1rem; } a#account-topbutton, #search-top-box-form .button { transition: color var(--general-transition-time-slow); } #account-options { font-size: 0.8rem; border: none; border-radius: 0.8rem; box-shadow: 0 0.15rem 0.4rem rgba(var(--topbar-drop-shadow-color)); transition: opacity var(--general-transition-time-fast) ease-in-out; } #account-options li a { height: 1.6rem; border-radius: 0.8rem; transition: color var(--general-transition-time-slow); } #main-content { background: rgba(var(--general-light-background-color), 0.8); color: rgba(var(--general-light-text-color)); margin: 2.5rem var(--body-margin); padding: 1rem 3rem; border-radius: 1.25rem; box-shadow: 0 0.15rem 1rem rgba(var(--general-shadow-color), 0.05); box-sizing: border-box; } #page-title { margin-top: 1rem; } .page-tags::before { display: none; } .page-tags span { align-items: center; padding: 0.4rem; box-sizing: border-box; } .page-tags span::before { content: "标签:"; } .page-tags span a { border: calc(1rem / 15) solid rgba(var(--general-medium-border-color)); border-radius: 1em; padding: 0.1rem 0.6rem; transition: color var(--general-transition-time-fast), border-color var(--general-transition-time-fast); } .page-tags span a:is(:hover, :active, :focus, :focus-within) { border-color: rgba(var(--general-dark-border-color)); } #page-options-container { margin: 0; } .page-watch-options { padding-bottom: 0.5rem; } div[id*=page-options-bottom] { grid-gap: 0; margin: 0; } div[id*=page-options-bottom] > a { height: 2.25rem; padding: 0 0.5rem; } #footer { padding: 0 1rem; text-align: center; } #license-area { padding: 0.5em 1rem 2.5rem; font-size: 0.8rem; } #side-bar { border: none; } #side-bar .heading, #side-bar .collapsible-block-unfolded-link a, #side-bar .collapsible-block-folded a { text-shadow: none; } div[id*=page-options-bottom] > a, .edit-help-34 a, .change-textarea-size a, div.buttons input, input.button, button, file, a.button, #edit-page-form div.buttons input, a.action-area-close, #view-diff-div > p > a, #upload-userfile[type=file]::file-selector-button, table.page-history tr td:nth-child(4) a, .page-options-bottom a, .owindow .button-bar > a:not([onclick*=cleanAll]), .owindow div[style*=margin-top] a { border-bottom: 0.15rem solid rgba(var(--general-medium-border-color)); transition: color var(--general-transition-time-fast); } #side-bar, #edit-page-form, #new-post-form, .preview-message, .page-source, .scp-image-block, .yui-navset, table.wiki-content-table, blockquote, .blockquote, .code, #toc, .footnotes-footer, .bibitems, .owindow, div.modalbox, div.infobox, div.rate-box-with-credit-button, div.page-rate-widget-box, div.creditButtonStandalone, .lightblock, .darkblock, .styled-quote, .dark-styled-quote { box-shadow: 0 0.15rem 0.8rem rgba(var(--general-shadow-color), 0.06); } #edit-page-form, #new-post-form, .page-source, .hovertip, .scp-image-block, blockquote, .blockquote, .code, #toc, .footnotes-footer, .bibitems, .owindow, div.modalbox, div.infobox, .lightblock, .darkblock, .styled-quote, .dark-styled-quote { border-radius: 0.25rem; } #upload-userfile[type=file]::file-selector-button, .scp-image-block, div.wiki-note, .owindow, div.modalbox, div.infobox { border: none; } #action-area, #view-diff-div:not(:empty), .preview-message, #who-rated-page-area:not(:empty), #history-subarea, #file-action-area:not(:empty), #st-action-area:not(:empty), #edit-meta-newtag, #rename-backlinks-box { animation: fresh-fade-in var(--general-transition-time-fast) ease-in-out; } input.text, textarea, #upload-userfile[type=file] { box-shadow: 0 0 0 calc(1rem / 15) rgba(var(--general-medium-border-color)); } :is(#wd-editor-toolbar-panel, #np-editor-panel) a::before { transition: background var(--general-transition-time-fast); } :is(#wd-editor-toolbar-panel, #np-editor-panel) div > ul > li > ul { left: auto; opacity: 0; pointer-events: none; transition: opacity var(--general-transition-time-fast) ease-in-out; } :is(#wd-editor-toolbar-panel, #np-editor-panel) div > ul > li:hover > ul { border: none; opacity: 1; pointer-events: auto; } :is(#wd-editor-toolbar-panel, #np-editor-panel) div > ul > li > ul > li > a { border-bottom: calc(1rem / 15) solid rgba(var(--general-strong-border-color)); } #upload-userfile[type=file]::file-selector-button { border-right: calc(1rem / 15) solid rgba(var(--general-medium-border-color)); } .pager { border-bottom: var(--tabview-border-width) solid rgba(var(--tabview-border-color)); } .pager a, .pager .current, .pager .dots { color: rgba(var(--tabview-button-text-color)); background: rgba(var(--tabview-button-background-color)); } .pager a:is(:hover, :active, :focus, :focus-within) { color: rgba(var(--tabview-hover-button-text-color)); background: rgba(var(--tabview-hover-button-background-color)); } .pager .current { color: rgba(var(--tabview-selected-button-text-color)); background: rgba(var(--tabview-selected-button-background-color)); } #st-action-area > a { color: rgba(var(--link-color)); text-decoration: none; } #action-area h1 + p + h2 ~ div[style="padding-left:3em;"] > div a { transition: color var(--general-transition-time-fast); } .hovertip { animation: fresh-fade-in var(--general-transition-time-fast) ease-in-out; font-weight: 400; border-width: 0 0 0.15rem 0 !important; } .scp-image-block img { border-radius: 0.25rem 0.25rem 0 0; } .scp-image-caption { border-bottom: var(--imageblock-border-width) solid rgba(var(--imageblock-border-color)); border-radius: 0 0 0.25rem 0.25rem; } .yui-navset { width: auto; margin: 1rem 0; } .yui-navset .yui-nav li, .yui-navset .yui-nav li.selected { box-shadow: none; border-bottom: var(--tabview-border-width) solid rgba(var(--tabview-border-color)); } .yui-navset .yui-nav li a em, .yui-navset .yui-nav li.selected a em { padding: 0.4em 0.6em; } .yui-navset .yui-content { box-shadow: none; border-bottom: var(--tabview-border-width) solid rgba(var(--general-medium-border-color)); } div.wiki-note { padding: 0.5rem 1rem; font-weight: inherit; box-shadow: 0 0.5rem 1rem rgba(var(--general-shadow-color), 0.06); background-image: linear-gradient(transparent, rgba(255, 255, 255, 0.2)); } #odialog-container, .owindow.osuccess { animation: fresh-fade-in var(--general-transition-time-fast) ease-in-out; } .owindow.owait .content, .owindow.owait .content:before, .owindow.owait .content:after { border-radius: 0.1rem; } .owindow .title, div.modalbox > div:first-child, div.infobox-title { border-radius: 0.25rem 0.25rem 0 0; } .owindow .button-bar > a[onclick*=cleanAll], div.modalbox::after, div.infobox::after { font-weight: 500; } .owindow .content > img + h1 + table, .owindow .content > img + h1 + table td, div.creditBottomRate { border-color: rgba(var(--general-medium-border-color)); } div.creditBottomRate div.page-rate-widget-box { box-shadow: none; } .bblock:is(:hover, :focus-within) { color: rgb(var(--general-light-background-color)); } .keycap { box-shadow: 0 0.15em rgba(var(--general-strong-border-color)); } .licensebox a.collapsible-block-link { opacity: 1; color: rgba(var(--link-color)); transition: color 0.15s; } .licensebox a.collapsible-block-link:is(:hover, :active, :focus, :focus-within) { color: rgba(var(--hover-link-color)); } .sd-container { --sd-border: var(--text-color); --sd-symbol: var(--general-dark-text-color); --sd-bullets: var(--text-color); } #page-content .radius { border-radius: 1rem; } .hovertip, #page-content .shadow { box-shadow: 0 0.15rem 1rem rgba(var(--general-shadow-color), 0.12); } .three-line table.wiki-content-table { --table-border-color: var(--general-dark-border-color); --table-header-background-color: var(--table-background-color); --table-header-text-color: var(--table-text-color); border: rgba(var(--table-border-color)) 0.2rem solid; border-left: none; border-right: none; } .three-line table.wiki-content-table :is(th, td) { padding: 0.5em 0.75em; border-left: none; border-right: none; } @media only screen and (max-width: 1024px) { #login-status { right: calc(var(--header-margin) + 0.5rem + var(--search-icon-width-on-mobile)); } #search-top-box { right: var(--header-margin); top: 1.1rem; height: var(--search-icon-width-on-mobile); } #search-top-box-form .button.btn { background: currentColor; -webkit-mask-size: 100%; mask-size: 100%; -webkit-mask-position: 0 0; mask-position: 0 0; } #main-content { padding: 0.5rem 2rem; } } @media only screen and (max-width: 540px) { #header { grid-template-areas: "h1" "topbar"; } #top-bar { position: relative; right: 0; width: 100%; padding: 0 var(--header-margin); } #top-bar div[class*=top-bar] > ul > li { position: static; flex: auto; padding-bottom: 0.15rem; } #top-bar div[class*=top-bar] > ul > li > ul { flex-direction: row; flex-wrap: wrap; } #top-bar div[class*=top-bar] > ul > li > ul > li { flex-basis: 40%; } #main-content { padding: 0.01rem 1rem; } }
