first commit
This commit is contained in:
douboer@gmail.com
448
calendar/src/style.css
Normal file
448
calendar/src/style.css
Normal file
@@ -0,0 +1,448 @@
|
||||
:root {
|
||||
font-family:
|
||||
'Hiragino Sans GB',
|
||||
'PingFang SC',
|
||||
'Noto Sans SC',
|
||||
sans-serif;
|
||||
color: #0f172a;
|
||||
background:
|
||||
radial-gradient(circle at 18% 12%, rgba(255, 255, 255, 0.88), transparent 30%),
|
||||
radial-gradient(circle at 82% 18%, rgba(241, 238, 232, 0.92), transparent 24%),
|
||||
linear-gradient(160deg, #f4f1eb 0%, #ebe5dc 52%, #e4ddd4 100%);
|
||||
font-synthesis: none;
|
||||
text-rendering: optimizeLegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html,
|
||||
body,
|
||||
#app {
|
||||
margin: 0;
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.page-shell {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.dashboard-frame {
|
||||
width: min(100%, 1448px);
|
||||
aspect-ratio: 1448 / 1072;
|
||||
padding: clamp(1.2rem, 1vw + 0.9rem, 2rem);
|
||||
border-radius: 2rem;
|
||||
background:
|
||||
linear-gradient(180deg, rgba(255, 255, 255, 0.38), rgba(255, 255, 255, 0.18)),
|
||||
rgba(255, 255, 255, 0.14);
|
||||
box-shadow:
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.55),
|
||||
0 38px 72px rgba(64, 52, 38, 0.14);
|
||||
backdrop-filter: blur(14px);
|
||||
}
|
||||
|
||||
.dashboard-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1.08fr 1fr;
|
||||
grid-template-rows: auto auto;
|
||||
gap: clamp(1rem, 1vw + 0.75rem, 2rem);
|
||||
height: 100%;
|
||||
align-content: start;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.card {
|
||||
border-radius: 1.6rem;
|
||||
background: rgba(255, 255, 255, 0.94);
|
||||
box-shadow:
|
||||
0 20px 36px rgba(72, 58, 44, 0.12),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.65);
|
||||
border: 1px solid rgba(70, 58, 46, 0.08);
|
||||
}
|
||||
|
||||
.calendar-card,
|
||||
.weather-card {
|
||||
padding: clamp(1.4rem, 1.2vw + 1rem, 2rem);
|
||||
min-height: 0;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.calendar-card {
|
||||
display: grid;
|
||||
grid-template-rows: auto 1fr;
|
||||
gap: 0.8rem;
|
||||
}
|
||||
|
||||
.calendar-card__header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1.6rem;
|
||||
}
|
||||
|
||||
.calendar-card__day {
|
||||
font-family:
|
||||
'Iowan Old Style',
|
||||
'Baskerville',
|
||||
serif;
|
||||
font-size: clamp(4.4rem, 5vw, 7rem);
|
||||
line-height: 0.95;
|
||||
letter-spacing: -0.08em;
|
||||
color: #101010;
|
||||
}
|
||||
|
||||
.calendar-card__meta {
|
||||
display: grid;
|
||||
gap: 0.65rem;
|
||||
}
|
||||
|
||||
.calendar-card__date-line,
|
||||
.calendar-card__lunar {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
align-items: baseline;
|
||||
margin: 0;
|
||||
font-size: clamp(1rem, 0.7vw + 0.7rem, 1.55rem);
|
||||
}
|
||||
|
||||
.calendar-card__weekday {
|
||||
color: #556274;
|
||||
}
|
||||
|
||||
.calendar-card__lunar {
|
||||
color: #5f4b32;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.calendar-card__badges {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.45rem;
|
||||
}
|
||||
|
||||
.calendar-card__badges--inline {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
margin-left: 0.1rem;
|
||||
}
|
||||
|
||||
.calendar-card__badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
min-height: 1.6rem;
|
||||
padding: 0.2rem 0.55rem;
|
||||
border-radius: 999px;
|
||||
border: 1px solid currentColor;
|
||||
font-size: 0.76rem;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.calendar-card__badge--holiday {
|
||||
color: #2f2b26;
|
||||
background: #ece5db;
|
||||
}
|
||||
|
||||
.calendar-card__badge--workday {
|
||||
color: #68593f;
|
||||
background: #f2eadb;
|
||||
}
|
||||
|
||||
.calendar-card__badge--festival {
|
||||
color: #4f4436;
|
||||
background: #f5f0e8;
|
||||
}
|
||||
|
||||
.calendar-card__badge--term {
|
||||
color: #3a4a4a;
|
||||
background: #e9efef;
|
||||
}
|
||||
|
||||
.calendar-card__grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(7, minmax(0, 1fr));
|
||||
grid-template-rows: auto;
|
||||
grid-auto-rows: minmax(0, 1fr);
|
||||
gap: 0.35rem 0.3rem;
|
||||
align-content: start;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.calendar-card__week-label {
|
||||
text-align: center;
|
||||
color: #798395;
|
||||
font-size: 0.92rem;
|
||||
padding-bottom: 0.45rem;
|
||||
}
|
||||
|
||||
.calendar-card__cell {
|
||||
min-height: 0;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
align-content: center;
|
||||
padding: 0.2rem 0;
|
||||
border-radius: 0.8rem;
|
||||
color: #304153;
|
||||
transition: background-color 150ms ease;
|
||||
}
|
||||
|
||||
.calendar-card__cell--muted {
|
||||
color: #bac4d2;
|
||||
}
|
||||
|
||||
.calendar-card__cell--today {
|
||||
background: linear-gradient(180deg, #303640 0%, #1f252d 100%);
|
||||
color: #ffffff;
|
||||
box-shadow: 0 14px 24px rgba(31, 37, 45, 0.24);
|
||||
}
|
||||
|
||||
.calendar-card__cell--holiday .calendar-card__solar,
|
||||
.calendar-card__cell--holiday .calendar-card__lunar-day {
|
||||
color: #6a4a1c;
|
||||
}
|
||||
|
||||
.calendar-card__solar {
|
||||
font-size: 1.3rem;
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
.calendar-card__lunar-day {
|
||||
font-size: 0.68rem;
|
||||
line-height: 1.2;
|
||||
opacity: 0.82;
|
||||
}
|
||||
|
||||
.weather-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
gap: 0.8rem;
|
||||
}
|
||||
|
||||
.weather-card__heading {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.weather-card__title {
|
||||
margin: 0;
|
||||
font-size: clamp(1.5rem, 1vw + 1rem, 2rem);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.weather-card__subtitle {
|
||||
margin: 0.35rem 0 0;
|
||||
color: #778396;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.weather-card__hero {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
padding: 1.05rem 1.2rem;
|
||||
border-radius: 1.2rem;
|
||||
background: linear-gradient(180deg, #ece8e1 0%, #e2ddd4 100%);
|
||||
}
|
||||
|
||||
.weather-card__hero--placeholder {
|
||||
justify-content: center;
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.weather-card__hero-main {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.weather-card__temperature {
|
||||
font-size: clamp(2.2rem, 1.2vw + 1.6rem, 3.2rem);
|
||||
line-height: 1;
|
||||
font-family:
|
||||
'Iowan Old Style',
|
||||
'Baskerville',
|
||||
serif;
|
||||
}
|
||||
|
||||
.weather-card__condition {
|
||||
margin-top: 0.35rem;
|
||||
font-size: 1.15rem;
|
||||
color: #243041;
|
||||
}
|
||||
|
||||
.weather-card__facts {
|
||||
display: grid;
|
||||
gap: 0.45rem;
|
||||
color: #475569;
|
||||
}
|
||||
|
||||
.weather-card__fact {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.45rem;
|
||||
font-size: 0.98rem;
|
||||
}
|
||||
|
||||
.weather-card__forecast {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(5, minmax(0, 1fr));
|
||||
gap: 0.65rem;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.forecast-pill {
|
||||
display: grid;
|
||||
justify-items: center;
|
||||
align-content: center;
|
||||
gap: 0.45rem;
|
||||
padding: 0.8rem 0.55rem;
|
||||
border-radius: 1rem;
|
||||
background: #f7f4ef;
|
||||
border: 1px solid rgba(82, 70, 56, 0.08);
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.forecast-pill__label {
|
||||
margin: 0;
|
||||
color: #556274;
|
||||
font-size: 0.9rem;
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
.forecast-pill__temp {
|
||||
margin: 0;
|
||||
font-size: 1rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.forecast-pill__temp span {
|
||||
margin-left: 0.15rem;
|
||||
color: #7d8798;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.weather-card__metrics {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
gap: 0.65rem;
|
||||
}
|
||||
|
||||
.metric-pill {
|
||||
display: grid;
|
||||
align-content: center;
|
||||
gap: 0.45rem;
|
||||
padding: 0.85rem 0.9rem 0.9rem;
|
||||
border-radius: 1rem;
|
||||
}
|
||||
|
||||
.metric-pill__label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.45rem;
|
||||
font-size: 0.88rem;
|
||||
}
|
||||
|
||||
.metric-pill__value {
|
||||
margin: 0;
|
||||
font-size: 1.25rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.metric--sunrise {
|
||||
background: linear-gradient(150deg, #f3eee5, #ebe3d6);
|
||||
color: #5c4631;
|
||||
}
|
||||
|
||||
.metric--sunset {
|
||||
background: linear-gradient(150deg, #efebe6, #e5dfd6);
|
||||
color: #4f463d;
|
||||
}
|
||||
|
||||
.metric--air {
|
||||
background: linear-gradient(150deg, #eef0eb, #e3e7de);
|
||||
color: #354338;
|
||||
}
|
||||
|
||||
.metric--visibility {
|
||||
background: linear-gradient(150deg, #eef1f0, #e2e5e4);
|
||||
color: #3b4a4d;
|
||||
}
|
||||
|
||||
.quote-card {
|
||||
grid-column: 1 / -1;
|
||||
display: grid;
|
||||
gap: 1.1rem;
|
||||
padding: clamp(1.5rem, 1.2vw + 1rem, 2rem);
|
||||
background: linear-gradient(168deg, rgba(249, 245, 236, 0.98), rgba(244, 239, 229, 0.94));
|
||||
}
|
||||
|
||||
.quote-card__content {
|
||||
margin: 0;
|
||||
color: #1e293b;
|
||||
line-height: 1.65;
|
||||
font-family:
|
||||
'Iowan Old Style',
|
||||
'Baskerville',
|
||||
'Noto Serif SC',
|
||||
serif;
|
||||
}
|
||||
|
||||
@media (max-width: 1080px) {
|
||||
.page-shell {
|
||||
padding: 0.9rem;
|
||||
}
|
||||
|
||||
.dashboard-frame {
|
||||
aspect-ratio: auto;
|
||||
width: min(100%, 1448px);
|
||||
}
|
||||
|
||||
.dashboard-grid {
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: auto;
|
||||
}
|
||||
|
||||
.quote-card {
|
||||
grid-column: auto;
|
||||
}
|
||||
|
||||
.weather-card__forecast,
|
||||
.weather-card__metrics {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 720px) {
|
||||
.calendar-card__header,
|
||||
.weather-card__heading,
|
||||
.weather-card__hero {
|
||||
grid-template-columns: 1fr;
|
||||
display: grid;
|
||||
}
|
||||
|
||||
.calendar-card__header {
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.weather-card__forecast,
|
||||
.weather-card__metrics {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
|
||||
.quote-card__content {
|
||||
font-size: 1.45rem !important;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user