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.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.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);
+}