franzz/daydream
1
0 Fork 0
Code Issues Pull Requests Releases Wiki Activity

Change design

Browse Source
This commit is contained in:
franzz committed 2026-09-04 11:09:34 +02:00
1 parent 28e1616c94
commit 78c1d8e844
36 files changed
+355 -263
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/styles/_rail.scss
+21 -9
View File
@@ -69,9 +69,17 @@
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));
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)),
//The dye, washing in from the outer edge
linear-gradient(to right, transparent 30%, var(--tab-wash, transparent) 100%);
//`--tab` is set per tab from the day the entry was written, so a day's
//entries share a colour and the rail reads as a run of days rather than a
//list of rows. The card is still paper - only its edge is properly dyed.
border-right: 0.45rem solid var(--tab, #{color.$paper-deep});
border-radius: 0 var.$block-radius var.$block-radius 0;
box-shadow: 0.12rem 0.15rem 0.5rem rgba(20, 14, 9, 0.3);
box-shadow: 0.12rem 0.15rem 0.5rem rgba(90, 54, 31, 0.22);
transition: transform var.$trans-mid ease-out, background-color var.$trans-quick, color var.$trans-quick;
@@ -88,7 +96,11 @@
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;
box-shadow: 0.12rem 0.15rem 0.5rem rgba(90, 54, 31, 0.3);
//The one being read is pulled clear of the others, and its paper is clean -
//the dye stays on the edge so the preview text is easiest to read here
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));
&:hover,
&:focus-visible {
@@ -98,11 +110,11 @@
/* 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;
box-shadow: 0.12rem 0.15rem 0.5rem rgba(90, 54, 31, 0.26), 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;
box-shadow: 0.12rem 0.15rem 0.6rem rgba(90, 54, 31, 0.3), inset -0.2rem 0 0 color.$ribbon;
}
.rail__date {
@@ -141,7 +153,7 @@
.rail__empty {
font-family: var.$font-hand;
font-size: 1.05rem;
color: rgba(255, 238, 210, 0.35);
color: color.$ink-faint;
padding: 0.5rem 0.75rem;
writing-mode: vertical-rl;
white-space: nowrap;
@@ -155,11 +167,11 @@
margin-left: 0;
padding: 0.3rem 0.4rem;
font-size: 0.7rem;
color: rgba(255, 238, 210, 0.55);
color: color.$ink-soft;
border-radius: var.$block-radius;
&:hover {
color: #fff8ea;
background-color: rgba(255, 240, 214, 0.1);
color: color.$ink;
background-color: rgba(254, 244, 225, 0.6);
}
}