- used data attributes for global flex css
- started grid layout
This commit is contained in:
asus
@@ -1,28 +1,7 @@
|
||||
|
||||
div.banner {
|
||||
flex-wrap: wrap;
|
||||
overflow: hidden;
|
||||
width: 99vw;
|
||||
margin: 10px 0px;
|
||||
}
|
||||
div.smallbanner {
|
||||
height: 3.5ex;
|
||||
}
|
||||
div.bigbanner {
|
||||
height: 21.5ex;
|
||||
}
|
||||
div.banner * {
|
||||
margin: 0px;
|
||||
}
|
||||
div.banner p {
|
||||
white-space: pre;
|
||||
}
|
||||
div.banner br {
|
||||
display: block;
|
||||
}
|
||||
pre.banner {
|
||||
position: relative;
|
||||
margin-left: -100px;
|
||||
margin: 10px 0px 10px -100px;
|
||||
animation-name: slide;
|
||||
animation-iteration-count: infinite;
|
||||
animation-duration: 2s;
|
||||
2
styles/elements/cv.css
Normal file
2
styles/elements/cv.css
Normal file
@@ -0,0 +1,2 @@
|
||||
#cv_infos {
|
||||
}
|
||||
3
styles/elements/infos.css
Normal file
3
styles/elements/infos.css
Normal file
@@ -0,0 +1,3 @@
|
||||
|
||||
#personnal_infos {
|
||||
}
|
||||
46
styles/elements/mouses.css
Normal file
46
styles/elements/mouses.css
Normal file
@@ -0,0 +1,46 @@
|
||||
|
||||
.frames_container {
|
||||
display: grid;
|
||||
width: fit-content;
|
||||
margin-left: 0px;
|
||||
|
||||
/*
|
||||
border: 1px solid blue;
|
||||
*/
|
||||
}
|
||||
pre.frame.hide {
|
||||
display: none;
|
||||
}
|
||||
pre.frame {
|
||||
position: relative;
|
||||
grid-column: 1;
|
||||
grid-row: 1;
|
||||
margin: auto auto 0px 0px;
|
||||
|
||||
/*
|
||||
width: fit-content;
|
||||
height: fit-content;
|
||||
|
||||
border: 1px solid red;
|
||||
*/
|
||||
|
||||
opacity: 0;
|
||||
--tframes: 2s;
|
||||
animation-name: ascii_frame;
|
||||
animation-iteration-count: infinite;
|
||||
animation-duration: var(--tframes);
|
||||
animation-timing-function: linear;
|
||||
animation-direction: normal;
|
||||
}
|
||||
|
||||
pre.frame.f2 {animation-delay: calc(var(--tframes) * 25/100);}
|
||||
pre.frame.f3 {animation-delay: calc(var(--tframes) * 50/100);}
|
||||
pre.frame.f4 {animation-delay: calc(var(--tframes) * 75/100);}
|
||||
|
||||
@keyframes ascii_frame {
|
||||
0% {opacity: 1;}
|
||||
25% {opacity: 1;}
|
||||
25.1% {opacity: 0;}
|
||||
100% {opacity: 0;}
|
||||
}
|
||||
|
||||
2
styles/elements/title.css
Normal file
2
styles/elements/title.css
Normal file
@@ -0,0 +1,2 @@
|
||||
#role_title {
|
||||
}
|
||||
@@ -1,46 +1,2 @@
|
||||
|
||||
.frames_container {
|
||||
display: grid;
|
||||
width: fit-content;
|
||||
margin-left: 0px;
|
||||
|
||||
/*
|
||||
border: 1px solid blue;
|
||||
*/
|
||||
}
|
||||
pre.frame.hide {
|
||||
display: none;
|
||||
}
|
||||
pre.frame {
|
||||
position: relative;
|
||||
grid-column: 1;
|
||||
grid-row: 1;
|
||||
margin: auto auto 0px 0px;
|
||||
|
||||
/*
|
||||
width: fit-content;
|
||||
height: fit-content;
|
||||
|
||||
border: 1px solid red;
|
||||
*/
|
||||
|
||||
opacity: 0;
|
||||
--tframes: 2s;
|
||||
animation-name: ascii_frame;
|
||||
animation-iteration-count: infinite;
|
||||
animation-duration: var(--tframes);
|
||||
animation-timing-function: linear;
|
||||
animation-direction: normal;
|
||||
}
|
||||
|
||||
pre.frame.f2 {animation-delay: calc(var(--tframes) * 25/100);}
|
||||
pre.frame.f3 {animation-delay: calc(var(--tframes) * 50/100);}
|
||||
pre.frame.f4 {animation-delay: calc(var(--tframes) * 75/100);}
|
||||
|
||||
@keyframes ascii_frame {
|
||||
0% {opacity: 1;}
|
||||
25% {opacity: 1;}
|
||||
25.1% {opacity: 0;}
|
||||
100% {opacity: 0;}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,75 +1,69 @@
|
||||
|
||||
.left {
|
||||
display: flex;
|
||||
margin-left: 0px;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
[-] horizontal [/] content [/] left [/]-pack [ ]-fit
|
||||
[-] vertical [/]-parent [/] right [/] grow [ ] stretch
|
||||
[/] top [/] space
|
||||
[/] bottom [/] spread
|
||||
[/]-center
|
||||
DATA-FLEX
|
||||
|
||||
direction width position main axis cross axis
|
||||
|
||||
[/]-horizontal [/]-parent [/]-center [/]-pack [/]-fit
|
||||
[/] vertical [/] content [/] left [/]-wrap [/] stretch
|
||||
[/] right [/] nowrap
|
||||
[/] top [/] grow
|
||||
[/] bottom [/] space
|
||||
[/] spread
|
||||
[/] gap
|
||||
-> for GAP, you can custom the value with 'style="--gap:?px;"'
|
||||
*/
|
||||
|
||||
.horizontal, .vertical { display: flex; justify-content: center; align-items: center; width: auto; }
|
||||
.horizontal { flex-direction: row; }
|
||||
.vertical { flex-direction: column; }
|
||||
.horizontal > *, .vertical > * { margin: 0px; flex-grow: 0; }
|
||||
|
||||
.width-parent { width: auto; }
|
||||
.width-content { width: fit-content; }
|
||||
|
||||
.horizontal.child-left { justify-content: flex-start; }
|
||||
.horizontal.child-center { }
|
||||
.horizontal.child-right { justify-content: flex-end; }
|
||||
.horizontal.child-top { align-items: flex-start; }
|
||||
.horizontal.child-bottom { align-items: flex-end; }
|
||||
.vertical.child-left { align-items: flex-start; }
|
||||
.vertical.child-center { align-items: center; }
|
||||
.vertical.child-right { align-items: flex-end; }
|
||||
.vertical.child-top { justify-content: flex-start; }
|
||||
.vertical.child-bottom { justify-content: flex-end; }
|
||||
|
||||
.horizontal.child-pack > * { flex-grow: 0; }
|
||||
.horizontal.child-space { justify-content: space-around; }
|
||||
.horizontal.child-spread { justify-content: space-between; }
|
||||
.horizontal.child-grow > * { flex-grow: 1; }
|
||||
.vertical.child-pack > * { flex-grow: 0; }
|
||||
.vertical.child-space { justify-content: space-around; }
|
||||
.vertical.child-spread { justify-content: space-between; }
|
||||
.vertical.child-grow > * { flex-grow: 1; }
|
||||
|
||||
.horizontal.child-fit, .vertical.child-fit { }
|
||||
.horizontal.child-stretch, .vertical.child-stretch { align-items: stretch; }
|
||||
|
||||
|
||||
.horizontal {
|
||||
[data-flex] {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: auto;
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
.vertical {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.wrap {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
[data-flex] > * {
|
||||
flex-grow: 0;
|
||||
}
|
||||
/*
|
||||
direction : -horizontal- vertical
|
||||
*/
|
||||
[data-flex~="horizontal"] { flex-direction: row; }
|
||||
[data-flex~="vertical"] { flex-direction: column; }
|
||||
/*
|
||||
width : -parent- content
|
||||
*/
|
||||
[data-flex~="parent"] { width: auto; }
|
||||
[data-flex~="content"] { width: fit-content; }
|
||||
/*
|
||||
position : -center- left right top bottom
|
||||
*/
|
||||
[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~="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
|
||||
*/
|
||||
[data-flex~="horizontal"][data-flex~="fit"],
|
||||
[data-flex~="vertical"][data-flex~="fit"] { }
|
||||
[data-flex~="horizontal"][data-flex~="stretch"],
|
||||
[data-flex~="vertical"][data-flex~="stretch"] { align-items: stretch; }
|
||||
|
||||
[class*="gap"] { display: flex; gap: 10px; }
|
||||
.gap-small { gap: var(--small-space); }
|
||||
.gap-medium { gap: var(--medium-space); }
|
||||
.gap-big { gap: var(--big-space); }
|
||||
|
||||
[class*="margin"] { margin: 0px; --margin-size: var(--small-space); }
|
||||
.margin-small { --margin-size: var(--small-space); }
|
||||
.margin-medium { --margin-size: var(--medium-space); }
|
||||
.margin-big { --margin-size: var(--big-space); }
|
||||
.margin { margin: var(--margin-size); }
|
||||
.margin-left { margin-left: var(--margin-size); }
|
||||
.margin-right { margin-right: var(--margin-size); }
|
||||
.margin-top { margin-top: var(--margin-size); }
|
||||
.margin-bottom { margin-bottom: var(--margin-size); }
|
||||
|
||||
|
||||
3
styles/reset.css
Normal file
3
styles/reset.css
Normal file
@@ -0,0 +1,3 @@
|
||||
body * {
|
||||
margin: 0px;
|
||||
}
|
||||
@@ -7,8 +7,6 @@ html {
|
||||
--big-space: calc(var(--small-space) * 10);
|
||||
}
|
||||
body {
|
||||
/*
|
||||
*/
|
||||
overflow-x: hidden;
|
||||
}
|
||||
script, style {
|
||||
@@ -17,3 +15,41 @@ script, style {
|
||||
pre {
|
||||
margin: 10px 0px;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
grid
|
||||
*/
|
||||
|
||||
#personnal_infos { grid-area: infos; }
|
||||
#role_title { grid-area: title; }
|
||||
#cv_infos { grid-area: cv; }
|
||||
#mouse_1 { grid-area: mouse_1; }
|
||||
#mouse_2 { grid-area: mouse_2; }
|
||||
#mouse_3 { grid-area: mouse_3; }
|
||||
#mouse_4 { grid-area: mouse_4; }
|
||||
#banner_1 { grid-area: banner_1;}
|
||||
#banner_2 { grid-area: banner_2;}
|
||||
#banner_3 { grid-area: banner_3;}
|
||||
#banner_4 { grid-area: banner_4;}
|
||||
#banner_5 { grid-area: banner_5;}
|
||||
|
||||
body {
|
||||
/*
|
||||
*/
|
||||
display: grid;
|
||||
grid:
|
||||
' title ' 1fr
|
||||
' cv ' 1fr
|
||||
' mouse_1 ' 1fr
|
||||
' mouse_2 ' 1fr
|
||||
' mouse_3 ' 1fr
|
||||
' mouse_4 ' 1fr
|
||||
' banner_1 ' 1fr
|
||||
' banner_2 ' 1fr
|
||||
' banner_3 ' 1fr
|
||||
' banner_4 ' 1fr
|
||||
' banner_5 ' 1fr
|
||||
' infos ' 1fr
|
||||
/ 100% ;
|
||||
}
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
|
||||
@font-face {
|
||||
font-family: "notomono";
|
||||
src:
|
||||
@@ -25,3 +26,9 @@ li {
|
||||
li::marker {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
a::after {
|
||||
content: attr(href);
|
||||
}
|
||||
h1 {
|
||||
margin: 30px 0px;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user