updated right sidebar for all pages

download/index.html

@@ -51,6 +51,23 @@ <h1><a href="../index.html" class="button-link">IIIF Download</a></h1>
     </div>  
     <p class="hide" id="result"></p>
 
+      <!-- Left Sidebar with navigation tabs -->
+  <div id="sidebar">
+    <ul>
+      <li><a href="./cropper/">Cropper</a></li>
+      <li><a href="../index.html">Home</a></li>
+      <!-- Add more links as needed -->
+    </ul>
+  </div>
+
+      <!-- Right Sidebar for IIIF resources -->
+  <div id="right-sidebar">
+    <h2>IIIF Resources</h2>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+    <p>Vivamus lacinia odio vitae vestibulum.</p>
+    <p>Nullam cursus, nisi vitae suscipit pharetra, lacus justo fermentum metus.</p>
+    <p>Sed euismod nisl a felis volutpat, a tincidunt risus facilisis.</p>
+  </div>
 
 <div id="footer">
 	<a href="mailto:[email protected]" target="_blank">KB</a>, 2024.

download/main.css

@@ -1,37 +1,97 @@
-body {
-	font-family: sans-serif;
-	width: 80%;
-	margin: auto;
-}
-
-h1 {
-	text-align: center;
-}
-
-#size {
+html, body {
+	height: 100%;
+	margin: 0;
+  }
+
+  body {
+	font-family: "Helvetica Neue", Arial, sans-serif;
+	background-color: #a9a9aa; /* Grey background for the left and right columns */
+	padding: 0;
+  }
+
+  #sidebar {
+	position: fixed;
+	top: 0;
+	left: 0;
+	height: 100%;
+	width: 200px; /* Sidebar width */
+	background-color: #444; /* Darker grey for the sidebar */
+	padding-top: 20px;
+  }
+
+  #sidebar ul {
+	list-style-type: none;
+	padding: 0;
+  }
+
+  #sidebar ul li {
+	margin: 20px 0;
+  }
+
+  #sidebar ul li a {
+	text-decoration: none;
+	color: white;
+	font-size: 18px;
+	padding: 10px 20px;
 	display: block;
-}
-#size input{
-	width: 3em;
-}
-
-/* Footer styles */
-#footer {
-    background-color: #f1f1f1;
-    text-align: center;
-    padding: 10px 0;
-    position: fixed;
-    left: 0;
-    bottom: 0;
-    width: 100%;
-    font-size: 14px;
-}
-
-#footer a {
-    color: #000;
-    text-decoration: none;
-}
-
-#footer a:hover {
-    text-decoration: underline;
-}
+  }
+
+  #sidebar ul li a:hover {
+	background-color: #666; /* Lighter grey on hover */
+	border-radius: 4px;
+  }
+
+  #container {
+	margin-left: 220px; /* Adjust for the sidebar width */
+	width: 60%; /* Central column width */
+	background-color: white;
+	padding: 20px;
+	min-height: 100vh; /* Ensures the container fills the full height of the page */
+	box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Optional shadow effect */
+  }
+
+  h1, p {
+	text-align: center;
+  }
+
+  /* Footer styles */
+  #footer {
+	background-color: #f1f1f1;
+	text-align: center;
+	padding: 10px 0;
+	width: 100%;
+	font-size: 14px;
+	position: fixed;
+	left: 0;
+	bottom: 0;
+  }
+
+  /* Right Sidebar styling */
+#right-sidebar {
+	position: fixed;
+	top: 0;
+	right: 0;
+	height: 100%;
+	width: 200px; /* Width of the right sidebar */
+	background-color: #444; /* Darker grey for the right sidebar */
+	padding-top: 20px;
+	color: white; /* Text color for visibility */
+  }
+
+  #right-sidebar h2 {
+	text-align: center;
+  }
+
+  #right-sidebar p {
+	padding: 10px 15px; /* Padding for the paragraphs */
+  }
+
+  /* Adjust the main content container */
+  #container {
+	margin-left: 220px; /* Adjust for the left sidebar width */
+	margin-right: 220px; /* Make space for the right sidebar */
+	width: auto; /* Allow the container to adjust automatically */
+	background-color: white;
+	padding: 20px;
+	min-height: 100vh; /* Ensure full page height */
+  }

main.css

@@ -9,14 +9,15 @@ html, body {
 	padding: 0;
   }
 
+  /*left sidebar */
   #sidebar {
 	position: fixed;
 	top: 0;
 	left: 0;
 	height: 100%;
 	width: 200px; /* Sidebar width */
 	background-color: #444; /* Darker grey for the sidebar */
-	padding-top: 20px;
+	padding-top: 70px;
   }
 
   #sidebar ul {
@@ -74,7 +75,7 @@ html, body {
 	height: 100%;
 	width: 200px; /* Width of the right sidebar */
 	background-color: #444; /* Darker grey for the right sidebar */
-	padding-top: 20px;
+	padding-top: 70px;
 	color: white; /* Text color for visibility */
   }