시그마-9 테마 » 플롭스타일 다크
평가
평가 + 인포 모듈
인포 모듈만
이 테마는?
Lt Flops가 만들었습니다. 다크 모드 및 나이트 모드를 선호하는 작품에서 폭넓게 사용할 수 있습니다.
이 페이지가 존재하는 의의는 어떤 페이지에서 사용하든지 제가 쉽게 업데이트하는 데 있습니다. CSS가 항상 조금씩 바뀌어 가는 점을 감안해 주세요.
테마를 적용하는 책임은 모두 자기 자신 껍니다.
이 테마는 BHL이나 현무암과 호환 불가능합니다. 이미 BHL이나 현무암을 적용했다면 이 테마를 이용하지 마세요. 오류가 쏟아집니다.
플롭스타일 다크는 이하 테마를 포크했습니다.
JackalRelated가 테마 알트 로고를 제작했습니다. (CC BY-SA 3.0)
마지막으로 테마 전체를 검수해 준 stormbreath에게, 다양한 영역에서 조력해 준 Croquembouche에게 고맙습니다.
» 패치노트 (EN위키) «
1단계: 테마 인클루드 페이지 맨 위에 다음 코드를 붙여넣으세요.
[[include :scpko:theme:flopstyle-dark]]
[선택] 2단계: 평가 모듈 바이라인 평가 모듈 밑에 다음 코드를 다음과 같이 붙여넣을 수 있습니다.
[[module Rate]]
[[div class="byline"]]
[[span]] by 작가링크 [[/span]](A)
[[span]] # [[/span]](B)
[[/div]]
2. (A) 작가링크에는 작가(들) 닉네임이나 작가 페이지 링크를 넣을 수 있습니다.
2. (B) #는 작품을 읽는 데 소요되는 예상 시간 (분 단위) 입니다. 예상 시간이 알고 싶으면 Read-o-Meter를 사용해서 결과값을 반올림할 수 있습니다..중요: Read-o-Mete는 사용자 데이터를 기록 및 저장하지 않습니다.
‼️ span 사이에 줄이 들어 있으면 설계 의도대로 표시되지 않습니다!
2단계 예시 (EN 기준)
3단계: 제목 설정 작품의 시작을 표시하려면 다음 코드를 붙여넣으세요.
[[div class="meta-title"]]
제목
[[/div]]
접근성 문제 때문에 플롭스타일 다크 페이지는 이 코드를 생략할 수 없습니다.
4단계: 사이트 이동 경로 페이지 제목 아래에 다음 코드를 붙여넣으세요.
[[div class="pseudocrumbs"]]
[[[parent-page-url1|상위 페이지 1]]] » 이 페이지
[[[parent-page-url2|상위 페이지 2]]] » 이 페이지
[[/div]]
‼️ ListPages를 사용해야 한다면 걱정하지 마세요. 조각문서 페이지들을 위키닷 기능을 이용해서 똑같이 하위 설정할 수 있습니다. 이런 경우는 서식보다는 기능이 우선이겠죠.
3 + 4단계 예시 (EN 기준)
자… 플롭스타일 다크의 기본기능이 필요했다면 이제 코드 챙겨서 노시면 됩니다! 하지만 스크롤을 계속 내리시겠다면 토끼굴이 어디까지 가나 한번 보여드리죠.
플롭스타일 다크가 지원하는 컴포넌트는…
1. 기본지원 컴포넌트
이 테마에서 기본 지원하는 외부 컴포넌트는 다음 여섯 가지입니다.
1.1. ACS 애니메이션 by EstrellaYoshte
1.2. 더나은각주 by EstrellaYoshte
1.3. 크로크스타일 CSS by Croquembouche
1.4. 페이드인 (디폴트 speed=1) by Croquembouche
1.5. 텍스트 스타일 by JaonHax
1.6. 토글 사이드바 by EstrellaYoshte
2. 커스텀 변수
(테마를 제대로 이해하고 나서 변경하세요)
모든 변수 변환은 CSS 모듈 [[module CSS]] 속에서 설정해야 합니다. 그 중에서도 :root 속에 넣어야 하고요.
2.1. 색상 색상을 원하는 대로 변경하고 있습니다. 필요한 대로 아래 변수를 (단 필요한 것만) 뜯어가서 편집하세요.
[[module CSS]]
:root{
/* -- COLORS -- */
--accentColor: 강조 색상;
--accentColorLite: 연한 강조 색상;
--hue: 색조 (색상환 각도);
/* 디폴트 (복붙 금지):
* accentColor:
Bright Tyrian pink hsl(325, 80%, 60%).
* accentColorLite:
Soft Tyrian pink hsla(325, 80%, 70%, .5).
* hue: 325deg.
**/
accentColor는 가장 많이 변경되는 변수입니다. 대개는 유일하게 변경되는 변수이기도 합니다.
accentColor를 바꿀 때는 다른 변수들도 같이 바꿔 주세요.
2.1. (A) accentColorLite: 원 색상보다 명도는 높게 알파값은 낮게 설정해야 합니다. 추천하는 값은 명도 최소 10% 이상, 알파값 0.5입니다.
2.1. (B) hue: 색상환 각도입니다. accentColor와 일치해야 합니다.
원하는 색상을 고를 때는 HSL Color Picker를 추천합니다. HSL은 색조Hue, 채도Saturation, 명도Lightness로 이루어진 쉬운 색상 시스템입니다. 여기에 알파값(투명도)을 추가해서 HSLA로 쓰기도 합니다.
선택한 accentColor가 웹컨텐츠 접근성 가이드라인 (WCAG)에 부합하는지 확인하려면 콘트라스트 비율을 살펴봐야 합니다.
hsl(222, 12%, 21%)을 "Background" 필드에, 선택한 accentColor를 "Text color" 필드에 넣으세요. WCAG 적합 콘트라스트 비율은 헤딩 텍스트에서 3 이상입니다.
2.2. 로고와 폰트 로고, 폰트 등은 다음처럼 바꿀 수 있습니다.
/* -- 로고 -- */
--lgurl: url(로고 이미지 주소);
/* -- 폰트 -- */
--header-font: "폰트 이름", sans-serif;
--body-font: "폰트 이름", sans-serif;
/* 디폴트 (복붙 금지):
* header-font: Montserrat, MapoDPPA, sans-serif
* body-font: Inter, NanumPotato, sans-serif
**/
2.3. 헤더 타이틀 제목, 부제목, 제목 색깔을 다음처럼 바꿀 수 있습니다.
/* -- 제목-- */
--header-title: "제목";
--header-subtitle: "부제목";
--titleColor: 제목 색깔;
--subtitleColor: 부제목 색깔;
/* 디폴트 (복붙 금지):
* titleColor:
Bright Tyrian pink hsl(325, 80%, 60%).
* subtitleColor:
Bright Tyrian pink hsl(325, 80%, 60%).
**/
}
[[/module]]
3. 플롭스 헤더
플롭스타일 다크는 플롭스 헤더의 다크 모드를 지원합니다.
[[include :scp-wiki:component:flops-header
|item=
|containment=
|level=
|security=
|disruption=
|disruption-bg-color=
]]
플롭스 헤더 예시 (EN 기준)
4. 사이드박스
사이드박스는 플롭스타일 다크 내장 컴포넌트로, 두 가지로 나뉩니다.
- 타입 A 작가박스 & 사이드박스
- 타입 B 사이드컨테이너
타입에 따라 사용법이 다릅니다.
- 작가박스와 사이드박스는 width=1280px 이하 환경에서 미표시됩니다. 모바일도 포함합니다. 페이지 및 작가 정보를 담을 수 있습니다.
- 사이드컨테이너는 width=1280px 이하 환경에서 접힙니다. 터치하거나 커서를 올려서 펼칠 수 있습니다. 이야기의 부가 정보를 담을 수 있습니다.
사이드박스를 사용하려면 위 조건을 감안해 주세요. SCP 위키를 모바일로 접속하는 사람들도 많습니다.
타입 A 작가박스 & 사이드박스
(페이지 맨 위 왼쪽 & 맨 위 오른쪽)
EstrellaYoshte의 반그림자 테마를 참조했습니다
작가박스의 디폴트는 옵트아웃입니다. 플롭스타일 다크 테마를 적용하는 페이지에서 자동으로 표시됩니다. 박스를 제거하려면 원래 인클루드하는
[[include :scpko:theme:flopstyle-dark]]
대신 아래를 넣어주세요.
[[div style="display: none;"]]
[[include :scpko:theme:flopstyle-dark]]
[[/div]]
대체형식 1 작가박스를 지웠다면 대신 본인이 원하는 정보를 표시하는 커스텀 박스를 넣을 수 있습니다. 공저나 재작성이나 번역 페이지에 사용하기 좋겠죠. 아래의 작가박스 코드(영어판 기준)를 참조하실 수 있습니다.
[[div class="anchor"]]작가박스 위치 고정
[[div class="authorbox tableb"]]
[[module ListPages name="="]]
||~ %%title%% ||
||= [[span class="bt bb"]] By [[/span]] %%created_by_linked%% ||
||~ Published on %%created_at|%d %b %Y%% ||
[[/module]]
[[div class="flavorbox"]]작가박스에 딸린 플레이버박스
원하는 플레이버 텍스트
[[/div]]
[[/div]]
[[/div]]anchor의 엔드리밋
작가박스는 디폴트로 ListPages 기능을 이용해 메타데이터를 자동 표시합니다. 이론적으로는 작가박스 속 ListPages 모듈을 아무 페이지에나 복붙해서 필드에 그 페이지 고유의 정보를 표시할 수 있습니다. 물론 다른 필드를 적용할 수도 있습니다.
커스텀 작가박스를 제작해서 독자 알림 등 맞춤형 플레이버 텍스트를 표시할 수도 있습니다.
주의 — 플레이버박스 적용은 의무가 아니지만, 작가박스 속에는 div 블록만 넣을 수 있습니다.
대체형식 2 원한다면 작가박스를 사이드박스가 변형되는 방식으로 오른쪽에 놓을 수도 있습니다. 사이드박스를 만들려면 페이지 맨 위 CSS 모듈에 아래를 복붙하세요.
[[div class="anchor"]]사이드박스 위치 고정
[[div class="sidebox tableb"]]
[[module ListPages name="="]]
||~ %%title%% ||
||= [[span class="bt bb"]] By [[/span]] %%created_by_linked%% ||
||~ Published on %%created_at|%d %b %Y%% ||
[[/module]]
[[div class="flavorbox"]]사이드박스 플레이버 텍스트
원하는 플레이버 텍스트
[[/div]]
[[/div]]
[[/div]]anchor의 엔드리밋
페이지에 사이드컨테이너를 삽입하려면 사이드박스보다는 작가박스를 추천합니다. 사이드박스와 사이드컨테이너는 나란히 표시되기 때문에 겹쳐서 보기 좋지 않습니다. 독자들도 혼란스럽겠죠. 그러니 안전하게 두는 쪽이 낫다고 말씀드립니다.
사이드박스를 작가박스와 똑같은 내용으로 구성할 수도 있습니다. 아니면 이 페이지에서 보이는 것처럼 작품 태그라인과 고유 아이콘을 넣을 수도 있겠죠.
다른 표와 마찬가지로 고유의 음영을 설정할 수도 있습니다. 예를 들어 이 페이지의 table1은 초록색이죠. 자세한 정보는 서식 예시 (일반) 항목의 표 서식을 참조하세요.
타입 B 사이드컨테이너
(이하 참조)
Woedenaz 제공
사이드컨테이너는 옵트 인입니다. 아래처럼 설정하세요.
[[div class="limit"]]anchor의 스타트 리밋
[[div class="anchor"]]사이드컨테이너 위치 고정
[[div class="sidecontainer"]]
원하는 사이드컨테이너 텍스트
[[/div]]
[[/div]]
사이드컨테이너 관련 텍스트
[[/div]]anchor의 엔드 리밋
사이드컨테이너 위아래에는 수동 줄 바꿈을 넣어주는 게 좋습니다. 빈 칸 앞뒤로 @@를 넣어주면 됩니다. 사이드컨테이너는 스크롤할 때 옆에 표시됩니다.
주의 — limit div를 안 넣으면 anchor가 설정 지점부터 페이지 끝까지 적용됩니다.
로고 투명도
#extra-div-1{
filter: opacity(퍼센트);
}
디폴트 투명도 = 33%
마녀
"Weaving Imperceptible Threads" 카논 (예정)
[[include :scpko:theme:flopstyle-dark witch=a]]
#/media/File:Section_break_01_by_Pengo.jpg){kind=link}