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 = [ const FONT_TYPES = [
["default", "Default (Comic Sans, Comic Neue or Default)"], ["default", "Default (Comic Sans, Comic Neue or Default)"],
["system", "System Sans Font (as picked by Bootstrap Defaults)"], ["system", "System Sans Font (as picked by Bootstrap Defaults)"],
["comicneue", "Comic Neue"], ["comicneue", "Comic Neue"],
["opendyslexic", "Open Dyslexic"] ["opendyslexic", "Open Dyslexic"]
]; ];
@ -18,6 +17,10 @@ export class SettingsBlock extends Component {
fontSettingSelectRef = createRef<HTMLSelectElement>() fontSettingSelectRef = createRef<HTMLSelectElement>()
componentDidMount() {
document.body.setAttribute("data-font", "default");
}
onFontChange() { onFontChange() {
if (!this.fontSettingSelectRef.current) return; if (!this.fontSettingSelectRef.current) return;
let newFont = this.fontSettingSelectRef.current.value; 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="Hendo's Relish" />
<FoodItem title="Worcestershire Sauce" contents={{ containsFish: true }} exclude={this.state.toggles} /> <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="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> </FoodItemsContainer>
<br /> <br />

14
src/theme.scss
View file

@ -2,18 +2,19 @@
@import "../node_modules/@fontsource/opendyslexic/latin.css"; @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 // Configuration
@import "../node_modules/bootstrap/scss/functions"; @import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables"; @import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins"; @import "../node_modules/bootstrap/scss/mixins";
@import "../node_modules/bootstrap/scss/utilities"; @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 // Layout & components
@import "../node_modules/bootstrap/scss/root"; @import "../node_modules/bootstrap/scss/root";
@import "../node_modules/bootstrap/scss/reboot"; @import "../node_modules/bootstrap/scss/reboot";
@ -58,7 +59,6 @@ body {
} }
/* for custom theme settings, options in mainPage.tsx as of writing */ /* for custom theme settings, options in mainPage.tsx as of writing */
$font-sans-serif: $fonts-comic-sans-neue;
html, html [data-font="default"] { html, html [data-font="default"] {
font-family: $fonts-comic-sans-neue; font-family: $fonts-comic-sans-neue;
} }