From 00d52e799311b5323cac5a661d17c5e01f57fb2c Mon Sep 17 00:00:00 2001 From: f0x Date: Sun, 28 Jul 2024 22:01:50 +0200 Subject: [PATCH] finish refactor for index page --- web/assets/static-pages/index.html | 251 ++++++++++---------- web/source/{css_old => css/layout}/page.css | 46 ++-- web/source/css/layout/sectioned.css | 32 +++ web/source/css/pages/index.css | 65 +++++ web/source/css_old/about.css | 36 --- web/source/css_old/index.css | 127 ---------- 6 files changed, 244 insertions(+), 313 deletions(-) rename web/source/{css_old => css/layout}/page.css (66%) create mode 100644 web/source/css/layout/sectioned.css create mode 100644 web/source/css/pages/index.css delete mode 100644 web/source/css_old/about.css delete mode 100644 web/source/css_old/index.css diff --git a/web/assets/static-pages/index.html b/web/assets/static-pages/index.html index 53717d517..d83ae02c8 100644 --- a/web/assets/static-pages/index.html +++ b/web/assets/static-pages/index.html @@ -19,14 +19,14 @@ - + GoToSocial Testrig Instance - GoToSocial - + -
+
Instance Logo @@ -37,131 +37,132 @@ 2 other instances
-
-
-

About this instance

-
-

This is the GoToSocial testrig. It doesn't federate or anything.

-

When the testrig is shut down, all data on it will be deleted.

-

Don't use this in production!

- See more details -
+
+
+

About this instance

+
+

This is the GoToSocial testrig. It doesn't federate or anything.

+

When the testrig is shut down, all data on it will be deleted.

+

Don't use this in production!

+ See more details +
-
-

What is this?

-
-

- The web page you're reading right now is served by an instance of GoToSocial, - a federated, distributed, open-source microblogging software which connects - to other instances across a network known as the "fediverse". -

-

What is an "instance"?

-

- "Instance" is a term commonly used for one node in the fediverse. Each instance - has its own web address, user(s), culture, rules, and settings. Instances exchange - data by "talking" to each other over the internet using a protocol called ActivityPub. -

- - - Learn more about ActivityPub (opens in a new tab). - -

- Each instance can, in theory, talk to each other instance, allowing people to talk - to one another across a decentralized network that has no single authority in charge. -

-

- There are thousands of fediverse instances, connecting millions of people together. -

-

How do I join the fediverse?

-

- You can join the fediverse by running your own instance of an ActivityPub software, - or by finding an existing instance that aligns with your values and expectations, - and registering an account. -

-

- To help you find an instance that suits you, you can try one of the following tools: -

- -

Or, just register for an account on this instance!

-
+
+

What is this?

+
+

+ The web page you're reading right now is served by an instance of GoToSocial, + a federated, distributed, open-source microblogging software which connects + to other instances across a network known as the "fediverse". +

+

What is an "instance"?

+

+ "Instance" is a term commonly used for one node in the fediverse. Each instance + has its own web address, user(s), culture, rules, and settings. Instances exchange + data by "talking" to each other over the internet using a protocol called ActivityPub. +

+ + + Learn more about ActivityPub (opens in a new tab). + +

+ Each instance can, in theory, talk to each other instance, allowing people to talk + to one another across a decentralized network that has no single authority in charge. +

+

+ There are thousands of fediverse instances, connecting millions of people together. +

+

How do I join the fediverse?

+

+ You can join the fediverse by running your own instance of an ActivityPub software, + or by finding an existing instance that aligns with your values and expectations, + and registering an account. +

+

+ To help you find an instance that suits you, you can try one of the following tools: +

+ +

Or, just register for an account on this instance!

+
-
-

Register an Account on GoToSocial Testrig Instance

-
-

New account registration is currently open.

-

To register a new account, please first read the rules and terms.

-

Then, use the sign-up page to register an account.

-

Manual admin approval is required for new accounts.

-
+
+

Register an Account on GoToSocial Testrig Instance

+
+

New account registration is currently open.

+

To register a new account, please first read the rules and terms.

+

