Skip to content
This repository was archived by the owner on Oct 29, 2018. It is now read-only.

Commit 8a363aa

Browse files
author
Jan Henckens
committed
Searchform in header
1 parent 52f4802 commit 8a363aa

File tree

5 files changed

+103
-83
lines changed

5 files changed

+103
-83
lines changed

‎sass/forms/_fields.scss

+9
Original file line numberDiff line numberDiff line change
@@ -51,4 +51,13 @@ textarea {
5151
padding-left: 3px;
5252
vertical-align: top; /* Improves readability and alignment in all browsers */
5353
width: 100%;
54+
}
55+
56+
form#main-search {
57+
margin-top: 15px;
58+
& input {
59+
width: 97%;
60+
border: 0;
61+
border-bottom: 1px solid $color__border;
62+
}
5463
}

‎sass/layout/_content-sidebar.scss

+10-3
Original file line numberDiff line numberDiff line change
@@ -9,13 +9,20 @@ body {
99
@include gs-span(d, 2, 12);
1010
}
1111
& .site-header {
12-
@include gs-span(d, all);
13-
@include gs-pad(d, padin);
12+
@include gs-media (d, min) {
13+
@include gs-span(d, 1, 12);
14+
@include gs-pad(d, padin);
15+
}
1416
& .site-branding {
1517
@include gs-span(d, 1, 2);
18+
@include gs-pad(d, padinfull);
1619
}
1720
& nav.main-navigation {
18-
@include gs-span(d, 3, 8);
21+
@include gs-span(d, 3, 9);
22+
23+
}
24+
& .site-search {
25+
@include gs-span(d, 9, 11);
1926
}
2027
}
2128
& .site-content {

‎sass/navigation/_menus.scss

+2-9
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
.main-navigation {
2+
margin-top: 15px;
23
ul.nav-menu {
34
list-style: none;
45
margin: 0;
@@ -9,7 +10,6 @@
910
top: 1.5em;
1011
left: -999em;
1112
z-index: 99999;
12-
1313
ul {
1414
left: -999em;
1515
top: 0;
@@ -36,21 +36,14 @@
3636
}
3737
}
3838
li {
39+
float: left;
3940
position: relative;
4041
margin-right: 4%;
41-
float: left;
4242
&:last-of-type {
4343
margin-right: 0;
4444
}
4545
&:hover > a {
4646
}
47-
& ul.sub-menu {
48-
background: white;
49-
padding: 5px;
50-
& li {
51-
padding: 5px;
52-
}
53-
}
5447
}
5548
a {
5649
display: block;

‎searchform.php

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<div class="site-search">
2-
<form action="/" method="get">
2+
<form id="main-search" action="/" method="get">
33
<fieldset>
44
<input type="search" name="s" id="search" value="<?php the_search_query(); ?>" placeholder="Search" />
55
<input type="hidden" value="post" name="post_type" id="post_type" />

‎style.css

+81-70
Original file line numberDiff line numberDiff line change
@@ -88,29 +88,41 @@ body .hfeed {
8888
margin-left: 8.6139896416%;
8989
margin-right: -100%;
9090
width: 91.3860103837%; } }
91-
body .hfeed .site-header {
92-
clear: both;
91+
@media only screen and (min-width: 990px) {
92+
body .hfeed .site-header {
93+
display: block;
94+
float: left;
95+
margin-left: 0;
96+
margin-right: -100%;
97+
width: 100.0000000253%;
98+
-moz-box-sizing: border-box;
99+
-webkit-box-sizing: border-box;
100+
box-sizing: border-box;
101+
padding-left: 1.683937825%;
102+
padding-right: 1.683937825%; } }
103+
body .hfeed .site-header .site-branding {
93104
display: block;
94105
float: left;
95106
margin-left: 0;
96-
width: 100%;
107+
margin-right: -100%;
108+
width: 13.8601036333%;
97109
-moz-box-sizing: border-box;
98110
-webkit-box-sizing: border-box;
99111
box-sizing: border-box;
100-
padding-left: 1.683937825%;
101-
padding-right: 1.683937825%; }
102-
body .hfeed .site-header .site-branding {
103-
display: block;
104-
float: left;
105-
margin-left: 0;
106-
margin-right: -100%;
107-
width: 13.8601036333%; }
108-
body .hfeed .site-header nav.main-navigation {
109-
display: block;
110-
float: left;
111-
margin-left: 17.2279792833%;
112-
margin-right: -100%;
113-
width: 48.3160621998%; }
112+
padding-left: 3.36787565%;
113+
padding-right: 3.36787565%; }
114+
body .hfeed .site-header nav.main-navigation {
115+
display: block;
116+
float: left;
117+
margin-left: 17.2279792833%;
118+
margin-right: -100%;
119+
width: 56.9300518369%; }
120+
body .hfeed .site-header .site-search {
121+
display: block;
122+
float: left;
123+
margin-left: 68.9119171331%;
124+
margin-right: -100%;
125+
width: 22.4740932579%; }
114126
body .hfeed .site-content {
115127
margin-top: 20px;
116128
clear: both;
@@ -504,28 +516,11 @@ textarea {
504516
h1, h2, h3, h4, h5, h6 {
505517
clear: both; }
506518

507-
h1.site-title {
508-
font-size: 30px;
509-
font-size: 3rem;
510-
-moz-box-sizing: border-box;
511-
-webkit-box-sizing: border-box;
512-
box-sizing: border-box;
513-
padding-left: 3.36787565%;
514-
padding-right: 3.36787565%; }
515-
516-
h1.entry-title {
519+
h1 {
517520
font-size: 30px;
518-
font-size: 3rem;
519-
font-family: Lato-Regular, Avenir, Verdana, sans-serif;
520-
font-style: normal;
521-
font-weight: normal;
522-
-ms-word-wrap: break-word;
523-
word-wrap: break-word; }
524-
h1.entry-title a {
525-
text-decoration: none;
526-
color: #17a; }
521+
font-size: 3rem; }
527522

528-
h1 {
523+
h1.site-title {
529524
font-size: 30px;
530525
font-size: 3rem; }
531526

@@ -541,6 +536,18 @@ h4 {
541536
font-size: 20px;
542537
font-size: 2rem; }
543538

539+
h1.entry-title {
540+
font-size: 30px;
541+
font-size: 3rem;
542+
font-family: Lato-Regular, Avenir, Verdana, sans-serif;
543+
font-style: normal;
544+
font-weight: normal;
545+
-ms-word-wrap: break-word;
546+
word-wrap: break-word; }
547+
h1.entry-title a {
548+
text-decoration: none;
549+
color: #17a; }
550+
544551
p {
545552
margin-bottom: 1.5em; }
546553

@@ -768,6 +775,13 @@ textarea {
768775
/* Improves readability and alignment in all browsers */
769776
width: 100%; }
770777

778+
form#main-search {
779+
margin-top: 15px; }
780+
form#main-search input {
781+
width: 97%;
782+
border: 0;
783+
border-bottom: 1px solid #eee; }
784+
771785
/*--------------------------------------------------------------
772786
5.0 Navigation
773787
--------------------------------------------------------------*/
@@ -784,41 +798,38 @@ a {
784798
/*--------------------------------------------------------------
785799
5.2 Menus
786800
--------------------------------------------------------------*/
787-
.main-navigation ul.nav-menu {
788-
list-style: none;
789-
margin: 0; }
790-
.main-navigation ul.nav-menu ul {
791-
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
801+
.main-navigation {
802+
margin-top: 15px; }
803+
.main-navigation ul.nav-menu {
792804
list-style: none;
793-
position: absolute;
794-
top: 1.5em;
795-
left: -999em;
796-
z-index: 99999; }
797-
.main-navigation ul.nav-menu ul ul {
805+
margin: 0; }
806+
.main-navigation ul.nav-menu ul {
807+
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
808+
list-style: none;
809+
position: absolute;
810+
top: 1.5em;
798811
left: -999em;
799-
top: 0; }
800-
.main-navigation ul.nav-menu ul li:hover > ul {
801-
left: 100%; }
802-
.main-navigation ul.nav-menu li:hover > ul {
803-
left: auto; }
804-
.main-navigation li {
805-
position: relative;
806-
margin-right: 4%;
807-
float: left; }
808-
.main-navigation li:last-of-type {
809-
margin-right: 0; }
810-
.main-navigation li ul.sub-menu {
811-
background: white;
812-
padding: 5px; }
813-
.main-navigation li ul.sub-menu li {
814-
padding: 5px; }
815-
.main-navigation a {
816-
display: block;
817-
text-decoration: none; }
818-
.main-navigation .current_page_item > a,
819-
.main-navigation .current-menu-item > a,
820-
.main-navigation .current_page_ancestor > a {
821-
background: red; }
812+
z-index: 99999; }
813+
.main-navigation ul.nav-menu ul ul {
814+
left: -999em;
815+
top: 0; }
816+
.main-navigation ul.nav-menu ul li:hover > ul {
817+
left: 100%; }
818+
.main-navigation ul.nav-menu li:hover > ul {
819+
left: auto; }
820+
.main-navigation li {
821+
float: left;
822+
position: relative;
823+
margin-right: 4%; }
824+
.main-navigation li:last-of-type {
825+
margin-right: 0; }
826+
.main-navigation a {
827+
display: block;
828+
text-decoration: none; }
829+
.main-navigation .current_page_item > a,
830+
.main-navigation .current-menu-item > a,
831+
.main-navigation .current_page_ancestor > a {
832+
background: red; }
822833

823834
/* Small menu */
824835
.menu-toggle {

0 commit comments

Comments
 (0)