perso/WEBSITE_hugulumu
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

merged simple_html

Browse Source
This commit is contained in:
asus
2023-12-06 15:51:40 +01:00
parent d00efa943c 59382b8d21
commit c84d6bd5af
35 changed files with 20519 additions and 402 deletions
Download Patch File Download Diff File Expand all files Collapse all files

225
README.md
View File

@@ -1,3 +1,228 @@
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. . . . . .
. . . . . . . .
. . . . . . . .
. . . . . . . .
. . . . . . . . . . . . . . . . .
. .
. . . . . . . . . . . . . . . . . . .