-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
21 lines (19 loc) · 7.5 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>LightWindCSS</title>
<script src="https://lightwindcss.github.io/LightWindCSS/src/index.js" lightwindsrc="https://raw.githubusercontent.com/LightWindCss/LightWindCSS/main/src/lightTheme.json"></script>
<script type="module" crossorigin>
(function(){const e=document.createElement("link").relList;if(e&&e.supports&&e.supports("modulepreload"))return;for(const r of document.querySelectorAll('link[rel="modulepreload"]'))i(r);new MutationObserver(r=>{for(const s of r)if(s.type==="childList")for(const a of s.addedNodes)a.tagName==="LINK"&&a.rel==="modulepreload"&&i(a)}).observe(document,{childList:!0,subtree:!0});function n(r){const s={};return r.integrity&&(s.integrity=r.integrity),r.referrerpolicy&&(s.referrerPolicy=r.referrerpolicy),r.crossorigin==="use-credentials"?s.credentials="include":r.crossorigin==="anonymous"?s.credentials="omit":s.credentials="same-origin",s}function i(r){if(r.ep)return;r.ep=!0;const s=n(r);fetch(r.href,s)}})();function k(){}function K(t){return t()}function z(){return Object.create(null)}function L(t){t.forEach(K)}function X(t){return typeof t=="function"}function Q(t,e){return t!=t?e==e:t!==e||t&&typeof t=="object"||typeof t=="function"}function R(t){return Object.keys(t).length===0}function l(t,e){t.appendChild(e)}function U(t,e,n){t.insertBefore(e,n||null)}function D(t){t.parentNode&&t.parentNode.removeChild(t)}function c(t){return document.createElement(t)}function V(t){return document.createTextNode(t)}function p(){return V(" ")}function q(t,e,n,i){return t.addEventListener(e,n,i),()=>t.removeEventListener(e,n,i)}function u(t,e,n){n==null?t.removeAttribute(e):t.getAttribute(e)!==n&&t.setAttribute(e,n)}function Y(t){return Array.from(t.childNodes)}let B;function E(t){B=t}const v=[],F=[],C=[],G=[],Z=Promise.resolve();let O=!1;function tt(){O||(O=!0,Z.then(J))}function j(t){C.push(t)}const N=new Set;let S=0;function J(){const t=B;do{for(;S<v.length;){const e=v[S];S++,E(e),et(e.$$)}for(E(null),v.length=0,S=0;F.length;)F.pop()();for(let e=0;e<C.length;e+=1){const n=C[e];N.has(n)||(N.add(n),n())}C.length=0}while(v.length);for(;G.length;)G.pop()();O=!1,N.clear(),E(t)}function et(t){if(t.fragment!==null){t.update(),L(t.before_update);const e=t.dirty;t.dirty=[-1],t.fragment&&t.fragment.p(t.ctx,e),t.after_update.forEach(j)}}const nt=new Set;function rt(t,e){t&&t.i&&(nt.delete(t),t.i(e))}function ot(t,e,n,i){const{fragment:r,after_update:s}=t.$$;r&&r.m(e,n),i||j(()=>{const a=t.$$.on_mount.map(K).filter(X);t.$$.on_destroy?t.$$.on_destroy.push(...a):L(a),t.$$.on_mount=[]}),s.forEach(j)}function it(t,e){const n=t.$$;n.fragment!==null&&(L(n.on_destroy),n.fragment&&n.fragment.d(e),n.on_destroy=n.fragment=null,n.ctx=[])}function st(t,e){t.$$.dirty[0]===-1&&(v.push(t),tt(),t.$$.dirty.fill(0)),t.$$.dirty[e/31|0]|=1<<e%31}function lt(t,e,n,i,r,s,a,x=[-1]){const f=B;E(t);const o=t.$$={fragment:null,ctx:[],props:s,update:k,not_equal:r,bound:z(),on_mount:[],on_destroy:[],on_disconnect:[],before_update:[],after_update:[],context:new Map(e.context||(f?f.$$.context:[])),callbacks:z(),dirty:x,skip_bound:!1,root:e.target||f.$$.root};a&&a(o.root);let h=!1;if(o.ctx=n?n(t,e.props||{},(d,g,...y)=>{const m=y.length?y[0]:g;return o.ctx&&r(o.ctx[d],o.ctx[d]=m)&&(!o.skip_bound&&o.bound[d]&&o.bound[d](m),h&&st(t,d)),g}):[],o.update(),h=!0,L(o.before_update),o.fragment=i?i(o.ctx):!1,e.target){if(e.hydrate){const d=Y(e.target);o.fragment&&o.fragment.l(d),d.forEach(D)}else o.fragment&&o.fragment.c();e.intro&&rt(t.$$.fragment),ot(t,e.target,e.anchor,e.customElement),J()}E(f)}class ct{$destroy(){it(this,1),this.$destroy=k}$on(e,n){if(!X(n))return k;const i=this.$$.callbacks[e]||(this.$$.callbacks[e]=[]);return i.push(n),()=>{const r=i.indexOf(n);r!==-1&&i.splice(r,1)}}$set(e){this.$$set&&!R(e)&&(this.$$.skip_bound=!0,this.$$set(e),this.$$.skip_bound=!1)}}function at(t){let e,n,i,r,s,a,x,f,o,h,d,g,y,m,I,_,b,W,w,M,T,A,P;return{c(){e=c("div"),n=c("div"),i=c("div"),r=c("div"),a=p(),x=c("header"),x.innerHTML='<h1 class="flex flex-direction>column font-weight>400 italic"><span class="font-size>1.7em font-weight>700">Welcome</span> to the LightWindCSS documentation!</h1>',f=p(),o=c("main"),h=c("h2"),h.textContent="Getting started!",d=p(),g=c("p"),g.textContent="Before start it could be cool to know what LightWindCSS is. So it's a interpreted class generator, you write classes with a config file of shortcuts and it generate a style tag with all of your style in the head of your document.",y=p(),m=c("p"),m.textContent="If you what to use it you can simply copy this line of code:",I=p(),_=c("div"),b=c("div"),b.innerHTML='<<span class="color>#fa8e8e">script</span> <span class="color>#fac68e">src</span>=<span class="color>#93fa8e">"https://lightwindcss.github.io/LightWindCSS/src/index.js"</span> <span class="color>#fac68e">lightwindsrc</span>=<span class="color>#93fa8e">"https://raw.githubusercontent.com/LightWindCss/LightWindCSS/main/src/lightTheme.json"</span>></<span class="color>#fa8e8e">script</span>>',W=p(),w=c("span"),w.innerHTML="<b>Copy</b>",M=p(),T=c("h2"),T.textContent="dsdfs",u(r,"class",s="relative w>100% h>"+t[0]+"px max-width>300px background>#E98EEA border-radius>0px_0px_10px_10px display>none sm:display>flex"),u(i,"class","absolute w>4px h>100% l>0"),u(b,"id","include"),u(b,"class","overflow>auto"),u(w,"class","p>10px background>#E98EEA border-radius>10px cursor>pointer"),u(_,"class","grid grid-template-columns>1fr_60px align-items>center gap>20px background>#422271 p>20px border-radius>20px w>calc(100%_-_65px)"),u(o,"class","pb>20px"),u(n,"class","w>calc(100%_-_50px) sm:w>calc(100%_-_250px) max-width>1000px absolute l>50% transform>translateX(-50%) h>100% pl>50px sm:pr>0px pr>50px"),u(e,"id","container")},m($,H){U($,e,H),l(e,n),l(n,i),l(i,r),l(n,a),l(n,x),l(n,f),l(n,o),l(o,h),l(o,d),l(o,g),l(o,y),l(o,m),l(o,I),l(o,_),l(_,b),l(_,W),l(_,w),l(o,M),l(o,T),A||(P=[q(w,"click",dt),q(e,"scroll",t[1]),q(e,"loadeddata",t[2])],A=!0)},p($,[H]){H&1&&s!==(s="relative w>100% h>"+$[0]+"px max-width>300px background>#E98EEA border-radius>0px_0px_10px_10px display>none sm:display>flex")&&u(r,"class",s)},i:k,o:k,d($){$&&D(e),A=!1,L(P)}}}function dt(){navigator.clipboard.writeText(document.getElementById("include").innerText)}function ut(t,e,n){let i=80;function r(){n(0,i=window.innerHeight*(document.getElementById("container").scrollTop/(document.querySelector("main").offsetHeight+document.querySelector("header").offsetHeight-window.innerHeight))+80),window.innerHeight<=i+150&&n(0,i=window.innerHeight)}return[i,r,()=>n(0,i=document.getElementById("container").scrollTop+80)]}class ft extends ct{constructor(e){super(),lt(this,e,ut,at,Q,{})}}new ft({target:document.getElementById("app")});
</script>
<style>
@import"https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap";*{font-family:Rubik,sans-serif;color:#f5f5f5}body{margin:0}h1>span:before,h2:before{content:"#";margin-right:10px;color:#e98eea}h2:before{content:"##"}#container{background:#633788;position:absolute;overflow:auto;top:0;left:0;width:100%;height:100%}#container::-webkit-scrollbar{width:0px}#include::-webkit-scrollbar{height:15px}#include::-webkit-scrollbar-thumb{background:rgb(255,255,255);border-top:10px solid #422271}
</style>
</head>
<body>
<div id="app"></div>
</body>
</html>