@natachah/vanilla-frontend 0.4.0 → 1.0.0

package/public/assets/base_media.md.CcuDUcF-.js

@@ -0,0 +1,24 @@
+import{C as t}from"./chunks/ComponentPreview.BW2s4ay5.js";import{o as e,c as p,ai as a,J as l,w as h,j as i}from"./chunks/framework.CaiDwmc7.js";/* empty css                                                                                */const E=JSON.parse('{"title":"Media","description":"","frontmatter":{},"headers":[],"relativePath":"base/media.md","filePath":"base/media.md"}'),n={name:"base/media.md"},c=Object.assign(n,{setup(k){return(d,s)=>(e(),p("div",null,[s[5]||(s[5]=a('<h1 id="media" tabindex="-1">Media <a class="header-anchor" href="#media" aria-label="Permalink to “Media”">​</a></h1><p>To implement clean images, videos and audio.</p><div class="language-scss"><button title="Copy Code" class="copy"></button><span class="lang">scss</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">@use</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;@natachah/vanilla-frontend/scss/base/media&#39;</span></span></code></pre></div><h2 id="image" tabindex="-1">Image <a class="header-anchor" href="#image" aria-label="Permalink to “Image”">​</a></h2><p>The image is using the native <code>&lt;img&gt;</code> tag with the attributes <code>srcset</code>, <code>alt</code> and <code>title</code>.</p>',5)),l(t,null,{default:h(()=>[...s[0]||(s[0]=[i("img",{src:"https://picsum.photos/400/330",srcset:"https://picsum.photos/800/660 2x",alt:"A random image from lorem picsum",title:"This is my picture"},null,-1)])]),_:1}),s[6]||(s[6]=a(`<div class="vp-code-group"><div class="tabs"><input type="radio" name="group-15" id="tab-16" checked><label data-title="html" for="tab-16">html</label><input type="radio" name="group-15" id="tab-17"><label data-title="css properties" for="tab-17">css properties</label></div><div class="blocks"><div class="language-html active"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">img</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> src</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;https://picsum.photos/400/330&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> srcset</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;https://picsum.photos/800/660 2x&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> alt</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;A random image from lorem picsum&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> title</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;This is my picture&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><div class="language-css"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">--image-width</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">--image-height</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">--image-fit</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">--image-position</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">--image-ratio</span></span></code></pre></div></div></div><h3 id="picture" tabindex="-1">Picture <a class="header-anchor" href="#picture" aria-label="Permalink to “Picture”">​</a></h3><p>For responsive and best practice, it&#39;s better to use the <code>&lt;picture&gt;</code> tag with inside the <code>&lt;source&gt;</code> and <code>&lt;img&gt;</code> tags.</p>`,3)),l(t,null,{default:h(()=>[...s[1]||(s[1]=[i("picture",null,[i("source",{media:"(max-width:576px)",srcset:"https://picsum.photos/id/237/200, https://picsum.photos/id/237/400 2x"}),i("source",{media:"(max-width:768px)",srcset:"https://picsum.photos/id/237/400, https://picsum.photos/id/237/800 2x"}),i("source",{media:"(max-width:992px)",srcset:"https://picsum.photos/id/237/800, https://picsum.photos/id/237/1600 2x"}),i("img",{src:"https://picsum.photos/id/237/200",srcset:"https://https://picsum.photos/id/237/400 2x",alt:"A random image from lorem picsum",title:"This is my picture"})],-1)])]),_:1}),s[7]||(s[7]=a(`<div class="language-html"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">picture</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">source</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> media</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;(max-width:576px)&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> srcset</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;https://picsum.photos/id/237/200, https://picsum.photos/id/237/400 2x&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">source</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> media</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;(max-width:768px)&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> srcset</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;https://picsum.photos/id/237/400, https://picsum.photos/id/237/800 2x&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">source</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> media</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;(max-width:992px)&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> srcset</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;https://picsum.photos/id/237/800, https://picsum.photos/id/237/1600 2x&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">img</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> src</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;https://picsum.photos/id/237/200&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> srcset</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;https://https://picsum.photos/id/237/400 2x&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> alt</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;A random image from lorem picsum&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> title</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;This is my picture&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">picture</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><h3 id="figure" tabindex="-1">Figure <a class="header-anchor" href="#figure" aria-label="Permalink to “Figure”">​</a></h3><p>You also can use <code>&lt;figure&gt;</code> and <code>&lt;figcaption&gt;</code> tags, to display an <code>&lt;img&gt;</code> with a nice caption.</p>`,3)),l(t,null,{default:h(()=>[...s[2]||(s[2]=[i("figure",null,[i("img",{src:"https://picsum.photos/id/320/400/330",srcset:"https://picsum.photos/id/320/800/660 2x",alt:"My random image from lorem picsum"}),i("figcaption",null,"My image from lorem picsum")],-1)])]),_:1}),s[8]||(s[8]=a(`<div class="tip custom-block"><p class="custom-block-title custom-block-title-default">TIP</p><p>You can also combine <code>&lt;figure&gt;</code> with a <code>&lt;picture&gt;</code> tag.</p></div><div class="vp-code-group"><div class="tabs"><input type="radio" name="group-39" id="tab-40" checked><label data-title="html" for="tab-40">html</label><input type="radio" name="group-39" id="tab-41"><label data-title="css properties" for="tab-41">css properties</label></div><div class="blocks"><div class="language-html active"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">figure</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">img</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> src</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;https://picsum.photos/id/320/400/330&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> srcset</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;https://picsum.photos/id/320/800/660 2x&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> alt</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;My random image from lorem picsum&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">figcaption</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;My image from lorem picsum&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">figcaption</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">figure</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><div class="language-css"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">--caption-color</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">--caption-font-size</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">--caption-margin-block</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">--caption-margin-inline</span></span></code></pre></div></div></div><h2 id="video" tabindex="-1">Video <a class="header-anchor" href="#video" aria-label="Permalink to “Video”">​</a></h2><p>Use the default <code>&lt;video&gt;</code> and <code>&lt;source&gt;</code> tags.</p><p>By default the video take 100% width and have a ratio of 16:9.</p>`,5)),l(t,null,{default:h(()=>[...s[3]||(s[3]=[i("video",{width:"320",height:"240",controls:""},[i("source",{src:"http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4",type:"video/mp4"})],-1)])]),_:1}),s[9]||(s[9]=a(`<div class="vp-code-group"><div class="tabs"><input type="radio" name="group-53" id="tab-54" checked><label data-title="html" for="tab-54">html</label><input type="radio" name="group-53" id="tab-55"><label data-title="css properties" for="tab-55">css properties</label></div><div class="blocks"><div class="language-html active"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">video</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;320&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> height</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;240&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> controls</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">source</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> src</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> type</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;video/mp4&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">video</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><div class="language-css"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">--video-width</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">--video-height</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">--video-fit</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">--video-position</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">--video-ratio</span></span></code></pre></div></div></div><h2 id="audio" tabindex="-1">Audio <a class="header-anchor" href="#audio" aria-label="Permalink to “Audio”">​</a></h2><p>Use the default <code>&lt;audio&gt;</code> and <code>&lt;source&gt;</code> tags.</p><p>By default the audio take 100% width.</p>`,4)),l(t,null,{default:h(()=>[...s[4]||(s[4]=[i("audio",{controls:""},[i("source",{src:"http://localhost:5173/public/audio.mp3",type:"audio/mpeg"})],-1)])]),_:1}),s[10]||(s[10]=a(`<div class="vp-code-group"><div class="tabs"><input type="radio" name="group-67" id="tab-68" checked><label data-title="html" for="tab-68">html</label><input type="radio" name="group-67" id="tab-69"><label data-title="css properties" for="tab-69">css properties</label></div><div class="blocks"><div class="language-html active"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">audio</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> controls</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">source</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> src</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;http://localhost:5173/public/audio.mp3&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> type</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;audio/mpeg&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">audio</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><div class="language-css"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">--audio-width</span></span></code></pre></div></div></div>`,1))]))}});export{E as __pageData,c as default};

