Skip to content

Commit 04a539b

Browse files
flynnduismflynnduism
committed
docs(styles): styling for topbar, responsive layout improvements
1 parent 955adb0 commit 04a539b

7 files changed

Lines changed: 201 additions & 51 deletions

File tree

‎themes/deis/sidebar.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<nav class="sidebar hide-for-small">
1+
<nav class="sidebar hide-for-medium-down">
22
<div class="sidebar-inner">
33
<h1><a href="/" class="logo"><img src="{{ base_url }}/static/img/svg/logo.svg" width="128px" height="41px" alt="Deis"></a></h1>
44

‎themes/deis/static/css/styles.css‎

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

‎themes/deis/static/css/styles.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/deis/static/scss/_doc-layout.scss‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,15 @@ body {
2929
min-height: 100%;
3030
margin-bottom: -335px;
3131

32+
@media #{$small-only} {
33+
padding-left: 5%;
34+
padding-right: 5%;
35+
}
36+
@media #{$medium-only} {
37+
padding-left: 5%;
38+
padding-right: 5%;
39+
}
40+
3241
&:after {
3342
content: "";
3443
display: block;

‎themes/deis/static/scss/_header.scss‎

Lines changed: 168 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -7,58 +7,92 @@
77
height: 82px;
88
transition: box-shadow 0.2s;
99
transform-style: preserve-3d;
10+
height: 82px;
1011
border-bottom: 2px solid $light1;
12+
text-align: center;
1113

1214
.row {
13-
max-width: 1240px;
15+
max-width: 100%;
1416
}
1517

1618
h1 {
17-
margin: -0.125em 0 0.125em;
19+
margin: 0;
1820
line-height: 1;
21+
text-align: left;
1922
}
2023

2124
nav {
2225
height: 1em;
26+
text-align: center;
2327

2428
ul.inline-list {
25-
margin: 1em 0 0;
29+
margin: 1em auto 0;
30+
display: inline-block;
31+
width: auto;
32+
padding-right: 2em;
2633
}
2734

2835
li {
29-
margin-left: 5%;
30-
31-
a {
32-
@include helvetica;
33-
@include ripple;
34-
font-weight: bold;
35-
font-size: 0.825em;
36-
line-height: 1;
37-
letter-spacing: 0.03em;
38-
color: $dark2;
39-
40-
&:hover {
41-
color: $pink;
42-
}
36+
// margin-right: 3.5%;
37+
margin-left: 0;
38+
39+
&:last-child {
40+
margin-right: 0;
41+
}
42+
43+
a {
44+
@include klinicReg;
45+
@include ripple;
46+
font-size: 1.125em;
47+
line-height: 1;
48+
letter-spacing: 0.035em;
49+
color: $pink;
50+
margin-right: 3em;
4351

44-
&.active {
45-
color: $pink;
52+
&:hover {
53+
color: $pink;
54+
}
55+
56+
&.active {
57+
color: $pink;
4658

47-
&::after {
48-
width: 100%;
49-
opacity: 1;
50-
}
59+
&::after {
60+
width: 100%;
61+
opacity: 1;
62+
}
63+
}
64+
65+
&.dropdown {
66+
display: block;
67+
em {
68+
padding-left: 0.75em;
69+
margin-left: 0.425em;
70+
border-left: 1px dotted darken($light2, 10%);
71+
display: inline-block;
72+
}
73+
74+
.fa {
75+
font-size: 0.75em;
76+
display: inline-block;
77+
@include transition;
78+
}
79+
80+
&[aria-expanded=true] {
81+
.fa {
82+
transform: rotate(180deg);
5183
}
84+
}
5285
}
86+
}
5387
}
5488

5589
.button {
56-
margin: -1.25em 0 0;
57-
color: $pink;
90+
margin: -1.25em 0 0;
91+
color: $pink;
5892

59-
&:hover {
60-
border-color: $lightpink;
61-
}
93+
&:hover {
94+
border-color: $lightpink;
95+
}
6296
}
6397
}
6498
}
@@ -84,3 +118,109 @@
84118
transform: translateY(-100%);
85119
}
86120
}
121+
122+
ul.f-dropdown {
123+
display: none !important;
124+
}
125+
126+
ul.f-open-dropdown {
127+
display: block !important;
128+
position: fixed !important;
129+
top: 0px !important;
130+
left: 0 !important;
131+
right: 0 !important;
132+
padding: 85px 8.25% 0;
133+
max-width: 100% !important;
134+
width: 100%;
135+
z-index: 800 !important;
136+
box-shadow: none;
137+
background: white !important;
138+
border-bottom: 2px solid #f4f4f4;
139+
140+
.fa-times {
141+
position: fixed;
142+
top: 40px;
143+
right: 40px;
144+
color: lighten($dark1, 20%);
145+
font-size: 2em;
146+
}
147+
148+
&:before {
149+
display: none;
150+
}
151+
152+
li {
153+
text-align: center;
154+
margin: 0;
155+
display: inline-block;
156+
157+
&:hover {
158+
background: transparent;
159+
}
160+
161+
a {
162+
display: block;
163+
text-align: left;
164+
padding: 0.333em 0.25em 0.333em 0;
165+
font-size: 1.5em;
166+
background-color: transparent;
167+
min-height: 75px;
168+
overflow: hidden;
169+
position: relative;
170+
@include transition;
171+
172+
img {
173+
position: absolute;
174+
top: 47.5%;
175+
transform: translateY(-47.5%);
176+
left: 0;
177+
max-width: 45px;
178+
margin: 0 0.75em 0.5em 0;
179+
}
180+
181+
h3,
182+
p {
183+
margin: 0 0 0 3.75rem;
184+
width: 100%;
185+
display: block;
186+
text-align: left;
187+
}
188+
189+
h3 {
190+
@include klinicBold;
191+
font-size: 1em;
192+
}
193+
194+
p {
195+
@include helvetica;
196+
font-size: 0.425em;
197+
color: lighten($dark1, 33.33%);
198+
// max-width: 250px;
199+
}
200+
201+
&:after {
202+
display: block;
203+
content: " ";
204+
width: 1%;
205+
height: 4px;
206+
background: $pink;
207+
position: absolute;
208+
bottom: 4px;
209+
left: 50%;
210+
margin: 0 auto;
211+
opacity: 0;
212+
@include transition;
213+
}
214+
215+
&:hover {
216+
background-color: transparent !important;
217+
218+
&:after {
219+
width: 100%;
220+
left: 0;
221+
opacity: 1;
222+
}
223+
}
224+
}
225+
}
226+
}

