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