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,131 +37,132 @@
|
|||
<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">
|
||||
<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>
|
||||
<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">
|
||||
<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>
|
||||
<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
|
||||
data by "talking" to each other over the internet using a protocol called ActivityPub.
|
||||
</p>
|
||||
<a class="activitypub-logo-wrapper" href="https://activitypub.rocks/" rel="nofollow noreferrer noopener"
|
||||
target="_blank">
|
||||
<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" />
|
||||
Learn more about ActivityPub (opens in a new tab).
|
||||
</a>
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
<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>
|
||||
<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,
|
||||
and registering an account.
|
||||
</p>
|
||||
<p>
|
||||
To help you find an instance that suits you, you can try one of the following tools:
|
||||
</p>
|
||||
<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
|
||||
a new tab)</a></li>
|
||||
</ul>
|
||||
<p>Or, just <a href="signup">register for an account on this instance</a>!</p>
|
||||
</div>
|
||||
<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>
|
||||
<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
|
||||
data by "talking" to each other over the internet using a protocol called ActivityPub.
|
||||
</p>
|
||||
<a class="activitypub-logo-wrapper" href="https://activitypub.rocks/" rel="nofollow noreferrer noopener"
|
||||
target="_blank">
|
||||
<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" />
|
||||
Learn more about ActivityPub (opens in a new tab).
|
||||
</a>
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
<p>
|
||||
There are thousands of fediverse instances, connecting millions of people together.
|
||||
</p>
|
||||
<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,
|
||||
and registering an account.
|
||||
</p>
|
||||
<p>
|
||||
To help you find an instance that suits you, you can try one of the following tools:
|
||||
</p>
|
||||
<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
|
||||
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">
|
||||
<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>
|
||||
<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>
|
||||
</div>
|
||||
<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>
|
||||
<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>
|
||||
</div>
|
||||
</section>
|
||||
<section role="region" class="about-section apps" aria-labelledby="apps">
|
||||
<h3 id="apps">Client applications</h3>
|
||||
<div class="about-section-contents">
|
||||
<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.
|
||||
You can use a variety of clients to log in to your account here:
|
||||
</p>
|
||||
<ul class="applist nodot" role="group">
|
||||
<li class="applist-entry">
|
||||
<div class="applist-text">
|
||||
<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">
|
||||
Use Semaphore
|
||||
</a>
|
||||
</div>
|
||||
<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">
|
||||
<title id="semaphore-title">The Semaphore logo</title>
|
||||
<desc id="semaphore-desc">A waving flag</desc>
|
||||
<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">
|
||||
</path>
|
||||
</svg>
|
||||
</li>
|
||||
<li class="applist-entry">
|
||||
<div class="applist-text">
|
||||
<p><strong>Tusky</strong> is a lightweight mobile client for Android.</p>
|
||||
<a href="https://tusky.app" rel="nofollow noreferrer noopener" target="_blank">
|
||||
Get Tusky
|
||||
</a>
|
||||
</div>
|
||||
<img class="applist-logo" src="/assets/tusky.svg"
|
||||
alt="The Tusky mascot, a cartoon elephant tooting happily"
|
||||
title="The Tusky mascot, a cartoon elephant tooting happily" width="100" height="100" />
|
||||
</li>
|
||||
<li class="applist-entry">
|
||||
<div class="applist-text">
|
||||
<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">
|
||||
Get Feditext
|
||||
</a>
|
||||
</div>
|
||||
<img class="applist-logo" src="/assets/feditext.svg"
|
||||
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" />
|
||||
</li>
|
||||
<li class="applist-entry">
|
||||
<div class="applist-text">
|
||||
<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">
|
||||
Get Mastodon apps
|
||||
</a>
|
||||
</div>
|
||||
<img class="applist-logo" src="/assets/mastodon.svg"
|
||||
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" />
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<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.
|
||||
You can use a variety of clients to log in to your account here:
|
||||
</p>
|
||||
<ul class="applist nodot" role="group">
|
||||
<li class="applist-entry">
|
||||
<div class="applist-text">
|
||||
<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">
|
||||
Use Semaphore
|
||||
</a>
|
||||
</div>
|
||||
<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">
|
||||
<title id="semaphore-title">The Semaphore logo</title>
|
||||
<desc id="semaphore-desc">A waving flag</desc>
|
||||
<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">
|
||||
</path>
|
||||
</svg>
|
||||
</li>
|
||||
<li class="applist-entry">
|
||||
<div class="applist-text">
|
||||
<p><strong>Tusky</strong> is a lightweight mobile client for Android.</p>
|
||||
<a href="https://tusky.app" rel="nofollow noreferrer noopener" target="_blank">
|
||||
Get Tusky
|
||||
</a>
|
||||
</div>
|
||||
<img class="applist-logo" src="/assets/tusky.svg"
|
||||
alt="The Tusky mascot, a cartoon elephant tooting happily"
|
||||
title="The Tusky mascot, a cartoon elephant tooting happily" width="100" height="100" />
|
||||
</li>
|
||||
<li class="applist-entry">
|
||||
<div class="applist-text">
|
||||
<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">
|
||||
Get Feditext
|
||||
</a>
|
||||
</div>
|
||||
<img class="applist-logo" src="/assets/feditext.svg"
|
||||
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" />
|
||||
</li>
|
||||
<li class="applist-entry">
|
||||
<div class="applist-text">
|
||||
<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">
|
||||
Get Mastodon apps
|
||||
</a>
|
||||
</div>
|
||||
<img class="applist-logo" src="/assets/mastodon.svg"
|
||||
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" />
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</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 {
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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