kaan/bgenc.net
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Cleanup button styling common code

Browse source
This commit is contained in:
Kaan Barmore-Genç 2024-05-07 23:43:41 -05:00
parent 4c609f6770
commit 7ff5fe20f5
Signed by: kaan
GPG key ID: B2E280771CD62FCF
3 changed files with 27 additions and 33 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
src/_button.scss Normal file
View file

@ -0,0 +1,21 @@
@mixin button($color-bg, $color-text) {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
color: $color-text;
font-weight: 600;
text-decoration: none;
opacity: 0.8;
background-color: $color-bg;
padding: 0.5rem 1rem;
clip-path: var(--clip-path-button);
transition: all var(--animation-speed) var(--animation-type);
user-select: none;
:hover,
:focus-visible {
opacity: 1;
text-decoration-color: unset;
}
}

21
src/lib/Button.svelte
View file

@ -13,29 +13,16 @@
<style lang="scss">
@import '../vars';
@import '../button';
a,
button {
display: flex;
flex-direction: row;
align-items: center;
color: $color-primary-text;
font-weight: 600;
text-decoration: none;
opacity: 0.8;
background-color: $color-primary;
padding: 0.5rem 1rem;
clip-path: var(--clip-path-button);
transition: all var(--animation-speed) var(--animation-type);
user-select: none;
@include button($color-primary, $color-primary-text);
}
/* Disabled */
button {
opacity: 0.6;
cursor: unset;
}
a:hover,
a:focus-visible {
opacity: 1;
text-decoration-color: unset;
}
</style>

18
src/routes/+page.svelte
View file

@ -87,6 +87,7 @@
<style lang="scss">
@import '../vars';
@import '../button';
picture {
max-width: 320px;
@ -108,23 +109,8 @@
}
.socials a {
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
gap: 0.5rem;
background-color: $color-secondary;
color: $color-secondary-text;
padding: 0.5rem 1rem;
@include button($color-secondary, $color-secondary-text);
min-width: 8rem;
clip-path: var(--clip-path-button);
opacity: 0.8;
transition: all var(--animation-speed) var(--animation-type);
user-select: none;
text-decoration: none;
}
.socials a:hover {
opacity: 1;
}
h1 {