From fbfde7daee6da93a09181bbecb308c9aefe4689b Mon Sep 17 00:00:00 2001 From: hugogogo Date: Thu, 25 Feb 2021 23:54:41 +0100 Subject: [PATCH] reorganisation des pages css et ajout du vrai texte pour litterall --- styles/images.css | 175 +++++-------------------------------- styles/images_test.css | 193 +++++++++++++++++++++++++++++++++++++++++ styles/style.css | 73 ++-------------- styles/text.css | 61 +++++++++++++ 4 files changed, 283 insertions(+), 219 deletions(-) create mode 100644 styles/images_test.css create mode 100644 styles/text.css diff --git a/styles/images.css b/styles/images.css index 225eb7a..7c7b7c2 100644 --- a/styles/images.css +++ b/styles/images.css @@ -1,53 +1,12 @@ -/*GALLERY*/ /* -
-
- -

description

-
-
- - .gallery - ----- ---- --- ---- - ' '' '' '' ' - ' '' '' '' ' - '-----''----''---''----' - ~~ ~ ~~ ~~ ~~ ~ - ---- --- --- ------ - ' '' '' '' ' - ' '' '' '' ' - '----''---''---''------' - ~~~ ~ ~ ~ ~~ ~~ - ------ --- - ' '' ' - ' '' ' - '------''---' - ~~ ~ ~ ~ - images are stretched to cover the entire raw - it works well with images of similar size - - -
-
- .gallery.frame - -------- --------- ---------- --------- - ' ---- '' ----- '' ------ '' ----- ' - ' ' ' '' ' ' '' ' ' '' ' ' ' - ' ' ' '' ' ' '' ' ' '' ' ' ' - ' '----' '' '-----' '' '------' '' '-----' ' - ' ~~ ~~ '' ~~~ ~ '' ~~ ~~ ~ '' ~~ ~~ ' - '--------''---------''----------''---------' - ----------- ------- - ' ------- '' --- ' - ' ' ' '' ' ' ' - ' ' ' '' ' ' ' - ' '-------' '' '---' ' - ' ~~ ~~ '' ~~~ ' - '-----------''-------' - images keeps their real ratio, but a frame appear around them + table of content : + - global settings + - GALLERY + - IMAGE single */ -/*adjusting settings*/ +/*----------------------------------------------------*/ +/*adjusting global settings*/ :root { /*GALLERY*/ /*space between columns of cards*/ @@ -56,12 +15,12 @@ --gallery-img-height: 200px; --gallery-img-border-width: 1px; --gallery-img-border-color: lightgrey; - /*frames width and color*/ - --gallery-frame-width: 1px; - --gallery-frame-color: lightgrey; - --gallery-frame-color: transparent; + /*IMAGE single*/ } +/*----------------------------------------------------*/ +/*GALLERY*/ + /*design*/ .gallery { display: flex; @@ -70,124 +29,38 @@ .gallery .card { display: flex; flex-direction: column; - flex: 1; + flex: 0 1 0; padding: 0px; margin: 0px; /*space between columns of cards*/ margin-right: calc(var(--gallery-gap-unit) * 2); + /*space between lines of cards*/ + margin-top: calc(var(--gallery-gap-unit) * 2); } .gallery .card > * { /*vertical space between elements inside of cards*/ - /*that also handle vertical space between cards without frames*/ margin: var(--gallery-gap-unit) 0px; } .gallery .card img { - /*height of imgs hence of lines*/ + /*height of imgs, hence of lines*/ height: var(--gallery-img-height); + margin: auto auto auto 0px; /*appearence of border of imgs*/ border-style: solid; border-width: var(--gallery-img-border-width); border-color: var(--gallery-img-border-color); } -/*to avoid last element of gallery to stretch untill end of line*/ -.gallery::after { - content: ""; - flex: 100; -} -/*in case of frames*/ -.gallery.frame .card { - /*spaces between cards*/ - margin-top: var(--gallery-gap-unit); - margin-right: calc(var(--gallery-gap-unit) * 2); - margin-bottom: var(--gallery-gap-unit); - margin-left: 0px; - /*horizontal spaces inside of cards*/ - /*vertical space is handled below by margins of childs elements*/ - padding-left: var(--gallery-gap-unit); - padding-right: var(--gallery-gap-unit); - /*width and color of frames*/ - border-style: solid; - border-width: var(--gallery-frame-width); - border-color: var(--gallery-frame-color); -} -.gallery.frame .card > * { - /*the auto is what avoid img to stretch towards edges*/ - margin: var(--gallery-gap-unit) auto; -} - -/*GALERY*/ -.galery { - display: flex; - flex-wrap: wrap; -} -.galery .card { - display: flex; - flex-direction: column; - /* - flex-grow: 1; - flex-shrink: 0; - flex-basis: 0; - */ - flex: 1 1 0; - padding: 0px; - margin: 20px 20px 20px 0px; -} -.galery .card img { - height: 200px; -} -.galery .card p { - margin-left: 0px; -} -.galery .card > * { - margin: 5px 0px; -} -.galery::after { - content: ""; - flex: 10; -} -/*space*/ -.galery.space .card .image_background { - display: flex; - width: 100%; - background-color: hsl(0, 0%, 95%); -} -.galery.space .card .image_background img { - margin: auto; -} -/*cut*/ -.galery.cut .card { - display: flex; -} -.galery.cut .card > * { - margin: 5px auto; -} -.galery.cut .card .image_background { - display: flex; - width: 100%; - overflow: hidden; - background-color: hsl(0, 0%, 95%); -} -.galery.cut .card .image { - margin: auto; -} -.galery.cut .card .image img { - margin: auto -30px; -} -/*minwidth*/ -.galery.minwidth .card { - min-width: 150px; -} - - -/*image du haut*/ -div.image_container { - border: 1px solid green; +/*----------------------------------------------------*/ +/*IMAGE single*/ +.image { margin: auto; margin-left: 0px; - overflow: visible; } -div.image_container img { - margin-left: -10px; - margin-right: -10px; +.image img { } +.image.full img { + max-width: 100vw; + margin-left: calc(-1 * var(--screen-gap)); +} + diff --git a/styles/images_test.css b/styles/images_test.css new file mode 100644 index 0000000..225eb7a --- /dev/null +++ b/styles/images_test.css @@ -0,0 +1,193 @@ +/*GALLERY*/ +/* +
+
+ +

description

+
+
+ + .gallery + ----- ---- --- ---- + ' '' '' '' ' + ' '' '' '' ' + '-----''----''---''----' + ~~ ~ ~~ ~~ ~~ ~ + ---- --- --- ------ + ' '' '' '' ' + ' '' '' '' ' + '----''---''---''------' + ~~~ ~ ~ ~ ~~ ~~ + ------ --- + ' '' ' + ' '' ' + '------''---' + ~~ ~ ~ ~ + images are stretched to cover the entire raw + it works well with images of similar size + + +
+
+ .gallery.frame + -------- --------- ---------- --------- + ' ---- '' ----- '' ------ '' ----- ' + ' ' ' '' ' ' '' ' ' '' ' ' ' + ' ' ' '' ' ' '' ' ' '' ' ' ' + ' '----' '' '-----' '' '------' '' '-----' ' + ' ~~ ~~ '' ~~~ ~ '' ~~ ~~ ~ '' ~~ ~~ ' + '--------''---------''----------''---------' + ----------- ------- + ' ------- '' --- ' + ' ' ' '' ' ' ' + ' ' ' '' ' ' ' + ' '-------' '' '---' ' + ' ~~ ~~ '' ~~~ ' + '-----------''-------' + images keeps their real ratio, but a frame appear around them +*/ + +/*adjusting settings*/ +:root { + /*GALLERY*/ + /*space between columns of cards*/ + --gallery-gap-unit: 6px; + /*images height and border*/ + --gallery-img-height: 200px; + --gallery-img-border-width: 1px; + --gallery-img-border-color: lightgrey; + /*frames width and color*/ + --gallery-frame-width: 1px; + --gallery-frame-color: lightgrey; + --gallery-frame-color: transparent; +} + +/*design*/ +.gallery { + display: flex; + flex-wrap: wrap; +} +.gallery .card { + display: flex; + flex-direction: column; + flex: 1; + padding: 0px; + margin: 0px; + /*space between columns of cards*/ + margin-right: calc(var(--gallery-gap-unit) * 2); +} +.gallery .card > * { + /*vertical space between elements inside of cards*/ + /*that also handle vertical space between cards without frames*/ + margin: var(--gallery-gap-unit) 0px; +} +.gallery .card img { + /*height of imgs hence of lines*/ + height: var(--gallery-img-height); + /*appearence of border of imgs*/ + border-style: solid; + border-width: var(--gallery-img-border-width); + border-color: var(--gallery-img-border-color); +} +/*to avoid last element of gallery to stretch untill end of line*/ +.gallery::after { + content: ""; + flex: 100; +} +/*in case of frames*/ +.gallery.frame .card { + /*spaces between cards*/ + margin-top: var(--gallery-gap-unit); + margin-right: calc(var(--gallery-gap-unit) * 2); + margin-bottom: var(--gallery-gap-unit); + margin-left: 0px; + /*horizontal spaces inside of cards*/ + /*vertical space is handled below by margins of childs elements*/ + padding-left: var(--gallery-gap-unit); + padding-right: var(--gallery-gap-unit); + /*width and color of frames*/ + border-style: solid; + border-width: var(--gallery-frame-width); + border-color: var(--gallery-frame-color); +} +.gallery.frame .card > * { + /*the auto is what avoid img to stretch towards edges*/ + margin: var(--gallery-gap-unit) auto; +} + + +/*GALERY*/ +.galery { + display: flex; + flex-wrap: wrap; +} +.galery .card { + display: flex; + flex-direction: column; + /* + flex-grow: 1; + flex-shrink: 0; + flex-basis: 0; + */ + flex: 1 1 0; + padding: 0px; + margin: 20px 20px 20px 0px; +} +.galery .card img { + height: 200px; +} +.galery .card p { + margin-left: 0px; +} +.galery .card > * { + margin: 5px 0px; +} +.galery::after { + content: ""; + flex: 10; +} +/*space*/ +.galery.space .card .image_background { + display: flex; + width: 100%; + background-color: hsl(0, 0%, 95%); +} +.galery.space .card .image_background img { + margin: auto; +} +/*cut*/ +.galery.cut .card { + display: flex; +} +.galery.cut .card > * { + margin: 5px auto; +} +.galery.cut .card .image_background { + display: flex; + width: 100%; + overflow: hidden; + background-color: hsl(0, 0%, 95%); +} +.galery.cut .card .image { + margin: auto; +} +.galery.cut .card .image img { + margin: auto -30px; +} +/*minwidth*/ +.galery.minwidth .card { + min-width: 150px; +} + + +/*image du haut*/ +div.image_container { + border: 1px solid green; + margin: auto; + margin-left: 0px; + overflow: visible; +} +div.image_container img { + margin-left: -10px; + margin-right: -10px; +} diff --git a/styles/style.css b/styles/style.css index 0245a18..943a0c5 100644 --- a/styles/style.css +++ b/styles/style.css @@ -6,6 +6,7 @@ @import url(./header.css); @import url(./footer.css); @import url(./images.css); +@import url(./text.css); @@ -21,32 +22,12 @@ --color-blue: #51cee4; --color-water: #0c9cb5; - /* colors texts */ - --color-texts: rgb(1, 1, 1); - --color-texts-special: rgb(1, 1, 1); - - /* colors links */ - --color-links: rgb(120, 1, 1); - --color-links-hover: rgb(120, 1, 1); - --color-links-visited: rgb(120, 1, 1); - --color-links-active: rgb(120, 1, 1); - - /* colors titles */ - --color-title-1: rgb(120, 1, 1); - --color-title-2: rgb(120, 1, 1); - --color-title-3: rgb(120, 1, 1); - --color-title-4: rgb(120, 1, 1); - --color-title-5: rgb(120, 1, 1); - --color-title-6: rgb(120, 1, 1); - /* colors buttons */ --primary-hue: 12; --color-button: hsl(var(primary-hue), 1%, 1%); - /* fonts */ - --font-titles: 'paradroid'; - --font-texts: 'louisgeorge'; - --font-fallback: 'cabrion'; + /*space between content and screen*/ + --screen-gap: 5vw; } @@ -61,8 +42,8 @@ body { display: flex; flex-direction: column; margin: 0px; - padding: 1%; - width: calc(98%); + padding: var(--screen-gap); + width: calc(100% - 2 * var(screen-gap)); } main { min-height: calc(100vh - 70px); @@ -83,47 +64,3 @@ main { } -/*/////////////////////////////////////////////*/ -/*TEXTS*/ -h1, h2, h3, h4, h5, h6 { - font-family: var(--font-titles), var(--font-fallback), sans-serif; -} -a, p, li { - font-family: var(--font-texts), var(--font-fallback), sans-serif; -} -a, a > * { - cursor: pointer; -} -a, a:link { - color: var(--color-links); -} -a:visited { - color: var(--color-links-visited); -} -a:hover { - color: var(--color-links-hover); -} -a:active { - color: var(--color-links-active); -} -li *, li p, article b, article em, -article i, article a, article var { - display: inline; -} -p, var { - color: var(--color-texts); -} -i { - font-style: italic; -} -b { - font-weight: 600; - color: var(--article-medium); -} -em { - font-weight: 600; - color: var(--article-em); -} - - - diff --git a/styles/text.css b/styles/text.css new file mode 100644 index 0000000..3d12f6d --- /dev/null +++ b/styles/text.css @@ -0,0 +1,61 @@ + +:root { + /* colors texts */ + --color-texts: rgb(1, 1, 1); + --color-texts-special: rgb(1, 1, 1); + --color-links: rgb(120, 1, 1); + --color-links-hover: rgb(120, 1, 1); + --color-links-visited: rgb(120, 1, 1); + --color-links-active: rgb(120, 1, 1); + --color-title-1: rgb(120, 1, 1); + + /* fonts */ + --font-titles: 'paradroid'; + --font-texts: 'louisgeorge'; + --font-fallback: 'cabrion'; +} + +/*/////////////////////////////////////////////*/ +/*TEXTS*/ +/*fonts*/ +h1, h2, h3, h4, h5, h6 { + font-family: var(--font-titles), var(--font-fallback), sans-serif; +} +a, p, li { + font-family: var(--font-texts), var(--font-fallback), sans-serif; +} +/*colors*/ +a, a:link { + color: var(--color-links); +} +a:visited { + color: var(--color-links-visited); +} +a:hover { + color: var(--color-links-hover); +} +a:active { + color: var(--color-links-active); +} +p, var { + color: var(--color-texts); +} +/*specials settings*/ +a, a > * { + cursor: pointer; +} +li *, li p, article b, article em, +article i, article a, article var { + display: inline; +} +i { + font-style: italic; +} +b { + font-weight: 600; + color: var(--article-medium); +} +em { + font-weight: 600; + color: var(--article-em); +}