diff --git a/web/assets/static-pages/profile.html b/web/assets/static-pages/profile.html index 0b16d0087..590a764ea 100644 --- a/web/assets/static-pages/profile.html +++ b/web/assets/static-pages/profile.html @@ -20,27 +20,16 @@ - - - - - - - - - - - - - - - + + + + @admin@localhost:8080 - +
diff --git a/web/source/css/base/main.css b/web/source/css/base/main.css index 2f877bb57..7c2f59d02 100644 --- a/web/source/css/base/main.css +++ b/web/source/css/base/main.css @@ -51,7 +51,6 @@ a { main { display: flex; flex-direction: column; - gap: 2rem; padding: 0; h1, h2, h3, h4, h5 { diff --git a/web/source/css/layout/page.css b/web/source/css/layout/page.css index 3d274aedc..fd336b47b 100644 --- a/web/source/css/layout/page.css +++ b/web/source/css/layout/page.css @@ -5,6 +5,11 @@ grid-template-columns: 1fr minmax(auto, 50rem) 1fr; grid-template-columns: 1fr min(92%, 50rem) 1fr; grid-template-rows: auto 1fr auto; + + &.wider { /* used on profile.tmpl, giving more space for it's own 2 column layout */ + grid-template-columns: 1fr minmax(auto, 60rem) 1fr; + grid-template-columns: 1fr min(92%, 65rem) 1fr; + } } .page-header, .page-footer { diff --git a/web/source/css/layout/sectioned.css b/web/source/css/layout/sectioned.css index 88be20a5e..d80c73bd5 100644 --- a/web/source/css/layout/sectioned.css +++ b/web/source/css/layout/sectioned.css @@ -1,4 +1,6 @@ main.sectioned { + gap: 2rem; + section { padding: 1.5rem; background: $bg-accent; diff --git a/web/source/css_old/profile.css b/web/source/css/pages/profile.css similarity index 61% rename from web/source/css_old/profile.css rename to web/source/css/pages/profile.css index c8a948a49..50dbbfbaa 100644 --- a/web/source/css_old/profile.css +++ b/web/source/css/pages/profile.css @@ -1,35 +1,102 @@ -/* - GoToSocial - Copyright (C) GoToSocial Authors admin@gotosocial.org - SPDX-License-Identifier: AGPL-3.0-or-later +.profile { + .column-split { + display: flex; + flex-wrap: wrap; + gap: 1rem; + } - This program is free software: you can redistribute it and/or modify - it under the terms of the GNU Affero General Public License as published by - the Free Software Foundation, either version 3 of the License, or - (at your option) any later version. + .statuses-wrapper { + flex: 65 25rem; + display: flex; + flex-direction: column; + gap: 0.4rem; + min-width: 0%; + } - This program is distributed in the hope that it will be useful, - but WITHOUT ANY WARRANTY; without even the implied warranty of - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the - GNU Affero General Public License for more details. + .statuses { + display: flex; + flex-direction: column; + gap: 0.4rem; - You should have received a copy of the GNU Affero General Public License - along with this program. If not, see . -*/ + .rss-icon { + display: block; + margin: -0.25rem 0; + + .fa { + font-size: 2rem; + object-fit: contain; + vertical-align: middle; + color: $orange2; + /* + Can't size a single-color background, so we use + a linear-gradient that's effectively white. + */ + background: linear-gradient(to right, $white1 100%, transparent 0) no-repeat center center; + background-size: 1.2rem 1.4rem; + } + } -.page { - /* - Profile page can be a little wider than default - page, since we're using a side-by-side column view. - */ - grid-template-columns: 1fr minmax(auto, 60rem) 1fr; - grid-template-columns: 1fr min(92%, 65rem) 1fr; -} + .backnextlinks { + display: flex; + justify-content: space-between; -.profile .column-split { - display: flex; - flex-wrap: wrap; - gap: 1rem; + .next { + margin-left: auto; + } + } + } + + .about-user { + flex: 35 14rem; + border-radius: $br; + overflow: hidden; + + .col-header { + margin-bottom: -0.25rem; + } + + dt { + font-weight: bold; + } + + .fields { + background: $profile-bg; + display: flex; + flex-direction: column; + padding: 0 0.5rem; + padding-top: 0.25rem; + + .field { + padding: 0.25rem; + display: flex; + flex-direction: column; + border-bottom: 0.1rem solid $gray2; + + > dt, > dd { + word-break: break-word; + } + + &:first-child { + border-top: 0.1rem solid $gray2; + } + } + } + + .bio { + background: $profile-bg; + padding: 1rem 0.75rem; + padding-bottom: 1.25rem; + } + + .accountstats { + background: $bg-accent; + padding: 0.75rem; + + display: grid; + grid-template-columns: auto 1fr; + gap: 0.25rem 1rem; + } + } } .profile .profile-header { @@ -231,96 +298,3 @@ } } } - -.profile .statuses-wrapper { - flex: 65 25rem; - display: flex; - flex-direction: column; - gap: 0.4rem; - min-width: 0%; -} - -.profile .statuses { - display: flex; - flex-direction: column; - gap: 0.4rem; - - .rss-icon { - display: block; - margin: -0.25rem 0; - - .fa { - font-size: 2rem; - object-fit: contain; - vertical-align: middle; - color: $orange2; - /* - Can't size a single-color background, so we use - a linear-gradient that's effectively white. - */ - background: linear-gradient(to right, $white1 100%, transparent 0) no-repeat center center; - background-size: 1.2rem 1.4rem; - } - } - - .backnextlinks { - display: flex; - justify-content: space-between; - - .next { - margin-left: auto; - } - } -} - -.profile .about-user { - flex: 35 14rem; - border-radius: $br; - overflow: hidden; - - .col-header { - margin-bottom: -0.25rem; - } - - dt { - font-weight: bold; - } - - .fields { - background: $profile-bg; - display: flex; - flex-direction: column; - padding: 0 0.5rem; - padding-top: 0.25rem; - - .field { - padding: 0.25rem; - display: flex; - flex-direction: column; - border-bottom: 0.1rem solid $gray2; - - > dt, > dd { - word-break: break-word; - } - - &:first-child { - border-top: 0.1rem solid $gray2; - } - } - } - - .bio { - background: $profile-bg; - padding: 1rem 0.75rem; - padding-bottom: 1.25rem; - } - - .accountstats { - background: $bg-accent; - padding: 0.75rem; - - display: grid; - grid-template-columns: auto 1fr; - gap: 0.25rem 1rem; - } -} \ No newline at end of file