Skip to content
This repository has been archived by the owner on Nov 30, 2021. It is now read-only.

Commit

Permalink
docs(styles): styling for topbar, responsive layout improvements
Browse files Browse the repository at this point in the history
  • Loading branch information
@flynnduism
flynnduism committed Nov 28, 2016
1 parent 955adb0 commit 04a539b
Show file tree
Hide file tree
Showing 7 changed files with 201 additions and 51 deletions.
2 changes: 1 addition & 1 deletion themes/deis/sidebar.html
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<nav class="sidebar hide-for-small">
<nav class="sidebar hide-for-medium-down">
<div class="sidebar-inner">
<h1><a href="/" class="logo"><img src="{{ base_url }}/static/img/svg/logo.svg" width="128px" height="41px" alt="Deis"></a></h1>

Expand Down
6 changes: 3 additions & 3 deletions themes/deis/static/css/styles.css
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion themes/deis/static/css/styles.css.map
View file

Large diffs are not rendered by default.

9 changes: 9 additions & 0 deletions themes/deis/static/scss/_doc-layout.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,15 @@ body {
min-height: 100%;
margin-bottom: -335px;

@media #{$small-only} {
padding-left: 5%;
padding-right: 5%;
}
@media #{$medium-only} {
padding-left: 5%;
padding-right: 5%;
}

&:after {
content: "";
display: block;
Expand Down
196 changes: 168 additions & 28 deletions themes/deis/static/scss/_header.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,58 +7,92 @@
height: 82px;
transition: box-shadow 0.2s;
transform-style: preserve-3d;
height: 82px;
border-bottom: 2px solid $light1;
text-align: center;

.row {
max-width: 1240px;
max-width: 100%;
}

h1 {
margin: -0.125em 0 0.125em;
margin: 0;
line-height: 1;
text-align: left;
}

nav {
height: 1em;
text-align: center;

ul.inline-list {
margin: 1em 0 0;
margin: 1em auto 0;
display: inline-block;
width: auto;
padding-right: 2em;
}

li {
margin-left: 5%;

a {
@include helvetica;
@include ripple;
font-weight: bold;
font-size: 0.825em;
line-height: 1;
letter-spacing: 0.03em;
color: $dark2;

&:hover {
color: $pink;
}
// margin-right: 3.5%;
margin-left: 0;

&:last-child {
margin-right: 0;
}

a {
@include klinicReg;
@include ripple;
font-size: 1.125em;
line-height: 1;
letter-spacing: 0.035em;
color: $pink;
margin-right: 3em;

&.active {
color: $pink;
&:hover {
color: $pink;
}

&.active {
color: $pink;

&::after {
width: 100%;
opacity: 1;
}
&::after {
width: 100%;
opacity: 1;
}
}

&.dropdown {
display: block;
em {
padding-left: 0.75em;
margin-left: 0.425em;
border-left: 1px dotted darken($light2, 10%);
display: inline-block;
}

.fa {
font-size: 0.75em;
display: inline-block;
@include transition;
}

&[aria-expanded=true] {
.fa {
transform: rotate(180deg);
}
}
}
}
}

.button {
margin: -1.25em 0 0;
color: $pink;
margin: -1.25em 0 0;
color: $pink;

&:hover {
border-color: $lightpink;
}
&:hover {
border-color: $lightpink;
}
}
}
}
Expand All @@ -84,3 +118,109 @@
transform: translateY(-100%);
}
}

ul.f-dropdown {
display: none !important;
}

ul.f-open-dropdown {
display: block !important;
position: fixed !important;
top: 0px !important;
left: 0 !important;
right: 0 !important;
padding: 85px 8.25% 0;
max-width: 100% !important;
width: 100%;
z-index: 800 !important;
box-shadow: none;
background: white !important;
border-bottom: 2px solid #f4f4f4;

.fa-times {
position: fixed;
top: 40px;
right: 40px;
color: lighten($dark1, 20%);
font-size: 2em;
}

&:before {
display: none;
}

li {
text-align: center;
margin: 0;
display: inline-block;

&:hover {
background: transparent;
}

a {
display: block;
text-align: left;
padding: 0.333em 0.25em 0.333em 0;
font-size: 1.5em;
background-color: transparent;
min-height: 75px;
overflow: hidden;
position: relative;
@include transition;

img {
position: absolute;
top: 47.5%;
transform: translateY(-47.5%);
left: 0;
max-width: 45px;
margin: 0 0.75em 0.5em 0;
}

h3,
p {
margin: 0 0 0 3.75rem;
width: 100%;
display: block;
text-align: left;
}

h3 {
@include klinicBold;
font-size: 1em;
}

p {
@include helvetica;
font-size: 0.425em;
color: lighten($dark1, 33.33%);
// max-width: 250px;
}

&:after {
display: block;
content: " ";
width: 1%;
height: 4px;
background: $pink;
position: absolute;
bottom: 4px;
left: 50%;
margin: 0 auto;
opacity: 0;
@include transition;
}

&:hover {
background-color: transparent !important;

&:after {
width: 100%;
left: 0;
opacity: 1;
}
}
}
}
}
1 change: 0 additions & 1 deletion themes/deis/static/scss/app.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,6 @@
@import 'footer';



// Deis Docs
@import 'doc-layout';
@import 'doc-sidebar';
Expand Down
36 changes: 19 additions & 17 deletions themes/deis/topbar.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,23 +6,25 @@ <h1><a href="/" class="logo"><img src="{{ base_url }}/static/img/svg/logo.svg" w
<div class="small-4 large-9 columns">

<nav class="nav navbar-nav navbar-right text-center">
<ul class="inline-list hide-for-medium-down">
<li>
<a class="dropdown" data-dropdown="drop2" aria-controls="drop1" aria-expanded="false">Projects <em><i class="fa fa-caret-down"></i></em></a>
</li>
<li>
<a href="/services" id="header-services" class="item" title="Support &amp; Services">Services</a>
</li>
<li>
<a href="/community" id="header-community" class="item" title="Community">Community</a>
</li>
<li>
<a href="/about" id="header-about" class="item" title="About">About</a>
</li>
<li>
<a href="/blog" id="header-blog" class="item" title="Blog">Blog</a>
</li>
</ul>
<div class="show-for-large-up">
<ul class="inline-list">
<li>
<a class="dropdown" data-dropdown="drop2" aria-controls="drop1" aria-expanded="false">Projects <em><i class="fa fa-caret-down"></i></em></a>
</li>
<li>
<a href="/services" id="header-services" class="item" title="Support &amp; Services">Services</a>
</li>
<li>
<a href="/community" id="header-community" class="item" title="Community">Community</a>
</li>
<li>
<a href="/about" id="header-about" class="item" title="About">About</a>
</li>
<li>
<a href="/blog" id="header-blog" class="item" title="Blog">Blog</a>
</li>
</ul>
</div>

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

0 comments on commit 04a539b

Please sign in to comment.