diff --git a/config/development.cjs b/config/development.cjs index e654a48..0abc61b 100644 --- a/config/development.cjs +++ b/config/development.cjs @@ -2,4 +2,6 @@ module.exports = { mode: "development", cssUrl: "https://", blockName: "template", + baseView: "container", + remToPx: 16, } diff --git a/layouts/partials/toolbar.hbs b/layouts/partials/toolbar.hbs index efcb92b..3fa8884 100644 --- a/layouts/partials/toolbar.hbs +++ b/layouts/partials/toolbar.hbs @@ -1,5 +1,5 @@
-
+
+ +
+ Sizes: 1rem = {{ config.remToPx }}px +
diff --git a/layouts/styles/page--main.css b/layouts/styles/page--main.css index e62740b..cccc1cd 100644 --- a/layouts/styles/page--main.css +++ b/layouts/styles/page--main.css @@ -4,17 +4,44 @@ body { } header.page_toolbar { + --gap: 2.5rem; + font-family: Arial, sans-serif; background-color: #ccc; padding: 1rem; display: flex; justify-content: center; + gap: var(--gap); align-items: center; margin-bottom: 2rem; } +header.page_toolbar > div { + position: relative; +} + +header.page_toolbar > div:not(:first-child):after { + content: '|'; + position: absolute; + left: calc(var(--gap) / 2 * -1); + top: 40%; + font-size: 20px; + line-height: 1; + transform: translateY(-50%); +} + header.page_toolbar select { font-size: 0.85rem; padding: 0.25rem; } + +@media (max-width: 1024px) { + header.page_toolbar > div { + display: none; + } + + header.page_toolbar .page_toolbar__data_options { + display: block; + } +} diff --git a/server.js b/server.js index ffff65f..0f5b67f 100755 --- a/server.js +++ b/server.js @@ -61,6 +61,7 @@ app.get('/', async (req, res) => { active: jsonFileName === name, }; }), + remToPx: config.has('remToPx') ? config.get('remToPx') : 16, cssUrl: config.get('cssUrl'), blockName: config.get('blockName') }