修改1
This commit is contained in:
+203
-54
@@ -225,56 +225,16 @@ h1 {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: grid;
|
||||
grid-template-columns: 150px minmax(0, 1fr);
|
||||
grid-template-columns: minmax(280px, 1fr) minmax(0, 2fr);
|
||||
gap: clamp(28px, 5vw, 64px);
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.memory-date-card {
|
||||
position: sticky;
|
||||
top: 26px;
|
||||
overflow: hidden;
|
||||
border: 1px solid rgba(55, 109, 90, 0.2);
|
||||
border-radius: 14px;
|
||||
background: #fffdf7;
|
||||
box-shadow: 0 18px 42px rgba(39, 55, 52, 0.11);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.memory-date-card span,
|
||||
.memory-date-card small {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.memory-date-card span {
|
||||
padding: 8px 12px;
|
||||
background: var(--green);
|
||||
color: #fffdf7;
|
||||
font-size: 14px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.memory-date-card strong {
|
||||
display: block;
|
||||
padding: 12px 12px 2px;
|
||||
color: var(--ink);
|
||||
font-family: Georgia, "Times New Roman", serif;
|
||||
font-size: 62px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.memory-date-card small {
|
||||
padding: 8px 12px 13px;
|
||||
color: var(--muted);
|
||||
font-size: 11px;
|
||||
letter-spacing: 0.08em;
|
||||
}
|
||||
|
||||
.on-this-day-heading {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) minmax(240px, 0.8fr);
|
||||
gap: clamp(20px, 4vw, 52px);
|
||||
align-items: end;
|
||||
grid-template-columns: 1fr;
|
||||
gap: 12px;
|
||||
align-items: start;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
@@ -287,6 +247,162 @@ h1 {
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.memory-calendar {
|
||||
position: sticky;
|
||||
top: 26px;
|
||||
padding: 18px;
|
||||
border: 1px solid rgba(31, 43, 42, 0.12);
|
||||
border-radius: 14px;
|
||||
background: rgba(255, 255, 255, 0.72);
|
||||
box-shadow: 0 8px 28px rgba(39, 55, 52, 0.06);
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
.memory-calendar-head,
|
||||
.memory-calendar-nav {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.memory-calendar-head {
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.memory-calendar-nav {
|
||||
justify-content: space-between;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.memory-calendar-nav strong {
|
||||
min-width: 126px;
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.memory-calendar-nav button,
|
||||
.memory-calendar-today {
|
||||
min-height: 38px;
|
||||
border: 1px solid var(--line);
|
||||
background: #fffdf7;
|
||||
color: var(--ink);
|
||||
font: inherit;
|
||||
font-weight: 800;
|
||||
cursor: pointer;
|
||||
transition: border-color 160ms ease, background 160ms ease, color 160ms ease;
|
||||
}
|
||||
|
||||
.memory-calendar-nav button {
|
||||
width: 38px;
|
||||
padding: 0;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.memory-calendar-today {
|
||||
width: 100%;
|
||||
padding: 7px 13px;
|
||||
border-radius: 999px;
|
||||
color: var(--green);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.memory-calendar-nav button:hover,
|
||||
.memory-calendar-today:hover {
|
||||
border-color: var(--green);
|
||||
background: var(--green);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.memory-calendar-weekdays,
|
||||
.memory-calendar-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(7, minmax(0, 1fr));
|
||||
gap: 7px;
|
||||
}
|
||||
|
||||
.memory-calendar-weekdays {
|
||||
margin-bottom: 7px;
|
||||
color: var(--muted);
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.memory-calendar-day,
|
||||
.memory-calendar-spacer {
|
||||
min-width: 0;
|
||||
aspect-ratio: 1.45;
|
||||
}
|
||||
|
||||
.memory-calendar-day {
|
||||
position: relative;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
align-content: center;
|
||||
gap: 3px;
|
||||
padding: 4px;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 9px;
|
||||
background: rgba(244, 247, 238, 0.72);
|
||||
color: var(--muted);
|
||||
font: inherit;
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
transition: transform 150ms ease, border-color 150ms ease, background 150ms ease, color 150ms ease;
|
||||
}
|
||||
|
||||
.memory-calendar-day:hover {
|
||||
transform: translateY(-1px);
|
||||
border-color: rgba(55, 109, 90, 0.3);
|
||||
color: var(--green);
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.memory-calendar-day.has-memory {
|
||||
color: var(--ink);
|
||||
background: rgba(232, 168, 76, 0.12);
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.memory-calendar-day i {
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
border-radius: 50%;
|
||||
background: var(--coral);
|
||||
}
|
||||
|
||||
.memory-calendar-day.is-today {
|
||||
border-color: rgba(55, 109, 90, 0.55);
|
||||
}
|
||||
|
||||
.memory-calendar-day.is-selected {
|
||||
border-color: var(--green);
|
||||
background: var(--green);
|
||||
color: #fffdf7;
|
||||
box-shadow: 0 6px 16px rgba(55, 109, 90, 0.2);
|
||||
}
|
||||
|
||||
.memory-calendar-day.is-selected i {
|
||||
background: #f3cf8b;
|
||||
}
|
||||
|
||||
.memory-calendar-legend {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 7px;
|
||||
margin: 12px 0 0;
|
||||
color: var(--muted);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.memory-calendar-legend > span {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
background: var(--coral);
|
||||
}
|
||||
|
||||
.memory-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
@@ -296,7 +412,7 @@ h1 {
|
||||
.memory-card {
|
||||
min-height: 190px;
|
||||
display: grid;
|
||||
grid-template-columns: 150px minmax(0, 1fr);
|
||||
grid-template-columns: 120px minmax(0, 1fr);
|
||||
overflow: hidden;
|
||||
border: 1px solid rgba(31, 43, 42, 0.12);
|
||||
border-radius: 12px;
|
||||
@@ -2366,7 +2482,21 @@ h2 {
|
||||
transform: translate(-50%, 0);
|
||||
}
|
||||
|
||||
@media (max-width: 1040px) and (min-width: 821px) {
|
||||
.memory-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.memory-calendar {
|
||||
position: static;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 820px) {
|
||||
.memory-calendar {
|
||||
position: static;
|
||||
}
|
||||
|
||||
body:has(.score-sidebar) {
|
||||
padding-bottom: 86px;
|
||||
}
|
||||
@@ -2659,6 +2789,34 @@ h2 {
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.memory-calendar {
|
||||
margin-inline: -4px;
|
||||
padding: 13px 9px;
|
||||
}
|
||||
|
||||
.memory-calendar-head {
|
||||
align-items: stretch;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.memory-calendar-nav {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.memory-calendar-today {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.memory-calendar-weekdays,
|
||||
.memory-calendar-grid {
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.memory-calendar-day,
|
||||
.memory-calendar-spacer {
|
||||
aspect-ratio: 1;
|
||||
}
|
||||
|
||||
.hero-actions {
|
||||
display: grid;
|
||||
}
|
||||
@@ -2673,15 +2831,6 @@ h2 {
|
||||
min-height: auto;
|
||||
}
|
||||
|
||||
.memory-date-card {
|
||||
position: static;
|
||||
width: 104px;
|
||||
}
|
||||
|
||||
.memory-date-card strong {
|
||||
font-size: 48px;
|
||||
}
|
||||
|
||||
.memory-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user