some modification to global css, but it's not good anymore

This commit is contained in:
asus
2023-11-23 19:30:15 +01:00
parent ce1b541f29
commit 9fa4e3a22a
6 changed files with 57 additions and 53 deletions

View File

@@ -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;
}

View File

@@ -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

View File

@@ -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

View File

@@ -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;