package/public/assets/base_media.md.CcuDUcF-.lean.js

@@ -0,0 +1 @@
+import{C as t}from"./chunks/ComponentPreview.BW2s4ay5.js";import{o as e,c as p,ai as a,J as l,w as h,j as i}from"./chunks/framework.CaiDwmc7.js";/* empty css                                                                                */const E=JSON.parse('{"title":"Media","description":"","frontmatter":{},"headers":[],"relativePath":"base/media.md","filePath":"base/media.md"}'),n={name:"base/media.md"},c=Object.assign(n,{setup(k){return(d,s)=>(e(),p("div",null,[s[5]||(s[5]=a("",5)),l(t,null,{default:h(()=>[...s[0]||(s[0]=[i("img",{src:"https://picsum.photos/400/330",srcset:"https://picsum.photos/800/660 2x",alt:"A random image from lorem picsum",title:"This is my picture"},null,-1)])]),_:1}),s[6]||(s[6]=a("",3)),l(t,null,{default:h(()=>[...s[1]||(s[1]=[i("picture",null,[i("source",{media:"(max-width:576px)",srcset:"https://picsum.photos/id/237/200, https://picsum.photos/id/237/400 2x"}),i("source",{media:"(max-width:768px)",srcset:"https://picsum.photos/id/237/400, https://picsum.photos/id/237/800 2x"}),i("source",{media:"(max-width:992px)",srcset:"https://picsum.photos/id/237/800, https://picsum.photos/id/237/1600 2x"}),i("img",{src:"https://picsum.photos/id/237/200",srcset:"https://https://picsum.photos/id/237/400 2x",alt:"A random image from lorem picsum",title:"This is my picture"})],-1)])]),_:1}),s[7]||(s[7]=a("",3)),l(t,null,{default:h(()=>[...s[2]||(s[2]=[i("figure",null,[i("img",{src:"https://picsum.photos/id/320/400/330",srcset:"https://picsum.photos/id/320/800/660 2x",alt:"My random image from lorem picsum"}),i("figcaption",null,"My image from lorem picsum")],-1)])]),_:1}),s[8]||(s[8]=a("",5)),l(t,null,{default:h(()=>[...s[3]||(s[3]=[i("video",{width:"320",height:"240",controls:""},[i("source",{src:"http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4",type:"video/mp4"})],-1)])]),_:1}),s[9]||(s[9]=a("",4)),l(t,null,{default:h(()=>[...s[4]||(s[4]=[i("audio",{controls:""},[i("source",{src:"http://localhost:5173/public/audio.mp3",type:"audio/mpeg"})],-1)])]),_:1}),s[10]||(s[10]=a("",1))]))}});export{E as __pageData,c as default};

