mise a jours post wikithon winterschool 2024

style.css

@@ -1,8 +1,4 @@
-:root {
-    --color-a: #A700FF;
-    --color-a-shadow: rgba(167, 0, 255, 0.44);
-    --color-b: #00AB6B;
-}
+
 
 /* F O N T E S */
 @font-face {
@@ -22,6 +18,22 @@
     font-weight:  normal;
 }
 
+@font-face {
+font-family: Lucette;
+src: url("/mw/skins/foreground/assets/fonts/LUCETTE/font/otf/Lucette-Regular.otf");
+src: url("/mw/skins/foreground/assets/fonts/LUCETTE/font/ttf/Lucette-Regular.ttf");
+src: url("/mw/skins/foreground/assets/fonts/LUCETTE/font/woff/Lucette-Regular.woff");
+src: url("/mw/skins/foreground/assets/fonts/LUCETTE/font/woff2/Lucette-Regular.woff2");
+}
+@font-face {
+font-family: Lucette;
+src: url("/mw/skins/foreground/assets/fonts/LUCETTE/font/otf/Lucette-Regularitalic.otf");
+src: url("/mw/skins/foreground/assets/fonts/LUCETTE/font/ttf/Lucette-Regularitalic.ttf");
+src: url("/mw/skins/foreground/assets/fonts/LUCETTE/font/woff/Lucette-Regularitalic.woff");
+src: url("/mw/skins/foreground/assets/fonts/LUCETTE/font/woff2/Lucette-Regularitalic.woff2");
+font-style: italic;
+}
+
 @font-face {
  font-family:'FontAwesome';
  src:url(/mw/skins/foreground/assets/fonts/fontawesome-webfont.eot?32400);
@@ -30,11 +42,26 @@
  font-style:normal
 }
 
+:root {
+    --bg:#fff;
+    --color-a: #A700FF;
+    --color-a-shadow: rgba(167, 0, 255, 0.44);
+    --color-b: #00AB6B;
+}
+
+@media (prefers-color-scheme: dark) {
+	:root {
+		--bg:#222;
+		--fg:
+	}
+}
+
+
 
 body {
     margin: 0;
     padding: 0;
-    background: #f1f2f3;
+    background: var(--bg);
     overflow: hidden;
     font-family: Vega;
 }
@@ -91,6 +118,15 @@ svg {
     position: absolute;
     left: 0; top: 0; right: 0; bottom: 0;
     font: 10px sans-serif;
+    transform: scale(3);
+}
+
+@media only screen and (max-width: 320px) {
+#cats,
+svg {
+    zoom: 0.5;
+    transform: scale(1);
+}
 }
 
 svg g.page {
@@ -99,16 +135,24 @@ svg g.page {
 
 svg g.page text {
     visibility: hidden;
-    fill: black;
-    font: 16px Vega;
+    fill: var(--color-a);
+    font: 13px Combined;
 }
 
 svg g.active text {
     /*visibility: visible;*/
 }
 
+svg g.mouse use {
+    fill: var(--color-a);
+    stroke: var(--color-a);
+}
 svg g.mouse text {
     visibility: visible;
+    stroke-width: 1.5px;
+    stroke: white;
+    paint-order: stroke;
+
 }
 
 use {
@@ -142,11 +186,16 @@ use {
 
 .active use {
     fill: #FFF;
-    stroke: var(--color-a);
+    stroke: var(--color-b) !important;
 }
 
 .active text {
-    stroke: none;
+    stroke: white;
+    stroke-width: 1px;
+    paint-order: stroke;
+    fill: var(--color-b) !important;
+    visibility: visible !important;
+    transform: translate(-20px, 20px);
 }
 
 .active2 use {
@@ -158,8 +207,21 @@ use {
 
 /* Categories */
 
-#cats .body {
-  display: none;
+@media only screen and (max-width: 600px) {
+	#page {
+		display:none;
+	}
+	#wikiframediv {
+		right:0;
+		top:0;
+	}
+
+		#cats .body {
+		  display: none;
+		}
+		#cats.expanded .placeholder {
+		  display: block;
+		}
 }
 
 #cats .placeholder {
@@ -173,7 +235,7 @@ use {
 }
 
 #cats.expanded .placeholder {
-  display: block;
+  display: none;
 }
 #cats.expanded .placeholder:hover {
 	color: var(--color-b);
@@ -244,15 +306,16 @@ use {
 
 #page {
   position: absolute;
-  left: 0; right: 50%;
+  left: 65%; 
+  right:0;
   top: 0;
   bottom: 0;
 }
 
 #wikiframediv {
     position: absolute;
-    left: 50%; top: 0;
-    right: 0; bottom: 0;
+    left: 0; top: 0;
+    right: 35%; bottom: 0;
 }
 #wikiframediv iframe {
   width: 100%;
@@ -374,6 +437,11 @@ a.talk {
 }
 
 @media only screen and (max-width: 600px) {
+#cats,
+svg {
+    zoom: 0.5;
+    transform: scale(1);
+}
   body {
     overflow: auto;
   }
@@ -386,6 +454,7 @@ a.talk {
   }
 
   #page {
+	  display:none;
     position: absolute;
     left: 0; top: 0;
     height: 50vh;
@@ -395,7 +464,7 @@ a.talk {
 
   #wikiframediv {
       position: absolute;
-      left: 0; top: 50vh;
+      left: 0; top: 0;
       height: 100vh;
       width: 100vw;
   }
@@ -415,7 +484,6 @@ a.talk {
   font-size: 12px;
   padding: 6px 2px;
   text-transform: uppercase;
-  max-width: 100px;
   cursor: pointer;
 }