Skip to content

Commit

Permalink
New Navbar added with the logo of PublicLab (#420)
Browse files Browse the repository at this point in the history 
* New Navbar added with the logo of PublicLab

* Changes in Navbar

* Set the size of The Logo-Image in Navbar section

* fix the navbar in dark mode
  • Loading branch information
@YogeshSharma01
YogeshSharma01 authored Jan 29, 2021
1 parent 8a108e0 commit 8b2530f
Show file tree
Hide file tree
Showing 4 changed files with 161 additions and 11 deletions.
90 changes: 90 additions & 0 deletions examples/demo.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,96 @@ body {
background: #f8f8fa;
}

/* Navbar CSS */

nav {
z-index: 100;
}

nav:after {
content: '';
clear: both;
display: table;
}

nav ul {
float: right;
list-style: none;
margin-right: 40px;
position: relative;
}


nav ul li {
display: inline-block;
margin: 0 5px;
}

nav ul li a {
color: #a1a1a1;
text-decoration: none;
line-height: 70px;
font-size: 15px;
padding: 8px 15px;
}

nav ul li a:hover {
text-decoration: none;
color: #669dc9;
box-shadow: 0 0 5px #669dc9,
0 0 5px #669dc9;
}

nav ul ul li{
background-color: #f8f8fa;
}

nav ul ul li a:hover {
color: #34A7C1;
box-shadow: none;
}

nav ul ul {
position: absolute;
top: 90px;
opacity: 0;
visibility: hidden;
transition: top .3s;
border-top: 3px solid #aaa3a3;
}

nav ul ul ul {
border-top: none;
}

nav ul li:hover>ul {
top: 70px;
opacity: 1;
visibility: visible;
}

nav ul ul li {
position: relative;
margin: 0px;
width: 200px;
float: none;
display: list-item;
border-bottom: 1px solid rgba(0, 0, 0, 0.4);
}

ul {
padding: 0;
}

a {
text-decoration: none;
}

nav ul ul li a {
line-height: 50px;
}
/* Navbar ends */

#forkMe-ribbon {
width: 10px;
height: 10px;
Expand Down
14 changes: 13 additions & 1 deletion examples/demo.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,17 @@
document.addEventListener('DOMContentLoaded', function () {

/* Navbar scroll to that perticular section of page */
$('.navbar a').on('click', function(e){
if(this.hash !== ''){
e.preventDefault();

const hash = this.hash;
$('html,body').animate({
scrollTop: $(hash).offset().top
},800);
}
});


/*Scroll to top when arrow up clicked BEGIN*/
$(window).scroll(function() {
let height = $(window).scrollTop();
Expand Down
Binary file added images/Boots-ground-02.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
68 changes: 58 additions & 10 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,6 @@
<link rel="manifest" href="./manifest.json">
<script src="./src/scripts/pwainit.js"></script>


<script src="node_modules/jquery/dist/jquery.min.js"></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="./node_modules/node-snackbar/dist/snackbar.min.js"></script>
Expand All @@ -42,12 +41,61 @@
<link href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap" rel="stylesheet">
<link rel="stylesheet" href="examples/demo.css">
<link rel="stylesheet" href="examples/themes.css">

<!-- Navbar start -->
<div id='container'>
<div id='forkMe-ribbon'><a href="https://github.com/publiclab/community-toolbox" >
<img src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png"alt="Fork me on GitHub"></a>
</div>
</div>
<div id='forkMe-ribbon'><a href="https://github.com/publiclab/community-toolbox" >
<img src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png"alt="Fork me on GitHub"></a>
</div>
</div>
<nav class="navbar">
<img id="logo-img" src="./images/Boots-ground-02.png" alt="publiclab-logo" style="height: 100px">
<ul>
<li class="list-i">
<a href="#">LEARN</a>
<ul>
<li><a class="line" href="https://github.com/publiclab/plots2/blob/master/README.md">Get Started</a>
</li>
<li><a class="line" href="https://github.com/publiclab/plots2/labels/support'">Assist Someone</a>
</li>
<li><a class="line"
href="https://publiclab.org/notes/warren/10-31-2016/create-a-welcoming-first-timers-only-issue-to-invite-new-software-contributors">Create
Your FTO Issue</a></li>
</ul>
</li>
<li class="list-i">
<a href="#">ISSUES</a>
<ul>
<li><a class="line" href="#fto-issue">FTO Issues</a></li>
<li><a class="line" href="#stale-head">Stale Issues</a></li>
</ul>
</li>
<li class="list-i">
<a href="#">PARTICIPANTS</a>
<ul>
<li><a class="line" href="#candidate">Candidates</a></li>
<li><a class="line" href="#fto-author">FTO Authors</a></li>
<li><a class="line" href="#contributer">Contributers</a></li>
</ul>
</li>
<li class="list-i"><a class="line" href="https://publiclab.org/chat">CHATROOM</a></li>
<li class="list-i">
<a class="line" href="#">MORE</a>
<ul>
<li><a class="line" href="https://github.com/publiclab/community-toolbox">Source Code</a></li>
<li><a class="line" href="https://publiclab.org/conduct">Conduct</a></li>
<li><a class="line" href="https://guides.github.com/activities/hello-world/">New To GitHub?</a></li>
<li><a class="line" href="https://github.com/search?q=label%3Afirst-timers-only+is%3Aissue+is%3Aopen+user%3Apubliclab&ref=simplesearch">Selection of
Issues</a></li>
<li><a class="line"
href="https://publiclab.org/notes/warren/11-08-2016/help-public-lab-s-software-grow-by-joining-a-supportive-team">Support</a>
</li>
<li><a class="line" href="https://github.com/search?q=label%3Ahelp-wanted+is%3Aissue+is%3Aopen+user%3Apubliclab&ref=simplesearch">Challenges</a>
</li>
</ul>
</li>
</ul>
</nav>
<!-- Navbar ends -->

<div class="container-fluid">
<header class="text-center">
Expand Down Expand Up @@ -144,7 +192,7 @@ <h3>3.<br />Create a welcoming issue for someone else</h3>

<br />

<h2><span class=" newcomer-issues">first timers only</span> issues</h2>
<h2><span class=" newcomer-issues" id="fto-issue">first timers only</span> issues</h2>

<p>Here are <a id="newcomer-issues-link" href="https://github.com/publiclab/plots2/labels/first-timers-only">a selection</a> of issues we've <a class=" guidelines-link" href="https://publiclab.org/n/13667">made especially for first-timers</a>. We're here to help, so just ask if one looks interesting, by leaving a comment!</p>

Expand All @@ -158,7 +206,7 @@ <h2 id="whats-next">What's next?</h2>

<p>In "<span class=" newcomer-like-issues">candidates</span>" below, there are some issues we think would make good <b><span class=" newcomer-issues">first-timers-only</span></b> issues, but haven't finished formatting. They could make a good second-time contribution!</p>

<h2 class=" newcomer-like-issues">Candidates</h2>
<h2 class=" newcomer-like-issues" id="candidate">Candidates</h2>

<p>We put a lot of work into our <span class=" newcomer-issues">first-timer-only</span> issues. But if we haven't been able to prepare any recently, here's a set of <span class=" newcomer-like-issues">candidates</span> we haven't yet had time to prepare, but which have most of the needed information. (Also: Learn how to <a href="https://publiclab.org/n/13667">help turn these into <span class=" newcomer-issues">first-timers-only</span> issues</a> to help keep welcoming people in!</p>

Expand All @@ -174,7 +222,7 @@ <h2>You're now an expert on being a newcomer!</h2>

<hr />

<h2>FTO Authors</h2>
<h2 id="fto-author">FTO Authors</h2>

<p>These people took some time out of their busy schedule to help in welcoming newcomers by creating FTO issues: </p>

Expand Down Expand Up @@ -262,7 +310,7 @@ <h2 class="recent-contributors-head">Recent Contributors</h2>
</div>
</div>

<h2 class="contributors-head">Contributors</h2>
<h2 class="contributors-head" id="contributer">Contributors</h2>
<div class="contribs">
<div style="display: flex; justify-content: space-between">
<p>This project was made possible by many contributors, including the following GitHub users:</p>
Expand Down

0 comments on commit 8b2530f

Please sign in to comment.