mirror of
https://github.com/superseriousbusiness/gotosocial.git
synced 2025-01-09 16:10:12 +00:00
finish refactor for index page
This commit is contained in:
f0x
parent
26a0f21451
commit
00d52e7993
|
|
@ -19,14 +19,14 @@
|
|||
<link rel="apple-touch-startup-image" href="http://localhost:8080/assets/logo.webp" type="image/webp">
|
||||
<link rel="preload" href="/assets/fonts/noto-sans-v27-latin-regular.woff2" as="font" type="font/woff2" crossorigin>
|
||||
<link rel="preload" href="/assets/fonts/noto-sans-v27-latin-700.woff2" as="font" type="font/woff2" crossorigin>
|
||||
<link rel="stylesheet" href="/assets/dist/themes/default.css">
|
||||
<link rel="stylesheet" href="/assets/dist/default.css">
|
||||
<link rel="stylesheet" href="/assets/dist/style.css">
|
||||
<title>GoToSocial Testrig Instance - GoToSocial</title>
|
||||
</head>
|
||||
|
||||
<body class="page">
|
||||
<body class="page index-page">
|
||||
<script type="text/javascript" src="//localhost:35729/livereload.js?snipver=1" async="" defer=""></script>
|
||||
<header class="page-header">
|
||||
<header class="page-header large">
|
||||
<a aria-label="GoToSocial Testrig Instance. Go to instance homepage" href="/" class="nounderline">
|
||||
<picture>
|
||||
<img src="http://localhost:8080/assets/logo.webp" alt="Instance Logo" title="Instance Logo" />
|
||||
|
|
@ -37,25 +37,25 @@
|
|||
<span class="count">2</span> other instances</aside>
|
||||
</header>
|
||||
<div class="page-content">
|
||||
<main class="about">
|
||||
<section class="about-section" role="region" aria-labelledby="about">
|
||||
<h3 id="about">About this instance</h3>
|
||||
<div class="about-section-contents">
|
||||
<main class="sectioned">
|
||||
<section role="region" aria-labelledby="about">
|
||||
<h2 id="about">About this instance</h3>
|
||||
<div>
|
||||
<p>This is the GoToSocial testrig. It doesn't federate or anything.</p>
|
||||
<p>When the testrig is shut down, all data on it will be deleted.</p>
|
||||
<p>Don't use this in production!</p>
|
||||
<a href="/about">See more details</a>
|
||||
</div>
|
||||
</section>
|
||||
<section role="region" class="about-section what-is-this" aria-labelledby="what-is-this">
|
||||
<h3 id="what-is-this">What is this?</h3>
|
||||
<div class="about-section-contents">
|
||||
<section role="region" class="what-is-this" aria-labelledby="what-is-this">
|
||||
<h2 id="what-is-this">What is this?</h3>
|
||||
<div>
|
||||
<p>
|
||||
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".
|
||||
</p>
|
||||
<h4 id="what-is-an-instance">What is an "instance"?</h4>
|
||||
<h3 id="what-is-an-instance">What is an "instance"?</h3>
|
||||
<p>
|
||||
"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
|
||||
|
|
@ -74,7 +74,7 @@
|
|||
<p>
|
||||
There are thousands of fediverse instances, connecting millions of people together.
|
||||
</p>
|
||||
<h4 id="how-do-i-join-the-fediverse">How do I join the fediverse?</h4>
|
||||
<h3 id="how-do-i-join-the-fediverse">How do I join the fediverse?</h3>
|
||||
<p>
|
||||
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,
|
||||
|
|
@ -86,15 +86,16 @@
|
|||
<ul>
|
||||
<li><a href="https://fediverse.observer" rel="nofollow noreferrer noopener" target="_blank">Fediverse
|
||||
Observer (opens in a new tab)</a></li>
|
||||
<li><a href="https://fedidb.org/network" rel="nofollow noreferrer noopener" target="_blank">FediDB (opens in
|
||||
<li><a href="https://fedidb.org/network" rel="nofollow noreferrer noopener" target="_blank">FediDB (opens
|
||||
in
|
||||
a new tab)</a></li>
|
||||
</ul>
|
||||
<p>Or, just <a href="signup">register for an account on this instance</a>!</p>
|
||||
</div>
|
||||
</section>
|
||||
<section class="about-section" role="region" aria-labelledby="signup">
|
||||
<h3 id="signup">Register an Account on GoToSocial Testrig Instance</h3>
|
||||
<div class="about-section-contents">
|
||||
<section role="region" aria-labelledby="signup">
|
||||
<h2 id="signup">Register an Account on GoToSocial Testrig Instance</h3>
|
||||
<div>
|
||||
<p>New account registration is currently <b>open</b>.</p>
|
||||
<p>To register a new account, please first read the <a href="/about#rules">rules</a> and <a
|
||||
href="/about#terms">terms</a>.</p>
|
||||
|
|
@ -102,9 +103,9 @@
|
|||
<p>Manual admin approval is <b>required</b> for new accounts.</p>
|
||||
</div>
|
||||
</section>
|
||||
<section role="region" class="about-section apps" aria-labelledby="apps">
|
||||
<h3 id="apps">Client applications</h3>
|
||||
<div class="about-section-contents">
|
||||
<section role="region" class="apps" aria-labelledby="apps">
|
||||
<h2 id="apps">Client applications</h3>
|
||||
<div>
|
||||
<p>
|
||||
Have an account on this instance and want to log in?
|
||||
GoToSocial does not provide its own webclient, but implements the Mastodon client API.
|
||||
|
|
|
|||
|
|
@ -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 <http://www.gnu.org/licenses/>.
|
||||
*/
|
||||
|
||||
.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;
|
||||
32
web/source/css/layout/sectioned.css
Normal file
32
web/source/css/layout/sectioned.css
Normal file
|
|
@ -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; */
|
||||
}
|
||||
}
|
||||
}
|
||||
65
web/source/css/pages/index.css
Normal file
65
web/source/css/pages/index.css
Normal file
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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 <http://www.gnu.org/licenses/>.
|
||||
*/
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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 <http://www.gnu.org/licenses/>.
|
||||
*/
|
||||
|
||||
/*
|
||||
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;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in a new issue