Added scrollbar

static/scrollbar.css

+/* Custom scrollbar styles for vertical scrollbars */
+::-webkit-scrollbar {
+  width: 24px; /* Adjust the width of the scrollbar */
+  height: 24px; /* Adjust the height of the scrollbar */
+}
+
+::-webkit-scrollbar-thumb {
+  background: url("https://static.igem.wiki/teams/5149/scrollbar/screenshot-2024-10-02-at-2-10-01-am.webp")
+    no-repeat center center;
+  background-size: contain;
+  border-radius: 50%; /* Make the thumb circular */
+  /* min-height: 50px; Increase the minimum height of the thumb */
+  /* width: 150%; */
+  /* margin-left: -12%; Ensure the thumb width matches the scrollbar width */
+  overflow: show; /* Show the thumb even when not scrolling */
+  width: auto; /* Auto width to match the image size */
+  height: auto; /* Auto height to match the image size */
+}
+
+::-webkit-scrollbar-track {
+  background: url("https://static.igem.wiki/teams/5149/scrollbar/treelog.png")
+    no-repeat center center;
+  background-size: auto;
+  border-radius: 10px; /* Adjust the border-radius to create an oval shape */
+  margin: 0 auto; /* Center the track within the scrollbar container */
+  height: 50%; /* Make the track take up only half of the scrollbar container */
+}
+
+/* Custom scrollbar styles for horizontal scrollbars */
+::-webkit-scrollbar:horizontal {
+  width: 24px; /* Ensure the width of the horizontal scrollbar matches the vertical scrollbar */
+  height: 24px; /* Ensure the height of the horizontal scrollbar matches the vertical scrollbar */
+}
+
+::-webkit-scrollbar-thumb:horizontal {
+  background: url("https://static.igem.wiki/teams/5149/scrollbar/screenshot-2024-10-02-at-2-10-01-am.webp")
+    no-repeat center center;
+  background-size: contain;
+  border-radius: 50%; /* Make the thumb circular */
+  /* min-width: 50px; Increase the minimum width of the thumb */
+  /* height: 150%; */
+  /* margin-top: -12%; Ensure the thumb height matches the scrollbar height */
+  transform: rotate(90deg); /* Rotate the thumb image by 90 degrees */
+  width: auto; /* Auto width to match the image size */
+  height: auto; /* Auto height to match the image size */
+}
+
+::-webkit-scrollbar-track:horizontal {
+  background: url("https://static.igem.wiki/teams/5149/scrollbar/horizontal.png")
+    no-repeat center center;
+  background-size: auto;
+  border-radius: 10px; /* Adjust the border-radius to create an oval shape */
+  margin: 0 auto; /* Center the track within the scrollbar container */
+  width: 50%; /* Make the track take up only half of the scrollbar container */
+}
+
+/* Custom scrollbar styles for mobile */
+@media (max-width: 768px) {
+  ::-webkit-scrollbar {
+    width: 16px; /* Adjust the width of the scrollbar for mobile */
+    height: 16px; /* Adjust the height of the scrollbar for mobile */
+  }
+
+  ::-webkit-scrollbar-thumb {
+    min-height: 30px; /* Adjust the minimum height of the thumb for mobile */
+    width: 24px; /* Ensure the thumb width is larger than the track for mobile */
+    margin-left: -4px; /* Center the thumb within the track */
+  }
+
+  ::-webkit-scrollbar-track {
+    max-height: 120px; /* Adjust the maximum height of the track for mobile */
+    max-width: 16px; /* Ensure the track width matches the scrollbar width for mobile */
+    height: 50%; /* Make the track take up only half of the scrollbar container */
+  }
+
+  ::-webkit-scrollbar:horizontal {
+    width: 16px; /* Ensure the width of the horizontal scrollbar matches the vertical scrollbar for mobile */
+    height: 16px; /* Ensure the height of the horizontal scrollbar matches the vertical scrollbar for mobile */
+  }
+
+  ::-webkit-scrollbar-thumb:horizontal {
+    min-width: 30px; /* Adjust the minimum width of the thumb for mobile */
+    height: 24px; /* Ensure the thumb height is larger than the track for mobile */
+    margin-top: -4px; /* Center the thumb within the track */
+  }
+
+  ::-webkit-scrollbar-track:horizontal {
+    max-width: 120px; /* Adjust the maximum width of the track for mobile */
+    max-height: 16px; /* Ensure the track height matches the scrollbar height for mobile */
+    width: 50%; /* Make the track take up only half of the scrollbar container */
+  }
+}

wiki/layout.html

@@ -6,7 +6,8 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <link
       rel="shortcut icon"
-      href="https://static.igem.wiki/teams/5149/menu/tab-1.png"/> 
+      href="https://static.igem.wiki/teams/5149/menu/tab-1.png"
+    />
     <link rel="license" href="https://creativecommons.org/licenses/by/4.0/" />
 
     <!-- Bootstrap CSS -->
@@ -14,12 +15,18 @@
       href="{{ url_for('static', filename = 'bootstrap.min.css') }}"
       rel="stylesheet"
     />
-    
+
     <!-- Custom CSS -->
     <link
-    href="{{ url_for('static', filename = 'loading.css') }}"
-    rel="stylesheet"
+      href="{{ url_for('static', filename = 'loading.css') }}"
+      rel="stylesheet"
+    />
+
+    <link
+      href="{{ url_for('static', filename = 'scrollbar.css') }}"
+      rel="stylesheet"
     />
+
     <link
       href="{{ url_for('static', filename = 'attribution.css') }}"
       rel="stylesheet"
@@ -41,16 +48,16 @@
       rel="stylesheet"
     />
     <link
-    href="{{ url_for('static', filename = 'hamburger.css') }}"
-    rel="stylesheet"
+      href="{{ url_for('static', filename = 'hamburger.css') }}"
+      rel="stylesheet"
     />
     <link
-    href="{{ url_for('static', filename = 'home.css') }}"
-    rel="stylesheet"
+      href="{{ url_for('static', filename = 'home.css') }}"
+      rel="stylesheet"
     />
     <link
-    href="{{ url_for('static', filename = 'human-practice.css') }}"
-    rel="stylesheet"
+      href="{{ url_for('static', filename = 'human-practice.css') }}"
+      rel="stylesheet"
     />
     <link
       href="{{ url_for('static', filename = 'members.css') }}"
@@ -83,7 +90,6 @@
     <title>{% block title %}{% endblock %} | UCSC - iGEM 2024</title>
   </head>
   <body>
-
     <!-- Navigation -->
     {% include 'menu.html' %}