Commit 666aaf01 authored by Eliot Berriot's avatar Eliot Berriot 💬

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

parent 57446d37
......@@ -75,6 +75,9 @@
// see https://github.com/webpack/webpack/issues/215
@import "./vendor/media";
$desktop-sidebar-width: 300px;
$widedesktop-sidebar-width: 350px;
html,
body {
@include media("<desktop") {
......@@ -91,12 +94,25 @@ body {
margin-top: 2em;
}
.ui.wide.left.sidebar {
@include media(">desktop") {
width: $desktop-sidebar-width;
}
@include media(">widedesktop") {
width: $widedesktop-sidebar-width;
}
}
.main.pusher,
.footer {
@include media(">desktop") {
margin-left: 350px !important;
margin-left: $desktop-sidebar-width !important;
margin-top: 50px;
}
@include media(">widedesktop") {
margin-left: $widedesktop-sidebar-width !important;;
}
transform: none !important;
}
......@@ -118,11 +134,14 @@ body {
}
@include media(">desktop") {
position: fixed;
left: 350px;
left: $desktop-sidebar-width;
right: 0px;
top: 0px;
z-index: 99;
}
@include media(">widedesktop") {
left: $widedesktop-sidebar-width;
}
background-color: white;
.item {
padding-top: 1.5em;
......@@ -135,7 +154,10 @@ body {
bottom: 1em;
left: 1em;
@include media(">desktop") {
left: 350px;
left: $desktop-sidebar-width;
}
@include media(">widedesktop") {
left: $widedesktop-sidebar-width;
}
}
.main-pusher {
......@@ -147,7 +169,7 @@ body {
@include media(">tablet") {
padding: 2em;
}
@include media(">desktop") {
@include media(">widedesktop") {
padding: 3em;
}
}
......
......@@ -34,7 +34,8 @@
$breakpoints: (
'phone': 320px,
'tablet': 768px,
'desktop': 1024px
'desktop': 1024px,
'widedesktop': 1200px
) !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