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

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -20,7 +20,7 @@
} catch (e) {}
</script>
</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 class="container-fluid">
<div class="navbar-header">
@ -57,7 +57,7 @@
<%= yield %>
<div class="clearfix"></div>
<footer class="dark-background">
<footer id="footer" class="dark-background">
<div class="container-fluid">
<div class="row">
<div class="col-md-12">