From 93b55df04537ce43b596e8b41920c5abc72a4682 Mon Sep 17 00:00:00 2001 From: Oliver-Akins Date: Sat, 25 Nov 2023 21:41:31 -0700 Subject: [PATCH] Tweak how the SCSS is being compiled / structured --- .css/mixins/sr-only.css | 3 - .css/mixins/sr-only.css.map | 1 - .css/root.css | 16 ++- .css/root.css.map | 1 - .css/sheets/actor/mvp.css | 80 ++++++++++++++ package.json | 2 +- styles/mixins/sr-only.scss | 5 - styles/root.scss | 102 +----------------- styles/sheets/actor/mvp.scss | 96 +++++++++++++++++ styles/vars/_index.scss | 3 + styles/vars/fonts.scss | 3 + system.json | 2 +- .../actors/char-sheet-mvp/partials/panel.hbs | 2 +- 13 files changed, 200 insertions(+), 116 deletions(-) delete mode 100644 .css/mixins/sr-only.css delete mode 100644 .css/mixins/sr-only.css.map delete mode 100644 .css/root.css.map create mode 100644 .css/sheets/actor/mvp.css delete mode 100644 styles/mixins/sr-only.scss create mode 100644 styles/sheets/actor/mvp.scss create mode 100644 styles/vars/_index.scss create mode 100644 styles/vars/fonts.scss diff --git a/.css/mixins/sr-only.css b/.css/mixins/sr-only.css deleted file mode 100644 index f91df16..0000000 --- a/.css/mixins/sr-only.css +++ /dev/null @@ -1,3 +0,0 @@ - - -/*# sourceMappingURL=sr-only.css.map */ diff --git a/.css/mixins/sr-only.css.map b/.css/mixins/sr-only.css.map deleted file mode 100644 index 24d1672..0000000 --- a/.css/mixins/sr-only.css.map +++ /dev/null @@ -1 +0,0 @@ -{"version":3,"sourceRoot":"","sources":[],"names":[],"mappings":"","file":"sr-only.css"} \ No newline at end of file diff --git a/.css/root.css b/.css/root.css index 146cb35..953cc35 100644 --- a/.css/root.css +++ b/.css/root.css @@ -1,10 +1,13 @@ +@import url("https://fonts.googleapis.com/css2?family=Pixelify+Sans&display=swap"); +@import url("https://fonts.googleapis.com/css2?family=Pixelify+Sans&display=swap"); .dotdungeon { container-type: size; } .dotdungeon.actor--pc { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); - grid-template-rows: repeat(12, minmax(0, 1fr)); + grid-template-rows: repeat(8, minmax(0, 1fr)); + gap: 4px; } .dotdungeon.actor--pc .panel--avatar { grid-row: 1/span 2; @@ -31,7 +34,6 @@ grid-row: span 2; } .dotdungeon .panel { - background: white; border: 2px solid black; } .dotdungeon .panel__header { @@ -39,9 +41,17 @@ color: white; display: flex; flex-direction: row; + justify-content: center; + align-items: center; + gap: 4px; } .dotdungeon .panel__header h2 { + all: initial; + color: inherit; flex-grow: 1; + padding-left: 8px; + font-family: "Pixelify Sans", sans-serif; + font-size: 20px; } .dotdungeon .panel__header .icon { height: 32px; @@ -68,4 +78,4 @@ } } -/*# sourceMappingURL=root.css.map */ +/*# sourceMappingURL=data:application/json;charset=utf-8,%7B%22version%22:3,%22sourceRoot%22:%22%22,%22sources%22:%5B%22../styles/vars/fonts.scss%22,%22../styles/sheets/actor/mvp.scss%22%5D,%22names%22:%5B%5D,%22mappings%22:%22AAAQ;AAAA;ACGR;EACC;;AAEA;EACC;EACA;EACA;EACA;;AAGC;EACC;;AAED;EACC;;AAED;EACC;;AAED;EACC;;AAGD;EACC;;AAED;EACC;;AAED;EACC;;AAED;EACC;;AASH;EACC;;AAEA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA;EACA;EACA;EACA,aD5DS;EC6DT;;AAGD;EAEC,QADO;EAEP,OAFO;EAGP;;;AAMJ;EACC;IACC;IACA;;;AAIF;EACC;IACC;IACA;;;AAIF;EACC;IACC;IACA%22,%22file%22:%22root.css%22%7D */ diff --git a/.css/root.css.map b/.css/root.css.map deleted file mode 100644 index b99acc9..0000000 --- a/.css/root.css.map +++ /dev/null @@ -1 +0,0 @@ -{"version":3,"sourceRoot":"","sources":["../styles/root.scss"],"names":[],"mappings":"AAEA;EACC;;AAGC;EACC;EACA;EACA;;AAGC;EACC;;AAED;EACC;;AAED;EACC;;AAED;EACC;;AAGD;EACC;;AAED;EACC;;AAED;EACC;;AAED;EACC;;AAUJ;EACC;EACA;;AAEA;EACC;EACA;EACA;EACA;;AAEA;EACC;;AAGD;EAEC,QADO;EAEP,OAFO;EAGP;;;AAMJ;EAGG;IACC;IACA;;;AAMJ;EAGG;IACC;IACA;;;AAMJ;EAGG;IACC;IACA","file":"root.css"} \ No newline at end of file diff --git a/.css/sheets/actor/mvp.css b/.css/sheets/actor/mvp.css new file mode 100644 index 0000000..483161f --- /dev/null +++ b/.css/sheets/actor/mvp.css @@ -0,0 +1,80 @@ +@import url("https://fonts.googleapis.com/css2?family=Pixelify+Sans&display=swap"); +.dotdungeon { + container-type: size; +} +.dotdungeon.actor--pc { + display: grid; + grid-template-columns: repeat(3, minmax(0, 1fr)); + grid-template-rows: repeat(8, minmax(0, 1fr)); + gap: 4px; +} +.dotdungeon.actor--pc .panel--avatar { + grid-row: 1/span 2; +} +.dotdungeon.actor--pc .panel--stats { + grid-column: 2/span 2; +} +.dotdungeon.actor--pc .panel--skills { + grid-column: 2/span 2; +} +.dotdungeon.actor--pc .panel--backpack { + grid-row: 3/span 5; +} +.dotdungeon.actor--pc .panel--aspect { + grid-row: span 2; +} +.dotdungeon.actor--pc .panel--weapons { + grid-row: span 2; +} +.dotdungeon.actor--pc .panel--roles { + grid-row: span 3; +} +.dotdungeon.actor--pc .panel--spells { + grid-row: span 2; +} +.dotdungeon .panel { + border: 2px solid black; +} +.dotdungeon .panel__header { + background: black; + color: white; + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + gap: 4px; +} +.dotdungeon .panel__header h2 { + all: initial; + color: inherit; + flex-grow: 1; + padding-left: 8px; + font-family: "Pixelify Sans", sans-serif; + font-size: 20px; +} +.dotdungeon .panel__header .icon { + height: 32px; + width: 32px; + aspect-ratio: 1; +} + +@container (max-width: $breakpoint-medium) { + .dotdungeon.actor--pc { + grid-template-columns: repeat(3, minmax(0, 1fr)); + grid-template-rows: repeat(12, minmax(0, 1fr)); + } +} +@container (max-width: $breakpoint-small) { + .dotdungeon.actor--pc { + grid-template-columns: repeat(3, minmax(0, 1fr)); + grid-template-rows: repeat(12, minmax(0, 1fr)); + } +} +@container (max-width: $breakpoint-extra-small) { + .dotdungeon.actor--pc { + grid-template-columns: repeat(3, minmax(0, 1fr)); + grid-template-rows: repeat(12, minmax(0, 1fr)); + } +} + +/*# sourceMappingURL=data:application/json;charset=utf-8,%7B%22version%22:3,%22sourceRoot%22:%22%22,%22sources%22:%5B%22../../../styles/vars/fonts.scss%22,%22../../../styles/sheets/actor/mvp.scss%22%5D,%22names%22:%5B%5D,%22mappings%22:%22AAAQ;ACGR;EACC;;AAEA;EACC;EACA;EACA;EACA;;AAGC;EACC;;AAED;EACC;;AAED;EACC;;AAED;EACC;;AAGD;EACC;;AAED;EACC;;AAED;EACC;;AAED;EACC;;AASH;EACC;;AAEA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA;EACA;EACA;EACA,aD5DS;EC6DT;;AAGD;EAEC,QADO;EAEP,OAFO;EAGP;;;AAMJ;EACC;IACC;IACA;;;AAIF;EACC;IACC;IACA;;;AAIF;EACC;IACC;IACA%22,%22file%22:%22mvp.css%22%7D */ diff --git a/package.json b/package.json index f10a272..0c38d08 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "scripts": { - "css": "sass --watch styles/:.css/" + "css": "sass --watch --embed-source-map --no-error-css styles/:.css/" }, "devDependencies": { "sass": "^1.69.5" diff --git a/styles/mixins/sr-only.scss b/styles/mixins/sr-only.scss deleted file mode 100644 index d985af7..0000000 --- a/styles/mixins/sr-only.scss +++ /dev/null @@ -1,5 +0,0 @@ -@mixin sr-only { - width: 1px; - height: 1px; - position: absolute; -} \ No newline at end of file diff --git a/styles/root.scss b/styles/root.scss index fc2011f..b885928 100644 --- a/styles/root.scss +++ b/styles/root.scss @@ -1,101 +1,3 @@ -@use "./vars/_colours.scss" as *; +@use "./vars/index" as *; -.dotdungeon { - container-type: size; - - &.actor { - &--pc { - display: grid; - grid-template-columns: repeat(3, minmax(0, 1fr)); - grid-template-rows: repeat(12, minmax(0, 1fr)); - - .panel { - &--avatar { - grid-row: 1 / span 2; - } - &--stats { - grid-column: 2 / span 2; - } - &--skills { - grid-column: 2 / span 2; - } - &--backpack { - grid-row: 3 / span 5; - } - &--sync {} - &--aspect { - grid-row: span 2; - } - &--weapons { - grid-row: span 2; - } - &--roles { - grid-row: span 3; - } - &--spells { - grid-row: span 2; - } - &--mounts {} - &--summons {} - &--notes {} - &--storage {} - } - } - } - - .panel { - background: white; - border: 2px solid black; - - &__header { - background: black; - color: white; - display: flex; - flex-direction: row; - - h2 { - flex-grow: 1; - } - - .icon { - $size: 32px; - height: $size; - width: $size; - aspect-ratio: 1; - } - } - } -} - -@container (max-width: $breakpoint-medium) { - .dotdungeon { - &.actor { - &--pc { - grid-template-columns: repeat(3, minmax(0, 1fr)); - grid-template-rows: repeat(12, minmax(0, 1fr)); - } - } - } -} - -@container (max-width: $breakpoint-small) { - .dotdungeon { - &.actor { - &--pc { - grid-template-columns: repeat(3, minmax(0, 1fr)); - grid-template-rows: repeat(12, minmax(0, 1fr)); - } - } - } -} - -@container (max-width: $breakpoint-extra-small) { - .dotdungeon { - &.actor { - &--pc { - grid-template-columns: repeat(3, minmax(0, 1fr)); - grid-template-rows: repeat(12, minmax(0, 1fr)); - } - } - } -} \ No newline at end of file +@import "./sheets/actor/mvp.scss"; \ No newline at end of file diff --git a/styles/sheets/actor/mvp.scss b/styles/sheets/actor/mvp.scss new file mode 100644 index 0000000..09208e0 --- /dev/null +++ b/styles/sheets/actor/mvp.scss @@ -0,0 +1,96 @@ +@use "../../vars/index" as *; +@use "../../vars/fonts.scss" as *; + +.dotdungeon { + container-type: size; + + &.actor--pc { + display: grid; + grid-template-columns: repeat(3, minmax(0, 1fr)); + grid-template-rows: repeat(8, minmax(0, 1fr)); + gap: 4px; + + .panel { + &--avatar { + grid-row: 1 / span 2; + } + &--stats { + grid-column: 2 / span 2; + } + &--skills { + grid-column: 2 / span 2; + } + &--backpack { + grid-row: 3 / span 5; + } + &--sync {} + &--aspect { + grid-row: span 2; + } + &--weapons { + grid-row: span 2; + } + &--roles { + grid-row: span 3; + } + &--spells { + grid-row: span 2; + } + &--mounts {} + &--summons {} + &--notes {} + &--storage {} + } + } + + .panel { + border: 2px solid black; + + &__header { + background: black; + color: white; + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + gap: 4px; + + h2 { + all: initial; + color: inherit; + flex-grow: 1; + padding-left: 8px; + font-family: $title-font; + font-size: 20px; + } + + .icon { + $size: 32px; + height: $size; + width: $size; + aspect-ratio: 1; + } + } + } +} + +@container (max-width: $breakpoint-medium) { + .dotdungeon.actor--pc { + grid-template-columns: repeat(3, minmax(0, 1fr)); + grid-template-rows: repeat(12, minmax(0, 1fr)); + } +} + +@container (max-width: $breakpoint-small) { + .dotdungeon.actor--pc { + grid-template-columns: repeat(3, minmax(0, 1fr)); + grid-template-rows: repeat(12, minmax(0, 1fr)); + } +} + +@container (max-width: $breakpoint-extra-small) { + .dotdungeon.actor--pc { + grid-template-columns: repeat(3, minmax(0, 1fr)); + grid-template-rows: repeat(12, minmax(0, 1fr)); + } +} \ No newline at end of file diff --git a/styles/vars/_index.scss b/styles/vars/_index.scss new file mode 100644 index 0000000..f6daa67 --- /dev/null +++ b/styles/vars/_index.scss @@ -0,0 +1,3 @@ +@use "./breakpoints"; +@use "./colours"; +@use "./fonts"; \ No newline at end of file diff --git a/styles/vars/fonts.scss b/styles/vars/fonts.scss new file mode 100644 index 0000000..47d7366 --- /dev/null +++ b/styles/vars/fonts.scss @@ -0,0 +1,3 @@ +@import url('https://fonts.googleapis.com/css2?family=Pixelify+Sans&display=swap'); + +$title-font: 'Pixelify Sans', sans-serif; \ No newline at end of file diff --git a/system.json b/system.json index 8c8c4a8..defa521 100644 --- a/system.json +++ b/system.json @@ -31,7 +31,7 @@ "flags": { "hotReload": { "extensions": ["css", "hbs", "json", "mjs"], - "paths": ["templates", "langs", "styles", "module"] + "paths": ["templates", "langs", ".css", "module"] } } } \ No newline at end of file diff --git a/templates/actors/char-sheet-mvp/partials/panel.hbs b/templates/actors/char-sheet-mvp/partials/panel.hbs index 04b41fb..1022999 100644 --- a/templates/actors/char-sheet-mvp/partials/panel.hbs +++ b/templates/actors/char-sheet-mvp/partials/panel.hbs @@ -1,5 +1,5 @@
-
+

{{ localize title }}