improve binder layout on small screens

Author: fonsp

PlutoPages.jl

@@ -1,5 +1,5 @@
 ### A Pluto.jl notebook ###
-# v0.19.14
+# v0.19.25
 
 using Markdown
 using InteractiveUtils

src/assets/styles/index.css

@@ -282,3 +282,30 @@ a.search-result::before {
 blockquote.twitter-tweet {
     margin: 0rem;
 }
+
+/* modify Pluto's styles to avoid a visual glitch. This will make the header always display fixed at the top. */
+
+body:not(.asdfsdfa) pluto-editor:not(.asdffdas) header#pluto-nav {
+    position: fixed;
+    top: 0;
+    left: 56px;
+    right: 56px;
+    z-index: 1998;
+    width: auto;
+    border-radius: 0 0 10px 10px;
+}
+
+/* Make space for the Pluto header */
+body.binder:not(.offer_binder) {
+    padding-top: 60px;
+}
+
+/* Another strategy: leave the header in place but make the export menu hidden when it is not opened. */
+/* 
+header.show_export aside#export {
+    visibility: initial;
+}
+
+aside#export {
+    visibility: hidden;
+} */

src/assets/styles/lecture_header.css

@@ -43,23 +43,3 @@
     aspect-ratio: 16/9;
     flex: 1 1 auto;
 }
-
-/* modify Pluto's styles to avoid a visual glitch. This will make the header always display fixed at the top. */
-
-body:not(.asdfsdfa) pluto-editor:not(.asdffdas) header#pluto-nav {
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    z-index: 1998;
-}
-
-/* Another strategy: leave the header in place but make the export menu hidden when it is not opened. */
-/* 
-header.show_export aside#export {
-    visibility: initial;
-}
-
-aside#export {
-    visibility: hidden;
-} */