dan/design
1
0
Fork 0
mirror of https://github.com/danbulant/design synced 2026-07-06 03:20:49 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Add padding to navbar links

Browse source
This commit is contained in:
Daniel Bulant 2021-01-02 14:20:47 +01:00
parent 2f7dbefc02
commit 8ad900e33c
2 changed files with 9 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/App.svelte
View file

@ -19,7 +19,7 @@ import Flexbox from "./components/flexbox.svelte";
Daniel Bulant Daniel Bulant
</Link> </Link>
<Separator /> <Separator />
<Link href="#contact"> <Link href="#contact" padded>
Contact Contact
</Link> </Link>
<Button bind:value={$darkmode} outline={$darkmode}>{$darkmode ? "Dark" : "Light"} mode</Button> <Button bind:value={$darkmode} outline={$darkmode}>{$darkmode ? "Dark" : "Light"} mode</Button>
@ -60,7 +60,7 @@ import Flexbox from "./components/flexbox.svelte";
<!-- <img draggable={false} src="https://learner.danbulant.eu/logo.png" alt="Learner logo" slot="preview" class="preview"> --> <!-- <img draggable={false} src="https://learner.danbulant.eu/logo.png" alt="Learner logo" slot="preview" class="preview"> -->
<div slot="actions"> <div slot="actions">
<Button newTab href="https://play.google.com/store/apps/details?id=cz.janrossler.learner">Application</Button> <Button newTab href="https://play.google.com/store/apps/details?id=cz.janrossler.learner">Application</Button>
<Button newTab outline href="https://learner.danbulant.eu">Website</Button> <Button newTab outline href="https://beta.learnerapp.eu">Website</Button>
</div> </div>
</Project> </Project>

9
src/components/link.svelte
View file

@ -1,9 +1,10 @@
<script> <script>
export var colored = true; export var colored = true;
export var padded = false;
</script> </script>
<span> <span>
<a {...$$restProps} class:colored> <a {...$$restProps} class:colored class:padded>
<slot /> <slot />
</a> </a>
</span> </span>
@ -13,6 +14,10 @@
box-sizing: border-box; box-sizing: border-box;
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
} }
.padded {
display: inline-block;
margin: 0 5px;
}
* { * {
margin:0; margin:0;
padding:0; padding:0;
@ -45,7 +50,7 @@
border-radius: 5px; border-radius: 5px;
transform: scaleX(0); transform: scaleX(0);
opacity: 0.1; opacity: 0.1;
transition: .25s linear, .4s opacity; transition: .2s linear, .4s opacity;
} }
a:hover:before, a:hover:before,
a:focus:before { a:focus:before {