From 409ec82f3b53810efa7ebcb81adf258a8020b4aa Mon Sep 17 00:00:00 2001 From: hugogogo Date: Fri, 12 Mar 2021 13:08:44 +0100 Subject: [PATCH] transvase aside style dans aside css --- pages/litterall.html | 11 ++--- styles/aside_left.css | 21 ++++++++++ styles/global.css | 17 ++++---- styles/nav.css | 2 +- styles/skeleton.css | 93 ++++++------------------------------------- 5 files changed, 50 insertions(+), 94 deletions(-) create mode 100644 styles/aside_left.css diff --git a/pages/litterall.html b/pages/litterall.html index 3120486..87fa2e0 100644 --- a/pages/litterall.html +++ b/pages/litterall.html @@ -29,8 +29,9 @@

sommaire

litterall

 -

dernier numero

 -

anciens numeros

 +

numero 27

 +

numero 26

 +

archives
@@ -53,7 +54,7 @@ bibliotheque litterall

credit: Jeffrey Trehudic

-

revue numéro 27

+

revue numéro 27

revue litterall
@@ -62,7 +63,7 @@

sommaire ...

-

revue numéro 26

+

revue numéro 26

revue litterall
@@ -72,7 +73,7 @@
-

anciens numeros

+

anciens numeros

revue litterall diff --git a/styles/aside_left.css b/styles/aside_left.css new file mode 100644 index 0000000..22608f4 --- /dev/null +++ b/styles/aside_left.css @@ -0,0 +1,21 @@ + +/*---------------------------------------------*/ +/*ASIDE LEFT*/ +/* aside left is for page table of content */ +body aside.page_content { + top: calc(var(--nav-height) + 1px); + height: calc(100vh - var(--nav-height)); + padding: calc(var(--gap-unit) / 2); +} +/* asides elements only have width if they have a child*/ +body aside.page_content .table_box { + min-width: var(--aside-left-width); + margin: var(--aside-margin) auto var(--aside-margin) var(--aside-margin); + padding: var(--gap-unit); + /*for style*/ + border-left: 1px solid var(--color-lines-aside-l); +} +/*to put space between elements*/ +body aside.page_content .table_box > * { + margin-bottom: var(--gap-unit); +} diff --git a/styles/global.css b/styles/global.css index 44f0515..de4e4b2 100644 --- a/styles/global.css +++ b/styles/global.css @@ -13,13 +13,16 @@ --hue-3: 59; --hue-4: 189; - /*doc color*/ - --hue-back: var(--hue-4); - --color-back-base: hsl(var(--hue-back), 0%, 100%); - --color-back-dark: hsl(var(--hue-back), 0%, 95%); - --color-lines: hsl(var(--hue-back), 70%, 80%); - - /* colors buttons */ + /*BODY*/ + /* background*/ + --color-back-base: hsl(0, 0%, 100%); + --color-back-dark: hsl(0, 0%, 95%); + /* lines*/ + --color-lines-main: hsl(var(--hue-1), 50%, 80%); + --color-lines-aside-l: hsl(var(--hue-2), 50%, 80%); + --color-lines-aside-r: hsl(var(--hue-3), 50%, 80%); + --color-lines-nav: hsl(var(--hue-4), 50%, 80%); + /* buttons*/ --hue-btn: 12; --color-btn: hsl(var(--hue-btn), 1%, 1%); diff --git a/styles/nav.css b/styles/nav.css index 4831733..d3b11a6 100644 --- a/styles/nav.css +++ b/styles/nav.css @@ -2,7 +2,7 @@ /*---------------------------------------------*/ /*NAVBAR*/ body nav { - border-bottom: 1px solid var(--color-lines); + border-bottom: 1px solid var(--color-lines-nav); } body nav * { display: flex; diff --git a/styles/skeleton.css b/styles/skeleton.css index 8ba8dd9..dc88658 100644 --- a/styles/skeleton.css +++ b/styles/skeleton.css @@ -1,71 +1,20 @@ -/*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*/ +/*SKELETON*/ +/*the position, size, and orientation of all elements without style or spaces*/ body, body * { display: flex; + /*by default all elements are verticals*/ 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(--color-back-base); } - -/*NAVBAR*/ body nav { flex-direction: row; /*we have to set the height to use the height % for childs elements*/ @@ -73,49 +22,30 @@ body nav { background-color: var(--color-back-base); z-index: 10; } - -/*CONTAINER*/ body .container_main { - margin: auto; flex-direction: row; + /*the page is designed for a maximum screen*/ 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)); -} -/* asides elements only have width if they have a child*/ -body aside.page_content .table_box { - width: var(--aside-left-width); - 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 var(--color-lines); -} -/*to put space between elements*/ -body aside.page_content .table_box > * { - margin-bottom: var(--gap-unit); + height: calc(100vh - var(--nav-height) - 1px); } /*MAIN*/ body main { + padding: calc(var(--gap-unit) / 2); } body main > * { margin: var(--gap-unit) 0px; } body main h1 { padding: 70px 0px; - border-bottom: 1px solid var(--color-lines); + border-bottom: 1px solid var(--color-lines-main); } body main h2 { padding: 10px 0px; - border-bottom: 1px solid var(--color-lines); + border-bottom: 1px solid var(--color-lines-main); } /*TITLE*/ @@ -131,6 +61,7 @@ body main .page_title .date { /*ASIDE RIGHT RELATIVES*/ /* aside right is for links to relatives content*/ body aside.relative_content { + padding: calc(var(--gap-unit) / 2); } /* asides elements only have width if they have a child*/ body aside.relative_content *:first-child { @@ -140,10 +71,10 @@ body aside.relative_content .relative_box { margin: var(--aside-margin); padding: var(--gap-unit); width: fit-content; - border: 1px solid var(--color-lines); + border: 1px solid var(--color-lines-aside-r); } body aside.relative_content .box_name { - border-bottom: 1px solid var(--color-lines); + border-bottom: 1px solid var(--color-lines-aside-r); padding-bottom: var(--gap-unit); } body aside.relative_content .relative_box > * { @@ -153,7 +84,7 @@ body aside.relative_content .relative_box > * { /*FOOTER*/ body footer.page_footer { height: 100px; - border-top: 1px solid var(--color-lines); + border-top: 1px solid var(--color-lines-nav); }