From a28765ca8ecfe8f2cb3e8e823dd66c374bbc46ba Mon Sep 17 00:00:00 2001 From: MohitSaini Date: Mon, 22 May 2023 11:06:08 +0530 Subject: [PATCH] Improved the design of Navbar #596 --- examples/demo.css | 108 +++++++++++++++++++++++++++++----------------- index.html | 11 ++--- 2 files changed, 75 insertions(+), 44 deletions(-) diff --git a/examples/demo.css b/examples/demo.css index 9bd8ebb7..75b061e0 100644 --- a/examples/demo.css +++ b/examples/demo.css @@ -1,26 +1,39 @@ /* https://github.com/theleagueof/league-spartan */ @font-face { font-family: 'League Spartan'; - src: url('https://cdn.jsdelivr.net/npm/fontsource-league-spartan@3/files/league-spartan-latin-600-normal.woff2') format('woff2'), - url('https://cdn.jsdelivr.net/npm/fontsource-league-spartan@3/files/league-spartan-latin-600-normal.woff') format('woff'); + src: url('https://cdn.jsdelivr.net/npm/fontsource-league-spartan@3/files/league-spartan-latin-600-normal.woff2') format('woff2'), + url('https://cdn.jsdelivr.net/npm/fontsource-league-spartan@3/files/league-spartan-latin-600-normal.woff') format('woff'); font-weight: bold; font-style: normal; } body { - padding: 20px; - margin: 0 auto 20px; - max-width: 1000px; - background: #f8f8fa; + padding: 20px; + margin: 0 auto 20px; + max-width: 1000px; + background: #f8f8fa; } /* Navbar CSS */ -#logo-img{ +#logo-img { height: 100px; } nav { z-index: 100; + /* background-color: black; */ + color: white; +} + +nav::before { + content: ""; + background-color: rgb(81, 80, 80); + border-radius: 150px; + position: absolute; + top: 0px; + width: 100%; + height: 100px; + z-index: -1; } nav:after { @@ -34,6 +47,7 @@ nav ul { list-style: none; margin-right: 40px; position: relative; + top: 16px; } @@ -46,23 +60,26 @@ nav ul li a { color: #a1a1a1; text-decoration: none; line-height: 70px; - font-size: 15px; + font-size: 20px; padding: 8px 15px; } nav ul li a:hover { text-decoration: none; - color: #669dc9; - box-shadow: 0 0 5px #669dc9, - 0 0 5px #669dc9; -} + color: white; + /* box-shadow: 0 0 5px #669dc9,0 0 5px #669dc9; */ +} -nav ul ul li{ - background-color: #f8f8fa; +nav ul ul li { + background-color: rgb(81, 80, 80); +} + +nav ul ul li a{ + font-size: 15px; } nav ul ul li a:hover { - color: #34A7C1; + color: white; box-shadow: none; } @@ -73,7 +90,7 @@ nav ul ul { opacity: 0; visibility: hidden; transition: top .3s; - border-top: 3px solid #aaa3a3; + /* border-top: 3px solid #aaa3a3; */ } nav ul ul ul { @@ -92,7 +109,7 @@ nav ul ul li { width: 200px; float: none; display: list-item; - border-bottom: 1px solid rgba(0, 0, 0, 0.4); + /* border-bottom: 1px solid rgba(0, 0, 0, 0.4); */ } ul { @@ -106,16 +123,17 @@ a { nav ul ul li a { line-height: 50px; } + /* Navbar ends */ /* dependency chart */ -#dependency-div{ +#dependency-div { text-align: center; } -.dependency-chart{ +.dependency-chart { border-radius: 8px; width: 100%; } @@ -132,24 +150,26 @@ nav ul ul li a { height: 5px; } -h1, h2, .section h3 { - font-family: 'League Spartan'; - color: #445; - padding-top: 20px; - text-align: center; - line-height: 1.3em; +h1, +h2, +.section h3 { + font-family: 'League Spartan'; + color: #445; + padding-top: 20px; + text-align: center; + line-height: 1.3em; } -.row.section img { - max-width: 90%; +.row.section img { + max-width: 90%; } .row.section p { - margin-bottom: 30px; + margin-bottom: 30px; } .header { - text-align: center; + text-align: center; } #back2Top { @@ -178,6 +198,7 @@ h1, h2, .section h3 { color: #000; box-shadow: -1px 1px 1px 1px lightgrey; } + #back2Top:active { box-shadow: none; } @@ -213,7 +234,7 @@ h1, h2, .section h3 { background-color: #f5f5f5; border: 1px solid #e3e3e3; border-radius: 4px; - box-shadow: inset 0 1px 1px rgba(0,0,0,.05); + box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05); } @@ -267,10 +288,12 @@ h1, h2, .section h3 { display: inline-block; height: 100%; } + .recent-contribs-dropdown { margin-right: 10px; text-align: center; } + .recent-contribs-show-dropdown { width: 12em; } @@ -289,6 +312,7 @@ h1, h2, .section h3 { #dropdownMenuButtonRCS { font-weight: bolder; } + #dropdownMenuButtonRC, #dropdownMenuButtonRCS { font-family: 'Open sans', serif; @@ -340,7 +364,8 @@ h1, h2, .section h3 { } -.pics img, .avatars img { +.pics img, +.avatars img { margin: 5px 5px; } @@ -361,8 +386,9 @@ h1, h2, .section h3 { overflow: scroll; max-height: 1000px; } + /* Languages list */ -.language{ +.language { margin-bottom: 20px; padding: 10px; background-color: rgba(221, 221, 221, 0.493); @@ -373,8 +399,8 @@ h1, h2, .section h3 { flex-wrap: wrap; } -.conatiner-language{ - font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; +.conatiner-language { + font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 14px; line-height: 1.42857143; color: #333; @@ -387,11 +413,12 @@ h1, h2, .section h3 { position: relative; display: block; } -.repo-name{ + +.repo-name { width: 76%; } -.badge{ +.badge { border-radius: 5px; } @@ -432,6 +459,7 @@ h1, h2, .section h3 { border-radius: 1em; background-color: rgba(231, 226, 219, 0.548); } + /* #refresh-status { margin: 0; @@ -452,13 +480,15 @@ h1, h2, .section h3 { transform: rotate(100deg) scale3d(0.97, 0.99, 0.96); cursor: pointer; } -.sort-options{ + +.sort-options { width: auto; height: 2em; text-align: center; cursor: pointer; } -.side-display{ + +.side-display { display: flex; justify-content: space-between; } @@ -469,4 +499,4 @@ h1, h2, .section h3 { .links { margin: 10px 0; } -} +} \ No newline at end of file diff --git a/index.html b/index.html index 4f603fcf..c2a3a210 100644 --- a/index.html +++ b/index.html @@ -50,11 +50,12 @@ Fork me on GitHub +