From 1cb836271a5fc6cc442f10ffa9154da2ec7657f0 Mon Sep 17 00:00:00 2001
From: Mudasir Murtaza <109586296+mudasirmurtaza@users.noreply.github.com>
Date: Sat, 12 Oct 2024 12:16:35 +0500
Subject: [PATCH] Update styles.css

---
 styles.css | 314 +++++++++++++++++++----------------------------------
 1 file changed, 113 insertions(+), 201 deletions(-)

diff --git a/styles.css b/styles.css
index be97e2e..e303151 100644
--- a/styles.css
+++ b/styles.css
@@ -283,59 +283,35 @@ body {
 } */
 /* Global Styles */
 body {
-    font-family: 'Courier New', Courier, monospace;
+    font-family: 'Poppins', sans-serif;
     margin: 0;
     padding: 0;
-    background-color: #f0f0f0; /* Light background color */
+    background-color: #f5f5f5; /* Softer background */
+    color: #333; /* Darker text for better readability */
+    transition: background-color 0.3s ease, color 0.3s ease;
 }
 
 /* Navbar Styles */
 .navbar {
     background-color: #333;
-    overflow: hidden;
     display: flex;
     justify-content: space-between;
     align-items: center;
-    box-sizing: border-box;
-}
-
-.navbar a.logo {
-    background-color: #333 !important;
-    cursor: pointer;
-}
-
-.theme-toggle-wrapper{
-    transform: translateX(-60px);
+    padding: 0 20px;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Soft shadow for floating effect */
 }
 
