diff --git a/styles/components/error.css b/styles/components/error.css new file mode 100644 index 0000000..75c426c --- /dev/null +++ b/styles/components/error.css @@ -0,0 +1,6 @@ +.error-block pre { + display: inline-block; + margin: 0; + + text-align: left; +} diff --git a/styles/components/form-monorow.css b/styles/components/form-monorow.css new file mode 100644 index 0000000..e38238c --- /dev/null +++ b/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; +} diff --git a/styles/components/views/event.css b/styles/components/views/event.css new file mode 100644 index 0000000..032a9d1 --- /dev/null +++ b/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; +} diff --git a/styles/elements.css b/styles/elements.css index de39963..bc578fc 100644 --- a/styles/elements.css +++ b/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]) { @@ -63,8 +69,6 @@ button:active:not([disabled]), input[type="submit"]:active:not([disabled]) { textarea { border-style: inset; border-radius: 16px 16px 0 16px; - - width: 100%; - min-width: 100%; - max-width: 100%; + + resize: vertical; } diff --git a/styles/globals.css b/styles/globals.css index 968fa08..2f6c47f 100644 --- a/styles/globals.css +++ b/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; -}