iSharkFly-Docs
/
packer-cn
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

flexbox for fluid layout

This commit is contained in:
captainill 2015-11-10 02:02:08 -08:00
parent 18e875f3aa
commit 285fab249a
8 changed files with 53 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

90
website/source/assets/stylesheets/_columns.scss
View File

@ -1,50 +1,40 @@
// .container-xs-height { #main-content{
// display:table; display: flex;
// padding-left:0px; flex: 1;
// padding-right:0px;
// } #sidebar,
// .docs-body{
// flex: 1;
// .col-xs-height { }
// display:table-cell; }
// float:none;
// } @media (max-width: 992px) {
// #main-content{
// @media (min-width: 768px) { #sidebar{
// .container-sm-height { max-width: 280px;
// display:table; }
// padding-left:0px; }
// padding-right:0px; }
// }
// @media (max-width: 768px) {
// .col-sm-height { #main-content{
// display:table-cell; flex-direction: column;
// float:none;
// } #sidebar,
// } .docs-body{
// width: 100%;
// @media (min-width: 992px) { max-width: none;
// .container-md-height { }
// display:table;
// padding-left:0px; #sidebar{
// padding-right:0px; li {
// } &:last-child{
// border-bottom: none;
// .col-md-height { }
// display:table-cell; > *{
// float:none; margin-left: 0;
// } }
// } }
// }
// @media (min-width: 1200px) { }
// .container-lg-height { }
// display:table;
// padding-left:0px;
// padding-right:0px;
// }
//
// .col-lg-height {
// display:table-cell;
// float:none;
// }
// }

3
website/source/assets/stylesheets/_components.scss
View File

@ -171,6 +171,7 @@ header .header {
@extend .white-background; @extend .white-background;
.docs-content { .docs-content {
flex-direction: column;
padding: $docs-top-margin 80px; padding: $docs-top-margin 80px;
display: block; display: block;
@ -270,7 +271,7 @@ header .header {
height: $nav-height; height: $nav-height;
border-top: $border; border-top: $border;
font-size: 20px; font-size: 20px;
margin: 0 -15px -40px -15px; margin: 0 -15px 0 -15px;
display: block; display: block;
h4 { h4 {

1
website/source/assets/stylesheets/_nav.scss
View File

@ -5,6 +5,7 @@
// -------------------------------------------------- // --------------------------------------------------
#header { #header {
flex-direction: row;
background-color: $black; background-color: $black;
.navbar-brand { .navbar-brand {
.logo{ .logo{

4
website/source/assets/stylesheets/_sidebar.scss
View File

@ -1,10 +1,12 @@
#sidebar { #sidebar {
min-height: 100%;
max-width: 480px;
$border: 1px solid $gray-dark; $border: 1px solid $gray-dark;
font-size: 16px; font-size: 16px;
font-family: $mono; font-family: $mono;
color: $gray-light; color: $gray-light;
background-color: $sidebar-background-color; background-color: $sidebar-background-color;
min-height: 100%;
h2 { h2 {
color: $green; color: $green;

4
website/source/assets/stylesheets/_styles.scss
View File

@ -5,7 +5,9 @@
html, html,
body { body {
margin: 0; margin: 0;
height: 100%; display: flex;
min-height: 100vh;
flex-direction: column;
} }
html { html {

2
website/source/assets/stylesheets/hashicorp-shared/_project-utility.scss
View File

@ -11,7 +11,7 @@ $project-logo-pad-left: 8px;
// Mixins // Mixins
@mixin project-a-style{ @mixin project-a-style{
color: $white; color: $white;
font-weight: 300; font-weight: 400;
opacity: .75; opacity: .75;
&:hover{ &:hover{

4
website/source/layouts/inner.erb
View File

@ -1,6 +1,5 @@
<% wrap_layout :layout do %> <% wrap_layout :layout do %>
<div class="docs-wrapper container-fluid"> <div id="main-content" class="docs-wrapper">
<div class="row">
<div id="sidebar" class="col-sm-3 col-md-3"> <div id="sidebar" class="col-sm-3 col-md-3">
<%= yield_content :sidebar %> <%= yield_content :sidebar %>
</div> </div>
@ -24,6 +23,5 @@
</div> </div>
<% end %> <% end %>
</div> </div>
</div>
</div> </div>
<% end %> <% end %>

4
website/source/layouts/layout.erb
View File

@ -20,7 +20,7 @@
} catch (e) {} } catch (e) {}
</script> </script>
</head> </head>
<body> <body id="page-<%= current_page.data.page_title ? "#{current_page.data.page_title}" : "home" %>" class="page-<%= current_page.data.page_title ? "#{current_page.data.page_title} layout-#{current_page.data.layout} page-sub" : "home layout-#{current_page.data.layout}" %>">
<div id="header" class="navigation white <%= current_page.data.page_title == "home" ? "" : "navbar-static-top" %>"> <div id="header" class="navigation white <%= current_page.data.page_title == "home" ? "" : "navbar-static-top" %>">
<div class="container-fluid"> <div class="container-fluid">
<div class="navbar-header"> <div class="navbar-header">
@ -57,7 +57,7 @@
<%= yield %> <%= yield %>
<div class="clearfix"></div> <div class="clearfix"></div>
<footer class="dark-background"> <footer id="footer" class="dark-background">
<div class="container-fluid"> <div class="container-fluid">
<div class="row"> <div class="row">
<div class="col-md-12"> <div class="col-md-12">