marisa 스킨 데스크톱 디자인 일부 수정: 검색창, 상단바, 문서 도구 모음, 글꼴

검색창: 평상시 상단바의 색상을 따라감
검색창(오버, 포커스): 흰색으로 강조됨
상단바: 아주 약간 두꺼워짐
문서 도구 모음: 몇 픽셀씩 위치가 안맞아서 테두리 디자인을 날림
글꼴: 나눔고딕 -> Noto Sans KR (나눔고딕은 fallback으로 처리함), fallback 정리

CS
S i
s Aw
e Som
e

views/marisa/css/main.css

@@ -3,7 +3,7 @@ body {
     word-break: break-all;
     word-wrap: break-word;
     margin: 0;
-    font-family: "나눔고딕", "nanumgothic", "Nanum Gothic", "KoPub Dotum", "Malgun Gothic", "맑은 고딕", "sans-serif";
+    font-family: 'Noto Sans KR', '나눔고딕', 'Nanum Gothic', 'Malgun Gothic', '맑은 고딕', sans-serif;
 }
 
 ul {
@@ -50,7 +50,7 @@ li {
 #top {
     width: 100%;
     background: #4a4a4a;
-    padding: 15px;
+    padding: 20px;
     padding-right: 0;
     padding-left: 0;
     position: relative;
@@ -85,9 +85,7 @@ li {
 
 #tool {
     float: right;
-    border: 2px solid gainsboro;
-    padding: 10px;
-    border-radius: 10px;
+    border: none;
 }
 
 @media (min-width: 780px) and (max-width: 1350px) {
@@ -243,7 +241,26 @@ h6 {
 
 #search_input {
     width: 220px;
-    border-radius: 10px;
+    height: 35px;
+    border-radius: 17.5px;
+    padding-left: 10px;
+    background-color: gray;
+    border: solid 1px gray;
+    color: #fff;
+    transition: .2s ease-in-out;
+    outline: none;
+}
+#search_input::placeholder {
+    color: #fff;
+}
+#search_input:hover, #search_input:focus {
+    border-color: #ababab;
+    background-color: #eaeaea;
+    color: #000;
+    transition: .2s ease-in-out;
+}
+#search_input:hover::placeholder, #search_input:focus::placeholder {
+    color: #000;
 }
 
 div#pre_search {
@@ -333,13 +350,13 @@ pre {
 
 textarea {
     border: 2px solid gainsboro;
-    font-family: '나눔고딕', 'nanumgothic', "Nanum Gothic","KoPub Dotum","Malgun Gothic","맑은 고딕",sans-serif;
+    font-family: 'Noto Sans KR', '나눔고딕', 'Nanum Gothic', 'Malgun Gothic', '맑은 고딕', sans-serif;
     padding: 0;
 }
 
 input {
     border: 2px solid gainsboro;
-    font-family: '나눔고딕', 'nanumgothic', "Nanum Gothic","KoPub Dotum","Malgun Gothic","맑은 고딕",sans-serif;
+    font-family: 'Noto Sans KR', '나눔고딕', 'Nanum Gothic', 'Malgun Gothic', '맑은 고딕', sans-serif;
 }
 
 #toc {
@@ -404,8 +421,8 @@ blockquote {
 }
 
 #out_link::before {
-    font-family: "Font Awesome 5 Free";
-    content: "\f360";
+    font-family: 'Font Awesome 5 Free';
+    content: '\f360';
     font-weight: 900;
     background: transparent;
     color: green;

views/marisa/index.html

@@ -13,6 +13,7 @@
                 href="https://use.fontawesome.com/releases/v5.7.2/css/all.css"
                 integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr"
                 crossorigin="anonymous">
+        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Noto+Sans+KR&display=swap">
         <link rel="shortcut icon" href="/views/main_css/file/favicon.ico?ver=1">
         {{imp[1][5]|safe}}
         {{imp[2][3]|safe}}