-#theme-toggle{
-    background-color: transparent;
-    border: none;
-    color: white;
-    font-size: larger;
-    padding-right: 20px;
-}
-
-
 .navbar a {
-    float: left;
     color: #f2f2f2;
-    text-align: center;
-    padding: 14px 16px;
     text-decoration: none;
+    padding: 14px 16px;
     font-size: 17px;
-    height: 100%;
-    transition: background-color 0.3s, color 0.3s; /* Smooth transitions */
-    height: 40px;
-   text-align: center;
-    line-height: 40px;
-    
-   
+    transition: background-color 0.3s, color 0.3s;
 }
 
 .navbar a:hover {
-    background-color: #ddd;
-    color: black;
+    background-color: #555;
+    color: white;
 }
 
 .navbar a.active {
@@ -343,96 +319,104 @@ body {
     color: white;
 }
 
-/* Content Styles */
-.content {
-    padding: 20px; /* Padding around content */
-    background-color: #f9f9f9; /* Light background for content */
-    border-radius: 5px; /* Rounded corners */
-    margin-top: 20px; /* Space above the content */
+/* Logo */
+.navbar .logo img {
+    height: 40px;
+    width: auto;
 }
 
-/* Features Section */
-.features {
-    background-color: #f9f9f9; /* Light background for features */
-    padding: 20px; /* Space around the features section */
-    border-radius: 5px; /* Rounded corners */
-    margin-top: 20px; /* Space above the section */
+/* Theme Toggle */
+.theme-toggle-wrapper {
+    display: flex;
+    align-items: center;
 }
 
-.feature {
-    margin-bottom: 15px; /* Space between each feature */
+#theme-toggle {
+    background: none;
+    border: none;
+    color: #f2f2f2;
+    font-size: 20px;
+    cursor: pointer;
+    transition: color 0.3s ease;
 }
 
-/* Call to Action Styles */
-.call-to-action {
-    text-align: center; /* Center the text */
-    margin-top: 30px; /* Space above the section */
-    padding: 20px;
+#theme-toggle:hover {
+    color: #ddd;
 }
 
-.cta-button {
-    display: inline-block; /* Inline-block for padding */
-    padding: 10px 20px; /* Button padding */
-    background-color: #007bff; /* Button color */
-    color: white; /* Text color */
-    text-decoration: none; /* Remove underline */
-    border-radius: 5px; /* Rounded corners */
-    transition: background-color 0.3s; /* Smooth transitions */
+/* Content Styles */
+.content {
+    padding: 40px;
+    max-width: 1200px;
+    margin: 0 auto;
+    background-color: #fff;
+    border-radius: 8px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); /* Soft shadow */
+    transition: background-color 0.3s ease;
 }
 
-.cta-button:hover {
-    background-color: #0056b3; /* Darker color on hover */
+h1, h2, h3, h4 {
+    color: #333;
+    font-weight: 600;
 }
 
-/* Challenges List */
-#challenge-list, #learn-list {
-    list-style-type: none; /* Remove default list style */
-    padding: 0; /* Remove padding */
+/* Features Section */
+.features {
+    display: flex;
+    justify-content: space-between;
+    gap: 20px;
+    margin-top: 40px;
 }
 
-#challenge-list li, #learn-list li {
-    margin-bottom: 10px; /* Space between each challenge/lesson */
+.feature {
+    background-color: #f9f9f9;
+    padding: 20px;
+    border-radius: 10px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    transition: transform 0.3s ease;
 }
 
-#challenge-list a, #learn-list a {
-    text-decoration: none; /* Remove underline */
-    color: #007bff; /* Link color */
-    font-weight: bold; /* Bold text */
-    transition: color 0.3s; /* Smooth color transitions */
+.feature:hover {
+    transform: translateY(-5px); /* Lift effect on hover */
 }
 
-#challenge-list a:hover, #learn-list a:hover {
-    color: #0056b3; /* Darker color on hover */
+/* Call-to-Action Button */
+.cta-button {
+    display: inline-block;
+    padding: 12px 30px;
+    background-color: #007bff;
+    color: white;
+    border-radius: 5px;
+    text-decoration: none;
+    transition: background-color 0.3s ease, transform 0.3s ease;
 }
 
-/* Challenge Description */
-.challenge-description {
-    margin-top: 20px; /* Space above description */
-    padding: 15px; /* Padding around description */
-    background-color: #e9ecef; /* Light gray background for description */
-    border-radius: 5px; /* Rounded corners */
+.cta-button:hover {
+    background-color: #0056b3;
+    transform: scale(1.05); /* Slight zoom on hover */
 }
 
-/* Editor and Terminal Styles */
+/* Editor and Terminal */
 #editor-container {
-    display: none;
-    margin-top: 20px;
     display: flex;
     justify-content: space-between;
-    flex-wrap: wrap; /* Wraps on small screens */
+    margin-top: 40px;
+    background-color: #f9f9f9;
+    padding: 20px;
+    border-radius: 8px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
 }
 
 #editor {
-    width: 60%;
+    width: 65%;
     height: 400px;
-    border: 1px solid #ccc;
-    font-size: 20px;
-    box-sizing: border-box; /* Ensures padding and border are included in width/height */
-    padding: 10px; /* Adds padding for better text appearance */
+    border: 2px solid #ccc;
+    border-radius: 8px;
+    padding: 10px;
 }
 
 #terminal-container {
-    width: 35%;
+    width: 30%;
     display: flex;
     flex-direction: column;
 }
@@ -440,154 +424,82 @@ body {
 #terminal {
     width: 100%;
     height: 350px;
-    background-color: #000;
-    color: #fff;
+    background-color: #222;
+    color: #f0f0f0;
+    border-radius: 8px;
     padding: 10px;
-    box-sizing: border-box;
     overflow-y: auto;
-    font-family: monospace;
-    font-size: 16px;
+    font-family: 'Roboto Mono', monospace;
 }
 
 /* Button Styles */
 #run-button, #clear-button {
-    margin-top: 10px;
-    padding: 10px 20px; /* More padding for better click area */
-    background-color: #007bff; /* Button color */
-    color: white; /* Text color */
+    padding: 10px 20px;
+    background-color: #007bff;
+    color: white;
+    border-radius: 5px;
     border: none;
+    margin-right: 10px;
     cursor: pointer;
-    font-family: 'Courier New', Courier, monospace;
-    font-size: 16px;
-    transition: background-color 0.3s; /* Smooth transitions */
+    transition: background-color 0.3s ease, transform 0.3s ease;
 }
 
 #clear-button {
-    background-color: #dc3545; /* Red background for clear button */
+    background-color: #dc3545;
 }
 
-#run-button:hover {
-    background-color: #0056b3; /* Darker color on hover */
+#run-button:hover, #clear-button:hover {
+    transform: scale(1.05); /* Slight hover zoom */
 }
 
 #clear-button:hover {
-    background-color: #c82333; /* Darker red on hover */
+    background-color: #c82333;
 }
 
