Rename style.css to static/css/style.css

static/css/style.css

@@ -0,0 +1,97 @@
+/* static/css/style.css */
+
+/* CSS Reset */
+* {
+  box-sizing: border-box; /* Ensures padding and border are included in element's total width and height */
+  margin: 0; /* Resets margin for all elements */
+  padding: 0; /* Resets padding for all elements */
+}
+
+/* CSS Variables for consistent theming */
+:root {
+  --primary-bg: #f9f9f9;
+  --header-footer-bg: #333;
+  --text-color: #fff;
+  --pre-bg: #eee;
+}
+
+/* Body styling */
+body {
+  font-family: Arial, sans-serif;
+  background-color: var(--primary-bg);
+  line-height: 1.6;
+}
+
+/* Header styling */
+header {
+  background-color: var(--header-footer-bg);
+  color: var(--text-color);
+  padding: 1em 0;
+  text-align: center;
+}
+
+header h1 {
+  margin: 0; /* Ensures no margin for the header title */
+}
+
+/* Navigation styling */
+nav ul {
+  list-style: none; /* Removes default list styling */
+  display: flex; /* Uses flexbox for horizontal layout */
+  justify-content: center; /* Centers the navigation items */
+}
+
+nav ul li {
+  margin: 0 1em; /* Adds space between navigation items */
+}
+
+nav ul li a {
+  color: var(--text-color);
+  text-decoration: none; /* Removes underline from links */
+}
+
+nav ul li a:hover {
+  text-decoration: underline; /* Underlines links on hover */
+}
+
+/* Main content styling */
+main {
+  padding: 1em 2em; /* Adds padding around main content */
+}
+
+section {
+  margin-bottom: 2em; /* Adds space between sections */
+}
+
+/* Preformatted text styling */
+pre {
+  background: var(--pre-bg);
+  padding: 1em; /* Adds padding for better readability */
+  overflow-x: auto; /* Allows horizontal scrolling for overflow content */
+}
+
+/* Footer styling */
+footer {
+  background-color: var(--header-footer-bg);
+  color: var(--text-color);
+  text-align: center;
+  padding: 1em 0; /* Adds padding for footer */
+  position: fixed; /* Keeps footer at the bottom */
+  width: 100%; /* Ensures footer spans the full width */
+  bottom: 0; /* Positions footer at the bottom */
+}
+
+/* Media Queries for responsive design */
+@media (max-width: 768px) {
+  nav ul {
+    flex-direction: column; /* Stacks navigation items vertically on smaller screens */
+  }
+
+  nav ul li {
+    margin: 0.5em 0; /* Adjusts margin for vertical layout */
+  }
+
+  main {
+    padding: 1em; /* Reduces padding for smaller screens */
+  }
+}

style.css

@@ -1,28 +0,0 @@
-body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
-}
-
-h1 {
-	font-size: 16px;
-	margin-top: 0;
-}
-
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
-}
-
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
-}
-
-.card p:last-child {
-	margin-bottom: 0;
-}