initial commit

index.css

@@ -0,0 +1,213 @@
+@font-face {
+	src: url("SBB Web Light.ttf");
+	font-family: "SBB Web Light";
+}
+
+@font-face {
+	src: url("SBB Web Roman.ttf");
+	font-family: "SBB Web Roman";
+}
+
+:root {
+	--blue: #2D327D;
+	--cloud: #E5E5E5;
+	--white: #FFFFFF;
+	--red: #EB0000;
+	--red125: #C60018;
+	--red150: #A20013;
+
+	--first-second-angle: to bottom;
+}
+
+* {
+	margin: 0;
+	box-sizing: border-box;
+}
+
+body {
+	font-family: "SBB Web Roman", sans-serif;
+	font-size: 16pt;
+	color: var(--white);
+}
+
+.template {
+	display: none !important;
+}
+
+#station {
+	color: black;
+}
+
+#grid {
+	display: grid;
+	grid-template-columns: 1fr 1fr;
+	grid-template-rows: auto 1fr auto;
+	grid-template-areas:
+		"type-time stops"
+		"destination stops"
+		"composition composition";
+	gap: 0.5em;
+	background-color: var(--blue);
+}
+
+#type-time {
+	grid-area: type-time;
+	display: flex;
+	gap: 0.5em;
+	align-items: center;
+	padding: 0 0.5rem;
+}
+
+#train-type {
+	height: 80%;
+}
+
+#departure {
+	font-size: 150%;
+	font-weight: bold;
+}
+
+#destination {
+	grid-area: destination;
+	font-size: 150%;
+	font-weight: bold;
+	padding: 0 0.5rem;
+}
+
+#stops {
+	grid-area: stops;
+	display: flex;
+	flex-direction: column;
+	gap: 0.5em;
+}
+
+#composition {
+	grid-area: composition;
+	display: flex;
+	flex-direction: column;
+	--n-waggons: 1;
+}
+
+#sectors {
+	display: flex;
+	padding: 0 1em;
+	width: 100%;
+}
+
+.sector {
+	box-shadow: -1px 0 0 var(--white);
+	text-align: center;
+	--weight: 1;
+	width: calc(100% / var(--n-waggons) * var(--weight));
+}
+
+.sector:last-child {
+	border-right: solid var(--white) 1px;
+}
+
+#carriages {
+	background-color: var(--cloud);
+	display: grid;
+	width: 100%;
+	min-height: 2em;
+	gap: 0.2em;
+	padding: 0.5em 1em;
+	--offset: 0;
+	grid-template-columns: repeat(var(--n-waggons), 1fr);
+}
+
+.waggon {
+	--bg: var(--blue);
+	--fg: var(--white);
+	position: relative;
+}
+.waggon.class-first {
+	--bg: var(--white);
+	--fg: var(--blue);
+}
+.waggon:first-child {
+	grid-column: calc(var(--offset) + 1);
+}
+
+.waggon .number {
+
+}
+
+.waggon .outline {
+	border: solid var(--blue) 2px;
+	background-color: var(--bg);
+	color: var(--fg);
+	width: 100%;
+	height: 1.8em;
+	display: grid;
+	place-items: center;
+}
+.waggon.class-first-second .outline {
+	background: linear-gradient(var(--first-second-angle), var(--white) 50%, var(--blue) 50%);
+}
+
+.waggon.form-start_links .outline {
+	border-top-left-radius: 0.5em;
+	border-bottom-left-radius: 0.25em;
+}
+.waggon.form-mitte .outline {
+
+}
+.waggon.form-end_recht .outline {
+	border-top-right-radius: 0.5em;
+	border-bottom-right-radius: 0.25em;
+}
+
+.waggon .class {
+	font-weight: bold;
+}
+.waggon.class-first-second .class {
+	background: linear-gradient(var(--first-second-angle), var(--blue) 50%, var(--white) 50%);
+	-webkit-background-clip: text;
+	-webkit-text-fill-color: transparent;
+}
+
+.waggon .services {
+	display: none;
+}
+
+#carriages[data-direction="left"] .waggon:first-child::before {
+	content: "";
+	width: 100%;
+	height: 1.8em;
+	display: grid;
+	place-items: center;
+	position: absolute;
+	top: 0;
+	right: 100%;
+	margin-right: 0.2em;
+	background-color: var(--blue);
+	mask-image: url("./icons/double-chevron-small-left-small.svg");
+	-webkit-mask-image: url("./icons/double-chevron-small-left-small.svg");
+	mask-size: contain;
+	-webkit-mask-size: contain;
+	mask-repeat: no-repeat;
+	-webkit-mask-repeat: no-repeat;
+	mask-position: center;
+	-webkit-mask-position: center;
+}
+#carriages[data-direction="right"] .waggon:last-child::after {
+	content: "";
+	width: 100%;
+	height: 1.8em;
+	display: grid;
+	place-items: center;
+	position: absolute;
+	top: 0;
+	left: 100%;
+	margin-left: 0.2em;
+	background-color: var(--blue);
+	mask-image: url("./icons/double-chevron-small-right-small.svg");
+	-webkit-mask-image: url("./icons/double-chevron-small-right-small.svg");
+	mask-size: contain;
+	-webkit-mask-size: contain;
+	mask-repeat: no-repeat;
+	-webkit-mask-repeat: no-repeat;
+	mask-position: center;
+	-webkit-mask-position: center;
+}