From a012ed9233c004d3b97bf89b6dc4abc2a48ea902 Mon Sep 17 00:00:00 2001
From: Type-Style <github@type-style.de>
Date: Tue, 21 May 2024 12:48:41 +0200
Subject: [PATCH] [Task] #61, cut design update

---
 httpdocs/css/base.css    |  7 +++++++
 src/client/css/login.css | 15 +++++++++++++--
 2 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/httpdocs/css/base.css b/httpdocs/css/base.css
index 5bc9da9..a1274ba 100644
--- a/httpdocs/css/base.css
+++ b/httpdocs/css/base.css
@@ -123,6 +123,7 @@ Neutral: #131211
 	--bg: color-mix(in oklch, var(--neutral) 20%, white);
 	--text: color-mix(in oklch, var(--neutral) 20%, black);
 	--textOnColor: var(--neutral);
+  --semiBg: #ffffffbb;
 
   /* dark theme, initial state (prefers mq) by react */
   &[data-mui-color-scheme="dark"] {
@@ -133,6 +134,7 @@ Neutral: #131211
     
 		--bg: color-mix(in oklch, var(--neutral) 20%, black);
 		--text: color-mix(in oklch, var(--neutral) 20%, white);
+    --semiBg: #00000077;
 	}
 }
 
@@ -151,6 +153,11 @@ Neutral: #131211
   position:absolute;
   width:1px
 }
+.cut {
+  --cut: 2em;
+  clip-path: polygon(0% var(--cut), var(--cut) 0%, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%);
+}
+	
 
 @media screen and
   (prefers-reduced-motion: reduce), 
diff --git a/src/client/css/login.css b/src/client/css/login.css
index f2b1e69..b7d893c 100644
--- a/src/client/css/login.css
+++ b/src/client/css/login.css
@@ -31,6 +31,14 @@
 	animation: move-it 10s linear infinite;
 
 
+	.wrapper {
+		max-width: 50em;
+		padding: 2.5em;
+		margin: 2.5em;
+		background: var(--semiBg);
+		--cut: 3em;
+		.cut { --cut: 1.1em } /* reset for child elements */
+	}
 
 	.headline {
 		margin-inline: auto;
@@ -43,7 +51,7 @@
 	form {
 		display: flex;
 		flex-flow: nowrap column;
-		gap: 1.5em;
+		gap: 2em;
 		margin-bottom: 10vh;
 	}
 
@@ -78,13 +86,16 @@
 
 	.submit {
 		align-self: end;
+		font-size: 1.325rem;
+		min-width: 9em;
+		min-height: 3.5em;
+		border-radius: 0;
 
 		[data-mui-color-scheme="light"] &:not([disabled]) {
 			color: var(--main);
 			background-color: color-mix(in oklch, var(--neutral) 90%, transparent);
 		}
 
-
 	}