233 lines
12 KiB
Markdown
233 lines
12 KiB
Markdown
|
|
html validator : https://validator.w3.org/nu
|
|
|
|
---
|
|
|
|
start it with a server, like : `alive-server`
|
|
- https://www.npmjs.com/package/alive-server
|
|
- install : `npm install -g alive-server`
|
|
|
|
---
|
|
|
|
difficulties :
|
|
|
|
- [accessibility with ascii art titles](https://stackoverflow.com/questions/77537096/make-text-in-ascii-art-more-accessible)
|
|
- I finally decided to go with a structure like this :
|
|
```html
|
|
<h1 aria-label="hugo lamy">
|
|
<span aria-hidden="true" class="pre">
|
|
hugo (ascii)
|
|
</span>
|
|
<span aria-hidden="true" class="pre">
|
|
lamy (ascii)
|
|
</span>
|
|
</h1>
|
|
```
|
|
- [links accessibility](https://webaim.org/techniques/hypertext/)
|
|
- [accessibility gone wild](https://webaim.org/articles/gonewild/)
|
|
- [don't use title attribute](https://stackoverflow.com/questions/11161915/simple-tooltip-title-attribute/11163133#11163133)
|
|
- [I thought title text improved accessibility. I was wrong.](https://silktide.com/blog/i-thought-title-text-improved-accessibility-i-was-wrong/)
|
|
- [Things I learned by pretending to be blind for a week](https://medium.com/silktide/things-i-learned-by-pretending-to-be-blind-for-a-week-bf7b09f33eb4)
|
|
- [create the full screen hero section with the navbar under the title](https://stackoverflow.com/questions/77596781/in-css-how-to-make-a-sticky-navbar-after-the-header-in-an-hero-section/)
|
|
|
|
---
|
|
|
|
projects :
|
|
|
|
- [/] ljdp
|
|
- [ ] tchat transcendance
|
|
- setup docker without sudo on server
|
|
- remove authentification from project
|
|
- [ ] cube3d
|
|
- [ ] minishell
|
|
|
|
---
|
|
|
|
direction | width | child | child | child
|
|
| | position | main axis | second axis
|
|
................................................................
|
|
horizontal | content | left |-pack |-fit
|
|
vertical |-parent | right | grow | stretch
|
|
| | top | space |
|
|
| | bottom | spread |
|
|
| |-center | |
|
|
|
|
.<direction>-<width>-<position-[position]>-<main-axis>-<second-axis>
|
|
|
|
position :
|
|
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
|
|
. .
|
|
. . . . . . . . . . . . . . . . . . . . . . . .
|
|
. . left-top . . top . . right-top . .
|
|
. . . . . . . . . . . . . . . . . . . . . . . .
|
|
. .
|
|
. . . . . . . . . . . . . . . . . . . . . . . .
|
|
. . left . .-center . . right . .
|
|
. . . . . . . . . . . . . . . . . . . . . . . .
|
|
. .
|
|
. . . . . . . . . . . . . . . . . . . . . . . .
|
|
. . left-bottom . . bottom . . right-bottom. .
|
|
. . . . . . . . . . . . . . . . . . . . . . . .
|
|
. .
|
|
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
|
|
|
|
width :
|
|
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
|
|
. .
|
|
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
|
|
. . . .
|
|
. . . . . . . . . . . . . . . . . . .
|
|
. . . . . . . . . .
|
|
. . . . . . . . . . . . .
|
|
. . . . . . . . parent . .
|
|
. . . . . . . . . .
|
|
. . . .
|
|
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
|
|
. .
|
|
. . . . . . . . . . . . . . . . . . . . . . .
|
|
. . . .
|
|
. . . . . . . . . . . . . . . . . . .
|
|
. . . . . . . . . .
|
|
. . . . . . . . . . . . .
|
|
. . . . . . . . . content .
|
|
. . . . . . . . . .
|
|
. . . .
|
|
. . . . . . . . . . . . . . . . . . . . . . .
|
|
. .
|
|
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
|
|
|
|
main axis :
|
|
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
|
|
. .
|
|
. . . . . . . . . . . . . . . . .
|
|
. . space . . . . . .
|
|
. . . . . . . . . . . . . . . . .
|
|
. .
|
|
. . . . . . . . . . . . . . . . .
|
|
. . spread. . . . . .
|
|
. . . . . . . . . . . . . . . . .
|
|
. .
|
|
. . . . . . . . . . . . . . . . .
|
|
. .-pack . . . . . .
|
|
. . . . . . . . . . . . . . . . .
|
|
. .
|
|
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
|
|
. . grow . . . . . .
|
|
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
|
|
. .
|
|
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
|
|
|
|
second axis :
|
|
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
|
|
. . . .
|
|
. . . . . . . . . . . . . .
|
|
. . . . . . . . . . . . .
|
|
. . . . . . . . . . . . . . .
|
|
. . . . . . . . . . . .
|
|
. .-fit . . . . . .stretch. . . .
|
|
. . . . . . . . . . . .
|
|
. . . . . . . . . . . . . . .
|
|
. . . . . . . . . . . . .
|
|
. . . . . . . . . . . . . .
|
|
. . . .
|
|
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
|
|
|
|
|
|
|
|
|
|
----------------------------------------------------------------
|
|
|
|
**v2 :**
|
|
|
|
|
|
direction | width | child | child | child
|
|
| | position | main axis | second axis
|
|
................................................................
|
|
horizontal | fit | left |-pack | begin
|
|
vertical | large | right | grow | end
|
|
| | top | space |-middle
|
|
| | bottom | spread | equal
|
|
| |-center | | stretch
|
|
|
|
.<direction>-<width>-<position-[position]>-<main-axis>-<second-axis>
|
|
|
|
position :
|
|
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
|
|
. .
|
|
. . . . . . . . . . . . . . . . . . . . . . . .
|
|
. . left-top . . top . . right-top . .
|
|
. . . . . . . . . . . . . . . . . . . . . . . .
|
|
. .
|
|
. . . . . . . . . . . . . . . . . . . . . . . .
|
|
. . left . .-center . . right . .
|
|
. . . . . . . . . . . . . . . . . . . . . . . .
|
|
. .
|
|
. . . . . . . . . . . . . . . . . . . . . . . .
|
|
. . left-bottom . . bottom . . right-bottom. .
|
|
. . . . . . . . . . . . . . . . . . . . . . . .
|
|
. .
|
|
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
|
|
|
|
main axis :
|
|
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
|
|
. .
|
|
. . . . . . . . . . . . . . . . .
|
|
. . space . . . . . . justify-content
|
|
. . . . . . . . . . . . . . . . . : space-around
|
|
. .
|
|
. . . . . . . . . . . . . . . . .
|
|
. . spread. . . . . . justify-content
|
|
. . . . . . . . . . . . . . . . . : space-between
|
|
. .
|
|
. . . . . . . . . . . . . . . . .
|
|
. .-pack . . . . . .
|
|
. . . . . . . . . . . . . . . . .
|
|
. .
|
|
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
|
|
. . grow . . . . . . child :
|
|
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . grow: 1;
|
|
. .
|
|
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
|
|
|
|
second axis :
|
|
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
|
|
. . . .
|
|
. . . .
|
|
. . . . . . . . . . . . . . . . . . . . . . . .
|
|
. . . . . . . . . . . begin . . . . . .
|
|
. . . . . . . . . . . . . . . . . . . . . .
|
|
. .-middle. . . . . . . . . . . .
|
|
. . . . . . . . . . . . . . . . . . . .
|
|
. . . . . . . . . . . . .
|
|
. . . . . . . . . . . . . .
|
|
. . . .
|
|
. . . .
|
|
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
|
|
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
|
|
. . . .
|
|
. . . .
|
|
. . . . . . . . . . . . . . . . . . . . . . . .
|
|
. . . . . . . . . . . .
|
|
. . . . . . . . . . . . . . . . .
|
|
. . . . . . . . equal . . . . . .
|
|
. . . . . . . . . . . . . . . . . . .
|
|
. . end . . . . . . . . . . . . . .
|
|
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
|
|
. . . .
|
|
. . . .
|
|
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
|
|
. . . . . . . . . . . . . . . . . . .
|
|
. .
|
|
. . . . . . . . . . . . . . . . .
|
|
. . . . . . . .
|
|
. . . . . . . .
|
|
. . . . . . . .
|
|
. .stretch. . . . . .
|
|
. . . . . . . .
|
|
. . . . . . . .
|
|
. . . . . . . .
|
|
. . . . . . . . . . . . . . . . .
|
|
. .
|
|
. . . . . . . . . . . . . . . . . . .
|
|
|