Then, use the sign-up page to register an account.

+

Manual admin approval is required for new accounts.

+
-
-

Client applications

-
-

- Have an account on this instance and want to log in? - GoToSocial does not provide its own webclient, but implements the Mastodon client API. - You can use a variety of clients to log in to your account here: -

-
    -
  • -
    -

    Semaphore is a web client designed for speed and simplicity.

    - - Use Semaphore - -
    - -
    • -
  • -
    -

    Tusky is a lightweight mobile client for Android.

    - - Get Tusky - -
    - -
    • -
  • -
    -

    Feditext (beta) is a beautiful client for iOS, iPadOS and macOS.

    - - Get Feditext - -
    - -
    • -
  • -
    -

    Or try one of the Mastodon clients listed on the official Mastodon page.

    - - Get Mastodon apps - -
    - -
    • -
-
+
+

Client applications

+
+

+ Have an account on this instance and want to log in? + GoToSocial does not provide its own webclient, but implements the Mastodon client API. + You can use a variety of clients to log in to your account here: +

+
    +
  • +
    +

    Semaphore is a web client designed for speed and simplicity.

    + + Use Semaphore + +
    + +
    • +
  • +
    +

    Tusky is a lightweight mobile client for Android.

    + + Get Tusky + +
    + +
    • +
  • +
    +

    Feditext (beta) is a beautiful client for iOS, iPadOS and macOS.

    + + Get Feditext + +
    + +
    • +
  • +
    +

    Or try one of the Mastodon clients listed on the official Mastodon page.

    + + Get Mastodon apps + +
    + +
    • +
