-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
4 lines (4 loc) · 3.16 KB
/
index.html
1
2
3
4
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><meta name="viewport" content="width=device-width, initial-scale=1.0"/><meta http-equiv="Permissions-Policy" content="interest-cohort=()"/><link rel="icon" href="/example/favicon.ico"/><script type="application/ld+json">{"@context":"http://schema.org","@type":"website"}</script><link rel="stylesheet" href="/example/magic.css?kt9JqqFO+G" integrity="sha384-kt9JqqFO+GDBBdbVJ2abQ7fiYgscvb9MdI7HizpxU8cT8d88y5JGG0L8nyVsfeDd" crossorigin="anonymous"/></head><body><a class="SkipLink" href="/example/#page">Skip to Content</a><main id="Magic"><div class="Wrapper"><header class="Header"><a class="Logo" href="/example/"><span>example theme</span></a><nav class="Menu"><ul><li><a href="/example/#installation">installation</a></li><li><a href="/example/#usage">usage</a></li></ul></nav></header><div class="Page" id="page"><h1 id="magic-themesexample">@magic-themes/example</h1><p>this is the
<a href="https://github.com/magic-themes" target="_blank" rel="noopener">@magic-themes</a>
example theme.
It is being used in the <a href="https://github.com/magic-examples/example" target="_blank" rel="noopener">@magic example page</a></p><a href="https://magic-examples.github.io/example/" target="_blank" rel="noopener">demo</a><h3 id="installation">installation</h3><div class="Pre"><div class="menu"><button>copy</button></div><pre><code class="line"><span class="keyword">npm</span> <span class="keyword">install</span> magic-themes/docs</code></pre></div><h2 id="usage">usage</h2><h3 id="usage-require">require in config.mjs:</h3><div class="Pre lines"><div class="menu"><button>copy</button></div><pre><code class="line"><span class="comment">// config.mjs</span></code><code class="line"></code><code class="line"><span class="keyword">export</span> <span class="keyword">default</span> {</code><code class="line"> <span class="comment">// ... other config</span></code><code class="line"> THEME: <span class="string">'docs'</span>,</code><code class="line">}</code></pre></div><h3 id="usage-customize">customize</h3><p>you can customize and add any kind of style</p><p>create /assets/themes/docs/index.mjs, any css there will overwrite the theme css</p><div class="Pre lines"><div class="menu"><button>copy</button></div><pre><code class="line"><span class="comment">// /assets/themes/docs/index.mjs</span></code><code class="line"></code><code class="line"><span class="keyword">export</span> <span class="keyword">default</span> vars <span class="keyword">=></span> ({</code><code class="line"> body: {</code><code class="line"> color: vars.colors.orange[900],</code><code class="line"> },</code><code class="line">})</code></pre></div><p>magic will then find and merge the themes automatically, just as it did on this page</p></div><footer class="Footer"><div class="Container"><div class="Credits">made with a few bits of <a target="_blank" rel="noopener" href="https://magic.github.io/">magic</a></div></div></footer></div></main><script src="/example/magic.js?3wMtk+RvgO" integrity="sha384-3wMtk+RvgOOWbfBjzR3PKfvGjlGcxeXPZN6NMSbHIlK4z9jTpZoMNdo8IoBbOVar" crossorigin="anonymous"></script></body></html>