Skip to content

Commit

Permalink
docs: improve style asset performance
Browse files Browse the repository at this point in the history
  • Loading branch information
saadeghi committed Oct 11, 2023
1 parent b24b4df commit 2a46eeb
Show file tree
Hide file tree
Showing 9 changed files with 198 additions and 185 deletions.
85 changes: 0 additions & 85 deletions src/docs/src/components/Ads.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -113,88 +113,3 @@
</div>
</div>
{/if}

<style global>
#carbonads * {
margin: initial;
padding: initial;
}
#carbonads {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu,
Cantarell, "Helvetica Neue", Helvetica, Arial, sans-serif;
}
#carbonads {
display: flex;
max-width: 350px;
color: hsl(var(--bc));
background-color: hsl(var(--b2));
z-index: 100;
border-radius: 4px;
overflow: hidden;
}
#carbonads a {
color: inherit;
text-decoration: none;
}
#carbonads a:hover {
color: inherit;
}
#carbonads span {
position: relative;
display: block;
overflow: hidden;
}
#carbonads .carbon-wrap {
display: flex;
}
#carbonads .carbon-img {
display: block;
margin: 0;
line-height: 1;
}
#carbonads .carbon-img img {
display: block;
}
#carbonads .carbon-text {
font-size: 12px;
padding: 10px;
margin-bottom: 16px;
line-height: 1.3;
text-align: left;
}
#carbonads .carbon-poweredby {
display: block;
padding: 6px 8px;
background: hsl(var(--b3));
text-align: center;
text-transform: uppercase;
letter-spacing: 0.5px;
font-weight: 600;
font-size: 8px;
line-height: 1;
border-top-left-radius: 3px;
position: absolute;
bottom: 0;
right: 0;
}
@media only screen and (min-width: 1280px) {
.carbon-text {
font-size: 12px;
padding: 8px 10px 4px 10px;
}
.carbonads-responsive #carbonads {
max-width: 130px;
}
.carbonads-responsive #carbonads .carbon-wrap {
flex-direction: column;
}
.carbonads-responsive #carbonads .carbon-poweredby {
position: absolute;
right: 0;
bottom: 0;
text-align: center;
border-radius: 0;
border-top-left-radius: 3px;
}
}
</style>
58 changes: 0 additions & 58 deletions src/docs/src/components/Search.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -87,61 +87,3 @@
{/if}
</div>
</label>

<style global>
.searchbox.searchbox [data-svelte-typeahead][data-svelte-typeahead] {
background-color: transparent;
width: 100%;
max-width: 100%;
}
[data-svelte-search][data-svelte-search] label {
display: none;
}
[data-svelte-search][data-svelte-search] input {
background-color: transparent;
color: inherit;
border: 2px solid transparent;
border-radius: var(--rounded-btn);
padding-left: 2.5em;
}
[data-svelte-search][data-svelte-search] input::placeholder {
color: inherit;
}
[data-svelte-search][data-svelte-search] input:focus {
outline: none;
outline-offset: 0;
border: 2px solid hsl(var(--bc) / 0.2);
background-color: hsl(var(--b1));
color: hsl(var(--bc));
}
[data-svelte-typeahead][data-svelte-typeahead].dropdown[aria-expanded="true"]
.svelte-typeahead-list {
transform: translateY(0.5em);
background: hsl(var(--b1) / 0.99);
border: 0 solid hsl(var(--bc) / 0.2);
border-radius: var(--rounded-box);
overflow: hidden;
padding: 0.5rem;
backdrop-filter: blur(1rem);
margin-top: 0.5rem;
box-shadow:
rgba(50, 50, 93, 0.25) 0px 13px 27px -5px,
rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
}
[data-svelte-typeahead][data-svelte-typeahead] .svelte-typeahead-list .selected,
[data-svelte-typeahead][data-svelte-typeahead] .svelte-typeahead-list .selected:hover {
background: hsl(var(--n));
color: hsl(var(--nc));
}
[data-svelte-typeahead][data-svelte-typeahead] .svelte-typeahead-list li {
color: hsl(var(--bc));
border-radius: var(--rounded-btn);
}
[data-svelte-typeahead][data-svelte-typeahead] .svelte-typeahead-list li:hover {
background: hsl(var(--b2));
color: hsl(var(--bc));
}
[data-svelte-typeahead][data-svelte-typeahead] .svelte-typeahead-list li:not(:last-of-type) {
border-bottom: none;
}
</style>
1 change: 1 addition & 0 deletions src/docs/src/components/StyleDevelopment.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -9,4 +9,5 @@
const utilitiesUnstyled = import.meta.glob("../../../utilities/unstyled/*.css", { eager: true })
const utilitiesStyled = import.meta.glob("../../../utilities/styled/*.css", { eager: true })
import "tailwindcss/utilities.css"
import "../global.css"
</script>
1 change: 1 addition & 0 deletions src/docs/src/components/StyleProduction.svelte
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
<script>
import "tailwindcss/tailwind.css"
import "../global.css"
</script>
175 changes: 175 additions & 0 deletions src/docs/src/global.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,175 @@
/* carbon */
#carbonads * {
margin: initial;
padding: initial;
}
#carbonads {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell,
"Helvetica Neue", Helvetica, Arial, sans-serif;
}
#carbonads {
display: flex;
max-width: 350px;
color: hsl(var(--bc));
background-color: hsl(var(--b2));
z-index: 100;
border-radius: 4px;
overflow: hidden;
}
#carbonads a {
color: inherit;
text-decoration: none;
}
#carbonads a:hover {
color: inherit;
}
#carbonads span {
position: relative;
display: block;
overflow: hidden;
}
#carbonads .carbon-wrap {
display: flex;
}
#carbonads .carbon-img {
display: block;
margin: 0;
line-height: 1;
}
#carbonads .carbon-img img {
display: block;
}
#carbonads .carbon-text {
font-size: 12px;
padding: 10px;
margin-bottom: 16px;
line-height: 1.3;
text-align: left;
}
#carbonads .carbon-poweredby {
display: block;
padding: 6px 8px;
background: hsl(var(--b3));
text-align: center;
text-transform: uppercase;
letter-spacing: 0.5px;
font-weight: 600;
font-size: 8px;
line-height: 1;
border-top-left-radius: 3px;
position: absolute;
bottom: 0;
right: 0;
}
@media only screen and (min-width: 1280px) {
.carbon-text {
font-size: 12px;
padding: 8px 10px 4px 10px;
}
.carbonads-responsive #carbonads {
max-width: 130px;
}
.carbonads-responsive #carbonads .carbon-wrap {
flex-direction: column;
}
.carbonads-responsive #carbonads .carbon-poweredby {
position: absolute;
right: 0;
bottom: 0;
text-align: center;
border-radius: 0;
border-top-left-radius: 3px;
}
}

