From 59c72f87dc725816e6c350757c0291978c598bcf Mon Sep 17 00:00:00 2001 From: hugogogo Date: Thu, 11 Mar 2021 14:14:09 +0100 Subject: [PATCH] reglages navbar --- pages/litterall.html | 3 ++- styles/nav.css | 37 +++++++++++++++++++++++++++++++++++++ styles/skeleton.css | 41 +---------------------------------------- styles/style.css | 9 +++++++-- styles/text.css | 6 ++++++ 5 files changed, 53 insertions(+), 43 deletions(-) create mode 100644 styles/nav.css diff --git a/pages/litterall.html b/pages/litterall.html index 8704ddc..9568acf 100644 --- a/pages/litterall.html +++ b/pages/litterall.html @@ -15,8 +15,9 @@ diff --git a/styles/nav.css b/styles/nav.css new file mode 100644 index 0000000..9710dd8 --- /dev/null +++ b/styles/nav.css @@ -0,0 +1,37 @@ + +/*---------------------------------------------*/ +/*NAVBAR*/ +body nav { + border-bottom: 1px solid lightgrey; +} +body nav * { + display: flex; + flex-direction: row; + margin: auto; +} +body nav .nav_left, body nav .nav_right { + margin: 2px auto; +} +/* nav_left is used for links to pages*/ +body nav .nav_left { + margin-left: 2px; + padding-left: 20px; + padding-right: 20px; +} +body nav .nav_left a { + height: 100%; + margin: auto 20px; +} +body nav .nav_left img { + height: 100%; +} +/* nav_right is used for actions such as connection, search or language*/ +body nav .nav_right { + margin-right: 2px; +} +/* links looks on hover or click*/ +body nav a:hover, body nav a:focus { + background-color: lightgrey; +} + + diff --git a/styles/skeleton.css b/styles/skeleton.css index 9e72980..c721838 100644 --- a/styles/skeleton.css +++ b/styles/skeleton.css @@ -70,47 +70,9 @@ 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; -} -/* special settings for the logo*/ -body nav a.nav_logo { - padding: 0px; - width: var(--aside-left-width); -} -body nav a.nav_logo img { - height: calc(var(--nav-height) - 5px); -} -/* 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; -} /*CONTAINER*/ body .container_main { @@ -125,11 +87,10 @@ body .container_main { 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)); + 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; diff --git a/styles/style.css b/styles/style.css index efcc900..e2d637d 100644 --- a/styles/style.css +++ b/styles/style.css @@ -4,10 +4,15 @@ @import url(./reset.css); @import url(./global.css); @import url(./skeleton.css); + +@import url(./nav.css); +@import url(./aside_left.css); +@import url(./main.css); +@import url(./aside_right.css); +@import url(./footer.css); + @import url(./fonts.css); @import url(./text.css); -@import url(./header.css); -@import url(./footer.css); @import url(./images.css); diff --git a/styles/text.css b/styles/text.css index 8d559cb..1c8f3e1 100644 --- a/styles/text.css +++ b/styles/text.css @@ -8,6 +8,12 @@ h1, h2, h3, h4, h5, h6 { a, p, li { font-family: var(--font-texts), var(--font-fallback), sans-serif; } +nav p { + font-family: var(--font-titles), var(--font-fallback), sans-serif; +} +.table_box p { + font-family: var(--font-titles), var(--font-fallback), sans-serif; +} /*colors*/ /*links when they are part of a text*/ p a, p a:link {