diff --git a/backend/static/css/16-retro.css b/backend/static/css/16-retro.css index b8bb1ac..d508076 100644 --- a/backend/static/css/16-retro.css +++ b/backend/static/css/16-retro.css @@ -257,7 +257,8 @@ margin-bottom: 0; } -:root[data-theme="retro"] .docs-card h2 { +:root[data-theme="retro"] .docs-card h2, +:root[data-theme="retro"] .upload-options .options-title { display: flex; align-items: center; justify-content: space-between; @@ -279,7 +280,8 @@ margin: -1.5rem -1.5rem 1rem; } -:root[data-theme="retro"] .docs-card h2::after { +:root[data-theme="retro"] .docs-card h2::after, +:root[data-theme="retro"] .upload-options .options-title::after { content: "✕"; display: grid; place-items: center; diff --git a/backend/static/css/20-upload.css b/backend/static/css/20-upload.css index 0e78a6c..e3873d4 100644 --- a/backend/static/css/20-upload.css +++ b/backend/static/css/20-upload.css @@ -1,5 +1,5 @@ .upload-view { - width: min(48rem, calc(100% - 2rem)); + width: min(64rem, calc(100% - 2rem)); min-height: calc(100vh - 7.25rem); margin: 0 auto; padding: 2.5rem 0; @@ -9,6 +9,45 @@ gap: 1.5rem; } +/* Two-column upload layout: drop-zone window on the left, options on the + right. Collapses to a single column on narrow screens (see 90-responsive). */ +.upload-grid { + display: grid; + grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); + gap: 1.25rem; + align-items: start; +} + +.upload-main, +.upload-options { + margin: 0; +} + +.options-title { + margin: 0 0 1.1rem; + font-size: 1.05rem; + font-weight: 650; + line-height: 1.2; +} + +/* Stack the option fields vertically in the narrower right-hand window. */ +.upload-options .option-grid { + grid-template-columns: 1fr; + margin-top: 0; +} + +/* Summary + upload button sit at the bottom of the options window. */ +.upload-options .form-footer { + flex-direction: column; + align-items: stretch; + gap: 0.75rem; + margin-top: 1.25rem; +} + +.upload-options .form-footer .button { + width: 100%; +} + .hero-copy { text-align: center; } diff --git a/backend/static/css/90-responsive.css b/backend/static/css/90-responsive.css index acad13f..d037565 100644 --- a/backend/static/css/90-responsive.css +++ b/backend/static/css/90-responsive.css @@ -11,6 +11,10 @@ padding: 2rem 0; } + .upload-grid { + grid-template-columns: 1fr; + } + .option-grid, .form-footer, .result-header, diff --git a/backend/templates/pages/home.html b/backend/templates/pages/home.html index 5356143..ec224ce 100644 --- a/backend/templates/pages/home.html +++ b/backend/templates/pages/home.html @@ -10,33 +10,44 @@ {{end}} -
-
- {{if .CurrentUser}} -

Drop it. Share it.

-

{{.Data.LimitSummary}}

- {{else}} -

Send a file. Get a link.

-

Fast, private transfers that expire on your terms.

- {{end}} - + +
+
+ {{if .CurrentUser}} +

Drop it. Share it.

+

{{.Data.LimitSummary}}

+ {{else}} +

Send a file. Get a link.

+

Fast, private transfers that expire on your terms.

+ {{end}} + -
- - - Advanced options - + + +
+
+ +
+
+

Upload options

{{if .CurrentUser}}