diff options
| author | ADRN <adrien@luxeylab.net> | 2021-10-18 01:12:49 +0200 |
|---|---|---|
| committer | ADRN <adrien@luxeylab.net> | 2021-10-18 01:15:37 +0200 |
| commit | e4f87c46ce5f6e7516888cb45d4aba75de88a716 (patch) | |
| tree | 8be1fed586a8ec28ae4a8d2d9b1afa991556ca08 | |
| parent | 88f618e51e1f4a4a762c46f37dea1011b8286ca9 (diff) | |
| download | design-e4f87c46ce5f6e7516888cb45d4aba75de88a716.tar.gz design-e4f87c46ce5f6e7516888cb45d4aba75de88a716.zip | |
styling nav
| -rw-r--r-- | assets/css/blueprint.css | 41 | ||||
| -rw-r--r-- | blueprint/index.html | 38 |
2 files changed, 42 insertions, 37 deletions
diff --git a/assets/css/blueprint.css b/assets/css/blueprint.css index 83ddda8..f4452d6 100644 --- a/assets/css/blueprint.css +++ b/assets/css/blueprint.css @@ -4,12 +4,12 @@ @import url("../fonts/firasans-regular.css"); html, body { - background-color: white; - font-family: "Space Mono", Monaco, monospace !important; + background-color: white; + font-family: "Space Mono", Monaco, monospace !important; } p { - font-family: "Fira Sans"; + font-family: "Fira Sans"; } header { @@ -26,28 +26,33 @@ header { } header > p { - width: 40%; - position: relative; - left: 55%; - bottom: -75%; - - color: white; - /* color | offset-x | offset-y | blur-radius */ - text-shadow: black 0px 0px 4px; - - text-align: right; + width: 40%; + position: relative; + left: 55%; + bottom: -75%; + text-align: right; } -nav { - position: fixed; +header > nav { + background: none; + position: fixed; + width: 100vw; +} +nav.nav a { + font-weight: bold; } +header > p, header > nav.nav a { + color: white; + /* color | offset-x | offset-y | blur-radius */ + text-shadow: black 0px 0px 4px; +} footer { - border-top: black solid 2px; - margin-top: 3rem; - padding-top: 2rem; + border-top: black solid 2px; + margin-top: 3rem; + padding-top: 2rem; }
\ No newline at end of file diff --git a/blueprint/index.html b/blueprint/index.html index 3ba8ec7..ed4fa4a 100644 --- a/blueprint/index.html +++ b/blueprint/index.html @@ -14,26 +14,26 @@ </head> <body> - <nav> - <a href="#" class="home"><h1>Deuxfleurs</h1></a> - - <ul> - <li> - <a href="#">Documentation</a> - </li> - <li> - <a href="#">Blog</a> - </li> - <li> - <a href="#">Mon compte</a> - </li> - </ul> - </nav> - <header> - <!-- <img - src="assets/images/illustration-ronce_1200x765px.png" - alt="Un blaireau fait découvrir la cabane dans les arbres à son amie la souris"> --> + <nav class="nav"> + <div class="nav-left"> + <a href="#" class="home"><h1>Deuxfleurs</h1></a> + </div> + + <div class="nav-right"> + <ul> + <li> + <a href="#">Documentation</a> + </li> + <li> + <a href="#">Blog</a> + </li> + <li> + <a href="#">Mon compte</a> + </li> + </ul> + </div> + </nav> <p> Nous sommes un hébergeur associatif expérimental.<br> |