diff --git a/assets/tailwind.config.js b/assets/tailwind.config.js index 3d2d138..8857ef4 100644 --- a/assets/tailwind.config.js +++ b/assets/tailwind.config.js @@ -15,7 +15,18 @@ module.exports = { extend: { colors: { brand: "#FD4F00", - } + }, + fontFamily: { + display: [ + "Fraunces", + { + fontVariationSettings: '"WONK" 0,"SOFT" 100', + } + ] + }, + boxShadow: { + 'sharp': '5px 5px 0 0 black' + } }, }, plugins: [ diff --git a/assets/vendor/fonts/Fraunces/README.md b/assets/vendor/fonts/Fraunces/README.md new file mode 100644 index 0000000..76381f6 --- /dev/null +++ b/assets/vendor/fonts/Fraunces/README.md @@ -0,0 +1,7 @@ +# Self-hosting subset fonts + +Fonts are subset with the expectation that multiple font files will be used along with the CSS property `unicode-range` to specify unicodes present in each file. This enables a website browser to automatically download **only** the fonts needed to display text on a given site, and [works in all modern browsers](https://caniuse.com/font-unicode-range). + +To support only "Latin Basic" characters, you can use just the `latin_basic` font file. To use "Latin Extended" characters, you should use *both* `latin_basic` *and* `latin_ext` font files (this makes sure basic punctuation isn’t left out). For Vietnamese, you must use `latin_basic` *and* `vietnamese` subsets at minimum, but may wish to also use `latin_ext`. + +Files are provided along with example CSS to provide an example of how this works. Feel free to copy the fonts.css to jump-start your own projects! diff --git a/assets/vendor/fonts/Fraunces/fonts.css b/assets/vendor/fonts/Fraunces/fonts.css new file mode 100644 index 0000000..334b93d --- /dev/null +++ b/assets/vendor/fonts/Fraunces/fonts.css @@ -0,0 +1,60 @@ +/* Latin Basic, as defined by Google Fonts */ +@font-face { + font-family: 'Fraunces'; + font-display: swap; + font-weight: 100 900; + src: url('fonts/Fraunces--latin_basic.woff2') format('woff2'); + unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; +} + +/* Latin extended, for diacritics in font which are not included in Latin Basic */ +@font-face { + font-family: 'Fraunces'; + font-display: swap; + font-weight: 100 900; + src: url('fonts/Fraunces--latin_ext.woff2') format('woff2'); + unicode-range: U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF; +} + +/* Vietnamese glyphs not included in Latin Basic */ +@font-face { + font-family: 'Fraunces'; + font-display: swap; + font-weight: 100 900; + src: url('fonts/Fraunces--vietnamese.woff2') format('woff2'); + unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+1EA0-1EF9,U+20AB; +} + +/* ---------------------------------------------------------------------------- */ +/* ITALICS */ + +/* Latin Basic, as defined by Google Fonts */ +@font-face { + font-family: 'Fraunces'; + font-display: swap; + font-weight: 100 900; + font-style: italic; + src: url('fonts/Fraunces-Italic--latin_basic.woff2') format('woff2'); + unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; +} + +/* Latin extended, for diacritics in font which are not included in Latin Basic */ +@font-face { + font-family: 'Fraunces'; + font-display: swap; + font-weight: 100 900; + font-style: italic; + src: url('fonts/Fraunces-Italic--latin_ext.woff2') format('woff2'); + unicode-range: U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF; +} + +/* Vietnamese glyphs not included in Latin Basic */ +@font-face { + font-family: 'Fraunces'; + font-display: swap; + font-weight: 100 900; + font-style: italic; + src: url('fonts/Fraunces-Italic--vietnamese.woff2') format('woff2'); + unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+1EA0-1EF9,U+20AB; +} + diff --git a/assets/vendor/fonts/Fraunces/fonts/Fraunces--latin_basic.woff2 b/assets/vendor/fonts/Fraunces/fonts/Fraunces--latin_basic.woff2 new file mode 100644 index 0000000..c29e124 Binary files /dev/null and b/assets/vendor/fonts/Fraunces/fonts/Fraunces--latin_basic.woff2 differ diff --git a/assets/vendor/fonts/Fraunces/fonts/Fraunces--latin_ext.woff2 b/assets/vendor/fonts/Fraunces/fonts/Fraunces--latin_ext.woff2 new file mode 100644 index 0000000..339d653 Binary files /dev/null and b/assets/vendor/fonts/Fraunces/fonts/Fraunces--latin_ext.woff2 differ diff --git a/assets/vendor/fonts/Fraunces/fonts/Fraunces--vietnamese.woff2 b/assets/vendor/fonts/Fraunces/fonts/Fraunces--vietnamese.woff2 new file mode 100644 index 0000000..6f93e41 Binary files /dev/null and b/assets/vendor/fonts/Fraunces/fonts/Fraunces--vietnamese.woff2 differ diff --git a/assets/vendor/fonts/Fraunces/fonts/Fraunces-Italic--latin_basic.woff2 b/assets/vendor/fonts/Fraunces/fonts/Fraunces-Italic--latin_basic.woff2 new file mode 100644 index 0000000..347ebf6 Binary files /dev/null and b/assets/vendor/fonts/Fraunces/fonts/Fraunces-Italic--latin_basic.woff2 differ diff --git a/assets/vendor/fonts/Fraunces/fonts/Fraunces-Italic--latin_ext.woff2 b/assets/vendor/fonts/Fraunces/fonts/Fraunces-Italic--latin_ext.woff2 new file mode 100644 index 0000000..005482a Binary files /dev/null and b/assets/vendor/fonts/Fraunces/fonts/Fraunces-Italic--latin_ext.woff2 differ diff --git a/assets/vendor/fonts/Fraunces/fonts/Fraunces-Italic--vietnamese.woff2 b/assets/vendor/fonts/Fraunces/fonts/Fraunces-Italic--vietnamese.woff2 new file mode 100644 index 0000000..0930bdd Binary files /dev/null and b/assets/vendor/fonts/Fraunces/fonts/Fraunces-Italic--vietnamese.woff2 differ diff --git a/assets/vendor/fonts/Fraunces/index.html b/assets/vendor/fonts/Fraunces/index.html new file mode 100644 index 0000000..0f54708 --- /dev/null +++ b/assets/vendor/fonts/Fraunces/index.html @@ -0,0 +1,87 @@ + + + + + + Fraunces Subset + + + + +

+ Fraunces Subsets +

+

+ Fraunces +

+

+ Latin Basic +

+

+ ! " # $ % & ' ( ) * + , - . / 0 1 2 3 4 5 6 7 8 9 : ; < = > ? @ A B C D E F G H I J K L M N O P Q R S T U V W X Y Z [ \ ] ^ _ ` a b c d e f g h i j k l m n o p q r s t u v w x y z { | } ~   ¡ ¢ £ ¤ ¥ ¦ § ¨ © ª « ¬ ­ ® ¯ ° ± ² ³ ´ µ ¶ · ¸ ¹ º » ¼ ½ ¾ ¿ À Á Â Ã Ä Å Æ Ç È É Ê Ë Ì Í Î Ï Ð Ñ Ò Ó Ô Õ Ö × Ø Ù Ú Û Ü Ý Þ ß à á â ã ä å æ ç è é ê ë ì í î ï ð ñ ò ó ô õ ö ÷ ø ù ú û ü ý þ ÿ ı Œ œ ʼ ˆ ˚ ˜ ‐ – — ‘ ’ ‚ “ ” „ † ‡ • … ‰ ′ ″ ‹ › ⁄ ⁒ ⁴ € ™ − ∕ +

+

+ Latin Extended +

+

+ Ā ā Ă ă Ą ą Ć ć Ĉ ĉ Ċ ċ Č č Ď ď Đ đ Ē ē Ĕ ĕ Ė ė Ę ę Ě ě Ĝ ĝ Ğ ğ Ġ ġ Ģ ģ Ĥ ĥ Ħ ħ Ĩ ĩ Ī ī Ĭ ĭ Į į İ ı IJ ij Ĵ ĵ Ķ ķ ĸ Ĺ ĺ Ļ ļ Ľ ľ Ŀ ŀ Ł ł Ń ń Ņ ņ Ň ň Ŋ ŋ Ō ō Ŏ ŏ Ő ő Œ œ Ŕ ŕ Ŗ ŗ Ř ř Ś ś Ŝ ŝ Ş ş Š š Ţ ţ Ť ť Ŧ ŧ Ũ ũ Ū ū Ŭ ŭ Ů ů Ű ű Ų ų Ŵ ŵ Ŷ ŷ Ÿ Ź ź Ż ż Ž ž Ə ƒ Ơ ơ Ư ư DŽ Dž dž LJ Lj lj NJ Nj nj Ǚ ǚ Ǧ ǧ Ǫ ǫ Ǻ ǻ Ǽ ǽ Ǿ ǿ Ȁ ȁ Ȃ ȃ Ȅ ȅ Ȇ ȇ Ȉ ȉ Ȋ ȋ Ȍ ȍ Ȏ ȏ Ȑ ȑ Ȓ ȓ Ȕ ȕ Ȗ ȗ Ș ș Ț ț Ȫ ȫ Ȭ ȭ Ȱ ȱ Ȳ ȳ ȷ ə Ḉ ḉ Ḍ ḍ Ḏ ḏ Ḕ ḕ Ḗ ḗ Ḝ ḝ Ḡ ḡ Ḥ ḥ Ḫ ḫ Ḯ ḯ Ḷ ḷ Ḻ ḻ Ṃ ṃ Ṇ ṇ Ṉ ṉ Ṍ ṍ Ṏ ṏ Ṑ ṑ Ṓ ṓ Ṛ ṛ Ṟ ṟ Ṣ ṣ Ṥ ṥ Ṭ ṭ Ṯ ṯ Ṹ ṹ Ṻ ṻ Ẁ ẁ Ẃ ẃ Ẅ ẅ Ẓ ẓ ẗ ẞ Ạ ạ Ả ả Ấ ấ Ầ ầ Ẩ ẩ Ẫ ẫ Ậ ậ Ắ ắ Ằ ằ Ẳ ẳ Ẵ ẵ Ặ ặ Ẹ ẹ Ẻ ẻ Ẽ ẽ Ế ế Ề ề Ể ể Ễ ễ Ệ ệ Ỉ ỉ Ị ị Ọ ọ Ỏ ỏ Ố ố Ồ ồ Ổ ổ Ỗ ỗ Ộ ộ Ớ ớ Ờ ờ Ở ở Ỡ ỡ Ợ ợ Ụ ụ Ủ ủ Ứ ứ Ừ ừ Ử ử Ữ ữ Ự ự Ỳ ỳ Ỵ ỵ Ỷ ỷ Ỹ ỹ † ₡ ₣ ₤ ₦ ₧ ₩ ₫ ₭ ₱ ₲ ₵ ₹ ₺ ₼ ₽ +

+

+ Latin Vietnamese +

+

+ Ă ă Đ đ Ĩ ĩ Ũ ũ Ơ ơ Ư ư Ạ ạ Ả ả Ấ ấ Ầ ầ Ẩ ẩ Ẫ ẫ Ậ ậ Ắ ắ Ằ ằ Ẳ ẳ Ẵ ẵ Ặ ặ Ẹ ẹ Ẻ ẻ Ẽ ẽ Ế ế Ề ề Ể ể Ễ ễ Ệ ệ Ỉ ỉ Ị ị Ọ ọ Ỏ ỏ Ố ố Ồ ồ Ổ ổ Ỗ ỗ Ộ ộ Ớ ớ Ờ ờ Ở ở Ỡ ỡ Ợ ợ Ụ ụ Ủ ủ Ứ ứ Ừ ừ Ử ử Ữ ữ Ự ự Ỳ ỳ Ỵ ỵ Ỷ ỷ Ỹ ỹ ₫ +

+
+

+ Fraunces-Italic +

+

+ Latin Basic +

+

+ ! " # $ % & ' ( ) * + , - . / 0 1 2 3 4 5 6 7 8 9 : ; < = > ? @ A B C D E F G H I J K L M N O P Q R S T U V W X Y Z [ \ ] ^ _ ` a b c d e f g h i j k l m n o p q r s t u v w x y z { | } ~   ¡ ¢ £ ¤ ¥ ¦ § ¨ © ª « ¬ ­ ® ¯ ° ± ² ³ ´ µ ¶ · ¸ ¹ º » ¼ ½ ¾ ¿ À Á Â Ã Ä Å Æ Ç È É Ê Ë Ì Í Î Ï Ð Ñ Ò Ó Ô Õ Ö × Ø Ù Ú Û Ü Ý Þ ß à á â ã ä å æ ç è é ê ë ì í î ï ð ñ ò ó ô õ ö ÷ ø ù ú û ü ý þ ÿ ı Œ œ ʼ ˆ ˚ ˜ ‐ – — ‘ ’ ‚ “ ” „ † ‡ • … ‰ ′ ″ ‹ › ⁄ ⁒ ⁴ € ™ − ∕ +

+

+ Latin Extended +

+

+ Ā ā Ă ă Ą ą Ć ć Ĉ ĉ Ċ ċ Č č Ď ď Đ đ Ē ē Ĕ ĕ Ė ė Ę ę Ě ě Ĝ ĝ Ğ ğ Ġ ġ Ģ ģ Ĥ ĥ Ħ ħ Ĩ ĩ Ī ī Ĭ ĭ Į į İ ı IJ ij Ĵ ĵ Ķ ķ ĸ Ĺ ĺ Ļ ļ Ľ ľ Ŀ ŀ Ł ł Ń ń Ņ ņ Ň ň Ŋ ŋ Ō ō Ŏ ŏ Ő ő Œ œ Ŕ ŕ Ŗ ŗ Ř ř Ś ś Ŝ ŝ Ş ş Š š Ţ ţ Ť ť Ŧ ŧ Ũ ũ Ū ū Ŭ ŭ Ů ů Ű ű Ų ų Ŵ ŵ Ŷ ŷ Ÿ Ź ź Ż ż Ž ž Ə ƒ Ơ ơ Ư ư DŽ Dž dž LJ Lj lj NJ Nj nj Ǚ ǚ Ǧ ǧ Ǫ ǫ Ǻ ǻ Ǽ ǽ Ǿ ǿ Ȁ ȁ Ȃ ȃ Ȅ ȅ Ȇ ȇ Ȉ ȉ Ȋ ȋ Ȍ ȍ Ȏ ȏ Ȑ ȑ Ȓ ȓ Ȕ ȕ Ȗ ȗ Ș ș Ț ț Ȫ ȫ Ȭ ȭ Ȱ ȱ Ȳ ȳ ȷ ə Ḉ ḉ Ḍ ḍ Ḏ ḏ Ḕ ḕ Ḗ ḗ Ḝ ḝ Ḡ ḡ Ḥ ḥ Ḫ ḫ Ḯ ḯ Ḷ ḷ Ḻ ḻ Ṃ ṃ Ṇ ṇ Ṉ ṉ Ṍ ṍ Ṏ ṏ Ṑ ṑ Ṓ ṓ Ṛ ṛ Ṟ ṟ Ṣ ṣ Ṥ ṥ Ṭ ṭ Ṯ ṯ Ṹ ṹ Ṻ ṻ Ẁ ẁ Ẃ ẃ Ẅ ẅ Ẓ ẓ ẗ ẞ Ạ ạ Ả ả Ấ ấ Ầ ầ Ẩ ẩ Ẫ ẫ Ậ ậ Ắ ắ Ằ ằ Ẳ ẳ Ẵ ẵ Ặ ặ Ẹ ẹ Ẻ ẻ Ẽ ẽ Ế ế Ề ề Ể ể Ễ ễ Ệ ệ Ỉ ỉ Ị ị Ọ ọ Ỏ ỏ Ố ố Ồ ồ Ổ ổ Ỗ ỗ Ộ ộ Ớ ớ Ờ ờ Ở ở Ỡ ỡ Ợ ợ Ụ ụ Ủ ủ Ứ ứ Ừ ừ Ử ử Ữ ữ Ự ự Ỳ ỳ Ỵ ỵ Ỷ ỷ Ỹ ỹ † ₡ ₣ ₤ ₦ ₧ ₩ ₫ ₭ ₱ ₲ ₵ ₹ ₺ ₼ ₽ +

+

+ Latin Vietnamese +

+

+ Ă ă Đ đ Ĩ ĩ Ũ ũ Ơ ơ Ư ư Ạ ạ Ả ả Ấ ấ Ầ ầ Ẩ ẩ Ẫ ẫ Ậ ậ Ắ ắ Ằ ằ Ẳ ẳ Ẵ ẵ Ặ ặ Ẹ ẹ Ẻ ẻ Ẽ ẽ Ế ế Ề ề Ể ể Ễ ễ Ệ ệ Ỉ ỉ Ị ị Ọ ọ Ỏ ỏ Ố ố Ồ ồ Ổ ổ Ỗ ỗ Ộ ộ Ớ ớ Ờ ờ Ở ở Ỡ ỡ Ợ ợ Ụ ụ Ủ ủ Ứ ứ Ừ ừ Ử ử Ữ ữ Ự ự Ỳ ỳ Ỵ ỵ Ỷ ỷ Ỹ ỹ ₫ +

+
+ + + diff --git a/config/config.exs b/config/config.exs index 9178e35..952dc22 100644 --- a/config/config.exs +++ b/config/config.exs @@ -36,7 +36,7 @@ config :esbuild, version: "0.17.11", default: [ args: - ~w(js/app.js --bundle --target=es2017 --outdir=../priv/static/assets --external:/fonts/* --external:/images/*), + ~w(js/app.js vendor/fonts/Fraunces/fonts.css --bundle --loader:.woff2=file --target=es2017 --entry-names=[name] --outdir=../priv/static/assets --external:/fonts/* --external:/images/*), cd: Path.expand("../assets", __DIR__), env: %{"NODE_PATH" => Path.expand("../deps", __DIR__)} ] diff --git a/lib/wish_web/components/core_components.ex b/lib/wish_web/components/core_components.ex index 2fec803..4a31919 100644 --- a/lib/wish_web/components/core_components.ex +++ b/lib/wish_web/components/core_components.ex @@ -230,8 +230,9 @@ defmodule WishWeb.CoreComponents do