mirror of
https://seed.radicle.dev/rad:z4V1sjrXqjvFdnCUbxPFqd5p4DtH5.git
synced 2026-11-15 11:20:36 +08:00
Rūdolfs Ošiņš
591c19a256
- Move all global typography styles to its own file. This makes it easier to find all the typography related definitions for newcomers. - Prefix all typography related global CSS classes with a unique prefix `.txt-`. This allows us to grep the codebase and see exactly where they are applied. Another benefit of this convention is that it helps to avoid accidentally mixing global and local styles. Having global CSS classes that sometimes overlap with component CSS classes makes it very hard to reason about the resulting visuals and making changes unpredictable. - Introduce CSS variables for standardised typography sizes and apply them to the whole codebase consistently. This way we can adjust the size in one place and it will be applied everywhere. - Avoid using predefined HTML tags which might have differing styling from browser to browser, e.g. `<h1>`, `<strong>`. We should stick to applying styling either by adding a specific global CSS class or using the predefined CSS variables, this way we can be sure that the styles won't be overridden by browser defaults. - Have a minimal set of modifiers `.txt-monospace` and `.txt-bold` and apply them consistently. Since `.txt-monospace` is defined via a CSS variable, we'll be able to switch out fonts via a user setting in the future. Signed-off-by: Rūdolfs Ošiņš <rudolfs@osins.org>
79 lines
2.0 KiB
Svelte
79 lines
2.0 KiB
Svelte
<script lang="ts">
|
|
import * as proj from "@app/project";
|
|
import { formatCommit } from "@app/utils";
|
|
import type { Commit } from "@app/commit";
|
|
|
|
import Changeset from "@app/base/projects/SourceBrowser/Changeset.svelte";
|
|
import CommitAuthorship from "@app/base/projects/Commit/CommitAuthorship.svelte";
|
|
import CommitVerifiedBadge from "@app/base/projects/Commit/CommitVerifiedBadge.svelte";
|
|
|
|
export let project: proj.Project;
|
|
export let commit: Commit;
|
|
|
|
const onBrowse = (event: { detail: string }) => {
|
|
project.navigateTo({
|
|
content: proj.ProjectContent.Tree,
|
|
revision: commit.header.sha1,
|
|
path: event.detail,
|
|
});
|
|
};
|
|
</script>
|
|
|
|
<style>
|
|
.commit {
|
|
padding: 0 2rem 0 8rem;
|
|
}
|
|
header {
|
|
padding: 1rem;
|
|
background: var(--color-foreground-background-subtle);
|
|
border-radius: var(--border-radius);
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
.summary {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
.description {
|
|
margin: 0.5rem 0 1rem 0;
|
|
}
|
|
.sha1 {
|
|
color: var(--color-foreground-80);
|
|
font-size: var(--font-size-small);
|
|
}
|
|
.authorship {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
@media (max-width: 960px) {
|
|
.commit {
|
|
padding-left: 2rem;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<div class="commit">
|
|
<header>
|
|
<div class="summary">
|
|
<div class="txt-medium">{commit.header.summary}</div>
|
|
<div class="desktop txt-monospace sha1">
|
|
<span>{commit.header.sha1}</span>
|
|
</div>
|
|
<div class="mobile txt-monospace sha1 txt-small">
|
|
{formatCommit(commit.header.sha1)}
|
|
</div>
|
|
</div>
|
|
<pre class="description txt-small">{commit.header.description}</pre>
|
|
<div class="authorship">
|
|
<CommitAuthorship {commit} />
|
|
{#if commit.context?.committer}
|
|
<CommitVerifiedBadge {commit} />
|
|
{/if}
|
|
</div>
|
|
</header>
|
|
<Changeset stats={commit.stats} diff={commit.diff} on:browse={onBrowse} />
|
|
</div>
|