update at 2026-03-17 10:37:27

calendar/src/style.css

@@ -8,10 +8,20 @@
   background: #ffffff;
   --dashboard-width: 1072px;
   --dashboard-height: 1448px;
+  --dashboard-aspect: 1072 / 1448;
   --ink: #000000;
+  --muted-ink: #4c4c4c;
   --paper: #ffffff;
+  --panel-background: #ffffff;
+  --page-background: #ffffff;
   --frame-stroke: #8b6b47;
   --frame-stroke-strong: #6f5235;
+  --frame-muted: rgba(139, 107, 71, 0.35);
+  --badge-fill: #faf6ef;
+  --display-font: 'Iowan Old Style', 'Baskerville', serif;
+  --title-font: 'Hiragino Sans GB', 'PingFang SC', 'Noto Sans SC', sans-serif;
+  --card-radius: 2rem;
+  --panel-radius: 1.25rem;
   font-synthesis: none;
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
@@ -33,6 +43,7 @@ body,
 
 body {
   min-height: 100vh;
+  font-family: var(--body-font, 'Hiragino Sans GB', 'PingFang SC', 'Noto Sans SC', sans-serif);
 }
 
 img {
@@ -44,34 +55,127 @@ img {
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: 0;
-  background: #ffffff;
+  padding: 1.1rem;
+  background: var(--page-background);
 }
 
 .page-shell--clock-face {
-  background: #ffffff;
+  background: var(--page-background);
+}
+
+.page-shell--background {
+  padding: 0;
+  width: var(--dashboard-width);
+  height: var(--dashboard-height);
+  min-height: 0;
+  align-items: stretch;
+  justify-content: flex-start;
+  overflow: hidden;
+}
+
+.page-stack {
+  display: grid;
+  gap: 0.9rem;
+  justify-items: center;
+  width: 100%;
+}
+
+.page-shell--background .page-stack {
+  gap: 0;
+  width: var(--dashboard-width);
+  height: var(--dashboard-height);
+  justify-items: stretch;
+}
+
+.preview-toolbar {
+  display: inline-flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 0.75rem;
+  padding: 0.65rem 0.8rem;
+  border: 1.5px solid var(--frame-stroke);
+  border-radius: 999px;
+  background: var(--paper);
+}
+
+.preview-toolbar__field {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.45rem;
+}
+
+.preview-toolbar__label {
+  font-family: var(--title-font);
+  font-size: calc(0.88rem * var(--theme-font-scale, 1));
+  color: var(--muted-ink);
+}
+
+.preview-toolbar__select {
+  min-width: 9.2rem;
+  padding: 0.36rem 0.7rem;
+  border: 1.5px solid var(--frame-stroke);
+  border-radius: 999px;
+  background: var(--paper);
+  color: var(--ink);
+  font: inherit;
+  font-size: calc(1rem * var(--theme-font-scale, 1));
 }
 
 .dashboard-frame {
   width: min(100vw, var(--dashboard-width));
-  aspect-ratio: 1072 / 1448;
+  aspect-ratio: var(--dashboard-aspect);
   background: var(--paper);
+  overflow: hidden;
+}
+
+.page-shell--background .dashboard-frame {
+  width: var(--dashboard-width);
+  height: var(--dashboard-height);
+  aspect-ratio: auto;
+  flex: 0 0 auto;
 }
 
 .dashboard-grid {
   display: grid;
-  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
-  grid-template-rows: minmax(0, 1fr) 168px;
-  gap: 1.25rem;
+  gap: 1.15rem;
   height: 100%;
-  padding: 1.4rem;
+  padding: 1.3rem;
   align-content: start;
   align-items: stretch;
 }
 
+.dashboard-grid--portrait {
+  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
+  grid-template-rows: minmax(0, 1fr) 168px;
+}
+
+.dashboard-grid--portrait .dashboard-grid__quote {
+  grid-column: 1 / -1;
+}
+
+.dashboard-grid--landscape {
+  grid-template-columns: minmax(0, 1.24fr) minmax(21rem, 0.76fr);
+  grid-template-rows: minmax(0, 1fr) 216px;
+}
+
+.dashboard-grid--landscape .dashboard-grid__calendar {
+  grid-column: 1;
+  grid-row: 1 / span 2;
+}
+
+.dashboard-grid--landscape .dashboard-grid__weather {
+  grid-column: 2;
+  grid-row: 1;
+}
+
+.dashboard-grid--landscape .dashboard-grid__quote {
+  grid-column: 2;
+  grid-row: 2;
+}
+
 .card {
   min-height: 0;
-  border-radius: 2rem;
+  border-radius: var(--card-radius);
   background: var(--paper);
   border: 2px solid var(--frame-stroke);
   box-shadow: none;
@@ -84,6 +188,56 @@ img {
   aspect-ratio: 1;
 }
 
+.dashboard-grid--landscape .calendar-card {
+  gap: 0.82rem;
+}
+
+.dashboard-grid--landscape .calendar-card__day {
+  font-size: calc(6.2rem * var(--theme-font-scale, 1));
+}
+
+.dashboard-grid--landscape .weather-card {
+  grid-template-rows: auto minmax(0, 1fr) minmax(0, 0.86fr) minmax(0, 0.9fr);
+  gap: 0.58rem;
+}
+
+.dashboard-grid--landscape .weather-card__title {
+  font-size: calc(1.92rem * var(--theme-font-scale, 1));
+}
+
+.dashboard-grid--landscape .weather-card__subtitle {
+  font-size: calc(1rem * var(--theme-font-scale, 1));
+}
+
+.dashboard-grid--landscape .weather-card__temperature {
+  font-size: calc(2.4rem * var(--theme-font-scale, 1));
+}
+
+.dashboard-grid--landscape .weather-card__condition {
+  font-size: calc(1.2rem * var(--theme-font-scale, 1));
+}
+
+.dashboard-grid--landscape .weather-card__forecast {
+  gap: 0.36rem;
+}
+
+.dashboard-grid--landscape .forecast-pill {
+  padding: 0.32rem 0.12rem;
+}
+
+.dashboard-grid--landscape .forecast-pill__label {
+  font-size: calc(0.92rem * var(--theme-font-scale, 1) * var(--forecast-pill-scale, 1));
+}
+
+.dashboard-grid--landscape .forecast-pill__temp {
+  font-size: calc(1.1rem * var(--theme-font-scale, 1) * var(--forecast-pill-scale, 1));
+}
+
+.dashboard-grid--landscape .quote-card {
+  gap: 0.5rem;
+  padding: 0.92rem 1rem;
+}
+
 @media (max-width: 1100px) {
   .page-shell {
     padding: 0.75rem;
@@ -101,6 +255,14 @@ img {
     padding: 0.9rem;
   }
 
+  .dashboard-grid--portrait .dashboard-grid__quote,
+  .dashboard-grid--landscape .dashboard-grid__calendar,
+  .dashboard-grid--landscape .dashboard-grid__weather,
+  .dashboard-grid--landscape .dashboard-grid__quote {
+    grid-column: auto;
+    grid-row: auto;
+  }
+
   .page-shell {
     align-items: stretch;
   }