💄 Replace css files with scss and factorize CSS rules

frontend/src/_common.scss

@@ -0,0 +1,71 @@
+/* Idfm: 1860x1080px */
+%widget {
+	aspect-ratio: 16/9;
+	--reverse-aspect-ratio: 9/16;
+	/* height is set according to the aspect-ratio, don´t touch it */
+	width: 100%;
+
+	display: flex;
+	flex-direction: column;
+}
+
+/* Idfm: 1800x100px (margin: 17px 60px) */
+.header {
+	width: calc(1800/1920*100%);
+	height: calc(100/1080*100%);
+	/*Percentage margin are computed relatively to the nearest block container's width, not height */
+	/* cf. https://developer.mozilla.org/en-US/docs/Web/CSS/margin-bottom */
+	margin: calc(17/1080*var(--reverse-aspect-ratio)*100%) calc(60/1920*100%);
+
+	display: flex;
+	align-items: center;
+
+	font-family: IDFVoyageur-bold;
+}
+
+// .header .title {
+%title {
+	height: 50%;
+	width: 70%;
+
+	margin-right: auto;
+}
+
+
+
+/* Idfm: 1860x892px (margin: 0px 30px) */
+%body {
+	width: calc(1860/1920*100%);
+	height: calc(892/1080*100%);
+	margin: 0 calc(30/1920*100%);
+
+	display: flex;
+	flex-direction: column;
+
+	background-color: white;
+
+	border-collapse:separate;
+	// border:solid var(--idfm-black) 1px;
+	border-radius: calc(15/1920*100%);
+}
+
+
+
+
+/* Idfm: 1800x54px (margin: 0px 50px) */
+.footer {
+	width: calc(1820/1920*100%);
+	height: calc(54/1080*100%);
+	margin: 0 calc(50/1920*100%);
+
+	display: flex;
+	align-items: center;
+	justify-content: right;
+}
+
+.footer div {
+	aspect-ratio: 1;
+	height: 50%;
+
+	margin-left: calc(42/1920*100%);
+}