Some text and layout fixes

data-intuitive · Nov 10, 2023 · bbeb9f4 · bbeb9f4
1 parent a76ad5e
commit bbeb9f4
Show file tree

Hide file tree

Showing 2 changed files with 70 additions and 42 deletions.
diff --git a/styles.css b/styles.css
@@ -46,7 +46,7 @@ a:hover {
 
 h1 {
   color: #3A7598 !important; /* steelblue !important; */
-  font-size: 3em;
+  font-size: calc(3em * var(--scale));
   font-weight: 400 !important;
 }
 
@@ -152,6 +152,10 @@ li.nav-item:first-child:nth-last-child(13) ~ li.nav-item {
   border: 1px groove white;
 }
 
+.tab-content {
+  padding: 10px;
+}
+
 /*
 =========================================================
 Hidden content
@@ -323,7 +327,8 @@ Toolbox layout
   --s: calc(140px * var(--scale));  /* size  */
   --m: 4px;    /* margin */
   --f: calc(var(--s) * 1.732 + 4 * var(--m) - 1px);
-  height: 440px;
+  height: calc(440px * var(--scale));
+  /* width: calc(380px * var(--scale)); */
   justify-content: center;
 }
 
@@ -456,18 +461,18 @@ Virus pages
   text-align: center;
 }
 
-.virus-toolbox {
-  font-weight: 500;
-  font-size: 1.2em;
-  width: 80%;
-  margin: auto;
-  text-align: left;
-  padding: 30px 10px 10px 10px;
-}
+/* .virus-toolbox { */
+/*   font-weight: 500; */
+/*   font-size: 1.2em; */
+/*   width: 80%; */
+/*   margin: auto; */
+/*   text-align: left; */
+/*   padding: 30px 10px 10px 10px; */
+/* } */
 
 .virus-text {
   font-weight: 400;
-  font-size: 1.2em;
+  font-size: calc(1.2em * var(--scale));
   width: 80%;
   margin: auto;
   text-align: left;
@@ -487,6 +492,23 @@ Virus pages
   width: 100%;
 }
 
+/*
+=========================================================
+Various
+=========================================================
+*/
+
+/* Legends */
+#legend-container .grid,#annotation-container .grid {
+  grid-template-columns: auto;
+  width: 90%;
+}
+
+/* bootstrap max-width for grids is set too small */
+.grid {
+    max-width: 1400px; 
+}
+
 /*
 =========================================================
 Responsiveness
@@ -522,8 +544,8 @@ Responsiveness
   }
 }
 
-/* Smartphone size - vertical alignment */
-@media(max-width:767.98px) {
+/* Smartphone sizes - vertical alignment */
+@media(max-width:750px) {
   body {
     --scale: 1.0;
   }
@@ -538,19 +560,26 @@ Responsiveness
   }
 }
 
-/*
-=========================================================
-Various
-=========================================================
-*/
+@media(max-width:650px) {
+  body {
+    --scale: 0.9;
+  }
+}
 
-/* Legends */
-#legend-container .grid,#annotation-container .grid {
-  grid-template-columns: auto;
-  width: 90%;
+@media(max-width:550px) {
+  body {
+    --scale: 0.8;
+  }
 }
 
-/* bootstrap max-width for grids is set too small */
-.grid {
-    max-width: 1400px; 
+@media(max-width:450px) {
+  body {
+    --scale: 0.7;
+  }
+}
+
+@media(max-width:350px) {
+  body {
+    --scale: 0.6;
+  }
 }
diff --git a/toolbox/index.qmd b/toolbox/index.qmd
@@ -33,29 +33,28 @@ html`
     <div class="left jumbotron" id="jumbotron-container">
       <h1 class="display-4">Viral Toolbox</h1>
       <p class="lead">This page provides an overview of the different tools or assays in the viral toolbox.</p>
-      <p>Please scroll down or click on the tool of interest on the right</p>
+      <p>Please scroll down or click on the tool of interest</p>
     </div>
 
     <!-- Toolbox -->
     <div class="right">
-      <div class="container">
         <div class="toolbox">
-            <div id="toolbox-contents" class="tool-container">
-              ${toolbox.map(tool => 
-                html`
-                  <a href="#${tool.id}-section" target="_top">
-                    <div class="tool-wrapper">
-                      <div id="${tool.id}" class="tool">
-                        <div class="tool-tooltip-text">${tool.name}</div>
-                        ${tool.icon.map( i =>
-                          html`<img class="tool-icon" height="${(tool.icon.length > 1) ? 150/tool.icon.length : 100}%" src="${i}"/>`
-                        )}
-                      </div>
+          <div id="toolbox-contents" class="tool-container">
+            ${toolbox.map(tool => 
+              html`
+                <a href="#${tool.id}-section" target="_top">
+                  <div class="tool-wrapper">
+                    <div id="${tool.id}" class="tool">
+                      <div class="tool-tooltip-text">${tool.name}</div>
+                      ${tool.icon.map( i =>
+                        html`<img class="tool-icon" height="${(tool.icon.length > 1) ? 150/tool.icon.length : 100}%" src="${i}"/>`
+                      )}
                     </div>
-                  </a>
-                `
-              )}
-            </div>
+                  </div>
+                </a>
+              `
+            )}
+          </div>
         </div>
       </div>
     </div>