diff options
author | Volpeon <git@volpeon.ink> | 2021-04-29 17:53:38 +0200 |
---|---|---|
committer | Volpeon <git@volpeon.ink> | 2021-04-29 17:53:38 +0200 |
commit | 518c7337572c0b7ba01b595aeb94fd36f8e59fdf (patch) | |
tree | a711f51b5459da68aa52fe79d53f21b7e2aafcdd /assets | |
parent | Update (diff) | |
download | volpeon.ink-518c7337572c0b7ba01b595aeb94fd36f8e59fdf.tar.gz volpeon.ink-518c7337572c0b7ba01b595aeb94fd36f8e59fdf.tar.bz2 volpeon.ink-518c7337572c0b7ba01b595aeb94fd36f8e59fdf.zip |
Update
Diffstat (limited to 'assets')
-rw-r--r-- | assets/css/_fonts.scss | 7 | ||||
-rw-r--r-- | assets/css/_vars.scss | 8 | ||||
-rw-r--r-- | assets/css/components/_outer-button.scss | 23 | ||||
-rw-r--r-- | assets/css/scopes/_body.scss | 8 | ||||
-rw-r--r-- | assets/fonts/IBMPlexSans-Medium.ttf | bin | 182088 -> 0 bytes |
5 files changed, 31 insertions, 15 deletions
diff --git a/assets/css/_fonts.scss b/assets/css/_fonts.scss index 9e57600..e278abe 100644 --- a/assets/css/_fonts.scss +++ b/assets/css/_fonts.scss | |||
@@ -8,13 +8,6 @@ | |||
8 | @font-face { | 8 | @font-face { |
9 | font-family: 'IBM Plex Sans'; | 9 | font-family: 'IBM Plex Sans'; |
10 | font-style: normal; | 10 | font-style: normal; |
11 | font-weight: 500; | ||
12 | src: url('/IBMPlexSans-Medium.woff2') format('woff2'); | ||
13 | } | ||
14 | |||
15 | @font-face { | ||
16 | font-family: 'IBM Plex Sans'; | ||
17 | font-style: normal; | ||
18 | font-weight: bold; | 11 | font-weight: bold; |
19 | src: url('/IBMPlexSans-Bold.woff2') format('woff2'); | 12 | src: url('/IBMPlexSans-Bold.woff2') format('woff2'); |
20 | } | 13 | } |
diff --git a/assets/css/_vars.scss b/assets/css/_vars.scss index 260205f..264ff91 100644 --- a/assets/css/_vars.scss +++ b/assets/css/_vars.scss | |||
@@ -13,7 +13,7 @@ $unit-intervals: ( | |||
13 | ); | 13 | ); |
14 | 14 | ||
15 | $responsive-mod-scale: ( | 15 | $responsive-mod-scale: ( |
16 | xs: (.8rem, 1.4), | 16 | xs: (.8rem, 1.37), |
17 | md: (.8rem, 1.6) | 17 | md: (.8rem, 1.6) |
18 | ); | 18 | ); |
19 | 19 | ||
@@ -60,9 +60,9 @@ $gray7: hsl(220, 7%, 100%); | |||
60 | --focus-ring: var(--colors--accent--color), | 60 | --focus-ring: var(--colors--accent--color), |
61 | 61 | ||
62 | --select: ( | 62 | --select: ( |
63 | --bg: hsla(var(--colors--accent--h), var(--colors--accent--s), var(--colors--accent--l), .996), | 63 | --bg: rgba($gray7, .996), |
64 | --img-bg: hsla(var(--colors--accent--h), var(--colors--accent--s), var(--colors--accent--l), .5), | 64 | --img-bg: rgba($gray7, .5), |
65 | --fg: var(--colors--bg-hi), | 65 | --fg: $gray0, |
66 | ), | 66 | ), |
67 | 67 | ||
68 | --link: ( | 68 | --link: ( |
diff --git a/assets/css/components/_outer-button.scss b/assets/css/components/_outer-button.scss index 00c4ccb..d1da93c 100644 --- a/assets/css/components/_outer-button.scss +++ b/assets/css/components/_outer-button.scss | |||
@@ -1,8 +1,9 @@ | |||
1 | @include namespace('outer-button') { | 1 | @include namespace('outer-button') { |
2 | @include store(( | 2 | @include store(( |
3 | --colors: ( | 3 | --colors: ( |
4 | --fg: prop(--colors --bg-hi, $global: true), | 4 | --fg: prop(--colors --bg-hi, $global: true), |
5 | --bg: prop(--colors --fg-lo, $global: true), | 5 | --bg: prop(--colors --fg-lo, $global: true), |
6 | --border: rgba(#000, .1), | ||
6 | --hover: ( | 7 | --hover: ( |
7 | --bg: prop(--colors --accent --color, $global: true), | 8 | --bg: prop(--colors --accent --color, $global: true), |
8 | --fg: prop(--colors --bg-hi, $global: true), | 9 | --fg: prop(--colors --bg-hi, $global: true), |
@@ -23,6 +24,7 @@ | |||
23 | transition: background-color .2s, color .2s; | 24 | transition: background-color .2s, color .2s; |
24 | background-color: prop(--colors --bg); | 25 | background-color: prop(--colors --bg); |
25 | color: prop(--colors --fg); | 26 | color: prop(--colors --fg); |
27 | font-family: $font-fam--large; | ||
26 | font-size: 1rem; | 28 | font-size: 1rem; |
27 | font-weight: 500; | 29 | font-weight: 500; |
28 | text-decoration: none; | 30 | text-decoration: none; |
@@ -40,18 +42,25 @@ | |||
40 | justify-content: center; | 42 | justify-content: center; |
41 | width: prop(--dims --outer, $global: true); | 43 | width: prop(--dims --outer, $global: true); |
42 | height: 100%; | 44 | height: 100%; |
45 | |||
46 | @include next-element('content') { | ||
47 | margin-left: -1px; | ||
48 | border-left: 1px solid prop(--colors --border); | ||
49 | } | ||
43 | } | 50 | } |
44 | 51 | ||
45 | @include element('icon-symbol') { | 52 | @include element('icon-symbol') { |
46 | display: block; | 53 | display: block; |
47 | width: 1.5em; | 54 | width: 1.35em; |
48 | height: 1.5em; | 55 | height: 1.35em; |
49 | } | 56 | } |
50 | 57 | ||
51 | @include element('content') { | 58 | @include element('content') { |
52 | height: 100%; | 59 | height: 100%; |
53 | padding-right: prop(--dims --pad-x); | 60 | padding-right: prop(--dims --pad-x); |
54 | padding-left: prop(--dims --pad-x); | 61 | padding-left: prop(--dims --pad-x); |
62 | transition: border-color .2s; | ||
63 | font-size: 1 / 16 * 15em; | ||
55 | line-height: prop(--dims --outer, $global: true); | 64 | line-height: prop(--dims --outer, $global: true); |
56 | white-space: nowrap; | 65 | white-space: nowrap; |
57 | } | 66 | } |
@@ -61,6 +70,12 @@ | |||
61 | &:hover { | 70 | &:hover { |
62 | background-color: prop(--colors --hover --bg); | 71 | background-color: prop(--colors --hover --bg); |
63 | color: prop(--colors --hover --fg); | 72 | color: prop(--colors --hover --fg); |
73 | |||
74 | @include element('icon') { | ||
75 | @include next-element('content') { | ||
76 | border-left-color: transparent; | ||
77 | } | ||
78 | } | ||
64 | } | 79 | } |
65 | } | 80 | } |
66 | } | 81 | } |
diff --git a/assets/css/scopes/_body.scss b/assets/css/scopes/_body.scss index ef7d762..faf1ef0 100644 --- a/assets/css/scopes/_body.scss +++ b/assets/css/scopes/_body.scss | |||
@@ -71,5 +71,13 @@ | |||
71 | img { | 71 | img { |
72 | max-width: 100%; | 72 | max-width: 100%; |
73 | } | 73 | } |
74 | |||
75 | @include media('<=sm') { | ||
76 | font-size: 1 / 16 * 17em; | ||
77 | } | ||
78 | |||
79 | @include media('<=xs') { | ||
80 | font-size: 1em; | ||
81 | } | ||
74 | } | 82 | } |
75 | } | 83 | } |
diff --git a/assets/fonts/IBMPlexSans-Medium.ttf b/assets/fonts/IBMPlexSans-Medium.ttf deleted file mode 100644 index b278201..0000000 --- a/assets/fonts/IBMPlexSans-Medium.ttf +++ /dev/null | |||
Binary files differ | |||