start home page and settings

dist/index.css

@@ -1,130 +1,26 @@
-/* src/styles.css */
-[unread] {
-  border-left: 10px solid var(--text-warning);
-}
-:root {
-  --split-thread-height: 8rem;
-  --split-thread-width: 20rem;
-}
-.object-entry-wide {
-  width: 320px;
-  min-width: 320px;
-}
-#message-tab {
-  flex-direction: column;
-}
-.chat-object-view {
-  display: none;
-}
-[showingobjects] header {
-  border-bottom: 1px solid var(--border);
-}
-[showingobjects] footer {
-  display: none;
-}
-[showingobjects] .chat-object-view {
-  display: flex;
-  top: var(--header-height);
-}
-[showingobjects] .thread-view {
-  display: none;
-}
-[showingobjects][chatvisible] .chat-object-view {
-  right: var(--split-thread-width);
-  border-right: 1px solid var(--border);
-}
-[showingobjects][chatvisible] .thread-view {
-  top: var(--header-height);
-  padding-top: var(--content-padding);
-}
-[showingobjects][chatvisible] :is(.thread-view, footer) {
-  display: flex;
-  right: 0px;
-  left: unset;
-  width: var(--split-thread-width);
-}
-main:has([showingobjects][chatopen]) {
-  display: flex;
-}
-main:has([showingobjects][chatopen]) #settings-tab {
-  display: none;
-}
-@media (max-width: 640px) {
-  [showingobjects][chatvisible][chatopen] .chat-object-view {
-    width: 100%;
-    bottom: calc(var(--split-thread-height) + var(--control-height));
-    border-right: none;
-    border-bottom: 1px solid var(--border);
-  }
-  [showingobjects][chatvisible][chatopen] .thread-view {
-    top: unset;
-    bottom: calc(var(--control-height) + var(--safe-area-bottom));
-    width: 100%;
-    height: var(--split-thread-height);
-    padding: 0px;
-  }
-  [showingobjects][chatvisible][chatopen] footer {
-    width: 100%;
-  }
-}
-:root {
-  --day-view-width: 400px;
-}
-.calendar-wrapper {
+/* src/View/homePage.css */
+#home-page > div {
   display: flex;
   flex-direction: column;
-  width: 100%;
-  height: 100%;
+  gap: var(--large-gap);
 }
-.calendar-wrapper .month-grid {
-  border-bottom: 1px solid var(--border);
-}
-.calendar-wrapper > * {
+#home-page > div > div {
+  display: flex;
+  flex-direction: column;
+  justify-content: start;
+  gap: var(--gap-between-tiles);
   width: 100%;
-  height: 100%;
   flex: 1;
 }
-.day-miniature[today] h3 {
-  color: var(--primary);
+#home-page #overview-section {
+  max-width: var(--max-input-width);
 }
-.day-miniature:has(> div:not(:empty)):not([selected]) {
-  border: var(--gap-between-tiles) solid var(--text-warning);
-}
-@media (min-width: 750px) {
-  .calendar-wrapper:not([chatvisible] *) {
+@media (min-width: 1000px) {
+  #home-page > div {
     flex-direction: row;
+    gap: 8rem;
   }
-  .calendar-wrapper:not([chatvisible] *) .month-grid {
-    border-bottom: none;
-    border-right: 1px solid var(--border);
-  }
-  .calendar-wrapper:not([chatvisible] *) .day-view {
-    max-width: var(--day-view-width);
-  }
-}
-@media (min-width: 1200px) {
-  .calendar-wrapper {
-    flex-direction: row;
-  }
-  .calendar-wrapper .month-grid {
-    border-bottom: none;
-    border-right: 1px solid var(--border);
-  }
-  .calendar-wrapper .day-view {
-    max-width: var(--day-view-width);
-  }
-}
-@media (max-width: 600px) or ((min-width: 750px) and (max-width: 1100px)) {
-  .day-miniature {
-    padding: 0px !important;
-    align-items: center !important;
-    justify-content: center;
-  }
-  .day-miniature h3 {
-    font-size: 1rem;
-    text-align: center;
-  }
-  .day-miniature > div {
-    display: none;
+  #home-page #overview-section {
+    width: var(--max-input-width);
   }
 }