chinwag/ChinwagUI
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Improvements to the about page layout

Browse source
This commit is contained in:
Niléane 2023-12-15 17:14:59 +01:00
commit dfc820924c
No known key found for this signature in database
3 changed files with 93 additions and 18 deletions
Download patch file Download diff file Expand all files Collapse all files

37
TangerineUI-cherry.css
View file

@ -327,6 +327,7 @@ body.app-body {
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
border: 0;
padding-bottom: 1px;
}
.app-body .dismissable-banner + .scrollable {
border-top-left-radius: 0;
@ -2826,6 +2827,12 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
.app-body .account__header__bar {
border: 0;
}
.app-body .account__header__bar .avatar {
transition: transform .3s;
}
.app-body .account__header__bar .avatar:active {
transform: scale(.92);
}
.app-body .account__header__bar .avatar .account__avatar {
border-radius: 50%;
border-width: 5px;
@ -4359,6 +4366,10 @@ a:is(.active,
.app-body .button:is(.button-secondary, .button-tertiary) {
padding: 10px 18px;
}
.app-body .sign-in-banner .button:active,
.app-body .button:is(.button-secondary, .button-tertiary):active {
transform: scale(.95);
}
@media screen and (max-width:1174px) {
.app-body .button.button-tertiary {
padding: 7px 18px;
@ -4622,6 +4633,7 @@ a:is(.active,
border: 1px solid var(--color-lines);
display: flex;
flex-flow: column;
padding-bottom: 20px;
}
@media screen and (max-width:889px) {
.app-body .scrollable.about {
@ -4651,8 +4663,6 @@ a:is(.active,
.app-body .about__footer {
order: 7;
}
.app-body .about__header h1,
.app-body .about__header p,
.app-body #mastodon > div > div > div.columns-area__panels > div.columns-area__panels__main > div.columns-area.columns-area--mobile > div > div > div.about__section.active:nth-of-type(3) > div.about__section__title {
display: none;
}
@ -4670,8 +4680,20 @@ a:is(.active,
.app-body .about__meta {
margin-bottom: 10px;
}
.app-body .about__header h1 {
margin-bottom: 0;
.app-body .about__header > h1 {
color: var(--color-content-fg);
margin: 30px 0 0 20px;
text-align: left;
font-variant: small-caps;
font-size: 20px;
}
.app-body .about__header > h1 + p {
color: var(--color-content-fg);
opacity: .8;
text-align: left;
margin-left: 20px;
margin-bottom: 15px;
font-size: 14px;
}
@media screen and (min-width:890px) {
.app-body .scrollable.about {
@ -4757,10 +4779,13 @@ a:is(.active,
.app-body .about__section__body .prose a:hover,
.app-body .prose a strong {
color: var(--color-accent);
text-decoration: none;
text-decoration-line: underline;
text-decoration-color: var(--color-accent-bg);
text-decoration-thickness: 2px;
text-underline-offset: 2px;
}
.app-body .about__section__body .prose a:hover {
text-decoration: underline;
text-decoration-color: var(--color-accent);
}
.app-body .about__section__body .prose small.lang_label {
margin-left: -2em;

37
TangerineUI-purple.css
View file

@ -326,6 +326,7 @@ body.app-body {
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
border: 0;
padding-bottom: 1px;
}
.app-body .dismissable-banner + .scrollable {
border-top-left-radius: 0;
@ -2825,6 +2826,12 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
.app-body .account__header__bar {
border: 0;
}
.app-body .account__header__bar .avatar {
transition: transform .3s;
}
.app-body .account__header__bar .avatar:active {
transform: scale(.92);
}
.app-body .account__header__bar .avatar .account__avatar {
border-radius: 50%;
border-width: 5px;
@ -4358,6 +4365,10 @@ a:is(.active,
.app-body .button:is(.button-secondary, .button-tertiary) {
padding: 10px 18px;
}
.app-body .sign-in-banner .button:active,
.app-body .button:is(.button-secondary, .button-tertiary):active {
transform: scale(.95);
}
@media screen and (max-width:1174px) {
.app-body .button.button-tertiary {
padding: 7px 18px;
@ -4621,6 +4632,7 @@ a:is(.active,
border: 1px solid var(--color-lines);
display: flex;
flex-flow: column;
padding-bottom: 20px;
}
@media screen and (max-width:889px) {
.app-body .scrollable.about {
@ -4650,8 +4662,6 @@ a:is(.active,
.app-body .about__footer {
order: 7;
}
.app-body .about__header h1,
.app-body .about__header p,
.app-body #mastodon > div > div > div.columns-area__panels > div.columns-area__panels__main > div.columns-area.columns-area--mobile > div > div > div.about__section.active:nth-of-type(3) > div.about__section__title {
display: none;
}
@ -4669,8 +4679,20 @@ a:is(.active,
.app-body .about__meta {
margin-bottom: 10px;
}
.app-body .about__header h1 {
margin-bottom: 0;
.app-body .about__header > h1 {
color: var(--color-content-fg);
margin: 30px 0 0 20px;
text-align: left;
font-variant: small-caps;
font-size: 20px;
}
.app-body .about__header > h1 + p {
color: var(--color-content-fg);
opacity: .8;
text-align: left;
margin-left: 20px;
margin-bottom: 15px;
font-size: 14px;
}
@media screen and (min-width:890px) {
.app-body .scrollable.about {
@ -4756,10 +4778,13 @@ a:is(.active,
.app-body .about__section__body .prose a:hover,
.app-body .prose a strong {
color: var(--color-accent);
text-decoration: none;
text-decoration-line: underline;
text-decoration-color: var(--color-accent-bg);
text-decoration-thickness: 2px;
text-underline-offset: 2px;
}
.app-body .about__section__body .prose a:hover {
text-decoration: underline;
text-decoration-color: var(--color-accent);
}
.app-body .about__section__body .prose small.lang_label {
margin-left: -2em;

37
TangerineUI.css
View file

@ -326,6 +326,7 @@ body.app-body {
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
border: 0;
padding-bottom: 1px;
}
.app-body .dismissable-banner + .scrollable {
border-top-left-radius: 0;
@ -2825,6 +2826,12 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
.app-body .account__header__bar {
border: 0;
}
.app-body .account__header__bar .avatar {
transition: transform .3s;
}
.app-body .account__header__bar .avatar:active {
transform: scale(.92);
}
.app-body .account__header__bar .avatar .account__avatar {
border-radius: 50%;
border-width: 5px;
@ -4358,6 +4365,10 @@ a:is(.active,
.app-body .button:is(.button-secondary, .button-tertiary) {
padding: 10px 18px;
}
.app-body .sign-in-banner .button:active,
.app-body .button:is(.button-secondary, .button-tertiary):active {
transform: scale(.95);
}
@media screen and (max-width:1174px) {
.app-body .button.button-tertiary {
padding: 7px 18px;
@ -4621,6 +4632,7 @@ a:is(.active,
border: 1px solid var(--color-lines);
display: flex;
flex-flow: column;
padding-bottom: 20px;
}
@media screen and (max-width:889px) {
.app-body .scrollable.about {
@ -4650,8 +4662,6 @@ a:is(.active,
.app-body .about__footer {
order: 7;
}
.app-body .about__header h1,
.app-body .about__header p,
.app-body #mastodon > div > div > div.columns-area__panels > div.columns-area__panels__main > div.columns-area.columns-area--mobile > div > div > div.about__section.active:nth-of-type(3) > div.about__section__title {
display: none;
}
@ -4669,8 +4679,20 @@ a:is(.active,
.app-body .about__meta {
margin-bottom: 10px;
}
.app-body .about__header h1 {
margin-bottom: 0;
.app-body .about__header > h1 {
color: var(--color-content-fg);
margin: 30px 0 0 20px;
text-align: left;
font-variant: small-caps;
font-size: 20px;
}
.app-body .about__header > h1 + p {
color: var(--color-content-fg);
opacity: .8;
text-align: left;
margin-left: 20px;
margin-bottom: 15px;
font-size: 14px;
}
@media screen and (min-width:890px) {
.app-body .scrollable.about {
@ -4756,10 +4778,13 @@ a:is(.active,
.app-body .about__section__body .prose a:hover,
.app-body .prose a strong {
color: var(--color-accent);
text-decoration: none;
text-decoration-line: underline;
text-decoration-color: var(--color-accent-bg);
text-decoration-thickness: 2px;
text-underline-offset: 2px;
}
.app-body .about__section__body .prose a:hover {
text-decoration: underline;
text-decoration-color: var(--color-accent);
}
.app-body .about__section__body .prose small.lang_label {
margin-left: -2em;