Merge pull request #386 from ilveroluca/gh-pages

Fix column sizes on narrower screens (issue #384)
crs4 · Sep 2, 2024 · d415e6b · d415e6b
2 parents 0de8868 + 0974cbc
commit d415e6b
Showing 1 changed file with 15 additions and 10 deletions.
diff --git a/assets/css/style.scss b/assets/css/style.scss
@@ -1,5 +1,5 @@
---- 
---- 
+---
+---
 
 @import "{{ site.theme }}";
 
@@ -101,6 +101,8 @@ Override static width settings.
     /* min-height: 800px;*/
     overflow-y: scroll;
     font-size: 15px;
+    max-width: 25%;  // must complement the max-width of the body > div.row > div.section.col-sm-12
+    min-width: 140px;
 }
 
 .logo {
@@ -110,7 +112,7 @@ Override static width settings.
 .footer {
     /* background: #003333;*/
     color: whitesmoke;
-    text-align: center;    
+    text-align: center;
     padding: 40px 0 10px;
     position: relative;
     bottom: 0px;
@@ -149,7 +151,7 @@ p img {
 
 .signin-button-container{
     position: -webkit-sticky;
-    position: sticky; 
+    position: sticky;
     top: 50px;
 }
 
@@ -187,7 +189,7 @@ p img {
 }
 
 .toc a:hover {
-    color: hsl(180, 63%, 33%);    
+    color: hsl(180, 63%, 33%);
 }
 
 div.page-toc {
@@ -203,20 +205,24 @@ div.page-toc {
     margin: 0;
     width: 100%;
     position: -webkit-sticky;
-    position: sticky; 
+    position: sticky;
     top: 120px;
 }
 
 div.row.page-toc > div.toc-title {
     font-size: 1.1em;
-    font-weight: bold;    
+    font-weight: bold;
     padding: 20px 18px 20px;
     text-align: center;
 }
 
 div.row.page-toc > div.col-12.toc-content {
     margin: 0;
-    padding: 0;    
+    padding: 0;
+}
+
+body > div.row > div.section.col-sm-12 {
+    max-width: 75%; // must complement the max-width of .header
 }
 
 body > div.row > div.section.col-sm-12.ml-auto.col-md-9 > div > div.col-md-3.text-center > div.row.page-toc > div.col-12.toc-content{
@@ -228,7 +234,7 @@ body > div.row > div.section.col-sm-12.ml-auto.col-md-9 > div > div.col-md-3.tex
 
 div.row.page-toc > div.toc-content::-webkit-scrollbar {
     width: 0px;
-    background: transparent; /* make scrollbar transparent */ 
+    background: transparent; /* make scrollbar transparent */
 }
 
 // The outer-most ul generated for the TOC does not have a class assigned.
@@ -241,4 +247,3 @@ div.row.page-toc > div.col-12.toc-content > ul {
 ul.page-toc-item {
   padding-left: 20px;
 }
-