Update styles.css

ieg-dhr · Oct 5, 2024 · 4d35856 · 4d35856
1 parent 0c2d3a4
commit 4d35856
Showing 1 changed file with 69 additions and 26 deletions.
diff --git a/styles.css b/styles.css
@@ -21,54 +21,60 @@ header {
     background-color: #8B0000;
     color: white;
     text-align: center;
-    padding: 1rem;
+    padding: 1.5rem;
 }
 
 .logo svg {
-    max-width: 100px;
+    max-width: 120px;
     height: auto;
+    margin-bottom: 1rem;
 }
 
 h1 {
-    font-size: 1.8em;
+    font-size: 2em;
     margin: 0.5rem 0;
 }
 
 .content-wrapper {
     display: flex;
     flex: 1;
     padding: 2rem;
-    gap: 2rem;
+    gap: 2.5rem;
+    max-width: 1200px;
+    margin: 0 auto;
 }
 
 .sidebar {
-    width: 250px;
+    width: 280px;
     background-color: white;
     padding: 1.5rem;
-    border-radius: 5px;
-    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
+    border-radius: 8px;
+    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
     align-self: flex-start;
 }
 
 .sidebar h2 {
     color: #8B0000;
     border-bottom: 2px solid #8B0000;
-    padding-bottom: 0.5rem;
-    margin-bottom: 1rem;
+    padding-bottom: 0.75rem;
+    margin-bottom: 1.25rem;
 }
 
 .sidebar ul {
     list-style-type: none;
+    background-color: transparent;
+    padding: 0;
 }
 
 .sidebar li {
-    margin-bottom: 0.5rem;
+    margin-bottom: 0.75rem;
 }
 
 .sidebar a {
     color: #333;
     text-decoration: none;
     transition: color 0.3s;
+    font-size: 1.1em;
 }
 
 .sidebar a:hover {
@@ -77,52 +83,89 @@ h1 {
 
 main {
     flex: 1;
+    max-width: 800px;
 }
 
 section {
     background-color: white;
-    margin-bottom: 2rem;
-    padding: 2rem;
-    border-radius: 5px;
-    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
+    margin-bottom: 2.5rem;
+    padding: 2.5rem;
+    border-radius: 8px;
+    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
 }
-ul {
-    background-color: #f2f2f2;
-    padding: 20px 20px 20px 40px;
-    border-radius: 5px;
+
+section ul {
+    background-color: #f9f9f9;
+    padding: 1.5rem 1.5rem 1.5rem 3rem;
+    border-radius: 8px;
+    margin: 1rem 0;
+}
+
+section li {
+    margin-bottom: 1rem;
 }
 
 h2 {
     color: #8B0000;
     border-bottom: 2px solid #8B0000;
-    padding-bottom: 0.5rem;
-    margin-bottom: 1rem;
+    padding-bottom: 0.75rem;
+    margin-bottom: 1.5rem;
+    font-size: 1.8em;
+}
+
+h3 {
+    color: #8B0000;
+    margin: 1.5rem 0 1rem;
+    font-size: 1.4em;
 }
 
 .session {
-    margin-bottom: 1.5rem;
+    margin-bottom: 2rem;
 }
 
 .session h3 {
     color: #8B0000;
-    margin-bottom: 0.5rem;
+    margin-bottom: 0.75rem;
+}
+
+p {
+    margin-bottom: 1rem;
 }
 
 footer {
     background-color: #333;
     color: white;
     text-align: center;
-    padding: 1rem;
+    padding: 1.5rem;
+    margin-top: 2rem;
 }
 
-@media (max-width: 768px) {
+@media (max-width: 1024px) {
     .content-wrapper {
         flex-direction: column;
-        padding: 1rem;
+        padding: 1.5rem;
     }
 
     .sidebar {
         width: 100%;
-        margin-bottom: 1rem;
+        margin-bottom: 1.5rem;
+    }
+
+    main {
+        max-width: 100%;
+    }
+}
+
+@media (max-width: 768px) {
+    header {
+        padding: 1rem;
+    }
+
+    .content-wrapper {
+        padding: 1rem;
+    }
+
+    section {
+        padding: 1.5rem;
     }
 }