From 5d7c23c8830b4e0dc014f77c33ccc712f8f40bd2 Mon Sep 17 00:00:00 2001 From: desirekaleba Date: Fri, 30 Oct 2020 17:05:37 +0300 Subject: [PATCH] feat: Sticky Navbar with active page Make Navbar sticky and make sure the current or active page is underlined for usability and user friendliness --- css/style.css | 33 +++++++++++++++++++++++---------- docs.html | 4 ++-- features.html | 4 ++-- index.html | 5 +++-- 4 files changed, 30 insertions(+), 16 deletions(-) diff --git a/css/style.css b/css/style.css index b451c83..efd7fdf 100644 --- a/css/style.css +++ b/css/style.css @@ -62,6 +62,10 @@ pre { background-color: var(--primary-color); color: #fff; height: 70px; + position: sticky; + top: 0; + left: 0; + z-index: 105; } .navbar ul { @@ -74,10 +78,18 @@ pre { margin: 0 5px; } -.navbar a:hover { +.navbar a.current { border-bottom: 2px #fff solid; } +.navbar a:hover { + border-bottom: 2px var(--secondary-color) solid; +} + +.navbar .logo a:hover { + border-bottom: none; +} + .navbar .flex { justify-content: space-between; } @@ -177,7 +189,7 @@ pre { grid-template-rows: repeat(2, 1fr); } -.cli .grid > *:first-child { +.cli .grid>*:first-child { grid-column: 1 / span 2; grid-row: 1 / span 2; } @@ -220,7 +232,7 @@ pre { justify-self: flex-end; } -.features-main .card > i { +.features-main .card>i { margin-right: 20px; } @@ -228,11 +240,11 @@ pre { padding: 30px; } -.features-main .grid > *:first-child { +.features-main .grid>*:first-child { grid-column: 1 / span 3; } -.features-main .grid > *:nth-child(2) { +.features-main .grid>*:nth-child(2) { grid-column: 1 / span 2; } @@ -305,6 +317,7 @@ pre { /* Tablets and under */ @media (max-width: 768px) { + .grid, .showcase .grid, .stats .grid, @@ -332,7 +345,7 @@ pre { animation: slideInFromBottom 1s ease-in; } - .cli .grid > *:first-child { + .cli .grid>*:first-child { grid-column: 1; grid-row: 1; } @@ -349,8 +362,8 @@ pre { justify-self: center; } - .features-main .grid > *:first-child, - .features-main .grid > *:nth-child(2) { + .features-main .grid>*:first-child, + .features-main .grid>*:nth-child(2) { grid-column: 1; } } @@ -369,8 +382,8 @@ pre { padding: 10px; background-color: rgba(0, 0, 0, 0.1); } - + .showcase-form { width: 300px; } -} +} \ No newline at end of file diff --git a/docs.html b/docs.html index 3c18946..3f3b6c4 100644 --- a/docs.html +++ b/docs.html @@ -12,12 +12,12 @@
-

Loruki.

+

Loruki.

diff --git a/features.html b/features.html index 8d22afe..55b1d51 100644 --- a/features.html +++ b/features.html @@ -12,11 +12,11 @@
-

Loruki.

+

Loruki.

diff --git a/index.html b/index.html index 2f767ae..26b3f85 100644 --- a/index.html +++ b/index.html @@ -3,6 +3,7 @@ + @@ -12,10 +13,10 @@
-

Loruki.

+

Loruki.