package/public/assets/base_reset.md.DqIdqFRJ.js

@@ -0,0 +1,3 @@
+import{_ as i,o as s,c as t,ai as a}from"./chunks/framework.CaiDwmc7.js";const k=JSON.parse('{"title":"Reset","description":"","frontmatter":{},"headers":[],"relativePath":"base/reset.md","filePath":"base/reset.md"}'),l={name:"base/reset.md"};function d(o,e,n,r,h,p){return s(),t("div",null,[...e[0]||(e[0]=[a(`<h1 id="reset" tabindex="-1">Reset <a class="header-anchor" href="#reset" aria-label="Permalink to “Reset”">​</a></h1><p>The framework include a simple <strong>reboot</strong> to makes browsers render all elements more consistently and in line with modern standards.</p><ul><li>Unset all default style <em>(except display)</em></li><li>Change box-sizing to <code>border-box</code> on all element</li><li>Render media as block with a default 100% width</li><li>Change the <code>overflow-wrap</code> for text</li><li>Set default size and align for <code>&lt;svg&gt;</code></li><li>Set <code>&lt;table&gt;</code> default width</li><li>Set default cursor for <code>draggable</code></li><li>Set default cursor and animation for tree</li><li>Enable <code>scroll-behavior</code> if <code>prefers-reduced-motion</code> is not set</li><li>Set default <code>&lt;body&gt;</code> setting + <code>inert</code> mode for <code>&lt;dialog&gt;</code></li><li>Set functionalities on <code>&lt;body&gt;</code> for <code>inert</code> and <code>data-preload</code> attributes</li></ul><p>To use it, import this file:</p><div class="language-scss"><button title="Copy Code" class="copy"></button><span class="lang">scss</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">@use</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;@natachah/vanilla-frontend/scss/base/reset&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span></code></pre></div><h2 id="preload" tabindex="-1">Preload <a class="header-anchor" href="#preload" aria-label="Permalink to “Preload”">​</a></h2><p>If you need to disabled the CSS animation on first load of the page add the data attribute <code>data-preload</code> on the <code>&lt;body&gt;</code>.</p><p>And then add this script that will remove the attribute after a timeout:</p><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">setTimeout</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(() </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    document.body.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">removeAttribute</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;data-preload&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">10</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span></code></pre></div>`,9)])])}const g=i(l,[["render",d]]);export{k as __pageData,g as default};