+
diff --git a/web/source/css_old/page.css b/web/source/css/layout/page.css similarity index 66% rename from web/source/css_old/page.css rename to web/source/css/layout/page.css index 642586048..43022e3f4 100644 --- a/web/source/css_old/page.css +++ b/web/source/css/layout/page.css @@ -1,22 +1,3 @@ -/* - GoToSocial - Copyright (C) GoToSocial Authors admin@gotosocial.org - SPDX-License-Identifier: AGPL-3.0-or-later - - 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. - - 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. - - You should have received a copy of the GNU Affero General Public License - along with this program. If not, see . -*/ - .page { display: grid; min-height: 100vh; @@ -30,11 +11,6 @@ grid-column: 1 / span 3; } -.page-content { - grid-column: 2; - align-self: start; -} - .page-header { display: flex; flex-direction: column; @@ -87,8 +63,28 @@ } } +.page-header.large { + margin: 2rem 0; + a { + img, picture { + max-height: 6rem; + } + + h1 { + font-size: 2rem; + line-height: 2rem; + } + } +} + +.page-content { + grid-column: 2; + align-self: start; +} + .page-footer { align-self: end; + margin-top: 3rem; nav ul { display: flex; @@ -115,4 +111,4 @@ .page-header { text-align: center; } -} +} \ No newline at end of file diff --git a/web/source/css/layout/sectioned.css b/web/source/css/layout/sectioned.css new file mode 100644 index 000000000..4fa50a282 --- /dev/null +++ b/web/source/css/layout/sectioned.css @@ -0,0 +1,32 @@ +main.sectioned { + display: flex; + flex-direction: column; + gap: 2rem; + padding: 0; + + background: initial; + box-shadow: initial; + border: initial; + border-radius: initial; + + section { + padding: 1.5rem; + background: $bg-accent; + box-shadow: $boxshadow; + border: $boxshadow-border; + border-radius: $br; + + h1, h2, h3, h4, h5 { + margin-top: 0; + margin-bottom: 0.75rem; + + & ~ p { + margin-top: 0; + } + } + + p { + /* margin: 0.5rem 0; */ + } + } +} \ No newline at end of file diff --git a/web/source/css/pages/index.css b/web/source/css/pages/index.css new file mode 100644 index 000000000..ed02df014 --- /dev/null +++ b/web/source/css/pages/index.css @@ -0,0 +1,65 @@ +.index-page { + .activitypub-logo-wrapper { + display: flex; + flex-direction: column; + max-width: fit-content; + gap: 0.5rem; + + .activitypub-logo { + background: $fg; + box-shadow: $boxshadow; + border-radius: $br; + max-width: 100%; + } + } + + .apps { + align-self: start; + + .applist { + margin: 0; + padding: 0; + + display: grid; + grid-template-columns: 1fr 1fr; + grid-gap: 0.5rem; + align-content: start; + + .applist-entry { + display: grid; + grid-template-columns: 25% 1fr; + grid-template-areas: "logo text"; + gap: 1.5rem; + padding: 0.5rem; + + .applist-logo { + grid-area: logo; + align-self: center; + justify-self: center; + width: 100%; + object-fit: contain; + flex: 1 1 auto; + } + + .applist-logo.redraw { + fill: $fg; + stroke: $fg; + } + + .applist-text { + grid-area: text; + + a { + font-weight: bold; + } + } + } + } + } + + @media screen and (max-width: 600px) { + .apps .applist { + grid-template-columns: 1fr; + } + } +} \ No newline at end of file diff --git a/web/source/css_old/about.css b/web/source/css_old/about.css deleted file mode 100644 index 80bca999f..000000000 --- a/web/source/css_old/about.css +++ /dev/null @@ -1,36 +0,0 @@ -/* - GoToSocial - Copyright (C) GoToSocial Authors admin@gotosocial.org - SPDX-License-Identifier: AGPL-3.0-or-later - - 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. - - 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. - - You should have received a copy of the GNU Affero General Public License - along with this program. If not, see . -*/ - -.about { - display: flex; - flex-direction: column; - gap: 2rem; - padding: 2rem; - - background: $bg-accent; - box-shadow: $boxshadow; - border: $boxshadow-border; - border-radius: $br; - - .about-section { - h1, h2, h3, h4, h5 { - margin-top: 0; - } - } -} diff --git a/web/source/css_old/index.css b/web/source/css_old/index.css deleted file mode 100644 index 382cd68c6..000000000 --- a/web/source/css_old/index.css +++ /dev/null @@ -1,127 +0,0 @@ -/* - GoToSocial - Copyright (C) GoToSocial Authors admin@gotosocial.org - SPDX-License-Identifier: AGPL-3.0-or-later - - 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. - - 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. - - You should have received a copy of the GNU Affero General Public License - along with this program. If not, see . -*/ - -/* - Render instance title + image - a bit bigger on index page. - - Overrides the css from page.css. -*/ -.page-header { - & > a { - & > h1 { - font-size: 2rem; - line-height: 2rem; - } - - img, - picture { - align-self: center; - max-height: 6rem; - } - } -} - -/* - Reuse about styling, but rework it - to separate sections a bit more. -*/ -.about { - display: flex; - flex-direction: column; - gap: 2rem; - padding: 0; - - background: initial; - box-shadow: initial; - border: initial; - border-radius: initial; - - .about-section { - padding: 2rem; - background: $bg-accent; - box-shadow: $boxshadow; - border: $boxshadow-border; - border-radius: $br; - } -} - -.what-is-this .about-section-contents .activitypub-logo-wrapper { - display: flex; - flex-direction: column; - max-width: fit-content; - gap: 0.5rem; - - .activitypub-logo { - background: $fg; - box-shadow: $boxshadow; - border-radius: $br; - max-width: 100%; - } -} - -.apps { - align-self: start; - - .applist { - margin: 0; - padding: 0; - - display: grid; - grid-template-columns: 1fr 1fr; - grid-gap: 0.5rem; - align-content: start; - - .applist-entry { - display: grid; - grid-template-columns: 25% 1fr; - grid-template-areas: "logo text"; - gap: 1.5rem; - padding: 0.5rem; - - .applist-logo { - grid-area: logo; - align-self: center; - justify-self: center; - width: 100%; - object-fit: contain; - flex: 1 1 auto; - } - - .applist-logo.redraw { - fill: $fg; - stroke: $fg; - } - - .applist-text { - grid-area: text; - - a { - font-weight: bold; - } - } - } - } -} - -@media screen and (max-width: 600px) { - .apps .applist { - grid-template-columns: 1fr; - } -}