modifs in global attribute flexbox alternativ implementation
This commit is contained in:
asus
173
index.html
173
index.html
@@ -18,7 +18,9 @@
|
||||
|
||||
ids :
|
||||
|
||||
<id="name">
|
||||
<id="personnal_infos">
|
||||
<id="role_title">
|
||||
<id="cv_infos">
|
||||
<id="mouse_1">
|
||||
<id="mouse_2">
|
||||
<id="mouse_3">
|
||||
@@ -42,13 +44,52 @@
|
||||
|
||||
<body>
|
||||
|
||||
<section class="vertical-left">
|
||||
<!--
|
||||
PERSONNAL INFOS
|
||||
-->
|
||||
<section id="personnal_infos">
|
||||
<p>+33 (0)7 67 04 11 14</p>
|
||||
<p>www.hugulumu.fr</p>
|
||||
<p>hugogogo@protonmail.com</p>
|
||||
</section>
|
||||
<!--
|
||||
END PERSONNAL INFOS
|
||||
-->
|
||||
|
||||
<section class="vertical-left">
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<!--
|
||||
ROLE TITLE
|
||||
-->
|
||||
<div id="role_title" class="horizontal child-left width-content wrap gap margin-medium margin-top margin-bottom">
|
||||
<pre>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</pre>
|
||||
<pre>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</pre>
|
||||
</div>
|
||||
<!--
|
||||
END ROLE TITLE
|
||||
-->
|
||||
|
||||
|
||||
<!--
|
||||
CV INFOS
|
||||
-->
|
||||
<section id="cv_infos" class="vertical child-left">
|
||||
<h1>Informatique</h1>
|
||||
<ul>
|
||||
<li>École 42, Paris, 2021-2022, tronc commun - niveau 10</li>
|
||||
@@ -81,27 +122,18 @@
|
||||
<li>Autonomie : recherche des moyens de vivre avec le minimum d'affaires</li>
|
||||
</ul>
|
||||
</section>
|
||||
<!--
|
||||
END CV INFOS
|
||||
-->
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="left horizontal wrap">
|
||||
<pre id="name">
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</pre>
|
||||
<pre id="name">
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</pre>
|
||||
</div>
|
||||
|
||||
|
||||
<!--
|
||||
MOUSE 1
|
||||
-->
|
||||
<div class="frames_container" id="mouse_1">
|
||||
<pre class="frame f1">
|
||||
|
||||
@@ -176,7 +208,18 @@
|
||||
|
||||
</pre>
|
||||
</div>
|
||||
<!--
|
||||
END MOUSE 1
|
||||
-->
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<!--
|
||||
MOUSE 2
|
||||
-->
|
||||
<div class="frames_container" id="mouse_2">
|
||||
<pre class="frame f1">
|
||||
|
||||
@@ -251,7 +294,18 @@
|
||||
|
||||
</pre>
|
||||
</div>
|
||||
<!--
|
||||
END MOUSE 2
|
||||
-->
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<!--
|
||||
MOUSE 3
|
||||
-->
|
||||
<div class="frames_container" id="mouse_3">
|
||||
<pre class="frame f1">
|
||||
|
||||
@@ -318,7 +372,18 @@
|
||||
|
||||
</pre>
|
||||
</div>
|
||||
<!--
|
||||
END MOUSE 3
|
||||
-->
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<!--
|
||||
MOUSE 4
|
||||
-->
|
||||
<div class="frames_container" id="mouse_4">
|
||||
<pre class="frame f1">
|
||||
|
||||
@@ -384,14 +449,36 @@
|
||||
|
||||
</pre>
|
||||
</div>
|
||||
<!--
|
||||
END MOUSE 4
|
||||
-->
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<!--
|
||||
BANNER 1
|
||||
-->
|
||||
<pre class="banner" id="banner_1">
|
||||
|
||||
|
||||
|
||||
</pre>
|
||||
<!--
|
||||
END BANNER 1
|
||||
-->
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<!--
|
||||
BANNER 2
|
||||
-->
|
||||
<pre class="banner reverse t1_0" id="banner_2">
|
||||
|
||||
|
||||
@@ -406,13 +493,37 @@
|
||||
|
||||
|
||||
</pre>
|
||||
<!--
|
||||
END BANNER 2
|
||||
-->
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<!--
|
||||
BANNER 3
|
||||
-->
|
||||
<pre class="banner t2_0 reverse" id="banner_3">
|
||||
|
||||
|
||||
|
||||
</pre>
|
||||
<!--
|
||||
END BANNER 3
|
||||
-->
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<!--
|
||||
BANNER 4
|
||||
-->
|
||||
<pre class="banner t0_5" id="banner_4">
|
||||
|
||||
|
||||
@@ -424,7 +535,20 @@
|
||||
|
||||
|
||||
</pre>
|
||||
<!--
|
||||
END BANNER 4
|
||||
-->
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<!--
|
||||
BANNER 5
|
||||
-->
|
||||
<pre class="banner reverse" id="banner_5">
|
||||
|
||||
|
||||
@@ -442,6 +566,17 @@
|
||||
|
||||
|
||||
</pre>
|
||||
<!--
|
||||
END BANNER 5
|
||||
-->
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -6,7 +6,6 @@
|
||||
|
||||
|
||||
/*
|
||||
|
||||
[-] horizontal [/] content [/] left [/]-pack [ ]-fit
|
||||
[-] vertical [/]-parent [/] right [/] grow [ ] stretch
|
||||
[/] top [/] space
|
||||
@@ -14,38 +13,36 @@
|
||||
[/]-center
|
||||
*/
|
||||
|
||||
[class*="child-"] { border: 1px solid blue; }
|
||||
.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; }
|
||||
|
||||
[class*="horizontal"], [class*="vertical"] { display: flex; justify-content: center; align-items: center; width: auto; }
|
||||
[class*="horizontal"] { flex-direction: row; }
|
||||
[class*="vertical"] { flex-direction: column; }
|
||||
[class*="horizontal"] > *, [class*="vertical"] > * { margin: 0px; flex-grow: 0; }
|
||||
.width-parent { width: auto; }
|
||||
.width-content { width: fit-content; }
|
||||
|
||||
[class*="-parent"] { width: auto; }
|
||||
[class*="-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; }
|
||||
|
||||
[class*="horizontal"][class*="-left"] { justify-content: flex-start; }
|
||||
[class*="horizontal"][class*="-center"] { }
|
||||
[class*="horizontal"][class*="-right"] { justify-content: flex-end; }
|
||||
[class*="horizontal"][class*="-top"] { align-items: flex-start; }
|
||||
[class*="horizontal"][class*="-bottom"] { align-items: flex-end; }
|
||||
[class*="vertical"][class*="-left"] { align-items: flex-start; }
|
||||
[class*="vertical"][class*="-center"] { align-items: center; }
|
||||
[class*="vertical"][class*="-right"] { align-items: flex-end; }
|
||||
[class*="vertical"][class*="-top"] { justify-content: flex-start; }
|
||||
[class*="vertical"][class*="-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; }
|
||||
|
||||
[class*="horizontal"][class*="-pack"] > * { flex-grow: 0; }
|
||||
[class*="horizontal"][class*="-space"] { justify-content: space-around; }
|
||||
[class*="horizontal"][class*="-spread"] { justify-content: space-between; }
|
||||
[class*="horizontal"][class*="-grow"] > * { flex-grow: 1; }
|
||||
[class*="vertical"][class*="-pack"] > * { flex-grow: 0; }
|
||||
[class*="vertical"][class*="-space"] { justify-content: space-around; }
|
||||
[class*="vertical"][class*="-spread"] { justify-content: space-between; }
|
||||
[class*="vertical"][class*="-grow"] > * { flex-grow: 1; }
|
||||
|
||||
[class*="horizontal"][class*="-fit"], [class*="vertical"][class*="-fit"] { }
|
||||
[class*="horizontal"][class*="-stretch"], [class*="vertical"][class*="-stretch"] { align-items: stretch; }
|
||||
.horizontal.child-fit, .vertical.child-fit { }
|
||||
.horizontal.child-stretch, .vertical.child-stretch { align-items: stretch; }
|
||||
|
||||
|
||||
.horizontal {
|
||||
@@ -56,4 +53,23 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.wrap {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
[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); }
|
||||
|
||||
|
||||
@@ -1,6 +1,11 @@
|
||||
html {
|
||||
font-size: 62.5%;
|
||||
}
|
||||
:root {
|
||||
--small-space: 10px;
|
||||
--medium-space: calc(var(--small-space) * 3);
|
||||
--big-space: calc(var(--small-space) * 10);
|
||||
}
|
||||
body {
|
||||
/*
|
||||
*/
|
||||
|
||||
@@ -29,3 +29,9 @@ li {
|
||||
li::marker {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 530px) {
|
||||
pre {
|
||||
font-size: 2.2vw;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user