mostly css

This commit is contained in:
Dym Sohin 2023-12-26 13:19:36 +01:00
parent 2e868c382c
commit b7170fa49f
9 changed files with 1076 additions and 888 deletions

BIN
about.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 255 KiB

87
assets/dist/base.css vendored
View File

@ -65,6 +65,10 @@ pre {
font-size: 1em; font-size: 1em;
} }
pre {
max-width: 35rem;
}
small { small {
font-size: 80%; font-size: 80%;
} }
@ -180,6 +184,8 @@ nav
, nav * , nav *
, footer , footer
, footer * , footer *
, aside
, aside *
{ all: unset { all: unset
; margin: 0 ; margin: 0
; padding: 0 ; padding: 0
@ -214,7 +220,52 @@ body {
display: none; display: none;
} }
aside {
gap: 1.25rem;
justify-content: center;
margin-bottom: 3rem;
}
aside a {
flex-basis: 7rem;
justify-content: center;
border-radius: 0.125rem;
padding: 0.5rem 1rem;
border: 0.125rem solid var(--green1);
}
aside a:active,
aside a:focus,
aside a:hover {
background: var(--bg);
box-shadow:
0 0 0 0.125rem var(--bg)
, 0 0 0 0.25rem var(--green1)
;
}
aside a
, aside a > span
, aside a:any-link
, aside a:any-link > span {
color: var(--green1);
}
aside a:any-link > span {
text-decoration: underline;
}
aside a.current {
border: 0.125rem dotted var(--orange2);
}
aside a.current
, aside a.current > span {
color: var(--orange2);
cursor: unset;
text-decoration: unset;
}
aside a.current:active,
aside a.current:focus,
aside a.current:hover {
background: unset;
box-shadow: unset;
}
h1 { h1 {
margin: 0; margin: 0;
@ -668,6 +719,23 @@ label {
} }
ul {
padding: 1rem 0;
margin: 0;
}
ul li {
list-style: none;
margin-left: 1rem;
}
ul li::before {
content: "";
margin-left: -2rem;
padding-right: 0.5rem;
width: 2rem;
display: inline-block;
text-align: right;
}
.about { .about {
gap: 3rem; gap: 3rem;
display: grid; display: grid;
@ -677,7 +745,8 @@ label {
.about a { .about a {
border-radius: 0.125rem; border-radius: 0.125rem;
} }
.about a[href^='https://dym.sh/'] { .about a[href^='https://dym.sh/']
, .about a[href^='/'] {
color: var(--green1); color: var(--green1);
} }
.about a:active, .about a:active,
@ -704,11 +773,6 @@ label {
.about p { .about p {
margin: 0; margin: 0;
} }
.about ul {
padding-left: 0;
list-style: none;
padding: 1rem 0;
}
.col-2 { .col-2 {
columns: 2; columns: 2;
} }
@ -723,17 +787,6 @@ label {
.about ul: last-child { .about ul: last-child {
padding-bottom: 0; padding-bottom: 0;
} }
ul li {
margin-left: 1rem;
}
ul li::before {
content: "";
margin-left: -2rem;
padding-right: 0.5rem;
width: 2rem;
display: inline-block;
text-align: right;
}
@media screen and (max-width: 600px) { @media screen and (max-width: 600px) {

View File

@ -1,3 +1,4 @@
/* /*
GoToSocial GoToSocial
Copyright (C) 2021-2023 GoToSocial Authors admin@gotosocial.org Copyright (C) 2021-2023 GoToSocial Authors admin@gotosocial.org
@ -9,101 +10,180 @@
This program is distributed in the hope that it will be useful, This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU Affero General Public License for more details. GNU Affero General Public License for more details.
You should have received a copy of the GNU Affero General Public License You should have received a copy of the GNU Affero General Public License
along with this program. If not, see <http://www.gnu.org/licenses/>. along with this program. If not, see <http://www.gnu.org/licenses/>.
*/ */
.profile { .page {
display: flex; grid-template-columns: 1fr minmax(auto, 60rem) 1fr; /* fallback for lack of min() support */
gap: 1rem; grid-template-columns: 1fr min(92%, 65rem) 1fr;
}
.profile .header {
display: flex;
flex-direction: column;
gap: 1rem;
justify-content: flex-start;
width: 20rem;
word-break: break-all;
} }
.profile .header > * { .profile {
padding: 0.5rem;
border-radius: var(--br); border-radius: var(--br);
} }
.profile figure { .profile .column-split {
margin: 0 0 0.5rem 0; display: flex;
flex-wrap: wrap;
gap: 1rem;
}
.profile .header {
background: var(--profile-bg);
border-radius: var(--br); border-radius: var(--br);
overflow: hidden; overflow: hidden;
margin-bottom: 1rem;
}
.profile .header .header-image {
position: relative;
padding-top: 33.33%;
}
/* aspect-ratio 1/3 */
.profile .header .header-image img {
position: absolute;
top: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.profile .header {
--avatar-size: 8.5rem;
--name-size: 3rem;
--username-size: 2rem;
--overlap: calc(var(--avatar-size) - var(--name-size) - var(--username-size));
}
/*
Basic info container has the user's avatar, display- and username, and role
It's partially overlapped over the header image, by a negative margin-top
*/
.profile .header .basic-info {
position: relative;
display: grid;
box-sizing: border-box;
grid-template-columns: var(--avatar-size) auto 1fr;
grid-template-rows: var(--overlap) var(--name-size) auto;
grid-template-areas:
"avatar . ."
"avatar displayname displayname"
"avatar username role";
margin: 1rem;
margin-top: calc(-1 * var(--overlap));
gap: 0 1rem;
}
.profile .header .basic-info .avatar {
grid-area: avatar;
height: var(--avatar-size);
width: var(--avatar-size);
border: 0.2rem solid var(--avatar-border);
border-radius: var(--br);
overflow: hidden;
}
/* prevents image extending beyond rounded borders */
.profile .header .basic-info .avatar img {
height: 100%;
width: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.profile .header .basic-info .displayname {
grid-area: displayname;
line-height: var(--name-size);
font-size: 1.5rem;
font-weight: bold;
}
.profile .header .basic-info .username {
min-width: 0;
grid-area: username;
line-height: var(--username-size);
font-size: 1rem;
font-weight: bold;
color: var(--fg-accent);
-webkit-user-select: all;
user-select: all;
}
.profile .header .basic-info .role {
background: var(--bg);
color: var(--fg);
border: 0.13rem solid var(--bg);
grid-area: role;
align-self: center;
justify-self: start;
border-radius: var(--br);
padding: 0.3rem;
line-height: 1.1rem;
font-size: 0.9rem;
font-variant: small-caps;
font-weight: bold;
}
.profile .header .basic-info .role.admin {
color: var(--role-admin);
border-color: var(--role-admin);
}
.profile .header .basic-info .role.moderator {
color: var(--role-mod);
border-color: var(--role-mod);
}
@media screen and (max-width: 750px) {
.profile .header .basic-info {
grid-template-columns: auto 1fr;
grid-template-rows: var(--avatar-size) var(--name-size) auto;
grid-template-areas:
"avatar avatar"
"displayname displayname"
"username role";
}
.profile .header .basic-info .displayname {
font-size: 1.4rem;
}
}
.profile .col-header {
display: flex; display: flex;
justify-content: space-between; justify-content: start;
position: relative; gap: 2rem;
} align-items: center;
.profile figure img.bg {
position: absolute;
width: 100%;
height: 100%;
z-index: 1;
object-fit: cover;
}
.profile figure img.avatar { margin: 0;
margin: 0.5rem;
width: 5rem;
height: 5rem;
z-index: 2;
object-fit: fill;
border-radius: var(--br);
}
.profile .header .user {
background: var(--profile-bg); background: var(--profile-bg);
display: flex; border-top-left-radius: var(--br);
flex-direction: column; border-top-right-radius: var(--br);
gap: 0.25rem; padding: 0.75rem;
padding: 1rem;
} }
.profile .header .displayname { .profile .col-header h1, .profile .col-header h2 {
line-height: 1.25rem; font-size: 1.2rem;
font-size: 1rem; line-height: 1.3rem;
font-weight: 600; margin: 0;
} }
.profile .header .username {
min-width: 0;
font-size: 1rem;
color: var(--fg-accent);
-webkit-user-select: all;
user-select: all;
}
.profile .header .role {
background: var(--bg);
color: var(--fg);
border: 0.075rem solid var(--bg);
border-radius: 0.25rem;
margin: 0.5rem;
padding: 0.25rem;
z-index: 2;
line-height: 0.75em;
font-size: 0.75rem;
font-variant: small-caps;
align-self: flex-start;
}
.profile .header .role.admin {
color: var(--role-admin);
border-color: var(--role-admin);
}
.profile .header .role.moderator {
color: var(--role-mod);
border-color: var(--role-mod);
}
.profile .toots { .profile .toots {
flex: 65 25rem; flex: 65 25rem;
@ -113,82 +193,95 @@
} }
.profile .toots .col-header { .profile .toots .col-header {
display: grid; display: grid;
grid-template-columns: auto 1fr; grid-template-columns: auto 1fr;
gap: 1rem; gap: 1rem;
} }
.profile .toots .col-header a { .profile .toots .col-header a {
justify-self: end; justify-self: end;
} }
.profile .toots .col-header .rss-icon {
display: block;
margin: -0.25rem 0;
}
.profile .toots .col-header .rss-icon .fa {
font-size: 2rem;
-o-object-fit: contain;
object-fit: contain;
vertical-align: middle;
color: var(--orange2);
/* can't size a single-color background, so we use a linear-gradient that's effectively white */
background: linear-gradient(to right, var(--white1) 100%, transparent 0) no-repeat center center;
background-size: 1.2rem 1.4rem;
}
.profile .toots .toot { .profile .toots .toot {
border-radius: var(--br); border-radius: 0;
} }
.toot .info {
flex-direction: row; .profile .toots .toot .info {
gap: 1rem; padding: 0.3rem 0.75rem;
} }
.toot .info {
flex-direction: row; .profile .toots .toot:last-child {
gap: 1rem; border-bottom-left-radius: var(--br);
} border-bottom-right-radius: var(--br);
}
.profile .toots .backnextlinks { .profile .toots .backnextlinks {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
} }
.profile .toots .backnextlinks .next { .profile .toots .backnextlinks .next {
margin-left: auto; margin-left: auto;
}
.profile .about-user {
overflow: hidden;
display: flex;
flex-direction: column;
gap: 1rem;
} }
.profile .about-user > * {
.profile .col-header {
margin-bottom: -0.25rem;
}
.profile > * {
border-radius: var(--br); border-radius: var(--br);
} }
.profile .fields { .profile .about-user .col-header {
background: var(--profile-bg); margin-bottom: -0.25rem;
display: grid; }
grid-template-columns: 1fr 2fr;
padding: 0.5rem;
}
.profile .fields > * { .profile .about-user .fields {
padding: 0.5rem; background: var(--profile-bg);
} display: grid;
.profile .fields > b { grid-template: max-content 1fr;
align-self: center; padding: 0 0.5rem;
justify-self: flex-end; }
font-weight: 600;
}
.profile .fields > span + b,
.profile .fields > time + b {
border-top: 0.1rem solid var(--gray2);
align-self: flex-start;
text-align: right;
}
.profile .rss-icon, .profile .about-user .fields .field + .field {
.profile .rss-icon img { border-top: 0.1rem solid var(--gray2);
width: 20px; }
height: 20px;
}
.profile .fields .flex, .profile .about-user .bio {
.profile .fields .flex * { background: var(--profile-bg);
display: flex; padding: 1rem;
line-height: 1rem; }
gap: 0.5rem;
align-items: center;
}
.profile .bio { .profile .about-user .accountstats {
background: var(--profile-bg); background: var(--bg-accent);
padding: 1rem; padding: 1rem;
display: grid;
grid-template-columns: auto auto;
gap: 0.5rem 1rem;
}
.profile .about-user .accountstats > b {
justify-self: end;
font-weight: normal;
}
.profile .about-user .accountstats > b + * {
justify-self: start;
} }

View File

@ -221,7 +221,7 @@ nav.menu-tree li.nested a.title {
padding-left: 1rem; padding-left: 1rem;
font-weight: normal; font-weight: normal;
color: var(--fg); color: var(--fg);
background: var(--gray3); background: var(--gray4);
} }
nav.menu-tree li.nested a.title:focus { nav.menu-tree li.nested a.title:focus {

1482
assets/dist/status.css vendored

File diff suppressed because it is too large Load Diff

Binary file not shown.

Before

Width:  |  Height:  |  Size: 438 KiB

View File

@ -67,12 +67,14 @@
<li><a target="_blank" href="mailto:re@dym.sh">email</a>/<a target="_blank" href="/pgp.txt">pgp</a></li> <li><a target="_blank" href="mailto:re@dym.sh">email</a>/<a target="_blank" href="/pgp.txt">pgp</a></li>
<li><a target="_blank" href="https://dym.sh/@dym">microblog</a></li> <li><a target="_blank" href="https://dym.sh/@dym">microblog</a></li>
<li><a target="_blank" href="https://lemmy.world/u/dym_sh">lemmy</a></li> <li><a target="_blank" href="https://lemmy.world/u/dym_sh">lemmy</a></li>
<li><a target="_blank" href="https://indieweb.org/User:Dym.sh">indieweb</a></li>
<li><a target="_blank" href="https://dym-sh.tumblr.com">tumblr</a></li>
<li><a target="_blank" href="https://figma.com/@dym_sh">figma</a></li> <li><a target="_blank" href="https://figma.com/@dym_sh">figma</a></li>
<li><a target="_blank" href="https://layers.to/dym_sh">layers</a></li> <li><a target="_blank" href="https://layers.to/dym_sh">layers</a></li>
<li><a target="_blank" href="https://codepen.io/dym-sh">codepen</a></li> <li><a target="_blank" href="https://codepen.io/dym-sh">codepen</a></li>
<li><a target="_blank" href="https://userstyles.world/user/dym-sh">userstyles</a></li> <li><a target="_blank" href="https://userstyles.world/user/dym-sh">userstyles</a></li>
<li><a target="_blank" href="https://github/dym-sh">github</a></li> <li><a target="_blank" href="https://github.com/dym-sh">github</a></li>
<li><a target="_blank" href="https://indieweb.org/User:Dym.sh">indieweb</a></li>
</ul> </ul>
</main> </main>

View File

@ -28,13 +28,11 @@
<img src="{{.account.Header}}" class="bg" alt=""> <img src="{{.account.Header}}" class="bg" alt="">
<img src="{{.account.Avatar}}" class="avatar" alt=""> <img src="{{.account.Avatar}}" class="avatar" alt="">
{{ if and (.account.Role) (ne .account.Role.Name "user") }} {{ if and (.account.Role) (ne .account.Role.Name "user") }}
<figcaption class="role {{ .account.Role.Name }}"> <figcaption class="role {{ .account.Role.Name }}">{{
{{ if and (.account.Role) (eq .account.Role.Name "admin") }} if and (.account.Role) (eq .account.Role.Name "admin")
webmain }}webmain{{
{{ else }} else }}{{ .account.Role.Name }}{{ end
{{ .account.Role.Name }} }}</figcaption>
{{ end }}
</figcaption>
{{ end }} {{ end }}
</figure> </figure>

View File

@ -28,7 +28,7 @@
{{.Account.Username}} {{.Account.Username}}
{{end}} {{end}}
</span> </span>
<span class="username">@{{.Account.Username}}</span> <span class="username">@{{.Account.Username}}</div>
</span> </span>
</a> </a>