docker
/
docs
mirror of https://github.com/docker/docs.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

landing-page: make header responsive 

Signed-off-by: Jérémie Drouet <jeremie.drouet@gmail.com>
This commit is contained in:
Jérémie Drouet 2020-05-12 14:09:42 +02:00
parent 5389d768e0
commit c03af2d11f
3 changed files with 82 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

82
_includes/body-landing.html
View File

@ -1,47 +1,47 @@
<body ng-app="Docker" ng-controller="DockerController" id="landing"> <body ng-app="Docker" ng-controller="DockerController" id="landing">
<header> <nav class="navbar header">
<div class="header"> <div class="container">
<div class="fan"></div> <div class="navbar-header">
<div class="container"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#header-content" aria-expanded="false">
<div class="row"> <span class="sr-only">Toggle navigation</span>
<div class="container-fluid"> <span class="icon-bar"></span>
<div class="navbar-header"> <span class="icon-bar"></span>
<img <span class="icon-bar"></span>
class="logo" </button>
src="../images/docker-docs-logo.svg" <a class="navbar-brand" href="/">
alt="Docker Docs" <img
title="Docker Docs" src="../images/docker-docs-logo.svg"
/> alt="Docker Docs"
</div> title="Docker Docs"
<div class="navbar-collapse collapse"> />
<ul class="primary nav navbar-nav"> </a>
<li class="active"> </div>
<a href="https://docs.docker.com/">Home</a> <div class="collapse navbar-collapse" id="header-content">
</li> <ul class="nav navbar-nav">
<li> <li class="active">
<a href="https://docs.docker.com/develop/">Guides</a> <a href="https://docs.docker.com/">Home</a>
</li> </li>
<li> <li>
<a href="https://docs.docker.com/engine/">Product Manual</a> <a href="https://docs.docker.com/develop/">Guides</a>
</li> </li>
<li> <li>
<a href="https://docs.docker.com/reference/">Reference</a> <a href="https://docs.docker.com/engine/">Product Manual</a>
</li> </li>
<li> <li>
<a href="https://www.docker.com/blog/">Articles</a> <a href="https://docs.docker.com/reference/">Reference</a>
</li> </li>
</ul> <li>
<ul class="nav navbar-nav navbar-right"> <a href="https://www.docker.com/blog/">Articles</a>
<li> </li>
{% include theme-switch.html %} </ul>
</li> <ul class="nav navbar-nav navbar-right">
</ul> <li>
</div> {% include theme-switch.html %}
</div> </li>
</div> </ul>
</div> </div>
</div> </div>
</header> </nav>
<section class="hero container"> <section class="hero container">
<div class="row justify-content-center"> <div class="row justify-content-center">

6
_scss/_breakpoint.scss
View File

@ -8,6 +8,12 @@ $xl-min-width: 1200px;
@content; @content;
} }
} }
@mixin before-md-width {
@media (max-width: $md-min-width - 1) {
@content;
}
}
@mixin md-width { @mixin md-width {
@media (min-width: $md-min-width) { @media (min-width: $md-min-width) {
@content; @content;

45
_scss/_landing.scss
View File

@ -18,25 +18,50 @@ body#landing {
.header { .header {
background-color: $light-blue; background-color: $light-blue;
border: unset;
border-radius: unset;
height: unset;
@include before-md-width {
.container {
width: unset;
}
}
a, .toggle-mode { a, .toggle-mode {
color: white; color: white;
} }
.navbar-nav > li > a { .navbar-brand {
font-weight: bold; padding-top: 12px;
padding-bottom: 11px; padding-bottom: 12px;
border-bottom-style: solid;
border-bottom-width: 4px;
border-bottom-color: rgba(255, 255, 255, 0);
} }
.navbar-nav > li.active > a { .navbar-toggle {
border-bottom-color: rgba(255, 255, 255, 0.5); margin: 15px;
height: 20px;
display: block;
@include md-width {
display: none;
}
} }
.logo { @include md-width {
margin: 12px 10px; .navbar-nav > li > a {
font-weight: bold;
line-height: 25px;
padding-bottom: 11px;
border-bottom-style: solid;
border-bottom-width: 4px;
border-bottom-color: rgba(255, 255, 255, 0);
}
}
@include md-width {
.navbar-nav > li.active > a {
border-bottom-color: rgba(255, 255, 255, 0.5);
}
} }
.toggle-mode { .toggle-mode {