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

24
_includes/body-landing.html
View File

@ -1,20 +1,23 @@
<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="fan"></div>
<div class="container"> <div class="container">
<div class="row">
<div class="container-fluid">
<div class="navbar-header"> <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 <img
class="logo"
src="../images/docker-docs-logo.svg" src="../images/docker-docs-logo.svg"
alt="Docker Docs" alt="Docker Docs"
title="Docker Docs" title="Docker Docs"
/> />
</a>
</div> </div>
<div class="navbar-collapse collapse"> <div class="collapse navbar-collapse" id="header-content">
<ul class="primary nav navbar-nav"> <ul class="nav navbar-nav">
<li class="active"> <li class="active">
<a href="https://docs.docker.com/">Home</a> <a href="https://docs.docker.com/">Home</a>
</li> </li>
@ -38,10 +41,7 @@
</ul> </ul>
</div> </div>
</div> </div>
</div> </nav>
</div>
</div>
</header>
<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;

31
_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-brand {
padding-top: 12px;
padding-bottom: 12px;
}
.navbar-toggle {
margin: 15px;
height: 20px;
display: block;
@include md-width {
display: none;
}
}
@include md-width {
.navbar-nav > li > a { .navbar-nav > li > a {
font-weight: bold; font-weight: bold;
line-height: 25px;
padding-bottom: 11px; padding-bottom: 11px;
border-bottom-style: solid; border-bottom-style: solid;
border-bottom-width: 4px; border-bottom-width: 4px;
border-bottom-color: rgba(255, 255, 255, 0); border-bottom-color: rgba(255, 255, 255, 0);
} }
}
@include md-width {
.navbar-nav > li.active > a { .navbar-nav > li.active > a {
border-bottom-color: rgba(255, 255, 255, 0.5); border-bottom-color: rgba(255, 255, 255, 0.5);
} }
.logo {
margin: 12px 10px;
} }
.toggle-mode { .toggle-mode {