akamig / next-diethyl Goto Github PK

Current Prototype

• Flexbox based (flex-basis 50% on over-bp.sm)
• Seperated with borders

Problems inferred from prototype

• adjacent border lines are causing eyestrain.
• double column layout seems a bit distracting because of obscured information order.
• uneven space reservation
  For example, short metadata (post language, date, authors, related links, files) are shove-able in a small box, even in 20~33% width of full layout, without causing much distraction.
  while longer metadata (license information, description) requires larger space, more like post-body.

so when these two mixed together and laid without length consideration (ie. samely), since the content length keeps changing extremely, it really hurts constant read flow.

• I'm not sure how should I handle conditional metadata.

1. even should these metadata be conditional or not? (from seeing wikidata, conditional metadata is not much frustration)

2. different metadata sometimes can be very different when it comes to representation. (Tag requires Tagbox component), so I can't just simply map them out on the same styled box component with a key-value data.

3. what kind of structure should I pass as props?
   3.1. how about make some special case components and conditionally render them when these specific props exists, and non-crucial non-special other values can be given as key-value structure and just default-render them out?
   3.2 3.1 is quite hard to handle when using it on pages (like, a lot of props should be nullable, and that's not good.)

4. how the hell should I store these conditional metadata in markdown? I'm pretty sure just simple frontmatter won't do it.

Improvements

Maybe this wikidata style layout would help. this title left, desc right layout helps, but I don't like it in mobile.

As I first intended, I should be more focused on this nutrition facts layout style, on shorter metadata, this layout can be really effective and unified even if some ingredients missing.

• Focusing on separate some longer / shorter, crucial / non-crucial metadata will certainly help readability

• I need to sleep

• Create special case subcomponents

• Thinking about how can I put these subcomponents without making a ton of nullable props.

• Make these collapsible <- Not so important, but will help readability a lot.

When Scroll up

• navbar pops up from bottom, reveal menubar completely

When Scroll down

• navbar retracts (transitionY -) Partially, so only top side of button partially shown,
• if possible, implement snap (like after scroll +0.5rem, navbar retracts)

Warp records implement this without snap, so just immediately retracted without scroll offset.

When Hover/Touched/Tab-focused

• same as scroll up condition.

check out https://warp.net/

1. 각 테마에 맞는 색상값 결정 최우선 필요

• 이거 결정이 빨리 되야 적용해서 붙어있는 UI 요소들끼리 대비를 맞춤
  예) post-card나 post-head 라인 옆 구분자로 들어가있는 검은 보더는 Dark까진 괜찮은데 Black 부터는 White로 반전을 해줘야됨 -> 지금 못함 Black이 어떻게 들어갈지 안정해져서

2. 옅은색 / 짙은색 스펙트럼이 더 필요할것 같은데, 메인색상 스펙트럼을 더 추가해야할 것 같음

3. 마테리얼처럼 그냥 HS만 고정하고 L,A를 조정할 수 있게 해서 명도를 조절하는게 좋을것 같음
   -> 어떻게? 어차피 명도는 Disabled - Normal - Highlight 3개 정도
   3.1. 하드코딩
   3.2. 템플릿 스트링 HSL, A는 사용시 설정? <- hsla는 투명도 연산때문에 hex,hsl대비 Perf 눈꼽만큼 낮음
   3.3. 템플릿 스트링 + 함수? 약간 이런 재사용 가능한 미디어 쿼리 함수 같은 형태로
   https://www.daggala.com/reusable-media-queries-with-styled-components/

나무위키 다크모드 상태 저장하는거 참고하면 될것 같은데?