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

Commit 91d2804

Browse files
author
Jan Henckens
committed
Responsiveness of all the header things
1 parent faaa964 commit 91d2804

File tree

7 files changed

+92
-43
lines changed

7 files changed

+92
-43
lines changed

‎sass/forms/_fields.scss

+2
Original file line numberDiff line numberDiff line change
@@ -59,6 +59,7 @@ form#main-search {
5959
input {
6060
width: 75%;
6161
border: none;
62+
border-bottom: 1px solid $color__border;
6263
}
6364
button#search-submit {
6465
color: darken($color__border, 15%);
@@ -68,6 +69,7 @@ form#main-search {
6869
display: inline-block;
6970
margin-bottom: 0px;
7071
font: normal 16px/1 'Genericons';
72+
padding: 0;
7173
&::after {
7274
content: '\f400';
7375
}

‎sass/layout/_content-sidebar.scss

+27-5
Original file line numberDiff line numberDiff line change
@@ -14,15 +14,37 @@ body {
1414
@include gs-pad(d, padin);
1515
}
1616
& .site-branding {
17-
@include gs-span(d, 1, 2);
18-
@include gs-pad(d, padinfull);
17+
@include gs-media(m, max) {
18+
}
19+
@include gs-media(t, min) {
20+
21+
}
22+
@include gs-media(d, min) {
23+
@include gs-span(d, 1, 2);
24+
}
25+
text-align: center;
1926
}
2027
& nav.main-navigation {
21-
@include gs-span(d, 3, 9);
22-
28+
@include gs-media(m, max) {
29+
}
30+
@include gs-media(t, min) {
31+
@include gs-span(t, 2, 6);
32+
}
33+
@include gs-media(d, min) {
34+
@include gs-span(d, 3, 9);
35+
}
2336
}
2437
& .site-search {
25-
@include gs-span(d, 9, 11);
38+
@include gs-media(m, max) {
39+
clear:both;
40+
}
41+
@include gs-media(t, min) {
42+
@include gs-span(t, 7, 8);
43+
44+
}
45+
@include gs-media(d, min) {
46+
@include gs-span(d, 9, 11);
47+
}
2648
}
2749
}
2850
& .site-content {

‎sass/navigation/_menus.scss

+3-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
.main-navigation {
2-
margin-top: 15px;
2+
margin-top: 25px;
33
ul.nav-menu {
44
list-style: none;
55
margin: 0;
@@ -12,6 +12,7 @@
1212
z-index: 99999;
1313
ul {
1414
left: -999em;
15+
top: 0;
1516
}
1617

1718
li {
@@ -24,7 +25,7 @@
2425
left: 100%;
2526
}
2627
&:hover {
27-
background: $color__link;
28+
background: $color__border;
2829
}
2930
}
3031

‎sass/site/primary/_posts-and-pages.scss

-2
Original file line numberDiff line numberDiff line change
@@ -31,9 +31,7 @@
3131
}
3232

3333
.entry-header, .entry-meta {
34-
@include gs-media(d, min) {
3534
border-top: 1px solid $color__border;
36-
};
3735
}
3836

3937
.entry-meta {

‎sass/typography/_headings.scss

+7-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,13 @@ h1, h2, h3, h4, h5, h6 {
33
}
44

55
h1 {@include font-size(3);}
6-
h1.site-title {@include font-size(3);}
6+
h1.site-title {
7+
@include font-size(3);
8+
margin-top: 10px;
9+
a {
10+
text-decoration: none;
11+
}
12+
}
713
h2 {@include font-size(2.5);}
814
h3 {@include font-size(2.2);}
915
h4 {@include font-size(2);}

‎sidebar.php

-2
Original file line numberDiff line numberDiff line change
@@ -12,12 +12,10 @@
1212

1313
<div id="secondary" class="widget-area" role="complementary">
1414
<?php if ( is_singular() ) : ?>
15-
<?php if ( 'post' == get_post_type() ) : ?>
1615
<div class="entry-meta">
1716
<?php clear_content_posted_on(); ?>
1817
</div>
1918
<!-- .entry-meta -->
20-
<?php endif; ?>
2119
<?php clear_content_post_nav(); ?>
2220
<?php endif; ?>
2321

‎style.css

+53-31
Original file line numberDiff line numberDiff line change
@@ -101,28 +101,45 @@ body .hfeed {
101101
padding-left: 1.683937825%;
102102
padding-right: 1.683937825%; } }
103103
body .hfeed .site-header .site-branding {
104-
display: block;
105-
float: left;
106-
margin-left: 0;
107-
margin-right: -100%;
108-
width: 13.8601036333%;
109-
-moz-box-sizing: border-box;
110-
-webkit-box-sizing: border-box;
111-
box-sizing: border-box;
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%; }
104+
text-align: center; }
105+
@media only screen and (min-width: 990px) {
106+
body .hfeed .site-header .site-branding {
107+
display: block;
108+
float: left;
109+
margin-left: 0;
110+
margin-right: -100%;
111+
width: 13.8601036333%; } }
112+
@media only screen and (min-width: 768px) {
113+
body .hfeed .site-header nav.main-navigation {
114+
display: block;
115+
float: left;
116+
margin-left: 12.8255208384%;
117+
margin-right: -100%;
118+
width: 61.5234375154%; } }
119+
@media only screen and (min-width: 990px) {
120+
body .hfeed .site-header nav.main-navigation {
121+
display: block;
122+
float: left;
123+
margin-left: 17.2279792833%;
124+
margin-right: -100%;
125+
width: 56.9300518369%; } }
126+
@media only screen and (max-width: 767px) {
127+
body .hfeed .site-header .site-search {
128+
clear: both; } }
129+
@media only screen and (min-width: 768px) {
130+
body .hfeed .site-header .site-search {
131+
display: block;
132+
float: left;
133+
margin-left: 76.9531250238%;
134+
margin-right: -100%;
135+
width: 23.0468749995%; } }
136+
@media only screen and (min-width: 990px) {
137+
body .hfeed .site-header .site-search {
138+
display: block;
139+
float: left;
140+
margin-left: 68.9119171331%;
141+
margin-right: -100%;
142+
width: 22.4740932579%; } }
126143
body .hfeed .site-content {
127144
margin-top: 20px;
128145
clear: both;
@@ -522,7 +539,10 @@ h1 {
522539

523540
h1.site-title {
524541
font-size: 30px;
525-
font-size: 3rem; }
542+
font-size: 3rem;
543+
margin-top: 10px; }
544+
h1.site-title a {
545+
text-decoration: none; }
526546

527547
h2 {
528548
font-size: 25px;
@@ -1265,15 +1285,17 @@ form#main-search {
12651285
margin-top: 15px; }
12661286
form#main-search input {
12671287
width: 75%;
1268-
border: none; }
1288+
border: none;
1289+
border-bottom: 1px solid #eee; }
12691290
form#main-search button#search-submit {
12701291
color: #c8c8c8;
12711292
background: none;
12721293
border: none;
12731294
box-shadow: none;
12741295
display: inline-block;
12751296
margin-bottom: 0px;
1276-
font: normal 16px/1 'Genericons'; }
1297+
font: normal 16px/1 'Genericons';
1298+
padding: 0; }
12771299
form#main-search button#search-submit::after {
12781300
content: '\f400'; }
12791301
form#main-search button#search-submit input:focus {
@@ -1314,7 +1336,7 @@ a {
13141336
5.2 Menus
13151337
--------------------------------------------------------------*/
13161338
.main-navigation {
1317-
margin-top: 15px; }
1339+
margin-top: 25px; }
13181340
.main-navigation ul.nav-menu {
13191341
list-style: none;
13201342
margin: 0; }
@@ -1326,7 +1348,8 @@ a {
13261348
left: -999em;
13271349
z-index: 99999; }
13281350
.main-navigation ul.nav-menu ul ul {
1329-
left: -999em; }
1351+
left: -999em;
1352+
top: 0; }
13301353
.main-navigation ul.nav-menu ul li {
13311354
float: left;
13321355
position: relative;
@@ -1336,7 +1359,7 @@ a {
13361359
.main-navigation ul.nav-menu ul li:hover > ul {
13371360
left: 100%; }
13381361
.main-navigation ul.nav-menu ul li:hover {
1339-
background: #17a; }
1362+
background: #eee; }
13401363
.main-navigation ul.nav-menu li:hover > ul {
13411364
left: auto; }
13421365
.main-navigation li {
@@ -1529,9 +1552,8 @@ a {
15291552
clear: both;
15301553
margin: 0 0 1.5em; }
15311554

1532-
@media only screen and (min-width: 990px) {
1533-
.entry-header, .entry-meta {
1534-
border-top: 1px solid #eee; } }
1555+
.entry-header, .entry-meta {
1556+
border-top: 1px solid #eee; }
15351557

15361558
.entry-meta a {
15371559
text-decoration: none;

0 commit comments

Comments
 (0)