New Documentation

app/styles/doc.css

@@ -1,38 +1,73 @@
-/* styles.css */
-/* Styling for the documentation container */
-.documentation-container{
-  padding: 2rem;
+.documentation-section {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start; /* Change to flex-start to align content at the top */
+  align-items: center;
+  padding: 2rem; /* Ensure sufficient padding */
+  margin: 2rem;
+  background-color: var(--doc-background-color);
 }
-.documentation-section{
-  max-width: 900px;
-  height: 80dvh;
-  margin: auto;
-  background: var(--doc-background-color); /* Use variable for background */
-  padding: 2rem;
-  border-radius: 8px;
-  box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
-  overflow-y: scroll;
+
+.docDiv {
+  margin: 1em auto;
+  padding: 2em 1.5em; /* Adjusted padding for a modern look */
 }
-.title{
-  font-size: calc(var(--font-size)*2);
-  color: var(--doc-title-color); /* Use variable for title color */
-  margin-bottom: 1.5rem;
+
+#documentation {
+  max-width: 800px;
+  height: 70vh;
+  overflow: auto;
+  width: 90%;
+  background-color: var(--doc-background-color);
+  border-radius: 10px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15); /* Softer shadow for depth */
+  margin: 4rem auto;
+  border: 1px solid var(--faq-item-border-color);
+  padding: 2rem; /* Added padding to give space around the content */
 }
-.subtitle{
-  font-size: calc(var(--font-size)*1.5);
-  color: var(--doc-subtitle-color); /* Use variable for subtitle color */
-  margin-top: 2rem;
-  margin-bottom: 1rem;
+
+.title,
+.subtitle,
+.paragraph,
+.link {
+  color: var(--text-color);
 }
-.subsection-title{
-  font-size: calc(var(--font-size)*1.25);
-  color: var(--doc-subsection-title-color); /* Use variable for subsection title color */
-  margin-top: 1.5rem;
-  margin-bottom: 0.75rem;
+
+.title {
+  font-size: calc(var(--font-size) * 2);
+  text-align: center;
+  margin-bottom: 1.5rem; /* Space below title */
 }
-.paragraph{
-  font-size: calc(var(--font-size));
-  color: var(--doc-paragraph-color); /* Use variable for paragraph color */
-  margin-bottom: 1.5rem;
-  line-height: 1.6;
+
+.subtitle {
+  font-size: calc(var(--font-size) * 1.5);
+  margin-top: 2rem; /* Increased space for clarity */
+}
+
+.paragraph {
+  font-size: 1.1em;
+  line-height: 1.7; /* Increased line height for readability */
+  margin-bottom: 1.5rem; /* Increased space for readability */
+}
+
+.link {
+  display: block;
+  padding: 12px 18px; /* Slightly increased padding for buttons */
+  margin-top: 12px; /* Increased space above links */
+  background-color: var(--input-button-color);
+  text-align: center;
+  text-decoration: none;
+  border-radius: 5px;
+  transition: background-color 0.3s, transform 0.2s;
+  color: #fff; /* Ensure text color is readable */
+  font-weight: bold; /* Make links more prominent */
+}
+
+.link:hover {
+  background-color: var(--input-button-hover-color);
+  transform: translateY(-2px);
+}
+
+.link:active {
+  transform: translateY(0);
 }

app/styles/responsive.css

@@ -129,7 +129,7 @@
   .header-login-button {
     right: 5vh; /* Keep login button visible */
   }
-  .show-hide-btn{
+  .show-hide-btn {
     width: fit-content;
     left: 20vw;
   }
@@ -137,7 +137,7 @@
     background-image: url(../../public/img/logo-small.png);
     width: 4em;
   }
-  .sidebar{
+  .sidebar {
     width: 0%;
     display: none;
   }
@@ -146,14 +146,13 @@
     margin: auto;
     padding: auto;
   }
-  .dropdown{
+  .dropdown {
     display: flex;
     position: relative;
     top: 10px;
     display: block;
   }
-
-  .slider-option{
+  .slider-option {
     width: fit-content;
     margin: 10px 10px 0 0;
   }
@@ -165,3 +164,22 @@
     flex-direction: column; /* Stack sidebar and main content on smaller screens */
   }
 }
+
+/* Optional: Add media query for responsive adjustments */
+@media (max-width: 600px) {
+  .documentation-section {
+    padding: 1.5rem; /* Decrease padding for smaller screens */
+  }
+
+  .title {
+    font-size: 2em; /* Adjust title size */
+  }
+
+  .subtitle {
+    font-size: 1.5em; /* Adjust subtitle size */
+  }
+
+  .paragraph {
+    font-size: 1em; /* Adjust paragraph size */
+  }
+}