-/* Accessibility Focus Styles */
-#run-button:focus, #clear-button:focus {
-    outline: 2px solid #fff; /* Accessibility focus style */
-    outline-offset: 2px;
-}
-
-/* Ace Editor Styles */
-.ace_editor {
-    font-size: 20px !important; /* Keep consistent font size */
-}
-
-/* Responsive Adjustments */
-@media (max-width: 768px) {
-    #editor {
-        width: 100%; /* Full width on small screens */
-        height: 300px; /* Adjust height for smaller screens */
-    }
-    
-    #terminal {
-        height: 250px; /* Adjust height for smaller screens */
-    }
-    
-    #terminal-container {
-        width: 100%; /* Full width on small screens */
-    }
-    
-    #editor-container {
-        flex-direction: column; /* Stack vertically on small screens */
-    }
-}
-
-
-/* Dark Theme Styles */
+/* Dark Theme */
 body.dark-theme {
-    background-color: #121212; /* Dark background color */
-    color: #e0e0e0; /* Light text color */
+    background-color: #121212; /* Dark background */
+    color: #e0e0e0; /* Light text */
 }
 
 body.dark-theme .navbar {
     background-color: #1f1f1f; /* Darker navbar background */
 }
 
-body.dark-theme .navbar a {
-    color: #e0e0e0; /* Light text for navbar links */
-}
-
-body.dark-theme .navbar a:hover {
-    background-color: #333; /* Slightly lighter background on hover */
-    color: #fff; /* White text on hover */
-}
-
-body.dark-theme .navbar a.active {
-    background-color: #007bff; /* Keep active link color */
-    color: #fff; /* White text for active link */
+body.dark-theme .content {
+    background-color: #1f1f1f; /* Dark background for content */
+    color: #e0e0e0; /* Light text for content */
 }
 
-body.dark-theme .content, 
-body.dark-theme .features, 
-body.dark-theme .challenge-description {
-    background-color: #1f1f1f; /* Dark background for content and features */
-    color: #e0e0e0; /* Light text color */
-}
-
-body.dark-theme .cta-button {
-    background-color: #007bff; /* Keep button color */
-    color: #fff; /* White text */
-}
-
-body.dark-theme .cta-button:hover {
-    background-color: #0056b3; /* Darker button hover */
-}
-
-body.dark-theme #challenge-list a, 
-body.dark-theme #learn-list a {
-    color: #90caf9; /* Lighter blue for links */
-}
-
-body.dark-theme #challenge-list a:hover, 
-body.dark-theme #learn-list a:hover {
-    color: #64b5f6; /* Lighter blue on hover */
+body.dark-theme h1,
+body.dark-theme h2,
+body.dark-theme h3,
+body.dark-theme h4 {
+    color: #e0e0e0; /* Light text for headings */
 }
 
 body.dark-theme #editor {
     background-color: #1e1e1e; /* Dark background for editor */
-    color: #cfcfcf; /* Light text color */
+    color: #cfcfcf; /* Light text for editor */
 }
 
 body.dark-theme #terminal {
     background-color: #1e1e1e; /* Dark background for terminal */
-    color: #cfcfcf; /* Light text color */
-    border: #cfcfcf solid 1px;
-}
-
-body.dark-theme #run-button, 
-body.dark-theme #clear-button {
-    background-color: #007bff; /* Keep button color */
-    color: white; /* White text */
+    color: #cfcfcf; /* Light text for terminal */
 }
 
-body.dark-theme #clear-button {
-    background-color: #dc3545; /* Red button for clear */
+body.dark-theme .features {
+    background-color: #1f1f1f; /* Dark background for features */
+    color: #e0e0e0; /* Light text for features */
 }
 
-body.dark-theme #run-button:hover {
-    background-color: #0056b3; /* Darker blue on hover */
+body.dark-theme .feature {
+    background-color: #292929; /* Dark background for feature boxes */
+    color: #e0e0e0; /* Light text for feature boxes */
 }
 
-body.dark-theme #clear-button:hover {
-    background-color: #c82333; /* Darker red on hover */
+/* Ensuring visibility for challenge descriptions */
+body.dark-theme .challenge-description {
+    background-color: #292929; /* Dark background for challenge descriptions */
+    color: #e0e0e0; /* Light text for challenge descriptions */
 }
-
-@media screen and (max-width: 768px) {
-    .theme-toggle-wrapper{
-        transform: translateX(0px);
-    }
-    
-}
\ No newline at end of file