Skip to content

Commit c166521

Browse files
xeon-zoltxeon-zolt
authored
created better nav bar (#14)
* created a better nav bar * added nav bar icons by @Ananthavijay * added nav bar colors by @Ananthavijay @gabru-md I am merging it if you feel things are not right please create a new issue (cause changes are not major )
1 parent 93e88f3 commit c166521

File tree

2 files changed

+207
-27
lines changed

2 files changed

+207
-27
lines changed

‎css/style.css‎

Lines changed: 108 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -44,35 +44,126 @@ body {
4444
}
4545

4646
.bottom-bar {
47-
font-family: 'Courier New', Courier, monospace;
4847
position: absolute;
49-
background: #white;
5048
left: 0;
5149
bottom: 0;
5250
height: 50px;
5351
width: 100%;
54-
/* overflow: hidden;*/
5552
}
5653

57-
.bottom-bar ul {
58-
margin: 0% 25% 0 25%;
54+
/* helpers/accessibility.css */
55+
56+
.invisible {
57+
left: -999px;
58+
overflow: hidden;
59+
position: absolute;
60+
top: -999px;
61+
}
62+
63+
/* helpers/align.css */
64+
65+
.align {
66+
-webkit-box-pack: center;
67+
-ms-flex-pack: center;
68+
justify-content: center;
69+
-webkit-box-align: center;
70+
-ms-flex-align: center;
71+
align-items: center;
72+
display: -webkit-box;
73+
display: -ms-flexbox;
74+
display: flex;
75+
}
76+
77+
/* modules/anchor.css */
78+
79+
a {
80+
outline: 0;
81+
}
82+
83+
/* modules/icon.css */
84+
85+
.icons {
86+
display: none;
5987
}
6088

61-
.bottom-bar ul li {
62-
border-left: 2px solid white;
63-
border-right: 2px solid white;
89+
.icon {
6490
display: inline-block;
65-
margin: 5px;
91+
fill: #97adc6;
92+
font-size: 16px;
93+
font-size: 1rem;
94+
height: 1em;
95+
vertical-align: middle;
96+
width: 1em;
97+
}
98+
99+
.icon--2x {
100+
font-size: 32px;
101+
font-size: 2rem;
102+
}
103+
104+
/* modules/image.css */
105+
106+
svg {
107+
max-width: 100%;
108+
}
109+
110+
/* modules/navigation.css */
111+
112+
.navigation {
113+
background-color: rgba(255, 255, 255, 1);
114+
border-radius: 0.25rem;
115+
-webkit-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, .3);
116+
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, .3);
117+
}
118+
119+
.navigation ul {
120+
list-style: none;
121+
margin: 0;
122+
padding: 0;
66123
}
67124

68-
.bottom-bar ul li a{
69-
margin: 5px;
70-
color: rgb(185, 175, 175);
125+
.navigation a {
126+
display: block;
127+
padding: 24px;
128+
padding: 1.5rem;
129+
position: relative;
71130
text-decoration: none;
72131
}
73132

74-
.bottom-bar ul li a:hover{
75-
color: rgb(7, 6, 6);
76-
background: white;
77-
transition: all 0.3s ease;
78-
}
133+
.navigation a:focus::after,
134+
.navigation a:hover::after {
135+
opacity: 1;
136+
}
137+
138+
.navigation a::after {
139+
-webkit-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, .3);
140+
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, .3);
141+
content: '';
142+
height: 100%;
143+
left: 0;
144+
opacity: 0;
145+
position: absolute;
146+
top: 0;
147+
-webkit-transition: opacity 0.3s;
148+
transition: opacity 0.3s;
149+
width: 100%;
150+
}
151+
152+
.navigation--inline ul {
153+
display: -webkit-box;
154+
display: -ms-flexbox;
155+
display: flex;
156+
}
157+
.Telegram:hover svg {
158+
fill: #0088cc
159+
}
160+
.Gitter:hover svg {
161+
fill: #ed1965
162+
}
163+
.Github:hover svg {
164+
fill: #000000
165+
}
166+
.Join:hover svg {
167+
fill: #0078D7
168+
}
169+

