From d4c24d7241a09ede3dfea6e7b7ae351699cdfe6c Mon Sep 17 00:00:00 2001 From: ashley Date: Fri, 4 Oct 2024 15:24:28 +0000 Subject: [PATCH] responsive stuff --- html/calendar.ejs | 32 +++++++++++++++++++++++++++++--- 1 file changed, 29 insertions(+), 3 deletions(-) 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 */ + } + }