Commit d2d46cce authored by Vasily Belolapotkov's avatar Vasily Belolapotkov

improve styling for mobile and desktop

parent 77540992
......@@ -36,6 +36,20 @@ body.dark {
}
}
$tablet-width: 768px;
@mixin mobile {
@media (max-width: #{$tablet-width - 1}) {
@content;
}
}
@mixin tablet {
@media (min-width: #{$tablet-width}) {
@content;
}
}
a {
text-decoration: none;
@include linkColor($linkColor);
......@@ -46,16 +60,43 @@ body.dark a {
}
#root {
width: 600px;
padding: 20px;
max-width: 600px;
padding: 10px 10px 75px;
position: relative;
margin: 0 auto;
@include tablet {
padding-bottom: 10px;
}
}
.theme-switcher {
position: absolute;
top: 20px;
position: fixed;
bottom: 0;
left: 0;
right: 0;
padding: 15px 10px;
padding: 10px 10px 40px;
background-color: $bodyBgLight;
z-index: 1;
text-align: center;
font-size: 1.25rem;
@include tablet {
position: absolute;
top: 10px;
right: 0;
bottom: auto;
left: auto;
padding: 15px 10px;
text-align: left;
font-size: 1rem;
}
}
body.dark .theme-switcher {
background-color: $bodyBgDark;
}
.chart-container {
......@@ -216,6 +257,7 @@ body.dark .preview-window {
padding: $controlVPadding $controlHPadding;
border-radius: $controlBorderR;
margin-top: 0.5rem;
margin-right: $controlHPadding;
border: $controlBorderW solid $lightgrey;
cursor: pointer;
......
......@@ -16,6 +16,9 @@ module.exports = {
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
title: 'SVG Charts',
meta: {
viewport: 'width=device-width, initial-scale=1, shrink-to-fit=no'
}
}),
],
......
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