Updates

_app/immutable/assets/_layout-91974e0a.css

@@ -119,13 +119,13 @@ html .active\:bg\(\#000\):active,html .active\:bg\(\#000\).\:active{background-c
 .pre{white-space:pre-wrap;}
 .nowrap\.\.\.{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;flex-shrink:1;max-width:100%;}
 .line-clamp\(3\){display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
-.hbox{display:flex;flex-flow:row;align-items:center;}:where(.hbox>*){flex-shrink:0;--w-grow:1;--w-align:initial;--h-grow:initial;--h-align:stretch;}
-.hbox\(top\+center\){display:flex;flex-flow:row;align-items:flex-start;justify-content:center;}:where(.hbox\(top\+center\)>*){flex-shrink:0;--w-grow:1;--w-align:initial;--h-grow:initial;--h-align:stretch;}
-.hbox\(bottom\+right\){display:flex;flex-flow:row;align-items:flex-end;justify-content:flex-end;}:where(.hbox\(bottom\+right\)>*){flex-shrink:0;--w-grow:1;--w-align:initial;--h-grow:initial;--h-align:stretch;}
-.hbox\(fill\){display:flex;flex-flow:row;align-items:stretch;}:where(.hbox\(fill\)>*){flex-shrink:0;--w-grow:1;--w-align:initial;--h-grow:initial;--h-align:stretch;}
-.vbox{display:flex;flex-flow:column;align-items:stretch;}:where(.vbox>*){flex-shrink:0;--w-grow:initial;--w-align:stretch;--h-grow:1;--h-align:initial;}
-.vbox\(center\){display:flex;flex-flow:column;align-items:center;}:where(.vbox\(center\)>*){flex-shrink:0;--w-grow:initial;--w-align:stretch;--h-grow:1;--h-align:initial;}
-.pack{display:flex;align-items:center;justify-content:center;}:where(.pack>*){flex-shrink:0;--w-grow:1;--w-align:initial;--h-grow:initial;--h-align:stretch;}
+.hbox{display:flex;flex-flow:row;align-items:center;}:where(.hbox>*){flex-shrink:0;--w-grow:1;--w-shrink:1;--w-align:initial;--h-grow:initial;--h-shrink:0;--h-align:stretch;}
+.hbox\(top\+center\){display:flex;flex-flow:row;align-items:flex-start;justify-content:center;}:where(.hbox\(top\+center\)>*){flex-shrink:0;--w-grow:1;--w-shrink:1;--w-align:initial;--h-grow:initial;--h-shrink:0;--h-align:stretch;}
+.hbox\(bottom\+right\){display:flex;flex-flow:row;align-items:flex-end;justify-content:flex-end;}:where(.hbox\(bottom\+right\)>*){flex-shrink:0;--w-grow:1;--w-shrink:1;--w-align:initial;--h-grow:initial;--h-shrink:0;--h-align:stretch;}
+.hbox\(fill\){display:flex;flex-flow:row;align-items:stretch;}:where(.hbox\(fill\)>*){flex-shrink:0;--w-grow:1;--w-shrink:1;--w-align:initial;--h-grow:initial;--h-shrink:0;--h-align:stretch;}
+.vbox{display:flex;flex-flow:column;align-items:stretch;}:where(.vbox>*){flex-shrink:0;--h-grow:1;--h-shrink:1;--h-align:initial;--w-grow:initial;--w-shrink:0;--w-align:stretch;}
+.vbox\(center\){display:flex;flex-flow:column;align-items:center;}:where(.vbox\(center\)>*){flex-shrink:0;--h-grow:1;--h-shrink:1;--h-align:initial;--w-grow:initial;--w-shrink:0;--w-align:stretch;}
+.pack{display:flex;align-items:center;justify-content:center;}:where(.pack>*){flex-shrink:0;--w-grow:1;--w-shrink:1;--w-align:initial;--h-grow:initial;--h-shrink:0;--h-align:stretch;}
 .gap\(20\){gap:20px;grid-gap:20px;}
 .gap\(40\){gap:40px;grid-gap:40px;}
 .gap\(60\){gap:60px;grid-gap:60px;}

_app/immutable/chunks/10-d50716fb.js → _app/immutable/chunks/10-3c96cccd.js

@@ -1 +1 @@
-import{default as t}from"../components/pages/tutorial/_page.svelte-e0d2253b.js";export{t as component};
+import{default as t}from"../components/pages/tutorial/_page.svelte-fa2a7ede.js";export{t as component};

_app/immutable/chunks/4-579545b5.js

@@ -0,0 +1 @@
+import{default as t}from"../components/pages/cdn/_page.svelte-e1a95b3e.js";export{t as component};

_app/immutable/chunks/5-f65864b1.js → _app/immutable/chunks/5-2cb78673.js

@@ -1 +1 @@
-import{default as t}from"../components/pages/changelogs/_page.svelte-5c05bfc4.js";export{t as component};
+import{default as t}from"../components/pages/changelogs/_page.svelte-4c161f05.js";export{t as component};

_app/immutable/chunks/9-b2f787c8.js

@@ -0,0 +1 @@
+import{default as t}from"../components/pages/test/_page.svelte-215d7a1b.js";export{t as component};

_app/immutable/components/pages/tutorial/_page.svelte-e0d2253b.js → _app/immutable/components/pages/tutorial/_page.svelte-fa2a7ede.js

@@ -1,4 +1,4 @@
-import{S as ae,i as re,s as de,e as g,c as u,b as x,f as p,o as h,h as K,n as W,M as ce,Q as G,R as pe,a as F,u as fe,t as ne,g as B,v as be,m as te,d as ve,T as R,j as c,w as ge,r as Q,U as ue,k as me,x as we,y as xe,V as ye,z as ke,G as _e}from"../../../chunks/index-bc0b20f1.js";import{r as Se,g as Te,p as Re}from"../../../chunks/atomizer-ba46a83e.js";function ie(e){return(e==null?void 0:e.length)!==void 0?e:Array.from(e)}const oe=`
+import{S as ae,i as re,s as de,e as g,c as u,b as x,f as p,o as h,h as K,n as W,M as ce,Q as G,R as pe,a as F,u as fe,t as ne,g as B,v as be,m as te,d as ve,T as R,j as c,w as ge,r as Q,U as ue,k as me,x as we,y as xe,V as ye,z as ke,G as _e}from"../../../chunks/index-bc0b20f1.js";import{r as Se,g as Te,p as Re}from"../../../chunks/atomizer-a2d77553.js";function ie(e){return(e==null?void 0:e.length)!==void 0?e:Array.from(e)}const oe=`
 <!--
 ฅ^•ﻌ•^ฅ ♥
 

_app/version.json

@@ -1 +1 @@
-{"version":"1696495975531"}
+{"version":"1696496702862"}

background.html

@@ -15,7 +15,7 @@
   <link rel="stylesheet" as="style" crossorigin href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css"/>
   <meta http-equiv="content-security-policy" content="">
 		<link href="/adorable-css/_app/immutable/assets/_layout-91974e0a.css" rel="stylesheet">
-		<link rel="modulepreload" href="/adorable-css/_app/immutable/start-108b9f30.js">
+		<link rel="modulepreload" href="/adorable-css/_app/immutable/start-c5f5a67f.js">
 		<link rel="modulepreload" href="/adorable-css/_app/immutable/chunks/index-bc0b20f1.js">
 		<link rel="modulepreload" href="/adorable-css/_app/immutable/chunks/singletons-199d898a.js">
 		<link rel="modulepreload" href="/adorable-css/_app/immutable/components/pages/_layout.svelte-7cede11a.js">
@@ -48,13 +48,13 @@
 flexbox를 다루다보면 정말 헷갈리는 속성들! 조금더 쉽게 다룰 수는 없을까?</p></blockquote> <p data-svelte-h="svelte-8zxaq7">이러한 문법은 가장 많이쓰는 디자인 핸드오프 툴인 figma에서 영감을 받아 AutoLayout과 유사한 형태로 작성할 수 있게 하여 간결함과 생산성을 높였습니다.</p> <blockquote data-svelte-h="svelte-1vjckc2"><h4>flexbox와 figma의 AutoLayout</h4> <ol><li>방향 2. gap, 3. padding, 4. 배치
 <img src="https://velog.velcdn.com/images%2Fteo%2Fpost%2F167167a9-da4b-4063-a6dc-e34a69c59f10%2F%E1%84%92%E1%85%AA%E1%84%86%E1%85%A7%E1%86%AB%20%E1%84%80%E1%85%B5%E1%84%85%E1%85%A9%E1%86%A8%202021-12-05%20%E1%84%8B%E1%85%A9%E1%84%8C%E1%85%A5%E1%86%AB%201.48.44.mov.gif"></li></ol></blockquote> <p data-svelte-h="svelte-3f3k67"><img src="https://velog.velcdn.com/images/teo/post/8a00bb36-16d7-4d23-bd03-ae26f70838c4/image.png"></p> <h3 data-svelte-h="svelte-1t8rg7m">편리한 Positioning Layer</h3> <p data-svelte-h="svelte-xwdcwi">뿐만 아니라 absolute나 fixed를 이용한 배치의 경우도 빈번이 일어나는데 <code>top:0; left:0; right:0; bottom:0; width:100%; height:100%</code> 와 같은 배치구문들도 보다 직관적인 방식을 제공하여 훨씬 던 간결하면서도 생산성 있는 문법을 제공하였습니다.</p> <p data-svelte-h="svelte-1jdqj8j"><img src="https://velog.velcdn.com/images/teo/post/f1066bd9-00da-4c2f-b12f-924bafae69a8/image.png"></p> <h3 data-svelte-h="svelte-sf9clt">그밖에 더 많은 기능들</h3> <p data-svelte-h="svelte-bio7be">그밖에도 여러가지 진보된 AtomicCSS의 기조를 따르면서도 불편했었던 많은 부분들을 수정, 보완하는 방법들을 추가하였습니다.</p> <p data-svelte-h="svelte-19lckal">TailwindCSS를 하다보면 TailwindCSS로 할 수 없는 상황이 나오곤 했습니다. class선택자나 자식 선택자나 복잡한 셀렉터를 써야 하는 경우도 마찬가지였습니다. 기본적으로 CSS에서 제공하는 모든 기능들을 제공하려고 하였습니다.</p> <blockquote data-svelte-h="svelte-1h4yg6o"><h4>All-in-one package!</h4> <ol><li>모든 CSS Property 사용 가능</li> <li>:nth-child, ::after등 모든 pseudo 사용 가능</li> <li>모든 Selector 사용 가능</li> <li>모든 Media Query 사용 가능 (예정, 현재는 width만 제공하고 있습니다.)</li></ol></blockquote> <p data-svelte-h="svelte-1xtdd84">뿐만 아니라 적게쓰고 짧게 축약하면서도 직관적으로 다 담을 수 있도록 만들어 보았습니다.</p> <blockquote data-svelte-h="svelte-cgg6o3"><h4>기타 센스 있는 문법들</h4> <ul><li><code>w(32~100%)</code> = min-width: 32px; max-width: 100%;</li> <li><code>font(16/1.5/-1%)</code> = font-size, line-height, letter-spacing</li> <li><code>c(--primary)</code> = color: var(—primary)</li> <li><code>@w(~768)</code>: <code>@media max-width(768) { ... }</code></li> <li><code>nowarp...</code> = 말줄임…</li></ul></blockquote> <h3 data-svelte-h="svelte-rik7f7">내가 편하면 남들도 편하다!</h3> <p data-svelte-h="svelte-132yszi">라는 생각으로 만들어진 AdorableCSS는 누구나 쉽게 쓸 수 있도록 만들어졌습니다.</p> <p data-svelte-h="svelte-tolwz3">사용해 본 사람은 알겠지만 tailwindCSS는 사용하기 쉽지만 익숙해지기까지는 시간이 필요합니다.</p> <p data-svelte-h="svelte-qywpjc">그러나 AdorableCSS는 tailwindCSS와 비슷한 문법을 제공하면서도 더 직관적이고 익숙한 문법을 제공하고 있습니다.</p> <p data-svelte-h="svelte-ot7ajp">tailwindCSS보다 할 수 있는 것이 더 많으면서도 훨씬 더 직관적이며 손이 덜 가는 문법을 제공하고 있습니다.</p> <p data-svelte-h="svelte-7qszjd">AdorableCSS와 함께 ‘이렇게도 CSS를 편하게 사용할 수 있구나!’ 하는 멋진 경험을 한번 해보시기 바랍니다.</p> <p data-svelte-h="svelte-qia825">감사합니다.</p></div></div> <div class="version fixed z(9999) layer(bottom+right) p(10/20) font(10) c(#999)" aria-hidden="true"> 1.3.0</div> 
 		<script type="module" data-sveltekit-hydrate="1xzkkw0">
-			import { start } from "/adorable-css/_app/immutable/start-108b9f30.js";
+			import { start } from "/adorable-css/_app/immutable/start-c5f5a67f.js";
 
 			start({
 				env: {},
 				paths: {"base":"/adorable-css","assets":"/adorable-css"},
 				target: document.querySelector('[data-sveltekit-hydrate="1xzkkw0"]').parentNode,
-				version: "1696495975531",
+				version: "1696496702862",
 				hydrate: {
 					node_ids: [0, 3],
 					data: [null,null],

cdn.html

@@ -15,15 +15,15 @@
   <link rel="stylesheet" as="style" crossorigin href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css"/>
   <meta http-equiv="content-security-policy" content="">
 		<link href="/adorable-css/_app/immutable/assets/_layout-91974e0a.css" rel="stylesheet">
-		<link rel="modulepreload" href="/adorable-css/_app/immutable/start-108b9f30.js">
+		<link rel="modulepreload" href="/adorable-css/_app/immutable/start-c5f5a67f.js">
 		<link rel="modulepreload" href="/adorable-css/_app/immutable/chunks/index-bc0b20f1.js">
 		<link rel="modulepreload" href="/adorable-css/_app/immutable/chunks/singletons-199d898a.js">
 		<link rel="modulepreload" href="/adorable-css/_app/immutable/components/pages/_layout.svelte-7cede11a.js">
 		<link rel="modulepreload" href="/adorable-css/_app/immutable/chunks/stores-84d51be6.js">
 		<link rel="modulepreload" href="/adorable-css/_app/immutable/modules/pages/_layout.ts-9cbb603b.js">
 		<link rel="modulepreload" href="/adorable-css/_app/immutable/chunks/_layout-da46b06b.js">
-		<link rel="modulepreload" href="/adorable-css/_app/immutable/components/pages/cdn/_page.svelte-4fd0dbce.js">
-		<link rel="modulepreload" href="/adorable-css/_app/immutable/chunks/atomizer-ba46a83e.js">
+		<link rel="modulepreload" href="/adorable-css/_app/immutable/components/pages/cdn/_page.svelte-e1a95b3e.js">
+		<link rel="modulepreload" href="/adorable-css/_app/immutable/chunks/atomizer-a2d77553.js">
   <script async src="https://www.googletagmanager.com/gtag/js?id=G-ZV4FB601YT"></script>
   <script>
   window.dataLayer = window.dataLayer || []
@@ -37,13 +37,13 @@
 <body>
 <div id="svelte">  <div class="vbox"><div class="relative hbox space-between h(60) gap(20) p(10/20) sticky-top bg(#fff) bb(#000.1) z(999) >>a:hover:c(--primary) >>a.active:c(--primary) scroll-x"><a href="/adorable-css/" class="pack font(20/-/-10%) pointer AppleSD" data-svelte-h="svelte-1pu47t9">^•ﻌ•^ฅ</a> <div class="hbox gap(20)"><a href="/adorable-css/background" data-svelte-h="svelte-c727qv">왜 만들었나요?</a> <a href="/adorable-css/guide" data-svelte-h="svelte-10mixkq">가이드</a> <a href="/adorable-css/docs" data-svelte-h="svelte-1sco1eh">문서</a> <a href="/adorable-css/tutorial" data-svelte-h="svelte-rlq5lo">✨ 튜토리얼</a> <a href="/adorable-css/changelogs" data-svelte-h="svelte-16vt69p">✨ ChangeLog</a> <a href="/adorable-css/reference" data-svelte-h="svelte-14njj80">Reference</a> <a target="_blank" href="https://velog.io/@teo/series/AdorableCSS" data-svelte-h="svelte-13z2g4i">블로그</a> <a target="_blank" href="https://github.com/developer-1px/adorable-css/issues" data-svelte-h="svelte-1tpgna0">기능 제안</a></div> <div class="hbox gap(20)" data-svelte-h="svelte-woofac"><a class="pack" href="https://www.youtube.com/watch?v=RUJTkFR1jko&list=PLiyB-5pV363Q2_itR2K2FIr6qe3kNW1TL&index=7" target="_blank" aria-label="youtube"><svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="32" height="32" viewBox="0 0 48 48" style="fill:#000;"><path fill="#FF3D00" d="M43.2,33.9c-0.4,2.1-2.1,3.7-4.2,4c-3.3,0.5-8.8,1.1-15,1.1c-6.1,0-11.6-0.6-15-1.1c-2.1-0.3-3.8-1.9-4.2-4C4.4,31.6,4,28.2,4,24c0-4.2,0.4-7.6,0.8-9.9c0.4-2.1,2.1-3.7,4.2-4C12.3,9.6,17.8,9,24,9c6.2,0,11.6,0.6,15,1.1c2.1,0.3,3.8,1.9,4.2,4c0.4,2.3,0.9,5.7,0.9,9.9C44,28.2,43.6,31.6,43.2,33.9z"></path><path fill="#FFF" d="M20 31L20 17 32 24z"></path></svg></a> <a class="pack" href="https://github.com/developer-1px/adorable-css" target="_blank" aria-label="github"><svg width="24" height="24" viewBox="0 0 16 16" fill="currentColor"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.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.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a></div></div> <div id="test c(red) font(100) p(10)" data-svelte-h="svelte-h83w1p">cdn no vite!</div></div> <div class="version fixed z(9999) layer(bottom+right) p(10/20) font(10) c(#999)" aria-hidden="true"> 1.3.0</div> 
 		<script type="module" data-sveltekit-hydrate="1ex5bkc">
-			import { start } from "/adorable-css/_app/immutable/start-108b9f30.js";
+			import { start } from "/adorable-css/_app/immutable/start-c5f5a67f.js";
 
 			start({
 				env: {},
 				paths: {"base":"/adorable-css","assets":"/adorable-css"},
 				target: document.querySelector('[data-sveltekit-hydrate="1ex5bkc"]').parentNode,
-				version: "1696495975531",
+				version: "1696496702862",
 				hydrate: {
 					node_ids: [0, 4],
 					data: [null,null],