화면이 넓을 경우 toc를 오른쪽에 보여줘라

johngrib · Nov 1, 2019 · 4f58609 · 4f58609
1 parent c454aa1
commit 4f58609
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 8 deletions.
diff --git a/_sass/_layout.scss b/_sass/_layout.scss
@@ -197,13 +197,6 @@ ul.tag-list {
     display: inline-block;
 }
 
-#markdown-toc {
-    border: 1px solid;
-    padding: 10px;
-    padding-left: 30px;
-    background-color: #FFFFFF;
-}
-
 div.search {
     background-color: #f6f5ea;
     width: 100%;

diff --git a/_sass/_toc.scss b/_sass/_toc.scss
@@ -0,0 +1,19 @@
+@media (min-width: 1700px) {
+    ul#markdown-toc {
+        position: fixed;
+        top: 0;
+        left: calc(50vw + 410px);
+        width: 380px;
+        background-color: white;
+        z-index: 9999;
+        font-size: 0.8em;
+    }
+}
+
+#markdown-toc {
+    border: 1px solid;
+    padding: 10px;
+    padding-left: 30px;
+    background-color: #FFFFFF;
+}
+
diff --git a/css/main.scss b/css/main.scss
@@ -18,5 +18,6 @@ $theme-color: #47146C;
 @import
     "base",
     "layout",
-    "syntax"
+    "syntax",
+    "toc"
 ;