some modification to global css, but it's not good anymore
This commit is contained in:
asus
66
index.html
66
index.html
@@ -22,23 +22,6 @@
|
||||
|
||||
ids :
|
||||
|
||||
<section id="infos">
|
||||
<section id="cv">
|
||||
<figure id="name">
|
||||
<figure id="title">
|
||||
<figure id="mouse_1">
|
||||
<figure id="mouse_2">
|
||||
<figure id="mouse_3">
|
||||
<figure id="mouse_4">
|
||||
<figure id="banner_1">
|
||||
<figure id="banner_2">
|
||||
<figure id="banner_3">
|
||||
<figure id="banner_4">
|
||||
<figure id="banner_5">
|
||||
<figure id="banner_6">
|
||||
<figure id="banner_7">
|
||||
<figure id="banner_8">
|
||||
|
||||
original : • 8226 U+2022
|
||||
: 57442 U+E062
|
||||
: 57443 U+E063
|
||||
@@ -47,26 +30,7 @@
|
||||
actual : 57446 U+E066
|
||||
: 57447 U+E067
|
||||
|
||||
<section style="height: 200px;" class="left child-left-dense horizontal">
|
||||
|
||||
accessibility pre : https://developer.mozilla.org/en-US/docs/Web/HTML/Element/pre#specifications
|
||||
|
||||
<figure>
|
||||
<pre role="img" aria-label="ASCII COW">
|
||||
___________________________
|
||||
< I'm an expert in my field. >
|
||||
---------------------------
|
||||
\ ^__^
|
||||
\ (oo)\_______
|
||||
(__)\ )\/\
|
||||
||----w |
|
||||
|| ||
|
||||
</pre>
|
||||
<figcaption id="cow-caption">
|
||||
A cow saying, "I'm an expert in my field." The cow is illustrated using
|
||||
preformatted text characters.
|
||||
</figcaption>
|
||||
</figure>
|
||||
accessibility ascii : https://stackoverflow.com/questions/77537096/make-text-in-ascii-art-more-accessible
|
||||
|
||||
-->
|
||||
|
||||
@@ -75,7 +39,31 @@
|
||||
<!--
|
||||
CV
|
||||
-->
|
||||
<section id="cv" data-flex="vertical left">
|
||||
<section id="works" data-flex="vertical stretch">
|
||||
<figure id="works_ascii" data-flex="horizontal parent center wrap">
|
||||
<pre>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</pre>
|
||||
</figure>
|
||||
<h2 id="cv_download" data-flex="center"><a href="downloads/hugo_lamy_2023_cv.pdf" download>here are some works I have done</a></h2>
|
||||
</section>
|
||||
<!--
|
||||
END CV
|
||||
-->
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<!--
|
||||
CV
|
||||
-->
|
||||
<section id="cv" data-flex="vertical parent stretch">
|
||||
<figure id="cv_ascii" data-flex="horizontal center wrap">
|
||||
<pre>
|
||||
|
||||
@@ -85,7 +73,7 @@
|
||||
|
||||
</pre>
|
||||
</figure>
|
||||
<h2 id="cv_download"><a href="downloads/hugo_lamy_2023_cv.pdf" download>version pdf</a></h2>
|
||||
<h2 id="cv_download" data-flex="center"><a href="downloads/hugo_lamy_2023_cv.pdf" download>version pdf</a></h2>
|
||||
<details>
|
||||
<summary>
|
||||
<h2>Informatique</h2>
|
||||
|
||||
@@ -2,19 +2,27 @@
|
||||
#cv {
|
||||
/*
|
||||
place-items: center;
|
||||
*/
|
||||
place-self: stretch;
|
||||
*/
|
||||
}
|
||||
#cv #cv_ascii {
|
||||
/*
|
||||
place-self: center;
|
||||
*/
|
||||
}
|
||||
#cv #cv_download {
|
||||
/*
|
||||
place-self: center;
|
||||
*/
|
||||
}
|
||||
|
||||
#cv details {
|
||||
/*
|
||||
*/
|
||||
margin: 10px 0px 10px 20px;
|
||||
}
|
||||
#cv summary + * {
|
||||
/*
|
||||
*/
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
@@ -2,7 +2,8 @@
|
||||
/*
|
||||
DATA-FLEX
|
||||
|
||||
direction width position main axis cross axis
|
||||
direction width childrens childrens childrens
|
||||
position main axis cross axis
|
||||
|
||||
[/]-horizontal [/]-parent [/]-center [/]-pack [/]-fit
|
||||
[/] vertical [/] content [/] left [/]-wrap [/] stretch
|
||||
@@ -31,32 +32,32 @@
|
||||
/*
|
||||
width : -parent- content
|
||||
*/
|
||||
[data-flex~="parent"] { width: auto; }
|
||||
[data-flex~="parent"] { width: 100%; }
|
||||
[data-flex~="content"] { width: fit-content; }
|
||||
/*
|
||||
position : -center- left right top bottom
|
||||
*/
|
||||
[data-flex~="left"] ,[data-flex~="vertical"][data-flex~="left"] { align-items: flex-start; text-align: left; }
|
||||
[data-flex~="right"] ,[data-flex~="vertical"][data-flex~="right"] { align-items: flex-end; text-align: right; }
|
||||
[data-flex~="top"] ,[data-flex~="vertical"][data-flex~="top"] { justify-content: flex-start; }
|
||||
[data-flex~="bottom"] ,[data-flex~="vertical"][data-flex~="bottom"] { justify-content: flex-end; }
|
||||
[data-flex~="center"] ,[data-flex~="vertical"][data-flex~="center"] { align-items: center; text-align: center; }
|
||||
[data-flex~="horizontal"][data-flex~="left"] { justify-content: flex-start; }
|
||||
[data-flex~="horizontal"][data-flex~="right"] { justify-content: flex-end; }
|
||||
[data-flex~="horizontal"][data-flex~="top"] { align-items: flex-start; }
|
||||
[data-flex~="horizontal"][data-flex~="bottom"] { align-items: flex-end; }
|
||||
[data-flex~="horizontal"][data-flex~="center"] { }
|
||||
[data-flex~="vertical"][data-flex~="left"] { align-items: flex-start; }
|
||||
[data-flex~="vertical"][data-flex~="right"] { align-items: flex-end; }
|
||||
[data-flex~="vertical"][data-flex~="top"] { justify-content: flex-start; }
|
||||
[data-flex~="vertical"][data-flex~="bottom"] { justify-content: flex-end; }
|
||||
[data-flex~="vertical"][data-flex~="center"] { align-items: center; }
|
||||
/*
|
||||
main axis : -pack- space spread grow wrap gap
|
||||
*/
|
||||
[data-flex~="pack"] > * ,[data-flex~="vertical"][data-flex~="pack"] > * { flex-grow: 0; }
|
||||
[data-flex~="space"] ,[data-flex~="vertical"][data-flex~="space"] { justify-content: space-around; }
|
||||
[data-flex~="spread"] ,[data-flex~="vertical"][data-flex~="spread"] { justify-content: space-between; }
|
||||
[data-flex~="grow"] > * ,[data-flex~="vertical"][data-flex~="grow"] > * { flex-grow: 1; }
|
||||
[data-flex~="horizontal"][data-flex~="pack"] > * { flex-grow: 0; }
|
||||
[data-flex~="horizontal"][data-flex~="space"] { justify-content: space-around; }
|
||||
[data-flex~="horizontal"][data-flex~="spread"] { justify-content: space-between; }
|
||||
[data-flex~="horizontal"][data-flex~="grow"] > * { flex-grow: 1; }
|
||||
[data-flex~="vertical"][data-flex~="pack"] > * { flex-grow: 0; }
|
||||
[data-flex~="vertical"][data-flex~="space"] { justify-content: space-around; }
|
||||
[data-flex~="vertical"][data-flex~="spread"] { justify-content: space-between; }
|
||||
[data-flex~="vertical"][data-flex~="grow"] > * { flex-grow: 1; }
|
||||
[data-flex~="wrap"] { flex-wrap: wrap; }
|
||||
/*
|
||||
cross axis : -fit- stretch
|
||||
|
||||
@@ -31,6 +31,7 @@ section {
|
||||
#infos { grid-area: infos; }
|
||||
#title_area { grid-area: title; }
|
||||
#cv { grid-area: cv; }
|
||||
#works { grid-area: works; }
|
||||
#mouse_2 { grid-area: mouse_2; }
|
||||
#mouse_3 { grid-area: mouse_3; }
|
||||
#mouse_4 { grid-area: mouse_4; }
|
||||
@@ -51,10 +52,11 @@ section {
|
||||
' banner_1 banner_1 banner_1 ' auto
|
||||
' . title . ' auto
|
||||
' banner_2 banner_2 banner_2 ' auto
|
||||
' . cv . ' auto
|
||||
' . works . ' auto
|
||||
' banner_3 banner_3 banner_3 ' auto
|
||||
' . mouse_2 . ' auto
|
||||
' banner_4 banner_4 banner_4 ' auto
|
||||
' . cv . ' auto
|
||||
' banner_5 banner_5 banner_5 ' auto
|
||||
' . mouse_3 . ' auto
|
||||
' banner_6 banner_6 banner_6 ' auto
|
||||
|
||||
@@ -25,7 +25,10 @@ ul {
|
||||
display: block;
|
||||
list-style-type: "• ";
|
||||
padding-left: 0px;
|
||||
/*
|
||||
list-style-position: outside;
|
||||
*/
|
||||
list-style-position: inside;
|
||||
}
|
||||
li {
|
||||
display: list-item;
|
||||
@@ -34,7 +37,10 @@ li::marker {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
details summary {
|
||||
/*
|
||||
list-style-position: outside;
|
||||
*/
|
||||
list-style-position: inside;
|
||||
}
|
||||
details summary {
|
||||
font-size: 1.8rem;
|
||||
|
||||
Reference in New Issue
Block a user