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

6
_scss/_breakpoint.scss
View File

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

45
_scss/_landing.scss
View File

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