Foundry/.dungeon
0
0
Fork 0
Code Issues 57 Pull requests Projects Releases 7 Packages Wiki Activity Actions

Tweak how the SCSS is being compiled / structured

Browse source
This commit is contained in:
Oliver-Akins 2023-11-25 21:41:31 -07:00
parent 89ccb742f8
commit 93b55df045
13 changed files with 200 additions and 116 deletions
Download patch file Download diff file Expand all files Collapse all files

3
.css/mixins/sr-only.css
View file

@ -1,3 +0,0 @@
/*# sourceMappingURL=sr-only.css.map */

1
.css/mixins/sr-only.css.map
View file

@ -1 +0,0 @@
{"version":3,"sourceRoot":"","sources":[],"names":[],"mappings":"","file":"sr-only.css"}

16
.css/root.css
View file

@ -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 { .dotdungeon {
container-type: size; container-type: size;
} }
.dotdungeon.actor--pc { .dotdungeon.actor--pc {
display: grid; display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr)); 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 { .dotdungeon.actor--pc .panel--avatar {
grid-row: 1/span 2; grid-row: 1/span 2;
@ -31,7 +34,6 @@
grid-row: span 2; grid-row: span 2;
} }
.dotdungeon .panel { .dotdungeon .panel {
background: white;
border: 2px solid black; border: 2px solid black;
} }
.dotdungeon .panel__header { .dotdungeon .panel__header {
@ -39,9 +41,17 @@
color: white; color: white;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: center;
align-items: center;
gap: 4px;
} }
.dotdungeon .panel__header h2 { .dotdungeon .panel__header h2 {
all: initial;
color: inherit;
flex-grow: 1; flex-grow: 1;
padding-left: 8px;
font-family: "Pixelify Sans", sans-serif;
font-size: 20px;
} }
.dotdungeon .panel__header .icon { .dotdungeon .panel__header .icon {
height: 32px; 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 */

1
.css/root.css.map
View file

@ -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"}

80
.css/sheets/actor/mvp.css Normal file
View file

@ -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 */

2
package.json
View file

@ -1,6 +1,6 @@
{ {
"scripts": { "scripts": {
"css": "sass --watch styles/:.css/" "css": "sass --watch --embed-source-map --no-error-css styles/:.css/"
}, },
"devDependencies": { "devDependencies": {
"sass": "^1.69.5" "sass": "^1.69.5"

5
styles/mixins/sr-only.scss
View file

@ -1,5 +0,0 @@
@mixin sr-only {
width: 1px;
height: 1px;
position: absolute;
}

102
styles/root.scss
View file

@ -1,101 +1,3 @@
@use "./vars/_colours.scss" as *; @use "./vars/index" as *;
.dotdungeon { @import "./sheets/actor/mvp.scss";
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));
}
}
}
}

96
styles/sheets/actor/mvp.scss Normal file
View file

@ -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));
}
}

3
styles/vars/_index.scss Normal file
View file

@ -0,0 +1,3 @@
@use "./breakpoints";
@use "./colours";
@use "./fonts";

3
styles/vars/fonts.scss Normal file
View file

@ -0,0 +1,3 @@
@import url('https://fonts.googleapis.com/css2?family=Pixelify+Sans&display=swap');
$title-font: 'Pixelify Sans', sans-serif;

2
system.json
View file

@ -31,7 +31,7 @@
"flags": { "flags": {
"hotReload": { "hotReload": {
"extensions": ["css", "hbs", "json", "mjs"], "extensions": ["css", "hbs", "json", "mjs"],
"paths": ["templates", "langs", "styles", "module"] "paths": ["templates", "langs", ".css", "module"]
} }
} }
} }

2
templates/actors/char-sheet-mvp/partials/panel.hbs
View file

@ -1,5 +1,5 @@
<div class="panel panel--{{class}}"> <div class="panel panel--{{class}}">
<div class="panel__title"> <div class="panel__header">
<h2> <h2>
{{ localize title }} {{ localize title }}
</h2> </h2>