3 files changed, 75 insertions(+), 5 deletions(-)

M README.md
M static/styles.css
M template/templates/login.tmpl

@@ 1,8 1,14 @@
 # Tixë
 Bookmarking / link organizing application.
 
+## Installation and configuration
+An example docker compose file is provided.
+
+### OIDC
+todo
+
 ## Todo
-### OIDC login
+### Internal users, and initial admin user
 
 ## Dev
 ### Tailwind

@@ 522,10 522,19 @@ video {
   --tw-backdrop-sepia:  ;
 }
 
+.my-12 {
+  margin-top: 3rem;
+  margin-bottom: 3rem;
+}
+
 .flex {
   display: flex;
 }
 
+.h-px {
+  height: 1px;
+}
+
 .w-full {
   width: 100%;
 }


@@ 540,14 549,22 @@ video {
   min-width: max-content;
 }
 
-.max-w-7xl {
-  max-width: 80rem;
-}
-
 .max-w-4xl {
   max-width: 56rem;
 }
 
+.max-w-3xl {
+  max-width: 48rem;
+}
+
+.grow {
+  flex-grow: 1;
+}
+
+.grow-0 {
+  flex-grow: 0;
+}
+
 .flex-col {
   flex-direction: column;
 }


@@ 580,21 597,45 @@ video {
   border-bottom-width: 2px;
 }
 
+.border-t-0 {
+  border-top-width: 0px;
+}
+
 .bg-slate-50 {
   --tw-bg-opacity: 1;
   background-color: rgb(248 250 252 / var(--tw-bg-opacity));
 }
 
+.bg-transparent {
+  background-color: transparent;
+}
+
 .bg-gradient-to-br {
   background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
 }
 
+.bg-gradient-to-r {
+  background-image: linear-gradient(to right, var(--tw-gradient-stops));
+}
+
 .from-slate-600 {
   --tw-gradient-from: #475569 var(--tw-gradient-from-position);
   --tw-gradient-to: rgb(71 85 105 / 0) var(--tw-gradient-to-position);
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
 
+.from-neutral-500 {
+  --tw-gradient-from: #737373 var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(115 115 115 / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+
+.from-transparent {
+  --tw-gradient-from: transparent var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+
 .via-blue-400 {
   --tw-gradient-to: rgb(96 165 250 / 0)  var(--tw-gradient-to-position);
   --tw-gradient-stops: var(--tw-gradient-from), #60a5fa var(--tw-gradient-via-position), var(--tw-gradient-to);


@@ 604,6 645,14 @@ video {
   --tw-gradient-to: #f43f5e var(--tw-gradient-to-position);
 }
 
+.to-neutral-500 {
+  --tw-gradient-to: #737373 var(--tw-gradient-to-position);
+}
+
+.to-transparent {
+  --tw-gradient-to: transparent var(--tw-gradient-to-position);
+}
+
 .bg-size-200 {
   background-size: 200% 200%;
 }


@@ 653,6 702,10 @@ video {
   color: transparent;
 }
 
+.opacity-75 {
+  opacity: 0.75;
+}
+
 .drop-shadow-md {
   --tw-drop-shadow: drop-shadow(0 4px 3px rgb(0 0 0 / 0.07)) drop-shadow(0 2px 2px rgb(0 0 0 / 0.06));
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);


@@ 686,3 739,9 @@ video {
 .hover\:underline:hover {
   text-decoration-line: underline;
 }
+
+@media (prefers-color-scheme: dark) {
+  .dark\:opacity-100 {
+    opacity: 1;
+  }
+}

@@ 6,4 6,9 @@
 	href="/auth/login">
 	Liljamo Auth
 </a>
+<div class="max-w-3xl w-full flex items-center gap-4">
+	<div class="grow my-12 h-px border-t-0 bg-transparent bg-gradient-to-r from-transparent to-neutral-500 opacity-75 dark:opacity-100"></div>
+  <div class="grow-0">OR</div>
+  <div class="grow my-12 h-px border-t-0 bg-transparent bg-gradient-to-r from-neutral-500 to-transparent opacity-75 dark:opacity-100"></div>
+</div>
 {{ end }}