mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-15 18:31:06 +00:00
Code Issues Projects Releases Packages Wiki Activity

docs(palimpsest): support responsive design

Browse source
This commit is contained in:
Eric Liu 2020-01-12 12:03:15 -08:00
commit 01f65cb308
10 changed files with 338 additions and 28 deletions
Download patch file Download diff file Expand all files Collapse all files

47
palimpsest/src/components/Home.svelte
View file

@ -1,30 +1,50 @@
<script>
import LogoGithub32 from 'carbon-icons-svelte/lib/LogoGithub32';
import Logo from '../assets/logo.png';
import ButtonTile from './ButtonTile.svelte';
$: {
document.title = `Carbon Components Svelte`;
}
</script>
<style>
main {
margin-top: 5.5rem;
margin-top: 5rem;
padding-left: 12rem;
padding-bottom: 2.5rem;
}
@media screen and (max-width: 768px) {
main {
padding-left: 0;
}
}
.bx--grid {
max-width: 66rem;
}
.logo {
max-width: 4.5rem;
max-width: 4rem;
margin-bottom: 0.5rem;
}
h1 {
margin-bottom: 2rem;
font-size: 2rem;
line-height: 1.2;
}
h1 span {
display: block;
}
h3 {
margin-top: 4rem;
margin-bottom: 1.5rem;
font-size: 1.5rem;
}
</style>
<main>
@ -43,11 +63,30 @@
<strong>Svelte</strong>
</span>
</h1>
<h3>The Carbon Design System implemented in Svelte</h3>
<p>The Carbon Design System implemented in Svelte</p>
</div>
</div>
<div class="bx--row">
<div class="bx--col">1</div>
<div class="bx--col">
<h3>Packages</h3>
</div>
</div>
<div class="bx--row bx--no-gutter">
<div class="bx--no-gutter-sm bx--col-md-4 bx--col-lg-4">
<ButtonTile iconLeft={LogoGithub32} href="https://github.com/IBM/carbon-components-svelte">
Carbon Components Svelte
</ButtonTile>
</div>
<div class="bx--no-gutter-sm bx--col-md-4 bx--col-lg-4">
<ButtonTile iconLeft={LogoGithub32} href="https://github.com/IBM/carbon-icons-svelte">
Carbon Icons Svelte
</ButtonTile>
</div>
</div>
<div class="bx--row">
<div class="bx--col">
<h3>Components</h3>
</div>
</div>
</div>
</main>