/*
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('https://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('https://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='https://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(https://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(https://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(https://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("https://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(https://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(https://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%;
}
}
Navla
