정보
분석심리학부 블랙하이라이터 테마
저자: Navla
작가의 말: 분석심리학부의 테마입니다. 단순한 테마일 뿐 아니라 블랙하이라이터 테마에 대한 제 개인적인 취향을 첨가했고, 몇몇 버그들까지 고쳤습니다.
license:
Filename: rdbk.png & rdbk_black.png
Summary: 뒤에 들어가는 반복 패턴 입니다.
Author:Navla
License: CC BY-SA 3.0
Source Link: 어도비 일러스트레이터로 직접 제작했습니다. 칼 융의 레드북의 삽화를 참고하여 그 스타일을 흉내내었습니다.
Filename: mandala.png
Summary: 칼 융의 만다라 입니다.
Author: TheCreativePenn
License: CC BY 2.0
Source Link: https://wordpress.org/openverse/image/6f44010b-1cf3-42d4-b8bc-21d6b3045dd5
중요! : 이 테마는 버려졌습니다. 현재는 분석심리학부 테마로 갈아탄 상태이므로, 이왕이면 저쪽 테마를 사용해 주세요.
이건 분석심리학부를 위한 전용 테마입니다. 로고와 패턴은 모두 Navla가 제작했습니다.
존재학부 하이라이터의 코드를 많이 참고했습니다. 감사합니다. Denevola님.
사용법
이 테마를 사용하려면 아래 코드를 작품에 붙여넣으세요.
[[include :scpko:theme:black-highlighter-theme]]
[[include :scpko:theme:doap-bhl]]
그리고 이 테마는 다음 컴포넌트를 포함하고 있습니다.

