Skip to content

Commit 136aa6d

Browse files
Ryan Wilsonchasenlehara
Ryan Wilson
authored and
chasenlehara
committed
Clean up the design (#510)
Closes #506
1 parent 2303b30 commit 136aa6d

File tree

7 files changed

+61
-61
lines changed

7 files changed

+61
-61
lines changed

‎static/header.less‎

Lines changed: 51 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -9,23 +9,26 @@
99
}
1010
.header {
1111
display: flex;
12-
box-shadow: 0 0 5px 0 rgba(0,0,0,0.25);
13-
z-index: 1;
12+
align-items: center;
1413
flex-shrink: 0;
14+
padding: 0 @gutter*2;
15+
@media screen and (max-width: 499px){
16+
padding: 0 @gutter;
17+
}
1518
background-color: #FFFFFF;
19+
z-index: 1;
20+
box-shadow: 0 0 5px 0 rgba(0,0,0,0.25);
1621
}
1722
.brand {
1823
display: flex;
19-
height: @brand-height;
20-
padding-top: @gutter;
24+
white-space: nowrap;
2125
.dropdown {
2226
display:none;
2327
}
2428
.logo {
2529
display: inline-block;
2630
width: 60px;
2731
height: 100%;
28-
margin: 0 @gutter 0 @gutter;
2932
cursor: pointer;
3033
&:hover > a {
3134
opacity: .7;
@@ -58,7 +61,7 @@
5861
}
5962

6063
.logo {
61-
margin: 0 @gutter 0 @gutter*2;
64+
margin: 0 @gutter 0 0;
6265

6366
&:hover .dropdown {
6467
display: block;
@@ -129,27 +132,40 @@
129132
@media screen and (min-width: @breakpoint){
130133
.flex;
131134
list-style: none;
132-
margin: auto auto auto @gutter*4;
133-
padding: 0;
134-
align-self: flex-start;
135+
margin: auto auto auto @gutter*2;
135136
> li {
136137
.flex;
137-
align-items: center;
138-
font-family: Lato, sans-serif;
139-
font-size: 12px;
140-
color: #3E4548;
141-
text-transform: uppercase;
142-
margin-right: @gutter*2;
143138
> a {
144-
color: #1E1E1E;
145-
padding: 20px 5px;
139+
color: @gray;
140+
position: relative;
141+
text-decoration: none;
142+
padding: 20px 10px @gutter;
143+
margin: 0 10px;
144+
&:before {
145+
content: '';
146+
position: absolute;
147+
bottom: 20px;
148+
left: 0px;
149+
width: 100%;
150+
height: 4px;
151+
background-color: #CCCCCC;
152+
opacity: 0;
153+
z-index: -1;
154+
transition: all 0.4s ease-in-out;
155+
}
156+
&:hover:before {
157+
bottom: 8px;
158+
opacity: 1;
159+
}
146160
}
147161
&.current {
148162
> a {
149-
border-bottom: 4px solid @link-color;
150-
padding-bottom: 6px;
151-
margin-bottom: 10px;
152-
text-decoration: none;
163+
color: @link-color;
164+
}
165+
> a:before {
166+
bottom: 8px;
167+
opacity: 1;
168+
background-color: @link-color;
153169
cursor: default;
154170
}
155171
}
@@ -162,21 +178,28 @@
162178
@media screen and (max-width: 399px){
163179
display: none;
164180
}
165-
padding: 0;
166-
margin: 0 0 0 10px;
181+
padding: 8px 5px 10px;
182+
margin: 0 0 0 @gutter;
167183
list-style: none;
168184
justify-content: center;
169185
align-items: center;
170186
z-index: 999999;
171187
.dropdown {
172188
display: flex;
173189
position: relative;
174-
width: 100px;
175-
height: 100%;
176-
padding: 10px;
190+
width: 85px;
191+
height: 35px;
177192
.dropdown-menu {
178193
display: none;
179194
}
195+
.bitovi.by-bitovi {
196+
width: 100%;
197+
height: 100%;
198+
background: url(img/by-bitovi-logo.svg) no-repeat;
199+
background-position: center;
200+
background-size: contain;
201+
color: rgba(0, 0, 0, 0);
202+
}
180203
}
181204
&:hover {
182205
background: @border-color;
@@ -187,8 +210,8 @@
187210
background: white;
188211
.border;
189212
border-top: none;
190-
right: 0;
191-
top: @brand-height;
213+
right: -5px;
214+
top: @gutter*3;
192215
list-style: none;
193216
padding: 0;
194217
width: 240px;
@@ -212,12 +235,4 @@
212235
}
213236
}
214237
}
215-
.bitovi.by-bitovi {
216-
width: 100%;
217-
background: url(img/by-bitovi-logo.svg) no-repeat;
218-
background-position: center;
219-
background-size: contain;
220-
height: auto;
221-
color: rgba(0, 0, 0, 0);
222-
}
223238
}

‎static/img/by-bitovi-logo.svg‎

Lines changed: 1 addition & 14 deletions
Loading

‎static/layout.less‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@
1616
width: @sidebar-width;
1717
min-width: 0;
1818
transition: min-width @transition-speed ease;
19+
border-right: 3px solid #F4F4F4;
1920
@media screen and (min-width: @breakpoint){
2021
flex-shrink: 0;
2122
padding: 0px;
@@ -28,7 +29,6 @@
2829
min-height: 100%;
2930
max-height: 100%;
3031
background: white;
31-
.box-shadow;
3232
overflow-x: hidden;
3333
// z-index: 90;
3434
position: relative;

‎static/mobile.less‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,9 @@
44
}
55
label[for="nav-trigger"] {
66
position: relative;
7-
margin: 10px 0 10px 15px;
7+
margin: 10px @gutter 10px 0;
88
z-index: 12;
9-
font-family: Lato, sans-serif;
9+
font-family: "Helvetica Neue ", sans-serif;
1010
border: 1px solid @border-color;
1111
padding: 10px;
1212
background: #fff;

‎static/search.less‎

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,8 @@
44
flex-direction: column;
55
align-self: center;
66
width: 170px;
7-
@media screen and (max-width: 399px){
8-
margin-right: @gutter;
7+
@media screen and (max-width: 499px){
8+
margin-left: @gutter;
99
}
1010
}
1111
.search-bar {
@@ -33,17 +33,16 @@
3333
position: relative;
3434
height: 1em;
3535
width: 1em;
36-
font-size: .8em;
37-
top: 0;
36+
font-size: 1em;
37+
top: 2px;
3838
cursor: pointer;
3939
// background-color: @code-color;
4040
background-image: url(img/icon-x-black-thin.svg);
4141
background-size: cover;
4242
background-repeat: no-repeat;
43-
display:none;
43+
display: none;
4444
opacity: .25;
4545
margin-left: .5em;
46-
padding: 10px;
4746
}
4847

4948
.search{

‎static/sidebar.less‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -96,7 +96,7 @@ img.social-icon-small{
9696
.nav-menu {
9797
display: block;
9898
padding: @gutter * 2 @gutter * 2 0;
99-
99+
margin-bottom: @gutter*2;
100100
& > ul {
101101
padding: 0;
102102
height: inherit;

‎static/variables.less‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
@import url('https://fonts.googleapis.com/css?family=Lato');
21
/*----- COLORS -----*/
32
@link-color: #4078c0;
43
@gray: #4b5057;

0 commit comments

Comments
 (0)