[OCaml] Mobile-friendly clone of cgit.
docs document recurring patterns (hover-invert, no-scrollbar, tap-target)
Add a reference comment block at the top of styles.css documenting the three main recurring CSS patterns and where they are applied. Extracting into utility classes would require HTML/OCaml view changes.
lib/static/styles.css
@@ -1,5 +1,19 @@
1
1
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap");
2
2
3
Added:
/* ==========================================================================
4
Added:
* RECURRING PATTERNS
5
Added:
* --------------------------------------------------------------------------
6
Added:
* hover-invert: background-color: white; color: black; text-decoration: none
7
Added:
* Used on: a#nav-home:hover, #nav-home.repo-hierarchy > a:hover,
8
Added:
* nav#top ul li a:hover, .toolbar-button:hover, .pagination-btn:hover
9
Added:
*
10
Added:
* no-scrollbar: scrollbar-width: none + ::-webkit-scrollbar { display: none }
11
Added:
* Used on: #nav-home.repo-hierarchy, .toolbar-filters, .path-pill
12
Added:
*
13
Added:
* tap-target: min-height: var(--target-size); display: flex; align-items: center
14
Added:
* Used on: nav links, list item links, toolbar buttons, bottom-nav links
15
Added:
* ========================================================================== */
16
Added:
3
17
:root {
4
18
--nav-height: 48px;
5
19
--toolbar-height: 52px;