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,131 +37,132 @@
|
||||||
<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
|
||||||
data by "talking" to each other over the internet using a protocol called ActivityPub.
|
data by "talking" to each other over the internet using a protocol called ActivityPub.
|
||||||
</p>
|
</p>
|
||||||
<a class="activitypub-logo-wrapper" href="https://activitypub.rocks/" rel="nofollow noreferrer noopener"
|
<a class="activitypub-logo-wrapper" href="https://activitypub.rocks/" rel="nofollow noreferrer noopener"
|
||||||
target="_blank">
|
target="_blank">
|
||||||
<img class="activitypub-logo" src="/assets/activitypub_light.svg" alt="ActivityPub logo by mray, CC0 1.0"
|
<img class="activitypub-logo" src="/assets/activitypub_light.svg" alt="ActivityPub logo by mray, CC0 1.0"
|
||||||
title="ActivityPub logo by mray, CC0 1.0" width="250" height="65" />
|
title="ActivityPub logo by mray, CC0 1.0" width="250" height="65" />
|
||||||
Learn more about ActivityPub (opens in a new tab).
|
Learn more about ActivityPub (opens in a new tab).
|
||||||
</a>
|
</a>
|
||||||
<p>
|
<p>
|
||||||
Each instance can, in theory, talk to each other instance, allowing people to talk
|
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.
|
to one another across a decentralized network that has no single authority in charge.
|
||||||
</p>
|
</p>
|
||||||
<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,
|
||||||
and registering an account.
|
and registering an account.
|
||||||
</p>
|
</p>
|
||||||
<p>
|
<p>
|
||||||
To help you find an instance that suits you, you can try one of the following tools:
|
To help you find an instance that suits you, you can try one of the following tools:
|
||||||
</p>
|
</p>
|
||||||
<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
|
||||||
a new tab)</a></li>
|
in
|
||||||
</ul>
|
a new tab)</a></li>
|
||||||
<p>Or, just <a href="signup">register for an account on this instance</a>!</p>
|
</ul>
|
||||||
</div>
|
<p>Or, just <a href="signup">register for an account on this instance</a>!</p>
|
||||||
|
</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>
|
||||||
<p>Then, use the <a href="/signup">sign-up page</a> to register an account.</p>
|
<p>Then, use the <a href="/signup">sign-up page</a> to register an account.</p>
|
||||||
<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.
|
||||||
You can use a variety of clients to log in to your account here:
|
You can use a variety of clients to log in to your account here:
|
||||||
</p>
|
</p>
|
||||||
<ul class="applist nodot" role="group">
|
<ul class="applist nodot" role="group">
|
||||||
<li class="applist-entry">
|
<li class="applist-entry">
|
||||||
<div class="applist-text">
|
<div class="applist-text">
|
||||||
<p><strong>Semaphore</strong> is a web client designed for speed and simplicity.</p>
|
<p><strong>Semaphore</strong> is a web client designed for speed and simplicity.</p>
|
||||||
<a href="https://semaphore.social/" rel="nofollow noreferrer noopener" target="_blank">
|
<a href="https://semaphore.social/" rel="nofollow noreferrer noopener" target="_blank">
|
||||||
Use Semaphore
|
Use Semaphore
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
<svg role="img" aria-labelledby="semaphore-title semaphore-desc" class="applist-logo redraw"
|
<svg role="img" aria-labelledby="semaphore-title semaphore-desc" class="applist-logo redraw"
|
||||||
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 146 120" width="100" height="100">
|
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 146 120" width="100" height="100">
|
||||||
<title id="semaphore-title">The Semaphore logo</title>
|
<title id="semaphore-title">The Semaphore logo</title>
|
||||||
<desc id="semaphore-desc">A waving flag</desc>
|
<desc id="semaphore-desc">A waving flag</desc>
|
||||||
<path
|
<path
|
||||||
d="M68.13 0C53.94 0 42.81 20 13.9 27.1l-2.23-5.29a6.5 6.5 0 0 0-5.17-10.4 6.5 6.5 0 0 0-.81 12.95L46.2 120l5.99-2.5-14.42-33.33c22.8-6.86 32.51-22.16 49.83-20.58 9.9.9 4.87 19.56 8.11 17.93 16.22-8.15 32.44-11.41 50.29-11.41-7.96-9.78-17.38-20.55-22.71-31.74L120.8 32c-2.32-7.33-2.56-14.75.87-22.22-9.74-3.26-21.1 0-32.45 4.9C82.2 9.77 79.5 0 68.13 0zM15.26 30.42c8.95 6.63 13.63 13.86 16.07 20.94l1.62 6.32c1.24 6.58 1.07 12.8 1.27 18.03z">
|
d="M68.13 0C53.94 0 42.81 20 13.9 27.1l-2.23-5.29a6.5 6.5 0 0 0-5.17-10.4 6.5 6.5 0 0 0-.81 12.95L46.2 120l5.99-2.5-14.42-33.33c22.8-6.86 32.51-22.16 49.83-20.58 9.9.9 4.87 19.56 8.11 17.93 16.22-8.15 32.44-11.41 50.29-11.41-7.96-9.78-17.38-20.55-22.71-31.74L120.8 32c-2.32-7.33-2.56-14.75.87-22.22-9.74-3.26-21.1 0-32.45 4.9C82.2 9.77 79.5 0 68.13 0zM15.26 30.42c8.95 6.63 13.63 13.86 16.07 20.94l1.62 6.32c1.24 6.58 1.07 12.8 1.27 18.03z">
|
||||||
</path>
|
</path>
|
||||||
</svg>
|
</svg>
|
||||||
</li>
|
</li>
|
||||||
<li class="applist-entry">
|
<li class="applist-entry">
|
||||||
<div class="applist-text">
|
<div class="applist-text">
|
||||||
<p><strong>Tusky</strong> is a lightweight mobile client for Android.</p>
|
<p><strong>Tusky</strong> is a lightweight mobile client for Android.</p>
|
||||||
<a href="https://tusky.app" rel="nofollow noreferrer noopener" target="_blank">
|
<a href="https://tusky.app" rel="nofollow noreferrer noopener" target="_blank">
|
||||||
Get Tusky
|
Get Tusky
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
<img class="applist-logo" src="/assets/tusky.svg"
|
<img class="applist-logo" src="/assets/tusky.svg"
|
||||||
alt="The Tusky mascot, a cartoon elephant tooting happily"
|
alt="The Tusky mascot, a cartoon elephant tooting happily"
|
||||||
title="The Tusky mascot, a cartoon elephant tooting happily" width="100" height="100" />
|
title="The Tusky mascot, a cartoon elephant tooting happily" width="100" height="100" />
|
||||||
</li>
|
</li>
|
||||||
<li class="applist-entry">
|
<li class="applist-entry">
|
||||||
<div class="applist-text">
|
<div class="applist-text">
|
||||||
<p><strong>Feditext</strong> (beta) is a beautiful client for iOS, iPadOS and macOS.</p>
|
<p><strong>Feditext</strong> (beta) is a beautiful client for iOS, iPadOS and macOS.</p>
|
||||||
<a href="https://github.com/feditext/feditext" rel="nofollow noreferrer noopener" target="_blank">
|
<a href="https://github.com/feditext/feditext" rel="nofollow noreferrer noopener" target="_blank">
|
||||||
Get Feditext
|
Get Feditext
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
<img class="applist-logo" src="/assets/feditext.svg"
|
<img class="applist-logo" src="/assets/feditext.svg"
|
||||||
alt="The Feditext logo, the characters 'ft' at a slight angle"
|
alt="The Feditext logo, the characters 'ft' at a slight angle"
|
||||||
title="The Feditext logo, the characters 'ft' at a slight angle" width="100" height="100" />
|
title="The Feditext logo, the characters 'ft' at a slight angle" width="100" height="100" />
|
||||||
</li>
|
</li>
|
||||||
<li class="applist-entry">
|
<li class="applist-entry">
|
||||||
<div class="applist-text">
|
<div class="applist-text">
|
||||||
<p>Or try one of the <strong>Mastodon clients</strong> listed on the official Mastodon page.</p>
|
<p>Or try one of the <strong>Mastodon clients</strong> listed on the official Mastodon page.</p>
|
||||||
<a href="https://joinmastodon.org/apps" rel="nofollow noreferrer noopener" target="_blank">
|
<a href="https://joinmastodon.org/apps" rel="nofollow noreferrer noopener" target="_blank">
|
||||||
Get Mastodon apps
|
Get Mastodon apps
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
<img class="applist-logo" src="/assets/mastodon.svg"
|
<img class="applist-logo" src="/assets/mastodon.svg"
|
||||||
alt="The Mastodon logo, the character 'M' in a speech bubble"
|
alt="The Mastodon logo, the character 'M' in a speech bubble"
|
||||||
title="The Mastodon logo, the character 'M' in a speech bubble" width="100" height="100" />
|
title="The Mastodon logo, the character 'M' in a speech bubble" width="100" height="100" />
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
</main>
|
</main>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -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