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

merch sizing-guide: sticky introduction
All checks were successful
/ build (push) Successful in 10s
Details

Browse source
This commit is contained in:
kritzl 2025-02-16 15:12:06 +01:00
commit 7de5984ee8
Signed by: kritzl
SSH key fingerprint: SHA256:5BmINP9VjZWaUk5Z+2CTut1KFhwLtd0ZynMekKbtViM
5 changed files with 171 additions and 146 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -4,6 +4,10 @@ main {
overflow: auto; overflow: auto;
padding: 0 1rem; padding: 0 1rem;
} }
main > div#intro {
position: sticky;
left: 0;
}
.table-container { .table-container {
overflow-x: auto; overflow-x: auto;

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

@ -1 +1 @@
{"version":3,"sourceRoot":"","sources":["merch.scss"],"names":[],"mappings":"AAAA;EACE;EACA;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;;AAGF;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;;;AAMR;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE","file":"merch.css"} {"version":3,"sourceRoot":"","sources":["merch.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;;AAIJ;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;;AAGF;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;;;AAMR;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE","file":"merch.css"}

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

@ -3,6 +3,11 @@ main {
height: 100vh; height: 100vh;
overflow: auto; overflow: auto;
padding: 0 1rem; padding: 0 1rem;
> div#intro {
position: sticky;
left: 0;
}
} }
.table-container { .table-container {

38
styleguide/merch/de/index.html
View file

@ -11,30 +11,37 @@
</head> </head>
<body> <body>
<main> <main>
<div id="intro">
<h1>Merch Grössenvergleich</h1> <h1>Merch Grössenvergleich</h1>
<div style="margin-bottom: 1rem;" class="flex-wrap-md"> <div style="margin-bottom: 1rem;" class="flex-wrap-md">
<div style="max-width: 100ch"> <div style="max-width: 100ch">
<p>Unten findest du eine Größen-Tabelle mit Größen und Maßen an Merchandise-Kleidung von diesem und <p>Unten findest du eine Größen-Tabelle mit Größen und Maßen an Merchandise-Kleidung von diesem und
vergangenen Chaos Veranstaltungen. Die Tabelle soll dabei helfen, passende Kleidungsstücke zu vergangenen Chaos Veranstaltungen. Die Tabelle soll dabei helfen, passende Kleidungsstücke zu
wählen, basierend auf sich bereits im Besitz befindender Kleidung vergangener Veranstaltungen. Dabei wählen, basierend auf sich bereits im Besitz befindender Kleidung vergangener Veranstaltungen.
basieren alle Angaben auf den Spezifikationen der jeweiligen Kleidungshersteller. Stücke haben Dabei basieren alle Angaben auf den Spezifikationen der jeweiligen Kleidungshersteller. Stücke
außerdem verschiedene Stoffe mit unterschiedlicher Elastizität (sprich Dehnbarkeit). D. h. es kann haben außerdem verschiedene Stoffe mit unterschiedlicher Elastizität (sprich Dehnbarkeit). D. h.
zu Unstimmigkeiten kommen im Bezug auf die reale Passform.</p> es kann zu Unstimmigkeiten kommen im Bezug auf die reale Passform.</p>
<p>Für jedes Kleidungsstück sind zwei oder drei Arten an Maße angegeben. Die Bedeutung ist einerseits in <p>Für jedes Kleidungsstück sind zwei oder drei Arten an Maße angegeben. Die Bedeutung ist
einerseits in
der schematischen Darstellung ablesbar, oder im Folgenden erklärt:</p> der schematischen Darstellung ablesbar, oder im Folgenden erklärt:</p>
<ul> <ul>
<li><b>A &ndash; Brust:</b> gemessen ca. 2.5 cm unter den Achseln, über die Breite des (flachen) <li>
Torsos.</li> <b>A &ndash; Brust:</b> gemessen ca. 2.5 cm unter den Achseln, über die Breite des (flachen)
<li><b>B &ndash; Länge:</b> Distanz von der Oberseite der Schultern bis ganz nach unten.</li> Torsos.
<li><b>C &ndash; Ärmel:</b> Bei der Naht zwischen Ärmel und Torso, vom obersten Punkt bis zum Ende </li>
des Armes gemessen.</li> <li>
<b>B &ndash; Länge:</b> Distanz von der Oberseite der Schultern bis ganz nach unten.
</li>
<li>
<b>C &ndash; Ärmel:</b> Bei der Naht zwischen Ärmel und Torso, vom obersten Punkt bis zum
Ende des Armes gemessen.
</li>
</ul> </ul>
<p>Du kannst jede Zelle, die einen Wert enthält, anklicken, um zu sehen, wie stark die Maße (A, B und C) <p>Du kannst jede Zelle, die einen Wert enthält, anklicken, um zu sehen, wie stark die Maße (A, B
der verschiedenen Größen jedes Kleidungsstückes von dem ausgewählten abweichen. Du kannst außerdem und C) der verschiedenen Größen jedes Kleidungsstückes von dem ausgewählten abweichen. Du kannst
bei Bedarf nur die Differenzen für ein bestimmtes Maß (z. B. nur A) anzeigen lassen, indem du bei außerdem bei Bedarf nur die Differenzen für ein bestimmtes Maß (z. B. nur A) anzeigen lassen,
einer Größe ein zweites Mal klickst, diesmal in der jeweiligen Zeile des Maßes.</p> indem du bei einer Größe ein zweites Mal klickst, diesmal in der jeweiligen Zeile des Maßes.</p>
</div> </div>
<svg id="merch_measurements" viewBox="0 0 297.65624 310.88542" version="1.1" xml:space="preserve" <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"> xmlns="http://www.w3.org/2000/svg" style="flex-shrink: 0; flex-grow: 0; width: 20rem">
@ -87,6 +94,7 @@
<div id="filterType"></div> <div id="filterType"></div>
<div id="filterFit"></div> <div id="filterFit"></div>
</div> </div>
</div>
<table> <table>
<thead id="th_eh22" class="currentEvent"> <thead id="th_eh22" class="currentEvent">
<tr> <tr>

28
styleguide/merch/en/index.html
View file

@ -11,8 +11,8 @@
</head> </head>
<body> <body>
<main> <main>
<div id="intro">
<h1>Merch Size Comparison</h1> <h1>Merch Size Comparison</h1>
<div style="margin-bottom: 1rem;" class="flex-wrap-md"> <div style="margin-bottom: 1rem;" class="flex-wrap-md">
<div style="max-width: 100ch"> <div style="max-width: 100ch">
@ -21,18 +21,25 @@
from previous events. All values are based on the respective manufacturer's specifications and 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 different fabrics vary in elasticity (i. e. how stretchy they are), so there might be some
discrepancies regarding the actual fit.</p> 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 <p>For each piece of clothing there are two or three types of measurements. You can use the
read below to determine what each of them means:</p> schematic or read below to determine what each of them means:</p>
<ul> <ul>
<li><b>A &ndash; chest:</b> measured roughly 2.5 cm below the armpits over the breadth of the <li>
(flattend) torso.</li> <b>A &ndash; chest:</b> measured roughly 2.5 cm below the armpits over the breadth of the
<li><b>B &ndash; length:</b> distance from the top of the shoulders all the way down.</li> (flattend) torso.
<li><b>C &ndash; sleeve:</b> starting at the seam connecting the sleeve and torso, measured from the </li>
top-most point down to the end of the arm.</li> <li>
<b>B &ndash; length:</b> distance from the top of the shoulders all the way down.
</li>
<li>
<b>C &ndash; sleeve:</b> starting at the seam connecting the sleeve and torso, measured from
the top-most point down to the end of the arm.
</li>
</ul> </ul>
<p>You can click on any cell holding a value to see how much the other pieces of clothing's sizes <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 deviate from the selected one's size in each measurement (A, B and C). You can also opt to only
the deviation for a specific measurement by clicking again on the respective measurement's value. show the deviation for a specific measurement by clicking again on the respective measurement's
value.
</p> </p>
</div> </div>
<svg id="merch_measurements" viewBox="0 0 297.65624 310.88542" version="1.1" xml:space="preserve" <svg id="merch_measurements" viewBox="0 0 297.65624 310.88542" version="1.1" xml:space="preserve"
@ -86,6 +93,7 @@
<div id="filterType"></div> <div id="filterType"></div>
<div id="filterFit"></div> <div id="filterFit"></div>
</div> </div>
</div>
<table> <table>
<thead id="th_eh22" class="currentEvent"> <thead id="th_eh22" class="currentEvent">
<tr> <tr>