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="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-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="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">
|
<link rel="stylesheet" href="/assets/dist/style.css">
|
||||||
<title>GoToSocial Testrig Instance - GoToSocial</title>
|
<title>GoToSocial Testrig Instance - GoToSocial</title>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body class="page">
|
<body class="page index-page">
|
||||||
<script type="text/javascript" src="//localhost:35729/livereload.js?snipver=1" async="" defer=""></script>
|
<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">
|
<a aria-label="GoToSocial Testrig Instance. Go to instance homepage" href="/" class="nounderline">
|
||||||
<picture>
|
<picture>
|
||||||
<img src="http://localhost:8080/assets/logo.webp" alt="Instance Logo" title="Instance Logo" />
|
<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>
|
<span class="count">2</span> other instances</aside>
|
||||||
</header>
|
</header>
|
||||||
<div class="page-content">
|
<div class="page-content">
|
||||||
<main class="about">
|
<main class="sectioned">
|
||||||
<section class="about-section" role="region" aria-labelledby="about">
|
<section role="region" aria-labelledby="about">
|
||||||
<h3 id="about">About this instance</h3>
|
<h2 id="about">About this instance</h3>
|
||||||
<div class="about-section-contents">
|
<div>
|
||||||
<p>This is the GoToSocial testrig. It doesn't federate or anything.</p>
|
<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>When the testrig is shut down, all data on it will be deleted.</p>
|
||||||
<p>Don't use this in production!</p>
|
<p>Don't use this in production!</p>
|
||||||
<a href="/about">See more details</a>
|
<a href="/about">See more details</a>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
<section role="region" class="about-section what-is-this" aria-labelledby="what-is-this">
|
<section role="region" class="what-is-this" aria-labelledby="what-is-this">
|
||||||
<h3 id="what-is-this">What is this?</h3>
|
<h2 id="what-is-this">What is this?</h3>
|
||||||
<div class="about-section-contents">
|
<div>
|
||||||
<p>
|
<p>
|
||||||
The web page you're reading right now is served by an instance of GoToSocial,
|
The web page you're reading right now is served by an instance of GoToSocial,
|
||||||
a federated, distributed, open-source microblogging software which connects
|
a federated, distributed, open-source microblogging software which connects
|
||||||
to other instances across a network known as the "fediverse".
|
to other instances across a network known as the "fediverse".
|
||||||
</p>
|
</p>
|
||||||
<h4 id="what-is-an-instance">What is an "instance"?</h4>
|
<h3 id="what-is-an-instance">What is an "instance"?</h3>
|
||||||
<p>
|
<p>
|
||||||
"Instance" is a term commonly used for one node in the fediverse. Each 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
|
has its own web address, user(s), culture, rules, and settings. Instances exchange
|
||||||
|
|
@ -74,7 +74,7 @@
|
||||||
<p>
|
<p>
|
||||||
There are thousands of fediverse instances, connecting millions of people together.
|
There are thousands of fediverse instances, connecting millions of people together.
|
||||||
</p>
|
</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>
|
<p>
|
||||||
You can join the fediverse by running your own instance of an ActivityPub software,
|
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,
|
or by finding an existing instance that aligns with your values and expectations,
|
||||||
|
|
@ -86,15 +86,16 @@
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href="https://fediverse.observer" rel="nofollow noreferrer noopener" target="_blank">Fediverse
|
<li><a href="https://fediverse.observer" rel="nofollow noreferrer noopener" target="_blank">Fediverse
|
||||||
Observer (opens in a new tab)</a></li>
|
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>
|
a new tab)</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
<p>Or, just <a href="signup">register for an account on this instance</a>!</p>
|
<p>Or, just <a href="signup">register for an account on this instance</a>!</p>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
<section class="about-section" role="region" aria-labelledby="signup">
|
<section role="region" aria-labelledby="signup">
|
||||||
<h3 id="signup">Register an Account on GoToSocial Testrig Instance</h3>
|
<h2 id="signup">Register an Account on GoToSocial Testrig Instance</h3>
|
||||||
<div class="about-section-contents">
|
<div>
|
||||||
<p>New account registration is currently <b>open</b>.</p>
|
<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
|
<p>To register a new account, please first read the <a href="/about#rules">rules</a> and <a
|
||||||
href="/about#terms">terms</a>.</p>
|
href="/about#terms">terms</a>.</p>
|
||||||
|
|
@ -102,9 +103,9 @@
|
||||||
<p>Manual admin approval is <b>required</b> for new accounts.</p>
|
<p>Manual admin approval is <b>required</b> for new accounts.</p>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
<section role="region" class="about-section apps" aria-labelledby="apps">
|
<section role="region" class="apps" aria-labelledby="apps">
|
||||||
<h3 id="apps">Client applications</h3>
|
<h2 id="apps">Client applications</h3>
|
||||||
<div class="about-section-contents">
|
<div>
|
||||||
<p>
|
<p>
|
||||||
Have an account on this instance and want to log in?
|
Have an account on this instance and want to log in?
|
||||||
GoToSocial does not provide its own webclient, but implements the Mastodon client API.
|
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 {
|
.page {
|
||||||
display: grid;
|
display: grid;
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
|
|
@ -30,11 +11,6 @@
|
||||||
grid-column: 1 / span 3;
|
grid-column: 1 / span 3;
|
||||||
}
|
}
|
||||||
|
|
||||||
.page-content {
|
|
||||||
grid-column: 2;
|
|
||||||
align-self: start;
|
|
||||||
}
|
|
||||||
|
|
||||||
.page-header {
|
.page-header {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
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 {
|
.page-footer {
|
||||||
align-self: end;
|
align-self: end;
|
||||||
|
margin-top: 3rem;
|
||||||
|
|
||||||
nav ul {
|
nav ul {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
@ -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; */
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -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 New Issue