Skip to content

Commit 9d18308

Browse files
geoffguillaingeoffguillain
authored
Merge pull request #110 from OpenSourceOrg/merge/menu-header
Merge/menu header
2 parents be1ab2f + 38403f1 commit 9d18308

9 files changed

Lines changed: 227 additions & 238 deletions

‎themes/osi/assets/css/editor-style.css‎

Lines changed: 0 additions & 4 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎themes/osi/assets/css/editor-style.css.map‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎themes/osi/assets/scss/_6_components.header.scss‎

Lines changed: 134 additions & 154 deletions
Original file line numberDiff line numberDiff line change
@@ -11,105 +11,131 @@
1111
}
1212
.admin-bar {
1313
.header-main.header-main-small {
14-
top: 46px;
14+
top: 32px;
15+
@media only screen and (max-width: 782px) {
16+
top: 46px;
17+
}
1518
}
1619

1720
}
18-
.header--inner {
19-
padding: 0;
20-
position: static;
21-
opacity: 1;
22-
transition: all .3s;
23-
z-index:999;
24-
25-
@media only screen and ( max-width: 1200px ) {
26-
background: #fff;
27-
}
28-
}
29-
30-
.header--quicklinks {
31-
padding: .5em;
32-
background: $Ndarkest;
33-
position: relative;
34-
overflow: auto;
21+
.header-main {
22+
.header--inner {
23+
position: static;
24+
opacity: 1;
3525
transition: all .3s;
36-
z-index:1000;
37-
}
38-
39-
.header--quicklinks-inner {
40-
position: relative;
41-
}
26+
z-index:999;
27+
height: 125px;
28+
display: flex;
29+
align-items: center;
30+
31+
@media only screen and ( max-width: 1200px ) {
32+
background: #fff;
33+
padding: 16px;
34+
}
35+
@media only screen and (max-width: #{$break-small}) {
36+
padding: 8px 16px;
37+
}
4238

43-
.header--blog-name {
44-
box-sizing: border-box;
45-
height: 100%;
46-
// margin: .3em;
47-
// transition: all .3s;
48-
// width: 80%;
49-
50-
a {
51-
color: $Ndarkest;
52-
display: inline-block;
53-
font-weight: bold;
54-
line-height: 1;
55-
text-decoration: none;
39+
.header--blog-name {
40+
box-sizing: border-box;
41+
max-width: calc(100% - 130px);
42+
max-height: 110px;
5643
height: 100%;
57-
transition: none;
58-
59-
&:hover, &:focus {
44+
display: flex;
45+
align-items: center;
46+
47+
a {
48+
color: $Ndarkest;
49+
display: block;
50+
font-weight: bold;
51+
line-height: 1;
6052
text-decoration: none;
53+
transition: none;
54+
55+
&:hover,
56+
&:focus {
57+
text-decoration: none;
58+
}
6159
}
62-
}
6360

64-
img { // all logos
65-
max-height: 5.4em;
66-
width: auto;
67-
margin: 0 10px 0 auto;
68-
transform: translateZ(0); // chrome blurry fix
69-
}
61+
img {
62+
// all logos
63+
max-width: 300px;
64+
height: auto;
65+
width: 100%;
66+
transform: translateZ(0); // chrome blurry fix
67+
transition: all .3s;
68+
}
7069

71-
.hide-mobile {
72-
display: none;
73-
}
70+
.hide-mobile {
71+
display: none;
72+
}
7473

75-
.header-logo-mobile {
76-
display: block;
74+
.header-logo-mobile {
75+
display: block;
76+
}
7777
}
7878
}
7979

80-
.header--extra-text {
81-
clear: both;
82-
padding: 0 1rem;
80+
&.header-main-small {
81+
.header--inner {
82+
padding-top: 16px;
83+
padding-bottom: 16px;
84+
max-height: 100px;
85+
86+
.header--blog-name {
87+
a {
88+
img {
89+
max-height: 60px;
90+
}
91+
}
92+
}
93+
}
8394
}
8495

85-
.header-main-small {
96+
97+
}
8698

87-
.header--quicklinks {
88-
padding-top: 0;
89-
padding-bottom: 0;
90-
overflow: hidden;
91-
transition: all .3s;
92-
}
99+
.header--quicklinks {
100+
padding: .5em;
101+
background: $Ndarkest;
102+
position: relative;
103+
overflow: auto;
104+
transition: all .3s;
105+
z-index: 1000;
106+
}
93107

94-
.header--inner {
95-
// opacity: 0;
96-
overflow: hidden;
97-
transition: all .3s;
98-
}
108+
.header--quicklinks-inner {
109+
position: relative;
110+
}
99111

100-
.header--blog-name {
112+
.header--extra-text {
113+
clear: both;
114+
padding: 0 1rem;
115+
}
101116

102-
}
117+
.header-main-small {
103118

104-
.header--extra-text {
105-
display: none;
106-
}
119+
.header--quicklinks {
120+
padding-top: 0;
121+
padding-bottom: 0;
122+
overflow: hidden;
123+
transition: all .3s;
107124
}
108125

126+
.header--inner {
127+
// opacity: 0;
128+
overflow: hidden;
129+
transition: all .3s;
130+
}
109131

132+
.header--blog-name {
110133

111-
@media only screen and (min-width: #{$break-small}) {
134+
}
112135

136+
.header--extra-text {
137+
display: none;
138+
}
113139
}
114140

115141
@media only screen and (max-width: #{$break-nav}) {
@@ -121,102 +147,56 @@
121147
}
122148

123149
@media only screen and (min-width: #{$break-nav}) {
124-
.header-main {
150+
.header--inner, .header--quicklinks-inner {
151+
// @include clearfix();
152+
padding-left: $maxPadding;
153+
padding-right: $maxPadding;
154+
padding-top: 1em;
125155
}
126156

127-
.header--inner, .header--quicklinks-inner {
128-
@include clearfix();
129-
padding-left: $maxPadding;
130-
padding-right: $maxPadding;
131-
padding-top: 1em;
157+
.header--inner {
158+
border: 0;
159+
position: relative;
160+
}
161+
.header--blog-name {
162+
.hide-mobile {
163+
display: inline-block;
132164
}
133165

134-
.header--inner {
135-
border: 0;
136-
position: relative;
166+
.header-logo-mobile {
167+
display: none;
137168
}
138-
.header--blog-name {
139-
// float: left;
140-
// font-size: 1.2em;
141-
// margin: 0;
142-
// padding-left: 0;
143-
// text-align: left;
144-
// width: inherit;
145-
146-
.header-logo {
147-
display: inline-block;
148-
}
149-
150-
.hide-mobile {
151-
display: inline-block;
152-
}
153-
154-
.header-logo-mobile {
155-
display: none;
156-
}
157-
158-
img {
159-
margin-top: -16px;
160-
}
161-
}
162-
163-
.header--extra-text {
164-
text-align: right;
165-
float: right;
166-
clear: right;
167-
padding: 0;
168-
}
169-
170-
.header-main-small {
171-
background-color: $Nwhite;
172-
173-
.header--inner {
174-
// height: 2.2em;
175-
// overflow: visible;
176-
// top: 0;
177-
// opacity: 1;
178-
}
169+
}
179170

180-
.header--blog-name {
181-
display: none;
182-
opacity: 0;
183-
}
171+
.header--extra-text {
172+
text-align: right;
173+
float: right;
174+
clear: right;
175+
padding: 0;
176+
}
184177

185-
.nav-main {
186-
height: auto;
187-
top: 0;
188-
// transition: all .2s;
189-
margin-top: 0;
190-
191-
.nav-main--menu > .menu-item > a {
192-
padding-top: 0.6em;
193-
padding-bottom: 0.5em;
194-
transition: all .3s;
195-
}
178+
.header-main-small {
179+
background-color: $Nwhite;
180+
181+
.nav-main {
182+
height: auto;
183+
top: 0;
184+
// transition: all .2s;
185+
margin-top: 0;
186+
187+
.nav-main--menu > .menu-item > a {
188+
padding-top: 0.6em;
189+
padding-bottom: 0.5em;
190+
transition: all .3s;
196191
}
197192
}
193+
}
198194
}
199195

200-
201-
202196
@media only screen and (min-width: #{$break-wide}) {
203197
.header--inner, .header--quicklinks-inner {
204198
// @include center-block;
205199
display: flex;
206200
align-items: center;
207-
208-
}
209-
210-
.header-main-small {
211-
212-
.header--blog-name {
213-
// display: inline-block;
214-
215-
img {
216-
margin-top: -16px;
217-
}
218-
219-
}
220-
221201
}
222202
}

‎themes/osi/assets/scss/_6_components.mobile-menu.scss‎

Lines changed: 16 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,17 @@
1-
.open-button-wrapper {
2-
position: absolute;
3-
// top: $quicklinksTop; // height of quicklinks
4-
// top: 0;
5-
top: 7px;
6-
width: 100%;
1+
.site-header {
2+
.open-button-wrapper {
3+
position: absolute;
4+
// top: $quicklinksTop; // height of quicklinks
5+
// top: 0;
6+
top: 35px;
7+
right: 16px;
8+
}
9+
10+
&.header-main-small {
11+
.open-button-wrapper {
12+
top: 25px;
13+
}
14+
}
715
}
816

917
.open-the-menu {
@@ -23,12 +31,12 @@
2331
border: 0;
2432
border-radius: 0 !important;
2533
font-size: 1em;
26-
height: 2.8em;
34+
height: 48px;
2735
overflow: hidden;
2836
padding: .4em;
2937
position: absolute;
3038
top: 0;
31-
width: 2.5em;
39+
width: 44px;
3240
z-index: 1000;
3341

3442
&:active,

0 commit comments

Comments
 (0)