이미지 블록
사용례
수평줄은 하이픈 5개 "------"를 치면 만들어지며, 따로 들어 있는 곳 (인용 블록 등) 이 없다면 페이지 전체를 가로지릅니다. 이 글에서 섹션을 나누는 줄은 모두 이 수평줄입니다.
제목은 문장 처음에 "+"을 1개부터 6개까지 입력해서 적용할 수 있습니다.
탭 뷰입니다.
봐요, 글자 더 있음.
대단하죠.
긴 탭입니다. 많은 글자가 들어가죠.
긴 탭입니다. 많은 글자가 들어가죠.
긴 탭입니다. 많은 글자가 들어가죠.
긴 탭입니다. 많은 글자가 들어가죠.
긴 탭입니다. 많은 글자가 들어가죠.
긴 탭입니다. 많은 글자가 들어가죠.
긴 탭입니다. 많은 글자가 들어가죠.
긴 탭입니다. 많은 글자가 들어가죠.
긴 탭입니다. 많은 글자가 들어가죠.
긴 탭입니다. 많은 글자가 들어가죠.
긴 탭입니다. 많은 글자가 들어가죠.
긴 탭입니다. 많은 글자가 들어가죠.
오늘 승리의 여신은 나에게만 입맞춤해
이것은 인용구로 각 줄의 시작에 ">"를 넣으면 작동합니다.
글자
구분선
이중 인용문
삼중 인용문1
이것은 | 표 |
---|---|
만드는 법은 | 이미 아실 거라 |
생각합니다 |
클래스
분석심리학부의 글을 쓸 때 유용히 사용할 수 있는 서식들을 미리 몇개 넣어 놓았습니다.
분석심리학부 텍스트박스
[[div class="box"]]
여기에 내용을 입력
[[/div]]
박스는 이렇게 생겼습니다.
뒤에 배경 보이시나요? 이렇게 분석심리학부의 로고가 배경에 깔립니다.
분심부의 로고는 인간의 정신의 4가지 외적 기능을 형상화 했습니다.
레드북 텍스트박스
[[div class="redbook"]]
여기에 내용을 입력
[[/div]]
박스는 이렇게 생겼습니다.
뒤에 배경 보이시나요? 이렇게 특정한 패턴이 배경에 깔립니다.
이 패턴은 칼 융의 저서 '레드북'에 담긴 그의 삽화를 모티프로 하였습니다.
그의 삽화에는 이와 같은 특유의 패턴이 자주 사용됩니다.
태양십자 헤더
분석심리학부의 중요한 상징인 태양십자를 간편히 가져올 수 있는 코드 입니다.
[[span class="suncross"]]여기에 내용을 입력[[/span]]
이렇게 하면 텍스트 앞에 태양십자 심볼이 포함된 헤더가 출력됩니다.
이런 식으로 나옵니다.
크기는 제목 3단계와 동일합니다.
환영
[[div class="vision"]]
여기에 내용을 입력
[[/div]]
(곧 찾아뵙게 될) 싱크로니시티 연작에서 칼 융 박사의 환영을 묘사하기 위해 넣을 예정인 div구문입니다.
만다라
[[div class="mandala-box"]]
여기에 내용을 입력
[[/div]]
칼 융이 직접 그린 만다라 이미지가 포함된 텍스트 박스입니다.
칼 융은 만다라는 곧 우리 정신의 지도라고 생각했습니다.
그렇기에 그는 환자들에게 만다라를 그리게 하여 정신질환의 진단에 사용하기도 했습니다.
이 이미지의 주소는 http://scpko.wdfiles.com/local--files/theme%3Adoap-bhl/mandala.png 입니다.
소스 코드
/* Department of Analytical Psychology BHL Theme [2022 Wikidot Theme] Created by Navla Based on Ontology Department Highlighter Theme by Denevola & Black Highlighter Theme created by Woedenaz and Croquembouche. */ @import url('http://scpko.wdfiles.com/local--files/unfont/UnBatang.css'); @import url('https://fonts.googleapis.com/css?family=Nanum+Myeongjo'); :root:lang(ko) { --theme-base: "black-highlighter"; --theme-id: "department-of-analytical-psychology"; --theme-name: "DoAP BHL Theme"; /* Header */ --logo-image: url('http://scpko.wdfiles.com/local--files/department-of-analytical-psychology/DoAP-blackline.png'); --header-title: "분석심리학부"; --header-subtitle: "사고, 감정, 감각, 직관"; /* Typefaces */ --header-font: 'UnBatang', serif; --title-font: 'UnBatang', serif; /* Standard Colors */ --white-monochrome: 255, 255, 255; --pale-gray-monochrome: 250, 250, 250; --light-pale-gray-monochrome: 250, 250, 250; --pale-accent: 183, 28, 65; --bright-accent: 168, 42, 67; --medium-accent: 107, 16, 36; --dark-accent: 107, 16, 36; --header-gradient-color-top: 18, 0, 5; /* Header Gradients */ --gradient-header: linear-gradient( 175deg, rgb(var(--header-gradient-color-bottom)) 0%, rgb(var(--header-gradient-color-top)) 100% ); --diagonal-stripes: repeating-linear-gradient( 45deg, hsla(0,0%,100%,0), hsla(0,0%,100%,0) 0.5vh, rgba(88,88,88,.1) 0.7vh, rgba(88,88,88,.2) 1vh ); /* Sidebar Button */ --toggle-button-bg: rgba(var(--dark-accent),.25); --toggle-border-color: rgb(var(--bright-accent)); --toggle-border-width: 4px; --toggle-icon-color: rgb(var(--bright-accent)); --toggle-roundness: 20%; --suncross: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M929.21,506a50,50,0,1,0,50,50A50,50,0,0,0,929.21,506Zm33,42h-25v-25A34.12,34.12,0,0,1,962.25,548Zm-41-25v25h-25A34.11,34.11,0,0,1,921.21,522.93Zm-25,41h25v25A34.08,34.08,0,0,1,896.17,564Zm41,25V564h25A34.11,34.11,0,0,1,937.21,589Z' transform='translate(-879.21 -505.97)'/%3E%3C/svg%3E"); } /* --------<MY TASTE>-------- */ #page-title, .meta-title { text-align: center; font-size: 2em; } p { display: block; margin-block-start: .6em; margin-block-end: .6em; margin-inline-start: 0px; margin-inline-end: 0px; } /* I don't like header size changes in mobile */ h1 { font-size: 2em; } h2 { font-size: 1.75em; } h3 { font-size: 1.5375em; } h4 { font-size: 1.3625em; } h5 { font-size: 1.15em; } h6 { font-size: 1em; } h1, h2, h3, h4, h5, h6 { margin: 0 !important; } /* mobile topbar hovering remove(i don't like it) */ /* And it fixes a bug where #main-content was pushed to the right when text was zoomed in on the safari browser. */ @media only screen and (max-width: 56.25rem) { @supports (display:grid) { #header { position: static; } } } .yui-navset .yui-content, .yui-navset .yui-navset-top .yui-content { padding: 0.25em 1em; } /* why no 'overflow: hidden;'? */ hr { background-color: rgb(var(--dark-accent)); margin: 1em 2em; border-top: .0625rem solid rgb(var(--bright-accent)); overflow: hidden; } /* --------<STYLING>-------- */ #header h1 a { margin-top: calc(var(--header-height-on-desktop)/2 - .75em); font-family: var(--title-font), serif; } #header h2 span { font-family: var(--title-font), serif; margin-top: calc(var(--header-height-on-mobile)/2 + var(--header-h1-font-size)/2 + 2em); } @media only screen and (max-width: 768px) { #header h1 a { margin-top: calc(var(--header-height-on-mobile)/2 - 1.345rem); } #header h2 span { margin-top: calc(var(--header-height-on-mobile)/2 + var(--header-h1-font-size)/2 + 2em); } } #side-bar .close-menu::before, #side-bar .close-menu::after { height: 2.5rem; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } #side-bar .close-menu::before { -webkit-mask-size: 50%; mask-size: 50%; } /* redbook pattern */ div#container { background: url(http://scpko.wdfiles.com/local--files/theme%3Adoap-bhl/rdbk_black.png) repeat-x 0px -60px; background-size: 341px 220px; } #content-wrap { background: linear-gradient(rgba(var(--white-monochrome),.78), white 100px, white calc(100% - 100px), rgba(var(--white-monochrome),.78)) fixed, url(http://scpko.wdfiles.com/local--files/theme%3Adoap-bhl/rdbk.png) repeat 30% top local; } @media only screen and (max-width: 768px) { #content-wrap { background: linear-gradient(rgba(var(--white-monochrome),.78), white 200px, white calc(100% - 200px), rgba(var(--white-monochrome),.78)), url(http://scpko.wdfiles.com/local--files/theme%3Adoap-bhl/rdbk.png) repeat 30% top; } } /* header under line */ #main-content h1 span, #main-content h2 span, h3 span, .suncross { margin: .5em 0 0 .2em; background: linear-gradient(transparent 60%, rgba(var(--bright-accent),.08) 60%, rgba(var(--bright-accent),.08) 90%, transparent 90%, transparent 100%); display: inline; } h4 span, h5 span, h6 span { margin: .5em 0 0 .2em; } /* more intuitive list padding */ li, p { line-height: 1.65 } li li { padding: 1px 0px; } li { padding: 2px 0px; } /* more intuitive link style */ #page-content p a:not(a.fa.fa-info, div.open-menu-btn>p>a) { background: linear-gradient(transparent 60%, rgba(var(--bright-accent),.1) 60%, rgba(var(--bright-accent),.1) 90%, transparent 90%, transparent 100%); } #page-content li a:not(ul.yui-nav>li>a, div#np-editor-panel.wd-editor-toolbar-panel a) { background: linear-gradient(transparent 60%, rgba(var(--bright-accent),.1) 60%, rgba(var(--bright-accent),.1) 90%, transparent 90%, transparent 100%); } #page-content span a:not(div.page-rate-widget-box span a, span.printuser.avatarhover>a) { background: linear-gradient(transparent 60%, rgba(var(--bright-accent),.1) 60%, rgba(var(--bright-accent),.1) 90%, transparent 90%, transparent 100%); } #page-content p a { text-decoration-line: none; color: auto; background-color: transparent; transition-property: all; transition: 0.2s ease-in; } #page-content li a { text-decoration-line: none; } #page-content p a:hover, #page-content li a:hover { background: none; background-color: rgb(var(--bright-accent)) !important; color: #FFF; text-decoration-line: none; } /* stylish comment section */ .thread-container .post .head { box-shadow: inset .125rem .1rem .2rem var(--box-shadow); background: linear-gradient(167deg, transparent 15%, rgba(var(--bright-accent),0.2)); } .btn-sm { box-shadow: 1.5px 1.5px 3px rgb(0 0 0 / 20%) !important; } /* --------<CUSTOM CLASS>-------- */ .box { background: url("http://scpko.wdfiles.com/local--files/department-of-analytical-psychology/DoAP_Black.png") center no-repeat; background-blend-mode: soft-light; background-color: #ffffffde; background-size: 75%; border: solid 2px #000; padding: 5px 15px; box-shadow: 2px 3px 5px rgb(0 0 0 / 30%); margin: 1.5em 2em; } @media only screen and (max-width: 479px) { .box { margin: 1em 0em; } } .redbook { background: linear-gradient(rgba(var(--white-monochrome),.78), white 100px, white calc(100% - 100px), rgba(var(--white-monochrome),.78)), url(http://scpko.wdfiles.com/local--files/theme%3Adoap-bhl/rdbk.png) repeat 30% top; border: solid 2px #000; padding: 5px 15px; box-shadow: 2px 3px 5px rgb(0 0 0 / 30%); margin: 2em 1em; } /* Ꚛ Vocatus atque non vocatus deus aderit Ꚛ */ .suncross { line-height: 1.4; font-family: var(--header-font); font-size: 1.5375em; font-weight: 700; margin: 0 0 .5em; } .suncross:before { content: ""; background-color: rgb(var(--dark-accent)); mask: var(--suncross); -webkit-mask: var(--suncross); mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat; background-size: 1em 1em; width: 1em; height: 0.65em; display: inline-block; } .vision { font-family: 'Nanum Myeongjo', serif; margin: 2em 0em; padding: 1em 3em; text-align: center; --vision-color: 250, 245, 237; background: linear-gradient(90deg, rgba(var(--vision-color),0) 0%, rgba(var(--vision-color),1) 15%, rgba(var(--vision-color),1) 85%, rgba(var(--vision-color),0) 100%); z-index: -2; } @media only screen and (max-width: 768px) { .vision { padding: 1em 5%; margin: 0; --bg-color: rgba(250, 245, 237, 1); --tm-color: rgba(250, 245, 237, 0); --vision-color: 250, 245, 237; background: linear-gradient(90deg, rgba(var(--vision-color),0) 0%, rgba(var(--vision-color),1) 10%, rgba(var(--vision-color),1) 90%, rgba(var(--vision-color),0) 100%); } } .mandala-box { background: linear-gradient(white, #ffffffde 100px, #ffffffde calc(100% - 100px), white), url(http://scpko.wdfiles.com/local--files/theme%3Adoap-bhl/mandala.png) center no-repeat; background-size: 110%; border: solid 2px #000; padding: 5px 15px; box-shadow: 2px 3px 5px rgb(0 0 0 / 30%); margin: 2em 1em; } @media only screen and (max-width: 768px) { .mandala-box { background-size: 300%; } }
: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; }
@supports(display: grid) { :root { --sidebar-width-on-desktop: calc((var(--base-font-size) * (14 / 15)) * 19); --body-width-on-desktop: 45.75rem; } @media only screen and (min-width: 769px) { #side-bar .close-menu { display: block; position: fixed; top: 0.5rem; left: 0.5rem; width: 3rem; height: 3rem; background: unset; opacity: 1; pointer-events: all; z-index: -1; } #side-bar .close-menu img { color: transparent; } #side-bar .close-menu::before, #side-bar .close-menu::after { content: ""; box-sizing: border-box; position: fixed; display: block; top: 0.5rem; left: 0.5rem; width: 3rem; height: 3rem; padding: 0; margin: 0; text-align: center; pointer-events: all; cursor: pointer; transition: opacity var(--sidebar-transition-timing); } #side-bar .close-menu::before { --mask:url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' id='Hamburger' x='0' y='0' baseProfile='tiny' overflow='visible' version='1.2' viewBox='0 0 32 32' xml:space='preserve'%3E%3Cpath d='M4 10h24c1.1 0 2-.9 2-2s-.9-2-2-2H4c-1.1 0-2 .9-2 2s.9 2 2 2zm24 4H4c-1.1 0-2 .9-2 2s.9 2 2 2h24c1.1 0 2-.9 2-2s-.9-2-2-2zm0 8H4c-1.1 0-2 .9-2 2s.9 2 2 2h24c1.1 0 2-.9 2-2s-.9-2-2-2z'/%3E%3C/svg%3E"); z-index: -1; background-color: var(--toggle-icon-color, rgb(var(--sidebar-links-text))) !important; -webkit-mask: var(--mask); mask: var(--mask); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: 50% 50%; mask-position: 50% 50%; -webkit-mask-size: 60%; mask-size: 60%; } #side-bar .close-menu::after { z-index: -2; background-color: var(--toggle-button-bg, rgb(var(--sidebar-bg-color))) !important; border-radius: var(--toggle-roundness, 50%); border: var(--toggle-border-color, rgb(var(--sidebar-links-text))) var(--toggle-border-width, 0.25rem) solid; } #side-bar:focus-within .close-menu, #side-bar:not(:has(.close-menu:hover)):not(:focus-within):hover .close-menu { pointer-events: none; } #side-bar:focus-within .close-menu::before, #side-bar:focus-within .close-menu::after { opacity: 0; pointer-events: none; } #side-bar:not(:has(.close-menu:hover)):not(:focus-within):hover .close-menu::before, #side-bar:not(:has(.close-menu:hover)):not(:focus-within):hover .close-menu::after { opacity: 0; pointer-events: none; } #side-bar { display: block; position: fixed; top: 0; left: calc(var(--sidebar-width-on-desktop)*-1); z-index: 10; transition: left 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms; height: 100%; overflow-y: auto; overflow-x: hidden; margin-top: 0; } #side-bar:focus-within { left: 0; } #side-bar:not(:has(.close-menu:hover)):not(:focus-within):hover { left: 0; } #side-bar .side-block { margin-top: 1rem; background-color: rgb(0, 0, 0, 0); border-radius: 0; border-left-width: 0px; border-right-width: 0px; } #main-content::before { content: ""; display: block; position: fixed; top: 0; right: 0; z-index: -1; opacity: 0; transition: opacity 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms, width 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms; margin-left: var(--sidebar-width-on-desktop); background: rgba(var(--swatch-menubg-black-color), .3) 1px 1px repeat; padding-right: 0; width: 100%; height: 100vh; pointer-events: none; z-index: 99; } #side-bar:focus-within ~ #main-content::before { width: calc(100% - var(--sidebar-width-on-desktop)); opacity: 1; pointer-events: all; } #side-bar:not(:has(.close-menu:hover)):not(:focus-within):hover ~ #main-content::before { width: calc(100% - var(--sidebar-width-on-desktop)); opacity: 1; pointer-events: all; } @supports (-moz-appearance:none) and (background-attachment:local) and (not (-moz-osx-font-smoothing:auto)) { #side-bar { padding: inherit; } } #content-wrap { display: flex; flex-direction: row; width: calc(100vw - (100vw - 100%)); min-height: calc(100vh - calc(var(--final-header-height-on-desktop, 10.125rem))); flex-grow: 2; height: auto; position: relative; margin: 0 auto; max-width: inherit; } #main-content { width: 100%; position: initial; max-height: 100%; padding: 2rem 1rem; max-width: var(--body-width-on-desktop, 45.75rem); margin: 0 auto; } #page-content { max-width: min(90vw, var(--body-width-on-desktop, 45.75rem)); } @supports (-webkit-hyphens:none) { #side-bar { transition: left 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms, padding-right 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms, background-color 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms; padding-right: 0; background-color: rgb(0, 0, 0, 0); pointer-events: all; overflow-x: visible; overflow-y: visible; z-index: 999; } #side-bar::-webkit-scrollbar { opacity: 0; -webkit-transition: opacity 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms; transition: opacity 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms; } #side-bar .close-menu::before { z-index: 999; } #side-bar .close-menu::after { z-index: 998; } #side-bar:hover .close-menu::before, #side-bar:hover .close-menu::after { opacity: 0; } #side-bar:hover { left: 0; background-color: rgba(var(--swatch-menubg-color), 1); padding-right: 0; } #side-bar:hover::-webkit-scrollbar { opacity: 1; } #side-bar:hover~#main-content::before { width: calc(100% - var(--sidebar-width-on-desktop)); opacity: 1; pointer-events: all; } } } }