Skip to content

Simplify css #231

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 6 commits into from
Oct 3, 2024
Merged

Simplify css #231

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
85557b1
simplify
Rich-Harris Oct 3, 2024
5741a55
more
Rich-Harris Oct 3, 2024
b6568aa
more
Rich-Harris Oct 3, 2024
e3fb1df
banish --sk-text-m
Rich-Harris Oct 3, 2024
2fe8376
more
Rich-Harris Oct 3, 2024
30ca232
more
Rich-Harris Oct 3, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 0 additions & 1 deletion apps/svelte.dev/src/routes/(authed)/apps/+page.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -247,7 +247,6 @@

h2 {
color: var(--sk-text-2);
font-size: var(--sk-text-s);
font-weight: 400;
overflow: hidden;
text-overflow: ellipsis;
Expand Down
1 change: 0 additions & 1 deletion apps/svelte.dev/src/routes/(authed)/playground/[id]/AppControls.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -311,7 +311,6 @@ export default app;`
border: none;
color: currentColor;
font-family: var(--sk-font-ui);
font-size: var(--sk-text-m);
opacity: 0.7;
outline: none;
flex: 1;
Expand Down
2 changes: 1 addition & 1 deletion apps/svelte.dev/src/routes/+error.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,7 @@
}

h1 {
font-size: var(--sk-text-xxl);
font-size: var(--sk-font-size-h1);
margin: 0 0 0.5em 0;
}

Expand Down
10 changes: 0 additions & 10 deletions apps/svelte.dev/src/routes/+page.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -120,13 +120,3 @@
{/snippet}
</Footer>
</div>

<style>
h2 {
line-height: 1.05;
}

p {
font-size: var(--sk-text-m);
}
</style>
6 changes: 4 additions & 2 deletions apps/svelte.dev/src/routes/_home/Deployment.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -145,7 +145,8 @@
left: 0;
width: 100%;
color: var(--sk-text-3);
font-size: var(--sk-text-xs);
font-family: var(--sk-font-ui);
font-size: var(--sk-font-size-ui-medium);
}

.globe span::before {
Expand Down Expand Up @@ -180,7 +181,8 @@
}

.platforms a span {
font-size: var(--sk-text-xs);
font-family: var(--sk-font-ui);
font-size: var(--sk-font-size-ui-medium);
color: var(--sk-text-3);
text-align: center;
}
Expand Down
22 changes: 8 additions & 14 deletions apps/svelte.dev/src/routes/_home/Features.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,10 +34,7 @@
<strong>Deploy anywhere</strong> with adapters.
</p>

<p>
SvelteKit is the framework that
<strong>grows with you</strong>, whatever you end up building.
</p>
<p>SvelteKit is the framework that grows with you, whatever you end up building.</p>
</div>
</div>
</Section>
Expand Down Expand Up @@ -67,18 +64,19 @@

.wall {
margin: 0;
font-size: var(--sk-text-xs);
font-family: var(--sk-font-ui);
font-size: var(--sk-font-size-ui-small);
color: var(--sk-text-4);

strong {
color: var(--sk-text-1);
}
}

p + p {
margin-top: 1em;
}

p,
strong {
color: var(--sk-text-3);
}

@media (min-width: 600px) {
h2 {
margin-top: 0.5em;
Expand Down Expand Up @@ -109,10 +107,6 @@
margin-top: 0.1em;
}

p {
font-size: var(--sk-text-s);
}

.features {
padding-top: clamp(0px, calc(23.333vw - 210px), 70px);
}
Expand Down
5 changes: 2 additions & 3 deletions apps/svelte.dev/src/routes/_home/Hero.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,7 +72,7 @@
}

strong {
font-size: var(--sk-text-l);
font-size: var(--sk-font-size-h2);
text-align: center;
font-family: var(--sk-font-heading);
text-transform: lowercase;
Expand All @@ -93,7 +93,7 @@
gap: 0.1rem;
background: var(--sk-theme-1);
padding: 0.35em 0.8em;
font-size: var(--sk-text-s);
font-family: var(--sk-font-ui);
letter-spacing: 0.05em;
font-weight: 600;
white-space: nowrap;
Expand Down Expand Up @@ -142,7 +142,6 @@

strong {
text-align: left;
font-size: calc(0.04 * var(--width));
}

.hero {
Expand Down
9 changes: 2 additions & 7 deletions apps/svelte.dev/src/routes/_home/HeroSvelteKit.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
<section class="hero">
<div class="hero-contents">
<div class="hero-text">
<div class="tagline">Go full-stack with</div>
<h3 class="tagline">Go full-stack with</h3>
<div class="logotype" role="img" aria-label="SvelteKit">
<Logotype />
</div>
Expand Down Expand Up @@ -78,14 +78,9 @@
}

.hero .tagline {
font-size: var(--sk-text-l);
font-weight: 200;
line-height: 1.2;
font-size: var(--sk-font-size-h2);
color: var(--sk-text-2);
font-family: var(--sk-font-body);
margin-bottom: 2rem;
/* max-width: 12em; */
/* margin: 0 auto; */
}

.logotype :global(svg) {
Expand Down
3 changes: 0 additions & 3 deletions apps/svelte.dev/src/routes/_home/Showcase.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,8 +39,6 @@
h2 {
color: white;
margin-bottom: 1em;
text-transform: uppercase;
font-size: var(--sk-text-s);
text-align: center;
}

Expand Down Expand Up @@ -81,7 +79,6 @@
backdrop-filter: blur(3px);
opacity: 0;
transition: opacity 0.2s;
font-size: var(--sk-text-s);
filter: drop-shadow(0 0 0.5rem rgba(0, 0, 0, 0.5));
}

Expand Down
3 changes: 1 addition & 2 deletions apps/svelte.dev/src/routes/_home/Supporters/index.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,12 +58,11 @@
<style>
h3 {
color: var(--sk-text-2);
font-size: var(--sk-text-l);
}

.intro {
max-width: 28em; /* text balancing */
margin: 1em 0 3.2rem 0;
text-wrap: balance;
}

.supporters-grid {
Expand Down
61 changes: 30 additions & 31 deletions apps/svelte.dev/src/routes/_home/Svelte.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,10 @@

<Section --background="var(--background-1)">
<p class="definition">
<em>/ˈsvɛlt/</em> <span class="adjective">adjective</span>
<span class="description">attractively thin, graceful and stylish</span>
<em>/ˈsvɛlt/</em>
<span class="description">
<span class="adjective">adjective</span> attractively thin, graceful and stylish
</span>
</p>

<div class="grid" style="--columns: 3">
Expand Down Expand Up @@ -68,42 +70,39 @@
</Section>

<style>
p {
font-size: var(--sk-text-s);
}

.definition {
font-size: var(--sk-text-l);
}
display: flex;
align-items: baseline;

.definition em {
font-style: normal;
font-size: var(--sk-text-xxl);
color: var(--sk-theme-1);
}
em {
font-style: normal;
font-size: var(--sk-font-size-h1);
color: var(--sk-theme-1);
}

.definition .adjective {
position: relative;
top: -0.15em;
padding: 0.25em 0.5em 0.1em;
line-height: 1;
margin: 0 1em;
text-transform: uppercase;
font-size: var(--sk-text-s);
background: var(--sk-text-2);
border-radius: var(--sk-border-radius);
color: var(--sk-back-2);
}
.description {
position: relative;
font-family: var(--sk-font-ui);
display: flex;
align-items: center;
bottom: 0.2em;

.definition .description {
display: block;
.adjective {
position: relative;
padding: 0.25em 0.5em 0.1em;
line-height: 1;
margin: 0 1em;
text-transform: uppercase;
font-size: var(--sk-font-size-ui-medium);
background: var(--sk-text-2);
border-radius: var(--sk-border-radius);
font-family: var(--sk-font-ui);
color: var(--sk-back-2);
}
}
}

@media (min-width: 900px) {
.definition .description {
display: inline;
}

.video-container {
order: 2;
grid-column: 2 / 4;
Expand Down
9 changes: 0 additions & 9 deletions apps/svelte.dev/src/routes/_home/common.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,11 +7,6 @@
--background-2: var(--sk-theme-2);
}

.home h2 {
font-size: var(--sk-text-xl);
line-height: 1.2;
}

.home .grid {
display: grid;
gap: 1em;
Expand All @@ -23,10 +18,6 @@
}

@media (min-width: 900px) {
.home h2 {
font-size: var(--sk-text-xxl);
}

.home .grid {
grid-template-columns: repeat(var(--columns), 1fr);
gap: 7rem;
Expand Down
10 changes: 4 additions & 6 deletions apps/svelte.dev/src/routes/blog/+page.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,15 +38,13 @@
padding: var(--sk-page-padding-top) var(--sk-page-padding-side) 6rem var(--sk-page-padding-side);
max-width: var(--sk-page-main-width);
margin: 0 auto;
text-wrap: balance;
}

h2 {
display: inline-block;
/* margin: 3.2rem 0 0.4rem 0; */
color: var(--sk-text-2);
max-width: 18em;
font-size: var(--sk-text-m);
font-weight: 400;
font-size: var(--sk-font-size-h3);
}

.post {
Expand All @@ -56,7 +54,7 @@
content: 'Latest post • ' attr(data-pubdate);
color: var(--sk-text-4);
font-family: var(--sk-font-ui);
font-size: var(--sk-text-xs);
font-size: var(--sk-font-size-ui-small);
font-weight: 400;
text-transform: uppercase;
}
Expand Down Expand Up @@ -86,7 +84,7 @@
}

p {
font-size: var(--sk-text-s);
font-size: var(--sk-font-size-body-small);
color: var(--sk-text-3);
margin: 0;
}
Expand Down
4 changes: 2 additions & 2 deletions apps/svelte.dev/src/routes/blog/[slug]/+page.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,7 @@
}

.standfirst {
font-size: var(--sk-text-s);
font-size: var(--sk-font-size-body-small);
color: var(--sk-text-3);
margin: 0 0 1em 0;
}
Expand All @@ -65,7 +65,7 @@
margin: 0 0 4rem 0;
padding: 1rem 0 0 0;
font-family: var(--sk-font-ui);
font-size: var(--sk-text-xs);
font-size: var(--sk-font-size-ui-small);
text-transform: uppercase;
}

Expand Down
Loading
Loading