diff --git a/html/calendar.ejs b/html/calendar.ejs
index 901f327e..337689fc 100644
--- a/html/calendar.ejs
+++ b/html/calendar.ejs
@@ -6,7 +6,6 @@
Poke! Calendar
-
@@ -26,8 +25,8 @@
background-color: #333333;
padding: 10px;
display: flex;
- justify-content: space-between; /* Aligns items on both ends */
- align-items: center; /* Centers items vertically */
+ flex-direction: column; /* Stack items vertically on small screens */
+ align-items: center; /* Center items */
}
.navbar h1 {
@@ -39,6 +38,8 @@
color: #bb86fc; /* Year text color */
display: flex; /* Use flexbox for alignment */
gap: 20px; /* Space between year elements */
+ flex-wrap: wrap; /* Allow wrapping on smaller screens */
+ justify-content: center; /* Center items */
}
.container {
@@ -72,6 +73,7 @@
padding: 15px;
text-align: center;
border: 1px solid #333333;
+ font-size: 0.9em; /* Smaller font size for better fit */
}
.calendar-table th {
@@ -100,6 +102,30 @@
.button:hover {
background-color: #9c62f3;
}
+
+ /* Responsive styles */
+ @media (max-width: 768px) {
+ .navbar {
+ flex-direction: column; /* Stack navbar items vertically */
+ padding: 10px;
+ }
+
+ .calendar-table th, .calendar-table td {
+ padding: 10px; /* Reduced padding for smaller screens */
+ font-size: 0.8em; /* Smaller font size */
+ }
+
+ .month-title {
+ font-size: 1.2em; /* Smaller month title */
+ }
+
+ .button {
+ padding: 8px 15px; /* Smaller button size */
+ margin: 5px 0; /* Vertical spacing */
+ display: block; /* Stack buttons vertically */
+ width: 100%; /* Full width */
+ }
+ }