tabs + buttons

Ekkarat1988 · Feb 28, 2017 · 193fee1 · 193fee1
1 parent 62a3055
commit 193fee1
Show file tree

Hide file tree

Showing 5 changed files with 95 additions and 21 deletions.
diff --git a/_includes/global-header.html b/_includes/global-header.html
@@ -81,7 +81,8 @@ <h1>Docker's Documentation</h1>
                 </form>
             </div>
             <div id="tabs">
-                <ul class="tabs nav navbar-nav navbar-collapse collapse navbar-left">
+                <!-- <ul class="tabs nav navbar-nav navbar-collapse collapse navbar-left"> -->
+                <ul class="tabs nav navbar-nav navbar-collapse navbar-left">
                   {% include treebuilder.html %}
                 </ul>
             </div>

diff --git a/css/style.css b/css/style.css
@@ -101,10 +101,10 @@ p {
 
 @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) {
     h1 {
-        font-size: 26px;
+        font-size: 24px;
     }
     h2 {
-        font-size: 22px;
+        font-size: 20px;
     }
     h3 {
         font-size: 18px;
@@ -556,19 +556,19 @@ img {
   width: 260px;
 }
 
-@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) {
+/*@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) {
   .sidebar-home {
     display: none;
   }
-}
+}*/
 
-@media only screen
+/*@media only screen
 and (min-device-width : 768px)
 and (max-device-width : 1024px)  {
   .sidebar-home {
     display: none;
   }
-}
+}*/
 
 .sidebar-home .affix {
     background-color: #FBFBFC;
@@ -688,7 +688,7 @@ section.section {
 @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) {
     .content {
         padding: 55px 35px 20px 20px;
-        width: 320px;
+        max-width: 390px;
     }
 }
 .wrapper {
@@ -1313,7 +1313,7 @@ i.fa.fa-indent, i.fa.fa-outdent {
 
 .component-container {
     padding: 0;
-    margin: 0;
+    margin: 0 0 50px;
     width: 100%;
 }
 
@@ -1334,7 +1334,8 @@ i.fa.fa-indent, i.fa.fa-outdent {
 }
 
 .component, .component-full {
-    border: 1px solid rgba(204, 204, 204, 0.46);
+    background: #FBFBFC;
+    /*border: 1px solid rgba(204, 204, 204, 0.46);*/
 }
 
 .component-full-icon {
@@ -1532,7 +1533,9 @@ div#autocompleteResults span {
 }
 
 .text-link {
-    padding: 5px;
+    color: #969696;
+    padding: 10px 0 0 2px;
+    float: left;
 }
 
 #feedback {
@@ -1710,6 +1713,75 @@ footer {
     }
 }
 
+
+/*
+*
+* small displays  **********************************************************
+*
+*/
+
+@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) {
+    .HolyGrail-content {
+        padding: 0px 23px 50px 27px;
+    }
+    .h1, .h2, .h3, h1, h2, h3 {
+        margin-top: 10px;
+        margin-bottom: 0px;
+    }
+    .nav-secondary-tabs.affix {
+        background: #0C5176;
+        box-shadow: 0 0 4px rgba(0, 0, 0, .14), 0 4px 8px rgba(0, 0, 0, .28);
+        top: 0;
+        position: fixed;
+        z-index: 100;
+        height: 55px;
+    }
+    .navbar-nav {
+        margin: 0 -15px;
+    }
+    .tabs {
+        padding: 0px 0px 0 15px;
+        float: none;
+        width: auto;
+    }
+    .tabs li a {
+        color: #fff;
+        padding: 15px 6px 10px 5px;
+        float: left;
+        opacity: 0.7;
+        font-weight: 600;
+        font-size: 12px;
+    }
+    .search-form, .ctrl-right {
+        display: none;
+    }
+    .main-content {
+        padding: 0px 5px 25px 20px;
+    }
+    .block {
+        float: left;
+        padding: 5px 30px 5px 15px;
+    }
+}
+
+/*
+*
+* medium displays  **********************************************************
+*
+*/
+
+@media (max-width: 767px) {
+    .navbar-nav .open .dropdown-menu .dropdown-header, .navbar-nav .open .dropdown-menu>li>a {
+        background: red;
+    }
+    .sidebar-home {
+        background-color: #FBFBFC;
+        border-right: 1px solid rgba(204, 204, 204, 0.29);
+        width: 210px;
+    }
+}
+
+
 /*
 *
 * Bootstrap Overrides : super embarrassing  ***********************************************************************
@@ -1747,6 +1819,7 @@ footer {
     padding: 5px 15px;
     display: block;
 }
+
 .btn-default:hover {
     color: #fff!important;
     background-color: transparent!important;
@@ -1756,15 +1829,15 @@ footer {
 }
 
 .btn-group.open .dropdown-toggle {
-    -webkit-box-shadow: inset 0 3px 5px rgba(0,0,0,.125);
-    box-shadow: inset 0 3px 5px rgba(0,0,0,.125);
+    -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
+    box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
     background: trr;
     background: transparent;
     color: #fff;
     box-shadow: none;
 }
 
-.btn-default:focus,.btn-default.active, .btn-default:active, .open>.dropdown-toggle.btn-default:focus, .open>.dropdown-toggle.btn-default:hover {
+.btn-default:focus, .btn-default.active, .btn-default:active, .open>.dropdown-toggle.btn-default:focus, .open>.dropdown-toggle.btn-default:hover {
     color: #fff!important;
     background-color: transparent!important;
     border-color: none!important;

diff --git a/docker-for-windows/install.md b/docker-for-windows/install.md
@@ -50,12 +50,12 @@ beta channels, see the
   </tr>
   <tr valign="top">
   <td width="50%">
-  <a class="button darkblue-btn" href="https://download.docker.com/win/stable/InstallDocker.msi">Get Docker for Windows (stable)</a><br><br>
-  <a href="https://download.docker.com/win/stable/InstallDocker.msi.sha256sum"><font color="#BDBDBD" size="-1">Download checksum: InstallDocker.msi SHA256</font></a>
+  <a class="button primary-btn" href="https://download.docker.com/win/stable/InstallDocker.msi">Get Docker for Windows (stable)</a><br><br>
+  <a class="text-link"  href="https://download.docker.com/win/stable/InstallDocker.msi.sha256sum">Download checksum: InstallDocker.msi SHA256</a>
   </td>
   <td width="50%">
-  <a class="button darkblue-btn" href="https://download.docker.com/win/beta/InstallDocker.msi">Get Docker for Windows (beta)</a><br><br>
-  <a href="https://download.docker.com/win/beta/InstallDocker.msi.sha256sum"><font color="#BDBDBD" size="-1">Download checksum: InstallDocker.msi SHA256</font></a>
+  <a class="button primary-btn" href="https://download.docker.com/win/beta/InstallDocker.msi">Get Docker for Windows (beta)</a><br><br>
+  <a class="text-link" href="https://download.docker.com/win/beta/InstallDocker.msi.sha256sum">Download checksum: InstallDocker.msi SHA256</a>
   </td>
   </tr>
 </table>

diff --git a/index.md b/index.md
@@ -10,7 +10,7 @@ Docker packages your app with its dependencies, freeing you from worrying about
 system configuration, and making your app more portable.
 
 <div class="row">
-<div class="col-md-6">
+<div class="col-md-6 block">
 {% capture basics %}
 ### Learn the basics of Docker
 
@@ -21,7 +21,7 @@ tutorial stops short of teaching you how to deploy applications.
 {% capture basics %}[Start the basic tutorial](/engine/getstarted/){: class="button outline-btn"}{% endcapture %}{{ basics | markdownify }}
 </div>
 
-<div class="col-md-6">
+<div class="col-md-6 block">
 {% capture apps %}
 ### Define and deploy applications
 

diff --git a/toolbox/toolbox_install_windows.md b/toolbox/toolbox_install_windows.md
@@ -15,7 +15,7 @@ If you have not done so already, download the installer here:
 <table style="width:50%; border:0">
   <tr valign="top">
     <td width="100%" style="font-size: medium; font-family: arial;  text-align: center; background-color: #F9FAFB">
-    <a class="button darkblue-btn" href="https://download.docker.com/win/stable/DockerToolbox.exe">Get Docker Toolbox for Windows</a>
+    <a class="button primary-btn" href="https://download.docker.com/win/stable/DockerToolbox.exe">Get Docker Toolbox for Windows</a>
     </td>
   </tr>
 </table>