- used data attributes for global flex css

- started grid layout

styles/elements/banners.css

@@ -0,0 +1,33 @@
+
+pre.banner {
+	position: relative;
+	margin: 10px 0px 10px -100px;
+	animation-name: slide;
+	animation-iteration-count: infinite;
+	animation-duration: 2s;
+	animation-timing-function: linear;
+	animation-direction: normal;
+}
+pre.banner.pause {
+	animation-play-state: paused;
+}
+pre.banner.reverse {
+	animation-direction: reverse;
+}
+pre.banner.t0_5 {
+	animation-duration: 0.5s;
+}
+pre.banner.t1_0 {
+	animation-duration: 1s;
+}
+pre.banner.t1_5 {
+	animation-duration: 1.5s;
+}
+pre.banner.t2_0 {
+	animation-duration: 2s;
+}
+@keyframes slide {
+	from {left:0;}
+	to {left:2.4em;}
+}
+

styles/elements/cv.css

@@ -0,0 +1,2 @@
+#cv_infos {
+}

styles/elements/infos.css

@@ -0,0 +1,3 @@
+
+#personnal_infos {
+}

styles/elements/mouses.css

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

styles/elements/title.css

@@ -0,0 +1,2 @@
+#role_title {	
+}