final text

1
My digital garden finally has enough features that polishing the design became a priority.
First stop: responsive headers. Big display title with small contextual text on the side -- and it adapts cleanly to tablet and mobile

2
This design translates what i love in paper: hierarchy by size and spacing, thin lines. the display title with side text mimics how i tend to organize information on paper and pencil.
On narrow screens the side-text wraps under the title instead of breaking the layout.

3
For mobile i'm tempted to turn that side-text into an [info] tooltip or accordion. That way the first section of the page (like my book tracking metrics) stays visible by at first glance.

main text draft

finally feel that my digital garden is working well enough that i can jump into a v1 of the design.
now the headers are responsive!

[!] should have a gif / video of the responsive header in action. [!]

i enjoy writting like this on paper: a big title with small contextual text on the side. what goes on the right side text can change -- what i wanted the most was to make sure this space existed and was well delimited, also, it responds to screen size going below the title on narrow widths.

in the future i might resolve the text differently, maybe on mobile instead of having the text below the title it could become a [info] tag and show as a tooltip/floating or as a accordion, this would be important to keep the first section of any page visible in this case, the book tracking metrics.

[!] snippet of the code in video or image

portuguese text?

planning

• videos, images
  • video of responsive header reacting to screen size - cmd shift 5
  • ~video of code scrolling~ ray.so image components.css
  • ray.so image html

resources

• pub/books/book-list.html - line 24 to 36
• src/templates/design-1/components.css - line 8 to 54

open questions / problems

-

~