분석심리학부 하이라이터

정보

분석심리학부 블랙하이라이터 테마
저자: 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개까지 입력해서 적용할 수 있습니다.

▼ 제목들

탭 뷰입니다.

이것은 인용구로 각 줄의 시작에 ">"를 넣으면 작동합니다.
글자

구분선

이중 인용문

삼중 인용문¹

이것은	표
만드는 법은	이미 아실 거라
생각합니다

클래스

분석심리학부의 글을 쓸 때 유용히 사용할 수 있는 서식들을 미리 몇개 넣어 놓았습니다.

분석심리학부 텍스트박스

[[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%;
}
}

- 코드 숨기기

구성요소 코드 보기

+ Show component code

- Hide 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;
    }

구성요소 코드 보기

+ Show component code

- Hide component code

@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;
            }
        }
    }
}

ko 분석심리학부 테마

페이지 내역: 126, 마지막 수정: 11 Aug 2023 16:18

편집 평가 (+10) 태그 토론하기 (3) 내역 파일 인쇄 사이트 도구 + 설정

SCP 재단

확보, 격리, 보호

정보

license:

사용법

사용례

제목 1단계

제목 2단계

제목 3단계

제목 4단계

제목 5단계

제목 6단계

클래스

분석심리학부 텍스트박스

레드북 텍스트박스

태양십자 헤더

환영

만다라

소스 코드