Fixed the sidebar for resources

ICTASL · Dec 22, 2024 · f5bd74f · f5bd74f
1 parent 5eebad3
commit f5bd74f
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 3 deletions.
diff --git a/_layouts/resource.html b/_layouts/resource.html
@@ -15,13 +15,16 @@
 </head>
 <body>
   {% include header.html %}
-  <main>
+  <div class="resource-container">
+  {% include sidebar.html %}
+  <main class="content">
     <article>
       <h1>{{ page.title }}</h1>
       <p>{{ page.description }}</p>
       {{ content }}
     </article>
   </main>
+</div>
   {% include footer.html %}
 
   <!-- Include Simple-Jekyll-Search JS -->

diff --git a/assets/css/styles.css b/assets/css/styles.css
@@ -163,7 +163,7 @@ body {
   :root[data-theme='light'] {
     --background-color: #FFFFFF;
     --text-color: #000000;
-    --primary-color: #8B0000;
+    --primary-color: #47e3ff;
     --secondary-color: #FF8C00;
     --accent-color: #008000;
     --highlight-color: #FFD700;
@@ -290,4 +290,56 @@ body {
   #results-container.active {
     display: block;
   }
-
+
+
+  /* assets/css/styles.css */
+
+/* Resource Container holding sidebar and main content */
+ .resource-container {
+  display: flex;
+  flex-direction: row;
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 20px;
+  box-sizing: border-box;
+} 
+
+/* Sidebar Styling */
+.sidebar {
+  width: 250px; /* Fixed width for the sidebar */
+  margin-right: 20px;
+  background-color: var(--primary-color);
+  color: var(--text-color);
+  padding: 20px;
+  box-sizing: border-box;
+  border-radius: 8px;
+  height: fit-content;
+}
+
+/* Sidebar Menu Styling */
+.sidebar-menu {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.sidebar-menu li {
+  margin-bottom: 15px;
+}
+
+.sidebar-menu li a {
+  color: var(--text-color);
+  text-decoration: none;
+  font-weight: bold;
+  display: block;
+  padding: 10px;
+  border-radius: 4px;
+}
+
+.sidebar-menu li a:hover,
+.sidebar-menu li a.active {
+  background-color: var(--secondary-color);
+  color: var(--background-color);
+}
+
+