From 55b88e4ea897971cfd10520b571ceed6d3272ab0 Mon Sep 17 00:00:00 2001 From: Harsh Lathwal Date: Sun, 6 May 2018 23:28:47 +0530 Subject: [PATCH 1/3] created better nav bar --- css/style.css | 112 ++++++++++++++++++++++++++++++++++++++++++-------- index.html | 70 +++++++++++++++++++++++++++---- 2 files changed, 156 insertions(+), 26 deletions(-) diff --git a/css/style.css b/css/style.css index e94cd27..24cff3d 100644 --- a/css/style.css +++ b/css/style.css @@ -44,35 +44,113 @@ body { } .bottom-bar { - font-family: 'Courier New', Courier, monospace; position: absolute; - background: #white; left: 0; bottom: 0; height: 50px; width: 100%; -/* overflow: hidden;*/ } -.bottom-bar ul { - margin: 0% 25% 0 25%; +/* helpers/accessibility.css */ + +.invisible { + left: -999px; + overflow: hidden; + position: absolute; + top: -999px; +} + +/* helpers/align.css */ + +.align { + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + display: -webkit-box; + display: -ms-flexbox; + display: flex; +} + +/* modules/anchor.css */ + +a { + outline: 0; } -.bottom-bar ul li { - border-left: 2px solid white; - border-right: 2px solid white; +/* modules/icon.css */ + +.icons { + display: none; +} + +.icon { display: inline-block; - margin: 5px; + fill: #97adc6; + font-size: 16px; + font-size: 1rem; + height: 1em; + vertical-align: middle; + width: 1em; +} + +.icon--2x { + font-size: 32px; + font-size: 2rem; +} + +/* modules/image.css */ + +svg { + max-width: 100%; } -.bottom-bar ul li a{ - margin: 5px; - color: rgb(185, 175, 175); +/* modules/navigation.css */ + +.navigation { + background-color: #f0f6ff; + border-radius: 0.25rem; + -webkit-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, .3); + box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, .3); +} + +.navigation ul { + list-style: none; + margin: 0; + padding: 0; +} + +.navigation a { + display: block; + padding: 24px; + padding: 1.5rem; + position: relative; text-decoration: none; } -.bottom-bar ul li a:hover{ - color: rgb(7, 6, 6); - background: white; - transition: all 0.3s ease; -} \ No newline at end of file +.navigation a:focus::after, +.navigation a:hover::after { + opacity: 1; +} + +.navigation a::after { + -webkit-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, .3); + box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, .3); + content: ''; + height: 100%; + left: 0; + opacity: 0; + position: absolute; + top: 0; + -webkit-transition: opacity 0.3s; + transition: opacity 0.3s; + width: 100%; +} + +.navigation--inline ul { + display: -webkit-box; + display: -ms-flexbox; + display: flex; +} diff --git a/index.html b/index.html index fd8e5fc..fb90b69 100644 --- a/index.html +++ b/index.html @@ -38,19 +38,71 @@

- - -
+
+
+
+ +
+
+ + + + + + + + + + + + + + + + + + + + + + - \ No newline at end of file + From cd6490377bbcbc24951030c4cecb7f2e3bb7ef52 Mon Sep 17 00:00:00 2001 From: Harsh Lathwal Date: Sat, 12 May 2018 22:31:50 +0530 Subject: [PATCH 2/3] added nav bar icons by @Ananthavijay --- index.html | 51 ++++++++++++++++++++++++++++++++++++++++++++------- 1 file changed, 44 insertions(+), 7 deletions(-) diff --git a/index.html b/index.html index fb90b69..913150e 100644 --- a/index.html +++ b/index.html @@ -78,25 +78,62 @@ + - - + - - + - + - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - From 2554a0f3580b2d1a08f28bb540cbdb4c06aea86f Mon Sep 17 00:00:00 2001 From: Harsh Lathwal Date: Sat, 12 May 2018 22:52:26 +0530 Subject: [PATCH 3/3] added nav bar colors by @Ananthavijay --- css/style.css | 15 ++++++++++++++- index.html | 10 +++++----- 2 files changed, 19 insertions(+), 6 deletions(-) diff --git a/css/style.css b/css/style.css index 24cff3d..64c009a 100644 --- a/css/style.css +++ b/css/style.css @@ -110,7 +110,7 @@ svg { /* modules/navigation.css */ .navigation { - background-color: #f0f6ff; + background-color: rgba(255, 255, 255, 1); border-radius: 0.25rem; -webkit-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, .3); box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, .3); @@ -154,3 +154,16 @@ svg { display: -ms-flexbox; display: flex; } +.Telegram:hover svg { + fill: #0088cc +} +.Gitter:hover svg { + fill: #ed1965 +} +.Github:hover svg { + fill: #000000 +} +.Join:hover svg { + fill: #0078D7 +} + diff --git a/index.html b/index.html index 913150e..e205030 100644 --- a/index.html +++ b/index.html @@ -6,7 +6,7 @@ Yogdaan - + @@ -51,25 +51,25 @@ -->
  • - +
  • - +
  • - +
  • - +