dan/design
1
0
Fork 0
mirror of https://github.com/danbulant/design synced 2026-06-18 22:01:06 +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
</Link>
<Separator />
<Link href="#contact">
<Link href="#contact" padded>
Contact
</Link>
<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"> -->
<div slot="actions">
<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>
</Project>

9
src/components/link.svelte
View file

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