diff --git a/src/.vuepress/components/DownloadButtons.vue b/src/.vuepress/components/DownloadButtons.vue index 8828d644..1c0ab2ce 100644 --- a/src/.vuepress/components/DownloadButtons.vue +++ b/src/.vuepress/components/DownloadButtons.vue @@ -1,5 +1,5 @@ - - diff --git a/src/.vuepress/config/plugins.js b/src/.vuepress/config/plugins.js index 7beb54be..7fb08fb0 100644 --- a/src/.vuepress/config/plugins.js +++ b/src/.vuepress/config/plugins.js @@ -17,7 +17,7 @@ module.exports = [ { type: "expander", before: info => - `
${info}`, + `
${info}`, after: "
" } ], diff --git a/src/.vuepress/enhanceApp.js b/src/.vuepress/enhanceApp.js index 69fbc9f9..60788608 100644 --- a/src/.vuepress/enhanceApp.js +++ b/src/.vuepress/enhanceApp.js @@ -1,5 +1,4 @@ -import './styles/index.scss'; -import './styles/fonts.scss' +import './styles/fonts.styl' import { VueAgile } from 'vue-agile' diff --git a/src/.vuepress/styles/fonts.scss b/src/.vuepress/styles/fonts.scss deleted file mode 100644 index 46c6d0b1..00000000 --- a/src/.vuepress/styles/fonts.scss +++ /dev/null @@ -1,22 +0,0 @@ -@font-face { - font-family: "Material Icons"; - font-style: normal; - font-weight: 400; - src: url("~material-design-icons/iconfont/MaterialIcons-Regular.eot"); - src: local('Material Icons'), - local('MaterialIcons-Regular'), - url("~material-design-icons/iconfont/MaterialIcons-Regular.woff2") format("woff2"), - url("~material-design-icons/iconfont/MaterialIcons-Regular.woff") format("woff"), - url("~material-design-icons/iconfont/MaterialIcons-Regular.ttf") format("truetype"), - url("~material-design-icons/iconfont/MaterialIcons-Regular.svg#MaterialIcons-Regular") format("svg"); -} - -@font-face { - font-family: "Material Design Icons"; - src: url("~@mdi/font/fonts/materialdesignicons-webfont.eot"); - src: local('Material Design Icons'), - local('Material-Design-Icons'), - url("~@mdi/font/fonts/materialdesignicons-webfont.woff2") format("woff2"), - url("~@mdi/font/fonts/materialdesignicons-webfont.woff") format("woff"), - url("~@mdi/font/fonts/materialdesignicons-webfont.ttf") format("truetype"); -} diff --git a/src/.vuepress/styles/fonts.styl b/src/.vuepress/styles/fonts.styl new file mode 100644 index 00000000..f5a98afe --- /dev/null +++ b/src/.vuepress/styles/fonts.styl @@ -0,0 +1,11 @@ +@font-face + font-family 'Material Icons' + font-style normal + font-weight 400 + src url('~material-design-icons/iconfont/MaterialIcons-Regular.eot') + src local('Material Icons'), local('MaterialIcons-Regular'), url('~material-design-icons/iconfont/MaterialIcons-Regular.woff2') format('woff2'), url('~material-design-icons/iconfont/MaterialIcons-Regular.woff') format('woff'), url('~material-design-icons/iconfont/MaterialIcons-Regular.ttf') format('truetype'), url('~material-design-icons/iconfont/MaterialIcons-Regular.svg#MaterialIcons-Regular') format('svg') + +@font-face + font-family 'Material Design Icons' + src url('~@mdi/font/fonts/materialdesignicons-webfont.eot') + src local('Material Design Icons'), local('Material-Design-Icons'), url('~@mdi/font/fonts/materialdesignicons-webfont.woff2') format('woff2'), url('~@mdi/font/fonts/materialdesignicons-webfont.woff') format('woff'), url('~@mdi/font/fonts/materialdesignicons-webfont.ttf') format('truetype') diff --git a/src/.vuepress/styles/index.scss b/src/.vuepress/styles/index.scss deleted file mode 100644 index dab4fb70..00000000 --- a/src/.vuepress/styles/index.scss +++ /dev/null @@ -1,125 +0,0 @@ -.centered { - text-align: center; -} - -.bold { - font-weight: bold; -} - -.custom-block.tip { - border-color: #2E84BF !important; -} - -.home .hero img { - max-height: 120px !important; -} - -.badge.default-indicator { - background-color: #2E84BF !important; -} - -.badge.version-indicator { - background-color: #000000 !important; -} - -.file-tree { - font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace; - font-size: 0.85rem; - - li, ul { - position: relative; - } - - li { - margin: 0; - padding-left: 1rem; - font-weight: bold; - - &.file { - font-weight: normal; - } - - &::before, &::after { - content: ""; - position: absolute; - left: 0em; - } - - &::before { - border-top: 1px solid black; - top: 0.7em; - width: 0.5em; - height: 0; - } - - &:last-child::after { - height: 0.7em; - } - - &::after { - top: 0px; - border-left: 1px solid black; - height: 100%; - width: 0px; - } - } - - ul { - margin-left: 1em; - } - - & > li:first-child::before, & > li:first-child::after { - content: none; - } -} - -.file-tree, .file-tree ul { - list-style: none; - padding: 0; -} - -.side-by-side { - display: flex; - align-content: middle; - justify-content: center; - - & > * { - width: 50%; - } - - & > * + * { - border-left: 1px solid #aaa; - } -} - -@media (max-width: 767px) { - .side-by-side { - flex-direction: column; - - & > * { - width: 100%; - } - - & > * + * { - margin-top: 0; - padding-top: 1em; - border-left: none; - border-top: 1px solid #aaa; - } - } -} - -.no-select { - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; -} - -a.nav-link.action-button.secondary { - margin-top: .5em; - font-family: "Open Sans", Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; - font-size: 1.125em; - border-radius: .3125em; - border-bottom: none; -} diff --git a/src/.vuepress/styles/index.styl b/src/.vuepress/styles/index.styl index 1c58d923..2f452dd3 100644 --- a/src/.vuepress/styles/index.styl +++ b/src/.vuepress/styles/index.styl @@ -1,37 +1,123 @@ -.guide - margin 1rem 0 - padding .1rem 1.5rem - border-radius 0.4rem - background-color #f0f4f8 - .title - font-weight bold +// Custom rules +user-select() + -webkit-user-select arguments + -moz-user-select arguments + -ms-user-select arguments + user-select arguments +// Custom block containers .custom-block + &.tip + &.warning + &.error + &.danger + border-radius 0.4rem &.aside color transparentify($textColor, 0.4) font-size 0.9rem text-align right -customBlockBorderRadius = '.custom-block.tip, .custom-block.warning, .custom-block.error' - -{customBlockBorderRadius} - border-radius 0rem 0.4rem 0.4rem 0rem - -.expander.content - .expander.expansion +// Guide container +.guide + background-color $containerBackground + border-radius 0.4rem + margin 1rem 0 + padding 0.1rem 1.5rem + .title font-weight bold -.expander.content +// Expander container +.expander + background-color $containerBackground + border-radius 0.4rem margin 1rem 0 padding 1rem 1.5rem - border-radius 0.4rem - background-color #f0f4f8 + .expansion + user-select none + font-weight bold + &:focus + outline none -.expander.expansion:focus - outline none !important +// File tree +.file-tree + font-family source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace + font-size 0.85rem + list-style none + padding 0 + li + ul + position relative + li + font-weight bold + margin 0 + padding-left 1rem + &.file + font-weight normal + &::before + &::after + content '' + left 0 + position absolute + &::before + border-top 1px solid #000000 + height 0 + top 0.7em + width 0.5em + &:last-child::after + height 0.7em + &::after + border-left 1px solid #000000 + height 100% + top 0 + width 0 + ul + list-style none + margin-left 1em + padding 0 + & > li:first-child::before + & > li:first-child::after + content none -.expander.expansion - -webkit-user-select none - -moz-user-select none - -ms-user-select none - user-select none +.side-by-side + align-content middle + display flex + justify-content center + & > * + width 50% + & > * + * + border-left 1px solid #aaaaaa + @media (max-width: $MQMobile) + flex-direction column + & > * + width 100% + & > * + * + border-left none + border-top 1px solid #aaaaaa + margin-top 0 + padding-top 1em + +// Badge styling +.badge + &.default-indicator + background-color $accentColor !important + &.version-indicator + background-color $badgeVersionColor !important + +// Index changes +main.home + .hero img + max-height 8em + .action a.nav-link.action-button.secondary + border-bottom none + border-radius 0.3125em + font-family 'Open Sans', Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif + font-size 1.125em + margin-top 0.5em + +// Center align class +.centered + text-align center + +// Bold class +.bold + font-weight bold diff --git a/src/.vuepress/styles/palette.styl b/src/.vuepress/styles/palette.styl index 5adde596..9d659f97 100644 --- a/src/.vuepress/styles/palette.styl +++ b/src/.vuepress/styles/palette.styl @@ -1 +1,22 @@ +// Colors $accentColor = #2E84BF +$textColor = #2c3e50 +$borderColor = #eaecef +$codeBgColor = #282c34 +$arrowBgColor = #ccc +$badgeTipColor = $accentColor +$badgeWarningColor = darken(#ffe564, 35%) +$badgeErrorColor = #DA5961 +$badgeVersionColor = #000000 +$containerBackground = #f0f4f8 + +// Layout +$navbarHeight = 3.6rem +$sidebarWidth = 20rem +$contentWidth = 46.25rem +$homePageWidth = 60rem + +// Responsive breakpoints +$MQNarrow = 959px +$MQMobile = 767px +$MQMobileNarrow = 419px