package/public/assets/base_reset.md.DqIdqFRJ.lean.js

@@ -0,0 +1 @@
+import{_ as i,o as s,c as t,ai as a}from"./chunks/framework.CaiDwmc7.js";const k=JSON.parse('{"title":"Reset","description":"","frontmatter":{},"headers":[],"relativePath":"base/reset.md","filePath":"base/reset.md"}'),l={name:"base/reset.md"};function d(o,e,n,r,h,p){return s(),t("div",null,[...e[0]||(e[0]=[a("",9)])])}const g=i(l,[["render",d]]);export{k as __pageData,g as default};

package/public/assets/base_typography.md.DV-ikqGZ.js

@@ -0,0 +1,87 @@
+import{C as l}from"./chunks/ComponentPreview.BW2s4ay5.js";import{o as k,c as p,ai as a,J as t,w as n,j as s,a as h}from"./chunks/framework.CaiDwmc7.js";/* empty css                                                                                */const o=JSON.parse('{"title":"Typography","description":"","frontmatter":{},"headers":[],"relativePath":"base/typography.md","filePath":"base/typography.md"}'),e={name:"base/typography.md"},c=Object.assign(e,{setup(E){return(d,i)=>(k(),p("div",null,[i[8]||(i[8]=a('<h1 id="typography" tabindex="-1">Typography <a class="header-anchor" href="#typography" aria-label="Permalink to “Typography”">​</a></h1><p>All website have some typographic elements, here some basic styling.</p><div class="language-scss"><button title="Copy Code" class="copy"></button><span class="lang">scss</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">@use</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;@natachah/vanilla-frontend/scss/base/typography&#39;</span></span></code></pre></div><h2 id="headings" tabindex="-1">Headings <a class="header-anchor" href="#headings" aria-label="Permalink to “Headings”">​</a></h2><p>The headings use the default <code>&lt;h*&gt;</code> tags.</p>',5)),t(l,null,{default:n(()=>[...i[0]||(i[0]=[s("h1",null,"Heading 1",-1),s("h2",null,"Heading 2",-1),s("h3",null,"Heading 3",-1),s("h4",null,"Heading 4",-1),s("h5",null,"Heading 5",-1),s("h6",null,"Heading 6",-1)])]),_:1}),i[9]||(i[9]=a(`<div class="vp-code-group"><div class="tabs"><input type="radio" name="group-15" id="tab-16" checked><label data-title="html" for="tab-16">html</label><input type="radio" name="group-15" id="tab-17"><label data-title="css properties" for="tab-17">css properties</label></div><div class="blocks"><div class="language-html active"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">h1</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Heading 1&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">h1</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">h2</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Heading 2&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">h2</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">h3</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Heading 3&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">h3</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">h4</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Heading 4&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">h4</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">h5</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Heading 5&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">h5</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">h6</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Heading 6&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">h6</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><div class="language-css"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">--font-size-h</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">*</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">--heading-font-weight</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">--heading-line-height</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">--heading-color</span></span></code></pre></div></div></div><h2 id="paragraph" tabindex="-1">Paragraph <a class="header-anchor" href="#paragraph" aria-label="Permalink to “Paragraph”">​</a></h2><p>The paragraph use the default <code>&lt;h*&gt;</code> tags.</p><p>As each website is uniq, there is no default margin-block for the paragraph.</p>`,4)),t(l,null,{default:n(()=>[...i[1]||(i[1]=[s("p",null," Lorem ipsum sit amet consectetur adipisicing elit. Quos consequatur omnis velit saepe suscipit? Ab ut assumenda nesciunt, veritatis beatae temporibus facilis quis earum vero officia explicabo veniam tempore voluptatibus? ",-1),s("p",null," Velit saepe suscipit? Ab ut assumenda nesciunt, veritatis beatae temporibus facilis quis earum vero officia explicabo veniam tempore voluptatibus? Lorem ipsum sit amet consectetur adipisicing elit. ",-1),s("p",null," Ab ut assumenda nesciunt, veritatis beatae temporibus facilis quis earum vero. ",-1)])]),_:1}),i[10]||(i[10]=a('<h2 id="anchor" tabindex="-1">Anchor <a class="header-anchor" href="#anchor" aria-label="Permalink to “Anchor”">​</a></h2><p>Use the default <code>&lt;a&gt;</code> tag to create links.</p><p>You can add the <code>aria-current</code> or <code>aria-selected</code> attribute to make the link with an active state.</p><p>By default if there is no <code>href</code> attribute, it will render as disabled state. And if it&#39;s an external link with <code>target=&quot;_blank&quot;</code> attribute, the anchor will have an icon for accessibility.</p>',4)),t(l,null,{default:n(()=>[...i[2]||(i[2]=[s("a",{href:"#"},"Anchor",-1),h(),s("a",{href:"#","aria-current":"page"},"Active",-1),h(),s("a",null,"Disabled",-1),h(),s("a",{href:"#",target:"_blank",title:"This link opens in a new window","aria-label":"This link opens in a new window"},"Anchor",-1)])]),_:1}),i[11]||(i[11]=a(`<div class="vp-code-group"><div class="tabs"><input type="radio" name="group-42" id="tab-43" checked><label data-title="html" for="tab-43">html</label><input type="radio" name="group-42" id="tab-44"><label data-title="css properties" for="tab-44">css properties</label></div><div class="blocks"><div class="language-html active"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">a</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> href</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;#&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Anchor&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">a</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">a</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> href</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;#&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> aria-current</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;page&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Active&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">a</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">a</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Disabled&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">a</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">a</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> href</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;#&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> target</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;_blank&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> title</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;This link opens in a new window&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> aria-label</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;This link opens in a new window&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Anchor&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">a</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><div class="language-css"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">--anchor-decoration</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">--anchor-color</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">--anchor-hover-color</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">--anchor-focus-color</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">--anchor-active-color</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">--anchor-disabled-opacity</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">--anchor-outline-size</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">--anchor-outline-style</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">--anchor-outline-color</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">--anchor-outline-offset</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">--icon-external</span></span></code></pre></div></div></div><h2 id="inline" tabindex="-1">Inline <a class="header-anchor" href="#inline" aria-label="Permalink to “Inline”">​</a></h2>`,2)),t(l,null,{default:n(()=>[...i[3]||(i[3]=[s("div",{class:"grid",style:{"--grid-columns":"3"}},[s("p",null,[s("abbr",{title:"Abbreviation"},"Abbr.")]),s("p",null,[s("small",null,"Small")]),s("p",null,[s("q",null,"An inline quote")]),s("p",null,[s("b",null,"Bold")]),s("p",null,[s("b",null,"b")]),s("p",null,[s("em",null,"Emphasis")]),s("p",null,[s("i",null,"Idiomatic")]),s("p",null,[s("s",null,"Strikethrough")]),s("p",null,[s("u",null,"Underline")]),s("p",null,[s("span",null,[h("Text "),s("sub",null,"Sub")])]),s("p",null,[s("span",null,[h("Text "),s("sup",null,"Sup")])]),s("p",null,[s("cite",null,"Citation")]),s("p",null,[s("mark",null,"Highlight")]),s("p",null,[s("kbd",null,"Ctrl + S")]),s("p",null,[s("code",null,"<Code>")]),s("p",null,[s("ins",null,"Inserted")]),s("p",null,[s("del",null,"Deleted")])],-1)])]),_:1}),i[12]||(i[12]=a(`<div class="vp-code-group"><div class="tabs"><input type="radio" name="group-50" id="tab-51" checked><label data-title="html" for="tab-51">html</label><input type="radio" name="group-50" id="tab-52"><label data-title="css properties" for="tab-52">css properties</label></div><div class="blocks"><div class="language-html active"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">p</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">abbr</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> title</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Abbreviation&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Abbr.&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">abbr</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">p</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">p</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">small</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Small&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">small</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">p</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">p</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">q</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;An inline quote&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">q</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">p</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">p</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">b</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Bold&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">b</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">p</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">p</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">b</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;b&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">b</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">p</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">p</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">em</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Emphasis&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">em</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">p</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">p</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">i</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Idiomatic&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">i</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">p</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">p</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">s</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Strikethrough&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">s</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">p</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">p</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">u</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Underline&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">u</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">p</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">p</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">span</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Text &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">sub</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Sub&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">sub</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">span</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">p</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">p</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">span</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Text &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">sup</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Sup&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">sup</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">span</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">p</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">p</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">cite</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Citation&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">cite</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">p</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">p</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">mark</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Highlight&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">mark</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">p</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">p</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">kbd</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Ctrl + S&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">kbd</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">p</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">p</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">code</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">&amp;lt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">Code</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">&amp;gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">code</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">p</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">p</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">ins</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Inserted&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">ins</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">p</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">p</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">del</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Deleted&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">del</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">p</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><div class="language-css"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">--mark-padding-block</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">--mark-padding-inline</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">--mark-background</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">--kbd-padding-block</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">--kbd-padding-inline</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">--kbd-font-family</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">--kbd-color</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">--kbd-background</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">--kbd-border-radius</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">--code-padding-block</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">--code-padding-inline</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">--code-font-family</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">--code-color</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">--code-background</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">--code-border-radius</span></span></code></pre></div></div></div><h2 id="blockquote" tabindex="-1">Blockquote <a class="header-anchor" href="#blockquote" aria-label="Permalink to “Blockquote”">​</a></h2><p>The quotes use the default <code>&lt;blockquote&gt;</code> tags. Because the blockquote is usully design per website, their is no custom properties for them.</p>`,3)),t(l,null,{default:n(()=>[...i[4]||(i[4]=[s("blockquote",null,[s("p",null," “It's only after we've lost everything that we're free to do anything.” "),s("footer",null,[h(" - Chuck Palahniuk, "),s("cite",null,"Fight Club")])],-1)])]),_:1}),i[13]||(i[13]=a(`<div class="language-html"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">blockquote</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">p</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        “It&#39;s only after we&#39;ve lost everything that we&#39;re free to do anything.”</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">p</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">footer</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        - Chuck Palahniuk, &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">cite</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Fight Club&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">cite</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">footer</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">blockquote</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><h2 id="code" tabindex="-1">Code <a class="header-anchor" href="#code" aria-label="Permalink to “Code”">​</a></h2><p>Use the <code>&lt;pre&gt;</code> tag with a <code>&lt;code&gt;</code> tag inside. The design of a block of code is not the same as the inline element.</p>`,3)),t(l,null,{default:n(()=>[...i[5]||(i[5]=[s("pre",null,[s("code",null,[h("<p>Sample text here...</p>"),s("br"),h("<p>And another line of sample text here...</p>")])],-1)])]),_:1}),i[14]||(i[14]=a(`<div class="vp-code-group"><div class="tabs"><input type="radio" name="group-69" id="tab-70" checked><label data-title="html" for="tab-70">html</label><input type="radio" name="group-69" id="tab-71"><label data-title="css properties" for="tab-71">css properties</label></div><div class="blocks"><div class="language-html active"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">pre</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">code</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">&lt;!--</span></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">--&gt;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">&amp;lt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">p</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">&amp;gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">Sample text here...</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">&amp;lt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">/p</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">&amp;gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">br</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">&lt;!--</span></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">--&gt;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">&amp;lt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">p</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">&amp;gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">And another line of sample text here...</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">&amp;lt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">/p</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">&amp;gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">code</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">pre</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><div class="language-css"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">--pre-padding-block</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">--pre-padding-inline</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">--pre-font-family</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">--pre-color</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">--pre-background</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">--pre-border-radius</span></span></code></pre></div></div></div><h2 id="list" tabindex="-1">List <a class="header-anchor" href="#list" aria-label="Permalink to “List”">​</a></h2><p>The lists use the default <code>&lt;ul&gt;</code>, <code>&lt;ol&gt;</code> and <code>&lt;dl&gt;</code> tags. Because the lists are usully design per website/situation, their is not too much custom properties for them.</p>`,3)),t(l,null,{default:n(()=>[...i[6]||(i[6]=[s("ul",null,[s("li",null,[s("p",null,"Coffee")]),s("li",null,[s("p",null,"Milk")]),s("li",null,[s("p",null,"...")])],-1),s("ol",null,[s("li",null,[s("p",null,"Make coffee")]),s("li",null,[s("p",null,"Add the milk")]),s("li",null,[s("p",null,"Drink it !")])],-1),s("dl",null,[s("dt",null,"Coffee"),s("dd",null,"Black hot drink"),s("dt",null,"Milk"),s("dd",null,"White cold drink")],-1)])]),_:1}),i[15]||(i[15]=a(`<div class="vp-code-group"><div class="tabs"><input type="radio" name="group-80" id="tab-81" checked><label data-title="html" for="tab-81">html</label><input type="radio" name="group-80" id="tab-82"><label data-title="css properties" for="tab-82">css properties</label></div><div class="blocks"><div class="language-html active"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">ul</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">li</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">p</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Coffee&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">p</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">li</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">li</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">p</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Milk&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">p</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">li</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">li</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">p</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;...&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">p</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">li</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">ul</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">ol</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">li</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">p</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Make coffee&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">p</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">li</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">li</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">p</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Add the milk&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">p</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">li</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">li</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">p</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Drink it !&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">p</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">li</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">ol</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">dl</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">dt</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Coffee&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">dt</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">dd</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Black hot drink&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">dd</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">dt</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Milk&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">dt</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">dd</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;White cold drink&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">dd</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">dl</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><div class="language-css"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">--list-bullet</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">--list-offset</span></span></code></pre></div></div></div><h2 id="break-line" tabindex="-1">Break line <a class="header-anchor" href="#break-line" aria-label="Permalink to “Break line”">​</a></h2><p>Use the default <code>&lt;hr&gt;</code> tag render a horizontal line.</p>`,3)),t(l,null,{default:n(()=>[...i[7]||(i[7]=[s("hr",null,null,-1)])]),_:1}),i[16]||(i[16]=a(`<div class="vp-code-group"><div class="tabs"><input type="radio" name="group-91" id="tab-92" checked><label data-title="html" for="tab-92">html</label><input type="radio" name="group-91" id="tab-93"><label data-title="css properties" for="tab-93">css properties</label></div><div class="blocks"><div class="language-html active"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">hr</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><div class="language-css"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">--hr-border-size</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">--hr-border-style</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">--hr-border-color</span></span></code></pre></div></div></div>`,1))]))}});export{o as __pageData,c as default};

