sidebar fix

docs/.vuepress/components/HumanPractices.vue

+<template>
+  <div class="banner" :style="{ right: sidebarWidth }">
+    <img :src="imageUrl" alt="Banner Image" class="banner-image" />
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    imageUrl: {
+      type: String,
+      default: 'https://static.igem.wiki/teams/5306/human-practices/banners/humanpractices-introbanner.png',
+    },
+    sidebarWidth: {
+      type: String,
+      default: '18rem',
+    },
+  },
+}
+</script>
+
+<style scoped>
+.banner {
+  position: relative;
+  left: 0;
+  width: calc(100% - var(--sidebar-width)); /* Dynamic width calculation */
+  max-width: 100%;
+  display: block;
+  margin: 0 auto;
+}
+.banner-image {
+  width: 100%;
+  max-width: 100%;
+  display: block;
+}
+@media (max-width: 768px) {
+  .banner {
+    width: 100%;
+    right: 0; /* Adjust for smaller screens */
+  }
+}
+</style>

docs/.vuepress/styles/index.scss

 h1, h2, h3, h4, h5, h6, p, a, span, strong {
-    font-family: 'Red Hat Display', sans-serif;
-    font-weight: 400; /* or use 700 if you want to keep them bold */
-  }
-  
-  /* Ensure any strong or bold tags also use the correct font */
-  strong, b {
-    font-family: 'Red Hat Display', sans-serif;
-    font-weight: 700; /* or whatever weight you prefer */
-  }
+  font-family: 'Red Hat Display', sans-serif;
+  font-weight: 400; /* or use 700 if you want to keep them bold */
+}
+
+/* Ensure any strong or bold tags also use the correct font */
+strong, b {
+  font-family: 'Red Hat Display', sans-serif;
+  font-weight: 700; /* or whatever weight you prefer */
+}
+
+.video-wrapper {
+  display: flex;
+  justify-content: center; /* Centers the video horizontally */
+  align-items: center;     /* Centers the video vertically (if necessary) */
+  position: relative;
+  width: 100%;
+  padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
+  height: 0;
+  overflow: hidden;
+}
+
+.video-wrapper iframe {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border: 0; /* Optional: removes the iframe border */
+}
 
-  .video-wrapper {
-    display: flex;
-    justify-content: center; /* Centers the video horizontally */
-    align-items: center;     /* Centers the video vertically (if necessary) */
-    position: relative;
-    width: 100%;
-    padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
-    height: 0;
-    overflow: hidden;
-  }
-  
-  .video-wrapper iframe {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    border: 0; /* Optional: removes the iframe border */
-  }
-  
 .back-to-top-icon {
-  background-image: url('https://static.igem.wiki/teams/5306/natronaut-logo-no-text.png') !important;
-  background-size: contain;
-  background-repeat: no-repeat;
-  background-position: center;
-  border: none; /* Optional: Remove border */
-  width: 50px;  /* Adjust based on your image size */
-  height: 50px; /* Adjust based on your image size */
+background-image: url('https://static.igem.wiki/teams/5306/natronaut-logo-no-text.png') !important;
+background-size: contain;
+background-repeat: no-repeat;
+background-position: center;
+border: none; /* Optional: Remove border */
+width: 50px;  /* Adjust based on your image size */
+height: 50px; /* Adjust based on your image size */
+}
+
+/* Sidebar Styling */
+.theme-hope-sidebar {
+  position: sticky; /* Stick to the top when scrolling */
+  top: 1rem; /* Space from the top of the page */
+  max-height: calc(100vh - 2rem); /* Full height minus some margin */
+  overflow-y: auto; /* Enable vertical scrolling */
+  width: var(--sidebar-width); /* Use the theme's sidebar width */
+  background-color: #f9f9f9; /* Optional: Background color */
+  padding: 1rem; /* Sidebar padding */
+  border: 1px solid #ddd; /* Optional: Border for the sidebar */
+  border-radius: 8px; /* Optional: Rounded corners */
 }
 
 /* Sidebar Title */
@@ -62,7 +75,7 @@ h1, h2, h3, h4, h5, h6, p, a, span, strong {
   text-decoration: underline; /* Underline on hover */
 }
 
-/* Prevent sidebar from extending beyond the footer */
+/* Layout and Footer */
 .theme-hope-layout {
   display: flex;
   flex-direction: column;