Influxdata
/
docs-v2
mirror of https://github.com/influxdata/docs-v2.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

tweaked responsive breakpoints and styles

pull/3/head
Scott Anderson 2019-01-04 10:34:59 -07:00
parent d5dedd080d
commit 9dc080a560
5 changed files with 26 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
assets/styles/layouts/_layout-article.scss
View File

@ -1,8 +1,9 @@
.article { .article {
flex-grow: 3; flex-grow: 1;
background: $article-bg; background: $article-bg;
border-radius: $border-radius 0 0 0; border-radius: $border-radius 0 0 0;
padding: 2rem 4rem 3rem; padding: 2rem 4rem 3rem;
width: 75%;
} }
.article--content{ .article--content{
@ -555,3 +556,13 @@
} }
} }
@include media(medium) {
.article { width: 100%; }
}
@media (min-width: 801px) and (max-width: 1200px) {
.article {
width: 70%;
}
}

18
assets/styles/layouts/_layout-sidebar.scss
View File

@ -2,7 +2,7 @@
display: block; display: block;
flex-grow: 1; flex-grow: 1;
padding: 0 1em; padding: 0 1em;
max-width: 25%; width: 25%;
&--search { &--search {
position: relative; position: relative;
@ -61,7 +61,7 @@
display: block; display: block;
position: relative; position: relative;
margin-top: .65rem; margin-top: .65rem;
background: $sidebar-contents; background: rgba($topnav-link, .5);
width: $line-width; width: $line-width;
height: $line-height; height: $line-height;
transition: all .3s; transition: all .3s;
@ -74,7 +74,7 @@
width: $line-width; width: $line-width;
height: $line-height; height: $line-height;
border-radius: 1px; border-radius: 1px;
background: $sidebar-contents; background: rgba($topnav-link, .5);
transform: rotate(0deg); transform: rotate(0deg);
transition: all .3s; transition: all .3s;
} }
@ -89,10 +89,10 @@
&:hover { &:hover {
.toggle-hamburger { .toggle-hamburger {
background: $sidebar-contents-hover; background: rgba($topnav-link, 1);
&:before, &:after { &:before, &:after {
background: $sidebar-contents-hover; background: rgba($topnav-link, 1);
} }
} }
} }
@ -214,7 +214,7 @@
@include media(medium) { @include media(medium) {
.sidebar { .sidebar {
max-width: 100%; width: 100%;
#nav-tree { #nav-tree {
height: 0; height: 0;
@ -235,3 +235,9 @@
display: none; display: none;
} }
} }
@media (min-width: 801px) and (max-width: 1200px) {
.sidebar {
width: 30%;
}
}

2
assets/styles/themes/_theme-dark.scss
View File

@ -28,8 +28,6 @@ $theme-switch-dark: none !default;
// Sidebar // Sidebar
$sidebar-search-border: $g5-pepper !default; $sidebar-search-border: $g5-pepper !default;
$sidebar-search-highlight: $b-pool !default; $sidebar-search-highlight: $b-pool !default;
$sidebar-contents: $g9-mountain !default;
$sidebar-contents-hover: $g20-white !default;
// Article Content // Article Content
$article-bg: $g3-castle !default; $article-bg: $g3-castle !default;

2
assets/styles/themes/_theme-light.scss
View File

@ -27,8 +27,6 @@ $theme-switch-dark: inline-block;
// Sidebar // Sidebar
$sidebar-search-border: $g15-platinum; $sidebar-search-border: $g15-platinum;
$sidebar-search-highlight: $b-pool; $sidebar-search-highlight: $b-pool;
$sidebar-contents: $g11-sidewalk !default;
$sidebar-contents-hover: $b-pool !default;
// Article Content // Article Content
$article-bg: $g20-white; $article-bg: $g20-white;

4
assets/styles/tools/media-query-mixins.scss
View File

@ -3,10 +3,10 @@
@media (max-width: 600px) { @content ; } @media (max-width: 600px) { @content ; }
} }
@else if $size == medium { @else if $size == medium {
@media (max-width: 980px) { @content ; } @media (max-width: 800px) { @content ; }
} }
@else if $size == large_min { @else if $size == large_min {
@media (min-width: 981px) { @content ; } @media (min-width: 801px) { @content ; }
} }
@else if $size == large { @else if $size == large {
@media (max-width: 1280px) { @content ; } @media (max-width: 1280px) { @content ; }