Verified Commit 666aaf01 authored by Agate's avatar Agate 💬

Slightly smaller sidebar on small desktop to leave more space for content

parent 57446d37
...@@ -75,6 +75,9 @@ ...@@ -75,6 +75,9 @@
// see https://github.com/webpack/webpack/issues/215 // see https://github.com/webpack/webpack/issues/215
@import "./vendor/media"; @import "./vendor/media";
$desktop-sidebar-width: 300px;
$widedesktop-sidebar-width: 350px;
html, html,
body { body {
@include media("<desktop") { @include media("<desktop") {
...@@ -91,12 +94,25 @@ body { ...@@ -91,12 +94,25 @@ body {
margin-top: 2em; margin-top: 2em;
} }
.ui.wide.left.sidebar {
@include media(">desktop") {
width: $desktop-sidebar-width;
}
@include media(">widedesktop") {
width: $widedesktop-sidebar-width;
}
}
.main.pusher, .main.pusher,
.footer { .footer {
@include media(">desktop") { @include media(">desktop") {
margin-left: 350px !important; margin-left: $desktop-sidebar-width !important;
margin-top: 50px; margin-top: 50px;
} }
@include media(">widedesktop") {
margin-left: $widedesktop-sidebar-width !important;;
}
transform: none !important; transform: none !important;
} }
...@@ -118,11 +134,14 @@ body { ...@@ -118,11 +134,14 @@ body {
} }
@include media(">desktop") { @include media(">desktop") {
position: fixed; position: fixed;
left: 350px; left: $desktop-sidebar-width;
right: 0px; right: 0px;
top: 0px; top: 0px;
z-index: 99; z-index: 99;
} }
@include media(">widedesktop") {
left: $widedesktop-sidebar-width;
}
background-color: white; background-color: white;
.item { .item {
padding-top: 1.5em; padding-top: 1.5em;
...@@ -135,7 +154,10 @@ body { ...@@ -135,7 +154,10 @@ body {
bottom: 1em; bottom: 1em;
left: 1em; left: 1em;
@include media(">desktop") { @include media(">desktop") {
left: 350px; left: $desktop-sidebar-width;
}
@include media(">widedesktop") {
left: $widedesktop-sidebar-width;
} }
} }
.main-pusher { .main-pusher {
...@@ -147,7 +169,7 @@ body { ...@@ -147,7 +169,7 @@ body {
@include media(">tablet") { @include media(">tablet") {
padding: 2em; padding: 2em;
} }
@include media(">desktop") { @include media(">widedesktop") {
padding: 3em; padding: 3em;
} }
} }
......
...@@ -34,7 +34,8 @@ ...@@ -34,7 +34,8 @@
$breakpoints: ( $breakpoints: (
'phone': 320px, 'phone': 320px,
'tablet': 768px, 'tablet': 768px,
'desktop': 1024px 'desktop': 1024px,
'widedesktop': 1200px
) !default; ) !default;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment