현무암 테마





평가: +9+x
평가: +9+x


현무암 테마

BASALT

VERSION 1.5

이건 뭔가요?

현무암 테마는 미학적인 양식으로 그 어떤 카논이나 시리즈, 요주의 단체와도 무관하며, Azamo does not match any existing user namePlaceholder McDPlaceholder McDEstrellaYoshte서류더미 테마를 발전시켜 만들었습니다.

블랙 하이라이터와 마찬가지로 현무암 테마는 사이트 레이아웃의 많은 부분을 개선했고, 대부분의 테마에선 생략되는 UI 요소들도 생산성과 사용자 접근성 향상을 위해 다수 변경했습니다. 근사해 보이기까지 하고요.

현무암 테마를 사용하려면 다음 코드를 글에 붙여넣으세요.

[[include :scpko:theme:basalt]]

테마 설정

테마 설정, 변수라고도 하는 이것들은 사용자가 현무암 테마에 특정 기능을 더하거나 빼 주는 모듈을 가져오는 부가적인 문자열입니다.

설정을 적용하려면 일반 include 맨 뒤의 닫는 괄호(]]) 앞에 아래 예시 중 하나를 붙여넣어 보세요.

[[include :scpko:theme:basalt 테마설정=a]]

테마 설정들은 손쉽게 혼용할 수 있습니다. 한 번에 여러 개를 사용하려면 아래처럼 해 주세요.

[[include :scpko:theme:basalt 첫째테마설정=a|둘째테마설정=a|셋째테마설정=a]]

테마 설정 목록 (VERSION 1.0 기준)

hidetitle=a

페이지 제목(문서명)을 숨깁니다.

acsanimation=a

기본값인 ACS 애니메이션 구성요소를 비활성화합니다.

darkmode=a

다크 모드를 활성화합니다. (호마노 (다크 모드) 사용법 참고)

redmode=a

레드 모드를 활성화합니다. 정상 작동하려면 다크 모드도 켜야 합니다. (석류석 (레드 모드) 사용법 참고)

darksidebar=a

라이트 모드에 다크 모드 사이드바 스타일링을 적용합니다.


맞춤 설정

사이트 제목/부제목/로고 바꾸기

헤더의 사이트 제목, 부제목 그리고 로고를 바꾸고 싶다면 다음 코드를 사용하세요.

:root {
--logo: url(<이미지 링크 자리>);
--title: "<제목 텍스트 자리>";
--subtitle: "<부제목 텍스트 자리>";
}

--title 속성은 기본 텍스트와 같은 길이(혹은 더 짧게)로 입력할 것을 권장합니다. 모바일 기기에서 표시 문제가 생기는 것을 방지하기 위함입니다.

기본 설정으로, 사이드바의 로고와 텍스트는 헤더와 동일합니다. 이 부분을 바꾸고 싶다면 다음 코드를 사용하세요.

:root {
--sidelogo: url(<이미지 링크 자리>);
--sidesubtitle: "<텍스트 자리>";
}

호마노 ONYX (다크 모드)

BASALT_DARKMODE.png

호마노

다크 모드를 활성화하려면 위의 설명에 따라 테마 설정을 사용하세요.

[[include :scpko:theme:basalt darkmode=a]]

석류석 GARNET (레드 모드)

BASALT_APOLLYON.png

석류석

레드 모드를 활성화하려면 위의 설명에 따라 테마 설정을 사용하세요.

[[include :scpko:theme:basalt darkmode=a|redmode=a]]

현무암 테마에 사용된 요소

구성요소

현무암 테마는 커뮤니티 제작 구성요소 몇 가지를 선 포함하고 있습니다.

…그리고 별도로 include해 사용하는 이 구성요소들도 외형에 변화를 주었습니다.

테마

현무암 테마는 이 테마들로부터 일부 요소를 훔쳐 빌려옵니다.

사용례


basalt_logotype_black.png

이미지 블록

수평줄은 하이픈 4개 "----" 를 입력하면 만들어지며, 따로 들어 있는 곳 (인용 블록 등) 이 없다면 페이지 전체를 가로지릅니다. 이 글에서 섹션을 나누는 줄은 모두 이 수평줄입니다.

여러분이 방문했을 법한 링크


제목은 문장 맨 앞에 "+"를 1~6개 입력해서 적용할 수 있습니다.

이건 큰 텍스트 span입니다. 만드려면 [[span class="bigtext"]] 를 사용하세요.

이건 특수 텍스트 span입니다. 만드려면 [[span class="st"]] 를 사용하세요.
특수 텍스트 span이 색 입힌 표 div 속에 들어가면, 저 아래처럼 색상이 바뀝니다. Placeholder를 위해 만들었습니다.

그 삽은 왜 그렇게 특별했던 거죠?

이 바닥을 바꿔놓은 발명품이었기 때문이야.


이것은 인용 블록으로, 각 줄의 맨 앞에 "> "를 붙여 만듭니다.
또 다른 텍스트


이건 수평줄이고요

중첩된 인용 블록

일반 표입니다.
텍스트 자리

표는 특수 div로 감싸 색을 입힐 수 있습니다. 이 div 속에 들어간 이미지 블록과 특수 텍스트 span 도 그에 맞게 색상이 바뀝니다.

[[div class="table1"]]

초록색 표입니다.
텍스트 자리

[[div class="table2"]]

파란색 표입니다.
텍스트 자리

[[div class="table3"]]

노란색 표입니다.
텍스트 자리

[[div class="table4"]]

주황색 표입니다.
텍스트 자리

[[div class="table5"]]

빨간색 표입니다.
텍스트 자리

[[div class="table6"]]

보라색 표입니다.
텍스트 자리

이 div로는 분리된 표를 만들 수 있습니다.

[[div class="tableb"]]

이건 분리된 표입니다.
텍스트 자리

이건 문서 div입니다. 만드려면 [[div class="document"]]를 사용하세요. 그리고 다른 div 내부에 넣지 않는 편을 권장합니다.

이건 어두운 문서 div입니다. 만드려면 [[div class="darkdocument"]]를 사용하세요. 그리고 다른 div 내부에 넣지 않는 편을 권장합니다.

이건 RAISA 공문 div입니다. 만드려면 [[div class="raisa_memo"]]를 사용하세요.

이건 장식된 div입니다. 만드려면 [[div class="notation"]]을 사용하세요.

이건 더 얇은 모달 div입니다! 만드려면 [[div class="smallmodal"]]을 사용하세요.

이건 세 번째로 장식된 div입니다! 만드려면 [[div class="jotting"]]을 사용하세요.

이건 네 번째로 장식된 div입니다! 만드려면 [[div class="transcript"]]를 사용하세요.

이건 다섯 번째로 장식된 div입니다! 만드려면 [[div class="papernote"]]를 사용하세요.

본문 글꼴은 Roboto, 나눔바른고딕입니다.
헤더와 제목 글꼴은 Work Sans, Gmarket Sans입니다.
고정폭 글꼴은 Fira Code, 나눔고딕코딩입니다.


🈲: SCP 재단의 모든 컨텐츠는 15세 미만의 어린이 혹은 청소년이 시청하기에 부적절합니다.
따로 명시하지 않는 한 이 사이트의 모든 콘텐츠는 크리에이티브 커먼즈 저작자표시-동일조건변경허락 3.0 라이선스를 따릅니다.