diff --git a/index-test.html b/index-test.html deleted file mode 100644 index f7966ba..0000000 --- a/index-test.html +++ /dev/null @@ -1,47 +0,0 @@ - - - - - - - - - - - -
-

titre exemple

-

texte exemple

-
- - diff --git a/styles/global.css b/styles/global.css index ee484a2..a946edd 100644 --- a/styles/global.css +++ b/styles/global.css @@ -1,223 +1,49 @@ -/*DEBUG*/ -/* borders on mains elements of pages for debugging*/ -body * { - /* - border: 1px solid red; - */ -} -body > *, body > .container_main > * { - /* - border: 1px solid red; - */ -} +/*----------------------------------------------*/ +/*GLOBAL VARIABLE*/ +:root { + /* color range */ + --color-purple: hsl(324, 86%, 52%); /* #ee1998 - rgb(238, 25, 152) */ + --color-pink: hsl(324, 100%, 74%); /* #ff7bca - rgb(255, 123, 202) */ + --color-green: hsl(86, 60%, 52%); /* #8fce3c - rgb(143, 206, 60 ) */ + --color-yellow: hsl(59, 92%, 46%); /* #e3e00a - rgb(227, 224, 10 ) */ + --color-blue: hsl(189, 73%, 61%); /* #51cee4 - rgb(81, 206, 228) */ + --color-water: hsl(189, 88%, 38%); /* #0c9cb5 - rgb(12, 156, 181) */ -/*---------------------------------------------*/ -/*global settings*/ -/* - --------------------- --------------------- - ' NAV ' ' NAV ' - '---------------------' '---------------------' - ' ------------------- ' ' S ' PATHS ' A ' - '' CONTAINER '' ' U ' ----- ' S ' - '' --- ------- --- '' ' M ' TITLE ' I ' - ''' S '' PATHS '' A ''' ' M ' ----- ' D ' - ''' U '' ----- '' S ''' ' A ' M ' E ' - ''' M '' TITLE '' I ''' ' R ' A ' S ' - ''' M '' ----- '' D ''' ' Y ' I ' ' - ''' A '' M '' E ''' ' ' N ' ' - ''' R '' A '' S ''' '---------------------' - ''' Y '' I '' ''' ' FOOTER ' - ''' '' N '' ''' '---------------------' - '''---''-------''---''' - ''-------------------'' - ' FOOTER ' - '---------------------' + /* colors buttons */ + --hue-btn: 12; + --color-btn: hsl(var(--hue-btn), 1%, 1%); - navbar -> nav - container -> .container_main - summary -> aside.page_content - main -> main - paths -> .page.path - asides -> aside.relative_content - footer -> -*/ + /*TEXTE*/ + /* fonts */ + --font-titles: 'paradroid'; + --font-texts: 'louisgeorge'; + --font-fallback: 'cabrion'; -/*ALL*/ -/* by default all elements are verticals*/ -body, body * { - display: flex; - flex-direction: column; -} -body aside, body main { - padding: calc(var(--gap-unit) / 2); -} + /* colors texts */ + /*text*/ + --color-text: hsl(0, 0%, 10%); + --color-text-light: hsl(0, 0%, 25%); + --color-text-strong: hsl(0, 0%, 5%); + /*links*/ + --hue-link: 324; + --hue-link: 189; + --hue-link: 59; + --color-link: hsl(var(--hue-link), 70%, 40%); + --color-link-hover: hsl(var(--hue-link), 70%, 50%); + --color-link-active: hsl(var(--hue-link), 70%, 50%); + --color-link-visited: hsl(var(--hue-link), 60%, 30%); + /*titles*/ + --color-title-1: hsl(0, 0%, 10%); + --color-title-2: hsl(0, 0%, 10%); -/*HTML*/ -html { - scroll-behavior: smooth; - /*default font-size for rem*/ - font-size: var(--base-font-size); -} + /*skeleton*/ + --gap-unit: 10px; + --max-screen: 1110px; + --base-font-size: 10px; + --nav-height: 40px; + --base-back-color: white; + --aside-left-width: 200px; + --aside-right-width: 200px; + --aside-margin: 30px; -/*BODY*/ -/* the page is designed for a maximum screen*/ -body { - background-color: var(--base-back-color); } - -/*NAVBAR*/ -body nav { - flex-direction: row; - /*we have to set the height to use the height % for childs elements*/ - height: var(--nav-height); - border-bottom: 1px solid lightgrey; - background-color: var(--base-back-color); - z-index: 10; -} -body nav * { - display: flex; - flex-direction: row; - margin: auto; - max-height: 100%; -} -/* nav_left is used for links to pages*/ -body nav .nav_left { - /*we have to set the height to use the height % for childs elements*/ - height: 100%; - margin-left: 0px; - margin-right: auto; -} -/* nav_right is used for actions such as connection, search or language*/ -body nav .nav_right { - height: 100%; - margin-left: auto; - margin-right: 0px; -} -/* appearence on hover and click*/ -body nav a { - /*gap-unit * 1.5 because there are 2 * (1/2) for aside and (1/2) for main*/ - padding: 0px calc(var(--gap-unit) * 1.5); - height: 100%; -} -body nav a:hover, body nav a:focus { - background-color: lightgrey; -} -/* special settings for the logo*/ -body nav a.nav_logo { - padding: 0px; - width: var(--aside-left-width); -} - -/*CONTAINER*/ -body .container_main { - margin: auto; - flex-direction: row; -} - -/*ASIDE LEFT SUMMARY*/ -/* aside left is for page table of content */ -body aside.page_content { - top: calc(var(--nav-height) + 1px); - height: calc(100vh - var(--nav-height)); - margin-right: var(--aside-margin); -} -/* asides elements only have width if they have a child*/ -body aside.page_content .table_box { - width: calc(var(--aside-left-width) - 2 * var(--aside-margin)); - margin: var(--aside-margin) 0px var(--aside-margin) var(--aside-margin); - /*border-box so changing padding has no effect on total width*/ - box-sizing: border-box; - padding: var(--gap-unit); - /*for style*/ - border-left: 1px solid lightgrey; -} -/*to put space between elements*/ -body aside.page_content .table_box > * { - margin-bottom: var(--gap-unit); -} - -/*MAIN*/ -body main { - max-width: var(--max-main-width); -} -body main > * { - margin: var(--gap-unit) 0px; -} -body main h1 { - padding: 70px 0px; - border-bottom: 1px solid lightgrey; -} -body main h2 { - padding: 10px 0px; - border-bottom: 1px solid lightgrey; -} - -/*TITLE*/ -body main .page_title { - position: relative; -} -body main .page_title .date { - position: absolute; - bottom: 0px; - left: 0px; -} - -/*ASIDE RIGHT RELATIVES*/ -/* aside right is for links to relatives content*/ -body aside.relative_content { -} -/* asides elements only have width if they have a child*/ -body aside.relative_content *:first-child { - width: var(--aside-right-width); -} -body aside.relative_content .relative_box { - margin: var(--aside-margin); - padding: var(--gap-unit); - width: fit-content; - border: 1px solid lightgrey; -} -body aside.relative_content .box_name { - border-bottom: 1px solid lightgrey; - padding-bottom: var(--gap-unit); -} -body aside.relative_content .relative_box > * { - margin-bottom: var(--gap-unit); -} - -/*FOOTER*/ -body footer.page_footer { - height: 100px; - border-top: 1px solid lightgrey; -} - - -/*---------------------------------------------*/ -/*DESIGN KEYWORDS*/ -/* contains elements oriented vertically (default) or horizontally*/ -.vertical { - flex-direction: column; -} -/* horizontal is only in web version, it becomes vertical in mobile design*/ -.horizontal { - flex-direction: row; -} -/* self position of elements to the left, the right, or the center of their container*/ -.right { - margin-right: 0px; - margin-left: auto; - text-align: right; -} -.left > * { - margin-left: 0px; -} -.center { - margin-right: auto; - margin-left: auto; - text-align: center; -} -.sticky { - position: -webkit-sticky; /*safari*/ - position: sticky; - top: 0; -} - diff --git a/styles/skeleton.css b/styles/skeleton.css new file mode 100644 index 0000000..2e0561d --- /dev/null +++ b/styles/skeleton.css @@ -0,0 +1,225 @@ +/*DEBUG*/ +/* borders on mains elements of pages for debugging*/ +body * { + /* + border: 1px solid red; + */ +} +body > *, body > .container_main > * { + /* + border: 1px solid red; + */ +} + +/*---------------------------------------------*/ +/*global settings*/ +/* + --------------------- --------------------- + ' NAV ' ' NAV ' + '---------------------' '---------------------' + ' ------------------- ' ' S ' PATHS ' A ' + '' CONTAINER '' ' U ' ----- ' S ' + '' --- ------- --- '' ' M ' TITLE ' I ' + ''' S '' PATHS '' A ''' ' M ' ----- ' D ' + ''' U '' ----- '' S ''' ' A ' M ' E ' + ''' M '' TITLE '' I ''' ' R ' A ' S ' + ''' M '' ----- '' D ''' ' Y ' I ' ' + ''' A '' M '' E ''' ' ' N ' ' + ''' R '' A '' S ''' '---------------------' + ''' Y '' I '' ''' ' FOOTER ' + ''' '' N '' ''' '---------------------' + '''---''-------''---''' + ''-------------------'' + ' FOOTER ' + '---------------------' + + navbar -> nav + container -> .container_main + summary -> aside.page_content + main -> main + paths -> .page.path + asides -> aside.relative_content + footer -> +*/ + +/*ALL*/ +/* by default all elements are verticals*/ +body, body * { + display: flex; + flex-direction: column; +} +body aside, body main { + padding: calc(var(--gap-unit) / 2); +} + +/*HTML*/ +html { + scroll-behavior: smooth; + /*default font-size for rem*/ + font-size: var(--base-font-size); +} + +/*BODY*/ +/* the page is designed for a maximum screen*/ +body { + background-color: var(--base-back-color); +} + +/*NAVBAR*/ +body nav { + flex-direction: row; + /*we have to set the height to use the height % for childs elements*/ + height: var(--nav-height); + width: 100%; + border-bottom: 1px solid lightgrey; + background-color: var(--base-back-color); + z-index: 10; +} +body nav * { + display: flex; + flex-direction: row; + margin: auto; + max-height: 100%; +} +/* nav_left is used for links to pages*/ +body nav .nav_left { + /*we have to set the height to use the height % for childs elements*/ + height: 100%; + margin-left: 0px; + margin-right: auto; +} +/* nav_right is used for actions such as connection, search or language*/ +body nav .nav_right { + height: 100%; + margin-left: auto; + margin-right: 0px; +} +/* appearence on hover and click*/ +body nav a { + /*gap-unit * 1.5 because there are 2 * (1/2) for aside and (1/2) for main*/ + padding: 0px calc(var(--gap-unit) * 1.5); + height: 100%; +} +body nav a:hover, body nav a:focus { + background-color: lightgrey; +} +/* special settings for the logo*/ +body nav a.nav_logo { + padding: 0px; + width: var(--aside-left-width); +} + +/*CONTAINER*/ +body .container_main { + margin: auto; + flex-direction: row; + max-width: var(--max-screen); + margin: 0px; +} + +/*ASIDE LEFT SUMMARY*/ +/* aside left is for page table of content */ +body aside.page_content { + top: calc(var(--nav-height) + 1px); + height: calc(100vh - var(--nav-height)); + margin-right: var(--aside-margin); +} +/* asides elements only have width if they have a child*/ +body aside.page_content .table_box { + width: calc(var(--aside-left-width) - 2 * var(--aside-margin)); + margin: var(--aside-margin) 0px var(--aside-margin) var(--aside-margin); + /*border-box so changing padding has no effect on total width*/ + box-sizing: border-box; + padding: var(--gap-unit); + /*for style*/ + border-left: 1px solid lightgrey; +} +/*to put space between elements*/ +body aside.page_content .table_box > * { + margin-bottom: var(--gap-unit); +} + +/*MAIN*/ +body main { +} +body main > * { + margin: var(--gap-unit) 0px; +} +body main h1 { + padding: 70px 0px; + border-bottom: 1px solid lightgrey; +} +body main h2 { + padding: 10px 0px; + border-bottom: 1px solid lightgrey; +} + +/*TITLE*/ +body main .page_title { + position: relative; +} +body main .page_title .date { + position: absolute; + bottom: 0px; + left: 0px; +} + +/*ASIDE RIGHT RELATIVES*/ +/* aside right is for links to relatives content*/ +body aside.relative_content { +} +/* asides elements only have width if they have a child*/ +body aside.relative_content *:first-child { + width: var(--aside-right-width); +} +body aside.relative_content .relative_box { + margin: var(--aside-margin); + padding: var(--gap-unit); + width: fit-content; + border: 1px solid lightgrey; +} +body aside.relative_content .box_name { + border-bottom: 1px solid lightgrey; + padding-bottom: var(--gap-unit); +} +body aside.relative_content .relative_box > * { + margin-bottom: var(--gap-unit); +} + +/*FOOTER*/ +body footer.page_footer { + height: 100px; + border-top: 1px solid lightgrey; +} + + +/*---------------------------------------------*/ +/*DESIGN KEYWORDS*/ +/* contains elements oriented vertically (default) or horizontally*/ +.vertical { + flex-direction: column; +} +/* horizontal is only in web version, it becomes vertical in mobile design*/ +.horizontal { + flex-direction: row; +} +/* self position of elements to the left, the right, or the center of their container*/ +.right { + margin-right: 0px; + margin-left: auto; + text-align: right; +} +.left > * { + margin-left: 0px; +} +.center { + margin-right: auto; + margin-left: auto; + text-align: center; +} +.sticky { + position: -webkit-sticky; /*safari*/ + position: sticky; + top: 0; +} + diff --git a/styles/style.css b/styles/style.css index 72a15ad..efcc900 100644 --- a/styles/style.css +++ b/styles/style.css @@ -3,6 +3,7 @@ /*IMPORT CSS*/ @import url(./reset.css); @import url(./global.css); +@import url(./skeleton.css); @import url(./fonts.css); @import url(./text.css); @import url(./header.css); @@ -10,58 +11,3 @@ @import url(./images.css); - - -/*----------------------------------------------*/ -/*GLOBAL VARIABLE*/ -:root { - /* color range */ - --color-purple: hsl(324, 86%, 52%); /* #ee1998 - rgb(238, 25, 152) */ - --color-pink: hsl(324, 100%, 74%); /* #ff7bca - rgb(255, 123, 202) */ - --color-green: hsl(86, 60%, 52%); /* #8fce3c - rgb(143, 206, 60 ) */ - --color-yellow: hsl(59, 92%, 46%); /* #e3e00a - rgb(227, 224, 10 ) */ - --color-blue: hsl(189, 73%, 61%); /* #51cee4 - rgb(81, 206, 228) */ - --color-water: hsl(189, 88%, 38%); /* #0c9cb5 - rgb(12, 156, 181) */ - - /* colors buttons */ - --hue-btn: 12; - --color-btn: hsl(var(--hue-btn), 1%, 1%); - - /*TEXTE*/ - /* fonts */ - --font-titles: 'paradroid'; - --font-texts: 'louisgeorge'; - --font-fallback: 'cabrion'; - - --max-p-width: 700px; - - /* colors texts */ - /*text*/ - --color-text: hsl(0, 0%, 10%); - --color-text-light: hsl(0, 0%, 25%); - --color-text-strong: hsl(0, 0%, 5%); - /*links*/ - --hue-link: 324; - --hue-link: 189; - --hue-link: 59; - --color-link: hsl(var(--hue-link), 70%, 40%); - --color-link-hover: hsl(var(--hue-link), 70%, 50%); - --color-link-active: hsl(var(--hue-link), 70%, 50%); - --color-link-visited: hsl(var(--hue-link), 60%, 30%); - /*titles*/ - --color-title-1: hsl(0, 0%, 10%); - --color-title-2: hsl(0, 0%, 10%); - - /*skeleton*/ - --gap-unit: 10px; - --max-screen: 1560px; - --base-font-size: 10px; - --nav-height: 40px; - --base-back-color: white; - --aside-left-width: 200px; - --aside-right-width: 200px; - --aside-margin: 30px; - --max-main-width: var(--max-p-width); -} - - diff --git a/styles/text.css b/styles/text.css index 2daa65c..8d559cb 100644 --- a/styles/text.css +++ b/styles/text.css @@ -35,7 +35,6 @@ main { p { font-size: 1.8em; line-height: 1.5em; - max-width: var(--max-p-width); } h1 { font-size: 3.5em; @@ -83,7 +82,7 @@ b, em { } .quote_credit { font-size: 1.8em; - margin-top: var(--gap-unit); + margin-top: 0.2em; } .quote_credit p { font-size: 0.8em;