From 7e0cb0135249e651102b260be4796f54a7f27b80 Mon Sep 17 00:00:00 2001 From: asus Date: Fri, 17 Nov 2023 17:49:44 +0100 Subject: [PATCH] modifs in global attribute flexbox alternativ implementation --- index.html | 173 +++++++++++++++++++++++++++++++++++++++++----- styles/global.css | 74 ++++++++++++-------- styles/style.css | 5 ++ styles/text.css | 6 ++ 4 files changed, 210 insertions(+), 48 deletions(-) diff --git a/index.html b/index.html index 07398f0..983ecb0 100644 --- a/index.html +++ b/index.html @@ -18,7 +18,9 @@ ids : - + + + @@ -42,13 +44,52 @@ -
+ +

+33 (0)7 67 04 11 14

www.hugulumu.fr

hugogogo@protonmail.com

+ -
+ + + + + + + +
+
+                         
+                                         
+                           
+                                             
+                                
+
+
+                         
+                                                 
+                                       
+                                                  
+                                 
+
+
+ + + + +

Informatique

  • École 42, Paris, 2021-2022, tronc commun - niveau 10
    • @@ -81,27 +122,18 @@
  • Autonomie : recherche des moyens de vivre avec le minimum d'affaires
+ -
-
-                               
-                                               
-                                 
-                                                   
-                                      
-
-
-                         
-                                                 
-                                       
-                                                  
-                                 
-
-
+ + 
        
@@ -176,7 +208,18 @@
                              
+ + + + + + + 
               
@@ -251,7 +294,18 @@
       
+ + + + + + + 
                    
@@ -318,7 +372,18 @@
           
+ + + + + + + 
                       
@@ -384,14 +449,36 @@
       
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/styles/global.css b/styles/global.css index d0eb4d1..6c7426f 100644 --- a/styles/global.css +++ b/styles/global.css @@ -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); } diff --git a/styles/style.css b/styles/style.css index 651fff8..9450bdb 100644 --- a/styles/style.css +++ b/styles/style.css @@ -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 { /* */ diff --git a/styles/text.css b/styles/text.css index 91244e6..e2f6da2 100644 --- a/styles/text.css +++ b/styles/text.css @@ -29,3 +29,9 @@ li { li::marker { font-size: 1.2rem; } + +@media screen and (max-width: 530px) { + pre { + font-size: 2.2vw; + } +}