Made TOC wide in small screens

3 files changed, 16 insertions, 7 deletions

diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index f0be58d..70185d6 100644
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -16,7 +16,9 @@
     <hr />
     
     {{ if (gt (len (split .Content `</h`)) 2) }}
-    {{ partial "toc.html" . }}
+    <div class="TableOfContents rounded p-2 ml-2 mb-2">
+      {{ partial "toc.html" . }}
+    </div>
     {{ end }}
     {{ .Content }}
   </article>
diff --git a/layouts/partials/toc.html b/layouts/partials/toc.html
index 432c382..d36c787 100644
--- a/layouts/partials/toc.html
+++ b/layouts/partials/toc.html
@@ -1,5 +1,5 @@
 
-<aside class="float-right rounded p-2 ml-2 mb-2" style="background-color: #dbdbdb;">
+<aside>
   <h3>Contents</h3>
   {{ .TableOfContents }}
 </aside>
\ No newline at end of file
diff --git a/static/css/khata.css b/static/css/khata.css
index 710d364..dc3646d 100644
--- a/static/css/khata.css
+++ b/static/css/khata.css
@@ -116,6 +116,15 @@ a,
   min-width: 300px;
   min-height: 200px;
 }
+#TableOfContents > ul {
+  margin-left: 10px;
+  padding-left: 5px;
+  font-variant: small-caps;
+}
+.TableOfContents {
+  float: right;
+  background-color: #dbdbdb;
+}
 @media only screen and (max-width: 1050px) {
   .grid-container {
     grid-template-columns: repeat(auto-fill, calc((100% - 50px) / 2));
@@ -148,6 +157,9 @@ a,
     display: block;
     font-size: 1.2em;
   }
+  .TableOfContents {
+    float: initial;
+  }
 }
 .metadata-value {
   font-size: 0.8em;
@@ -161,11 +173,6 @@ a,
 .top-h1 {
   font-size: 3em !important;
 }
-#TableOfContents > ul {
-  margin-left: 10px;
-  padding-left: 5px;
-  font-variant: small-caps;
-}
 .newer:hover,
 .older:hover,
 .to-top:hover {