Final refactor of the CSS files

styles/components/error.css

@@ -0,0 +1,6 @@
+.error-block pre {
+    display: inline-block;
+    margin: 0;
+
+    text-align: left;
+}

styles/components/form-monorow.css

@@ -0,0 +1,20 @@
+.form-monorow {
+    max-width: 600px;
+
+    margin-left: auto;
+    margin-right: auto;
+
+    display: flex;
+    flex-direction: row;
+    gap: 4px;
+    justify-content: center;
+    align-items: center;
+}
+
+.form-monorow *:first-child {
+    flex-grow: 1;
+}
+
+.form-monorow *:last-child {
+    flex-grow: 0;
+}

styles/components/views/event.css

@@ -0,0 +1,27 @@
+.view-event {
+    display: grid;
+    grid-template-areas: 
+        "x1 ti ti ti x4"
+        "x1 x2 po x3 x4"
+        "x1 x2 de x3 x4"
+    ;
+    grid-template-columns: 3fr 1fr 800px 1fr 3fr;
+    grid-template-rows: auto auto 1fr;
+
+    row-gap: 4px;
+
+    margin: 0 auto;
+}
+
+.view-event-title {
+    grid-area: ti;
+    text-align: center;
+}
+
+.view-event-postcard {
+    grid-area: po;
+}
+
+.view-event-description {
+    grid-area: de;
+}

styles/elements.css

@@ -11,6 +11,12 @@ body {
     min-height: 100vh;
 }
 
+main {
+    padding: 8px;
+
+    min-height: 100vh;
+}
+
 h1, h2, h3, h4, h5, h6 {
     margin: 0;
 }
@@ -41,19 +47,19 @@ input, button, textarea {
 
     vertical-align: middle;
 
+    text-align: inherit;
+    font-weight: inherit;
+
+    width: 100%;
 }
 
 input[type="text"], input[type="file"] {
     border-style: inset;
-
-    width: 100%;
 }
 
 button, input[type="submit"] {
     border-style: outset;
     text-align: center;
-
-    width: 100%;
 }
 
 button:active:not([disabled]), input[type="submit"]:active:not([disabled]) {
@@ -64,7 +70,5 @@ textarea {
     border-style: inset;
     border-radius: 16px 16px 0 16px;
     
-    width: 100%;
+    resize: vertical;
-    min-width: 100%;
-    max-width: 100%;
 }

styles/globals.css

@@ -5,6 +5,7 @@
 @import "components/views/content.css";
 @import "components/views/landing.css";
 @import "components/views/notice.css";
+@import "components/views/event.css";
 
 @import "components/icon.css";
 @import "components/list-events.css";
@@ -12,6 +13,8 @@
 @import "components/square.css";
 @import "components/telegram-login.css";
 @import "components/toolbar.css";
+@import "components/form-monorow.css";
+@import "components/error.css";
 
 
 * {
@@ -28,37 +31,3 @@
     opacity: 0.2;
     cursor: not-allowed;
 }
-
-main {
-    min-height: 100vh;
-    padding: 8px;
-}
-
-
-.form-monorow {
-    max-width: 600px;
-
-    margin-left: auto;
-    margin-right: auto;
-
-    display: flex;
-    flex-direction: row;
-    gap: 4px;
-    justify-content: center;
-    align-items: center;
-}
-
-.form-monorow input {
-    flex-grow: 1;
-}
-
-.form-monorow input[type="submit"] {
-    flex-grow: 0;
-}
-
-.error-block pre {
-    display: inline-block;
-    margin: 0;
-
-    text-align: left;
-}