/* search */
.searchbox.searchbox [data-svelte-typeahead][data-svelte-typeahead] {
background-color: transparent;
width: 100%;
max-width: 100%;
}
[data-svelte-search][data-svelte-search] label {
display: none;
}
[data-svelte-search][data-svelte-search] input {
background-color: transparent;
color: inherit;
border: 2px solid transparent;
border-radius: var(--rounded-btn);
padding-left: 2.5em;
}
[data-svelte-search][data-svelte-search] input::placeholder {
color: inherit;
}
[data-svelte-search][data-svelte-search] input:focus {
outline: none;
outline-offset: 0;
border: 2px solid hsl(var(--bc) / 0.2);
background-color: hsl(var(--b1));
color: hsl(var(--bc));
}
[data-svelte-typeahead][data-svelte-typeahead].dropdown[aria-expanded="true"]
.svelte-typeahead-list {
transform: translateY(0.5em);
background: hsl(var(--b1) / 0.99);
border: 0 solid hsl(var(--bc) / 0.2);
border-radius: var(--rounded-box);
overflow: hidden;
padding: 0.5rem;
backdrop-filter: blur(1rem);
margin-top: 0.5rem;
box-shadow:
rgba(50, 50, 93, 0.25) 0px 13px 27px -5px,
rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
}
[data-svelte-typeahead][data-svelte-typeahead] .svelte-typeahead-list .selected,
[data-svelte-typeahead][data-svelte-typeahead] .svelte-typeahead-list .selected:hover {
background: hsl(var(--n));
color: hsl(var(--nc));
}
[data-svelte-typeahead][data-svelte-typeahead] .svelte-typeahead-list li {
color: hsl(var(--bc));
border-radius: var(--rounded-btn);
}
[data-svelte-typeahead][data-svelte-typeahead] .svelte-typeahead-list li:hover {
background: hsl(var(--b2));
color: hsl(var(--bc));
}
[data-svelte-typeahead][data-svelte-typeahead] .svelte-typeahead-list li:not(:last-of-type) {
border-bottom: none;
}

/* prose */
.prose code[class*="language-"],
.code-wrapper code[class*="language-"],
code[class*="language-"],
pre[class*="language-"] {
background: unset;
}
.prose pre[class*="language-"] {
max-width: clamp(20rem, calc(100vw - 4rem), 80ch);
background-color: hsl(var(--n));
color: hsl(var(--nc));
::selection {
background-color: hsl(var(--nc));
color: hsl(var(--n));
}
}
@media (min-width: 1024px) {
.prose pre[class*="language-"] {
max-width: clamp(20rem, calc(100vw - 20rem - 4rem), 80ch);
}
}
@media (min-width: 1280px) {
.prose pre[class*="language-"] {
max-width: clamp(20rem, calc(100vw - 20rem - 4rem - 8rem), 80ch);
}
}

/* changelog */
.changelog-body h1#changelog + p {
display: none;
}
.changelog-body img {
@apply rounded-box border-base-content/10 border;
}
40 changes: 10 additions & 30 deletions src/docs/src/routes/(docs)/+layout.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -60,9 +60,17 @@
</script>

<svelte:head>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
media="screen and (min-width: 520px)"
rel="preconnect"
href="https://fonts.googleapis.com" />
<link
media="screen and (min-width: 520px)"
rel="preconnect"
href="https://fonts.gstatic.com"
crossorigin />
<link
media="screen and (min-width: 520px)"
href="https://fonts.googleapis.com/css2?family=Figtree:wght@300;900&family=Noto+Sans+JP:wght@300;900&family=Noto+Sans:wght@300;900&display=swap"
rel="stylesheet" />
</svelte:head>
Expand Down Expand Up @@ -142,31 +150,3 @@
{/if}

<Scripts />

<style global>
.prose code[class*="language-"],
.code-wrapper code[class*="language-"],
code[class*="language-"],
pre[class*="language-"] {
background: unset;
}
.prose pre[class*="language-"] {
max-width: clamp(20rem, calc(100vw - 4rem), 80ch);
background-color: hsl(var(--n));
color: hsl(var(--nc));
::selection {
background-color: hsl(var(--nc));
color: hsl(var(--n));
}
}
@media (min-width: 1024px) {
.prose pre[class*="language-"] {
max-width: clamp(20rem, calc(100vw - 20rem - 4rem), 80ch);
}
}
@media (min-width: 1280px) {
.prose pre[class*="language-"] {
max-width: clamp(20rem, calc(100vw - 20rem - 4rem - 8rem), 80ch);
}
}
</style>
Loading

0 comments on commit 2a46eeb

Please sign in to comment.