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;
padding: 0 1rem;
}
main > div#intro {
position: sticky;
left: 0;
}
.table-container {
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;
overflow: auto;
padding: 0 1rem;
> div#intro {
position: sticky;
left: 0;
}
}
.table-container {

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

@ -11,30 +11,37 @@
</head>
<body>
<main>
<div id="intro">
<h1>Merch Grössenvergleich</h1>
<div style="margin-bottom: 1rem;" class="flex-wrap-md">
<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
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
basieren alle Angaben auf den Spezifikationen der jeweiligen Kleidungshersteller. Stücke haben
außerdem verschiedene Stoffe mit unterschiedlicher Elastizität (sprich Dehnbarkeit). D. h. 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
wählen, basierend auf sich bereits im Besitz befindender Kleidung vergangener Veranstaltungen.
Dabei basieren alle Angaben auf den Spezifikationen der jeweiligen Kleidungshersteller. Stücke
haben außerdem verschiedene Stoffe mit unterschiedlicher Elastizität (sprich Dehnbarkeit). D. h.
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
der schematischen Darstellung ablesbar, oder im Folgenden erklärt:</p>
<ul>
<li><b>A &ndash; Brust:</b> gemessen ca. 2.5 cm unter den Achseln, über die Breite des (flachen)
Torsos.</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>
<li>
<b>A &ndash; Brust:</b> gemessen ca. 2.5 cm unter den Achseln, über die Breite des (flachen)
Torsos.
</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>
<p>Du kannst jede Zelle, die einen Wert enthält, anklicken, um zu sehen, wie stark die Maße (A, B und C)
der verschiedenen Größen jedes Kleidungsstückes von dem ausgewählten abweichen. Du kannst außerdem
bei Bedarf nur die Differenzen für ein bestimmtes Maß (z. B. nur A) anzeigen lassen, indem du bei
einer Größe ein zweites Mal klickst, diesmal in der jeweiligen Zeile des Maßes.</p>
<p>Du kannst jede Zelle, die einen Wert enthält, anklicken, um zu sehen, wie stark die Maße (A, B
und C) der verschiedenen Größen jedes Kleidungsstückes von dem ausgewählten abweichen. Du kannst
außerdem bei Bedarf nur die Differenzen für ein bestimmtes Maß (z. B. nur A) anzeigen lassen,
indem du bei einer Größe ein zweites Mal klickst, diesmal in der jeweiligen Zeile des Maßes.</p>
</div>
<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">
@ -87,6 +94,7 @@
<div id="filterType"></div>
<div id="filterFit"></div>
</div>
</div>
<table>
<thead id="th_eh22" class="currentEvent">
<tr>

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

@ -11,8 +11,8 @@
</head>
<body>
<main>
<div id="intro">
<h1>Merch Size Comparison</h1>
<div style="margin-bottom: 1rem;" class="flex-wrap-md">
<div style="max-width: 100ch">
@ -21,18 +21,25 @@
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>
<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>
<li><b>A &ndash; chest:</b> measured roughly 2.5 cm below the armpits over the breadth of the
(flattend) torso.</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>
<li>
<b>A &ndash; chest:</b> measured roughly 2.5 cm below the armpits over the breadth of the
(flattend) torso.
</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>
<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.
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" viewBox="0 0 297.65624 310.88542" version="1.1" xml:space="preserve"
@ -86,6 +93,7 @@
<div id="filterType"></div>
<div id="filterFit"></div>
</div>
</div>
<table>
<thead id="th_eh22" class="currentEvent">
<tr>