mirror of
https://github.com/Dimillian/Skills.git
synced 2026-03-25 08:55:54 +00:00
2b99f8520f
Introduced a theme toggle button in the docs header, allowing users to switch between light and dark modes. Theme preference is saved in localStorage and applied on load. Updated CSS to support theme variables and improved code block styling for both themes.
76 lines
3.3 KiB
HTML
76 lines
3.3 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<title>Dimillian's iOS Codex Skills</title>
|
|
<link rel="stylesheet" href="./styles.css" />
|
|
</head>
|
|
<body>
|
|
<header class="topbar">
|
|
<div class="topbar__content">
|
|
<div>
|
|
<p class="eyebrow">Dimillian's iOS Codex Skills</p>
|
|
<p class="lead">
|
|
A curated set of focused skills for Swift, SwiftUI, and iOS workflows.
|
|
Built to help you review, debug, and ship faster.
|
|
</p>
|
|
</div>
|
|
<div class="topbar__actions">
|
|
<button class="theme-toggle" id="themeToggle" type="button" aria-label="Toggle theme">
|
|
<svg class="theme-toggle__icon theme-toggle__icon--sun" viewBox="0 0 24 24" aria-hidden="true">
|
|
<circle cx="12" cy="12" r="4"></circle>
|
|
<path
|
|
d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41"
|
|
stroke-linecap="round"
|
|
></path>
|
|
</svg>
|
|
<svg class="theme-toggle__icon theme-toggle__icon--moon" viewBox="0 0 24 24" aria-hidden="true">
|
|
<path
|
|
d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
></path>
|
|
</svg>
|
|
</button>
|
|
<a class="github-link" href="#" id="githubLink" aria-label="View on GitHub">
|
|
<svg aria-hidden="true" viewBox="0 0 16 16" role="img">
|
|
<path
|
|
d="M8 0C3.58 0 0 3.58 0 8a8 8 0 0 0 5.47 7.59c.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2 .37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8 8 0 0 0 16 8c0-4.42-3.58-8-8-8Z"
|
|
/>
|
|
</svg>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<main class="page">
|
|
<div class="layout">
|
|
<aside class="sidebar">
|
|
<h2 class="sidebar__title">Skills</h2>
|
|
<nav id="skillsList" class="skills-list"></nav>
|
|
</aside>
|
|
<section class="content">
|
|
<div class="content__header">
|
|
<div>
|
|
<p class="eyebrow" id="skillCategory">Skill</p>
|
|
<h2 id="skillTitle">Select a skill</h2>
|
|
<p class="muted" id="skillDescription">
|
|
Choose a skill on the left to read its instructions and references.
|
|
</p>
|
|
<p class="usage" id="skillUsage"></p>
|
|
</div>
|
|
</div>
|
|
<div class="reference-bar" id="referenceBar"></div>
|
|
<article class="markdown-body" id="markdownContent"></article>
|
|
</section>
|
|
</div>
|
|
</main>
|
|
<footer class="footer">
|
|
<p>Made with ❤️ by Dimillian and Codex</p>
|
|
</footer>
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
|
|
<script src="./app.js"></script>
|
|
</body>
|
|
</html>
|