‎themes/deis/static/scss/app.scss‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,6 @@
3030
@import 'footer';
3131

3232

33-
3433
// Deis Docs
3534
@import 'doc-layout';
3635
@import 'doc-sidebar';

‎themes/deis/topbar.html‎

Lines changed: 19 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -6,23 +6,25 @@ <h1><a href="/" class="logo"><img src="{{ base_url }}/static/img/svg/logo.svg" w
66
<div class="small-4 large-9 columns">
77

88
<nav class="nav navbar-nav navbar-right text-center">
9-
<ul class="inline-list hide-for-medium-down">
10-
<li>
11-
<a class="dropdown" data-dropdown="drop2" aria-controls="drop1" aria-expanded="false">Projects <em><i class="fa fa-caret-down"></i></em></a>
12-
</li>
13-
<li>
14-
<a href="/services" id="header-services" class="item" title="Support &amp; Services">Services</a>
15-
</li>
16-
<li>
17-
<a href="/community" id="header-community" class="item" title="Community">Community</a>
18-
</li>
19-
<li>
20-
<a href="/about" id="header-about" class="item" title="About">About</a>
21-
</li>
22-
<li>
23-
<a href="/blog" id="header-blog" class="item" title="Blog">Blog</a>
24-
</li>
25-
</ul>
9+
<div class="show-for-large-up">
10+
<ul class="inline-list">
11+
<li>
12+
<a class="dropdown" data-dropdown="drop2" aria-controls="drop1" aria-expanded="false">Projects <em><i class="fa fa-caret-down"></i></em></a>
13+
</li>
14+
<li>
15+
<a href="/services" id="header-services" class="item" title="Support &amp; Services">Services</a>
16+
</li>
17+
<li>
18+
<a href="/community" id="header-community" class="item" title="Community">Community</a>
19+
</li>
20+
<li>
21+
<a href="/about" id="header-about" class="item" title="About">About</a>
22+
</li>
23+
<li>
24+
<a href="/blog" id="header-blog" class="item" title="Blog">Blog</a>
25+
</li>
26+
</ul>
27+
</div>
2628

2729
<a class="right-off-canvas-toggle fa fa-bars show-for-medium-down" href="#" data-proofer-ignore></a>
2830
</nav>

0 commit comments

Comments
 (0)