시그마+
잠깐 정지!!
SCP 위키 내부에서 사용되는 템플릿 페이지입니다.
스탭의 허가없이
이 페이지를 만지지 마세요
이것은 테마 제작을 위한 보조 레이어로 이용하기 위해 EstrellaYoshte가 제작한 메타 구성요소입니다.
사용하기 위해서 아래 텍스트를 입력하세요.
[[include :scpko:component:sigma-plus]]
시그마+는 기존 시그마 테마 원형의 미감을 보존하면서도 더 현대적인 CSS 관습과 속성을 사용합니다.
- 확장형 CSS 변수
- 그리드 및 플렉스 기반 레이아웃
- TAB 완전대응 상단바/사이드바
- 우종서 텍스트 대응
개발자 노트
본 구성요소의 핵심 발상은 사이트 테마의 기반 레이아웃 구식화를 해결하는 부담을 완화해보자는 것입니다. 구식화된 시그마는 테마 커스터마이즈에 쓸 수 있는 도구의 가짓수를 제약하고, 의도한 레이아웃 구현에 필요한 것보다 훨씬 지나친 CSS 복잡성을 유발하며, 최적화되지 않은 CSS로 인해 문제를 더욱 악화시킵니다. 또는 이 셋이 기막히게 꼬여서 발생하거나요.
시그마+는 호환 레이어로서 직통성을 최대화하기 위해 대부분의 코드에 대해선 기존 테마 코드의 의미적/시각적 흐름을 재설정하는 데에만 초점을 맞춥니다. 예외, 즉 대대적으로 뜯어고친 부분은 다음 요소들에 한정됩니다.
- 헤더 배경: 원래는 #container-wrap의 통짜 배경 이미지를 사용했지만, 이는 #header나 #top-bar 요소와 실제로 연결된 요소가 아니라서 해당 요소들의 사이즈나 레이아웃이 (사용자 설정, 브라우저 특성, 화면 크기 등으로 인해) 변경되었을 때 연동되지 못했습니다. 이를 두 div의 background-image로 직접 삽입하도록 고쳤습니다.
- 상단바 펼침 메뉴: 방해되는 위키닷 디폴트 스타일을 덮어 지워서 화면 크기에 더 잘 대응하도록 조정했습니다. 또한 TAB 키를 이용해 각 펼침 메뉴를 둘러볼 수 있습니다.
- 평가 & 정보 모듈: 의미론적으로 더 명확하게 분리시키고, 변수를 이용해 쉽게 조정할 수 있도록 상당히 수정했습니다. 정보 모듈의 특유한 CSS를 배제했습니다.
- 탭: 탭 스타일화에 사용되는 스프라이트시트를 CSS 변수로 대체했습니다. 다루기 조금 쉬워졌습니다.
예시
:root {
--header-title: "We don't have a 55";
--sp_header-height: 21.75rem;
}
소스 코드:
:where(:root) { --header-title: "SCP 재단"; --header-subtitle: "확보, 격리, 보호"; }
페이지 내역: 2, 마지막 수정: 20 Feb 2023 22:53
