Make calendar better with narrow viewport

MicrosoftEdge · Dec 18, 2023 · 9786082 · 9786082
1 parent 071b05c
commit 9786082
Showing 1 changed file with 17 additions and 2 deletions.
diff --git a/slow-calendar/public/app.css b/slow-calendar/public/app.css
@@ -7,16 +7,21 @@
 
 html {
  font-family: system-ui;
- font-size: .8rem;
+ font-size: clamp(.6rem, 2vw, .8rem);
 }
 
 html, body {
  margin: 0;
  padding: 0;
  overflow: hidden;
+ overflow-x: auto;
  height: 100%;
 }
 
+body {
+ min-width: 350px;
+}
+
 button {
  border: 1px solid var(--border-color);
  background: #eee;
@@ -41,10 +46,20 @@ button:active {
  display: grid;
  gap: 1rem;
  grid-template-rows: max-content 1fr;
- grid-template-columns: 1fr 200px;
+ grid-template-columns: 1fr clamp(100px, 25%, 200px);
  background-color: var(--background-color);
 }
 
+@media (max-width: 400px) {
+ #app {
+ grid-template-columns: 1fr;
+ column-gap: 0;
+ }
+ #sidebar {
+ display: none;
+ }
+}
+
 #toolbar {
  padding: 1rem;
  background: white;