잉크얼룩 테마 (월든 스튜디오 테마)

What this is

A bunch of miscellaneous CSS 'improvements' that I, Croquembouche, use on a bunch of pages because I think it makes them easier to deal with.

The changes this component makes are bunch of really trivial modifications to ease the writing experience and to make documenting components/themes a bit easier (which I do a lot). It doesn't change anything about the page visually for the reader — the changes are for the writer.

I wouldn't expect translations of articles that use this component to also use this component, unless the translator likes it and would want to use it anyway.

This component probably won't conflict with other components or themes, and even if it does, it probably won't matter too much.

Usage

On any wiki:

[[include :scp-wiki:component:croqstyle]]

This component is designed to be used on other components. When using on another component, be sure to add this inside the component's [[iftags]] block, so that users of your component are not forced into also using Croqstyle.

Related components

Other personal styling components (which change just a couple things):

• RSO Component — Rounderhouse

Personal styling themes (which are visual overhauls):

• Magnus Web Format — DrMagnus
• Flopstyle CSS — Lt Flops
• Blankstyle CSS — HarryBlank
• Placestyle CSS — Placeholder McD
• Jakstyle — JakdragonX

CSS changes

Reasonably-sized footnotes

Stops footnotes from being a million miles wide, so that you can actually read them.

.hovertip { max-width: 400px; }

Monospace edit/code

Makes the edit textbox monospace, and also changes all monospace text to Fira Code, the obviously superior monospace font.

@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;700&display=swap');
 
:root { --mono-font: "Fira Code", Cousine, monospace; }
#edit-page-textarea, .code pre, .code p, .code, tt, .page-source { font-family: var(--mono-font); }
.code pre * { white-space: pre; }
.code *, .pre * { font-feature-settings: unset; }

Teletype backgrounds

Adds a light grey background to <tt> elements ({{text}}), so code snippets stand out more.

