thohlt/aurora
1
0
Fork 0
mirror of https://github.com/thiloho/aurora.git synced 2025-11-22 03:21:35 +01:00
Code Issues Packages Projects Releases Wiki Activity

Correct tab size and adjust toc

Browse Source
This commit is contained in:
thiloho
2023-05-19 12:33:18 +02:00
parent 6001f195b3
commit ab7f43364f
5 changed files with 46 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/components/ArticleSearch.svelte
View File

@@ -55,6 +55,7 @@
} }
input { input {
max-inline-size: 100%; inline-size: 100%;
margin-block-start: 0.25rem;
} }
</style> </style>

20
src/components/Dropdown.svelte
View File

@@ -7,27 +7,27 @@
let summaryElement: HTMLElement; let summaryElement: HTMLElement;
function openMenu() { function openMenu() {
detailsElement.setAttribute("open", ""); detailsElement.setAttribute("open", "");
} }
export function closeMenu() { export function closeMenu() {
detailsElement.removeAttribute("open"); detailsElement.removeAttribute("open");
} }
function handleKeydown(event: KeyboardEvent) { function handleKeydown(event: KeyboardEvent) {
if (event.key === "Escape") closeMenu(); if (event.key === "Escape") closeMenu();
if (event.key === shortcut) { if (event.key === shortcut) {
summaryElement.focus(); summaryElement.focus();
openMenu(); openMenu();
} else if (possibleShortcuts.includes(event.key) && event.key !== shortcut) { } else if (possibleShortcuts.includes(event.key) && event.key !== shortcut) {
closeMenu(); closeMenu();
} }
} }
function handleClick(event: MouseEvent) { function handleClick(event: MouseEvent) {
if (!detailsElement.contains(event.target as Node)) { if (!detailsElement.contains(event.target as Node)) {
closeMenu(); closeMenu();
} }
} }
</script> </script>

2
src/components/Head.astro
View File

@@ -12,6 +12,6 @@ const { title, description } = Astro.props;
<meta name="description" content={description} /> <meta name="description" content={description} />
<script is:inline> <script is:inline>
const storedTheme = localStorage.getItem("theme"); const storedTheme = localStorage.getItem("theme");
document.documentElement.classList = storedTheme; document.documentElement.className = storedTheme;
</script> </script>
</head> </head>

55
src/components/TableOfContents.svelte
View File

@@ -1,34 +1,41 @@
<script lang="ts"> <script lang="ts">
import type { MarkdownHeading } from "astro"; import type { MarkdownHeading } from "astro";
export let headings: MarkdownHeading[] = []; export let headings: MarkdownHeading[] = [];
import Dropdown from "./Dropdown.svelte"; import Dropdown from "./Dropdown.svelte";
</script> </script>
<Dropdown shortcut="C"> <Dropdown shortcut="C">
<svg slot="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="icon"> <svg slot="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="icon">
<title>Table of contents (Shift + c)</title> <title>Table of contents (Shift + c)</title>
<path fill-rule="evenodd" d="M2.625 6.75a1.125 1.125 0 112.25 0 1.125 1.125 0 01-2.25 0zm4.875 0A.75.75 0 018.25 6h12a.75.75 0 010 1.5h-12a.75.75 0 01-.75-.75zM2.625 12a1.125 1.125 0 112.25 0 1.125 1.125 0 01-2.25 0zM7.5 12a.75.75 0 01.75-.75h12a.75.75 0 010 1.5h-12A.75.75 0 017.5 12zm-4.875 5.25a1.125 1.125 0 112.25 0 1.125 1.125 0 01-2.25 0zm4.875 0a.75.75 0 01.75-.75h12a.75.75 0 010 1.5h-12a.75.75 0 01-.75-.75z" clip-rule="evenodd" /> <path fill-rule="evenodd" d="M2.625 6.75a1.125 1.125 0 112.25 0 1.125 1.125 0 01-2.25 0zm4.875 0A.75.75 0 018.25 6h12a.75.75 0 010 1.5h-12a.75.75 0 01-.75-.75zM2.625 12a1.125 1.125 0 112.25 0 1.125 1.125 0 01-2.25 0zM7.5 12a.75.75 0 01.75-.75h12a.75.75 0 010 1.5h-12A.75.75 0 017.5 12zm-4.875 5.25a1.125 1.125 0 112.25 0 1.125 1.125 0 01-2.25 0zm4.875 0a.75.75 0 01.75-.75h12a.75.75 0 010 1.5h-12a.75.75 0 01-.75-.75z" clip-rule="evenodd" />
</svg> </svg>
<ul> <ul>
{#each headings.filter(({ depth }) => depth === 2) as { slug, text }} {#each headings.filter(({ depth }) => depth === 2) as { slug, text }}
<li> <li>
<a href="#{slug}">{text}</a> <a href="#{slug}">{text}</a>
</li> </li>
{/each} {/each}
</ul> </ul>
</Dropdown> </Dropdown>
<style> <style>
ul { ul {
position: absolute; position: absolute;
border: var(--standard-border); border: var(--standard-border);
padding: 1rem; padding-inline-start: 2rem;
padding-inline-start: 2rem; background-color: var(--background-color);
background-color: var(--background-color); inset-block-start: var(--nav-height);
inset-block-start: var(--nav-height); margin: 0;
margin: 0; padding: 0;
inset-inline-end: 0; list-style: none;
} inset-inline-end: 0;
}
a {
display: block;
padding-inline: 1rem;
padding-block: 0.25rem;
}
</style> </style>

4
src/components/ThemeToggle.svelte
View File

@@ -6,7 +6,7 @@
let theme = "System"; let theme = "System";
function loadTheme() { function loadTheme() {
theme = localStorage.getItem("theme"); theme = localStorage.getItem("theme") || "System";
} }
function saveTheme() { function saveTheme() {
@@ -15,7 +15,7 @@
loadTheme(); loadTheme();
$: document.documentElement.classList = theme; $: document.documentElement.className = theme;
</script> </script>
<Dropdown shortcut="T"> <Dropdown shortcut="T">