Skip to content

Commit f3d4ba7

Browse files
author
teo.v
committed
Updates
1 parent 4134afa commit f3d4ba7

15 files changed

Lines changed: 51 additions & 51 deletions

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -83,8 +83,8 @@ html .active\:color\(--primary\):active,html .active\:color\(--primary\).\:activ
8383
.\>h1\:m\(20\)>h1{margin:20px;}
8484
.mt\(40\){margin-top:40px;}
8585
.p\(10\/20\){padding:10px 20px;}
86-
.p\(10\){padding:10px;}
8786
.p\(20\){padding:20px;}
87+
.p\(10\){padding:10px;}
8888
.p\(6\/8\){padding:6px 8px;}
8989
.p\(8\/12\){padding:8px 12px;}
9090
.p\(200\/32\){padding:200px 32px;}

_app/immutable/chunks/5-895e790c.js renamed to _app/immutable/chunks/5-25350273.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
import{default as t}from"../components/pages/changelogs/_page.svelte-8b865872.js";export{t as component};
1+
import{default as t}from"../components/pages/changelogs/_page.svelte-cae62f43.js";export{t as component};

_app/immutable/components/pages/changelogs/_page.svelte-8b865872.js renamed to _app/immutable/components/pages/changelogs/_page.svelte-cae62f43.js

Lines changed: 13 additions & 13 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

_app/immutable/start-e97a0996.js renamed to _app/immutable/start-8d4d100d.js

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎_app/version.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
{"version":"1696479013721"}
1+
{"version":"1696479072368"}

‎background.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515
<link rel="stylesheet" as="style" crossorigin href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css"/>
1616
<meta http-equiv="content-security-policy" content="">
1717
<link href="/adorable-css/_app/immutable/assets/_layout-91974e0a.css" rel="stylesheet">
18-
<link rel="modulepreload" href="/adorable-css/_app/immutable/start-e97a0996.js">
18+
<link rel="modulepreload" href="/adorable-css/_app/immutable/start-8d4d100d.js">
1919
<link rel="modulepreload" href="/adorable-css/_app/immutable/chunks/index-bc0b20f1.js">
2020
<link rel="modulepreload" href="/adorable-css/_app/immutable/chunks/singletons-199d898a.js">
2121
<link rel="modulepreload" href="/adorable-css/_app/immutable/components/pages/_layout.svelte-7cede11a.js">
@@ -48,13 +48,13 @@
4848
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. 배치
4949
<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>
5050
<script type="module" data-sveltekit-hydrate="1xzkkw0">
51-
import { start } from "/adorable-css/_app/immutable/start-e97a0996.js";
51+
import { start } from "/adorable-css/_app/immutable/start-8d4d100d.js";
5252

5353
start({
5454
env: {},
5555
paths: {"base":"/adorable-css","assets":"/adorable-css"},
5656
target: document.querySelector('[data-sveltekit-hydrate="1xzkkw0"]').parentNode,
57-
version: "1696479013721",
57+
version: "1696479072368",
5858
hydrate: {
5959
node_ids: [0, 3],
6060
data: [null,null],

‎cdn.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515
<link rel="stylesheet" as="style" crossorigin href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css"/>
1616
<meta http-equiv="content-security-policy" content="">
1717
<link href="/adorable-css/_app/immutable/assets/_layout-91974e0a.css" rel="stylesheet">
18-
<link rel="modulepreload" href="/adorable-css/_app/immutable/start-e97a0996.js">
18+
<link rel="modulepreload" href="/adorable-css/_app/immutable/start-8d4d100d.js">
1919
<link rel="modulepreload" href="/adorable-css/_app/immutable/chunks/index-bc0b20f1.js">
2020
<link rel="modulepreload" href="/adorable-css/_app/immutable/chunks/singletons-199d898a.js">
2121
<link rel="modulepreload" href="/adorable-css/_app/immutable/components/pages/_layout.svelte-7cede11a.js">
@@ -37,13 +37,13 @@
3737
<body>
3838
<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>
3939
<script type="module" data-sveltekit-hydrate="1ex5bkc">
40-
import { start } from "/adorable-css/_app/immutable/start-e97a0996.js";
40+
import { start } from "/adorable-css/_app/immutable/start-8d4d100d.js";
4141

4242
start({
4343
env: {},
4444
paths: {"base":"/adorable-css","assets":"/adorable-css"},
4545
target: document.querySelector('[data-sveltekit-hydrate="1ex5bkc"]').parentNode,
46-
version: "1696479013721",
46+
version: "1696479072368",
4747
hydrate: {
4848
node_ids: [0, 4],
4949
data: [null,null],

0 commit comments

Comments
 (0)