post: design patterns with swift

_posts/2021-11-08-pinterest-ui.md

@@ -27,7 +27,7 @@ tags: [UI/UX, Pinterest]
 
 실제로 핀터레스트를 사용해보면 저 상단의 여백이 직관적으로 Draggable한 느낌을 준다. 다만, 차이점이 있다면 iOS는 이전 페이지를 살짝 겹쳐 보여줌으로써 조금 더 입체적으로 보여준다.
 
-그리고 핀터레스트가 훌류한 점은 아이폰X 시리즈의 위 아래 노치 화면을 가득 채운다는 것이다. 개인적으로 단순하게 Safe Area를 이용하여 개발해서 위아래 단순하게 마진값을 남겨서 자르는 디자인을 별로 좋아하지 않는다. 물론, 노치를 채운다고 해서 더 많은 콘텐츠를 보여준다던가 하는 이점은 딱히 느껴지지 않지만, 모든 사용자의 기기를 고려한다는 것부터 섬세함이 드러난다.
+그리고 핀터레스트가 훌륭한 점은 아이폰X 시리즈의 위 아래 노치 화면을 가득 채운다는 것이다. 개인적으로 단순하게 Safe Area를 이용하여 개발해서 위아래 단순하게 마진값을 남겨서 자르는 디자인을 별로 좋아하지 않는다. 물론, 노치를 채운다고 해서 더 많은 콘텐츠를 보여준다던가 하는 이점은 딱히 느껴지지 않지만, 모든 사용자의 기기를 고려한다는 것부터 섬세함이 드러난다.
 
 # 제스쳐 인터랙션
 

_sass/0-settings/_variables.scss

@@ -39,5 +39,9 @@ $font-size-h4: 20px;
 $font-size-h5: 18px;
 $font-size-h6: 16px;
 
+$top-spacing-h1: 100px;
+$top-spacing-h2: 60px;
+$top-spacing-h3: 60px;
+
 $heading-line-height: 1.3;
 $heading-letter-spacing: -1px;

_sass/1-tools/_normalize.scss

@@ -166,7 +166,8 @@ textarea {
  */
 
 button,
-input { /* 1 */
+input {
+  /* 1 */
   overflow: visible;
 }
 
@@ -176,7 +177,8 @@ input { /* 1 */
  */
 
 button,
-select { /* 1 */
+select {
+  /* 1 */
   text-transform: none;
 }
 

_sass/1-tools/_syntax-highlighting.scss

@@ -214,3 +214,7 @@
     color: #099;
   } // Literal.Number.Integer.Long
 }
+
+.language-plaintext {
+  color: #a00;
+}

_sass/2-base/_base.scss

@@ -62,6 +62,20 @@ h6 {
   font-size: $font-size-h6;
 }
 
+article {
+  h1 {
+    margin-top: $top-spacing-h1;
+  }
+
+  h2 {
+    margin-top: $top-spacing-h2;
+  }
+
+  h3 {
+    margin-top: $top-spacing-h3;
+  }
+}
+
 blockquote {
   position: relative;
   margin: 40px 0;