package/public/assets/base_typography.md.DV-ikqGZ.lean.js

@@ -0,0 +1 @@
+import{C as l}from"./chunks/ComponentPreview.BW2s4ay5.js";import{o as k,c as p,ai as a,J as t,w as n,j as s,a as h}from"./chunks/framework.CaiDwmc7.js";/* empty css                                                                                */const o=JSON.parse('{"title":"Typography","description":"","frontmatter":{},"headers":[],"relativePath":"base/typography.md","filePath":"base/typography.md"}'),e={name:"base/typography.md"},c=Object.assign(e,{setup(E){return(d,i)=>(k(),p("div",null,[i[8]||(i[8]=a("",5)),t(l,null,{default:n(()=>[...i[0]||(i[0]=[s("h1",null,"Heading 1",-1),s("h2",null,"Heading 2",-1),s("h3",null,"Heading 3",-1),s("h4",null,"Heading 4",-1),s("h5",null,"Heading 5",-1),s("h6",null,"Heading 6",-1)])]),_:1}),i[9]||(i[9]=a("",4)),t(l,null,{default:n(()=>[...i[1]||(i[1]=[s("p",null," Lorem ipsum sit amet consectetur adipisicing elit. Quos consequatur omnis velit saepe suscipit? Ab ut assumenda nesciunt, veritatis beatae temporibus facilis quis earum vero officia explicabo veniam tempore voluptatibus? ",-1),s("p",null," Velit saepe suscipit? Ab ut assumenda nesciunt, veritatis beatae temporibus facilis quis earum vero officia explicabo veniam tempore voluptatibus? Lorem ipsum sit amet consectetur adipisicing elit. ",-1),s("p",null," Ab ut assumenda nesciunt, veritatis beatae temporibus facilis quis earum vero. ",-1)])]),_:1}),i[10]||(i[10]=a("",4)),t(l,null,{default:n(()=>[...i[2]||(i[2]=[s("a",{href:"#"},"Anchor",-1),h(),s("a",{href:"#","aria-current":"page"},"Active",-1),h(),s("a",null,"Disabled",-1),h(),s("a",{href:"#",target:"_blank",title:"This link opens in a new window","aria-label":"This link opens in a new window"},"Anchor",-1)])]),_:1}),i[11]||(i[11]=a("",2)),t(l,null,{default:n(()=>[...i[3]||(i[3]=[s("div",{class:"grid",style:{"--grid-columns":"3"}},[s("p",null,[s("abbr",{title:"Abbreviation"},"Abbr.")]),s("p",null,[s("small",null,"Small")]),s("p",null,[s("q",null,"An inline quote")]),s("p",null,[s("b",null,"Bold")]),s("p",null,[s("b",null,"b")]),s("p",null,[s("em",null,"Emphasis")]),s("p",null,[s("i",null,"Idiomatic")]),s("p",null,[s("s",null,"Strikethrough")]),s("p",null,[s("u",null,"Underline")]),s("p",null,[s("span",null,[h("Text "),s("sub",null,"Sub")])]),s("p",null,[s("span",null,[h("Text "),s("sup",null,"Sup")])]),s("p",null,[s("cite",null,"Citation")]),s("p",null,[s("mark",null,"Highlight")]),s("p",null,[s("kbd",null,"Ctrl + S")]),s("p",null,[s("code",null,"<Code>")]),s("p",null,[s("ins",null,"Inserted")]),s("p",null,[s("del",null,"Deleted")])],-1)])]),_:1}),i[12]||(i[12]=a("",3)),t(l,null,{default:n(()=>[...i[4]||(i[4]=[s("blockquote",null,[s("p",null," “It's only after we've lost everything that we're free to do anything.” "),s("footer",null,[h(" - Chuck Palahniuk, "),s("cite",null,"Fight Club")])],-1)])]),_:1}),i[13]||(i[13]=a("",3)),t(l,null,{default:n(()=>[...i[5]||(i[5]=[s("pre",null,[s("code",null,[h("<p>Sample text here...</p>"),s("br"),h("<p>And another line of sample text here...</p>")])],-1)])]),_:1}),i[14]||(i[14]=a("",3)),t(l,null,{default:n(()=>[...i[6]||(i[6]=[s("ul",null,[s("li",null,[s("p",null,"Coffee")]),s("li",null,[s("p",null,"Milk")]),s("li",null,[s("p",null,"...")])],-1),s("ol",null,[s("li",null,[s("p",null,"Make coffee")]),s("li",null,[s("p",null,"Add the milk")]),s("li",null,[s("p",null,"Drink it !")])],-1),s("dl",null,[s("dt",null,"Coffee"),s("dd",null,"Black hot drink"),s("dt",null,"Milk"),s("dd",null,"White cold drink")],-1)])]),_:1}),i[15]||(i[15]=a("",3)),t(l,null,{default:n(()=>[...i[7]||(i[7]=[s("hr",null,null,-1)])]),_:1}),i[16]||(i[16]=a("",1))]))}});export{o as __pageData,c as default};

