v3 init push

src/styles/_rail.scss

@@ -0,0 +1,162 @@
+@use "@styles/color";
+@use "@styles/var";
+
+/* The bookmark rail.
+ *
+ * One tab per entry, in writing order, sliding out from behind the right edge
+ * of the book. The negative margin is what sells it: the tabs start underneath
+ * the page block and only their labelled ends stick out, the way a stack of
+ * sticky tabs would. */
+.rail {
+	display: flex;
+	flex-direction: column;
+	min-height: 0;
+	//The tabs scroll within the rail; the rail never grows the page
+	height: 100%;
+	width: var.$tab-width;
+	margin-left: 0;
+	padding: 0.35rem 0;
+	position: relative;
+	z-index: 4;
+}
+
+/* The tabs say what they are; a heading would only overflow the narrow rail
+ * and print itself across the edge of the book. Kept for screen readers. */
+.rail__title {
+	position: absolute;
+	width: 1px;
+	height: 1px;
+	overflow: hidden;
+	clip-path: inset(50%);
+	white-space: nowrap;
+}
+
+.rail__list {
+	flex: 1 1 auto;
+	min-height: 0;
+	overflow-y: auto;
+	overflow-x: hidden;
+	scrollbar-width: none;
+	display: flex;
+	flex-direction: column;
+	gap: 0.3rem;
+	padding: 0.15rem 0;
+
+	&::-webkit-scrollbar {
+		width: 0;
+	}
+}
+
+/* A tab.
+ *
+ * Only its bound edge is tucked under the page block - the rest stands clear,
+ * because a bookmark whose date you cannot read until you hover it is not a
+ * bookmark. Hovering slides it further out to bring the preview into the light.
+ */
+.rail__tab {
+	flex: 0 0 auto;
+	position: relative;
+	display: block;
+	width: 100%;
+	min-height: var.$tab-height;
+	margin-left: calc(-1 * var.$tab-tuck);
+	padding: 0.4rem 0.65rem 0.45rem calc(var.$tab-tuck + 0.55rem);
+	text-align: left;
+
+	color: color.$ink-soft;
+	background-color: color.$paper-shade;
+	//The shadowed strip that reads as the part still inside the book
+	background-image: linear-gradient(to right, rgba(90, 68, 40, 0.22), rgba(90, 68, 40, 0.04) var.$tab-tuck, transparent calc(var.$tab-tuck + 0.5rem));
+	border-radius: 0 var.$block-radius var.$block-radius 0;
+	box-shadow: 0.12rem 0.15rem 0.5rem rgba(20, 14, 9, 0.3);
+
+	transition: transform var.$trans-mid ease-out, background-color var.$trans-quick, color var.$trans-quick;
+
+	&:hover,
+	&:focus-visible {
+		transform: translateX(0.45rem);
+		background-color: color.$paper;
+		color: color.$ink;
+	}
+}
+
+/* The entry the book is currently showing */
+.rail__tab--current {
+	transform: translateX(0.3rem);
+	background-color: color.$paper;
+	color: color.$ink;
+	box-shadow: 0.12rem 0.15rem 0.5rem rgba(20, 14, 9, 0.34), inset -0.2rem 0 0 color.$caramel;
+
+	&:hover,
+	&:focus-visible {
+		transform: translateX(0.65rem);
+	}
+}
+
+/* The entry still being written */
+.rail__tab--open {
+	box-shadow: 0.12rem 0.15rem 0.5rem rgba(20, 14, 9, 0.34), inset -0.2rem 0 0 color.$ribbon;
+}
+
+.rail__tab--current.rail__tab--open {
+	box-shadow: 0.12rem 0.15rem 0.6rem rgba(20, 14, 9, 0.4), inset -0.2rem 0 0 color.$ribbon;
+}
+
+.rail__date {
+	display: flex;
+	align-items: baseline;
+	gap: 0.4rem;
+	font-family: var.$font-hand;
+	line-height: 1.15;
+	white-space: nowrap;
+}
+
+.rail__day {
+	font-size: 1.2rem;
+	font-weight: 600;
+	color: inherit;
+}
+
+.rail__time {
+	font-size: 1rem;
+	color: color.$ink-faint;
+}
+
+/* Only visible once the tab has slid out */
+.rail__preview {
+	display: block;
+	margin-top: 0.05rem;
+	font-size: 0.72rem;
+	line-height: 1.25;
+	color: color.$ink-faint;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	max-width: 100%;
+}
+
+.rail__empty {
+	font-family: var.$font-hand;
+	font-size: 1.05rem;
+	color: rgba(255, 238, 210, 0.35);
+	padding: 0.5rem 0.75rem;
+	writing-mode: vertical-rl;
+	white-space: nowrap;
+}
+
+/* "Load older entries" sits at the top of the rail, since the rail is
+ * chronological and the oldest entry is the first tab. */
+.rail__more {
+	flex: 0 0 auto;
+	align-self: flex-start;
+	margin-left: 0;
+	padding: 0.3rem 0.4rem;
+	font-size: 0.7rem;
+	color: rgba(255, 238, 210, 0.55);
+	border-radius: var.$block-radius;
+
+	&:hover {
+		color: #fff8ea;
+		background-color: rgba(255, 240, 214, 0.1);
+	}
+}