summaryrefslogtreecommitdiffstats
path: root/assets
diff options
context:
space:
mode:
Diffstat (limited to 'assets')
-rw-r--r--assets/css/_fonts.scss7
-rw-r--r--assets/css/_vars.scss8
-rw-r--r--assets/css/components/_outer-button.scss23
-rw-r--r--assets/css/scopes/_body.scss8
-rw-r--r--assets/fonts/IBMPlexSans-Medium.ttfbin182088 -> 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