v3 init push

2026-09-03 18:28:33 +02:00
parent f719cb2989
commit 549a7e0fa0
111 changed files with 8736 additions and 4873 deletions
@@ -0,0 +1,149 @@
+@use "@styles/color";
+@use "@styles/var";
+
+/* The calendar. A month at a time, with a mark under every day that has
+ * writing on it - so it doubles as a picture of how the journal is kept. */
+.calendar {
+	width: 19rem;
+	padding: 0.75rem;
+	font-size: 0.85rem;
+}
+
+.calendar__head {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: var.$elem-spacing;
+	margin-bottom: 0.5rem;
+}
+
+.calendar__month {
+	font-family: var.$font-hand;
+	font-size: 1.35rem;
+	line-height: 1;
+	color: color.$ink;
+	text-transform: capitalize;
+}
+
+.calendar__step {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	width: 1.9rem;
+	height: 1.9rem;
+	border-radius: var.$block-radius;
+	color: color.$ink-soft;
+	transition: background-color var.$trans-quick, color var.$trans-quick;
+
+	&:hover:not(:disabled) {
+		color: color.$ink;
+		background-color: color.$paper-shade;
+	}
+
+	&:disabled {
+		opacity: 0.3;
+		cursor: default;
+	}
+}
+
+.calendar__grid {
+	display: grid;
+	grid-template-columns: repeat(7, 1fr);
+	gap: 0.1rem;
+}
+
+.calendar__weekday {
+	text-align: center;
+	font-size: 0.66rem;
+	letter-spacing: 0.03em;
+	text-transform: uppercase;
+	color: color.$ink-faint;
+	padding-bottom: 0.25rem;
+}
+
+.calendar__day {
+	position: relative;
+	aspect-ratio: 1;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	border-radius: var.$block-radius;
+	color: color.$ink;
+	transition: background-color var.$trans-quick, color var.$trans-quick;
+
+	&:hover:not(:disabled) {
+		background-color: color.$paper-shade;
+	}
+
+	&:disabled {
+		color: color.$ink-faint;
+		cursor: default;
+	}
+}
+
+.calendar__day--outside {
+	color: color.$ink-faint;
+	opacity: 0.55;
+}
+
+/* A day with writing on it. The dot is the affordance; the weight change is
+ * what you actually notice when scanning a month. */
+.calendar__day--written {
+	font-weight: 600;
+
+	&::after {
+		content: "";
+		position: absolute;
+		bottom: 0.18rem;
+		left: 50%;
+		transform: translateX(-50%);
+		width: 0.3rem;
+		height: 0.3rem;
+		border-radius: 50%;
+		background-color: color.$ribbon;
+	}
+}
+
+.calendar__day--today {
+	box-shadow: inset 0 0 0 1px color.$caramel;
+}
+
+.calendar__day--current {
+	color: #fff6e6;
+	background-color: color.$ribbon;
+
+	&:hover {
+		background-color: color.$ribbon;
+	}
+
+	&::after {
+		background-color: #fff6e6;
+	}
+}
+
+.calendar__foot {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: var.$elem-spacing;
+	margin-top: 0.55rem;
+	padding-top: 0.5rem;
+	border-top: 1px solid color.$paper-edge;
+}
+
+.calendar__link {
+	font-size: 0.78rem;
+	color: color.$ink-soft;
+	padding: 0.25rem 0.4rem;
+	border-radius: var.$block-radius;
+
+	&:hover {
+		color: color.$ink;
+		background-color: color.$paper-shade;
+	}
+}
+
+.calendar__count {
+	font-size: 0.72rem;
+	color: color.$ink-faint;
+}