Try main element as full width

This commit is contained in:
Ryan Watters
2017-02-24 03:41:16 -06:00
parent aeaaa42ce5
commit 718ed72a3e
5 changed files with 67 additions and 24 deletions
+1 -1
View File
File diff suppressed because one or more lines are too long
@@ -1,7 +1,7 @@
aside#toc {
position: fixed;
max-width: 280px;
min-width: 200px;
max-width: $site-navigation-width;
min-width: $site-navigation-width;
overflow-y: scroll;
max-height: calc(100vh - #{$site-header-height} - 40px);
padding: {
@@ -20,8 +20,8 @@ aside#toc {
border-radius: 5px;
header.toc-header {
display: inline-block;
width:100%;
margin-top:24px;
width: 100%;
margin-top: 24px;
> a {
h3 {
margin-top: 0px;
@@ -41,7 +41,8 @@ aside#toc {
@include MQ(XL) {
box-shadow: none;
top: $site-header-height;
left: calc(#{$site-navigation-width} + #{$content-max-width} + 4em);
// left: calc(#{$site-navigation-width} + #{$content-max-width} + 4em);
right:0px;
bottom: auto;
opacity: 1;
min-height: calc(100vh - #{$site-header-height});
@@ -49,7 +50,7 @@ aside#toc {
transform: scale(1);
border-left: 1px solid $hugo-gray-light;
border-radius: 0px;
max-width:320px;
max-width: 320px;
}
}
@@ -20,17 +20,36 @@
}
}
// main.main {
// width: 90%;
// display: block;
// margin-left: auto;
// margin-right: auto;
// max-width: $content-max-width;
// position: relative;
// min-height:calc(100vh - #{$site-header-height * 2});
// // overflow-x: hidden;
// @include MQ(L) {
// margin-left: 2em;
// }
// }
main.main {
width: 90%;
display: block;
margin-left: auto;
margin-right: auto;
max-width: $content-max-width;
// max-width: $content-max-width;
position: relative;
min-height:calc(100vh - #{$site-header-height * 2});
// overflow-x: hidden;
@include MQ(L) {
margin-left: 2em;
@include MQ(XL) {
width:90%;
margin-right:0px;
max-width: calc(100vw - #{$site-navigation-width * 2} - 20px );
float:left;
padding-left:1.5em;
// padding-left:2em;
// padding-right:2em;
}
}
@@ -41,7 +60,7 @@ header.content-header {
position: relative;
margin-top: 24px;
overflow-x: hidden;
margin-bottom:1em;
margin-bottom: 1em;
}
.content-section-image-wrapper {
@@ -112,6 +131,6 @@ header.content-header {
margin-top: 1em;
}
em {
font-weight:bolder;
font-weight: bolder;
}
}
@@ -43,7 +43,7 @@
}
@include MQ(XL) {
&.withtoc {
max-width:calc(#{$content-max-width} + 4em);
max-width:calc(100vw - #{$site-navigation-width * 2});
}
}
}
@@ -1,20 +1,39 @@
.all-content-wrapper.home {
background-color: lighten($hugo-blue-light, 50%);
overflow-x:hidden;
overflow-x: hidden;
@include MQ(L) {
display: flex;
flex-direction: column;
}
}
main#homepage {
main#homepage.main {
width: 90%;
margin-bottom: 2.5em;
overflow-x:hidden;
overflow-x: hidden;
@include MQ(M) {
max-width: $M * .9;
max-width:calc(100vw - #{$site-navigation-width});
}
@include MQ(L) {
margin-left:auto;
margin-right:auto;
max-width: 860px * .9;
// max-width:calc(100vw - #{$site-navigation-width});
max-width: 100vw;
margin-left: auto;
margin-right: auto;
}
@include MQ(XL) {
// max-width:calc(100vw - #{$site-navigation-width});
max-width: 100vw;
margin-left: auto;
margin-right: auto;
}
// @include MQ(M) {
// max-width: $M * .9;
// }
// @include MQ(L) {
// margin-left:auto;
// margin-right:auto;
// max-width: 860px * .9;
// }
}
.homepage-image {
@@ -66,8 +85,8 @@ main#homepage {
margin-right: 10px;
img {
max-width: 60px;
margin-left:auto;
margin-right:auto;
margin-left: auto;
margin-right: auto;
}
@include MQ(M) {
max-width: 70px;
@@ -83,8 +102,8 @@ main#homepage {
line-height: 1.1;
margin-bottom: .5em;
padding-bottom: 0px;
padding-top:0px;
color:$base-font-color;
padding-top: 0px;
color: $base-font-color;
}
p {
font-size: .8em;
@@ -93,4 +112,8 @@ main#homepage {
color: lighten($base-font-color, 20%);
}
}
// @include MQ(L) {
// margin-left: auto;
// margin-right: auto;
// }
}