package/public/assets/chunks/ComponentPreview.BW2s4ay5.js

@@ -0,0 +1,27 @@
+/* empty css                                                                         */import{_ as u,p as f,o as p,c as g,j as s,Q as y,r as _,G as v,y as n,h as c}from"./framework.CaiDwmc7.js";const k=["srcdoc"],b={__name:"ComponentPreview",props:{height:{type:String,default:null}},setup(d){const t=d;console.log(t);const o=n(null),a=n(""),r=n(null),i=c(()=>t.height?{height:t.height}:{});f(()=>{o.value&&(a.value=o.value.innerHTML.trim())});const m=c(()=>`
+        <!DOCTYPE html>
+        <html>
+            <head>
+                <meta charset="utf-8">
+                <link rel="stylesheet" href="/bundles/vanilla-frontend-doc.css">
+                <style>
+                    html[data-theme=light] .demo-theme {
+                        color: black;
+                        background: white
+                    }
+                    html[data-theme=dark] .demo-theme {
+                        color: white;
+                        background: black
+                    }
+                    body {
+                        padding:1rem;
+                    }
+
+                </style>
+            </head>
+            <body>
+                ${a.value}
+                <script src="/bundles/vanilla-frontend-doc.js"><\/script>
+            </body>
+        </html>
+    `),h=()=>{const e=r.value;!t.height&&e&&e.contentWindow&&setTimeout(()=>{const l=e.contentWindow.document.documentElement.offsetHeight;e.style.height=l+5+"px"},50)};return(e,l)=>(p(),g(v,null,[s("iframe",{ref_key:"iframeRef",ref:r,srcdoc:m.value,onLoad:h,class:"iframe-content",style:y(i.value)},null,44,k),s("div",{ref_key:"slotSource",ref:o,hidden:""},[_(e.$slots,"default",{},void 0,!0)],512)],64))}},C=u(b,[["__scopeId","data-v-eaa19fc4"]]);export{C};