chaos/food-site
1
0
Fork 0
Code Issues Activity

font..?

Browse source
This commit is contained in:
ChaotiCryptidz 2022-06-02 13:54:33 +01:00
parent a81b930507
commit 84fc62c986
No known key found for this signature in database
2 changed files with 12 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
src/mainPage.tsx
View file

@ -6,7 +6,6 @@ import { FoodExcludeTypes } from "./types";
const FONT_TYPES = [
["default", "Default (Comic Sans, Comic Neue or Default)"],
["system", "System Sans Font (as picked by Bootstrap Defaults)"],
["comicneue", "Comic Neue"],
["opendyslexic", "Open Dyslexic"]
];
@ -18,6 +17,10 @@ export class SettingsBlock extends Component {
fontSettingSelectRef = createRef<HTMLSelectElement>()
componentDidMount() {
document.body.setAttribute("data-font", "default");
}
onFontChange() {
if (!this.fontSettingSelectRef.current) return;
let newFont = this.fontSettingSelectRef.current.value;
@ -164,7 +167,7 @@ export class MainPage extends Component<unknown, { toggles: FoodExcludeTypes }>
<FoodItem title="Hendo's Relish" />
<FoodItem title="Worcestershire Sauce" contents={{ containsFish: true }} exclude={this.state.toggles} />
<AdvancedFoodItem title="Spicy Mayo for Fries" extra={"Good with fries"} contents={{ containsEggs: true }} exclude={this.state.toggles} />
<AdvancedFoodItem title="Tomato Ketchup" extra={"Can't be too acidic"} exclude={this.state.toggles} />
<AdvancedFoodItem title="Tomato Ketchup" extra={"Can't be too acidic"} />
</FoodItemsContainer>
<br />

14
src/theme.scss
View file

@ -2,18 +2,19 @@
@import "../node_modules/@fontsource/opendyslexic/latin.css";
$default-fonts: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
$fonts-comic-sans-neue: "Comic Sans MS", "Comic Neue", $default-fonts;
$fonts-comic-neue: "Comic Neue", $default-fonts;
$fonts-opendyslexic: "OpenDyslexic", $default-fonts;
$font-family-sans-serif: $fonts-comic-sans-neue;
$font-sans-serif: $fonts-comic-sans-neue;
// Configuration
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";
@import "../node_modules/bootstrap/scss/utilities";
$default-fonts: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
$fonts-comic-sans-neue: "Comic Sans MS", "Comic Neue", $default-fonts;
$fonts-comic-neue: "Comic Neue", $default-fonts;
$fonts-opendyslexic: "OpenDyslexic", $default-fonts;
// Layout & components
@import "../node_modules/bootstrap/scss/root";
@import "../node_modules/bootstrap/scss/reboot";
@ -58,7 +59,6 @@ body {
}
/* for custom theme settings, options in mainPage.tsx as of writing */
$font-sans-serif: $fonts-comic-sans-neue;
html, html [data-font="default"] {
font-family: $fonts-comic-sans-neue;
}