‎index.html‎

Lines changed: 99 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
<title>Yogdaan</title>
77
<meta name="viewport" content="width=device-width, initial-scale=1">
88

9-
<link rel="stylesheet" href="./css/style.css">
9+
<link rel="stylesheet" href="css/style.css">
1010

1111
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
1212

@@ -38,19 +38,108 @@
3838
</p>
3939
</section>
4040

41-
42-
<!-- Bottom bar -->
43-
<section class="bottom-bar">
41+
<section class="bottom-bar">
42+
<section class="align">
43+
<nav class="navigation navigation--inline">
4444
<ul>
45-
<li><a href="https://orgmanager.miguelpiedrafita.com/join/38074740" target="_blank">Join Us</a></li>
46-
<li><a href="https://t.me/yogdaan" target="_blank">Telegram</a></li>
47-
<li><a href="https://gitter.im/yogdaan/Lobby" target="_blank">Gitter</a></li>
48-
<li><a href="https://github.com/yogdaan" target="_blank">Github</a></li>
45+
<!--
46+
<li>
47+
<a href="#">
48+
<svg class="icon icon--2x"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#home">
49+
<span class="invisible">Home</span>
50+
</a>
51+
</li>
52+
-->
53+
<li>
54+
<a href="#" class="Telegram">
55+
<svg class="icon icon--2x"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#Telegram">
56+
<span class="invisible">Telegram</span>
57+
</a>
58+
</li>
59+
<li>
60+
<a href="#" class="Gitter">
61+
<svg class="icon icon--2x"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#Gitter">
62+
<span class="invisible">Gitter</span>
63+
</a>
64+
</li>
65+
<li>
66+
<a href="https://github.com/yogdaan" class="Github">
67+
<svg class="icon icon--2x"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#Github">
68+
<span class="invisible">Github</span>
69+
</a>
70+
</li>
71+
<li>
72+
<a href="#" class="Join">
73+
<svg class="icon icon--2x"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#Join">
74+
<span class="invisible">Join</span>
75+
</a>
76+
</li>
4977
</ul>
50-
</section>
78+
</nav>
79+
</section>
80+
</section>
81+
82+
<svg xmlns="http://www.w3.org/2000/svg" class="icons">
83+
<symbol id="Github" viewBox="0 0 92 92">
84+
85+
<path stroke="null" id="svg_1" d="m46.5,3c-24.02288,0 -43.5,19.24321 -43.5,42.97757c0,20.13857 14.036,36.98936 32.9585,41.65243c-0.203,-0.5802 -0.3335,-1.25351 -0.3335,-2.08799l0,-7.34558c-1.76537,0 -4.72337,0 -5.4665,0c-2.97613,0 -5.62237,-1.26426 -6.90563,-3.6137c-1.42462,-2.61089 -1.67112,-6.60422 -5.20187,-9.04678c-1.04763,-0.81299 -0.25013,-1.74059 0.957,-1.61524c2.22938,0.62317 4.07813,2.13455 5.81813,4.37655c1.73275,2.24558 2.54837,2.75415 5.7855,2.75415c1.56963,0 3.91862,-0.08954 6.12987,-0.43336c1.189,-2.98336 3.24437,-5.73034 5.7565,-7.02683c-14.4855,-1.47198 -21.39838,-8.59193 -21.39838,-18.2583c0,-4.16166 1.79437,-8.18723 4.843,-11.57887c-1.0005,-3.36658 -2.25838,-10.23224 0.38425,-12.84671c6.51775,0 10.45813,4.17599 11.40425,5.30415c3.248,-1.09951 6.815,-1.72268 10.56325,-1.72268c3.7555,0 7.337,0.62317 10.59225,1.72985c0.93525,-1.121 4.87925,-5.31131 11.4115,-5.31131c2.6535,2.61805 1.38113,9.51237 0.36975,12.87178c3.0305,3.38448 4.814,7.39931 4.814,11.5538c0,9.65921 -6.902,16.77558 -21.36575,18.25472c3.98025,2.05218 6.88388,7.81834 6.88388,12.16265l0,9.79172c0,0.37247 -0.08338,0.64108 -0.12687,0.95983c16.9505,-5.87002 29.12687,-21.77172 29.12687,-40.52427c0,-23.73436 -19.47713,-42.97757 -43.5,-42.97757z"/>
86+
</symbol>
87+
<symbol id="Gitter" viewBox="0 0 384 512"><path d="M66.4 322.5H16V0h50.4v322.5zM166.9 76.1h-50.4V512h50.4V76.1zm100.6 0h-50.4V512h50.4V76.1zM368 76h-50.4v247H368V76z"/>
88+
</symbol>
89+
90+
</symbol>
91+
<symbol id="Telegram" <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><path d="M248 8C111 8 0 119 0 256s111 248 248 248 248-111 248-248S385 8 248 8zm121.8 169.9l-40.7 191.8c-3 13.6-11.1 16.9-22.4 10.5l-62-45.7-29.9 28.8c-3.3 3.3-6.1 6.1-12.5 6.1l4.4-63.1 114.9-103.8c5-4.4-1.1-6.9-7.7-2.5l-142 89.4-61.2-19.1c-13.3-4.2-13.6-13.3 2.8-19.7l239.1-92.2c11.1-4 20.8 2.7 17.2 19.5z"/>
92+
93+
94+
</symbol>
95+
<symbol id="Join" <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
96+
viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
97+
<g>
98+
<g>
99+
<path d="M497,421H328.237c-6.213-17.422-22.707-30-42.237-30h-15v-60h90v-45c0-38.39-20.94-71.686-51.78-90
100+
c-15.665,9.302-33.719,15-53.22,15c-19.501,0-37.555-5.698-53.22-15C171.94,214.314,151,247.61,151,286v45h90v60h-15
101+
c-19.53,0-36.024,12.578-42.237,30H15c-8.291,0-15,6.709-15,15c0,8.291,6.709,15,15,15h168.763c6.213,17.422,22.707,30,42.237,30
102+
h60c19.53,0,36.024-12.578,42.237-30H497c8.291,0,15-6.709,15-15C512,427.709,505.291,421,497,421z"/>
103+
</g>
104+
</g>
105+
<g>
106+
<g>
107+
<path d="M256,31c-41.353,0-75,33.647-75,75c0,41.353,33.647,75,75,75c41.353,0,75-33.647,75-75C331,64.647,297.353,31,256,31z"/>
108+
</g>
109+
</g>
110+
<g>
111+
<g>
112+
<path d="M406,31c-41.353,0-75,33.647-75,75c0,41.353,33.647,75,75,75c41.353,0,75-33.647,75-75C481,64.647,447.353,31,406,31z"/>
113+
</g>
114+
</g>
115+
<g>
116+
<g>
117+
<path d="M106,31c-41.353,0-75,33.647-75,75c0,41.353,33.647,75,75,75c41.353,0,75-33.647,75-75C181,64.647,147.353,31,106,31z"/>
118+
</g>
119+
</g>
120+
<g>
121+
<g>
122+
<path d="M106,211c-28.499,0-54.313-11.501-73.251-30C13.217,200.08,0,226.608,0,256v60c0,8.291,6.709,15,15,15h106v-45
123+
c0-33.102,12.147-63.252,32.073-86.658C138.849,206.552,123.005,211,106,211z"/>
124+
</g>
125+
</g>
126+
<g>
127+
<g>
128+
<path d="M479.251,181c-18.939,18.499-44.753,30-73.251,30c-17.005,0-32.849-4.448-47.073-11.658
129+
C378.853,222.748,391,252.898,391,286v45h106c8.291,0,15-6.709,15-15v-60C512,226.608,498.783,200.08,479.251,181z"/>
130+
</g>
131+
132+
133+
</svg>
134+
</symbol>
135+
136+
137+
138+
<!-- Bottom bar -->
139+
51140
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
52141

53142

54143
</body>
55144

56-
</html>
145+
</html>

0 commit comments

Comments
 (0)