Do some styling

6 files changed, 31 insertions, 2 deletions

diff --git a/src/kc.gen.tsx b/src/kc.gen.tsx
index 95ab156..a9ac152 100644
--- a/src/kc.gen.tsx
+++ b/src/kc.gen.tsx
@@ -10,9 +10,9 @@
 
 import { lazy, Suspense, type ReactNode } from "react";
 
-export type ThemeName = "keycloakify-starter";
+export type ThemeName = "pydis-theme";
 
-export const themeNames: ThemeName[] = ["keycloakify-starter"];
+export const themeNames: ThemeName[] = ["pydis-theme"];
 
 export type KcEnvName = never;
 
diff --git a/src/login/KcPage.tsx b/src/login/KcPage.tsx
index cfd68fb..7ebe6cb 100644
--- a/src/login/KcPage.tsx
+++ b/src/login/KcPage.tsx
@@ -1,3 +1,4 @@
+import "./main.css"
 import { Suspense, lazy } from "react";
 import type { ClassKey } from "keycloakify/login";
 import type { KcContext } from "./KcContext";
diff --git a/src/login/assets/banner_pattern.svg b/src/login/assets/banner_pattern.svg
new file mode 100644
index 0000000..6b4609b
--- /dev/null
+++ b/src/login/assets/banner_pattern.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 128 128"><defs><style>.a{fill:none;}.b{fill:#6f86d5;}.c{opacity:0.12;}.d{clip-path:url(#a);}.e{fill:#cad6ff;}.f{fill:#fff;}</style><clipPath id="a"><rect class="a" width="128" height="128"/></clipPath></defs><rect class="b" width="128" height="128"/><g class="c"><g class="d"><path class="e" d="M127.51,86.07a59.55,59.55,0,0,0-9.54.81c-8.43,1.5-10,4.62-10,10.4v7.64h19.94v2.53H100.53c-5.79,0-10.88,3.5-12.46,10.15-1.84,7.61-1.91,12.38,0,20.34,1.41,5.94,4.81,10.15,10.6,10.15h6.84V139A12.69,12.69,0,0,1,118,126.53h19.91a10.07,10.07,0,0,0,10-10.17V97.28c0-5.42-4.56-9.48-10-10.4a60.25,60.25,0,0,0-10.37-.81Zm-10.77,6.14A3.82,3.82,0,1,1,113,96,3.81,3.81,0,0,1,116.74,92.21Z"/><path class="f" d="M150.37,107.45v8.88A12.8,12.8,0,0,1,137.91,129H118a10.19,10.19,0,0,0-10,10.17v19c0,5.43,4.71,8.63,10,10.17a33.16,33.16,0,0,0,19.91,0c5-1.44,10-4.38,10-10.17V150.6H128v-2.54h29.88c5.79,0,7.95-4.06,10-10.14,2.09-6.27,2-12.3,0-20.35-1.44-5.78-4.18-10.14-10-10.14h-7.47ZM139.16,155.7a3.82,3.82,0,1,1-3.75,3.8A3.78,3.78,0,0,1,139.16,155.7Z"/><path class="e" d="M-.49,86.07a59.55,59.55,0,0,0-9.54.81c-8.43,1.5-10,4.62-10,10.4v7.64H-.06v2.53H-27.47c-5.79,0-10.88,3.5-12.46,10.15-1.84,7.61-1.91,12.38,0,20.34,1.41,5.94,4.81,10.15,10.6,10.15h6.84V139A12.69,12.69,0,0,1-10,126.53H9.88a10.07,10.07,0,0,0,10-10.17V97.28c0-5.42-4.56-9.48-10-10.4A60.25,60.25,0,0,0-.49,86.07Zm-10.77,6.14A3.81,3.81,0,0,1-7.51,96a3.78,3.78,0,0,1-3.75,3.81A3.78,3.78,0,0,1-15,96,3.78,3.78,0,0,1-11.26,92.21Z"/><path class="f" d="M22.37,107.45v8.88A12.8,12.8,0,0,1,9.91,129H-10a10.19,10.19,0,0,0-10,10.17v19c0,5.43,4.71,8.63,10,10.17a33.16,33.16,0,0,0,19.91,0c5-1.44,10-4.38,10-10.17V150.6H0v-2.54H29.84c5.79,0,8-4.06,10-10.14,2.09-6.27,2-12.3,0-20.35-1.44-5.78-4.18-10.14-10-10.14H22.37ZM11.16,155.7a3.82,3.82,0,1,1-3.75,3.8A3.78,3.78,0,0,1,11.16,155.7Z"/><path class="e" d="M63.51,22.07a59.55,59.55,0,0,0-9.54.81c-8.43,1.5-10,4.62-10,10.4v7.64H63.94v2.53H36.53c-5.79,0-10.88,3.5-12.46,10.15-1.84,7.61-1.91,12.38,0,20.34,1.41,5.94,4.81,10.15,10.6,10.15h6.84V75A12.69,12.69,0,0,1,54,62.53H73.88a10.07,10.07,0,0,0,10-10.17V33.28c0-5.42-4.56-9.48-10-10.4a60.25,60.25,0,0,0-10.37-.81ZM52.74,28.21A3.82,3.82,0,1,1,49,32,3.81,3.81,0,0,1,52.74,28.21Z"/><path class="f" d="M86.37,43.45v8.88A12.8,12.8,0,0,1,73.91,65H54A10.19,10.19,0,0,0,44,75.18v19c0,5.43,4.71,8.63,10,10.17a33.16,33.16,0,0,0,19.91,0c5-1.44,10-4.38,10-10.17V86.6H64V84.06H93.84c5.79,0,8-4.06,10-10.14,2.09-6.27,2-12.3,0-20.35-1.44-5.78-4.18-10.14-10-10.14H86.37ZM75.16,91.7a3.82,3.82,0,1,1-3.75,3.8A3.78,3.78,0,0,1,75.16,91.7Z"/><path class="e" d="M127.51-41.93a59.55,59.55,0,0,0-9.54.81c-8.43,1.5-10,4.62-10,10.4v7.64h19.94v2.53H100.53c-5.79,0-10.88,3.5-12.46,10.15C86.23-2.79,86.16,2,88.07,9.94c1.41,5.94,4.81,10.15,10.6,10.15h6.84V11A12.69,12.69,0,0,1,118-1.47h19.91a10.07,10.07,0,0,0,10-10.17V-30.72c0-5.42-4.56-9.48-10-10.4a60.25,60.25,0,0,0-10.37-.81Zm-10.77,6.14A3.81,3.81,0,0,1,120.49-32a3.78,3.78,0,0,1-3.75,3.81A3.78,3.78,0,0,1,113-32,3.78,3.78,0,0,1,116.74-35.79Z"/><path class="f" d="M150.37-20.55v8.88A12.8,12.8,0,0,1,137.91,1H118a10.19,10.19,0,0,0-10,10.17V30.23c0,5.43,4.71,8.63,10,10.17a33.16,33.16,0,0,0,19.91,0c5-1.44,10-4.38,10-10.17V22.6H128V20.06h29.88c5.79,0,7.95-4.06,10-10.14,2.09-6.27,2-12.3,0-20.35-1.44-5.78-4.18-10.14-10-10.14h-7.47ZM139.16,27.7a3.82,3.82,0,1,1-3.75,3.8A3.78,3.78,0,0,1,139.16,27.7Z"/><path class="e" d="M-.49-41.93a59.55,59.55,0,0,0-9.54.81c-8.43,1.5-10,4.62-10,10.4v7.64H-.06v2.53H-27.47c-5.79,0-10.88,3.5-12.46,10.15-1.84,7.61-1.91,12.38,0,20.34,1.41,5.94,4.81,10.15,10.6,10.15h6.84V11A12.69,12.69,0,0,1-10-1.47H9.88a10.07,10.07,0,0,0,10-10.17V-30.72c0-5.42-4.56-9.48-10-10.4A60.25,60.25,0,0,0-.49-41.93Zm-10.77,6.14A3.81,3.81,0,0,1-7.51-32a3.78,3.78,0,0,1-3.75,3.81A3.78,3.78,0,0,1-15-32,3.78,3.78,0,0,1-11.26-35.79Z"/><path class="f" d="M22.37-20.55v8.88A12.8,12.8,0,0,1,9.91,1H-10A10.19,10.19,0,0,0-20,11.18V30.23c0,5.43,4.71,8.63,10,10.17a33.16,33.16,0,0,0,19.91,0c5-1.44,10-4.38,10-10.17V22.6H0V20.06H29.84c5.79,0,8-4.06,10-10.14,2.09-6.27,2-12.3,0-20.35-1.44-5.78-4.18-10.14-10-10.14H22.37ZM11.16,27.7a3.82,3.82,0,1,1-3.75,3.8A3.78,3.78,0,0,1,11.16,27.7Z"/></g></g></svg>
\ No newline at end of file
diff --git a/src/login/assets/pydis-dark.png b/src/login/assets/pydis-dark.png
new file mode 100644
index 0000000..119b2ce
--- /dev/null
+++ b/src/login/assets/pydis-dark.png
diff --git a/src/login/assets/pydis-light.png b/src/login/assets/pydis-light.png
new file mode 100644
index 0000000..7df41e6
--- /dev/null
+++ b/src/login/assets/pydis-light.png
diff --git a/src/login/main.css b/src/login/main.css
new file mode 100644
index 0000000..e813c77
--- /dev/null
+++ b/src/login/main.css
@@ -0,0 +1,27 @@
+body.kcBodyClass {
+    background-image: linear-gradient(rgba(0, 0, 0, 0.2),
+            rgba(0, 0, 0, 0.4)), url("./assets/banner_pattern.svg");
+    background-size: 256px;
+    background-repeat: repeat;
+    height: 100%;
+}
+
+div.kc-logo-text {
+    background-image: url(./assets/pydis-light.png);
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: 85%;
+    height: 75px;
+    width: 300px;
+    margin: 0 auto;
+}
+
+@media (max-width: 767px) {
+    div.kc-logo-text {
+        margin: 0;
+        background-image: url(./assets/pydis-dark.png);
+        width: 150px;
+        height: 50px;
+        background-size: 100%;
+    }
+}