From ebe142a62aa28065ffa487eaa38458524f87a6f1 Mon Sep 17 00:00:00 2001
From: Mittanicz <49088589+Mittanicz@users.noreply.github.com>
Date: Tue, 25 Mar 2025 16:11:58 +0100
Subject: [PATCH] Layout setup (#338)
Create css strucure, clean up the index html and use proper tags.
Visualy minor changes, but this allow us maint better visuals and start
the css standards that will help us future
---
src/client/index.html | 230 ++++++++++--------------
src/client/styles.css | 122 +------------
src/client/styles/components/button.css | 57 ++++++
src/client/styles/components/modal.css | 57 ++++++
src/client/styles/core/typography.css | 13 ++
src/client/styles/core/variables.css | 19 ++
src/client/styles/layout/container.css | 19 ++
src/client/styles/layout/footer.css | 24 +++
src/client/styles/layout/header.css | 39 ++++
9 files changed, 332 insertions(+), 248 deletions(-)
create mode 100644 src/client/styles/components/button.css
create mode 100644 src/client/styles/components/modal.css
create mode 100644 src/client/styles/core/typography.css
create mode 100644 src/client/styles/core/variables.css
create mode 100644 src/client/styles/layout/container.css
create mode 100644 src/client/styles/layout/footer.css
create mode 100644 src/client/styles/layout/header.css
diff --git a/src/client/index.html b/src/client/index.html
index 698c73c49..f25248258 100644
--- a/src/client/index.html
+++ b/src/client/index.html
@@ -4,7 +4,6 @@
OpenFront (ALPHA)
-
@@ -46,44 +45,6 @@
filter: blur(4px) brightness(0.7);
}
- /* Critical styles to prevent layout shift */
- .container {
- display: flex;
- padding: 1rem;
- max-width: 540px !important;
- flex-direction: column;
- gap: 1rem;
- opacity: 1;
- transition: opacity 0.3s ease-in-out;
- }
-
- .container__row {
- display: flex;
- gap: 1rem;
- align-items: center;
- }
-
- .container__row--equal > * {
- flex: 1 1 100%;
- }
-
- .logo-glow {
- fill: url(#logo-gradient);
- filter: drop-shadow(1px 1px 0px rgb(255, 255, 255))
- drop-shadow(-1px -1px 0px rgb(255, 255, 255))
- drop-shadow(1px -1px 0px rgb(255, 255, 255))
- drop-shadow(-1px 1px 0px rgb(255, 255, 255))
- drop-shadow(3px 3px 0px rgb(255, 255, 255));
- }
-
- .logo-version {
- color: #2563eb;
- filter: drop-shadow(1px 1px 0px rgb(255, 255, 255))
- drop-shadow(-1px -1px 0px rgb(255, 255, 255))
- drop-shadow(1px -1px 0px rgb(255, 255, 255))
- drop-shadow(-1px 1px 0px rgb(255, 255, 255));
- }
-
.left-gutter-ad {
position: fixed;
left: 0;
@@ -129,6 +90,7 @@
.left-gutter-ad {
display: none;
}
+
.right-gutter-ad {
display: none;
}
@@ -147,9 +109,11 @@
>
@@ -159,71 +123,71 @@
crossorigin="anonymous"
>
-
-
-
-
-
- v0.21.0
+
-
+
-
-
-
-
-
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
@@ -356,38 +303,51 @@
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+