From b76c91464a188c22423f19d39b6aa0bcc3108109 Mon Sep 17 00:00:00 2001
From: Jonni Liljamo <jonni@liljamo.com>
Date: Tue, 20 Jun 2023 18:28:53 +0300
Subject: [PATCH] feat: doc update, login page divider

---
 README.md                     |  8 ++++-
 static/styles.css             | 67 ++++++++++++++++++++++++++++++++---
 template/templates/login.tmpl |  5 +++
 3 files changed, 75 insertions(+), 5 deletions(-)

diff --git a/README.md b/README.md
index 7e7b45b..cb86fec 100644
--- a/README.md
+++ b/README.md
@@ -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
diff --git a/static/styles.css b/static/styles.css
index 298f7f2..17d8a51 100644
--- a/static/styles.css
+++ b/static/styles.css
@@ -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;
+  }
+}
diff --git a/template/templates/login.tmpl b/template/templates/login.tmpl
index 863b939..5b95fcc 100644
--- a/template/templates/login.tmpl
+++ b/template/templates/login.tmpl
@@ -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 }}
-- 
2.44.1