[chore] Webkit frontend fixes (#1492)

* fix webkit profile preview layout

* general page layout
This commit is contained in:
f0x52 2023-02-14 11:58:57 +01:00 committed by GitHub
parent 6c6f042290
commit 700ed7769f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 19 additions and 25 deletions

View file

@ -47,7 +47,6 @@ html, body {
body { body {
line-height: 1.5em; line-height: 1.5em;
min-height: 100vh;
position: relative; position: relative;
} }
@ -56,11 +55,8 @@ body {
} }
.page { .page {
position: absolute;
display: grid; display: grid;
min-height: 100%; min-height: 100vh;
min-width: 100%;
width: 100%;
grid-template-columns: auto minmax(auto, 50rem) auto; grid-template-columns: auto minmax(auto, 50rem) auto;
grid-template-columns: auto min(92%, 50rem) auto; grid-template-columns: auto min(92%, 50rem) auto;

View file

@ -30,7 +30,6 @@ main {
.profile { .profile {
background: $bg-accent; background: $bg-accent;
display: grid; display: grid;
grid-template-rows: auto auto auto;
grid-template-columns: 100%; grid-template-columns: 100%;
gap: 0.5rem; gap: 0.5rem;
margin-bottom: 0.2rem; margin-bottom: 0.2rem;

View file

@ -35,9 +35,9 @@ section {
#root { #root {
display: grid; display: grid;
grid-template-columns: 1fr 90ch 1fr; /* keep in sync with base.css .page {} */
width: 100vw; grid-template-columns: auto minmax(auto, 50rem) auto;
max-width: 100vw; grid-template-columns: auto min(92%, 50rem) auto;
box-sizing: border-box; box-sizing: border-box;
section.with-sidebar { section.with-sidebar {
@ -319,22 +319,25 @@ section.with-sidebar > div, section.with-sidebar > form {
display: grid; display: grid;
grid-template-columns: 70% 30%; grid-template-columns: 70% 30%;
grid-template-rows: 100%; grid-template-rows: 100%;
gap: 1rem;
.profile {
.basic {
margin-bottom: 0.5rem;
/* margin-top: 0; */
}
}
.files { .files {
width: 100%; width: 100%;
margin: 1rem;
margin-right: 0;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
gap: 1rem;
h3 { h3 {
margin-top: 0; margin: 0;
margin-bottom: 0.5rem; margin-bottom: 0.3rem;
}
div:first-child {
margin-bottom: 1rem;
} }
span { span {
@ -456,7 +459,8 @@ span.form-info {
} }
} }
@media screen and (max-width: 100ch) { @media screen and (max-width: 60rem) {
/* vertical layout */
#root { #root {
padding: 1rem; padding: 1rem;
grid-template-columns: 100%; grid-template-columns: 100%;
@ -484,13 +488,8 @@ span.form-info {
} }
.user-profile .overview { .user-profile .overview {
grid-template-columns: 100%; grid-template-columns: auto;
grid-template-rows: auto auto; grid-template-rows: auto 1fr;
.files {
margin: 0;
margin-top: 1rem;
}
} }
main section { main section {