update: polish sign in screen

Merge pull request #14 from odweta/odweta-polish-sign-in-page
Center sign-in card content while keeping text left-aligned
2026-09-10 18:26:41 +02:00 · 2026-09-10 18:18:20 +02:00 · 2026-09-10 18:17:46 +02:00 · 2026-09-10 18:14:15 +02:00 · 2026-09-10 18:13:18 +02:00 · 2026-09-10 18:07:42 +02:00
2 changed files with 40 additions and 8 deletions
@@ -9,9 +9,14 @@
 <body>
    <section id="auth-screen" aria-labelledby="auth-title">
        <div class="auth-card">
-            <p class="eyebrow">FAKTUROVAČ</p>
-            <h1 id="auth-title">Vaše faktury, bezpečně po ruce.</h1>
-            <p class="auth-intro">Spravujte faktury přehledně.</p>
+            <!--<p class="eyebrow">FAKTUROVAČ</p>-->
+            <h1 id="auth-title">
+                <span>Fakturovač</span>
+            </h1>
+            <p class="auth-intro">
+                <span>Vaše faktury,</span>
+                <span>bezpečně po ruce.</span>
+            </p>
            <form id="auth-form">
                <div class="form-group">
                    <label for="authEmail">E-mail</label>
@@ -33,14 +33,19 @@ body {
 }

 .auth-card {
-    width: min(100%, 460px);
-    padding: clamp(1.75rem, 5vw, 3.5rem);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: min(100%, 760px);
+    padding: clamp(1.75rem, 4vw, 3.25rem) clamp(1.75rem, 6vw, 4.5rem);
    background: var(--paper);
    border: 1px solid rgba(24, 59, 86, 0.12);
+    border-radius: 1rem;
    box-shadow: var(--shadow);
 }

 .eyebrow {
+    align-self: flex-start;
    margin: 0 0 0.75rem;
    color: var(--blue);
    font-size: 0.75rem;
@@ -52,12 +57,24 @@ body {
    margin: 0;
    color: var(--navy);
    font-family: Georgia, serif;
-    font-size: clamp(2rem, 6vw, 3.4rem);
+    font-size: clamp(2rem, 5vw, 3.2rem);
    font-weight: 500;
-    line-height: 1.05;
+    line-height: 1.1;
+}
+
+.auth-card h1 span {
+    display: block;
+    white-space: nowrap;
+}
+
+@media (max-width: 420px) {
+    .auth-card h1 span {
+        white-space: normal;
+    }
 }

 .auth-intro {
+    max-width: 480px;
    margin: 1.25rem 0 2rem;
    color: var(--muted-ink);
    line-height: 1.6;
@@ -66,6 +83,7 @@ body {
 #auth-form {
    display: grid;
    gap: 1rem;
+    width: min(100%, 420px);
 }

 #auth-form .form-group {
@@ -74,18 +92,21 @@ body {

 #authSubmitButton {
    margin-top: 0.5rem;
+    min-height: 3rem;
    padding: 0.8rem 1rem;
    color: #fff;
    background: var(--navy);
    border: 0;
-    border-radius: 0.25rem;
+    border-radius: 0.5rem;
    cursor: pointer;
    font: inherit;
    font-weight: 700;
+    transition: background-color 160ms ease, transform 160ms ease;
 }

 #authSubmitButton:hover:not(:disabled) {
    background: var(--blue);
+    transform: translateY(-1px);
 }

 .text-button {
@@ -99,6 +120,12 @@ body {
    text-align: left;
 }

+.text-button:focus-visible,
+#authSubmitButton:focus-visible {
+    outline: 3px solid rgba(43, 111, 143, 0.3);
+    outline-offset: 3px;
+}
+
 .text-button:hover {
    color: var(--navy);
    text-decoration: underline;
Author	SHA1	Message	Date
odweta	be6809336a	update: polish sign in screen	2026-09-10 18:26:41 +02:00
odweta	872d8f87c4	Merge pull request #14 from odweta/odweta-polish-sign-in-page Center sign-in card content while keeping text left-aligned	2026-09-10 18:18:20 +02:00
odwetaandCopilot App	26827904db	Center sign-in card content while keeping text left-aligned The card's content (title, intro, form) hugged the left edge instead of sitting centered within the wider card. Make .auth-card a centered flex column so each element centers as a block, while individual elements keep their own text-align: left. The eyebrow label stays pinned to the left edge via align-self. The title's two-line layout is unaffected. Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>	2026-09-10 18:17:46 +02:00
odweta	2cae35bd05	Merge pull request #13 from odweta/odweta-polish-sign-in-page Widen sign-in card so title fits on two lines	2026-09-10 18:14:15 +02:00
odwetaandCopilot App	310a7c5e0d	Widen sign-in card so title reliably fits on two lines The auth title's two spans could each wrap on wide viewports since the card was capped at 460px while the heading font scaled up to 3.4rem, producing three lines instead of two. Widen the card, tune the heading's clamp, and force each title span to a single line above 420px so it never breaks unpredictably. The form and intro text keep a comfortable reading width inside the wider card. Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>	2026-09-10 18:13:18 +02:00
odweta	60be8331c1	Merge pull request #12 from odweta/odweta-single-saved-signature Store a single saved signature per user, like supplier	2026-09-10 18:07:42 +02:00
odweta	8deec130dc	Merge pull request #11 from odweta/odweta-polish-sign-in-page Polish sign-in page for better visual hierarchy	2026-09-10 18:07:12 +02:00
odwetaandCopilot App	68abd5ccc8	Polish sign-in page for better visual hierarchy - Force auth title onto two lines consistently for cleaner presentation - Round card and button corners for a softer, modern look - Add hover motion and larger touch target on submit button - Add visible keyboard focus styles for auth controls Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>	2026-09-10 18:06:16 +02:00