diff --git a/components/Custom/Fonts/Index.vue b/components/Custom/Fonts/Index.vue index 5661906..c0b9417 100644 --- a/components/Custom/Fonts/Index.vue +++ b/components/Custom/Fonts/Index.vue @@ -86,16 +86,30 @@ const defaults = { const fontFamilyOptions = [ { value: defaults.fontFamily, label: 'Default' }, - { value: 'Inter', label: 'Inter' }, - { value: 'Roboto', label: 'Roboto' }, - { value: 'Roboto Mono', label: 'Roboto Mono' }, - { value: 'DM Sans', label: 'DM Sans' }, - { value: 'Reddit Mono', label: 'Reddit Mono' }, - { value: 'Poppins', label: 'Poppins' }, - { value: 'Noto Sans', label: 'Noto Sans' }, - { value: 'Lato', label: 'Lato' }, - { value: 'Quicksand', label: 'Quicksand' }, - { value: 'Outfit', label: 'Outfit' }, + ...[ + { value: 'Inter', label: 'Inter' }, + { value: 'Roboto', label: 'Roboto' }, + { value: 'Roboto Mono', label: 'Roboto Mono' }, + { value: 'DM Sans', label: 'DM Sans' }, + { value: 'Reddit Mono', label: 'Reddit Mono' }, + { value: 'Poppins', label: 'Poppins' }, + { value: 'Noto Sans', label: 'Noto Sans' }, + { value: 'Outfit', label: 'Outfit' }, + { value: 'Share Tech Mono', label: 'Share Tech Mono' }, + { value: 'JetBrains Mono', label: 'JetBrains Mono' }, + { value: 'Lora', label: 'Lora' }, + { value: 'Libre Baskerville', label: 'Libre Baskerville' }, + { value: 'Bricolage Grotesque', label: 'Bricolage Grotesque' }, + { value: 'Syne', label: 'Syne' }, + { value: 'Sora', label: 'Sora' }, + { value: 'Roboto Serif', label: 'Roboto Serif' }, + { value: 'Hedvig Letters Serif', label: 'Hedvig Letters Serif' }, + { value: 'Literata', label: 'Literata' }, + ].sort((a, b) => { + if (a.label < b.label) return -1 + if (a.label > b.label) return 1 + return 0 + }), ] const fontSizeData = { diff --git a/styles/deepstyled/components/cards/_card-big.scss b/styles/deepstyled/components/cards/_card-big.scss index 5cdf037..75c8e04 100644 --- a/styles/deepstyled/components/cards/_card-big.scss +++ b/styles/deepstyled/components/cards/_card-big.scss @@ -58,7 +58,7 @@ font-weight: bold; background-color: transparent !important; padding: var(--p-input-select) !important; - translate: calc(var(--p-input-select) * -1) 0; + // translate: calc(var(--p-input-select) * -1) 0; transition: all .2s ease-in-out; &:focus { @@ -67,24 +67,30 @@ border-radius: 1rem; background-color: hsla(var(--accent-hsl) / 0.15) !important; color: var(--c-accent); - translate: 0 0 !important; + // translate: 0 0 !important; } } input { - --p-input-select: 0.06em !important; - // font-size: 1.4em; + --p-input-select: 0.16em !important; + font-size: 1.45em; } select { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; background: none; border: none; appearance: none; -webkit-appearance: none; -moz-appearance: none; - // font-size: 1.1em !important; option { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 3rem; font-size: 0.6em !important; background-color: var(--c-surface-2) !important; } @@ -94,7 +100,7 @@ input, select { - transform: translateY(2px); + color: var(--c-accent); } } } \ No newline at end of file