테마 파헤치기 3
서론
내가 사용중인 블로그 테마는 minimal mistakes 라는 테마이고 앞으로 개인 블로그 테마로 적절하게 사용하기 위해서 우선 테마를 샅샅히 파헤쳐 코드에 주석을 달아보려고 한다.
오늘의 코드 : _sass\minimal-mistakes_sidebar.scss
/* ==========================================================================
SIDEBAR
========================================================================== */
/*
Default
========================================================================== */
.sidebar {
@include clearfix(); // clearfix 믹스인 적용
@include breakpoint($large) { // 미디어 쿼리: $large 이상일 때
float: left; // 왼쪽으로 플로팅
width: calc(#{$right-sidebar-width-narrow} - 1em); // 너비 계산
opacity: 0.75; // 투명도
-webkit-transition: opacity 0.2s ease-in-out; // 웹킷 전환 효과
transition: opacity 0.2s ease-in-out; // 전환 효과
&:hover { // 호버 상태일 때
opacity: 1; // 투명도 1로 설정
}
&.sticky { // sticky 클래스가 적용됐을 때
overflow-y: auto; // y축 스크롤
/* 내비게이션 리스트의 높이 계산: viewport 높이 - 내비게이션 높이 - 마스트헤드 x 패딩 */
max-height: calc(100vh - #{$nav-height} - 2em);
}
}
@include breakpoint($x-large) { // 미디어 쿼리: $x-large 이상일 때
width: calc(#{$right-sidebar-width} - 1em); // 너비 계산
}
> * { // 자식 요소들의 상단과 하단 여백 설정
margin-top: 1em;
margin-bottom: 1em;
}
h2, h3, h4, h5, h6 { // 제목 요소들의 하단 여백과 글꼴 설정
margin-bottom: 0;
font-family: $sans-serif-narrow;
}
p, li { // 문단과 리스트 요소의 글꼴, 글자 크기, 줄 간격 설정
font-family: $sans-serif;
font-size: $type-size-6;
line-height: 1.5;
}
img { // 이미지 스타일 설정
width: 100%; // 가로 길이 100%
&.emoji { // .emoji 클래스가 있는 이미지 스타일
width: 20px; // 가로 길이 20px
height: 20px; // 세로 길이 20px
}
}
}
.sidebar__right { // 오른쪽 사이드바 스타일
margin-bottom: 1em; // 하단 여백 설정
@include breakpoint($large) { // 미디어 쿼리: $large 이상일 때
position: absolute; // 절대 위치
top: 0; // 상단 정렬
right: 0; // 오른쪽 정렬
width: $right-sidebar-width-narrow; // 너비 설정
margin-right: -1 * $right-sidebar-width-narrow; // 오른쪽 마진 음수 설정
padding-left: 1em; // 왼쪽 패딩 설정
z-index: 10; // z-index 설정
&.sticky { // sticky 클래스가 적용됐을 때
@include clearfix(); // clearfix 믹스인 적용
position: -webkit-sticky; // 웹킷 sticky
position: sticky; // sticky
top: 2em; // 상단에서 2em 위치에 고정
float: right; // 오른쪽으로 플로팅
.toc { // 목차 요소 스타일
.toc__menu { // 목차 메뉴 스타일
overflow-y: auto; // y축 스크롤
max-height: calc(100vh - 7em); // 최대 높이 설정
}
}
}
}
@include breakpoint($x-large) { // 미디어 쿼리: $x-large 이상일 때
width: $right-sidebar-width; // 너비 설정
margin-right: -1 * $right-sidebar-width; // 오른쪽 마진 음수 설정
}
}
.splash .sidebar__right { // .splash 내에서의 오른쪽 사이드바 스타일
@include breakpoint($large) { // 미디어 쿼리: $large 이상일 때
position: relative; // 상대 위치
float: right; // 오른쪽으로 플로팅
margin-right: 0; // 오른쪽 마진 없음
}
@include breakpoint($x-large) { // 미디어 쿼리: $x-large 이상일 때
margin-right: 0; // 오른쪽 마진 없음
}
}
/*
Author profile and links
========================================================================== */
.author__avatar { // 저자 아바타 스타일
display: table-cell; // 테이블 셀로 표시
vertical-align: top; // 상단 정렬
width: 36px; // 너비 36px
height: 36px; // 높이 36px
@include breakpoint($large) { // 미디어 쿼리: $large 이상일 때
display: block; // 블록 요소로 변경
width: auto; // 너비 자동
height: auto; // 높이 자동
}
img { // 이미지 스타일
max-width: 110px; // 최대 가로 길이 110px
border-radius: 50%; // 50%의 원형 모서리 설정
@include breakpoint($large) { // 미디어 쿼리: $large 이상일 때
padding: 5px; // 패딩 설정
border: 1px solid $border-color; // 테두리 설정
}
}
}
.author__content { // 저자 콘텐츠 스타일
display: table-cell; // 테이블 셀로 표시
vertical-align: top; // 상단 정렬
padding-left: 15px; // 왼쪽 패딩 설정
padding-right: 25px; // 오른쪽 패딩 설정
line-height: 1; // 줄 간격 설정
@include breakpoint($large) { // 미디어 쿼리: $large 이상일 때
display: block; // 블록 요소로 변경
width: 100%; // 너비 100%
padding-left: 0; // 왼쪽 패딩 없음
padding-right: 0; // 오른쪽 패딩 없음
}
a { // 링크 스타일
color: inherit; // 부모 요소의 색상 상속
text-decoration: none; // 텍스트에 밑줄 없음
}
}
.author__name { // 저자 이름 스타일
margin: 0; // 여백 없음
@include breakpoint($large) { // 미디어 쿼리: $large 이상일 때
margin-top: 10px; // 상단 여백
margin-bottom: 10px; // 하단 여백
}
}
.sidebar .author__name { // 사이드바 내에서의 저자 이름 스타일
font-family: $sans-serif; // 글꼴 설정
font-size: $type-size-5; // 글자 크기 설정
}
.author__bio { // 저자 소개 스타일
margin: 0; // 여백 없음
@include breakpoint($large) { // 미디어 쿼리: $large 이상일 때
margin-top: 10px; // 상단 여백
margin-bottom: 20px; // 하단 여백
}
}
.author__urls-wrapper { // 저자 링크 래퍼 스타일
position: relative; // 상대 위치
display: table-cell; // 테이블 셀로 표시
vertical-align: middle; // 중앙 정렬
font-family: $sans-serif; // 글꼴 설정
z-index: 20; // z-index 설정
cursor: pointer; // 커서 모양
li:last-child { // 마지막 자식 요소
a { // 링크 스타일
margin-bottom: 0; // 하단 마진 없음
}
}
.author__urls { // 저자 링크 스타일
span.label { // 레이블 스타일
padding-left: 5px; // 왼쪽 패딩 설정
}
}
@include breakpoint($large) { // 미디어 쿼리: $large 이상일 때
display: block; // 블록 요소로 변경
}
button { // 버튼 스타일
position: relative; // 상대 위치
margin-bottom: 0; // 하단 마진 없음
&:before { // 가상 요소
@supports (pointer-events: none) { // pointer-events 속성 지원 시
content: ''; // 내용 없음
position: fixed; // 고정 위치
top: 0; // 상단 정렬
left: 0; // 왼쪽 정렬
width: 100%; // 가로 길이 100%
height: 100%; // 높이 100%
pointer-events: none; // 이벤트 무시
}
}
&.open { // open 클래스가 적용됐을 때
&:before { // 가상 요소
pointer-events: auto; // 이벤트 활성화
}
}
@include breakpoint($large) { // 미디어 쿼리: $large 이상일 때
display: none; // 숨김
}
}
}
.author__urls { // 저자 링크 스타일
display: none; // 숨김
position: absolute; // 절대 위치
right: 0; // 오른쪽 정렬
margin-top: 15px; // 상단 여백
padding: 10px; // 패딩 설정
list-style-type: none; // 리스트 스타일 없음
border: 1px solid $border-color; // 테두리 설정
border-radius: $border-radius; // 모서리 반경 설정
background: $background-color; // 배경색 설정
box-shadow: 0 2px 4px 0 rgba(#000, 0.16), 0 2px 10px 0 rgba(#000, 0.12); // 그림자 효과
cursor: default; // 기본 커서
&.is--visible { // is--visible 클래스가 적용됐을 때
display: block; // 보임
}
@include breakpoint($large) { // 미디어 쿼리: $large 이상일 때
display: block; // 보임
position: relative; // 상대 위치
margin: 0; // 여백 없음
padding: 0; // 패딩 없음
border: 0; // 테두리 없음
background: transparent; // 배경색 투명
box-shadow: none; // 그림자 없음
}
&:before { // 가상 요소
display: block; // 보임
content: ""; // 내용 없음
position: absolute; // 절대 위치
top: -11px; // 상단에서 11px 이동
left: calc(50% - 10px); // 가운데 정렬
width: 0; // 너비 0
border-style: solid; // 테두리 스타일
border-width: 0 10px 10px; // 테두리 너비
border-color: $border-color transparent; // 테두리 색상
z-index: 0; // z-index 설정
@include breakpoint($large) { // 미디어 쿼리: $large 이상일 때
display: none; // 숨김
}
}
&:after { // 가상 요소
display: block; // 보임
content: ""; // 내용 없음
position: absolute; // 절대 위치
top: -10px; // 상단에서 10px 이동
left: calc(50% - 10px); // 가운데 정렬
width: 0; // 너비 0
border-style: solid; // 테두리 스타일
border-width: 0 10px 10px; // 테두리 너비
border-color: $background-color transparent; // 테두리 색상
z-index: 1; // z-index 설정
@include breakpoint($large) { // 미디어 쿼리: $large 이상일 때
display: none; // 숨김
}
}
ul { // 리스트 스타일
padding: 10px; // 패딩 설정
list-style-type: none; // 리스트 스타일 없음
}
li { // 리스트 아이템 스타일
white-space: nowrap; // 줄 바꿈 금지
}
a { // 링크 스타일
display: block; // 블록 요소로 설정
margin-bottom: 5px; // 하단 마진 설정
padding-right: 5px; // 오른쪽 패딩 설정
padding-top: 2px; // 상단 패딩 설정
padding-bottom: 2px; // 하단 패딩 설정
color: inherit; // 부모 요소의 색상 상속
font-size: $type-size-5; // 글자 크기 설정
text-decoration: none; // 텍스트에 밑줄 없음
&:hover { // 호버 상태일 때
text-decoration: underline; // 밑줄 표시
}
}
}
/*
Wide Pages
========================================================================== */
.wide .sidebar__right { // 넓은 페이지에서의 오른쪽 사이드바 스타일
margin-bottom: 1em; // 하단 여백 설정
@include breakpoint($large) { // 미디어 쿼리: $large 이상일 때
position: initial; // 초기 위치
top: initial; // 초기 위치
right: initial; // 초기 위치
width: initial; // 초기 너비
margin-right: initial; // 초기 마진
padding-left: initial; // 초기 패딩
z-index: initial; // 초기 z-index
&.sticky { // sticky 클래스가 적용됐을 때
float: none; // 플로팅 없음
}
}
@include breakpoint($x-large) { // 미디어 쿼리: $x-large 이상일 때
width: initial; // 초기 너비
margin-right: initial; // 초기 마진
}
}
댓글남기기