Skip to content

Commit

Permalink
perf: add img preflight styles into base layer.
Browse files Browse the repository at this point in the history
- refactor(docs): remove some useless comments in base style docs.
  • Loading branch information
riccox committed Jun 23, 2023
1 parent 9fd917f commit 57e2b87
Show file tree
Hide file tree
Showing 4 changed files with 60 additions and 18 deletions.
29 changes: 29 additions & 0 deletions apps/experiments/src/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -3197,5 +3197,34 @@ <h2 class="text-xl">Pulse</h2>
</div>
</div>
</div>
<div class="grid grid-cols-1 gap-4 p-4 has-border rounded-xl">
<h1 class="text-3xl col-span-full">Image</h1>
<div class="">
<h2 class="text-xl">Layout</h2>
<div class="flex flex-wrap gap-4">
<img
class="h-48 w-96"
src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1024&h=1280&q=80"
></img>
<img
class="h-48 w-96 object-cover"
src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1024&h=1280&q=80"
></img>
<img
class="h-48 w-96 object-fill"
src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1024&h=1280&q=80"
></img>
<img
class="h-48 w-96 object-scale-down"
src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1024&h=1280&q=80"
></img>
<img
class="h-48 w-96 object-none"
src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1024&h=1280&q=80"
></img>
</div>
</div>

</div>
</body>
</html>
17 changes: 11 additions & 6 deletions apps/website/pages/docs/base/styles.en.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -86,12 +86,12 @@ kbd {
border-width: 1px;
height: fit-content;

padding-left: 0.5rem /* 8px */;
padding-right: 0.5rem /* 8px */;
padding-left: 0.5rem /* 8px */;
padding-right: 0.5rem /* 8px */;
font-size: 0.75rem /* 12px */;
line-height: 1rem /* 16px */;
padding-left: 0.5rem;
padding-right: 0.5rem;
padding-left: 0.5rem;
padding-right: 0.5rem;
font-size: 0.75rem;
line-height: 1rem;

--tw-shadow: 0px 1.5px 0px rgba(0, 0, 0, 0.1);
--tw-shadow-colored: 0px 1.5px 0px var(--tw-shadow-color);
Expand All @@ -102,4 +102,9 @@ kbd {
--tw-bg-opacity: 1;
background-color: rgba(var(--sira-colors-bw-300), var(--tw-bg-opacity));
}

img {
border-radius: 0.5rem;
object-fit: cover;
}
```
16 changes: 10 additions & 6 deletions apps/website/pages/docs/base/styles.zh.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -85,12 +85,12 @@ kbd {
border-width: 1px;
height: fit-content;

padding-left: 0.5rem /* 8px */;
padding-right: 0.5rem /* 8px */;
padding-left: 0.5rem /* 8px */;
padding-right: 0.5rem /* 8px */;
font-size: 0.75rem /* 12px */;
line-height: 1rem /* 16px */;
padding-left: 0.5rem;
padding-right: 0.5rem;
padding-left: 0.5rem;
padding-right: 0.5rem;
font-size: 0.75rem;
line-height: 1rem;

--tw-shadow: 0px 1.5px 0px rgba(0, 0, 0, 0.1);
--tw-shadow-colored: 0px 1.5px 0px var(--tw-shadow-color);
Expand All @@ -101,4 +101,8 @@ kbd {
--tw-bg-opacity: 1;
background-color: rgba(var(--sira-colors-bw-300), var(--tw-bg-opacity));
}
img {
border-radius: 0.5rem;
object-fit: cover;
}
```
16 changes: 10 additions & 6 deletions packages/tailwind/src/style/base/base.css
Original file line number Diff line number Diff line change
Expand Up @@ -82,12 +82,12 @@ kbd {
border-width: 1px;
height: fit-content;

padding-left: 0.5rem /* 8px */;
padding-right: 0.5rem /* 8px */;
padding-left: 0.5rem /* 8px */;
padding-right: 0.5rem /* 8px */;
font-size: 0.75rem /* 12px */;
line-height: 1rem /* 16px */;
padding-left: 0.5rem;
padding-right: 0.5rem;
padding-left: 0.5rem;
padding-right: 0.5rem;
font-size: 0.75rem;
line-height: 1rem;

--tw-shadow: 0px 1.5px 0px rgba(0, 0, 0, 0.1);
--tw-shadow-colored: 0px 1.5px 0px var(--tw-shadow-color);
Expand All @@ -98,3 +98,7 @@ kbd {
--tw-bg-opacity: 1;
background-color: rgba(var(--sira-colors-bw-300), var(--tw-bg-opacity));
}

img {
@apply rounded-lg object-cover;
}

0 comments on commit 57e2b87

Please sign in to comment.