diff --git a/src/styles/_config.sass b/src/styles/_config.sass index 40075a71..ff5f36bf 100644 --- a/src/styles/_config.sass +++ b/src/styles/_config.sass @@ -100,7 +100,11 @@ $screen-md-max: $screen-lg-min - 1 !default $sidebar-width: 40px !default /* Project specifics */ -$project_nav-width: 250px !default +$project_nav-width: 275px !default +$project_nav-width-lg: $project_nav-width * 1.2 !default +$project_nav-width-md: $project_nav-width +$project_nav-width-sm: $project_nav-width * 0.8 !default +$project_nav-width-xs: 100% !default $project-sidebar-width: 40px !default $project_header-height: 40px !default diff --git a/src/styles/_project.sass b/src/styles/_project.sass index 4ff4690a..8c4570e5 100644 --- a/src/styles/_project.sass +++ b/src/styles/_project.sass @@ -6,19 +6,6 @@ body.workshops #project-container +container-behavior -body.blog - background-color: white - - #project_nav, - #project_nav-container - +media-md - width: $project_nav-width * 1.4 - +media-sm - width: $project_nav-width * 1.1 - +media-xs - width: 100% - width: $project_nav-width * 1.5 - #project-container display: flex flex-direction: row @@ -38,10 +25,18 @@ body.blog flex-direction: column-reverse +#project_nav, #project_nav-container +media-lg - width: $project_nav-width * 1.33 + width: $project_nav-width-lg + +media-sm + width: $project_nav-width-sm + +media-xs + width: $project_nav-width-xs + width: $project_nav-width + +#project_nav-container +media-xs display: block width: 100% @@ -50,8 +45,6 @@ body.blog position: fixed z-index: $z-index-base + 5 - width: $project_nav-width - #project_sidebar width: $project-sidebar-width @@ -78,18 +71,6 @@ body.blog height: $project-sidebar-width position: relative - +media-xs - border-bottom: 2px solid transparent - +media-sm - border-bottom: 2px solid transparent - +media-md - border-left: 2px solid transparent - +media-lg - border-left: 2px solid transparent - - &:first-child - border-top: thin solid transparent - &:hover, &.active cursor: pointer @@ -124,10 +105,11 @@ body.blog /* Container for navigation on the left */ #project_nav +media-lg - width: $project_nav-width * 1.33 - + width: $project_nav-width-lg + +media-sm + width: $project_nav-width-sm +media-xs - width: initial + width: $project_nav-width-xs display: block left: 0