made event calendar more visually apealing

Code-Social#36 and pr Code-Social#67
Subhajit-2023-44 · Oct 7, 2024 · 22d54b9 · 22d54b9
1 parent 8eeb0af
commit 22d54b9
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 4 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5502
+}
diff --git a/index.html b/index.html
@@ -30,41 +30,60 @@
             align-items: center;
             margin: 20px;
         }
+
         .calendar-header {
             font-size: 24px;
             margin-bottom: 10px;
         }
+
         .calendar-grid {
             display: grid;
             grid-template-columns: repeat(7, 1fr);
             gap: 10px;
             margin-bottom: 20px;
+            width: 100%; /* Full width */
+            max-width: 800px; /* Maximum width for the grid */
         }
+
         .calendar-day {
             border: 1px solid #ccc;
-            padding: 10px;
+            padding: 20px; /* Increased padding */
             text-align: center;
             position: relative;
             background-color: #ffffff; /* Light mode day background */
+            height: 100px; /* Fixed height for uniformity */
+            border-radius: 8px; /* Rounded corners */
+            transition: background-color 0.3s ease; /* Smooth transition */
         }
 
         body.dark-mode .calendar-day {
             background-color: #1e1e1e; /* Dark mode day background */
             border-color: #444; /* Dark mode border color */
         }
 
+        .calendar-day:hover {
+            background-color: #e0e0e0; /* Light hover effect */
+        }
+
+        body.dark-mode .calendar-day:hover {
+            background-color: #333; /* Dark hover effect */
+        }
+
         .event {
             background-color: #4CAF50;
             color: white;
-            padding: 2px 5px;
+            padding: 5px; /* Adjusted padding */
             border-radius: 3px;
-            font-size: 12px;
+            font-size: 14px; /* Increased font size */
             position: absolute;
             bottom: 5px;
             left: 5px;
             right: 5px;
             text-align: center;
             cursor: pointer; /* Makes the event clickable */
+            overflow: hidden; /* Prevents overflow of text */
+            white-space: nowrap; /* Keeps text in a single line */
+            text-overflow: ellipsis; /* Adds ellipsis for overflowed text */
         }
 
         /* Form styles */
@@ -74,10 +93,13 @@
             flex-direction: column;
             align-items: center;
         }
+
         .event-form input, .event-form button {
             margin: 5px;
             padding: 10px;
             font-size: 16px;
+            width: 100%; /* Full width for inputs */
+            max-width: 300px; /* Maximum width for inputs */
         }
 
         /* Button styles */
@@ -90,9 +112,11 @@
             border-radius: 3px;
             cursor: pointer;
         }
+
         .edit-btn {
             background-color: #2196F3; /* Blue */
         }
+
         .delete-btn {
             background-color: #F44336; /* Red */
         }
@@ -283,4 +307,3 @@ <h3>Add Event</h3>
     </script>
 </body>
 </html>
-