EH22/design
0
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

merch sizing-guide: style improvements
All checks were successful
/ build (push) Successful in 9s
Details

Browse source
This commit is contained in:
kritzl 2025-02-13 16:29:51 +01:00
commit 5c203a6f22
Signed by: kritzl
SSH key fingerprint: SHA256:5BmINP9VjZWaUk5Z+2CTut1KFhwLtd0ZynMekKbtViM
7 changed files with 66 additions and 29 deletions
Download patch file Download diff file Expand all files Collapse all files

21
styleguide/assets/style/merch.css
View file

@ -13,24 +13,25 @@ table {
user-select: none;
width: fit-content;
border-collapse: collapse;
border: solid 4px var(--color-shade-3);
border: solid 4px var(--color-shade-2);
}
table thead {
position: sticky;
top: calc(-1rem + 2px);
z-index: 10;
background-color: var(--color-background);
outline: solid 4px var(--color-shade-3);
outline: solid 4px var(--color-shade-2);
outline-offset: -2px;
}
table thead tr > th {
outline: solid 1px var(--color-shade-3);
outline: solid 1px var(--color-shade-2);
}
table thead tr > th.hover {
background-color: var(--color-shade-4);
background-color: var(--color-shade-3);
}
table thead tr:first-child > th[colspan="15"] {
background-color: var(--color-shade-3);
background-color: var(--color-shade-2);
color: var(--color-dark-foreground);
}
table thead.currentEvent {
outline-color: var(--color-primary);
@ -42,7 +43,7 @@ table thead.currentEvent tr:first-child > th {
background-color: var(--color-primary);
}
table tbody {
border-top: solid 4px var(--color-shade-3);
border-top: solid 4px var(--color-shade-2);
}
table tbody.currentEvent {
border: solid 4px var(--color-primary);
@ -55,7 +56,7 @@ table td {
table th,
table td {
padding: 0.25rem 0.5rem;
border: solid 1px var(--color-shade-3);
border: solid 1px var(--color-shade-2);
min-width: 6ch;
}
table th.hover,
@ -75,7 +76,7 @@ table td.val:not(.empty).hover {
background-color: var(--color-shade-1);
}
table td.val:not(.empty):hover {
background-color: var(--color-shade-4);
background-color: var(--color-shade-3);
}
table td.val.highlighted[data-dim=A] {
background-color: rgb(96, 165, 249);
@ -87,7 +88,7 @@ table td.val.highlighted[data-dim=C] {
background-color: rgb(255, 121, 117);
}
table td.val.currentDimension:not(.hover) {
background-color: var(--color-shade-3);
background-color: var(--color-shade-2);
}
table td.val:not([data-diff=""])::after {
content: attr(data-diff);
@ -114,7 +115,7 @@ table td.val[data-diff=""]::after {
margin-top: -0.25rem;
}
table td.dimension.hover {
background-color: var(--color-shade-4);
background-color: var(--color-shade-3);
}
table td.dimension.currentDimension::after {
content: ">";

2
styleguide/assets/style/merch.css.map
View file

@ -1 +1 @@
{"version":3,"sourceRoot":"","sources":["merch.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAEA;EACE;;AAIJ;EACE;;AAGF;EAKE;;AAJA;EACE;;AAKF;EACE;;AAKN;EACE;;AAEA;EACE;;AAIJ;AAAA;AAAA;EAGE;;AAGF;AAAA;EAEE;EACA;EACA;;AAEA;AAAA;EACE;;AAKF;EACE;;AAEA;EACE;;AAGF;EACE;;AAEA;EACE;;AAGF;EACE;;AAKF;EACE;;AAGF;EACE;;AAGF;EACE;;AAIJ;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAKF;EACE;;AAGF;EACE;AACA;EACA;EACA;EACA;EACA;EACA","file":"merch.css"}
{"version":3,"sourceRoot":"","sources":["merch.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAEA;EACE;;AAIJ;EACE;EACA;;AAGF;EAKE;;AAJA;EACE;;AAKF;EACE;;AAKN;EACE;;AAEA;EACE;;AAIJ;AAAA;AAAA;EAGE;;AAGF;AAAA;EAEE;EACA;EACA;;AAEA;AAAA;EACE;;AAKF;EACE;;AAEA;EACE;;AAGF;EACE;;AAEA;EACE;;AAGF;EACE;;AAKF;EACE;;AAGF;EACE;;AAGF;EACE;;AAIJ;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAKF;EACE;;AAGF;EACE;AACA;EACA;EACA;EACA;EACA;EACA","file":"merch.css"}

21
styleguide/assets/style/merch.scss
View file

@ -13,26 +13,27 @@ table {
user-select: none;
width: fit-content;
border-collapse: collapse;
border: solid 4px var(--color-shade-3);
border: solid 4px var(--color-shade-2);
thead {
position: sticky;
top: calc(-1rem + 2px);
z-index: 10;
background-color: var(--color-background);
outline: solid 4px var(--color-shade-3);
outline: solid 4px var(--color-shade-2);
outline-offset: -2px;
tr > th {
outline: solid 1px var(--color-shade-3);
outline: solid 1px var(--color-shade-2);
&.hover {
background-color: var(--color-shade-4);
background-color: var(--color-shade-3);
}
}
tr:first-child > th[colspan='15'] {
background-color: var(--color-shade-3);
background-color: var(--color-shade-2);
color: var(--color-dark-foreground);
}
&.currentEvent {
@ -49,7 +50,7 @@ table {
}
tbody {
border-top: solid 4px var(--color-shade-3);
border-top: solid 4px var(--color-shade-2);
&.currentEvent {
border: solid 4px var(--color-primary);
@ -65,7 +66,7 @@ table {
th,
td {
padding: 0.25rem 0.5rem;
border: solid 1px var(--color-shade-3);
border: solid 1px var(--color-shade-2);
min-width: 6ch;
&.hover {
@ -89,7 +90,7 @@ table {
}
&:hover {
background-color: var(--color-shade-4);
background-color: var(--color-shade-3);
}
}
@ -108,7 +109,7 @@ table {
}
&.currentDimension:not(.hover) {
background-color: var(--color-shade-3);
background-color: var(--color-shade-2);
}
&:not([data-diff=''])::after {
@ -140,7 +141,7 @@ table {
&.dimension {
&.hover {
background-color: var(--color-shade-4);
background-color: var(--color-shade-3);
}
&.currentDimension::after {

17
styleguide/assets/style/styleguide.css
View file

@ -415,6 +415,23 @@ code,
}
}
.flex-wrap-md {
display: flex;
align-items: center;
}
.flex-wrap-md > * {
width: 100%;
}
@media (max-width: 80rem) {
.flex-wrap-md {
flex-wrap: wrap;
justify-content: center;
}
.flex-wrap-md > * {
width: 100%;
}
}
.swatch-grid {
background-color: var(--color-background);
color: var(--color-foreground);

2
styleguide/assets/style/styleguide.css.map
View file

@ -1 +1 @@
{"version":3,"sourceRoot":"","sources":["main.scss","styleguide.scss"],"names":[],"mappings":"AAMA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAmCF;EA/BE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAuBF;EAnBE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAWF;AAAA;EAvBE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAgBF;EA5CE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAoCF;EACE;IAjDA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;;AA4CF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAKF;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAaA;EACA;EACA;;;AAIA;AAAA;EAEE;EACA;;;AAGF;AAAA;EAEE;EACA;;;AAGF;AAAA;EAEE;EACA;;;AAGF;AAAA;EAEE;EACA;;;AAGF;AAAA;EAEE;EACA;;;AAGF;AAAA;EAEE;EACA;;;AAGF;AAAA;EAEE;EACA;EACA;EACA;EACA;;;AAKE;EACE;;;AAKN;EACE;EACA;;AAEA;EAGE;EACA;;AAGF;EACE;EACA;;AAEA;EAGE;EACA;;;AC/WN;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;;AAEA;EALF;IAMI;;;;AAMF;EAKE;EACA;;AAGF;EAEE;EACA;;AAGF;EAIE;EACA;;;AAIJ;AAAA;EAEE;EACA;;;AAGF;EACE;;AAEA;EACE;;AAGF;EAPF;IAQI;;EAEA;IACE;;;;AAKN;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;;;AAMR;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA","file":"styleguide.css"}
{"version":3,"sourceRoot":"","sources":["main.scss","styleguide.scss"],"names":[],"mappings":"AAMA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAmCF;EA/BE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAuBF;EAnBE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAWF;AAAA;EAvBE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAgBF;EA5CE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAoCF;EACE;IAjDA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;;AA4CF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAKF;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAaA;EACA;EACA;;;AAIA;AAAA;EAEE;EACA;;;AAGF;AAAA;EAEE;EACA;;;AAGF;AAAA;EAEE;EACA;;;AAGF;AAAA;EAEE;EACA;;;AAGF;AAAA;EAEE;EACA;;;AAGF;AAAA;EAEE;EACA;;;AAGF;AAAA;EAEE;EACA;EACA;EACA;EACA;;;AAKE;EACE;;;AAKN;EACE;EACA;;AAEA;EAGE;EACA;;AAGF;EACE;EACA;;AAEA;EAGE;EACA;;;AC/WN;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;;AAEA;EALF;IAMI;;;;AAMF;EAKE;EACA;;AAGF;EAEE;EACA;;AAGF;EAIE;EACA;;;AAIJ;AAAA;EAEE;EACA;;;AAGF;EACE;;AAEA;EACE;;AAGF;EAPF;IAQI;;EAEA;IACE;;;;AAKN;EACE;EACA;;AAEA;EACE;;AAGF;EARF;IASI;IACA;;EAEA;IACE;;;;AAKN;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;;;AAMR;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA","file":"styleguide.css"}

24
styleguide/assets/style/styleguide.scss
View file

@ -60,14 +60,32 @@ code,
.layout-column {
display: flex;
&>* {
& > * {
width: 100%;
}
@media (max-width: $breakpoint-md) {
flex-wrap: wrap;
&>* {
& > * {
width: 100%;
}
}
}
.flex-wrap-md {
display: flex;
align-items: center;
& > * {
width: 100%;
}
@media (max-width: $breakpoint-xl) {
flex-wrap: wrap;
justify-content: center;
& > * {
width: 100%;
}
}
@ -84,7 +102,7 @@ code,
gap: 1rem;
margin-top: 2rem;
&>span {
& > span {
width: 100%;
font-size: var(--text-xl);
}

8
styleguide/merch.html
View file

@ -13,8 +13,8 @@
<main>
<h1>Merch</h1>
<div style="display: flex; align-items: top; justify-content: space-between;">
<div>
<div style="margin-bottom: 1rem;" class="flex-wrap-md">
<div style="max-width: 100ch">
<p>Below you will find a table of sizes and measurements of merchandise clothing from this and past chaos events. It is meant to guide in choosing a fitting piece of clothing based on owned pieces from previous events. All values are based on the respective manufacturer's specifications and different fabrics vary in elasticity (i. e. how stretchy they are), so there might be some discrepancies regarding the actual fit.</p>
<p>For each piece of clothing there are two or three types of measurements. You can use the schematic or read below to determine what each of them means:</p>
<ul>
@ -24,8 +24,8 @@
</ul>
<p>You can click on any cell holding a value to see how much the other pieces of clothing's sizes deviate from the selected one's size in each measurement (A, B and C). You can also opt to only show the deviation for a specific measurement by clicking again on the respective measurement's value.</p>
</div>
<svg id="merch_measurements" width="50%" viewBox="0 0 297.65624 310.88542" version="1.1" xml:space="preserve"
xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
<svg id="merch_measurements" viewBox="0 0 297.65624 310.88542" version="1.1" xml:space="preserve"
xmlns="http://www.w3.org/2000/svg" style="flex-shrink: 0; flex-grow: 0; width: 20rem">
<defs>
<style>
svg {