Skip to content

Commit 12b1b1a

Browse files
zombieFoxzombieFox
committed
[design] improve layout and head area
1 parent c8c3898 commit 12b1b1a

File tree

9 files changed

+85
-86
lines changed

9 files changed

+85
-86
lines changed

‎css/base.css‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,12 @@
3535
--font-bold:"Open Sans Bold", sans-serif;
3636
--font-light:"Open Sans Light", sans-serif;
3737
--font-fjalla:"Fjalla One Regular", sans-serif;
38+
/* breakpoint reference */
39+
/* can not be used in @media as of yet */
40+
--breakpoint-sm:550px;
41+
--breakpoint-md:700px;
42+
--breakpoint-lg:900px;
43+
--breakpoint-xl:1300px;
3844
}
3945

4046
@media (min-width:700px){

‎css/button.css‎

Lines changed: 43 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -12,8 +12,8 @@ input[type="submit"]{
1212
min-height:2.5em;
1313
line-height:1;
1414
border:0;
15-
border-top-width:2px;
16-
border-bottom-width:2px;
15+
border-top-width:3px;
16+
border-bottom-width:3px;
1717
border-style: solid;
1818
border-color: transparent;
1919
border-radius:var(--radius);
@@ -29,10 +29,44 @@ input[type="submit"]{
2929
align-items: center;
3030
}
3131

32-
.button.active{
33-
border-top-width:3px;
34-
border-bottom-width:3px;
32+
button:hover,
33+
button:focus,
34+
.button:hover,
35+
.button:focus,
36+
input[type="button"]:hover,
37+
input[type="button"]:focus,
38+
input[type="reset"]:hover,
39+
input[type="reset"]:focus,
40+
input[type="submit"]:hover,
41+
input[type="submit"]:focus{
42+
background-color:var(--gray-03);
3543
border-bottom-color:rgb(var(--accent));
44+
color:var(--white);
45+
outline:0;
46+
}
47+
48+
button:active,
49+
.button:active,
50+
input[type="button"]:active,
51+
input[type="reset"]:active,
52+
input[type="submit"]:active{
53+
background-color:var(--gray-04);
54+
color:var(--white);
55+
transition: none;
56+
}
57+
58+
button[disabled],
59+
.button[disabled],
60+
button[disabled]:hover,
61+
.button[disabled]:hover,
62+
button[disabled]:focus,
63+
.button[disabled]:focus,
64+
button[disabled]:active,
65+
.button[disabled]:active{
66+
background-color:var(--gray-02);
67+
border-color: transparent;
68+
color:var(--gray-04);
69+
cursor: default;
3670
}
3771

3872
button [class^="icon-"],
@@ -43,6 +77,10 @@ button [class*=" icon-"],
4377
line-height:1;
4478
}
4579

80+
.button.active{
81+
border-bottom-color:rgb(var(--accent));
82+
}
83+
4684
.button-small{
4785
font-size:0.8em;
4886
}
@@ -70,32 +108,6 @@ button [class*=" icon-"],
70108
border-radius:0var(--radius) var(--radius) 0;
71109
}
72110

73-
button:hover,
74-
button:focus,
75-
.button:hover,
76-
.button:focus,
77-
input[type="button"]:hover,
78-
input[type="button"]:focus,
79-
input[type="reset"]:hover,
80-
input[type="reset"]:focus,
81-
input[type="submit"]:hover,
82-
input[type="submit"]:focus{
83-
background-color:var(--gray-03);
84-
border-bottom-color:rgb(var(--accent));
85-
color:var(--white);
86-
outline:0;
87-
}
88-
89-
button:active,
90-
.button:active,
91-
input[type="button"]:active,
92-
input[type="reset"]:active,
93-
input[type="submit"]:active{
94-
background-color:var(--gray-04);
95-
color:var(--white);
96-
transition: none;
97-
}
98-
99111
button [class^="button-"],
100112
button [class*=" button-"],
101113
.button [class^="button-"],

‎css/clock.css‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,28 @@
11
.clock{
22
margin:0;
33
padding:0;
4-
min-width:6em;
4+
width:100%;
55
font-family:var(--font-fjalla);
66
font-size:1.5em;
77
color:var(--white);
88
text-align: center;
9+
display: flex;
10+
flex-direction: row;
11+
justify-content: center;
912
transition: all var(--animation-speed-medium) ease-in-out;
1013
}
1114

1215
.clock-seperator{
1316
color:rgb(var(--accent));
1417
}
1518

19+
.clock-hour,
20+
.clock-minutes,
21+
.clock-seconds{
22+
min-width:1.75em;
23+
display: block;
24+
}
25+
1626
.clock-hour{
1727
color:var(--white);
1828
}

‎css/form.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ input[type="password"],
44
input[type="search"],
55
input[type="tel"],
66
input[type="text"]{
7-
background-color:var(--gray-16);
7+
background-color:var(--gray-14);
88
padding:00.5em;
99
margin:001em0;
1010
color:var(--black);

‎css/head.css‎

Lines changed: 8 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,22 @@
11
.head{
2-
margin:0;
2+
--gutter:0.5em;
3+
margin:0calc(var(--gutter) *-1);
34
display: flex;
45
flex-direction: row;
5-
flex-wrap: nowrap;
6-
justify-content: center;
6+
flex-wrap: wrap;
7+
justify-content: flex-start;
8+
align-items: stretch;
79
}
810

911
.head-item{
10-
margin-left:0.5em;
11-
margin-right:0.5em;
12+
margin-left:var(--gutter);
13+
margin-right:var(--gutter);
1214
display: flex;
1315
flex-wrap: nowrap;
1416
justify-content: center;
1517
align-items: center;
1618
}
1719

18-
.head-item:first-child{
19-
margin-left:0;
20-
}
21-
22-
.head-item:last-child{
23-
margin-right:0;
24-
}
25-
26-
.head-item-shrink{
27-
flex-shrink:0;
28-
}
29-
30-
.head-item-grow{
20+
.head-search{
3121
flex-grow:1;
3222
}

‎css/links.css‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -71,7 +71,6 @@
7171
bottom:0;
7272
left:0.25em;
7373
z-index:-1;
74-
transition: all var(--animation-speed-medium) ease-in-out;
7574
}
7675

7776
.link-control{
@@ -152,7 +151,6 @@
152151
white-space: nowrap;
153152
overflow: hidden;
154153
text-overflow: ellipsis;
155-
transition: all var(--animation-speed-medium) ease-in-out;
156154
}
157155

158156
.link-item:hover .link-letter,
@@ -170,7 +168,6 @@
170168
overflow: hidden;
171169
opacity:1;
172170
text-overflow: ellipsis;
173-
transition: all var(--animation-speed-medium) ease-in-out;
174171
}
175172

176173
.link-item:hover .link-name,

‎css/utilities.css‎

Lines changed: 0 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,3 @@
1-
.margin-top-0{
2-
margin-top:0!important;
3-
}
4-
5-
.margin-right-0{
6-
margin-right:0!important;
7-
}
8-
9-
.margin-bottom-0{
10-
margin-bottom:0!important;
11-
}
12-
13-
.margin-left-0{
14-
margin-left:0!important;
15-
}
16-
171
.is-hidden{
182
display: none !important;
193
}

‎index.html‎

Lines changed: 12 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -6,13 +6,14 @@
66
<metaname="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
77
<title>New Tab</title>
88
<linkrel="stylesheet" href="css/reset.css">
9+
<linkrel="stylesheet" href="css/base.css">
910
<linkrel="stylesheet" href="css/fonts.css">
1011
<linkrel="stylesheet" href="css/icons.css">
1112
<linkrel="stylesheet" href="css/utilities.css">
12-
<linkrel="stylesheet" href="css/base.css">
1313
<linkrel="stylesheet" href="css/theme.css">
1414
<linkrel="stylesheet" href="css/typography.css">
1515
<linkrel="stylesheet" href="css/grid.css">
16+
<linkrel="stylesheet" href="css/spacing.css">
1617
<linkrel="stylesheet" href="css/button.css">
1718
<linkrel="stylesheet" href="css/form.css">
1819
<linkrel="stylesheet" href="css/shade.css">
@@ -29,33 +30,31 @@
2930

3031
<divclass="grid-item-head">
3132
<divclass="head">
32-
<divclass="head-item">
33+
<divclass="head-item mb-3 mb-md-0">
3334
<pclass="clock"></p>
3435
</div>
35-
<divclass="head-item head-item-grow">
36+
<divclass="head-item head-search mb-3 mb-md-0">
3637
<formclass="search" action="http://www.google.com/search" method="get">
37-
<inputclass="search-input margin-bottom-0" type="text" placeholder="Find bookmarks or search" tabindex="1" name="q" autocomplete="off" tabindex="1">
38+
<inputclass="search-input mb-0" type="text" placeholder="Find bookmarks or search" tabindex="1" name="q" autocomplete="off" tabindex="1">
3839
<inputtype="submit" value="Search" class="is-hidden">
3940
</form>
40-
</div>
41-
<divclass="head-item search-clear is-hidden">
42-
<buttonclass="button margin-bottom-0" tabindex="1">
41+
<buttonclass="button mb-0 ml-3 search-clear" tabindex="1" disabled>
4342
<spanclass="icon-close"></span>
4443
</button>
4544
</div>
46-
<divclass="head-item">
47-
<buttonclass="button margin-bottom-0 control-add" tabindex="1">
45+
<divclass="head-item mb-3 mb-md-0">
46+
<buttonclass="button mb-0 control-add" tabindex="1">
4847
<spanclass="button-text">Add</span>
4948
</button>
5049
</div>
51-
<divclass="head-item">
52-
<buttonclass="button margin-bottom-0 control-edit" tabindex="1">
50+
<divclass="head-item mb-3 mb-md-0">
51+
<buttonclass="button mb-0 control-edit" tabindex="1">
5352
<spanclass="button-text">Edit</span>
5453
</button>
5554
</div>
56-
<divclass="head-item">
55+
<divclass="head-item mb-3 mb-md-0">
5756
<formclass="theme">
58-
<labelclass="button margin-bottom-0 theme-label" for="accent-picker">
57+
<labelclass="button mb-0 theme-label" for="accent-picker">
5958
<spanclass="button-text">Accent</span>
6059
</label>
6160
<inputid="accent-picker" type="color" class="theme-input" value="#ffaa33" tabindex="1">

‎js/search.js‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -24,10 +24,11 @@ var search = (function(){
2424
varsearchInput=helper.e(".search-input");
2525
varsearchClear=helper.e(".search-clear");
2626
if(searchInput.value!=""){
27-
helper.removeClass(searchClear,"is-hidden");
27+
console.log(1);
28+
searchClear.removeAttribute("disabled");
2829
}else{
29-
helper.addClass(searchClear,"is-hidden");
30-
}
30+
searchClear.setAttribute("disabled","");
31+
};
3132
};
3233

3334
var_findResults=function(string){

0 commit comments

Comments
(0)