tt {
  background-color: var(--swatch-something-bhl-idk-will-fix-later, #f4f4f4);
  font-size: 85%;
  padding: 0.2em 0.4em;
  margin: 0;
  border-radius: 6px;
}

No more bigfaces

Stops big pictures from appearing when you hover over someone's avatar image, because they're stupid and really annoying and you can just click on them if you want to see the big version.

.avatar-hover { display: none !important; }

Breaky breaky

Any text inside a div with class nobreak has line-wrapping happen between every letter.

.nobreak { word-break: break-all; }

Code colours

Add my terminal's code colours as variables. Maybe I'll change this to a more common terminal theme like Monokai or something at some point, but for now it's just my personal theme, which is derived from Tomorrow Night Eighties.

Also, adding the .terminal class to a fake code block as [[div class="code terminal"]] gives it a sort of pseudo-terminal look with a dark background. Doesn't work with [[code]], because Wikidot inserts a bunch of syntax highlighting that you can't change yourself without a bunch of CSS. Use it for non-[[code]] code snippets only.

Quick tool to colourise a 'standard' Wikidot component usage example with the above vars: link

:root {
  --c-bg: #393939;
  --c-syntax: #e0e0e0;
  --c-comment: #999999;
  --c-error: #f2777a;
  --c-value: #f99157;
  --c-symbol: #ffcc66;
  --c-string: #99cc99;
  --c-operator: #66cccc;
  --c-builtin: #70a7df;
  --c-keyword: #cc99cc;
}
 
.terminal, .terminal > .code {
  color: var(--c-syntax);
  background: var(--c-bg);
  border: 0.4rem solid var(--c-comment);
  border-radius: 1rem;
}

Debug mode

Draw lines around anything inside .debug-mode. The colour of the lines is red but defers to CSS variable --debug-colour.

You can also add div.debug-info.over and div.debug-info.under inside an element to annotate the debug boxes — though you'll need to make sure to leave enough vertical space that the annotation doesn't overlap the thing above or below it.

…like this!

.debug-mode, .debug-mode *, .debug-mode *::before, .debug-mode *::after {
  outline: 1px solid var(--debug-colour, red);
  position: relative;
}
.debug-info {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Fira Code', monospace;
  font-size: 1rem;
  white-space: nowrap;
}
.debug-info.over { top: -2.5rem; }
.debug-info.under { bottom: -2.5rem; }
.debug-info p { margin: 0; }

이것은

잉크얼룩

테마.

리뷰용 테마
By Croquembouche
읽는 시간 5분
⭐⭐⭐★★

정보

---

Title: 잉크얼룩 테마
Original: Inkblot Theme by Croquembouche
Paraphrast: XCninety

---

이 페이지의 목적은 이렇습니다.

1. 잉크얼룩 테마의 소스 페이지
2. 월든 스튜디오 작성 가이드
3. 장문 텍스트에서 테마가 적용된 모습의 예시

잉크얼룩 테마(Inkblot Theme)은 앰브로즈 레스토랑스의 하위 단체인가 그런 듯한 월든 스튜디오(Waldon Studio)가 쓰는 앰브로즈 식당 리뷰 전용으로 만들어졌습니다. 하지만 어떤 목적으로든 써도 무방합니다.

사용 방법은 전문 밑에 있습니다.

+ 빠른 복붙

[[include :scpko:theme:inkblot]]

[[module CSS]]
:root {
--inkblot-accent: transparent;
--header-title: "월든 스튜디오";
--header-subtitle: "미지의 미식가";
}
[[/module]]

[[div class="inkblot-header"]]

[[div class="inkblot-title"]]
[[div class="title-1"]]
제목
[[/div]]
[[div class="title-2"]]
제목
[[/div]]
[[div class="title-3"]]
제목
[[/div]]
[[div class="title-4"]]
제목
[[/div]]
[[/div]]

[[div class="inkblot-info"]]
무슨 식당 리뷰
By 리뷰자
읽는 시간 XX분
⭐⭐⭐⭐★

[[div class="inkblot-image"]]
[[image pancakes.png]]
[[/div]]
[[/div]]
[[/div]]

시그마-9 토글형 사이드바도 같이 쓸 수 있습니다.

+ 전환 가능한 사이드바 사용 방법

전환 가능한 사이드바 다음에 이 테마를 붙여넣으세요.

페이지에 아래를 추가해서 호환성을 맞춰주세요.

[[module CSS]]
/* Toggle Sidebar compatibility */
#side-bar { top: 0; }
.inkblot-header { width: 100%; left: 0; }
[[/module]]

---

전문

월든 스튜디오는 제 헤드카논에서 세계관 내적으로 '미슐랭 가이드 온라인, 다크 웹 제공'¹을 대체합니다. 진짜 미슐랭 가이드에서 지적재산권 위반으로 고소 넣을지도 모른다고 생각하면 좀 그렇잖아요.

요즘 앰브로즈 서식은 그 자체가 자기잠식입니다. 앰브로즈 서식 작품에는 따로 노는 메뉴들과 따로 노는 리뷰들이 그냥 모여만 있어요. 샷건 SCP²나 다를 바 없습니다. 일단 지루하고, 이야기를 따라가게 해줄 실타래가 없고, 흥미로울 구석이 전혀 없죠. 독자보고 재미없어해 달라고 장려하는 거예요. 건조한 목록은 관심을 차단합니다. 혹시나 서식의 제약을 넘어서 좋은 글을 썼다고 해도, 애초에 굳이 그런 제약을 감수해야 할까요?

그런 점들이 억울할 만큼 앰브로즈 서식은 포텐이 밝습니다. 리뷰들은 잘만 엮으면 서로 떼려야 떼지 못할 이야기로 발전할 수 있습니다. 메뉴라는 것 자체도 엄청난 아이디어예요. 다른 GoI 서식에 이 정도로 창의성을 발휘할 설정이 있을까요? 앰브로즈 서식의 원래 의도는 이런 곳에 있었습니다. 하지만 이런 서식을 마법처럼 꾸며주기에는 세부사항을 적절하게 짜기가 쉽지 않습니다. 생긴 건 멀쩡한데 들여다보면 나사 빠진 걸 내놓기가 더 쉽죠.

월든 스튜디오는 기존 앰브로즈 서식과 다르게 접근합니다. 단 한 가지 주제만을 골라 집중하는 거죠. 복합적이고 심도 깊은 리뷰로 주제 하나만을 모든 측면에서 바라보는 거예요. 실타래 하나만 따라가면 됩니다. 딴길로 빠질 새가 없어요. 그러므로 월든 스튜디오에서 작성하는 앰브로즈 서식에는 리뷰 딱 하나만이 등장합니다. 좋은 스토리로 발전하는 길에 거치적거릴 달랑거리는 잡다한 요소는 없으면서도 시각적 창의성은 그대로 풍부하게 챙길 수 있어요.

월든 스튜디오는 지금 제가 막 만들었기 때문에 허브 페이지는 따로 없습니다. 그러니 설정도 조금은 풀어봐야겠네요. 월든 스튜디오는 소수 리뷰어 (많아야 10명쯤?) 가 모인 팀으로, 리뷰업계에 이름을 밀어넣으려고 노력 중입니다 (계속 실패하지만 인정하지 않죠). 조직구조가 유연하고 계급이 딱히 강고하지 않습니다. 고급 대상에 고급 리뷰를 남기는 데 집중합니다. 사소한 사항을 깊게 챙기기 때문에 종종 오히려 큰 사항을 놓치기도 합니다. 예를 들면 이번에 방문한 식당이 사실은 변칙적 개미지옥이었다든가. 같은 결에서 월든 스튜디오의 리뷰는 독자에게 당연한 것과 매우 크게 충돌할 만큼 이상할 수도 있습니다. 세계관 속 리뷰어한테는 그 이상한 점이 매우 당연하겠지만요.

물론, 이 페이지는 그냥 테마입니다. 마음대로 사용해주세요.

---

사용 방법

이 테마를 사용하는 단계는 이렇습니다.

1. 테마 적용
2. 환경 설정
3. 헤더 설정

테마 적용

페이지에 테마를 적용하려면 다음 코드를 붙여넣으세요. 가급적 페이지 맨 위에 다른 CSS랑 같이 적용시켜야 좋습니다.

[[include :scp-wiki:theme:inkblot]]

[[module CSS]]
:root {
--inkblot-accent: transparent;
--header-title: "월든 스튜디오";
--header-subtitle: "미지의 미식가";
}
[[/module]]

(div를 위와 같은 모양으로 꾸미려면 class에 inkspot을 추가하면 됩니다)

환경 설정

테마 환경을 설정하려면 세 가지 CSS 변수를 만지면 됩니다.

—inkblot-accent는 페이지에 널려 있는 조그만 버블 같은 것들의 색깔을 결정합니다. 위 코드 그대로 놔두면 디폴트 값은 'transparent'입니다. 조그만 버블 같은 것들이 보이지 않습니다.

여기서 요청. 다른 잉크얼룩 작품에서 똑같은 액센트 컬러를 적용하지 말아주세요. 여기 테마 페이지에서는 'coral'을 사용 중이니까 이 페이지 겁니다. 다른 색깔을 사용해주세요. 이 테마를 사용하는 페이지가 그렇게 많지는 않을 테니까 어려운 과정은 아닐 겁니다.

(페이지 맨 밑의 '역링크'를 보시면 테마를 쓰는 페이지들을 확인할 수 있습니다)

검은색 글씨가 묻히지 않는 색깔을 골라주세요. 어두운 색깔을 쓰고 싶다면 평가 모듈의 폰트 색상을 보이게 조정하고, 잉크얼룩 테마 헤더도 직접 고쳐주세요.

CSS 변수 나머지 두 개는 헤더에 적용됩니다.

헤더 설정

잉크얼룩 테마는 원래 페이지 제목을 가리기 때문에 제목을 따로 표출해야 합니다. 어떤 텍스트를 넣어도 괜찮지만, 실제 페이지 제목과 반드시 꼭 맞춰주세요. 부탁드립니다.

이 페이지 맨 위에서 잉크얼룩 헤더를 보셨겠지만, HTML 요소에 하나하나 네모를 친 채로 다시 보겠습니다.

.inkblot-header

.inkblot-title

아무

텍스트나

넣어

주세요.

.inkblot-info

리뷰 안내
By 재단러
읽는 시간 5분
⭐★★★★

.inkblot-image

보시면 헤더의 제목 부분은 4개로 나뉘고, 각각 한두 단어를 담고 있습니다. 제목을 갈라주는 꽤 깔끔하고 시각적으로 흥미로운 방법이라 생각해요.

정보 부분에는 이 리뷰의 정보가 들어 있습니다. 제가 추천하는 정보는 이렇습니다. 리뷰 주제는? 작성자는? 읽는 시간은? 그리고 리뷰 대상의 평점은?

사진은 아무거나 넣어도 됩니다. 대개는 일반적으로 리뷰자의 사진이 들어가겠죠. 이 리뷰는 팬케이크가 작성했나 보네요. 저라면 리뷰 대상의 사진은 넣지 않고 싶습니다. 글 자체가 아니라면요.

헤더는 데스크탑에서는 세 섹션이 한 줄로 늘어져 있지만, 모바일에서는 제목 섹션이 한 줄로, 정보 섹션과 그림이 한 줄로 표시됩니다.

한편 아래에는 제목 섹션을 4개로 나누는 방법도 있습니다. 이 중에 텍스트를 넣지 않는 섹션이 있으면 그 섹션은 그냥 빈 채로 남습니다. 이 페이지 처음에 그렇게 했죠.

[[div class="inkblot-header"]]

[[div class="inkblot-title"]]
[[div class="title-1"]]
아무
[[/div]]
[[div class="title-2"]]
**텍스트나**
[[/div]]
[[div class="title-3"]]
넣어
[[/div]]
[[div class="title-4"]]
//주세요//.
[[/div]]
[[/div]]

[[div class="inkblot-info"]]
리뷰 안내
By 재단러
읽는 시간 5분
⭐★★★★

[[div class="inkblot-image"]]
[[image pancakes.png]]
[[/div]]
[[/div]]
[[/div]]

위에서 소개드린 헤더/타이틀 레이아웃에는 문제점도 있습니다.

• 제목의 길이나 4개로 나누는 방법에 주의하세요. 제목이 너무 길면 섹션끼리 서로 겹쳐서 가독성이 나빠집니다. 길이를 서로 비슷하게 맞출 만큰 길이가 적당한 제목으로 골라주세요.³
• 제목이나 정보에 글이 너무 길면 틀을 뚫고 삐져나올 수 있습니다. 너무 길게 쓰지는 마세요.

요상한 제목 격자나 정보 섹션이나 사진을 꼭 넣을 필요는 없습니다. 취향에 따라서 어떤 걸 빼거나 다른 걸 넣을 수 있어요. .inkblot-header 클래스도 사실 꼭 넣을 필요 없습니다. 데스크탑에서 헤더를 반 페이지 왼쪽으로 빼는 기능이 전부니까요.

제목 격자, 정보, 사진, .inkblot-header 없이 만든 예는 이렇습니다.

그냥 평범한 제목.

[[div class="inkblot-title"]]
//그냥// **평범한** 제목.
[[/div]]

---

메뉴판 서식은 없나요?

올 것이 왔군요. 이 테마는 앰브로즈 리뷰 작성용으로 설계되었지만 앰브로즈 메뉴 작성 기능은 딱히 없습니다.

왜냐?

제가 강하게 믿는 일입니다만 앰브로즈 서식 작성하는 재미는 절반은 자신만의 메뉴를 짜는 데 있습니다. 각 서식 글마나 새로 메뉴 디자인을 짜는 걸 보고 싶어요. 그래서 책임을 여러분께 맡기려고 합니다. 여러분이 이 테마를 사용하신다면 직접 메뉴 디자인을 짜 보세요. 어설퍼도 괜찮아요! 만드는 게 즐겁기만 하면 어떻게든 상관없습니다.

테마에 메뉴 디자인까지 실었으면 솔직히 여러분은 무조건 그것만 썼을 테잖아요. 분명히 그럴걸요. 저도 그럴 겁니다. 그래서 이 테마 디자이너로서 제가 원하는 대로 해버릴 거예요.

진짜 정 하고 싶으면 다른 사람 서식에서 메뉴를 베껴서 색깔만 살짝 고칠 수도 있습니다. 하지만 혹시나 누가 그랬다가는 제가 준엄한 응징의 뜻을 담아서 비추 한 표와 가벼운 비평을 내릴겁니다. 베끼지 말아주세요.

자기 고유의 앰브로즈 레스토랑스 메뉴를 작성하면 앰브로즈 서식으로서 작품의 가치가 높아질 수밖에 없으니까요.

---

소스 코드

네, 할 말은 이상입니다. 소스 코드는 여기 있어요.

+ 소스 코드 보기

/* Import fonts */
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@400;700&display=swap');
 
@font-face {
    font-family: 'KimjungchulMyungjo';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2302_01@1.0/KimjungchulMyungjo-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
}
 
@font-face {
    font-family: 'KimjungchulMyungjo';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2302_01@1.0/KimjungchulMyungjo-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: bold;
}
 
@font-face {
    font-family: '116watermelon';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.0/116watermelon.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
 
@font-face {
    font-family: 'NEXON Lv1 Gothic OTF';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-04@2.1/NEXON Lv1 Gothic OTF.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
 
/* Set the font size back to normal */
#page-content { font-size: 1rem; }
body { font-family: 'Libre Baskerville', 'Noto Serif KR', serif; }
 
/* The inkblot title is a grid */
.inkblot-title {
  font-family: 'Prata', '116watermelon', serif;
}
 
/* Style the new text */
#header h1 a::before, #header h2::before {
  font-family: 'Montserrat', 'NEXON Lv1 Gothic OTF', sans-serif;
}
 
/* - == === OTHER STUFF === == - */
 
#page-content h1, #page-content h2, #page-content h3,
#page-content h4, #page-content h5, #page-content h6 {
  font-family: 'Libre Baskerville', 'Noto Serif KR', serif;
}
#page-content h1 {
  font-family: 'Prata', '116watermelon', serif; font-size: 3rem; text-align: center;
}
 
.licensebox {
  font-size: 0.82rem;
  font-family: verdana, "Nanum Gothic", arial, helvetica, sans-serif;
  margin: 1rem 0 -1.5rem;
}

Footnotes

1. 글 쓰는 현재 미슐랭 가이드 온라인을 사용하는 앰브로즈 작품은 ambrose-thorn-valley, ambrose-makiling, ambrose-backdoor-soho입니다.

2. '샷건 SCP'에 들어가는 작품에는, 주요 변칙성은 딱히 없고 사소한 변칙성만 여러 개 달려 있습니다. 얘네들 중에 하나만 걸려서 추천 좀 받자는 작가의 작정으로요.

3. 웬만하면 띄어쓰기 단위로 끊을 수 있도록 하시면 좋습니다. 섹션 간 간격이 띄어쓰기보다 넓기 때문에 섹션 속에서 띄면 티가 확 납니다. — 역주